/* ==========================================================================
   Küchentisch – Basis (Ticket L1 / ORG-453)
   Schriften, Variablen (die EINZIGE Stelle für Farben, Maße und Schriften),
   Hell/Dunkel, Grundlagen, Hilfsklassen. Regeln: docs/Spezifikation-Stil.md
   (§2, §3.2–§3.4, §9). Aussehen und Namen: docs/stil/stil.css.
   Außerhalb dieser Datei gibt es keine Hex-Farben und kein font-family.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, Lizenz OFL, Texte in schriften/) ---------- */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("schriften/fraunces-latin-soft-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("schriften/nunito-latin-wght-normal.woff2") format("woff2");
}

/* ---------- Variablen ---------- */
:root {
  color-scheme: light;
  /* Flächen */
  --papier: #FBF6EC;        /* Seitenhintergrund (Sahne) */
  --tisch: #F1E7D3;         /* zweite Fläche, Bänder, Eingabe-Hintergrund */
  --karte: #FFFDF8;         /* Karten */
  --linie: #E4D8C0;         /* Trennlinien, rein dekorativ */
  --rand: #857A66;          /* Ränder von Bedienelementen (≥ 3:1) */
  /* Text */
  --text: #2B2620;
  --leise: #675D4F;
  /* Marke und Rollen */
  --primaer: #3F6B4F;       /* Salbei: Hauptknopf, Links, aktive Navigation */
  --primaer-dunkel: #2D4F3A;
  --primaer-hell: #DCE9DD;
  --primaer-text: #FFFFFF;
  --tomate: #C23B25;        /* Wärme: Serie/Flamme, Plus-Knopf */
  --tomate-hell: #FBE0D9;
  --tomate-text: #FFFFFF;   /* Schrift/Symbol auf der Tomaten-Fläche (Plus-Knopf, L2) */
  --butter: #F2B632;        /* Belohnung: nur FLÄCHE mit dunklem Text, nie als Text */
  --butter-hell: #FBEBC2;
  --butter-text: #2B2620;
  --fehler: #B3261E;
  --fehler-text: #FFFFFF;   /* Schrift auf der Fehler-Fläche (Gefahr-Knopf) */
  /* Personen (immer mit Buchstabe/Name zusammen, nie nur Farbe) */
  --erik: #2A6A8A;
  --emmy: #A63D6B;
  --person-text: #FFFFFF;   /* Buchstabe im Personen-Kreis */
  /* Maße */
  --a1: .25rem; --a2: .5rem; --a3: .75rem; --a4: 1rem; --a5: 1.5rem; --a6: 2rem; --a7: 3rem;
  --rund-s: .625rem; --rund-m: 1rem; --rund-l: 1.5rem; --pille: 999px;
  --tipp: 3rem;             /* kleinste Tippfläche (48 px bei 16 px Schrift) */
  --leiste-h: 4.25rem;      /* Höhe der unteren Leiste (ohne Sicherheitsrand) */
  --inhalt-breit: 40rem;
  --schatten: 0 1px 0 rgb(80 60 20 / .06), 0 10px 20px -14px rgb(80 60 20 / .45);
  --schatten-hoch: 0 2px 0 rgb(80 60 20 / .06), 0 18px 34px -16px rgb(80 60 20 / .55);
  /* Schrift */
  --schrift-titel: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --schrift-text: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schriftgrad: 1;
  /* Bewegung */
  --dauer-1: 120ms; --dauer-2: 220ms; --dauer-3: 420ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-hupf: cubic-bezier(.34, 1.56, .64, 1);
  /* Pflanzen-Symbole (Farben der SVG-Figuren) */
  --blatt: #5C9A6B; --blatt-dunkel: #3F6B4F; --topf: #D98A5B; --erde: #6B4A32; --bluete: #F2B632;
}

/* Dunkel: automatisch nach Geräteeinstellung, von Hand überschreibbar (data-thema).
   Beide Blöcke haben dieselben Werte (der Test prüft das). */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --papier: #1C1A16; --tisch: #2F2B24; --karte: #26231E; --linie: #3E382F; --rand: #9A8F7B;
    --text: #F2EBDC; --leise: #B5AB98;
    --primaer: #8CC7A1; --primaer-dunkel: #5E9C77; --primaer-hell: #2B3F32; --primaer-text: #14201A;
    --tomate: #FF8A72; --tomate-hell: #4A2A22; --tomate-text: #2B2620; --butter: #F5C24D; --butter-hell: #433818; --butter-text: #2B2620;
    --fehler: #F2A8A0; --fehler-text: #2B2620; --erik: #7DBBDB; --emmy: #E58AB1; --person-text: #14201A;
    --schatten: 0 1px 0 rgb(0 0 0 / .4), 0 10px 20px -14px rgb(0 0 0 / .8);
    --schatten-hoch: 0 2px 0 rgb(0 0 0 / .4), 0 18px 34px -16px rgb(0 0 0 / .9);
    --blatt: #7BC48D; --blatt-dunkel: #4F8F63; --topf: #C47A4D; --erde: #4A3524;
  }
}
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --papier: #1C1A16; --tisch: #2F2B24; --karte: #26231E; --linie: #3E382F; --rand: #9A8F7B;
  --text: #F2EBDC; --leise: #B5AB98;
  --primaer: #8CC7A1; --primaer-dunkel: #5E9C77; --primaer-hell: #2B3F32; --primaer-text: #14201A;
  --tomate: #FF8A72; --tomate-hell: #4A2A22; --tomate-text: #2B2620; --butter: #F5C24D; --butter-hell: #433818; --butter-text: #2B2620;
  --fehler: #F2A8A0; --fehler-text: #2B2620; --erik: #7DBBDB; --emmy: #E58AB1; --person-text: #14201A;
  --schatten: 0 1px 0 rgb(0 0 0 / .4), 0 10px 20px -14px rgb(0 0 0 / .8);
  --schatten-hoch: 0 2px 0 rgb(0 0 0 / .4), 0 18px 34px -16px rgb(0 0 0 / .9);
  --blatt: #7BC48D; --blatt-dunkel: #4F8F63; --topf: #C47A4D; --erde: #4A3524;
}
/* Schriftgröße von Hand: normal / groß / sehr groß (greift zusätzlich zur Browser-Einstellung) */
:root[data-schrift="gross"] { --schriftgrad: 1.15; }
:root[data-schrift="sehrgross"] { --schriftgrad: 1.3; }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(100% * var(--schriftgrad)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--text);
  font-family: var(--schrift-text); font-size: 1.0625rem; line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 650; line-height: 1.2; margin: 0 0 var(--a3); }
h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.125rem; }
p { margin: 0 0 var(--a3); }
a { color: var(--primaer); text-underline-offset: .18em; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--primaer); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }   /* eine der zwei erlaubten !important-Stellen (die andere: Ruhe) */

/* ---------- Hilfsklassen ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leise { color: var(--leise); }
.klein { font-size: .875rem; }
.titel { font-family: var(--schrift-titel); }
.zeile-flex { display: flex; align-items: center; gap: var(--a3); }
.stapel { display: grid; gap: var(--a4); }
.stapel--eng { gap: var(--a2); }
.symbol { width: 1.5rem; height: 1.5rem; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.symbol--gross { width: 2rem; height: 2rem; }
.symbol--voll { fill: currentColor; }

/* ---------- Ruhe: Bewegung zurückfahren (Geräteeinstellung ODER Schalter im Konto) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
:root[data-ruhe="an"] *, :root[data-ruhe="an"] *::before, :root[data-ruhe="an"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}