/* ===========================================================================
   Eislöwen Event — Design-Tokens (einzige Quelle)
   ---------------------------------------------------------------------------
   Entwurf A „Eisfläche" (Entscheidung 21.09.2026): Farben und Schrift aus dem
   Logo 2026, fluide Inhaltsbreite bis 2240 px für 27-Zoll-Bildschirme,
   Eis-Stufen statt flachem Weiß, große Typo-Skala.
   ======================================================================== */

:root {
  /* --- Marke ------------------------------------------------------------ */
  --cyan:       #00a0e6;   /* exakt aus dem Logo — Flächen, Linien, Glühen   */
  --cyan-hell:  #3cc0ff;   /* Hover, Cyan als Schrift auf Nacht (8,6:1)       */
  --cyan-text:  #006a9c;   /* Cyan als Schrift auf Hell: 5,7:1 auf Eis-1, 5,2:1 auf Eis-2 */
  --schwarz:    #0e1419;
  --nacht:      #0a1016;
  --text:       #3d4852;
  --grau:       #5d6873;   /* 5,4:1 auf Eis-2                                  */
  --hell-text:  #b7c2cc;   /* Fließtext auf Nacht (9,9:1)                      */

  /* --- Eis-Stufen (statt Weiß) ------------------------------------------- */
  --eis-1: #f7fbfe;
  --eis-2: #e4f2fa;
  --eis-3: #cfe8f5;
  --linie: #d6e5ee;
  --linie-dunkel: rgba(255, 255, 255, .13);

  /* --- Schrift (lokal, fonts.css) ----------------------------------------- */
  --f-display: 'Saira Extra Condensed', 'Arial Narrow', sans-serif;
  --f-schmal:  'Saira Condensed', 'Arial Narrow', sans-serif;
  --f-text:    'Saira', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Fluide Breite ------------------------------------------------------ */
  --max:     2240px;
  --rand:    clamp(20px, 4.4vw, 120px);
  --seite:   max(var(--rand), calc((100vw - var(--max)) / 2));
  --sektion: clamp(80px, 8.4vw, 220px);
  --luecke:  clamp(12px, 1.25vw, 32px);
  --radius:  clamp(4px, .4vw, 10px);
  --radius-knopf: 2px;
  --k:       min(5vw, 130px);          /* Kufenschnitt: Höhe der Schräge   */
  --k-winkel: -2.86deg;                 /* Winkel dazu (atan .05)           */

  /* --- Kopf: Logo groß, eingeklappt nur per transform --------------------- */
  --logo:     clamp(96px, 8vw, 220px);    /* Höhe des beschnittenen Logos   */
  --logo-f:   .8;
  --kopf-pad: clamp(10px, .75vw, 20px);
  --kopf-h:   calc(var(--logo) * var(--logo-f) + 2 * var(--kopf-pad));

  /* --- Typo-Skala --------------------------------------------------------- */
  --t-text:   clamp(16px, .42vw + 11px, 22px);
  --t-lede:   clamp(17px, .6vw + 11px, 27px);
  --t-label:  clamp(12px, .3vw + 8px, 17px);
  --t-knopf:  clamp(14px, .3vw + 10px, 19px);
  --t-h1:     clamp(58px, 7vw, 200px);
  --t-h2:     clamp(48px, 5.8vw, 164px);
  --t-h3:     clamp(28px, 2.3vw, 62px);
  --t-banner: clamp(64px, 9vw, 260px);

  /* --- Bewegung ----------------------------------------------------------- */
  --weich: cubic-bezier(.2, .8, .2, 1);
  --wisch: cubic-bezier(.75, 0, .2, 1);

  /* --- Alte Namen (Block-Vorlagen, editor.css, ältere Seiten) -------------- */
  --ee-cyan: var(--cyan);
  --ee-cyan-hell: var(--cyan-hell);
  --ee-cyan-text: var(--cyan-text);
  --ee-schwarz: var(--schwarz);
  --ee-text: var(--text);
  --ee-grau: var(--grau);
  --ee-weiss: #fff;
  --ee-flaeche: var(--eis-2);
  --ee-linie: var(--linie);
  --ee-dunkel: var(--schwarz);
  --ee-dunkel-text: var(--hell-text);
  --ee-font-display: var(--f-display);
  --ee-font-schmal: var(--f-schmal);
  --ee-font-text: var(--f-text);
  --ee-rand: var(--seite);
  --ee-sektion: var(--sektion);
  --ee-luecke: var(--luecke);
  --ee-radius: var(--radius);
  --ee-radius-knopf: var(--radius-knopf);
}

@media (max-width: 900px) {
  :root { --logo: 76px; }
}
@media (max-width: 700px) {
  :root { --k: 9vw; --k-winkel: -5.14deg; --sektion: 72px; }
}