/* Super Bilder App V2 – gemeinsames Design aller Seiten */
:root {
  /* Farben wie das Buchcover: Gelb #FDE020, Blau #0B6DBD, Rot #E64117 */
  --bg: #fff9d6;
  --flaeche: #ffffff;
  --text: #1d2433;
  --leise: #4f5563;
  --linie: #eadfa6;
  --blau: #0b6dbd;         /* Knöpfe, Links, Icons: weiße Schrift darauf ist gut lesbar */
  --blau-dunkel: #08548f;
  --blau-tief: #0a3d6b;    /* Schrift auf Gelb */
  --blau-hell: #e3f0fb;
  --gelb: #fde020;
  --gelb-hell: #fff3b0;
  --rot: #c7360f;          /* nur für „Neu“, Warnungen und Fehler */
  --rot-hell: #fde4e1;
  --gruen: #1d7a46;        /* nur für „Kopiert“ */
  --gruen-hell: #dff3e7;
  --schatten: 0 2px 10px rgba(10, 61, 107, .08);
  /* Rollen, die sich je Farbschema ändern */
  --auf-blau: #ffffff;     /* Schrift auf Knöpfen */
  --kopf-bg: var(--blau); --kopf-text: #ffffff; --kopf-leise: #d6e8f8; --kopf-streifen: var(--gelb); --kopf-rand: rgba(255, 255, 255, .7);
  --hervor-bg: var(--gelb); --hervor-rand: #e9c900; --hervor-text: var(--blau-tief);
  --bild-leer: #f3edd0;
  --band-bg: rgba(10, 61, 107, .9);
  --backdrop: rgba(10, 30, 50, .6);
  --prompt-bg: #fffdf0; --prompt-rand: #e5d27a;
  --feld-bg: #ffffff;
  --mark-text: #6b4a00;
  --toast-bg: var(--blau-tief);
  --ic-grund: var(--blau); --ic-linie: #ffffff; --ic-akzent: var(--gelb);
  --radius: 16px;
  --schrift: 19px;
  color-scheme: light;
}
html.gross { --schrift: 22px; }

