/* ── tool.css — Charakter „URL-Tools“ ───────────────────────────────────────────────────────────────────
   WAS:   Akzente (Himmelblau · Orange · Limette = Host · Pfad · Query, die drei großen Teile einer URL), die Farben der
          übrigen Teile (Protokoll, Benutzer, Passwort, Port, Fragment), Raster Eingabe | Ergebnis, Textflächen, hinweise,
          und das Hauptbild in zwei Gestalten: die ANATOMIE (URL in farbigen Teilen) und die ZEICHENKARTE (Zeichen -> Bytes -> %XX).
   WARUM: Eine URL liest sich als graue Zeichenkette schlecht. Hier hat jeder Teil von Anfang an dieselbe Farbe — im Bild, in
          der Kachel darunter, in der Tabelle. Bei der Kodierung zeigt die Karte, WAS mit jedem einzelnen Zeichen passiert.
   LAUF 2 (27.10.): Kachelbereich entfernt (Regeln unten auskommentiert), Ergebnis-Tafel feste Höhe statt flex-Aufblähung, Zerlegen volle Breite,
          Profi-Teile in Kästen (.fb-faltbar, Regeln aus werk.css), Kopf-Icon als Bild, Tool-Profil (.tool-profil, wie pw-strength).
   WIE ÄNDERN: Teilfarben nur über --c-* unten; Grundbausteine in ../_werk/werk.css (nicht hier ändern).
   Klassenpräfix u7- (nur dieses Tool). */
