/* =========================================================================
   di Russillo – Design-Tokens
   Quelle: _analyse/design/DESIGN.md (Werte von der Live-Seite abgelesen).
   Gehört dem Fundament. Seiten-CSS (src/pages/<id>/page.css) nutzt NUR
   diese Variablen, keine eigenen Hex-Werte.
   ========================================================================= */

/* ---- Schriften (lokal, keine Google-Fonts-Verbindung) ------------------ */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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";
  src: url("../fonts/inter-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Tinos";
  src: url("../fonts/tinos-italic-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  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: "Tinos";
  src: url("../fonts/tinos-italic-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Tinos";
  src: url("../fonts/tinos-italic-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
  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: "Tinos";
  src: url("../fonts/tinos-italic-700-latin-ext.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Tinos";
  src: url("../fonts/tinos-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ---- Farben ---------------------------------------------------------- */
  --c-bg: #212121;            /* Seitenhintergrund, Text auf Gold */
  --c-bg-2: #2a2a2a;          /* leicht abgesetzte Fläche (Karten, Dialog) */
  --c-text: #ffffff;
  --c-text-dim: rgba(255, 255, 255, .72);
  --c-gold: #c8b273;
  --c-gold-0: rgba(200, 178, 115, 0);
  --c-gold-20: rgba(200, 178, 115, .2);
  --c-green: #367b48;         /* Unterstrich-Button grün */
  --c-red: #a1221a;           /* Unterstrich-Button rot */
  --c-flag-green: #007d42;    /* Logo-Trikolore */
  --c-flag-red: #b0050b;
  --c-footer: #161616;        /* neutral dunkel (vorher #0a0102 wirkte auf dem iPhone weinrot) */
  --c-hero-base: #020101;
  --c-placeholder: rgba(199, 199, 199, .69);
  --c-panel: #383838;         /* Standort-Karte Panel */
  --c-panel-2: #4e4e4e;
  --c-overlay: rgba(33, 33, 33, .6);
  --c-error: #e0675f;
  --c-success: #8fc79c;

  --tricolor: linear-gradient(90deg, var(--c-flag-green) 0 33.33%, #fff 33.33% 66.66%, var(--c-flag-red) 66.66% 100%);
  --tricolor-ui: linear-gradient(90deg, var(--c-green) 0 33.33%, #fff 33.33% 66.66%, var(--c-red) 66.66% 100%);

  /* ---- Schrift --------------------------------------------------------- */
  --f-display: "Tinos", "Times New Roman", Times, serif;   /* immer italic 400 */
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xxl: 156px;  --lh-xxl: 1.3;   /* Jahreszahl Über uns */
  --fs-xl: 75px;    --lh-xl: 1.3;
  --fs-hero: 60px;  --lh-hero: 1;
  --fs-h2: 45px;    --lh-h2: 1.3;
  --fs-h3: 25px;    --lh-h3: 1.2;
  --fs-price: 26px;
  --fs-body: 18px;  --lh-body: 32px;
  --fs-small: 16px;
  --fs-xs: 14px;

  /* ---- Raster ---------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 760px;
  --container-header: 1250px;
  --gutter: 20px;
  --space-1: 10px;
  --space-2: 20px;
  --space-3: 30px;
  --space-4: 50px;
  --space-5: 100px;
  --space-6: 150px;
  --space-7: 200px;
  --header-h: 135px;

  /* ---- Linien & Formen ------------------------------------------------- */
  --rule-w: 70px;
  --rule: 1px solid var(--c-gold);
  --frame: 2px solid var(--c-gold);
  --frame-thin: 1px solid var(--c-gold);
  --oval: 370px / 100px;

  /* ---- Bewegung -------------------------------------------------------- */
  --t: .3s ease;
  --t-slow: 2s ease;
  --shadow-tab: 0 0 10px rgba(0, 0, 0, .5);
}

/* Tablet 768–1024 */
@media (max-width: 1024px) {
  :root {
    --gutter: 50px;
    --space-7: 150px;
    --header-h: 0px;
  }
}

/* Mobil ≤ 767 */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --fs-hero: 45px;
    --lh-hero: 1.33;
    --fs-xxl: 96px;
    --fs-xl: 52px;
    --space-5: 70px;
    --space-6: 100px;
    --space-7: 100px;
  }
}