/* ==========================================================================
   Quetsch 'n' Vibes — Designsystem „Balg & Stab“
   Design-Tokens. Alle Werte der Website kommen von hier.
   Doku & Beispiele: /designsystem/
   ========================================================================== */

/* --- Schriften (selbst gehostet, keine Verbindung zu Google) ------------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/karla-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/karla-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/karla-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/karla-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Farben: Grundpalette (aus Logo & Pressekit) ---------------------- */
  --qnv-papier:        #EFECE6;  /* Hintergrund, wie das Pressekit-Papier   */
  --qnv-papier-tief:   #E6E2DA;  /* zweite Fläche, Karten, Zonen            */
  --qnv-leinen:        #F7F5F0;  /* erhöhte Fläche, Eingabefelder           */
  --qnv-tinte:         #1F1E1C;  /* Text, Linien, dunkle Buttons            */
  --qnv-tinte-weich:   #3A3834;  /* Fließtext auf Papier                    */
  --qnv-stein:         #635E57;  /* Nebentext (Web; Druck: #6A655D)        */
  --qnv-holz:          #4E3B30;  /* Logo-Korpus, dunkle Sektionen           */
  --qnv-holz-tief:     #3B2D25;  /* Tiefe in Holz-Sektionen                 */
  --qnv-sand:          #B8A68C;  /* Vibraphon-Stäbe, Akzentflächen          */
  --qnv-sand-hell:     #D9CDBA;  /* Sand auf Holz, zarte Flächen            */
  --qnv-rost:          #8C5B45;  /* Akzent: Labels, Sternchen, Links        */
  --qnv-rost-tief:     #74493A;  /* Hover/aktiv für Rost                    */
  --qnv-messing:       #C4A266;  /* Schimmer, Glanzlichter (sparsam!)       */
  --qnv-kernoel:       #4A5233;  /* Status „live/heute“ (sparsam!)          */

  /* --- Farben: Rollen (immer diese in Komponenten verwenden) ------------ */
  --color-bg:            var(--qnv-papier);
  --color-surface:       var(--qnv-papier-tief);
  --color-raised:        var(--qnv-leinen);
  --color-text:          var(--qnv-tinte);
  --color-text-soft:     var(--qnv-tinte-weich);
  --color-text-muted:    var(--qnv-stein);
  --color-accent:        var(--qnv-rost);
  --color-accent-strong: var(--qnv-rost-tief);
  --color-line:          rgb(31 30 28 / 0.14);
  --color-line-strong:   rgb(31 30 28 / 0.32);
  --color-focus:         var(--qnv-rost);
  --color-selection:     rgb(184 166 140 / 0.45);

  /* --- Typografie ------------------------------------------------------- */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text:    "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* fluide Skala: min @ 360px → max @ 1440px */
  --step--2: clamp(0.70rem, 0.68rem + 0.08vw, 0.75rem);   /* Labels         */
  --step--1: clamp(0.84rem, 0.81rem + 0.12vw, 0.92rem);   /* klein          */
  --step-0:  clamp(1.00rem, 0.96rem + 0.19vw, 1.125rem);  /* Fließtext      */
  --step-1:  clamp(1.20rem, 1.12rem + 0.37vw, 1.45rem);   /* Lead           */
  --step-2:  clamp(1.50rem, 1.33rem + 0.74vw, 2.00rem);   /* H4             */
  --step-3:  clamp(1.90rem, 1.58rem + 1.39vw, 2.85rem);   /* H3             */
  --step-4:  clamp(2.40rem, 1.84rem + 2.50vw, 4.10rem);   /* H2             */
  --step-5:  clamp(3.00rem, 2.00rem + 4.40vw, 6.00rem);   /* H1             */
  --step-6:  clamp(3.60rem, 1.90rem + 7.60vw, 9.20rem);   /* Hero           */

  --leading-tight: 0.95;
  --leading-snug:  1.15;
  --leading-text:  1.65;
  --tracking-label: 0.22em;
  --tracking-display: -0.015em;

  /* --- Abstände (4px-Raster) -------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --section-y: clamp(5rem, 3rem + 9vw, 10rem);
  --gutter:    clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 78rem;
  --measure:   38rem;     /* angenehme Zeilenlänge für Fließtext */

  /* --- Formen ----------------------------------------------------------- */
  --radius-s:    2px;
  --radius-m:    6px;
  --radius-l:    14px;
  --radius-balg: 999px 0 0 999px / 120px 0 0 120px; /* Harmonika-Ende links (Logo) */
  --radius-pill: 999px;
  --line: 1px solid var(--color-line);

  /* --- Schatten: „Druck auf Papier“, nie glänzend ---------------------- */
  --shadow-print: 0 1px 0 rgb(31 30 28 / 0.04), 0 22px 44px -28px rgb(78 59 48 / 0.55);
  --shadow-lift:  0 1px 0 rgb(31 30 28 / 0.05), 0 30px 60px -30px rgb(78 59 48 / 0.6);

  /* --- Bewegung: Balg (atmen) & Stab (anschlagen) ------------------------ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);      /* Standard: weich ankommen */
  --ease-balg:   cubic-bezier(0.65, 0, 0.35, 1);      /* ein- & ausatmen          */
  --ease-stab:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* Anschlag mit Nachfedern  */
  --dur-1: 160ms;   /* Hover, Farbe   */
  --dur-2: 320ms;   /* kleine Wege    */
  --dur-3: 640ms;   /* Einblenden     */
  --dur-4: 1100ms;  /* große Gesten   */
  --stagger: 70ms;  /* Abstand zwischen Stäben/Elementen */

  /* --- Ebenen ----------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;

  /* --- Textur: Papierkorn (SVG-Rauschen) -------------------------------- */
  --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Holz-Modus: dunkle Sektionen (Presse, Footer). Rollen werden umgedeutet. */
.theme-holz {
  --color-bg:          var(--qnv-holz);
  --color-surface:     var(--qnv-holz-tief);
  --color-raised:      rgb(239 236 230 / 0.06);
  --color-text:        var(--qnv-papier);
  --color-text-soft:   rgb(239 236 230 / 0.82);
  --color-text-muted:  rgb(239 236 230 / 0.6);
  --color-accent:      var(--qnv-sand-hell);  /* Text auf Holz: Sand-hell (AA) */
  --color-accent-strong: var(--qnv-papier);
  --color-line:        rgb(239 236 230 / 0.16);
  --color-line-strong: rgb(239 236 230 / 0.36);
  --color-focus:       var(--qnv-sand);
}

/* Tinte-Modus: sehr dunkle Flächen (Video-Bühne) */
.theme-tinte {
  --color-bg:          var(--qnv-tinte);
  --color-surface:     #2A2926;
  --color-raised:      rgb(239 236 230 / 0.05);
  --color-text:        var(--qnv-papier);
  --color-text-soft:   rgb(239 236 230 / 0.8);
  --color-text-muted:  rgb(239 236 230 / 0.55);
  --color-accent:      var(--qnv-sand);
  --color-accent-strong: var(--qnv-sand-hell);
  --color-line:        rgb(239 236 230 / 0.14);
  --color-line-strong: rgb(239 236 230 / 0.34);
  --color-focus:       var(--qnv-sand);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --stagger: 0ms;
  }
}