/* ── tool.css — Charakter „JWT-Parser“ ─────────────────────────────────────────────────────────────────
   WAS:   Akzentfarben (Himmelblau · Rosa · Violett), Raster der Tafeln, Hauptbild = Token-Band (drei Teile, Breite nach
          Länge) + Zeitstrahl mit „jetzt“-Nadel, Befunde-Liste, eingefärbtes JSON, Claim-Kacheln, Signatur-Prüfung.
   WARUM: Ein JWT ist zuerst eine Zeichenkette aus drei Teilen und hat ein Verfallsdatum. Das Band zeigt den Aufbau auf
          einen Blick, der Strahl beantwortet „ist es noch gültig und wie lange?“ — statt nur Zahlen zu listen.
          Farben tragen Bedeutung: Rosa = Header, Himmelblau = Payload, Violett = Signatur (gleich in Band, JSON-Tafeln und
          Signatur-Tafel); Grün/Rot/Gelb bleiben den Urteilen vorbehalten (gültig / abgelaufen / Hinweis).
   WIE ÄNDERN: Farben nur über --a1/--a2/--a3 unten (a1 = Payload/Akzent, a2 = Header, a3 = Signatur). Zeitstrahl-Geometrie
          (Positionen 0…1) kommt aus kern.js zeitstrahl() und wird in main.js als --x gesetzt. Grundbausteine stehen in
          ../_werk/werk.css (gemeinsam für alle Tools).
   LAYOUT (Lauf 2, 27.10.): EINE durchgehende Spalte (.werk 1040 px): Eingabe → Status/Strahl → Header | Payload (zwei gleich breite Karten) →
          eingeklappte Kästen (Claims, Signatur) → Über dieses Tool → Hilfe & Infos. Desktop (≥ 761 px) und Handy (≤ 760 px) haben je einen
          eigenen Medienblock am Ende. Das Token-Band ist entfallen (auskommentiert). */
.werk { width: min(1040px, 100%); }
.kopf-glyphe { width: 82px; background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); }   /* Original-Icon (breit, transparent) auf neutralem Grund */
.kopf-glyphe img { display: block; width: 68px; height: auto; max-height: 44px; object-fit: contain; }
:root { --a1: #38bdf8; --a2: #ff6b9d; --a3: #a78bfa; --a1-tinte: #04202e; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #0a7fb5; --a2: #d6336c; --a3: #6d4ad8; --a1-tinte: #ffffff; } }
:root[data-thema="hell"] { --a1: #0a7fb5; --a2: #d6336c; --a3: #6d4ad8; --a1-tinte: #ffffff; }

/* .jw-raster { display: grid; gap: 14px; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); align-items: start; }
.spalte { display: grid; gap: 14px; min-width: 0; align-content: start; } */
.jw-spalte { display: grid; gap: 14px; min-width: 0; }
.jw-klein { margin: 8px 0 0; font-size: 14px; color: var(--leise); line-height: 1.45; }
.jw-klein:empty { display: none; }

/* ── Eingabe ── */
.jw-textrahmen { align-items: stretch; }
.jw-textrahmen textarea { flex: 1; min-width: 0; width: 100%; min-height: 112px; max-height: 55vh; resize: vertical; border: 0; background: transparent; outline: none;
  padding: 12px 14px; font: 500 16px/1.45 var(--mono); color: var(--text); overflow-wrap: anywhere; word-break: break-all; }
.jw-textrahmen textarea::placeholder { color: var(--sehr-leise); }
.jw-textinfo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 14px; color: var(--leise); min-height: 24px; }
.jw-leer { border: 0; background: none; padding: 2px 4px; color: var(--a1); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.jw-privat span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* Lauf 2: einzeilig gekürzt */
.jw-privat { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-klein); font-size: 14px; line-height: 1.4; color: var(--leise);
  background: color-mix(in srgb, var(--a3) 9%, var(--flaeche-2)); border: 1px solid color-mix(in srgb, var(--a3) 28%, transparent); }
.jw-privat svg { flex: none; width: 18px; height: 18px; color: var(--a3); }
.jw-beispiele { margin-top: 12px; }
.jw-beispiele .chip { min-height: 38px; padding: 5px 12px; font-weight: 700; }
.meldung .jw-dekodiert { display: block; margin-top: 6px; padding: 8px 10px; border-radius: var(--r-klein); background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--leise);
  font: 500 13.5px/1.4 var(--mono); max-height: 120px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.meldung .jw-dekodiert-kopf { display: block; margin-top: 8px; font-size: 13.5px; }

/* ── Hauptbild ── */
.fb-kopf .jw-marke, .fb-kopf .jw-kopie { margin-left: auto; }
.jw-marke { font: 700 13.5px var(--schrift); padding: 5px 11px; border-radius: 99px; background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--leise); white-space: nowrap; }
.jw-marke.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--flaeche)); }
.jw-marke.falsch { color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 50%, transparent); background: var(--fehler-grund); }
.jw-marke.warn { color: var(--hinweis); border-color: color-mix(in srgb, var(--hinweis) 50%, transparent); }
.jw-leer-hinweis { margin: 0; padding: 38px 10px; text-align: center; color: var(--leise); font-size: 17px; }

