/* ── tool.css — Charakter „Base64“ ──────────────────────────────────────────────────────────────────────
   WAS:   Akzente (Türkis · Magenta · Gelb = die drei Bytes einer Gruppe), Raster Eingabe | Ergebnis, Textflächen,
          Datei-Karte, Binär-Ansicht, und das Hauptbild: die Bit-Karte (24 Bit, oben als 3 Bytes, unten als 4 Sextette).
   WARUM: Das Tool lebt von der Einsicht, WIE Base64 rechnet. Jedes Bit behält seine Byte-Farbe vom oberen in die
          untere Zeile — man sieht, wie drei 8er-Pakete zu vier 6er-Paketen umgepackt werden.
   LAUF 2 (27.10.): Eingabe | Ergebnis nebeneinander, Profi-Teile als zugeklappte Kästen (.fb-*, ../_werk/werk.css), Tool-Profil unten.
   WIE ÄNDERN: Farben nur über --a1/--a2/--a3 unten (a1/a2/a3 = Byte 1/2/3); Grundbausteine in ../_werk/werk.css. */
:root { --a1: #2dd4bf; --a2: #e879f9; --a3: #facc15; --a1-tinte: #06201c; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #0d9488; --a2: #b837d1; --a3: #b58100; } }
:root[data-thema="hell"] { --a1: #0d9488; --a2: #b837d1; --a3: #b58100; }

/* Kopf-Icon: Original-Icon (PNG, transparent) auf neutralem Grund, in hell und dunkel erkennbar */
.kopf-glyphe { background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); }
.kopf-glyphe img { display: block; width: 40px; height: 40px; object-fit: contain; }
@media (max-width: 640px) { .kopf-glyphe img { width: 34px; height: 34px; } }

/* Raster: oben Eingabe | Ergebnis (gleich breit), darunter die zugeklappten Kästen über die ganze Breite */
.b6-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.b6-voll { grid-column: 1 / -1; }
.b6-richtung { margin-left: auto; }
.b6-ein .tafel-kopf, .b6-aus .tafel-kopf { min-height: 52px; }   /* gleiche Kopfhöhe links/rechts, damit die Feldbeschriftungen auf einer Linie stehen */
.b6-ein, .b6-aus { display: flex; flex-direction: column; }

/* Textflächen */
.b6-text { display: block; width: 100%; min-height: 190px; 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 18px/1.5 var(--mono); outline: none; tab-size: 4; transition: border-color .15s, box-shadow .15s, background .15s; }
.b6-text::placeholder { color: var(--sehr-leise); }
.b6-text:focus { border-color: var(--a1); box-shadow: var(--fokus); background: var(--flaeche); }
.b6-text.fehlerhaft { border-color: var(--fehler); background: var(--fehler-grund); }
.b6-ausgabe { background: color-mix(in srgb, var(--a2) 7%, var(--flaeche-2)); word-break: break-all; }
.b6-eingabefeld, .b6-ausfeld { position: relative; }
.b6-ausfeld { flex: 1; display: flex; flex-direction: column; }   /* Textfeld UND Binär-Ansicht im normalen Fluss: das Feld behält auch ohne Textfeld Höhe */
.b6-ausfeld .b6-text { flex: 1; min-height: 190px; }

/* Ablegen: Datei auf die Eingabe ziehen */
.b6-ablegen { position: absolute; inset: 0; display: none; place-items: center; border-radius: var(--r); pointer-events: none;
  border: 2.5px dashed var(--a1); background: color-mix(in srgb, var(--a1) 14%, color-mix(in srgb, var(--flaeche) 88%, transparent)); backdrop-filter: blur(3px); }
.b6-ablegen span { font: 700 22px var(--titel); color: var(--a1); }
.ziehen .b6-ablegen { display: grid; }

/* Datei-Karte (statt Textfeld, wenn eine Datei kodiert wird) */
.b6-datei { display: flex; align-items: center; gap: 14px; min-height: 190px; padding: 16px; border-radius: var(--r); border: 1.5px solid color-mix(in srgb, var(--a1) 55%, transparent);
  background: color-mix(in srgb, var(--a1) 9%, var(--flaeche-2)); }
.b6-datei-ikon { flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--a1) 20%, transparent); color: var(--a1); }
.b6-datei-ikon svg { width: 32px; height: 32px; }
.b6-datei-bild { flex: none; width: 120px; height: 120px; object-fit: contain; border-radius: 12px; background: repeating-conic-gradient(var(--flaeche-3) 0 25%, var(--flaeche-2) 0 50%) 0 0 / 16px 16px; border: 1px solid var(--linie); }
.b6-datei-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.b6-datei-text strong { font: 700 20px/1.2 var(--schrift); overflow-wrap: anywhere; }
.b6-datei-text span { color: var(--leise); font: 500 15px var(--mono); }

.b6-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.b6-aktionen:empty { display: none; }
.b6-dateiwahl { cursor: pointer; }
.b6-dateiwahl:focus-within { box-shadow: var(--fokus); }
.b6-kopfknoepfe { display: flex; gap: 6px; }
.b6-kopfknoepfe .ikon-knopf { height: 38px; padding: 0 11px; }

