/* The Zone Media · E-Book «Google Ads wirtschaftlich steuern» · gemeinsame Tokens
   Quelle: brand.md (Abschnitte 4, 5, 6, 10) und Website-Fassung B (site.css, Tokens).
   Diese Datei wird von web/ und print/ geladen. Keine Farbe ausserhalb dieser Liste. */

@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: block; src: url("../assets/fonts/nunito-400-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: 'Nunito'; font-style: normal; font-weight: 400; font-display: block; src: url("../assets/fonts/nunito-400.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: 'Nunito'; font-style: normal; font-weight: 700; font-display: block; src: url("../assets/fonts/nunito-700-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: 'Nunito'; font-style: normal; font-weight: 700; font-display: block; src: url("../assets/fonts/nunito-700.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: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url("../assets/fonts/space-grotesk-500-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: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url("../assets/fonts/space-grotesk-500.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: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: block; src: url("../assets/fonts/space-grotesk-700-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: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: block; src: url("../assets/fonts/space-grotesk-700.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; }

:root {
  /* Primär (brand.md 4) */
  --tz-navy: #020A18;          /* Just Black */
  --tz-orange: #FC4C01;        /* Zone Orange: Flächen, Logo, Text ab 24px */
  --tz-orange-ink: #C23A01;    /* Orange-Text unter 24px auf hell */
  --tz-orange-action: #D64000;
  --tz-orange-light: #FF9D6E;  /* nur Fläche, nie Text */
  --tz-white: #E9E9E9;         /* Not So White, Text auf Navy */
  --tz-paper: #FFFFFF;

  /* Flächen der Website-Fassung B (Taktgeber hell/dunkel) */
  --tz-stone: #F5F4F1;
  --tz-peach-surface: #FFF0E8;
  --tz-peach-line: #F0C2AF;
  --tz-blue: #315F9D;
  --tz-blue-surface: #F1F6FC;
  --tz-blue-line: #C5D6E9;
  --tz-muted: #596270;         /* Sekundärtext auf hell (AA) */
  --tz-grey-ink: #6B6C6E;      /* Legal, Fussnoten */
  --tz-line: #DDE2E9;
  --tz-green: #0A7A54;

  /* auf Navy */
  --tz-stage-ink: #E9E9E9;
  --tz-stage-ink-muted: #A9ADB5;
  --tz-stage-line: rgb(233 233 233 / 18%);
  --tz-stage-fill: rgb(233 233 233 / 6%);

  /* Themenblöcke 01 bis 04: Fläche, Linie, Tinte darauf */
  --tz-m1-surface: var(--tz-navy);          --tz-m1-line: var(--tz-stage-line);  --tz-m1-ink: var(--tz-stage-ink);  --tz-m1-ink-muted: var(--tz-stage-ink-muted);
  --tz-m2-surface: var(--tz-peach-surface); --tz-m2-line: var(--tz-peach-line);  --tz-m2-ink: var(--tz-navy);       --tz-m2-ink-muted: var(--tz-muted);
  --tz-m3-surface: var(--tz-blue-surface);  --tz-m3-line: var(--tz-blue-line);   --tz-m3-ink: var(--tz-navy);       --tz-m3-ink-muted: var(--tz-muted);
  --tz-m4-surface: var(--tz-stone);         --tz-m4-line: var(--tz-line);        --tz-m4-ink: var(--tz-navy);       --tz-m4-ink-muted: var(--tz-muted);

  /* Verläufe (nur Hintergrund) und Rasterüberlagerung */
  --tz-gradient-peach-glow: linear-gradient(135deg, #FFF0E8, #FFFFFF 80%);
  --tz-gradient-4: linear-gradient(135deg, #FF9D6E, #FC4C01);
  --tz-grid: linear-gradient(rgb(252 76 1 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(252 76 1 / 7%) 1px, transparent 1px);
  --tz-grid-light: linear-gradient(rgb(252 76 1 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(252 76 1 / 5%) 1px, transparent 1px);
  --tz-grid-size: 60px;

  --tz-shadow-card: 0 10px 30px rgb(2 10 24 / 6%);
  --tz-shadow-lift: 0 18px 44px rgb(2 10 24 / 14%);
  --tz-shadow-orange: 0 12px 28px rgb(252 76 1 / 28%);
  --tz-shadow-peach: 0 18px 48px rgb(82 47 30 / 7%);

  --tz-radius-sm: 12px;
  --tz-radius-md: 20px;
  --tz-radius-panel: 24px;
  --tz-radius-lg: 28px;
  --tz-radius-surface: 32px;
  --tz-radius-pill: 999px;

  --tz-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --tz-font-body: 'Nunito', ui-sans-serif, system-ui, sans-serif;

  --tz-space-1: 8px; --tz-space-2: 16px; --tz-space-3: 24px; --tz-space-4: 32px;
  --tz-space-5: 48px; --tz-space-6: 64px; --tz-space-7: 96px; --tz-space-8: 128px;

  --tz-ease: cubic-bezier(.2, .6, .2, 1);
  --tz-ease-out: cubic-bezier(.16, 1, .3, 1);
  --tz-dur-fast: 180ms;
  --tz-dur-base: 300ms;
  --tz-dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}