.jw-status { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.jw-status-punkt { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--farbe, var(--leise)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--farbe, var(--leise)) 20%, transparent); }
.jw-status.ok { --farbe: var(--ok); } .jw-status.nein { --farbe: var(--fehler); } .jw-status.warn { --farbe: var(--hinweis); }
.jw-status-text { display: grid; gap: 2px; min-width: 0; }
.jw-status-text strong { font: 700 clamp(21px, 2.6vw, 28px)/1.15 var(--titel); letter-spacing: -0.01em; color: var(--farbe, var(--text)); }
.jw-status-text span { color: var(--leise); font-size: 14.5px; line-height: 1.4; }

/* Lauf 2: Token-Band entfällt (Bytezahlen, Längenverteilung) — Regeln auskommentiert
/ * Band: drei Teile, Breite nach Länge (flex-grow = Zeichen), weicher Übergang beim Ändern * /
.jw-band { display: flex; align-items: stretch; gap: 0; margin: 0 0 20px; }
.jw-seg { --c: var(--a1); flex: var(--g, 1) 1 0; min-width: 74px; padding: 10px 12px 11px; border-radius: var(--r-klein); display: grid; gap: 1px; align-content: center; min-height: 66px;
  background: color-mix(in srgb, var(--c) 15%, var(--flaeche-2)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-top: 4px solid var(--c);
  transition: flex-grow 0.5s var(--kurve); overflow: hidden; }
.jw-seg.s-h { --c: var(--a2); } .jw-seg.s-p { --c: var(--a1); } .jw-seg.s-s { --c: var(--a3); }
.jw-seg-name { font: 700 13px var(--schrift); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jw-seg-zahl { font: 500 15px var(--mono); color: var(--leise); }
.jw-punkt { flex: none; align-self: end; width: 14px; height: 14px; margin: 0 -1px 4px; position: relative; z-index: 1; }
.jw-punkt::after { content: ""; position: absolute; left: 4px; bottom: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--sehr-leise); }

*/

/* Zeitstrahl: Spur · gefüllt bis jetzt (bzw. bis Ablauf) · roter Überhang nach Ablauf · Marken · Nadel */
.jw-strahl { position: relative; height: 44px; margin: 0 4px; }
.jw-spur, .jw-fuell, .jw-ueber { position: absolute; top: 17px; height: 10px; border-radius: 99px; }
.jw-spur { left: 0; right: 0; background: var(--flaeche-3); }
.jw-fuell { left: calc(var(--von, 0) * 100%); width: calc(var(--breite, 0) * 100%); background: linear-gradient(90deg, var(--a1), var(--a3)); transition: width 0.5s var(--kurve), left 0.5s var(--kurve); }
.jw-ueber { left: calc(var(--von, 0) * 100%); width: calc(var(--breite, 0) * 100%); background: var(--fehler); opacity: 0.85; transition: width 0.5s var(--kurve), left 0.5s var(--kurve); }
.jw-mk { position: absolute; top: 15px; left: calc(var(--x) * 100%); width: 14px; height: 14px; margin-left: -7px; border-radius: 4px; transform: rotate(45deg); background: var(--c);
  border: 2px solid var(--flaeche); box-shadow: 0 0 0 1px var(--c); transition: left 0.5s var(--kurve); }
.mk-iat, .leg-iat { --c: var(--a3); } .mk-nbf, .leg-nbf { --c: var(--hinweis); } .mk-exp, .leg-exp { --c: var(--a2); }
.jw-nadel { position: absolute; top: 2px; bottom: 2px; left: calc(var(--x) * 100%); width: 4px; margin-left: -2px; border-radius: 3px; background: var(--text); transition: left 0.5s var(--kurve); }
.jw-nadel::before { content: ""; position: absolute; top: -1px; left: -4px; width: 12px; height: 7px; border-radius: 4px; background: var(--text); }
.jw-legende { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--leise); }
.jw-legende li { display: inline-flex; align-items: center; gap: 8px; }
.jw-legende i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); transform: rotate(45deg); flex: none; }
.jw-legende i.leg-jetzt { width: 4px; height: 15px; border-radius: 2px; background: var(--text); transform: none; }