/* Vorschlag „Sieht aus wie Base64“ */
.b6-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; }
.b6-vorschlag .chip { min-height: 36px; padding: 4px 12px; background: var(--flaeche); border-color: color-mix(in srgb, var(--a3) 60%, transparent); }

/* Optionen */
/* Lauf 2: alte Optionszeile (flex-wrap, ausgefranst) – ersetzt durch .b6-basis/.b6-erweitert
.b6-optionen { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie); }
*/
.b6-basis { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie); }
.b6-basis:not(:has(.b6-opt:not(.versteckt))) { display: none; }
/* Je Schalter eine Zeile: Beschriftung links in fester Breite, Segment rechts — gleich breit, nicht ausgefranst */
.b6-basis .b6-opt { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 4px 12px; }
.b6-basis .b6-opt .feld-label { margin: 0; }
.b6-basis .b6-opt .segment { justify-self: start; max-width: 100%; }
.b6-erweitert { display: grid; gap: 12px; }
.b6-erweitert .b6-opt .feld-label { margin-bottom: 5px; }
.b6-schalter { display: flex; flex-wrap: wrap; gap: 8px; }
.b6-stand { font-weight: 500; color: var(--leise); }
.b6-opt[hidden], [data-fuer].versteckt { display: none !important; }
.b6-basis .b6-opt.versteckt { display: none; }
.b6-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"] .b6-haken { background: var(--a1); border-color: var(--a1); }
.chip[aria-pressed="true"] .b6-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); }

/* Ergebnis: Binär-Ansicht, gekürzt-Hinweis, „Kopieren als“, Hex */
.b6-bin { flex: 1; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px; text-align: center; overflow: auto;   /* Lauf 2: im Fluss statt position:absolute (sonst Höhe 0 in der Einspaltenansicht) */
 
  border-radius: var(--r); border: 1.5px dashed var(--linie-stark); background: color-mix(in srgb, var(--a2) 7%, var(--flaeche-2)); }
.b6-bin-bild { min-width: 64px; min-height: 64px; image-rendering: pixelated; max-width: 100%; max-height: 180px; object-fit: contain; border-radius: 10px; background: repeating-conic-gradient(var(--flaeche-3) 0 25%, var(--flaeche-2) 0 50%) 0 0 / 16px 16px; border: 1px solid var(--linie); }
.b6-bin-kopf { display: flex; flex-direction: column; gap: 3px; }
.b6-bin-kopf strong { font: 700 22px/1.2 var(--titel); }
.b6-bin-kopf span { color: var(--leise); font-size: 15px; }
.b6-gekuerzt { margin: 8px 0 0; font-size: 14px; color: var(--hinweis); }
/* Lauf 2: Reihe „Kopieren als“ entfällt
.b6-als { display: flex; flex-wrap: wrap; gap: 6px; }
.b6-als .chip { min-height: 40px; padding: 4px 11px; font-family: var(--mono); font-size: 14px; }
*/
.b6-status { margin: 10px 0 0; font: 600 15px/1.4 var(--mono); color: var(--leise); min-height: 1.4em; }
.b6-status:empty { display: none; }
/* Lauf 2: Hex ist jetzt ein Kasten (section.b6-hex.fb-faltbar), kein details mehr
.b6-hex { margin-top: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r); padding: 0 14px; }
.b6-hex summary { cursor: pointer; padding: 11px 0; font-weight: 700; font-size: 15px; color: var(--leise); }
*/
.b6-hex pre, .b6-jwt pre { margin: 0 0 12px; overflow: auto; font: 500 14px/1.55 var(--mono); color: var(--text); max-height: 280px; }
#kopier-platz { display: contents; }

