/* Erzeugt von build/palette.py — nicht von Hand aendern.
   Die Hexwerte stammen aus Config.Themes der Scripts, den Weg dorthin
   beschreibt der Kopf von palette.py. */

.palette{padding:var(--sp-abschnitt,5rem) 0;border-top:1px solid var(--line)}
.palette-kopf{max-width:62ch;margin-bottom:2.5rem}

/* Die Radioknoepfe tragen die Auswahl. Sie stehen vor beidem, was sich
   faerbt, damit der Geschwisterwaehler sie erreicht - deshalb liegen sie
   hier und nicht bei ihren Beschriftungen. Nicht display:none: sie
   bleiben mit der Tastatur erreichbar. */
.pv-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* position:relative, damit die ausgeblendeten Radios im Abschnitt bleiben.
   Ohne das haengen sie am Seitenanfang, und der Tastaturfokus liesse die
   Seite dorthin springen. */
.pv{position:relative;display:grid;gap:2rem;
  grid-template-columns:minmax(0,19rem) minmax(0,1fr);align-items:start}
@media (max-width:860px){.pv{grid-template-columns:1fr}}

.pv-wahlen{display:grid;gap:.5rem}
.pv-wahl{display:grid;grid-template-columns:auto 1fr;gap:.1rem .75rem;
  align-items:center;padding:.7rem .85rem;border:1px solid var(--line-ui);
  border-radius:var(--r);background:var(--surface);cursor:pointer;
  transition:border-color .15s,background .15s}
.pv-wahl:hover{background:var(--surface-2)}
.pv-punkt{grid-row:span 2;width:1.6rem;height:1.6rem;border-radius:50%;
  background:linear-gradient(135deg,var(--a),var(--d))}
.pv-name{font:600 var(--t-sm)/1.2 var(--mono);color:var(--ink)}
.pv-ton{font-size:var(--t-micro);color:var(--ink-3)}

.pv-buehne{--a:var(--accent);--d:var(--accent)}

/* ── Die Fensterattrappe ─────────────────────────────────────────── */
.pv-fenster{border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.pv-kopf{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--d) 28%,transparent),transparent);
  border-bottom:1px solid var(--line)}
.pv-marke{width:.7rem;height:.7rem;border-radius:2px;
  background:linear-gradient(135deg,var(--a),var(--d))}
.pv-titel{font:600 var(--t-sm)/1 var(--sans);color:var(--ink);flex:1}
.pv-schliessen{color:var(--ink-3);font-size:var(--t-sm)}
.pv-reiter{display:flex;gap:1.25rem;padding:0 .9rem;
  border-bottom:1px solid var(--line);font-size:var(--t-xs)}
.pv-reiter span{padding:.6rem 0;color:var(--ink-3)}
.pv-reiter-an{color:var(--a);box-shadow:inset 0 -2px 0 var(--a)}
.pv-leib{padding:1rem .9rem 1.1rem;display:grid;gap:.85rem}
.pv-wert{display:flex;align-items:baseline;justify-content:space-between}
.pv-label{font-size:var(--t-micro);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em}
.pv-zahl{font:600 1.5rem/1 var(--mono);color:var(--a)}
.pv-still{color:var(--ink-3);font-size:var(--t-sm);font-weight:400}
.pv-balken{height:.4rem;border-radius:999px;background:var(--sunken);
  overflow:hidden}
.pv-balken span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--d),var(--a))}
.pv-liste{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.pv-liste li{display:flex;align-items:center;justify-content:space-between;
  padding:.45rem .6rem;border-radius:var(--r-sm);background:var(--sunken);
  font-size:var(--t-xs);color:var(--ink-2)}
.pv-chip{font:600 var(--t-micro)/1 var(--mono);padding:.25rem .45rem;
  border-radius:var(--r-sm)}
/* Gruen und Rot sind Bedeutung, keine Palette - sie bleiben fest. */
.pv-gut{color:#5fd39b;background:rgba(95,211,155,.12)}
.pv-schlecht{color:#f0736f;background:rgba(240,115,111,.12)}
.pv-knoepfe{display:flex;gap:.5rem;margin-top:.15rem}
.pv-knopf{padding:.5rem .9rem;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--a),var(--d));color:var(--on-accent);
  font:600 var(--t-xs)/1 var(--sans)}
.pv-knopf-still{padding:.5rem .9rem;border-radius:var(--r-sm);
  border:1px solid var(--line-ui);color:var(--ink-2);
  font:600 var(--t-xs)/1 var(--sans)}

/* ── Die Zeile aus der config.lua ────────────────────────────────── */
.pv-code{margin:1rem 0 0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--sunken);overflow:hidden}
.pv-code figcaption{padding:.5rem .8rem;border-bottom:1px solid var(--line);
  font:var(--t-micro)/1 var(--mono);color:var(--ink-3)}
