/* ── tool.css — Charakter „Token-Generator“ ───────────────────────────────────────────────────────────────────────
   WAS:   Akzentfarben (Bernstein · Türkis · Violett + Koralle für Sonderzeichen), Raster der Tafeln, Hauptbild = der Token in
          großer Schrift, Zeichen für Zeichen nach Art eingefärbt (klein/groß/Ziffer/Sonstige/Präfix); ab 2 Tokens die Liste.
          Lauf 2 (27.10.): Stärke-Messer, Wert-Kacheln, Legende, Schieber, Anzahl-Chips und Download entfallen (Alt-Regeln unten im Kommentar).
   WARUM: Ein Token ist erst „sichtbar“, wenn man seine Zusammensetzung erkennt — die Farbe zeigt auf einen Blick, ob Ziffern
          und Sonderzeichen drin sind, wo Präfix und Gruppen enden. Länge und Bit zeigt die Zeile unter dem Längenfeld.
   WIE ÄNDERN: Farben nur über --a1/--a2/--a3 (+ --sym) unten (a1 = groß/Primärknopf, a2 = klein, a3 = Ziffern, sym =
          Sonstige); (--st0…--st4 sind mit dem Messer entfallen, siehe unten). Grundbausteine stehen in ../_werk/werk.css (gemeinsam für alle Tools). */
:root { --a1: #ffb02e; --a2: #3fd9cf; --a3: #b39bff; --sym: #ff7a8a; --a1-tinte: #2a1a00;
  --st0: #ff6b6b; --st1: #ff9a4d; --st2: #f5c542; --st3: #9ad86a; --st4: #4ade80; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #b86a00; --a2: #0a8780; --a3: #6a45e0; --sym: #d3304f; --a1-tinte: #ffffff;
  --st0: #d63c3c; --st1: #d9731a; --st2: #b58a00; --st3: #4f9a24; --st4: #16a34a; } }
:root[data-thema="hell"] { --a1: #b86a00; --a2: #0a8780; --a3: #6a45e0; --sym: #d3304f; --a1-tinte: #ffffff;
  --st0: #d63c3c; --st1: #d9731a; --st2: #b58a00; --st3: #4f9a24; --st4: #16a34a; }

.tg-raster { display: grid; gap: 14px; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); align-items: start; }
.tg-raster > .tg-optionen { grid-column: 1 / -1; min-width: 0; }   /* Weitere Optionen: volle Breite unter beiden Spalten */
.spalte { display: grid; gap: 14px; min-width: 0; }
.kopf-glyphe { background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); }   /* Original-Icon (transparent, dunkel mit Leuchtrand) auf neutralem Grund — in hell und dunkel erkennbar */
.kopf-glyphe img { display: block; width: 46px; height: 46px; object-fit: contain; }
.tg-klein { margin: 8px 0 0; font-size: 14px; color: var(--leise); line-height: 1.45; }
.tg-block { margin-top: 18px; }
.tg-unter { margin: 0 0 10px; font: 700 14px/1.2 var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }
.tafel-kopf .tg-unter { margin: 0; }

/* ── Einstellungen ── */
.tg-vorlagen .chip, .tg-formate .chip { min-height: 42px; }
.tg-vorlagen .chip { flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 12px; }
.tg-vorlagen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 4 Vorlagen = 2 × 2, gleich breit */
.tg-vorlagen .chip { min-width: 0; }
.tg-vorlagen .chip small { line-height: 1.2; }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--a1) 18%, var(--flaeche)); border-color: var(--a1); }
.tg-ton { font: 700 15px var(--mono); }
.tg-ton.k, .tg-token .k, .tg-legende .k i { color: var(--a2); }
.tg-ton.g, .tg-token .g, .tg-legende .g i { color: var(--a1); }
.tg-ton.z, .tg-token .z, .tg-legende .z i { color: var(--a3); }
.tg-ton.s, .tg-token .s, .tg-legende .s i { color: var(--sym); }
.tg-gruppen .chip { min-width: 74px; justify-content: center; }
#eigen { font-size: 20px; }
.tg-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tg-zahlen .feld-rahmen input { font-size: 22px; }
.tg-folge { margin: 10px 0 0; font-family: var(--mono); font-size: 15px; color: var(--text); min-height: 1.45em; }   /* einzige Anzeige von Länge und Bit */
.tg-bereich { font: 500 13px var(--mono); color: var(--sehr-leise); margin-left: 4px; }
.tg-einst .meldung { margin-top: 8px; }
.feld-rahmen input:disabled { color: var(--sehr-leise); }
.feld-rahmen.fehlerhaft { border-color: var(--fehler); }
.feld-rahmen input.klein { font-size: 18px; }