:root {
  --a1: #38bdf8; --a2: #fb923c; --a3: #a3e635; --a1-tinte: #06202e;
  --c-schema: #c084fc; --c-user: #f87171; --c-pass: #fb7185; --c-host: var(--a1); --c-port: #2dd4bf; --c-pfad: var(--a2); --c-query: var(--a3); --c-frag: #f472b6;
}
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) {
  --a1: #0284c7; --a2: #c2410c; --a3: #4d7c0f; --c-schema: #7e22ce; --c-user: #b91c1c; --c-pass: #be123c; --c-port: #0f766e; --c-frag: #be185d; } }
:root[data-thema="hell"] { --a1: #0284c7; --a2: #c2410c; --a3: #4d7c0f; --c-schema: #7e22ce; --c-user: #b91c1c; --c-pass: #be123c; --c-port: #0f766e; --c-frag: #be185d; }

/* Kopf-Icon: Original-Icon (fast quadratisch, dunkel, transparente Ecken) füllt die Glyphenfläche; trägt sich auf hell und dunkel */
.kopf-glyphe { background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); overflow: hidden; }
.kopf-glyphe img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Raster: Kodieren/Dekodieren oben Eingabe | Ergebnis (gleich breit), Zerlegen und alles Übrige über die ganze Breite */
.u7-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
/* .u7-karte, .u7-werte { grid-column: 1 / -1; }   — Lauf 2: Kachelbereich/Hauptbild-Tafel entfallen */
.u7-anat-tafel, .u7-param, .u7-kasten { grid-column: 1 / -1; }
html[data-modus="z"] .u7-ein { grid-column: 1 / -1; }
.u7-ein, .u7-aus { display: flex; flex-direction: column; }
.versteckt { display: none !important; }

/* Textflächen */
.u7-text { display: block; width: 100%; min-height: 150px; resize: vertical; padding: 14px 16px; border-radius: var(--r); border: 1.5px solid var(--linie-stark);
  background: var(--flaeche-2); color: var(--text); font: 500 19px/1.5 var(--mono); outline: none; overflow-wrap: anywhere; transition: border-color .15s, box-shadow .15s, background .15s; }
.u7-text::placeholder { color: var(--sehr-leise); }
.u7-text:focus { border-color: var(--a1); box-shadow: var(--fokus); background: var(--flaeche); }
.u7-text.fehlerhaft { border-color: var(--fehler); background: var(--fehler-grund); }
/* .u7-ausgabe { flex: 1; background: …; }   — Lauf 2: flex:1 blähte die Ergebnisfläche auf die Höhe der linken Spalte auf */
.u7-ausgabe { background: color-mix(in srgb, var(--a2) 7%, var(--flaeche-2)); }
html[data-modus="z"] .u7-ein .u7-text { min-height: 88px; }   /* Zerlegen: Eingabe wirkt einzeilig/kompakt, Anatomie darunter ist das Ergebnis */
.u7-ein .segment { margin-left: auto; }
.u7-kopf-aktionen { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.u7-kopf-aktionen .ikon-knopf { height: 38px; padding: 0 11px; }
.u7-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.u7-aktionen:empty { display: none; }
#kopier-platz { display: contents; }
.u7-verfahren { margin-top: 14px; }
.u7-verfahren .u7-art-satz { margin-top: 8px; }
.u7-bsp { margin-top: 16px; }
.u7-bsp .feld-label { margin-bottom: 7px; }
.u7-bsp .chip { min-height: 40px; padding: 4px 12px; }

/* Vorschlag */
.u7-vorschlag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 9px 12px; border-radius: var(--r);
  background: color-mix(in srgb, var(--a3) 14%, transparent); border: 1px solid color-mix(in srgb, var(--a3) 45%, transparent); font-size: 15px; }
.u7-vorschlag .chip { min-height: 36px; padding: 4px 12px; background: var(--flaeche); border-color: color-mix(in srgb, var(--a3) 60%, transparent); }

/* Optionen */
.u7-optionen { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie); }
.u7-opt .feld-label { margin-bottom: 5px; }
.u7-schalter { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-inhalt .u7-optionen { margin-top: 0; padding-top: 0; border-top: 0; }   /* im eingeklappten Kasten ohne eigene Trennlinie */
[data-fuer].versteckt { display: none !important; }
.u7-art-satz { flex: 1 1 100%; margin: 0; font-size: 14px; line-height: 1.5; color: var(--leise); }
.u7-haken { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 2px solid var(--linie-stark); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--a1) 16%, var(--flaeche)); border-color: var(--a1); }
.chip[aria-pressed="true"] .u7-haken { background: var(--a1); border-color: var(--a1); }
.chip[aria-pressed="true"] .u7-haken::after { content: ""; width: 9px; height: 5px; border: solid var(--a1-tinte); border-width: 0 0 2.4px 2.4px; transform: translateY(-1px) rotate(-45deg); }
.tafel-kopf .ikon-knopf { height: 38px; padding: 0 11px; }

