/* ── tool.css — Charakter „Farben 2“ ─────────────────────────────────────────────────────────────────────────────────
   WAS:   Akzente (Türkis · Magenta · Gelb), Raster der Tafeln, Hauptbild = Farbfläche (OKLCH-Schnitt) mit Farbton-Streifen,
          Vorschau-Band, Kontrast-Bühne, Palette-Karten, Verlaufs-Vorschau, Simulationszeilen.
   WARUM: Das Tool lebt von der Fläche: großes, direkt greifbares Farbfeld; alles andere hängt an der einen gewählten Farbe.
   WIE ÄNDERN: Farben nur über --a1/--a2/--a3 unten; Grundbausteine stehen in ../_werk/werk.css (gemeinsam für alle Tools).
          --farbe (gesetzt von main.js) ist die gerade gewählte Farbe, --k-fg/--k-bg die Kontrastbühne.
   STUFEN (Micha 26.10., Erstansicht für Laien): offen sind nur „Farbe wählen“ und „Farbcodes“ (HEX, RGB, Name); „Weitere Formate“ und die
          Kästen Lesbarkeit · Farbsehschwäche · Palette · Verlauf sind zu. Bausteine unten im Abschnitt „Aufklappbare Kästen“:
          .fb-faltbar (Kasten) · .fb-zu (zugeklappt: Kopf ohne Abstand) · .fb-kopf (Kopfzeile: Titelknopf .fb-auf, (i)-Knopf .fb-info,
          Hilfefenster .fb-hilfe-fenster) · .fb-inhalt (der eingeklappte Teil, per hidden) · .fb-mehr (Knopf „Weitere Formate“) ·
          .fb-kaestchen/.fb-kk (feste Farben unter dem Streifen). Die Logik steht in js/main.js (Kopfkommentar „AUFBAU DER OBERFLÄCHE“).
          Die Überschrift unten („Hilfe & Infos“) kommt aus js/texte.js ('w.hilfe'), nicht aus werk.css/werk.js. */
