/* Pressbiene Designer 0.2.0: Tokens, angeglichen an das Shop-Theme (Basisdesign B, PressbieneTheme 1.5.x, scss/pressbiene/_tokens.scss).
   Dieselben Rollen und Werte wie im Shop, hell und dunkel. Der Designer behält seine eigene Matte (dunkles Türkis, in beiden Modi).
   Schriften: Quicksand 700 für Titel und Preise, Figtree für Text, Atkinson Hyperlegible Mono für Knöpfe und Etiketten, Playpen Sans (Latin) nur für die
   Sprechblase der Biene. Alle frei unter SIL OFL, Lizenztexte neben den Dateien in ../fonts/. Nichts wird von fremden Servern geladen.
   Hell und Dunkel: Attribut data-theme am Wurzelelement (hell oder dunkel), gesetzt von js/vorab.js aus localStorage "pb-thema" (derselbe Schlüssel wie im Shop).
   Ohne Wahl fehlt das Attribut und die Systemeinstellung entscheidet. */
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-variabel.woff") format("woff"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("../fonts/atkinson-mono.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Playpen Sans Latin"; src: url("../fonts/playpen-sans-latin.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Andika"; src: url("../fonts/Andika-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url("../fonts/Andika-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* Bewegung und Maße (4-Pixel-Raster, wie im Shop) */
  --tempo: 180ms; --auslauf: cubic-bezier(0.25, 1, 0.5, 1);
  --ziel: 44px; --ziel-kaufen: 52px; --strich-knopf: 2.5px;
  --a-4: 4px; --a-8: 8px; --a-12: 12px; --a-16: 16px; --a-24: 24px; --a-32: 32px; --a-48: 48px; --a-64: 64px; --a-96: 96px;
  --s-11: 0.6875rem; --s-12: 0.75rem; --s-13: 0.8125rem; --s-14: 0.875rem; --s-16: 1rem; --s-20: 1.25rem; --s-24: 1.5rem; --s-32: 2rem; --s-40: 2.5rem; --s-56: 3.5rem;
  --r-karte: 8px; --r-knopf: 14px; --r-feld: 8px; --r-klein: 4px;
  /* Schriften */
  --f-display: "Quicksand", "Figtree", ui-rounded, system-ui, sans-serif;
  --f-text: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, Consolas, monospace;
  --f-hand: "Playpen Sans Latin", "Bradley Hand", "Segoe Print", "Comic Sans MS", ui-rounded, "Figtree", system-ui, sans-serif;
  --v-display: normal; --gew-display: 700;
  --strich: 2.5; --fleck-an: 0;
  /* Festfarben der Marke (wechseln nie) */
  --tinte-fest: #17333D; --gelb: #FFDC3C; --auf-gelb: #17333D; --tuerkis: #1DB9B0; --weiss: #FFFFFF;
  --haftnotiz: #FFF3B5; --haftnotiz-text: #17333D;
  --rot: #C23D22; --gruen: #10593C;
  /* Rollen, hell */
  --grund: #FFFFFF;
  --flaeche: #FFFFFF; --zettel: #FFFFFF;
  --flaeche-2: #D3EFEE; --zettel-2: #D3EFEE;
  --linie: #C3DCD8; --kante: #55747B; --naht: #55747B;
  --tinte: #17333D; --tinte-2: #40585F;
  --haupt: #FFDC3C; --haupt-hover: #FFDC3C; --haupt-text: #17333D; --haupt-zart: #D3EFEE;
  --akzent: #1DB9B0; --akzent-text: #17333D;
  --fleck: #FFDC3C; --band: #1DB9B0; --band-text: #17333D;
  --tuerkis-zart: #D3EFEE;
  --fokus: #17333D;
  --faden: rgb(23 51 61 / 0.045);
  --logo-rand: transparent;
  --sh: rgb(23 51 61 / 0.22); --sh-voll: #17333D; --sh-weich: rgb(23 51 61 / 0.22);
  --wand-bg: #D3EFEE;
  --schleier: rgb(23 51 61 / 0.5);
  --marker: #C23D22;
  --ok: #10593C; --warn: #7A4300; --fehler: #B42318;
  --ok-zart: #DDF1E6; --warn-zart: #FFF0D4; --fehler-zart: #FCE4E2;
  /* Die Matte des Designers: dunkles Türkis in beiden Modi (Designer-Eigenheit, Weiß darauf 5,0 zu 1) */
  --matte: #0E7C7B; --matte-rand: #0A6362;
  --matte-fein: rgb(255 255 255 / 0.14); --matte-stark: rgb(255 255 255 / 0.36); --matte-text: #FFFFFF;
  --neigung: 1; --sticker-rand: 0px;
  color-scheme: light;
}

/* Dunkel, wie im Shop: Papier dunkel, Gelb bleibt Knopf und Marker (Schrift darauf immer Tinte), Fokusring hell türkis.
   Zwei Ausgaben derselben Werte: Wahl "dunkel" und Systemwunsch ohne Wahl (data-theme fehlt). */
:root[data-theme="dunkel"] {
  --grund: #0C1D22; --flaeche: #17313A; --zettel: #17313A; --flaeche-2: #1F3D48; --zettel-2: #1F3D48;
  --linie: #2B4B56; --kante: #7FA2AB; --naht: #7FA2AB;
  --tinte: #F6EFE4; --tinte-2: #BDD0D4;
  --haupt-zart: #124048; --tuerkis-zart: #124048;
  --fokus: #7BE6DF; --faden: rgb(246 239 228 / 0.05);
  --logo-rand: #FFFFFF;
  --sh: rgb(0 0 0 / 0.55); --sh-voll: #05100F; --sh-weich: rgb(0 0 0 / 0.55);
  --wand-bg: #124048; --schleier: rgb(0 0 0 / 0.6); --marker: #FF7A5C;
  --ok: #7DDDAA; --warn: #FFC066; --fehler: #FF9A94;
  --ok-zart: #143A2B; --warn-zart: #40300F; --fehler-zart: #44201F;
  --matte: #0A5656; --matte-rand: #0E6E6C; --matte-fein: rgb(255 255 255 / 0.12); --matte-stark: rgb(255 255 255 / 0.30);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --grund: #0C1D22; --flaeche: #17313A; --zettel: #17313A; --flaeche-2: #1F3D48; --zettel-2: #1F3D48;
    --linie: #2B4B56; --kante: #7FA2AB; --naht: #7FA2AB;
    --tinte: #F6EFE4; --tinte-2: #BDD0D4;
    --haupt-zart: #124048; --tuerkis-zart: #124048;
    --fokus: #7BE6DF; --faden: rgb(246 239 228 / 0.05);
    --logo-rand: #FFFFFF;
    --sh: rgb(0 0 0 / 0.55); --sh-voll: #05100F; --sh-weich: rgb(0 0 0 / 0.55);
    --wand-bg: #124048; --schleier: rgb(0 0 0 / 0.6); --marker: #FF7A5C;
    --ok: #7DDDAA; --warn: #FFC066; --fehler: #FF9A94;
    --ok-zart: #143A2B; --warn-zart: #40300F; --fehler-zart: #44201F;
    --matte: #0A5656; --matte-rand: #0E6E6C; --matte-fein: rgb(255 255 255 / 0.12); --matte-stark: rgb(255 255 255 / 0.30);
    color-scheme: dark;
  }
}