* { box-sizing: border-box; }
html { font-size: var(--schrift); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--blau); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.huelle { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.leise { color: var(--leise); }
.klein { font-size: .85rem; }
.versteckt { display: none !important; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }

/* ---------- Kopfzeile ---------- */
.kopf { background: var(--kopf-bg); border-bottom: 4px solid var(--kopf-streifen); position: sticky; top: 0; z-index: 20; }
.kopf .huelle { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--kopf-text); font-weight: 700; margin-right: auto; }
.marke span.logo { font-size: 1.6rem; }
.marke small { display: block; font-weight: 500; color: var(--kopf-leise); font-size: .75rem; }
.kopf-knopf {
  border: 2px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: 12px;
  min-height: 48px; padding: 0 14px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.kopf-knopf:hover { border-color: var(--blau); }
.zurueck { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 6px; font-weight: 600; text-decoration: none; min-height: 44px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 20px; border-radius: 12px; border: 2px solid var(--blau);
  background: var(--blau); color: var(--auf-blau); font: inherit; font-weight: 700; font-size: .95rem;
  cursor: pointer; text-decoration: none; text-align: center; line-height: 1.2;
}
.knopf:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.knopf.zweit { background: var(--flaeche); color: var(--blau); }
.knopf.zweit:hover { background: var(--blau-hell); }
.knopf.ok { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.knopf.breit { width: 100%; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopfreihe .knopf { flex: 1 1 200px; }

/* ---------- Startseite ---------- */
.held { padding: 28px 0 8px; }
.held h1 { font-size: 2rem; margin-bottom: .3em; }
.erstes-mal {
  display: flex; align-items: center; gap: 16px; background: var(--hervor-bg); border: 2px solid var(--hervor-rand);
  border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--hervor-text); margin: 18px 0 28px;
}
.erstes-mal .ic.st { width: 3.2rem; height: 3.2rem; }
.erstes-mal .leise { color: var(--hervor-text); }
.erstes-mal strong { display: block; font-size: 1.1rem; }
.erstes-mal .pfeil { margin-left: auto; font-size: 1.6rem; color: var(--blau); }
.abschnitt { margin: 8px 0 34px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.kachel {
  background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--radius); padding: 18px;
  text-decoration: none; color: var(--text); display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--schatten);
  min-height: 96px; transition: border-color .15s, transform .15s;
}
.kachel:hover { border-color: var(--blau); transform: translateY(-2px); }
.kachel .ic.st { width: 3rem; height: 3rem; }
.kachel strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.kachel span.leise { font-size: .85rem; display: block; }
.werkzeuge { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.werkzeug {
  border-radius: var(--radius); overflow: hidden; background: var(--flaeche); border: 2px solid var(--linie);
  text-decoration: none; color: var(--text); box-shadow: var(--schatten); display: flex; flex-direction: column;
}
.werkzeug:hover { border-color: var(--blau); }
.werkzeug .bildpaar { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; background: var(--bild-leer); }
.werkzeug .bildpaar img { width: 100%; height: 100%; object-fit: cover; }
.werkzeug .inhalt { padding: 16px 18px 18px; }
.werkzeug strong { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

/* ---------- Galerie ---------- */
.werkzeugleiste { display: grid; gap: 12px; margin: 10px 0 18px; }
.suche {
  width: 100%; min-height: 56px; border: 2px solid var(--linie); border-radius: 14px; padding: 0 16px 0 48px;
  font: inherit; background: var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%234f5563' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='9.5' cy='9.5' r='6.5'/%3E%3Cpath d='M14.5 14.5 20 20'/%3E%3C/svg%3E") no-repeat 16px center;
}
.suche:focus { border-color: var(--blau); outline: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.chip {
  flex: 0 0 auto; border: 2px solid var(--linie); background: var(--flaeche); border-radius: 999px; min-height: 46px;
  padding: 0 16px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; color: var(--text); white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: var(--auf-blau); }
.trefferzeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--schatten);
}
.karte .bild { position: relative; aspect-ratio: 1; background: var(--bild-leer); border: 0; padding: 0; cursor: zoom-in; width: 100%; }
.karte .bild img { width: 100%; height: 100%; object-fit: cover; }
.karte .inhalt { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.karte h3 { margin: 0; font-size: 1rem; }
.karte .vorschau { font-size: .85rem; color: var(--leise); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.karte .knopfreihe { margin-top: auto; }
.karte .knopfreihe .knopf { flex: 1 1 120px; min-height: 48px; padding: 8px 12px; font-size: .88rem; }
.schloss-band {
  position: absolute; left: 10px; top: 10px; background: var(--band-bg); color: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: .78rem; font-weight: 700;
}
.karte.zu .bild img { filter: saturate(.85); }
.hochlade-hinweis { background: var(--gelb-hell); border-radius: 10px; padding: 8px 12px; font-size: .85rem; margin: 0; }
.leer { text-align: center; padding: 40px 16px; color: var(--leise); }

/* ---------- Großansicht (Dialog) ---------- */
dialog {
  border: 0; padding: 0; border-radius: 20px; width: min(980px, calc(100% - 24px)); max-height: calc(100% - 24px);
  background: var(--flaeche); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
dialog::backdrop { background: var(--backdrop); }
.dlg-kopf { display: flex; justify-content: flex-end; position: sticky; top: 0; padding: 10px; background: linear-gradient(var(--flaeche) 70%, transparent); z-index: 2; }
.dlg-zu { min-height: 48px; }
.dlg-inhalt { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 24px 24px; }
.dlg-inhalt img { border-radius: 14px; width: 100%; }
.prompt-box {
  background: var(--prompt-bg); border: 2px dashed var(--prompt-rand); border-radius: 14px; padding: 14px 16px; white-space: pre-wrap;
  font-size: .95rem; margin: 0 0 14px;
}
.tipp-box { background: var(--blau-hell); border-radius: 12px; padding: 12px 14px; font-size: .9rem; margin: 0 0 14px; }
.buch-bezug { font-size: .82rem; color: var(--leise); margin-top: 14px; }
@media (max-width: 720px) {
  .dlg-inhalt { grid-template-columns: 1fr; padding: 0 16px 20px; gap: 16px; }
  dialog { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; margin: 0; }
}

/* ---------- Freischalten ---------- */
.frei-box { text-align: center; padding: 8px 24px 28px; max-width: 520px; margin: 0 auto; }
.frei-box .gross-emoji { font-size: 3rem; }
.frei-box input {
  width: 100%; min-height: 58px; font: inherit; font-size: 1.15rem; text-align: center; border: 2px solid var(--linie);
  border-radius: 14px; margin: 8px 0 12px; letter-spacing: .05em;
}
.frei-box input:focus { border-color: var(--blau); outline: none; }
.frei-fehler { color: var(--rot); font-weight: 600; min-height: 1.5em; }
.zugang-leiste {
  background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--radius); padding: 14px 18px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 24px;
}
.zugang-leiste.offen { background: var(--blau-hell); border-color: var(--linie); }

/* ---------- Meldung unten ---------- */
.meldung {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); background: var(--toast-bg); color: #fff;
  padding: 14px 20px; border-radius: 14px; font-weight: 600; max-width: calc(100% - 32px); width: max-content;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .25s; z-index: 100; text-align: center;
}
.meldung.da { transform: translate(-50%, 0); }

/* ---------- Textseiten (Erste Schritte, Bild-Doktor) ---------- */
.lesen { max-width: 780px; }
.schritt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px; margin: 0 0 18px; box-shadow: var(--schatten); }
.schritt-nr {
  display: inline-flex; width: 44px; height: 44px; border-radius: 50%; background: var(--blau); color: var(--auf-blau);
  font-weight: 800; align-items: center; justify-content: center; margin-right: 10px; flex: 0 0 auto;
}
.schritt h2 { display: flex; align-items: center; font-size: 1.25rem; }
.schritt img { border-radius: 12px; border: 1px solid var(--linie); margin: 12px 0; }
.liste-gross { padding-left: 1.2em; }
.liste-gross li { margin-bottom: .5em; }
.kasten { border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; }
.kasten.info { background: var(--blau-hell); }
.kasten.warn { background: var(--gelb-hell); }
.kasten.gruen { background: var(--flaeche); border: 2px solid var(--linie); }
kbd { background: var(--feld-bg); color: var(--text); border: 1px solid var(--linie); border-bottom-width: 3px; border-radius: 6px; padding: 1px 7px; font-family: inherit; font-size: .9em; }

.doktor details {
  background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--radius); margin: 0 0 12px; box-shadow: var(--schatten);
}
.doktor details[open] { border-color: var(--blau); }
.doktor summary {
  list-style: none; cursor: pointer; padding: 16px 18px; min-height: 64px; display: flex; align-items: center; gap: 14px;
  font-weight: 700; font-size: 1.02rem;
}
.doktor summary::-webkit-details-marker { display: none; }
.doktor summary .ic.st { width: 2.6rem; height: 2.6rem; }
.doktor summary::after { content: "＋"; margin-left: auto; color: var(--blau); font-size: 1.4rem; }
.doktor details[open] summary::after { content: "－"; }
.doktor .antwort { padding: 0 18px 18px; }
.rettung { display: flex; gap: 10px; align-items: stretch; margin: 0 0 10px; flex-wrap: wrap; }
.rettung .prompt-box { flex: 1 1 260px; margin: 0; }
.rettung .knopf { flex: 0 0 auto; }

/* ---------- Vorlagen & Werkstatt ---------- */
.formular { display: grid; gap: 14px; margin: 0 0 16px; }
.feld label { display: block; font-weight: 700; margin-bottom: 4px; }
.feld .hilfe { font-size: .82rem; color: var(--leise); display: block; margin-bottom: 6px; }
.feld input, .feld textarea {
  width: 100%; min-height: 54px; border: 2px solid var(--linie); border-radius: 12px; padding: 10px 14px; font: inherit; background: var(--feld-bg); color: var(--text);
}
.feld textarea { min-height: 90px; resize: vertical; }
.feld input:focus, .feld textarea:focus { border-color: var(--blau); outline: none; }
.feld.fehlt input, .feld.fehlt textarea { border-color: var(--rot); background: var(--rot-hell); }
.vorschau-prompt mark { background: var(--gelb-hell); color: var(--mark-text); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.vorschau-prompt .eingesetzt { background: var(--blau-hell); border-radius: 4px; padding: 0 2px; }
.vorher-nachher { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: relative; }
.vorher-nachher figure { margin: 0; position: relative; }
.vorher-nachher img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.vorher-nachher figcaption {
  position: absolute; left: 8px; bottom: 8px; background: var(--band-bg); color: #fff; font-size: .75rem;
  font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.vorher-nachher.ohne-bild { display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; background: var(--blau-hell); border-radius: 10px; }
.vorher-nachher.ohne-bild .ic.st { width: 5rem; height: 5rem; }
.anleitung { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0 0 18px; counter-reset: s; }
.anleitung li {
  list-style: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px 14px 62px;
  position: relative; min-height: 72px;
}
.anleitung li::before {
  counter-increment: s; content: counter(s); position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--blau); color: var(--auf-blau); font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.anleitung { padding: 0; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); margin-top: 48px; padding: 28px 0 40px; background: var(--flaeche); font-size: .88rem; }
.fuss .huelle { display: grid; gap: 10px; }
.fuss p { margin: 0; }

/* ---------- Handy: Galerie als 2er-Raster wie ein Fotoalbum, Knöpfe in der Großansicht ---------- */
@media (max-width: 599px) {
  .raster.galerie { grid-template-columns: 1fr 1fr; gap: 10px; }
  .raster.galerie .karte .inhalt { padding: 10px 10px 12px; gap: 0; }
  .raster.galerie .karte h3 { font-size: .88rem; cursor: pointer; }
  .raster.galerie .karte .vorschau,
  .raster.galerie .karte .knopfreihe,
  .raster.galerie .karte .hochlade-hinweis { display: none; }
  .raster.galerie .schloss-band { left: 6px; top: 6px; font-size: .7rem; padding: 3px 8px; }
  .werkzeug .bildpaar { aspect-ratio: 5 / 2; }
  .werkzeug .bildpaar.symbol { aspect-ratio: 5 / 1.4; font-size: 3rem !important; }
}
textarea.prompt-edit { display: block; width: 100%; min-height: 190px; font: inherit; font-size: .95rem; line-height: 1.5; resize: vertical; color: var(--text); field-sizing: content; }
textarea.prompt-edit:focus { border-style: solid; border-color: var(--blau); outline: none; background: var(--feld-bg); }
.karte[id], details[id] { scroll-margin-top: 84px; }
@media (min-width: 900px) { .chips { flex-wrap: wrap; overflow: visible; } }

/* ---------- Buchcover ---------- */
.cover { border-radius: 2px 5px 5px 2px; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 16px rgba(10,61,107,.22); background: #fde020; height: auto; }
.cover-kopf { width: 34px; height: 48px; }
.cover-frei { width: 113px; margin: 0 auto 14px; transform: rotate(-3deg); }
.buch-box {
  display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center; background: var(--flaeche);
  border: 2px solid var(--gelb); border-radius: var(--radius); padding: 22px; margin: 8px 0 34px; box-shadow: var(--schatten);
}
.buch-box .cover { width: 140px; }
.buch-box h2 { margin-bottom: .3em; }
.buch-box .knopfreihe .knopf { flex: 0 1 auto; }
.frei-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blau); min-height: 52px; }
.fuss-buch { display: flex; gap: 14px; align-items: center; }
.fuss-buch .cover { width: 45px; flex: 0 0 auto; }
@media (max-width: 599px) {
  .buch-box { grid-template-columns: 96px 1fr; gap: 16px; padding: 16px; }
  .buch-box .cover { width: 96px; }
  .buch-box .knopfreihe { grid-column: 1 / -1; }
}
/* Knöpfe in Karten immer unten auf einer Linie, egal wie lang Titel und Text sind */
.karte .unten { margin-top: auto; }

/* ---------- Kopfzeile auf Blau ---------- */
.kopf .kopf-knopf { background: transparent; border-color: var(--kopf-rand); color: var(--kopf-text); }
.kopf .kopf-knopf:hover { background: rgba(127, 127, 127, .15); border-color: var(--kopf-text); }

/* ---------- Icons (assets/icons.js, Set 3 „Blauer Sticker“) ---------- */
.ic { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -.22em; flex: 0 0 auto;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic .m, .ic .mb, .ic .as, .ic .ks { fill: none; stroke: currentColor; }
.ic .mf, .ic .k { fill: currentColor; stroke: none; }
.ic .a { fill: currentColor; opacity: .28; stroke: none; }
.ic.st { width: 2.4rem; height: 2.4rem; stroke-width: 2.2; vertical-align: middle; }
.ic.st .grund { fill: var(--ic-grund); }
.ic.st .m, .ic.st .mb { stroke: var(--ic-linie); }
.ic.st .mb { fill: var(--ic-grund); }
.ic.st .mf { fill: var(--ic-linie); }
.ic.st .a { fill: var(--ic-akzent); opacity: 1; }
.ic.st .as { stroke: var(--ic-akzent); }
.ic.st .k { fill: var(--ic-grund); }
.ic.st .ks { stroke: var(--ic-grund); stroke-width: 1.8; }
h1 .ic.st { width: 3rem; height: 3rem; margin-right: .3em; vertical-align: -.6em; }
h2 .ic.st { width: 2.4rem; height: 2.4rem; margin-right: .3em; vertical-align: -.5em; }
h1:has(.ic.st), h2:has(.ic.st) { display: flex; align-items: center; gap: .4em; }
h1:has(.ic.st) .ic.st, h2:has(.ic.st) .ic.st { margin-right: 0; }
h1 > span[data-icon], h2 > span[data-icon] { display: contents; }
.karte h3 { display: flex; align-items: center; gap: 10px; }
.karte h3 .ic.st { width: 2.3rem; height: 2.3rem; }
.werkzeug strong .ic.st { width: 2.3rem; height: 2.3rem; }
.werkzeug .bildpaar.symbol .ic.st { width: 5.5rem; height: 5.5rem; }
.knopf .ic, .chip .ic, .kopf-knopf .ic { width: 1.25em; height: 1.25em; }
.chip { display: inline-flex; align-items: center; gap: 6px; }
.chip[aria-pressed="true"] .ic .a { opacity: .45; }
.schloss-band { display: inline-flex; align-items: center; gap: 5px; }
.kasten .ic, .tipp-box .ic, .hochlade-hinweis .ic, .buch-bezug .ic, .fuss .ic, .zugang-leiste .ic { color: var(--blau); margin-right: .2em; }

/* ---------- Farbschemata: Original (Buchfarben), Hell, Dunkel ---------- */
html[data-thema="hell"] {
  --bg: #ffffff; --flaeche: #ffffff; --text: #111111; --leise: #4a4a4a; --linie: #d6d6d6;
  --blau: #111111; --blau-dunkel: #000000; --blau-tief: #111111; --blau-hell: #f1f1f1;
  --gelb: #111111; --gelb-hell: #f3f3f3; --rot: #b3261e; --rot-hell: #fbe9e7; --gruen: #1d6b3f; --gruen-hell: #e9f3ec;
  --schatten: 0 1px 4px rgba(0, 0, 0, .08);
  --kopf-bg: #ffffff; --kopf-text: #111111; --kopf-leise: #4a4a4a; --kopf-streifen: #111111; --kopf-rand: #111111;
  --hervor-bg: #f3f3f3; --hervor-rand: #111111; --hervor-text: #111111;
  --bild-leer: #eeeeee; --band-bg: rgba(0, 0, 0, .82); --backdrop: rgba(0, 0, 0, .55);
  --prompt-bg: #fafafa; --prompt-rand: #9a9a9a; --mark-text: #111111; --toast-bg: #111111;
  --ic-grund: #111111; --ic-linie: #ffffff; --ic-akzent: #c8c8c8;
}
html[data-thema="dunkel"] {
  --bg: #121417; --flaeche: #1c2027; --text: #eceff4; --leise: #a9b1bd; --linie: #333a45;
  --blau: #5aa9f0; --blau-dunkel: #86c1f5; --blau-tief: #0a3d6b; --blau-hell: #1a2a3b;
  --gelb: #fde020; --gelb-hell: #37320f; --rot: #ff8a6b; --rot-hell: #3d211b; --gruen: #47c483; --gruen-hell: #173326;
  --schatten: 0 2px 10px rgba(0, 0, 0, .35);
  --auf-blau: #08121d;
  --kopf-bg: #1c2027; --kopf-text: #eceff4; --kopf-leise: #a9b1bd; --kopf-streifen: #fde020; --kopf-rand: #5b6472;
  --hervor-bg: #262b33; --hervor-rand: #fde020; --hervor-text: #eceff4;
  --bild-leer: #262b33; --band-bg: rgba(8, 18, 29, .85); --backdrop: rgba(0, 0, 0, .7);
  --prompt-bg: #171a1f; --prompt-rand: #6b6230; --feld-bg: #12151a; --mark-text: #fde020; --toast-bg: #2c333e;
  --ic-grund: #0b6dbd; --ic-linie: #ffffff; --ic-akzent: #fde020;
  color-scheme: dark;
}
html[data-thema="dunkel"] .knopf.ok { color: #08121d; }
html[data-thema="dunkel"] .cover { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.5); }

/* ---------- Farbschema-Wahl oben rechts ---------- */
.kopf .huelle { position: relative; }
.thema-menue {
  position: absolute; right: 16px; top: calc(100% + 8px); z-index: 30; width: min(280px, calc(100vw - 32px));
  background: var(--flaeche); color: var(--text); border: 2px solid var(--linie); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25); padding: 8px; display: grid; gap: 4px;
}
.thema-menue p { margin: 4px 8px 6px; font-size: .8rem; color: var(--leise); font-weight: 600; }
.thema-wahl {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 10px; border-radius: 10px;
  border: 2px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: .92rem;
  font-weight: 600; cursor: pointer; text-align: left;
}
.thema-wahl:hover { background: var(--blau-hell); }
.thema-wahl[aria-checked="true"] { border-color: var(--blau); }
.thema-wahl .muster { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(127, 127, 127, .45); }
.thema-wahl small { display: block; font-weight: 500; color: var(--leise); font-size: .78rem; }
.thema-wahl .haken { margin-left: auto; color: var(--blau); visibility: hidden; font-weight: 800; }
.thema-wahl[aria-checked="true"] .haken { visibility: visible; }
@media (max-width: 460px) { .kopf .kopf-knopf .wort { display: none; } }