/* ============================================================
   Techtanium Design-Tokens + Fonts (Stand F2 0.6.0, 2026-07-05;
   Basis D0 2026-06-12). Eine Quelle der Wahrheit fuer alle
   Designwerte. Geladen als ERSTE Techtanium-Datei in jeder
   Theme-CSS-Gruppe (template.xml). Basis: B1/B2-Art-Direction.

   FONTS: self-hosted WOFF2 (latin-Subset, SIL OFL — Lizenztexte
   liegen in fonts/). KEIN CDN, kein externer Request.
   0.5.0 VERIFIZIERT: inter-400.woff2 ist ein ECHTER Variable-
   Font (fvar/gvar/avar/STAT im WOFF2-Verzeichnis geprueft) —
   die Gewichte 400/600/700 instanziieren daraus real (kein
   Faux-Bold). inter-600.woff2 ist ein BYTE-IDENTISCHES Duplikat
   (gleicher SHA-256) und wird bewusst NICHT referenziert/
   paketiert (wuerde nur einen zweiten identischen Download
   ausloesen).
   ============================================================ */

@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/saira-semicondensed-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Saira SemiCondensed';
    src: url('fonts/saira-semicondensed-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-400.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-400.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/ibmplexmono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- Buehne (B1/B2-Palette, fuehrend fuer dunkle Bereiche) --- */
    --tt-bg:           #0A0C0E;  /* tiefste Buehne (Hero, Landing-Sektionen) */
    --tt-bg-2:         #0E1114;  /* alternierende dunkle Sektion */
    --tt-panel:        #13171B;  /* Karten/Panels auf Buehne */
    --tt-panel-2:      #191E23;  /* erhoehtes Panel */
    --tt-hairline:     rgb(255 255 255 / 7%);   /* Haarlinie auf dunkel */
    --tt-hairline-2:   rgb(255 255 255 / 14%);  /* staerkere Haarlinie */

    /* --- Stufe-A-Basistoene (NOVA-Overrides: Header/Footer/Shop) --- */
    --tt-black:        #0E1013;
    --tt-anthracite:   #1A1D21;
    --tt-anthracite-2: #22262C;
    --tt-line:         #2E343B;
    --tt-steel:        #8E979F;
    --tt-steel-light:  #C9CFD5;
    --tt-white:        #F4F6F8;
    --tt-paper:        #FFFFFF;
    --tt-line-light:   #E3E6E9;
    --tt-text:         #1A1D21;
    --tt-text-muted:   #5A636B;

    /* --- Akzent --- */
    --tt-orange:       #FF6A00;
    --tt-orange-hover: #FF8533;
    --tt-orange-deep:  #D85A00;
    --tt-orange-dim:   rgb(255 106 0 / 30%);
    --tt-blueprint:    #3D4755;

    /* 0.5.0: Text-Orange fuer HELLE Flaechen (WCAG AA):
       --tt-orange-deep auf Weiss = nur ~4,2:1 → fuer Textlinks
       auf hell stattdessen diese beiden Toene verwenden. */
    --tt-orange-text:       #C05000;  /* ~5,2:1 auf Weiss */
    --tt-orange-text-hover: #A84600;  /* ~6,5:1 auf Weiss */

    /* WCAG: auf Orange-Flaechen IMMER --tt-bg/--tt-black als Text;
       auf hellen Flaechen Textlinks in --tt-orange-text(-hover);
       --tt-orange/-deep auf hell nur dekorativ (Linien/Icons). */

    /* --- Typografie (echte self-hosted Fonts) --- */
    --tt-font-head: 'Saira SemiCondensed', 'Arial Narrow', 'Segoe UI', sans-serif;
    --tt-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tt-font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;

    --tt-fs-h1: clamp(2rem, 1.4rem + 2.2vw, 3.4rem);
    --tt-fs-h2: clamp(1.5rem, 1.15rem + 1.3vw, 2.4rem);
    --tt-fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
    --tt-lh-tight: 1.1;
    --tt-lh-body: 1.6;
    --tt-ls-upper: 0.02em;
    --tt-ls-kicker: 0.3em;

    /* --- Raster/Geometrie --- */
    --tt-space-1: 0.25rem; --tt-space-2: 0.5rem; --tt-space-3: 0.75rem;
    --tt-space-4: 1rem; --tt-space-5: 1.5rem; --tt-space-6: 2rem;
    --tt-space-7: 3rem; --tt-space-8: 4rem;
    --tt-radius: 2px;
    --tt-grid: 24px;
    --tt-grid-wide: 40px;
    --tt-chamfer: 14px;
    --tt-maxw: 1360px;

    /* --- Bewegung --- */
    --tt-ease: cubic-bezier(0.22, 0.72, 0.22, 1);
    --tt-dur-fast: 150ms;
    --tt-dur: 250ms;
    --tt-dur-slow: 700ms;

    /* --- Schatten/Fokus --- */
    --tt-shadow-card: 0 8px 24px rgb(0 0 0 / 8%);
    --tt-shadow-pop:  0 12px 32px rgb(0 0 0 / 16%);
    --tt-focus-ring:  0 0 0 0.2rem rgb(255 106 0 / 25%);
}

/* Nicht-essentielle Animationen global abschaltbar */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}