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;            /* Scrollbar-Thumb */
    --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-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-550: clamp(1.25rem, 0.95rem + 1.3vw, 1.75rem); /* 20–28px fluider Lead/Tagline */
    --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-690: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);    /* 32–44px Karten-/Kachel-Überschrift */
    --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         */
    --fs-1000: clamp(3.5rem, 2rem + 7.5vw, 7.5rem);      /* 56–120px Display-Hero (nur Startseite) */
    --fs-deco: 9rem;                                     /* dekorative Ziffer hinter Bento-Kacheln */
    --lh-heading: 0.9;
    --lh-body: 1.5;
    --fw-regular: 400;
    --fw-bold: 700;
    /* Sperrung. Coolvetica ist Condensed und hat nur einen Schnitt: unter 28px
       wird es in Uppercase unleserlich (siehe CLAUDE.md). Kleinere Auszeichnungen
       laufen deshalb über --ff-body + uppercase + --ls-caps statt --ff-heading. */
    --ls-tight: 0.03em;   /* dezente Straffung in Fließtext-Größen */
    --ls-caps:  0.08em;   /* Standard für gesperrte Uppercase-Auszeichnungen */
    --ls-wide:  0.12em;   /* kleine Labels, Meta-Zeilen */
    --ls-wider: 0.18em;   /* sehr kleine Kicker/Overlines */

    /* --- Icon-Größen ---
       Der icon()-Helper rendert 1em, die font-size steuert also die Icon-Größe.
       rem-Stufen für eigenständige Icons, em-Stufen für Icons, die im Textfluss
       mit ihrer Zeile mitwachsen sollen (Chevrons, Pfeile). */
    --icon-s:  1rem;      /* 16px */
    --icon-m:  1.25rem;   /* 20px */
    --icon-l:  1.5rem;    /* 24px */
    --icon-xl: 2.5rem;    /* 40px */
    --icon-inline-sm: 0.75em;
    --icon-inline:    0.9em;
    --icon-inline-lg: 1.25em;

    /* --- Spacing ---
       4px-Raster. EINZIGE Quelle für padding/margin/gap — keine rohen rem-Werte
       mehr in den anderen CSS-Dateien. Stufen wurden aus dem Ist-Bestand
       geclustert, die häufigsten Werte treffen exakt (--space-s ist mit Abstand
       der meistgenutzte). Nach oben wird das Raster gröber, weil große Abstände
       das vertragen. --space-4xs (2px) ist ausschließlich für optische
       Korrekturen gedacht (Icon-/Baseline-Nudges), nicht für Layout. */
    --space-4xs:  0.125rem;   /*   2px */
    --space-3xs:  0.25rem;    /*   4px */
    --space-2xs:  0.5rem;     /*   8px */
    --space-xs:   0.75rem;    /*  12px */
    --space-s:    1rem;       /*  16px */
    --space-m:    1.25rem;    /*  20px */
    --space-l:    1.5rem;     /*  24px */
    --space-xl:   1.75rem;    /*  28px */
    --space-2xl:  2rem;       /*  32px */
    --space-3xl:  2.5rem;     /*  40px */
    --space-4xl:  3rem;       /*  48px */
    --space-5xl:  4rem;       /*  64px */
    --space-6xl:  5rem;       /*  80px */
    --space-7xl:  7rem;       /* 112px */

    /* --- 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;

    /* --- Interaktion --- */
    /* Mindest-Trefferfläche (WCAG 2.5.5 AAA). Controls, die optisch kleiner
       bleiben sollen, strecken ihre Hit-Area per .tap-target auf diesen Wert —
       gewertet wird die Trefferfläche, nicht die sichtbare Fläche. */
    --tap-min:      44px;
    /* Fokus immer weiß: 15,9:1 auf --clr-bg. Rot käme nur auf 3,2:1 und würde
       WCAG 1.4.11 gerade so schaffen — als einziger Fokus-Indikator zu knapp. */
    --focus-ring:   2px solid var(--clr-text);
    --focus-offset: 3px;

    /* --- 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: var(--space-s);
    --space-section: var(--space-6xl);
    --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 */