/* =============================================================
   Farbwelten für den Demo-Generator.

   Eine Farbwelt ist nichts weiter als ein Satz Variablen. Das ganze
   Aussehen der Demo hängt daran — deshalb ist ein Farbwähler billig
   und ein neuer Stil eine Textdatei von zwanzig Zeilen.

   Fünf helle für Standard, fünf dunkle für Premium und Cinematic.
   Jede Kombination ist auf Kontrast geprüft: Fließtext auf Grund
   mindestens 4,5 : 1, große Schrift mindestens 3 : 1 (WCAG AA).

   Schriften kommen aus assets/schrift/ — self-hosted, kein Google.
   ============================================================= */

@font-face{font-family:"Geist";src:url("../schrift/geist-variable.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../schrift/instrument-serif-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../schrift/instrument-serif-400-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}

:root{
  --serife: "Instrument Serif", Georgia, "Times New Roman", serif;
  --grotesk: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- HELL ------------------------------------------------ */

[data-marke="papier-warm"]{
  --papier:#FAF9F6; --papier2:#F2EFE8; --panel:#FFFFFF;
  --tinte:#16150F; --tinte-weich:#3A382F; --grau:#6A665B;
  --linie:#E3DED2; --linie-stark:#CBC4B4;
  --akzent:#A8411A; --akzent-hell:#C9552A; --akzent-text:#FFFFFF;
  --display:var(--serife); --sans:var(--grotesk);
  --radius:10px; --schatten:0 1px 2px rgba(22,21,15,.05), 0 8px 28px rgba(22,21,15,.07);
  /* Dunkle Bänder: Grund und Schrift tauschen. */
  --dunkel:var(--tinte); --dunkel-text:var(--papier);
}
[data-marke="papier-kuehl"]{
  --papier:#F7F8FA; --papier2:#EDEFF3; --panel:#FFFFFF;
  --tinte:#111721; --tinte-weich:#333C4A; --grau:#5E6875;
  --linie:#DFE3EA; --linie-stark:#C3CAD5;
  --akzent:#1F5F8B; --akzent-hell:#2C79AC; --akzent-text:#FFFFFF;
  --display:var(--serife); --sans:var(--grotesk);
  --radius:8px; --schatten:0 1px 2px rgba(17,23,33,.05), 0 8px 28px rgba(17,23,33,.08);
  /* Dunkle Bänder: Grund und Schrift tauschen. */
  --dunkel:var(--tinte); --dunkel-text:var(--papier);
}
[data-marke="salbei"]{
  --papier:#F4F6F1; --papier2:#E9EDE4; --panel:#FFFFFF;
  --tinte:#14201A; --tinte-weich:#31423A; --grau:#5C6B62;
  --linie:#DCE3D8; --linie-stark:#BFC9B9;
  --akzent:#33604A; --akzent-hell:#437A5E; --akzent-text:#FFFFFF;
  --display:var(--serife); --sans:var(--grotesk);
  --radius:14px; --schatten:0 1px 2px rgba(20,32,26,.05), 0 10px 30px rgba(20,32,26,.07);
  /* Dunkle Bänder: Grund und Schrift tauschen. */
  --dunkel:var(--tinte); --dunkel-text:var(--papier);
}
[data-marke="sand"]{
  --papier:#FAF6EE; --papier2:#F1EADC; --panel:#FFFFFF;
  --tinte:#1E1809; --tinte-weich:#3F3623; --grau:#6E6350;
  --linie:#E8DFCB; --linie-stark:#D0C3A6;
  --akzent:#7A5A21; --akzent-hell:#96702C; --akzent-text:#FFFFFF;
  --display:var(--serife); --sans:var(--grotesk);
  --radius:4px; --schatten:0 1px 2px rgba(30,24,9,.05), 0 8px 26px rgba(30,24,9,.08);
  /* Dunkle Bänder: Grund und Schrift tauschen. */
  --dunkel:var(--tinte); --dunkel-text:var(--papier);
}
[data-marke="schiefer"]{
  --papier:#F2F3F5; --papier2:#E7E9ED; --panel:#FFFFFF;
  --tinte:#161A20; --tinte-weich:#343B45; --grau:#5B636E;
  --linie:#DCDFE5; --linie-stark:#BFC4CD;
  --akzent:#2B3440; --akzent-hell:#3E4B5C; --akzent-text:#FFFFFF;
  --display:var(--grotesk); --sans:var(--grotesk);
  --radius:2px; --schatten:0 1px 2px rgba(22,26,32,.06), 0 8px 24px rgba(22,26,32,.08);
  /* Dunkle Bänder: Grund und Schrift tauschen. */
  --dunkel:var(--tinte); --dunkel-text:var(--papier);
}

/* ---------- DUNKEL ---------------------------------------------- */

[data-marke="nacht-kupfer"]{
  --papier:#0B0D11; --papier2:#111419; --panel:#161A21;
  --tinte:#F3F1EC; --tinte-weich:#C2C7CE; --grau:#98A1AD;
  --linie:#232932; --linie-stark:#39424F;
  --akzent:#E07A46; --akzent-hell:#FF9B63; --akzent-text:#160A03;
  --display:var(--serife); --sans:var(--grotesk);
  --radius:12px; --schatten:0 0 0 1px rgba(224,122,70,.08), 0 24px 60px rgba(0,0,0,.55);
  /* Dunkle Bänder: noch eine Stufe tiefer als der Grund. */
  --dunkel:color-mix(in oklab, var(--papier) 86%, #000);
  --dunkel-text:var(--tinte);
}
[data-marke="nacht-strom"]{
  --papier:#05060A; --papier2:#0C0E14; --panel:#12151D;
  --tinte:#E8EEF5; --tinte-weich:#B9C3CF; --grau:#8B93A1;
  --linie:#1B2029; --linie-stark:#2E3744;
  --akzent:#67E8F9; --akzent-hell:#9BF2FF; --akzent-text:#041016;
  --display:var(--grotesk); --sans:var(--grotesk);
  --radius:14px; --schatten:0 0 40px rgba(103,232,249,.16), 0 24px 60px rgba(0,0,0,.6);
  /* Dunkle Bänder: noch eine Stufe tiefer als der Grund. */
  --dunkel:color-mix(in oklab, var(--papier) 86%, #000);
  --dunkel-text:var(--tinte);
}
[data-marke="nacht-gruen"]{
  --papier:#08100C; --papier2:#0D1812; --panel:#12211A;
  --tinte:#ECF4EF; --tinte-weich:#BCCFC4; --grau:#8CA396;
  --linie:#1A2A22; --linie-stark:#2C4237;
  --akzent:#5BD08A; --akzent-hell:#82E4A9; --akzent-text:#04130A;
  --display:var(--serife); --sans:var(--grotesk);
  --radius:12px; --schatten:0 0 36px rgba(91,208,138,.14), 0 24px 60px rgba(0,0,0,.55);
  /* Dunkle Bänder: noch eine Stufe tiefer als der Grund. */
  --dunkel:color-mix(in oklab, var(--papier) 86%, #000);
  --dunkel-text:var(--tinte);
}
[data-marke="nacht-wein"]{
  --papier:#120A0E; --papier2:#1A0F15; --panel:#22141C;
  --tinte:#F6EEF1; --tinte-weich:#D3BFC7; --grau:#A8919B;
  --linie:#2B1B23; --linie-stark:#432B37;
  --akzent:#E0607A; --akzent-hell:#F5849A; --akzent-text:#1A040B;
  --display:var(--serife); --sans:var(--grotesk);
  --radius:16px; --schatten:0 0 36px rgba(224,96,122,.14), 0 24px 60px rgba(0,0,0,.55);
  /* Dunkle Bänder: noch eine Stufe tiefer als der Grund. */
  --dunkel:color-mix(in oklab, var(--papier) 86%, #000);
  --dunkel-text:var(--tinte);
}
[data-marke="stahl"]{
  --papier:#101418; --papier2:#161B21; --panel:#1C222A;
  --tinte:#E9EDF1; --tinte-weich:#BAC4CE; --grau:#8E99A5;
  --linie:#242C35; --linie-stark:#3A4552;
  --akzent:#9FB4C7; --akzent-hell:#C2D2E0; --akzent-text:#0C1116;
  --display:var(--grotesk); --sans:var(--grotesk);
  --radius:2px; --schatten:0 1px 0 rgba(255,255,255,.04), 0 20px 50px rgba(0,0,0,.5);
  /* Dunkle Bänder: noch eine Stufe tiefer als der Grund. */
  --dunkel:color-mix(in oklab, var(--papier) 86%, #000);
  --dunkel-text:var(--tinte);
}