.pv-code pre{margin:0;padding:.8rem;overflow-x:auto}
.pv-code code{font:var(--t-sm)/1.5 var(--mono);color:var(--ink-2)}
.pv-code .c-g{color:var(--code-g)}
.pv-code .c-k{color:var(--code-k)}
.pv-code .c-s{color:var(--code-s)}
.pv-hex{border-bottom:0;border-top:1px solid var(--line)}
.pv-fuss{margin:.9rem 0 0;font-size:var(--t-xs);color:var(--ink-3);
  max-width:56ch}

/* Ohne CSS stuenden alle sechs Namen untereinander - mit CSS zeigt der
   Waehler oben genau einen. Kein JavaScript beteiligt. */
.pv-wert i{display:none;font-style:normal}

#pal-amethyst:checked ~ .pv-buehne{--a:#a89cff;--d:#7d6df0}
#pal-amethyst:checked ~ .pv-wahlen .pv-wahl[for="pal-amethyst"]{border-color:#a89cff;background:var(--surface-2)}
#pal-amethyst:checked ~ .pv-wahlen .pv-wahl[for="pal-amethyst"] .pv-name{color:#a89cff}
#pal-amethyst:checked ~ .pv-buehne .pv-wert i[data-p="amethyst"]{display:inline}
#pal-amethyst:focus-visible ~ .pv-wahlen .pv-wahl[for="pal-amethyst"]{outline:2px solid var(--accent-ink);outline-offset:2px}
#pal-bernstein:checked ~ .pv-buehne{--a:#e8a45f;--d:#c47a2e}
#pal-bernstein:checked ~ .pv-wahlen .pv-wahl[for="pal-bernstein"]{border-color:#e8a45f;background:var(--surface-2)}
#pal-bernstein:checked ~ .pv-wahlen .pv-wahl[for="pal-bernstein"] .pv-name{color:#e8a45f}
#pal-bernstein:checked ~ .pv-buehne .pv-wert i[data-p="bernstein"]{display:inline}
#pal-bernstein:focus-visible ~ .pv-wahlen .pv-wahl[for="pal-bernstein"]{outline:2px solid var(--accent-ink);outline-offset:2px}
#pal-smaragd:checked ~ .pv-buehne{--a:#5fd39b;--d:#2ea173}
#pal-smaragd:checked ~ .pv-wahlen .pv-wahl[for="pal-smaragd"]{border-color:#5fd39b;background:var(--surface-2)}
#pal-smaragd:checked ~ .pv-wahlen .pv-wahl[for="pal-smaragd"] .pv-name{color:#5fd39b}
#pal-smaragd:checked ~ .pv-buehne .pv-wert i[data-p="smaragd"]{display:inline}
#pal-smaragd:focus-visible ~ .pv-wahlen .pv-wahl[for="pal-smaragd"]{outline:2px solid var(--accent-ink);outline-offset:2px}
#pal-azur:checked ~ .pv-buehne{--a:#5fb3e8;--d:#2e7fc4}
#pal-azur:checked ~ .pv-wahlen .pv-wahl[for="pal-azur"]{border-color:#5fb3e8;background:var(--surface-2)}
#pal-azur:checked ~ .pv-wahlen .pv-wahl[for="pal-azur"] .pv-name{color:#5fb3e8}
#pal-azur:checked ~ .pv-buehne .pv-wert i[data-p="azur"]{display:inline}
#pal-azur:focus-visible ~ .pv-wahlen .pv-wahl[for="pal-azur"]{outline:2px solid var(--accent-ink);outline-offset:2px}
#pal-koralle:checked ~ .pv-buehne{--a:#f0736f;--d:#d0433f}
#pal-koralle:checked ~ .pv-wahlen .pv-wahl[for="pal-koralle"]{border-color:#f0736f;background:var(--surface-2)}
#pal-koralle:checked ~ .pv-wahlen .pv-wahl[for="pal-koralle"] .pv-name{color:#f0736f}
#pal-koralle:checked ~ .pv-buehne .pv-wert i[data-p="koralle"]{display:inline}
#pal-koralle:focus-visible ~ .pv-wahlen .pv-wahl[for="pal-koralle"]{outline:2px solid var(--accent-ink);outline-offset:2px}
#pal-magenta:checked ~ .pv-buehne{--a:#e87ac0;--d:#c4479a}
#pal-magenta:checked ~ .pv-wahlen .pv-wahl[for="pal-magenta"]{border-color:#e87ac0;background:var(--surface-2)}
#pal-magenta:checked ~ .pv-wahlen .pv-wahl[for="pal-magenta"] .pv-name{color:#e87ac0}
#pal-magenta:checked ~ .pv-buehne .pv-wert i[data-p="magenta"]{display:inline}
#pal-magenta:focus-visible ~ .pv-wahlen .pv-wahl[for="pal-magenta"]{outline:2px solid var(--accent-ink);outline-offset:2px}