.tg-schalterzeile { margin: 0; }
.tg-schalter { display: inline-flex; align-items: center; gap: 12px; border: 0; background: none; padding: 4px 0; font-weight: 700; font-size: 16px; text-align: left; }
.tg-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; }
.tg-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; }
.tg-schalter[aria-checked="true"] .tg-knubbel { background: var(--a1); border-color: var(--a1); }
.tg-schalter[aria-checked="true"] .tg-knubbel::after { transform: translateX(20px); background: var(--a1-tinte); }
.tg-schalterzeile .tg-klein { margin-top: 2px; }
.tg-opt-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }   /* ausgeblendete Felder fallen aus dem Fluss, breite (.tg-breit) füllen die Zeile */
.tg-opt-raster .tg-breit { grid-column: 1 / -1; }
.fb-faltbar .fb-inhalt { margin-top: 14px; }
.tg-opt-raster .segment button { padding: 8px 12px; min-width: 40px; font-family: var(--mono); }

/* ── Hauptbild: der Token ── */
.tg-quelle { margin-left: auto; font: 500 13px var(--mono); color: var(--sehr-leise); }
.tg-token-rahmen { position: relative; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); padding: 20px 20px 18px; min-height: 110px; display: grid; align-items: center;
  background-image: radial-gradient(500px 160px at 0% 0%, color-mix(in srgb, var(--a1) 10%, transparent), transparent 70%); }
.tg-token { font: 500 clamp(22px, 2.6vw, 32px)/1.45 var(--mono); letter-spacing: 0.02em; overflow-wrap: anywhere; word-break: break-all; user-select: all; -webkit-user-select: all; outline: none; border-radius: 8px; }
.tg-token[data-gr="m"] { font-size: clamp(19px, 2.1vw, 26px); }
.tg-token[data-gr="k"] { font-size: clamp(17px, 1.7vw, 22px); }
.tg-token:focus-visible { box-shadow: var(--fokus); }
.tg-token span { font-weight: 500; }
.tg-token .pre { color: var(--leise); }
.tg-token .sep { color: var(--sehr-leise); }
.tg-token.neu span { animation: tg-ein 0.34s var(--kurve) backwards; }
@keyframes tg-ein { from { opacity: 0; transform: translateY(0.35em); } }
.tg-leer { margin: 0; color: var(--leise); text-align: center; }
.tg-aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.tg-aktionen .kopier.breit { height: 46px; border-radius: 13px; font-size: 16px; }
.tg-primaer { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border: 0; border-radius: 13px; font-size: 16px; font-weight: 700;
  background: linear-gradient(140deg, var(--a1), color-mix(in srgb, var(--a1) 70%, var(--a2))); color: var(--a1-tinte); box-shadow: 0 10px 26px -12px var(--a1); transition: transform .15s, filter .15s; }
.tg-primaer:hover { filter: brightness(1.08); }
.tg-primaer:active { transform: translateY(1px); }
.tg-primaer svg { width: 22px; height: 22px; transition: transform .45s var(--kurve); }
.tg-primaer.wurf svg { animation: tg-wurf .5s var(--kurve); }
@keyframes tg-wurf { from { transform: rotate(-200deg) scale(.7); } }