.jw-befunde { display: grid; gap: 8px; margin-top: 16px; }
.jw-befund { --c: var(--hinweis); display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-klein); font-size: 15px; line-height: 1.45;
  background: color-mix(in srgb, var(--c) 9%, var(--flaeche-2)); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); border-left: 4px solid var(--c); }
.jw-befund.fehler { --c: var(--fehler); } .jw-befund.ok { --c: var(--ok); }
.jw-befund svg { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--c); }

/* ── JSON-Tafeln ── */
.jw-daten { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }   /* Lauf 2: gleich breit (war 1fr / 1.25fr) */
.jw-daten > .tafel { min-width: 0; }
.jw-json { margin: 0; padding: 12px 14px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); overflow: auto; max-height: 440px;
  font: 500 14.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--leise); }
.jw-json .key { color: var(--a2); } .jw-json .string { color: var(--text); } .jw-json .number { color: var(--a1); font-weight: 700; } .jw-json .literal { color: var(--a3); font-weight: 700; }
.jw-json .zeit { display: block; margin: -2px 0 2px 2ch; color: var(--sehr-leise); font-style: italic; font-weight: 400; font-size: 13px; }
#json-p .key { color: var(--a1); }
.jw-alg { margin-left: 10px; padding: 2px 9px; border-radius: 7px; background: color-mix(in srgb, var(--a2) 18%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--a2) 45%, transparent);
  font: 700 13px var(--mono); letter-spacing: 0; text-transform: none; color: var(--text); }
.jw-alg:empty { display: none; }
.jw-alg.gross { margin: 0; font-size: 14.5px; background: color-mix(in srgb, var(--a3) 18%, var(--flaeche)); border-color: color-mix(in srgb, var(--a3) 45%, transparent); }

/* ── Claims ── */
.jw-unter { margin: 18px 0 8px; font: 700 13.5px var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sehr-leise); }
.jw-claims .werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* Lauf 2: zwei feste Spalten; ein ungerades letztes Feld füllt die Reihe */
.jw-claims .werte > .wert:last-child:nth-child(odd) { grid-column: 1 / -1; }
.jw-zone { margin: 0 0 14px; }
.jw-claims .wert-zahl { font-size: 18px; }
.jw-claims .wert.zeit .wert-zahl { font-size: 19px; }
.jw-claims .wert-zusatz.rel { color: var(--text); font-weight: 700; }
.jw-claims .wert-zusatz.klein { font: 500 13px var(--mono); color: var(--sehr-leise); overflow-wrap: anywhere; }
.jw-claims .wert.marke-ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.jw-claims .wert.marke-nein { border-color: color-mix(in srgb, var(--fehler) 50%, transparent); background: color-mix(in srgb, var(--fehler) 6%, var(--flaeche-2)); }
.jw-claims .wert.marke-warn { border-color: color-mix(in srgb, var(--hinweis) 50%, transparent); }

/* ── Signatur ── */
.jw-auge { flex: none; width: 42px; height: 42px; margin-right: 4px; border-radius: 10px; border: 0; background: none; color: var(--leise); display: grid; place-items: center; }
.jw-auge svg { width: 21px; height: 21px; }
.jw-auge[aria-pressed="true"] { color: var(--a1); }
#geheimnis { font: 500 20px/1.2 var(--mono); }
.jw-schalter { display: inline-flex; align-items: center; gap: 12px; border: 0; background: none; padding: 10px 0 0; font-weight: 700; font-size: 15px; }
.jw-knubbel { position: relative; width: 46px; height: 26px; border-radius: 99px; background: var(--flaeche-3); border: 1px solid var(--linie-stark); transition: background .2s, border-color .2s; flex: none; }
.jw-knubbel::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); transition: transform .25s var(--kurve), background .2s; }
.jw-schalter[aria-checked="true"] .jw-knubbel { background: var(--a1); border-color: var(--a1); }
.jw-schalter[aria-checked="true"] .jw-knubbel::after { transform: translateX(20px); background: var(--a1-tinte); }