:root { --a1: #2dd4bf; --a2: #f0589c; --a3: #ffc83d; --a1-tinte: #052a26; --farbe: #ff7a59; --farbton-farbe: #ff7a59; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #0f9d8d; --a2: #d12d7a; --a3: #b98100; --a1-tinte: #ffffff; } }
:root[data-thema="hell"] { --a1: #0f9d8d; --a2: #d12d7a; --a3: #b98100; --a1-tinte: #ffffff; }

/* Raster: links die Arbeit (Wählen · Kontrast · Verlauf), rechts das Ergebnis (Umrechnung · Palette · Simulation).
   Am Handy lösen sich die Spalten auf; Reihenfolge: Farbe → Umrechnung → Kontrast → Palette → Verlauf → Simulation. */
.fb-raster { display: grid; gap: 14px; grid-template-columns: minmax(380px, 500px) minmax(0, 1fr); align-items: start; }
.spalte { display: grid; gap: 14px; min-width: 0; }
.fb-werkzeuge { display: flex; gap: 6px; }
.versteckt { display: none !important; }

/* ── Aufklappbare Kästen: Titel = Knopf mit Pfeil, daneben (i)-Hilfe ── */
.fb-kopf { position: relative; justify-content: flex-start; }
.fb-kopf .tafel-titel { min-width: 0; }   /* langer Titel bricht um, statt das (i) in die nächste Zeile zu schieben */
.fb-kopf .fb-werkzeuge { margin-left: auto; }
.fb-zu > .fb-kopf { margin-bottom: 0; }
.fb-auf { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 2px; border: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; }
.fb-auf::after { content: ""; flex: none; width: 8px; height: 8px; margin: -3px 0 0 2px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s var(--kurve); }
.fb-auf[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.fb-auf:hover { color: var(--text); }
/* (i): Tippfläche 32 px, sichtbar nur der Kreis — Rand und kursives Serifen-i wie die alte Seite (vhc/main-vhc.css .info-i), Farbe --a1 */
/* (i) alt (bis 26.10.): Ring + kursives Serifen-i, am Handy schlecht erkennbar — ersetzt durch den gefüllten Kreis unten
.fb-info { flex: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--a1); }
.fb-info span { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; background: color-mix(in srgb, var(--a1) 12%, transparent);
  font: italic 700 14px/1 Georgia, "Times New Roman", serif; transition: background 0.15s; }
.fb-info:hover span, .fb-info[aria-expanded="true"] span { background: color-mix(in srgb, var(--a1) 28%, transparent); }
*/
/* ALT bis 26.10. abends (gefüllter Kreis in --a1, von Micha verworfen):
/* (i) neu (Micha 26.10.): gefüllter Kreis in --a1, fettes gerades „i“ in --a1-tinte; Tippfläche 32 px (Handy 40 px), sichtbar 24 px (Handy 26 px);
   offen = Ring. Identisch in ../emoji-picker/css/tool.css — Änderung immer in beiden Tools (oder nach _werk/werk.css). * /
.fb-info { flex: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--a1); }
.fb-info span { width: 24px; height: 24px; border-radius: 50%; background: var(--a1); color: var(--a1-tinte); display: grid; place-items: center;
  font: 700 15.5px/1 var(--schrift); font-style: normal; text-transform: none; letter-spacing: 0; transition: box-shadow 0.15s, filter 0.15s; }
.fb-info:hover span { filter: brightness(1.12); }
.fb-info[aria-expanded="true"] span { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--a1); }
*/
/* (i)-Hilfe-Knopf, Variante C (Micha 26.10., aus sechs Vorschlägen gewählt; gilt künftig für alle Tools):
   blaues „?“ im Kreis-Umriss, offen = gefüllt. Blau bewusst unabhängig vom Tool-Akzent, damit Hilfe überall gleich aussieht.
   Identisch in ../colors/css/tool.css und ../emoji-picker/css/tool.css (bis es nach _werk/werk.css wandert). */
.fb-info { --ib: #60a5fa; --ib-tinte: #0d0f13; flex: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--ib); }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) .fb-info { --ib: #2563eb; --ib-tinte: #ffffff; } }
:root[data-thema="hell"] .fb-info { --ib: #2563eb; --ib-tinte: #ffffff; }
.fb-info span { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ib); background: transparent; color: var(--ib); display: grid; place-items: center;
  font: 700 14px/1 var(--schrift); font-style: normal; text-transform: none; letter-spacing: 0; transition: background 0.15s, color 0.15s; }
.fb-info:hover span { background: color-mix(in srgb, var(--ib) 14%, transparent); }
.fb-info[aria-expanded="true"] span { background: var(--ib); color: var(--ib-tinte); }
.fb-hilfe-fenster { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: min(440px, 100%); padding: 14px 16px; border-radius: var(--r);
  background: var(--flaeche-2); border: 1.5px solid var(--a1); color: var(--text); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  font: 400 15px/1.5 var(--schrift); letter-spacing: normal; text-transform: none; white-space: pre-line; overflow-wrap: anywhere; }
.fb-hilfe-fenster[hidden] { display: none; }
.fb-mehr { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; width: 100%; margin-top: 10px; min-height: 44px; padding: 8px 14px; text-align: left;
  border-radius: var(--r); border: 1px solid var(--linie-stark); background: var(--flaeche-2); font-weight: 700; font-size: 15px; }
.fb-mehr small { font: 400 13px var(--mono); color: var(--leise); }
.fb-mehr::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s var(--kurve); }
.fb-mehr[aria-expanded="true"]::after { transform: rotate(-135deg); }
.fb-mehr:hover { border-color: var(--a1); }
.fb-werte-mehr { margin-top: 10px; }
/* Autorenregel display: grid/flex schlägt das UA-hidden — darum hier ausdrücklich (Fallstrick: sonst bleibt „zugeklappt“ sichtbar) */
.fb-inhalt[hidden], .fb-werte-mehr[hidden] { display: none; }

/* ── Vorschau-Band: die gewählte Farbe groß, mit lesbarer Schrift ── */
.fb-vorschau { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--r); background: var(--farbe);
  border: 1px solid var(--linie-stark); margin-bottom: 14px; transition: background 0.2s; min-height: 84px; align-content: end; }
.fb-vorschau b { font: 700 clamp(30px, 4vw, 42px)/1 var(--mono); letter-spacing: -0.02em; }
.fb-vorschau span { font: 500 17px var(--mono); opacity: 0.85; }
.fb-eingabe .feld-rahmen input { font-size: 20px; }

/* ── Hauptbild: Farbfläche (x = Chroma, y = Helligkeit) ── */
.fb-flaeche { position: relative; height: clamp(250px, 36vh, 330px); margin-top: 8px; border-radius: 16px; overflow: hidden; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none;
  border: 1px solid var(--linie-stark);
  background: repeating-linear-gradient(135deg, var(--flaeche-3) 0 7px, var(--flaeche-2) 7px 14px); }   /* schraffiert = in sRGB nicht darstellbar */
.fb-flaeche canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fb-griff { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--farbe); border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.6), 0 6px 14px rgba(0, 0, 0, 0.45); transition: transform 0.15s var(--kurve); outline: none; touch-action: none; }
.fb-flaeche.zieht .fb-griff { transform: scale(1.18); }
.fb-griff:focus-visible { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.6), 0 0 0 5px color-mix(in srgb, var(--a1) 80%, transparent), 0 6px 14px rgba(0, 0, 0, 0.45); }
.fb-achse { position: absolute; font: 700 12px var(--schrift); letter-spacing: 0.04em; padding: 2px 8px; border-radius: 99px; pointer-events: none;
  background: color-mix(in srgb, var(--flaeche) 78%, transparent); color: var(--leise); backdrop-filter: blur(4px); }