/* ── Liste (ab Anzahl 2): jede Zeile Token + Kopieren, ohne eigene Scrollhöhe ── */
.tg-zeilen { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.tg-zeile { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche-2); min-width: 0; }
.tg-zeile .nr { flex: none; min-width: 2.2ch; font: 500 13px var(--mono); color: var(--sehr-leise); text-align: right; }
.tg-zeile .tx { flex: 1; min-width: 0; font: 500 16.5px/1.35 var(--mono); overflow-wrap: anywhere; word-break: break-all; }
.tg-zeile .tx .k { color: var(--a2); } .tg-zeile .tx .g { color: var(--a1); } .tg-zeile .tx .z { color: var(--a3); } .tg-zeile .tx .s { color: var(--sym); }
.tg-zeile .tx .pre { color: var(--leise); } .tg-zeile .tx .sep { color: var(--sehr-leise); }
.tg-zeile .kopier { flex: none; }

/* ── Über dieses Tool (Tool-Profil, SEO/GEO) und Hilfe & Infos: gleiche Breite ── */
.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); }

/* ── Desktop (≥ 981 px): zwei Spalten, Ergebnis-Tafel füllt ihre Spalte ── */
@media (min-width: 981px) {
  .tg-raster { align-items: stretch; }
  .spalte-links, .spalte-rechts { grid-template-rows: minmax(0, 1fr); }
  .tg-buehne { display: flex; flex-direction: column; }   /* Ergebnis-Tafel füllt die Spaltenhöhe, der Token steht mittig im Rahmen */
  .tg-token-rahmen { flex: 1; min-height: 150px; }
}
/* ── Handy/Tablet (≤ 980 px): eine Spalte in DOM-Reihenfolge — Einstellungen zuerst, danach Ergebnis (Lauf 2: das frühere order:-1 entfällt) ── */
@media (max-width: 980px) { .tg-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .kopf-glyphe img { width: 38px; height: 38px; }
  .tool-profil { padding: 16px; border-radius: 18px; }
}
@media (max-width: 640px) {
  .tg-token-rahmen { padding: 16px 14px; }
  .tg-token { font-size: 21px; }
  .tg-token[data-gr="m"] { font-size: 17px; } .tg-token[data-gr="k"] { font-size: 15px; }
  .tg-aktionen > * { flex: 1 1 auto; }
  .tg-aktionen .kopier.breit, .tg-primaer { justify-content: center; }
  .tg-zeile .tx { font-size: 14.5px; }
  .tg-buehne .tafel-titel { flex: none; }   /* sonst quetscht die Quellenangabe den Titelpunkt weg */
  .tg-quelle { font-size: 12px; }
  .tg-zeile .nr { display: none; }
  .tg-opt-raster { grid-template-columns: minmax(0, 1fr); }
  .tg-zahlen { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .tg-token.neu span, .tg-primaer.wurf svg { animation: none; } }

/* Lauf 2 entfernt (Alt-Regeln zum Wiederfinden; Messer, Legende, Wert-Kacheln, Schieber, Anzahl-Chips, alte Liste und alte Medienblöcke):
.tg-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; font-size: 14px; color: var(--leise); }
.tg-legende li { display: inline-flex; align-items: center; gap: 7px; }
.tg-legende i { width: 11px; height: 11px; border-radius: 4px; background: currentColor; }
.tg-legende .pre i { color: var(--leise); }
.tg-legende b { font: 700 14px var(--mono); color: var(--text); }
.tg-staerke { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); --stufe: var(--st4); }
.tg-staerke[data-stufe="0"] { --stufe: var(--st0); } .tg-staerke[data-stufe="1"] { --stufe: var(--st1); } .tg-staerke[data-stufe="2"] { --stufe: var(--st2); }
.tg-staerke[data-stufe="3"] { --stufe: var(--st3); } .tg-staerke[data-stufe="4"] { --stufe: var(--st4); }
.tg-stufe { font: 700 15px var(--schrift); color: var(--stufe); }
.tg-messer { position: relative; height: 16px; border-radius: 99px; margin: 6px 0 0; }
.tg-messer-band { position: absolute; inset: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--st0) 0 15.6%, var(--st1) 15.6% 25%, var(--st2) 25% 37.5%, var(--st3) 37.5% 50%, var(--st4) 50% 100%); }
.tg-messer-rest { position: absolute; top: 0; right: 0; bottom: 0; border-radius: 0 99px 99px 0; background: color-mix(in srgb, var(--flaeche-3) 82%, var(--flaeche)); opacity: .93; transition: width .5s var(--kurve); }
.tg-messer-marke { position: absolute; top: -5px; width: 8px; height: 26px; margin-left: -4px; border-radius: 4px; background: var(--text); box-shadow: 0 0 0 3px var(--flaeche), 0 4px 12px rgba(0,0,0,.35); transition: left .5s var(--kurve); }
.tg-skala { position: relative; height: 38px; margin: 10px 0 12px; }
.tg-skala span { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; font-size: 13px; color: var(--leise); line-height: 1.25; white-space: nowrap; }
.tg-skala span::before { content: ""; width: 2px; height: 6px; background: var(--linie-stark); margin-bottom: 3px; }
.tg-skala span.ende { transform: translateX(-100%); justify-items: end; }
.tg-skala span.ende::before { margin-right: 0; }
.tg-skala b { font: 700 14px var(--mono); color: var(--text); }
.tg-skala small { font-size: 12.5px; }
.tg-werte { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tg-werte .wert { grid-template-columns: 1fr; }
.tg-werte .wert.haupt .wert-zahl { color: var(--stufe); }
.tg-rate { margin-top: 14px; }
.tg-rate .segment { display: flex; }
.tg-rate .segment button { flex: 1; }
.tg-listenzahl { font: 700 15px var(--mono); color: var(--leise); }
.tg-liste-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tg-liste-knoepfe { display: inline-flex; gap: 8px; align-items: center; }
.tg-liste-knoepfe .kopier.breit, .tg-liste-knoepfe .ikon-knopf { height: 42px; border-radius: 12px; }
.tg-zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 560px; overflow: auto; }
.tg-zeile { display: flex; align-items: stretch; gap: 8px; }
.tg-zeile-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche-2); }
.tg-zeile-text:hover { border-color: var(--linie-stark); }
.tg-zeile-text[aria-pressed="true"] { border-color: var(--a1); background: color-mix(in srgb, var(--a1) 10%, var(--flaeche)); }
.tg-zeile .nr { flex: none; min-width: 2.2ch; font: 500 13px var(--mono); color: var(--sehr-leise); text-align: right; }
.tg-zeile .tx { min-width: 0; font: 500 16.5px/1.35 var(--mono); overflow-wrap: anywhere; word-break: break-all; }
.tg-zeile .tx .k { color: var(--a2); } .tg-zeile .tx .g { color: var(--a1); } .tg-zeile .tx .z { color: var(--a3); } .tg-zeile .tx .s { color: var(--sym); }
.tg-zeile .tx .pre { color: var(--leise); } .tg-zeile .tx .sep { color: var(--sehr-leise); }
.tg-zeile .kopier { align-self: center; flex: none; }
.tg-zahlen .schieber { margin-top: 4px; }
.tg-anzahl { gap: 6px; margin-top: 8px; }
.tg-anzahl .chip { min-height: 36px; min-width: 40px; padding: 4px 11px; justify-content: center; font-family: var(--mono); }
@media (max-width: 980px) { .tg-raster { grid-template-columns: minmax(0, 1fr); } .spalte-rechts { order: -1; } }   
@media (max-width: 640px) {
  .tg-zahlen { grid-template-columns: 1fr; }
  .tg-token-rahmen { padding: 16px 14px; }
  .tg-token { font-size: 21px; }
  .tg-token[data-gr="m"] { font-size: 17px; } .tg-token[data-gr="k"] { font-size: 15px; }
  .tg-aktionen > * { flex: 1 1 auto; }
  .tg-aktionen .kopier.breit, .tg-primaer { justify-content: center; }
  .tg-werte { grid-template-columns: 1fr 1fr; }
  .tg-werte .wert { grid-template-columns: 1fr; }
  .tg-werte .wert.haupt, .tg-werte .wert:nth-child(2) { grid-column: 1 / -1; }
  .tg-zeile .tx { font-size: 14.5px; }
  .tg-buehne .tafel-titel { flex: none; }   /* sonst quetscht die Quellenangabe den Titelpunkt weg */
  .tg-quelle { font-size: 12px; }
  .tg-zeile .nr { display: none; }
  .tg-opt-raster { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tg-token.neu span, .tg-primaer.wurf svg { animation: none; } }
*/