/* Hinweise unter dem Ergebnis */
.u7-hinweise { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.u7-hinweise:empty { display: none; }
.u7-hinweise li { padding: 10px 12px; border-radius: var(--r); font-size: 15px; line-height: 1.45; color: var(--text);
  background: color-mix(in srgb, var(--hinweis) 10%, transparent); border: 1px solid color-mix(in srgb, var(--hinweis) 38%, transparent); }
.u7-hinweise li.schwer { background: var(--fehler-grund); border-color: color-mix(in srgb, var(--fehler) 45%, transparent); }
.u7-hinweise li.info { background: var(--flaeche-2); border-color: var(--linie); color: var(--leise); }
.u7-hinweise li button { border: 0; background: none; padding: 0; margin-left: 4px; color: var(--a1); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.u7-hinweise code { font-family: var(--mono); font-size: .95em; }

/* ── Hauptbild ── */
.u7-karte-satz { margin: -4px 0 16px; color: var(--leise); font-size: 15.5px; }
.u7-leer { margin: 0; padding: 26px 10px; text-align: center; color: var(--leise); }
.u7-leer.klein { padding: 12px 4px; text-align: left; font-size: 15px; }

/* Anatomie: die URL in farbigen Teilen. Jeder Teil = Text, Balken in Teilfarbe, Beschriftung */
.u7-anat { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 0; padding: 4px 0 2px; }
.u7-tok { --c: var(--leise); display: flex; flex-direction: column; min-width: 0; max-width: 100%; padding: 4px 3px 6px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; outline: none;
  transition: opacity .15s, background .15s, border-color .15s; }
.u7-tok:hover, .u7-tok:focus-visible, .u7-tok.hl { background: color-mix(in srgb, var(--c) 13%, transparent); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.u7-tok:focus-visible { box-shadow: var(--fokus); }
.u7-tok-t { font: 500 clamp(18px, 2.5vw, 30px)/1.3 var(--mono); overflow-wrap: anywhere; padding: 0 4px; color: var(--text); }
.u7-tok-b { height: 5px; border-radius: 3px; background: var(--c); margin: 5px 4px 0; }
.u7-tok-l { margin: 8px 4px 0; font: 700 12px/1 var(--schrift); letter-spacing: .09em; text-transform: uppercase; color: var(--c); }
.u7-tok.leer .u7-tok-t { color: var(--sehr-leise); }
.u7-trenn { padding: 4px 0 6px; align-self: flex-start; }
.u7-trenn .u7-tok-t { color: var(--sehr-leise); padding: 0 1px; }
.u7-anat.hover .u7-tok:not(.hl), .u7-anat.hover .u7-trenn { opacity: .42; }
.u7-pz { color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); border-radius: 5px; padding: 0 1px; }
.t-schema { --c: var(--c-schema); } .t-user { --c: var(--c-user); } .t-pass { --c: var(--c-pass); } .t-host { --c: var(--c-host); }
.t-port { --c: var(--c-port); } .t-pfad { --c: var(--c-pfad); } .t-query { --c: var(--c-query); } .t-frag { --c: var(--c-frag); }
/* Lauf 2 entfallen: .wert:is(.t-schema, .t-user, .t-pass, .t-host, .t-port, .t-pfad, .t-query, .t-frag) .wert-label::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: 0; } */
/* Lauf 2 entfallen: .wert.hl { border-color: var(--c, var(--linie-stark)); box-shadow: 0 0 0 1px var(--c, transparent); } */
/* Lauf 2 entfallen: .wert-zahl.klein { font-size: 18px; } */
/* Lauf 2 entfallen: .wert.breit { grid-column: 1 / -1; } */
/* Lauf 2 entfallen: .wert.breit .wert-zahl { font-size: 20px; } */

/* Zeichenkarte */
.u7-zellen { display: flex; flex-wrap: wrap; gap: 7px; }
.u7-z { --c: var(--linie-stark); display: grid; grid-template-rows: auto auto auto; justify-items: stretch; min-width: 50px; padding: 0 0 6px; border-radius: 12px; border: 1.5px solid var(--c);
  background: color-mix(in srgb, var(--c) 9%, var(--flaeche-2)); text-align: center; outline: none; transition: transform .15s, background .15s; }
.u7-z:hover, .u7-z:focus-visible { background: color-mix(in srgb, var(--c) 20%, var(--flaeche-2)); transform: translateY(-2px); }
.u7-z:focus-visible { box-shadow: var(--fokus); }
.u7-z-o, .u7-z-u { padding: 6px 8px 4px; font: 700 22px/1.2 var(--mono); overflow-wrap: anywhere; word-break: break-all; }
.u7-z-o.seq, .u7-z-u.seq { font-size: 14px; letter-spacing: -.03em; white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.u7-z-b { padding: 4px 6px; font: 500 12.5px/1.2 var(--mono); color: var(--leise); border-top: 1px dashed var(--linie-stark); border-bottom: 1px dashed var(--linie-stark); }
.u7-z.roh { background: transparent; border-color: var(--linie); }
.u7-z.roh .u7-z-o, .u7-z.roh .u7-z-u { color: var(--leise); font-weight: 500; }
.u7-z.roh .u7-z-b { border-color: var(--linie); color: var(--sehr-leise); }
.u7-z.b1 { --c: var(--a1); } .u7-z.b2 { --c: var(--a2); } .u7-z.b3 { --c: var(--a3); } .u7-z.plus { --c: var(--c-schema); }
.u7-z.fehler { --c: var(--fehler); } .u7-z.bleibt { --c: var(--hinweis); }
.u7-z:not(.roh) .u7-z-o, .u7-z:not(.roh) .u7-z-u { color: var(--c); }
.u7-mehr { margin: 12px 0 0; font-size: 14px; color: var(--hinweis); }
.u7-legende { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--leise); }
.u7-legende span { display: inline-flex; align-items: center; gap: 7px; }
.u7-legende i { width: 14px; height: 14px; border-radius: 5px; border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 25%, transparent); }
.u7-legende i.roh { --c: var(--linie-stark); background: transparent; }

/* Pfad + Parameter */
/* Lauf 2 entfallen: .u7-pfad { grid-column: 1 / 2; } */
/* Lauf 2 entfallen: .u7-param { grid-column: 2 / 3; } */
.u7-segmente { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: seg; }
.u7-seg { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 8px 8px 12px; border-radius: var(--r-klein); background: var(--flaeche-2); border: 1px solid var(--linie); }
.u7-nr { font: 700 13px var(--mono); color: var(--sehr-leise); }
.u7-seg-t { font: 500 18px/1.3 var(--mono); overflow-wrap: anywhere; min-width: 0; }
.u7-seg-t small { display: block; margin-top: 2px; font-size: 13px; color: var(--sehr-leise); }
.u7-seg-t.leerer { color: var(--sehr-leise); font-style: italic; font-family: var(--schrift); }
.u7-param-liste { display: grid; gap: 6px; }
.u7-p { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto minmax(0, 2fr) auto; gap: 4px 8px; align-items: center; padding: 8px 8px 8px 12px; border-radius: var(--r-klein); background: var(--flaeche-2); border: 1px solid var(--linie); }
.u7-p-n { font: 700 17px/1.3 var(--mono); color: var(--c-query); overflow-wrap: anywhere; min-width: 0; }
.u7-p-w { font: 500 17px/1.3 var(--mono); overflow-wrap: anywhere; min-width: 0; }
.u7-p-w small, .u7-p-n small { display: block; font: 500 12.5px var(--schrift); color: var(--sehr-leise); }
.u7-p-w.leerer { color: var(--sehr-leise); font-style: italic; font-family: var(--schrift); }
.u7-mal { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font: 700 12px var(--mono); color: var(--hinweis); background: color-mix(in srgb, var(--hinweis) 14%, transparent); border: 1px solid color-mix(in srgb, var(--hinweis) 40%, transparent); }
.u7-kasten .kopier:not(.breit), .u7-param .kopier:not(.breit) { width: 34px; height: 34px; }

/* Lauf 2 entfallen: @media (min-width: 1100px) { .u7-werte .werte { grid-template-columns: repeat(3, 1fr); } } */

/* Tablet */
@media (max-width: 980px) {
  .u7-raster { grid-template-columns: minmax(0, 1fr); }
  /* .u7-pfad, .u7-param { grid-column: 1 / -1; }   — Lauf 2: beide ohnehin über die volle Breite */
}
/* Handy */
@media (max-width: 640px) {
  .u7-text { font-size: 16px; min-height: 120px; padding: 12px; }
  .u7-optionen { gap: 12px; }
  .u7-opt { flex: 1 1 100%; }
  .u7-opt .segment { width: 100%; }
  .u7-opt .segment button { flex: 1; padding-left: 6px; padding-right: 6px; }
  .u7-aktionen .ikon-knopf .knopf-text { display: inline; font-size: 14px; }
  .tafel-kopf { flex-wrap: wrap; }
  #modus { width: 100%; }
  #modus button { flex: 1; padding-left: 6px; padding-right: 6px; }
  .u7-tok-t { font-size: 19px; }
  .u7-z { min-width: 44px; }
  .u7-z-o, .u7-z-u { font-size: 19px; padding: 5px 5px 3px; }
  .u7-z-o.seq, .u7-z-u.seq { font-size: 12.5px; }
  .u7-z-b { font-size: 11.5px; }
  .u7-p { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .u7-p-n { grid-column: 2; } .u7-p-nk { grid-column: 3; }
  .u7-p-w { grid-column: 2; } .u7-p-wk { grid-column: 3; }
  .u7-p .u7-nr { grid-row: 1 / span 2; align-self: start; padding-top: 8px; }
/* Lauf 2 entfallen:   .u7-werte .werte { grid-template-columns: 1fr 1fr; } */
}


/* ── Lauf 2: Kästen, Details für Entwickler, Tool-Profil ── */
.fb-faltbar .fb-inhalt { margin-top: 14px; }
.fb-inhalt > :first-child { margin-top: 0; }
.u7-unter { margin: 20px 0 10px; font: 700 15px/1.3 var(--schrift); color: var(--text); }
.u7-dl { display: grid; gap: 6px; }
.u7-dz { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 8px 8px 12px; border-radius: var(--r-klein); background: var(--flaeche-2); border: 1px solid var(--linie); }
.u7-dz-l { font: 700 12px/1.2 var(--schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.u7-dz-v { font: 500 17px/1.3 var(--mono); overflow-wrap: anywhere; }
.u7-dz-w { min-width: 0; }
.u7-dz-w small { display: block; margin-top: 2px; font: 500 13px/1.35 var(--schrift); color: var(--sehr-leise); }
.u7-kasten .u7-segmente { margin-top: 0; }
.u7-kasten .u7-hinweise { margin-top: 14px; }
.u7-kasten .u7-aktionen:has(#json-platz:empty) { display: none; }

.tool-profil { margin-top: 18px; padding: 20px; border-radius: var(--r-gross); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); min-width: 0; }
.tool-profil-titel { margin: 0 0 10px; font: 700 15px/1.2 var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); display: flex; align-items: center; gap: 9px; }
.tool-profil-titel::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--a1); }
.tool-profil h3 { margin: 18px 0 8px; font: 700 16px/1.3 var(--schrift); color: var(--text); }
.tool-profil p { margin: 0 0 10px; color: var(--leise); line-height: 1.6; }
.tool-profil-einl { color: var(--text); }
.tool-profil-liste { margin: 0; padding: 0 0 0 20px; color: var(--leise); line-height: 1.55; display: grid; gap: 4px; }
.tool-profil-faq { display: grid; gap: 8px; margin-top: 8px; }
.tool-profil-faq details { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r); padding: 0 16px; }
.tool-profil-faq summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.tool-profil-faq summary::-webkit-details-marker { display: none; }
.tool-profil-faq summary::after { content: "+"; margin-left: auto; font: 500 22px/1 var(--mono); color: var(--sehr-leise); transition: transform 0.25s var(--kurve); }
.tool-profil-faq details[open] summary::after { transform: rotate(45deg); }
.tool-profil-faq details p { margin: 0 0 14px; }

/* ── Desktop (≥ 761 px) ── */
@media (min-width: 761px) {
  .u7-ein, .u7-aus { padding: 22px; }
}
/* ── Handy (≤ 760 px): eine Spalte, Eingabe zuerst, dann Ergebnis; Beispiele nur im leeren Feld ── */
@media (max-width: 760px) {
  html[data-leer="0"] .u7-bsp { display: none; }
  .tool-profil { padding: 16px; border-radius: 18px; }
  .u7-dz { grid-template-columns: minmax(0, 1fr) auto; }
  .u7-dz-l { grid-column: 1 / -1; }
  .u7-kopf-aktionen { margin-left: 0; }
}