.fb-achse-x { right: 8px; bottom: 8px; } .fb-achse-y { left: 8px; top: 8px; }

/* Farbton-Streifen: Bild + durchsichtiger Schieber darüber (Tastatur und Screenreader bleiben echte range-Eingabe) */
.fb-streifen { position: relative; height: 30px; margin-top: 14px; }
.fb-streifen canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 99px; border: 1px solid var(--linie-stark); }
.fb-streifen input { position: absolute; inset: -4px -2px; width: calc(100% + 4px); height: 38px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.fb-streifen input::-webkit-slider-runnable-track { height: 38px; background: transparent; }
.fb-streifen input::-moz-range-track { height: 38px; background: transparent; }
.fb-streifen input::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: 2px; border-radius: 50%; background: var(--farbton-farbe); border: 4px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.6), 0 5px 12px rgba(0, 0, 0, 0.4); }
.fb-streifen input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--farbton-farbe); border: 4px solid #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.6), 0 5px 12px rgba(0, 0, 0, 0.4); }
.fb-streifen input:focus-visible { box-shadow: none; }
.fb-streifen input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.6), 0 0 0 5px color-mix(in srgb, var(--a1) 80%, transparent); }
.fb-streifen input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--a1) 80%, transparent); }

.fb-lch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.fb-lch input { font-size: 20px; padding: 10px 12px; }

/* ── Feste Farbkästchen direkt unter dem Streifen ── */
.fb-kaestchen { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.fb-kk { min-width: 32px; height: 36px; padding: 0; border-radius: 9px; border: 1.5px solid rgba(128, 128, 128, 0.6);   /* mittelgraue Kante: Weiß und Schwarz bleiben in beiden Themen sichtbar */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.18); transition: transform 0.12s; }
.fb-kk:hover { transform: translateY(-2px); }
.fb-kk.an { outline: 2.5px solid var(--a1); outline-offset: 2px; }