.jw-urteil-box { margin-top: 14px; display: grid; gap: 10px; }
.jw-urteil-box:empty { display: none; }
.jw-urteil { border-radius: var(--r); padding: 12px 14px; border: 1px solid; }
.jw-urteil.ok { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 11%, var(--flaeche)); }
.jw-urteil.nein { border-color: color-mix(in srgb, var(--fehler) 55%, transparent); background: color-mix(in srgb, var(--fehler) 9%, var(--flaeche)); }
.jw-urteil.warn { border-color: color-mix(in srgb, var(--hinweis) 55%, transparent); background: color-mix(in srgb, var(--hinweis) 9%, var(--flaeche)); }
.jw-urteil.still { border-color: var(--linie); background: var(--flaeche-2); }
.jw-urteil-titel { font: 700 19px var(--schrift); }
.jw-urteil.ok .jw-urteil-titel { color: var(--ok); } .jw-urteil.nein .jw-urteil-titel { color: var(--fehler); } .jw-urteil.warn .jw-urteil-titel { color: var(--hinweis); }
.jw-urteil-sub { margin-top: 3px; font-size: 14.5px; color: var(--leise); line-height: 1.45; }
.jw-diff { display: grid; grid-template-columns: 5.2em 1fr; gap: 8px; margin-top: 8px; align-items: baseline; }
.jw-diff-label { font-size: 12.5px; font-weight: 700; color: var(--sehr-leise); text-transform: uppercase; letter-spacing: .06em; }
.jw-diff-wert { font: 500 13px/1.5 var(--mono); overflow-wrap: anywhere; word-break: break-all; }
.jw-diff-wert mark { background: color-mix(in srgb, var(--fehler) 28%, transparent); color: var(--text); border-radius: 3px; outline: 1px solid color-mix(in srgb, var(--fehler) 60%, transparent); }
.jw-text-knopf { margin-top: 14px; min-height: 40px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--linie-stark); background: var(--flaeche-2); font-weight: 700; font-size: 15px; }
.jw-text-knopf:hover { border-color: var(--a3); }
.jw-sigwerte { margin-top: 16px; grid-template-columns: 1fr; }
.jw-urteil-box:not(:empty) + .jw-sigwerte { margin-top: 14px; }
.jw-text-knopf { margin-top: 0; }
#schwach-box { margin-top: 16px; }
.fb-faltbar .fb-inhalt { margin-top: 14px; }
.jw-sigtext { font-size: 14px !important; line-height: 1.45; word-break: break-all; }
.jw-sigwerte .wert-label { white-space: normal; }

/* ── Desktop (≥ 761 px) ── */
@media (min-width: 761px) {
  .jw-buehne { padding: 22px 24px; }
  /* Eingabe kompakt (spec „kompakte Eingabe“): Header | Payload sollen im ersten Bildschirm anfangen.
     Datenschutzzeile + Beispiel-Chip teilen sich eine Zeile, Datenschutz ohne Kasten, Textfeld 3 Zeilen hoch. */
  .jw-eingabe { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
  .jw-eingabe > * { grid-column: 1 / -1; }
  .jw-eingabe > .jw-privat { grid-column: 1; margin-top: 8px; padding: 0; background: none; border: 0; }
  .jw-eingabe > .jw-beispiele { grid-column: 2; margin-top: 8px; }
  .jw-textrahmen textarea { min-height: 84px; }
}
/* (alt) @media (max-width: 980px) { .jw-raster { … } .spalte { display: contents; } .jw-eingabe { order: 1; } … }  — Lauf 2: einspaltig, Reihenfolge steht im HTML */

/* ── Handy (≤ 760 px): dieselbe Reihenfolge in einer Spalte, Eingabe zuerst ── */
@media (max-width: 760px) {
  .kopf-glyphe { width: 70px; }
  .kopf-glyphe img { width: 58px; max-height: 38px; }
  .jw-daten { grid-template-columns: minmax(0, 1fr); }
  .jw-claims .werte { grid-template-columns: minmax(0, 1fr); }
  .jw-privat { font-size: 13px; }
  .tool-profil { padding: 16px; border-radius: 18px; }
}
@media (max-width: 640px) {
  .jw-textrahmen textarea { min-height: 120px; font-size: 15px; }
  .jw-status-text strong { font-size: 20px; }
  .jw-leer-hinweis { padding: 22px 6px; font-size: 16px; }
  .jw-claims .wert-zahl { font-size: 17px; }
  .fb-kopf .jw-marke { font-size: 12.5px; padding: 4px 9px; }
}
.jw-status-text span { white-space: pre-line; }

/* ── Über dieses Tool (Tool-Profil, SEO/GEO) und Hilfe & Infos: gleiche Spalte ── */
.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; }
.wissen-raster { grid-template-columns: minmax(0, 1fr); }