/* ==========================================================================
   martin-lippert.de · Helle Fassung · Design-Token (Stand 30.10.2026)
   Farbwelt aus dem Flyer A6 "Breath" (Variante C): Himmel, Weiss, Sonnengold.
   Navy ist nur Tinte (Text, feine Details), nie Flaeche.

   Diese Datei ist als Schicht gedacht: nach css/style-hell.css geladen,
   uebersetzt sie die alten Variablen (--bg-primary, --accent, ...) in die
   helle Welt. Regeln und Kontrastwerte: DESIGN.md
   ========================================================================== */

/* ── Schriften (selbst gehostet, woff2, swap) ─────────────────────────── */
@font-face {
  font-family: 'Anton';
  src: url('../schriften/anton-atme.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  /* Teilmenge: nur A T M E . fuer das grosse "ATME." (3,8 KB) */
}
@font-face {
  font-family: 'Oswald';
  src: url('../schriften/oswald-latin-var.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../schriften/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../schriften/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../schriften/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ── Himmel (Flyer-Verlauf von oben nach unten) ── */
  --himmel-900: #164B78;   /* Zenit, nur Verlauf-Anfang                     */
  --himmel-700: #1D5F92;   /* Flyer-Mittelblau · Links, Farbwort · 6,8:1 auf Weiss */
  --himmel-600: #2369A0;   /* Hover von Links · 5,8:1 auf Weiss             */
  --himmel-500: #2F7DB5;   /* Flaeche, Verlauf · Weiss darauf nur gross (4,45:1) */
  --himmel-300: #79B8DE;   /* Linien, Deko, Verlauf-Mitte                   */
  --himmel-100: #DBE9F5;   /* Kanten, Trennlinien, zarte Flaechen           */
  --eis-50:     #EEF6FB;   /* Zweitflaeche "Eishauch" (Flyer-Rueckseite)    */
  --eis-0:      #F7FBFE;   /* Kartenhintergrund auf Eishauch                */
  --schnee:     #FDFEFF;   /* Seitengrund (kein reines #fff)                */

  /* ── Sonne (einziger Akzent) ── */
  --sonne:      #FFC85A;   /* Knoepfe, Sticker, Sterne-Flaeche · Navy darauf 10,3:1 */
  --sonne-tief: #E0A52A;   /* Knopfkante, Hover, Deko · NIE Textfarbe       */
  --sonne-hauch:#FFF4DC;   /* zarte Goldflaeche (Gutschein)                 */
  --sonne-text: #8A5D00;   /* Gold als Schrift auf Hell, nur wenn noetig · 5,8:1 */

  /* ── Tinte (Text) ── */
  --tinte:      #0B2340;   /* Ueberschriften, Fliesstext stark · 15,8:1 auf Weiss */
  --tinte-2:    #34506D;   /* Fliesstext · 8,4:1 Weiss / 7,6:1 Eishauch     */
  --tinte-3:    #4F6A86;   /* Nebentext, Meta · 5,6:1 Weiss / 5,1:1 Eishauch */

  /* ── Schatten (blau getoent, nie schwarz) ── */
  --schatten-1: 0 1px 2px rgba(22,75,120,.06), 0 4px 14px rgba(22,75,120,.06);
  --schatten-2: 0 2px 6px rgba(22,75,120,.07), 0 18px 44px rgba(22,75,120,.12);
  --schatten-3: 0 30px 80px rgba(22,75,120,.20);

  /* ── Form ── */
  --r-knopf: 12px;   /* Knoepfe                          */
  --r-karte: 20px;   /* Karten, Bilder                   */
  --r-pille: 999px;  /* Navigation, Badges, Bewertung-Pille */

  /* ── Abstaende ── */
  --abschnitt: clamp(72px, 9vw, 128px);   /* vertikaler Abschnittsabstand */
  --rand: clamp(20px, 4vw, 40px);         /* seitlicher Seitenrand        */
  --breite: 1240px;                        /* Inhaltsbreite                */

  /* ── Schrift ── */
  --f-atme: 'Anton', 'Oswald', Impact, sans-serif;
  --f-titel: 'Oswald', 'Arial Narrow', sans-serif;
  --f-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-text: 1.0625rem;
  --fs-klein: .875rem;

  --uebergang: .35s cubic-bezier(.16, 1, .3, 1);

  /* ── Bruecke: alte Variablen aus style-hell.css → helle Werte ──
     Damit greifen auch die vielen inline gesetzten var(--...) im Markup. */
  --bg-primary:    var(--schnee);
  --bg-secondary:  var(--eis-50);
  --bg-card:       #FFFFFF;
  --bg-card-hover: var(--eis-0);
  --accent:        var(--himmel-700);
  --accent-dark:   var(--himmel-900);
  --accent-glow:   rgba(47,125,181,.10);
  --accent2:       var(--himmel-500);
  --text-primary:  var(--tinte);
  --text-secondary:var(--tinte-2);
  --text-muted:    var(--tinte-3);
  --border:        var(--himmel-100);
  --border-hover:  rgba(47,125,181,.38);
  --white:         var(--tinte);       /* "weiss" hiess im Dunkeln: Vordergrund */
  --gradient-card: #FFFFFF;
  --gradient-accent: linear-gradient(135deg, var(--sonne), var(--sonne-tief));
  --gradient-hero: linear-gradient(180deg, var(--himmel-700), var(--himmel-300) 70%, var(--eis-50));
  --shadow-card:   var(--schatten-1);
  --shadow-glow:   var(--schatten-2);
  --radius:        14px;
  --radius-md:     14px;
  --radius-lg:     var(--r-karte);
  --flaeche-zart:  var(--eis-50);
}