/* ── Kontrast ── */
.fb-k-bild { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 18px; padding: 18px 20px; border-radius: var(--r); background: var(--k-bg, #fff); color: var(--k-fg, #000);
  border: 1px solid var(--linie-stark); transition: background 0.2s, color 0.2s; }
.fb-k-gross { font: 700 clamp(48px, 7vw, 72px)/1 var(--titel); letter-spacing: -0.03em; }
.fb-k-texte { display: grid; gap: 3px; min-width: 0; }
.fb-k-texte strong { font: 700 24px/1.2 var(--schrift); }
.fb-k-texte span { font-size: 16px; line-height: 1.4; }
.fb-k-texte small { font-size: 12px; }
.fb-k-ui { padding: 8px 16px; border: 2px solid currentColor; border-radius: 10px; font: 700 15px var(--schrift); }
.fb-k-zahl { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; }
.fb-verhaeltnis { display: flex; align-items: baseline; gap: 8px; }
.fb-verhaeltnis b { font: 700 clamp(44px, 6vw, 60px)/1 var(--titel); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fb-verhaeltnis span { font: 500 26px var(--mono); color: var(--leise); }
.fb-k-wert { font-weight: 700; font-size: 15px; padding: 7px 14px; border-radius: 99px; border: 1.5px solid currentColor; }
.fb-k-wert[data-stufe="3"], .fb-k-wert[data-stufe="2"] { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.fb-k-wert[data-stufe="1"] { color: var(--hinweis); background: color-mix(in srgb, var(--hinweis) 12%, transparent); }
.fb-k-wert[data-stufe="0"] { color: var(--fehler); background: var(--fehler-grund); }
.fb-krit { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.fb-krit li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); font-size: 15px; }
.fb-krit-sym { font: 700 17px var(--schrift); text-align: center; }
.fb-krit li.ok .fb-krit-sym { color: var(--ok); } .fb-krit li.nein .fb-krit-sym { color: var(--fehler); }
.fb-krit-name { font-weight: 700; }
.fb-krit-stat { font: 500 13.5px var(--mono); color: var(--leise); }
.fb-k-ziel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fb-k-ziel:empty { display: none; }
.fb-anpassen { border-color: color-mix(in srgb, var(--a2) 55%, transparent); }
.fb-k-eing { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; margin-top: 16px; }
.fb-k-chips { margin-top: 10px; }

/* ── Palette ── */
.fb-schemen .chip { min-height: 40px; padding: 5px 12px; }
.fb-p-zeile { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 16px; margin-top: 14px; }
.fb-p-hilfe { margin: 0; color: var(--leise); font-size: 14px; flex: 1; min-width: 200px; line-height: 1.4; }
.fb-farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; margin-top: 16px; }
.fb-farbe { display: grid; gap: 4px; padding: 6px; border-radius: 14px; border: 1px solid var(--linie); background: var(--flaeche-2); text-align: left; transition: border-color 0.15s, transform 0.15s; }
.fb-farbe:hover { border-color: var(--linie-stark); transform: translateY(-2px); }
.fb-farbe.basis { border-color: var(--a1); box-shadow: 0 0 0 1px var(--a1) inset; }
.fb-farbe-feld { height: 62px; border-radius: 9px; display: grid; place-items: end start; padding: 5px 7px; font: 700 12px var(--schrift); border: 1px solid rgba(128, 128, 128, 0.25); }
.fb-farbe-hex { font: 500 13.5px var(--mono); padding: 0 3px; }
.fb-farbe-sub { font-size: 12px; color: var(--leise); padding: 0 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-p-export { margin-top: 18px; }
.fb-code { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); font: 500 14px/1.55 var(--mono);
  overflow: auto; max-height: 240px; white-space: pre; user-select: all; tab-size: 2; }
.fb-code-aktion { margin-top: 10px; display: flex; justify-content: flex-end; }

/* ── Simulation ── */
.fb-s-hinweis { margin: 0 0 12px; color: var(--leise); font-size: 14.5px; line-height: 1.5; }
.fb-s-raster { display: grid; gap: 8px; }
.fb-s-zeile { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; }
.fb-s-label { display: grid; line-height: 1.25; min-width: 0; }
.fb-s-label strong { font-size: 15px; } .fb-s-label small { color: var(--sehr-leise); font-size: 12.5px; }
.fb-s-reihe { display: flex; height: 40px; border-radius: 10px; overflow: hidden; border: 1px solid var(--linie-stark); }
.fb-s-feld { flex: 1; min-width: 0; }
.fb-s-feld.basis { box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.85), inset 0 -5px 0 rgba(0, 0, 0, 0.5); }

