/* Tokens der Scout Retro Kollektion. Grundlage: Claude-Design-Entwurf v2 (Tokens & Komponenten),
   mit den Änderungen vom Marketing (21.10.): Schrift Scout-Blau, Grund Weiß, Türkis statt Gelb als Markierung, Schrift Inter. */

/* Inter (OFL, siehe /static/fonts/OFL-Inter.txt), variable Schriftstärke 100–900 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'), url(/static/fonts/inter-latin-wght-normal.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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'), url(/static/fonts/inter-latin-ext-wght-normal.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: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-latin-wght-italic.woff2) format('woff2-variations'), url(/static/fonts/inter-latin-wght-italic.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: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-latin-ext-wght-italic.woff2) format('woff2-variations'), url(/static/fonts/inter-latin-ext-wght-italic.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: Kontrast auf Weiß – Scout-Blau 10,6 : 1, Blau leise 5,7 : 1, Rot (weiße Schrift) 5,0 : 1, Scout-Blau auf Türkis 5,0 : 1 */
  --blau: #263C84;          /* Scout-Blau: Schrift, Überschriften, dunkle Knöpfe, Fuß */
  --blau-leise: #5A6AA0;    /* Nebentext */
  --blau-gesperrt: #4F5F96; /* Schrift auf gesperrten Knöpfen (4,7 : 1 auf --linie) */
  --rot: #E00010;           /* Akzent */
  --rot-text: #B0000D;      /* Fehlertext auf Rosa */
  --tuerkis: #85C0BF;       /* Markierung und Hauptknopf: gewählter Menüpunkt, Zahl am Warenkorb, In den Warenkorb, Zur Kasse,
                               Claim am Video (Schrift darauf Scout-Blau) */
  --tuerkis-drueber: #9DCDCC;   /* Hauptknopf drüber (Scout-Blau darauf 5,8 : 1) */
  --tuerkis-gedrueckt: #7DBAB9; /* Hauptknopf gedrückt (Scout-Blau darauf 4,6 : 1) */
  --tuerkis-hell: #E4F1F1;  /* Drüber-Zustand im Menü */
  --gelb: #FFD800;
  --gelb-hell: #FFF6BF;
  --pink: #D84070;
  --orange: #E07028;
  --weiss: #FFFFFF;
  --grund: #FFFFFF;
  --flaeche: #F3F6FA;       /* ruhige Flächen (Leer-Zustand, Story-Bilder) */
  --linie: #DDE2EE;
  --linie-stark: #B9C1D8;   /* gestrichelt: nicht lieferbar */
  --rosa: #FDE8EA;
  --skelett: #E6EAF3;

  --konfetti-blau: #00A0E8;
  --konfetti-magenta: #D00080;
  --konfetti-gelb: #FFF000;
  --konfetti-orange: #F05800;
  --konfetti-rosa: #E85078;
  --konfetti-gruen: #88C010;

  /* Abstände */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px; --a8: 64px;
  --rand: 20px;             /* Seitenrand: Handy 20, Desktop 48 */
  --abschnitt: 64px;        /* Abstand der Abschnitte: Handy 64, Desktop 112 */
  --raster-spalte: 12px;
  --raster-zeile: 24px;
  --breite: 1440px;

  /* Rundungen */
  --r-feld: 4px; --r-bild: 10px; --r-karte: 14px; --r-etikett: 20px; --r-pille: 999px;

  /* Schatten (bläulich, weich) */
  --schatten-aufkleber: 0 1px 2px rgb(38 60 132 / .06), 0 6px 18px rgb(38 60 132 / .07);
  --schatten-abgehoben: 0 2px 4px rgb(38 60 132 / .08), 0 16px 36px rgb(38 60 132 / .14);
  --schatten-knopf: 0 3px 0 rgb(38 60 132 / .28);
  --schatten-fenster: 0 0 40px rgb(26 26 26 / .25);
  --abdunkeln: rgb(20 26 48 / .45);

  /* Bewegung */
  --mikro: 160ms ease;
  --heben: 220ms cubic-bezier(.2, .7, .2, 1);
  --blende: 320ms cubic-bezier(.2, .7, .2, 1);
  --fenster: 360ms cubic-bezier(.22, 1, .36, 1);
  --huepfen: 560ms cubic-bezier(.34, 1.56, .64, 1);

  /* Schrift (Handy → Desktop) */
  --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gr-display: clamp(3.25rem, 1.6rem + 7vw, 7rem);       /* 52 → 112 */
  --gr-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);       /* 36 → 60 */
  --gr-h1-produkt: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);/* 28 → 40 */
  --gr-h2: clamp(1.875rem, 1.4rem + 1.9vw, 2.875rem);     /* 30 → 46 */
  --gr-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);      /* 18 → 22 */
  --gr-zitat: clamp(2.125rem, 1.2rem + 3.6vw, 4rem);      /* 34 → 64 */
}

@media (min-width: 760px) {
  :root { --rand: 32px; --abschnitt: 88px; --raster-spalte: 20px; --raster-zeile: 32px; }
}
@media (min-width: 1100px) {
  :root { --rand: 48px; --abschnitt: 112px; --raster-spalte: 24px; --raster-zeile: 40px; }
}