tsv08kulmbach-website/public/assets/css/tokens.css

/* ============================================================
   DESIGN-TOKENS — EINZIGE Quelle für Farben, Typo, Spacing etc.
   Werte extrahiert und verifiziert aus der alten Seite
   (CSS bc-style + DB main_layout). Siehe CLAUDE.md.
   ============================================================ */
:root {
    /* --- Farben --- */
    --clr-accent:        #e20612;            /* Marken-Rot (alte DB: primary_accent) */
    --clr-accent-dark:   #b00510;            /* Hover/Active auf Rot */
    --clr-accent-rgb:    226 6 18;           /* für rgb(var(--clr-accent-rgb) / α) */
    --clr-bg:            #222222;            /* Grund-Hintergrund (mit Textur) */
    --clr-bg-deep:       #161616;            /* abgesetzte Sektionen */
    --clr-bg-footer:     #000000;
    --clr-bg-corporate:  #383838;
    --clr-bg-light:      #f5f5f5;
    --clr-text:          #ffffff;
    --clr-text-muted:    #b3b3b3;            /* 7.7:1 auf --clr-bg */
    --clr-text-faint:    #8c8c8c;            /* 4.5:1 auf --clr-bg (AA) */
    --clr-sepia-bg:      #f3efe4;            /* Timeline-Museumsrahmen (Foto-Mount) */
    --clr-sepia-text:    #3a372f;            /* Timeline-Text auf hellem Sepia-Grund */
    --clr-glass-bg:      rgb(0 0 0 / 0.22);            /* dunkles Glas (dunkler als der Grund) */
    --clr-surface-raised: rgb(255 255 255 / 0.055);    /* Karte, die auf einem abgesetzten (dunkleren) Band liegt */
    --clr-glass-border:  rgb(255 255 255 / 0.14);      /* sehr dezenter Card-Rand — Glow/Sheen tragen die Kontur */
    --clr-glass-border-strong: rgb(255 255 255 / 0.45); /* Back-to-Top, position-/group-card etc.: ≥3:1 (WCAG 1.4.11) */
    --clr-field-bg:            rgb(255 255 255 / 0.07); /* Formularfelder: sanfte Füllfläche (etwas heller als das Glas) */
    --clr-field-border:        rgb(255 255 255 / 0.22); /* Feld-Rand weich — Fläche + Rand machen das Feld erkennbar */
    --clr-field-border-hover:  rgb(255 255 255 / 0.4);  /* Feld-Hover: dezent */
    --clr-error:         #ff8a8a;            /* Formularfehler, lesbar auf dunkel */
    --clr-success:       #8ce99a;

    /* --- Typografie --- */
    --ff-heading: 'Coolvetica', 'Arial Narrow', system-ui, sans-serif;
    --ff-body:    'Abel', 'Helvetica Neue', system-ui, sans-serif;
    --fs-300: 0.8125rem;                               /* 13px Buttons klein   */
    --fs-400: 0.9375rem;                               /* 15px Footer, Meta    */
    --fs-500: 1.125rem;                                /* 18px Navigation      */
    --fs-600: 1.3125rem;                               /* 21px Body            */
    --fs-650: 1.75rem;                                 /* 28px Zwischengröße (z.B. Footer-Headings) */
    --fs-675: 2.125rem;                                /* 34px Header-Wortmarke */
    --fs-700: clamp(2rem, 1.2rem + 3.5vw, 3.125rem);   /* 50px h3              */
    /* Mobil-Minima bewusst hoch: Coolvetica Condensed wirkt bei gleicher
       nomineller Größe deutlich kleiner als normale Schnitte. */
    --fs-800: clamp(2.625rem, 1.3rem + 4.5vw, 3.75rem); /* 42–60px h2          */
    --fs-900: clamp(3.5rem, 1.75rem + 5.5vw, 6rem);      /* 56–96px h1         */
    --lh-heading: 0.9;
    --lh-body: 1.5;
    --fw-regular: 400;
    --fw-bold: 700;

    /* --- Buttons --- */
    --btn-font:     1rem;            /* 16px – Default (moderat) */
    --btn-font-sm:  var(--fs-300);   /* 13px – dezente Buttons */
    --btn-font-lg:  var(--fs-500);   /* 18px – Hero-CTAs */
    --btn-pad-y:    0.625em;         /* skaliert mit font-size */
    --btn-pad-x:    1.25em;
    --btn-line:     1.2;

    /* --- Form & Tiefe --- */
    --radius-btn:  8px;
    --radius-card: 15px;
    --shadow:      0 0 14px rgb(0 0 0 / 0.15);
    --shadow-card: 0 14px 38px rgb(0 0 0 / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.18); /* Hover-Lift + Top-Sheen */

    /* --- Glas-Oberflächen (Frosted Glass) — siehe „Frosted Glass"-Block in components.css --- */
    --glass-blur:   blur(13px) saturate(1.4);
    --glass-shadow: 0 6px 22px rgb(0 0 0 / 0.30), inset 0 1px 0 rgb(255 255 255 / 0.15); /* Ruhe-Glow + Top-Sheen */

    /* --- Layout --- */
    --container-max: 1200px;
    --container-pad: 1rem;
    --space-section: 5rem;
    --header-h: 60px;
    --logo-h: 72px;

    /* --- Bewegung --- */
    --transition: 300ms ease;
}

/* Breakpoints (Referenz — Custom Properties funktionieren nicht in Media Queries,
   Werte müssen in den CSS-Dateien synchron gehalten werden):
   1249px Burger-Menü | 1024px | 992px | 768px | 600px | 500px */