/* ── Hauptbild: Bit-Karte ── */
.b6-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.b6-karte-satz { margin: 0; flex: 1 1 320px; color: var(--leise); font-size: 15.5px; }
.b6-blaettern { display: flex; align-items: center; gap: 6px; }
.b6-blaettern .ikon-knopf { height: 38px; min-width: 38px; padding: 0; }
.b6-blaettern.versteckt { display: none; }
.b6-seite { font: 700 15px var(--mono); color: var(--leise); min-width: 110px; text-align: center; white-space: nowrap; }
.b6-karte .tafel-titel { white-space: nowrap; }
.b6-karte .b6-blaettern { margin-left: auto; }
.b6-gruppen { display: grid; gap: 12px; grid-template-columns: repeat(var(--spalten, 2), minmax(0, 1fr)); }   /* Vorgabe 2 = Wert des JS vor dem ersten ResizeObserver-Lauf (Lauf 2: war 3) */
.b6-gr { --b0: var(--a1); --b1: var(--a2); --b2: var(--a3); padding: 12px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); min-width: 0; }
.b6-gr-kopf { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sehr-leise); }
.b6-gr-kopf b { font: 700 13px var(--mono); color: var(--leise); letter-spacing: 0; text-transform: none; }
.b6-reihe { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 0 2px; }
.b6-zelle { position: relative; display: grid; gap: 2px; padding: 4px 3px 5px; border-radius: 9px; border: 1px solid transparent; outline: none; transition: background .15s, border-color .15s; }
.b6-zelle:hover, .b6-zelle:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); border-color: var(--linie-stark); }
.b6-zelle:focus-visible { box-shadow: var(--fokus); }
.b6-byte { grid-column: span 8; }
.b6-sext { grid-column: span 6; }
.b6-bits { display: grid; gap: 2px; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.b6-bit { aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; font: 700 clamp(9px, 1.05vw, 15px) var(--mono); line-height: 1; min-width: 0; overflow: hidden;
  border: 1.5px solid var(--c); color: var(--c); background: transparent; transition: opacity .15s, transform .15s; }
.b6-bit.eins { background: var(--c); color: var(--tinte, #0d0f13); }
.b6-bit.leer { border-style: dashed; border-color: var(--linie-stark); color: var(--sehr-leise); }   /* aufgefüllte Null (kein Datenbit) */
.b6-bit.fehlt { border-style: dotted; border-color: var(--linie); color: transparent; }
.b6-gr.hover .b6-bit:not(.hl) { opacity: .28; }
.b6-gr.hover .b6-bit.hl { transform: scale(1.12); }
.b6-bit.b0 { --c: var(--b0); } .b6-bit.b1 { --c: var(--b1); } .b6-bit.b2 { --c: var(--b2); }
:root[data-thema="hell"] .b6-bit.eins, :root[data-thema="dunkel"] .b6-bit.eins { --tinte: #0d0f13; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) .b6-bit.eins { --tinte: #ffffff; } }
:root[data-thema="hell"] .b6-bit.eins { --tinte: #ffffff; }

.b6-zeichen { text-align: center; font: 700 clamp(24px, 2.6vw, 36px)/1.1 var(--mono); }
.b6-zeichen.nur-byte { font-size: clamp(20px, 2vw, 26px); color: var(--text); }
.b6-zahl { text-align: center; font: 500 13px var(--mono); color: var(--leise); }
.b6-zelle.fehlt .b6-zeichen { color: var(--sehr-leise); }
.b6-zelle.pad-zelle { opacity: .55; }
.b6-schritt { display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--sehr-leise); text-transform: uppercase; }
.b6-schritt::before, .b6-schritt::after { content: ""; flex: 1; height: 1px; background: var(--linie-stark); }
.b6-schritt svg { width: 14px; height: 14px; }
.b6-regler { margin-top: 10px; }
.b6-regler.versteckt, .b6-leer.versteckt { display: none; }
.b6-leer { margin: 0; padding: 26px 10px; text-align: center; color: var(--leise); }

/* JWT */
.b6-jwt-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.b6-jwt-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.b6-jwt pre { padding: 12px 14px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.b6-jwt-info { margin: 0 0 12px; font: 700 13.5px var(--mono); color: var(--hinweis); }
.b6-jwt-info:empty { display: none; }
.b6-jwt .meldung { margin-top: 12px; }

/* Lauf 2: Kennzahlen-Kacheln entfallen
/ * Kennzahlen * /
@media (min-width: 1100px) { .b6-werte .werte { grid-template-columns: repeat(3, 1fr); } }
*/
/* ── Tool-Profil (SEO/GEO, Lauf 2; Muster pw-strength) ── */
.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 details p + p { margin-top: -6px; }
.wissen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 8 Einträge = 4 volle Reihen, keine Lücke */
@media (max-width: 760px) { .wissen-raster { grid-template-columns: minmax(0, 1fr); } }

/* Tablet */
@media (max-width: 980px) {
  .b6-raster { grid-template-columns: minmax(0, 1fr); }
}
/* Handy */
@media (max-width: 640px) {
  .b6-text { font-size: 16px; min-height: 150px; padding: 12px; }
  .b6-datei { flex-wrap: wrap; min-height: 150px; }
  .b6-datei-bild { width: 84px; height: 84px; }
  .b6-kopfknoepfe .ikon-knopf .knopf-text { display: none; }
  .b6-basis .b6-opt { grid-template-columns: minmax(0, 1fr); }
  .b6-basis .b6-opt .segment, .b6-erweitert .b6-opt .segment { width: 100%; justify-self: stretch; }
  .b6-opt .segment button { flex: 1; padding-left: 6px; padding-right: 6px; }
  .b6-richtung { margin-left: 0; width: 100%; order: 5; }
  .b6-richtung button { flex: 1; }
  .b6-ein .fb-kopf { flex-wrap: wrap; }
  .b6-aktionen .ikon-knopf .knopf-text { display: inline; font-size: 14px; }
  /* Handy: 24 Bit-Spalten passen nicht lesbar in 390 px – die Reihen behalten ihre Breite und scrollen innerhalb der Gruppe (nicht die Seite) */
  .b6-gr { padding: 10px 8px; overflow-x: auto; }
  .b6-reihe, .b6-schritt { min-width: 560px; }
  .b6-bit { font-size: 12px; border-width: 1px; }
  .b6-seite { min-width: 0; font-size: 13px; }
  .b6-bin-bild { max-height: 130px; }
}