/* ── Verlauf ── */
.fb-v-bild { height: 150px; border-radius: var(--r); border: 1px solid var(--linie-stark); background: linear-gradient(135deg, #ff7a59, #7c5cff); }
.fb-v-reihe { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 14px; }
.fb-v-winkel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 10px; }
.fb-v-winkel .feld-label { margin: 0; }
.fb-v-winkel-wert { font: 700 18px var(--mono); min-width: 52px; text-align: right; }
.fb-stopps { display: grid; gap: 8px; margin-top: 12px; }
.fb-stopp { display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px 38px 38px; gap: 8px; align-items: center; }
.fb-stopp-farbe { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--linie-stark); }
.fb-stopp .feld-rahmen input { font-size: 17px; padding: 8px 10px; }
.fb-stopp .feld-einheit { font-size: 14px; padding-right: 10px; }
.fb-stopp-knopf { height: 38px; min-width: 38px; padding: 0; }
.fb-stopp-knopf:disabled { opacity: 0.35; cursor: default; }
.fb-stopp-knopf svg { width: 18px; height: 18px; }
.fb-v-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.fb-v-hilfe { color: var(--sehr-leise); font-size: 13.5px; }
.fb-v-bild + .meldung { margin-bottom: 0; }

/* ── Tablet/Handy: eine Spalte ── */
@media (max-width: 900px) {
  .fb-raster { grid-template-columns: minmax(0, 1fr); }
  .spalte { display: contents; }
  .fb-wahl { order: 1; } .fb-werte-sektion { order: 2; } .fb-kontrast { order: 3; } .fb-palette { order: 4; } .fb-verlauf { order: 5; } .fb-sehen { order: 6; }
}
@media (max-width: 640px) {
  .fb-raster { gap: 10px; }
  .fb-flaeche { height: 230px; }
  .fb-vorschau { min-height: 70px; padding: 12px 14px; }
  .fb-lch { gap: 8px; } .fb-lch input { font-size: 18px; padding: 10px 8px; }
  .fb-k-bild { grid-template-columns: auto 1fr; padding: 14px; gap: 6px 14px; }
  .fb-k-ui { grid-column: 1 / -1; justify-self: start; }
  .fb-k-texte strong { font-size: 19px; }
  .fb-k-eing { grid-template-columns: 1fr; }
  .fb-krit li { grid-template-columns: 22px 1fr; } .fb-krit-stat { grid-column: 2; }
  .fb-kaestchen { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .fb-kk { height: 40px; }
  .fb-hilfe-fenster { width: 100%; font-size: 14.5px; padding: 12px 14px; }
  .fb-info { width: 40px; height: 40px; }
  .fb-info span { width: 26px; height: 26px; font-size: 16px; }
  .fb-mehr small { font-size: 12px; }
  .fb-farben { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
  .fb-s-zeile { grid-template-columns: 1fr; gap: 4px; }
  .fb-s-label { grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
  .fb-stopp { grid-template-columns: 30px minmax(0, 1fr) 84px 36px 36px; gap: 6px; }
  .fb-stopp-farbe { width: 30px; height: 30px; }
  .fb-vorschau b { font-size: 30px; }
}

/* Lauf 2: Original-Icon (quadratisch, transparent) im Kopf statt SVG-Glyphe, auf neutralem Grund — hell und dunkel erkennbar (Muster json-converter) */
.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: 760px) { .kopf-glyphe img { width: 32px; height: 32px; } }