/* ─────────────────────────────────────────────────────────────────────────
   denschDesignLanguage — Typography (Single Source of Truth) · v2
   Stand: 2026-08-13
   FARBEN.md §12.2: Inter (Body/Headings) + JetBrains Mono für
   Eyebrow/Caption/Numbers.

   SSOT: Diese Datei liegt GENAU EINMAL auf dem Server
   (/var/www/densch-shared/public/ddl/) und wird auf jeder Site unter
   /densch-shared/ddl/ddl-typography.css serviert (Symlink im Web-Root).
   Die alten Projekt-Kopien (/ddl-typography.css) sind deprecated und
   werden beim Rollout je Seite entfernt.

   v2-Änderungen:
   · JetBrains Mono SELF-HOSTED (densch-shared/public/fonts/) statt
     bunny.net-@import — die CSPs der Sites (style-src/font-src 'self')
     haben den externen Import blockiert; jetzt lädt die Font überall
     und DSGVO-seitig bleibt alles auf dem eigenen Server.
   · rem-basierte Typo-Skala + größenspezifische Tracking-Tokens
     (Apple-Regel: großes Display-Text negativ spationieren, Body 0,
     kleine Caps positiv). Seiten-Typo in rem, damit die Browser-
     Textgröße des Users respektiert wird — CSS-Mockups (nachgebaute
     App-Screens) bleiben bewusst in px (Illustrationen).
   ───────────────────────────────────────────────────────────────────────── */

/* ── JetBrains Mono, self-hosted (DSGVO + CSP 'self') ── */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/densch-shared/fonts/jetbrains-mono-latin-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/densch-shared/fonts/jetbrains-mono-latin-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/densch-shared/fonts/jetbrains-mono-latin-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/densch-shared/fonts/jetbrains-mono-latin-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
/* latin-ext (PL/CZ/HU-Glyphen etc.) — Umlaute/ß deckt schon latin ab */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/densch-shared/fonts/jetbrains-mono-latin-ext-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/densch-shared/fonts/jetbrains-mono-latin-ext-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/densch-shared/fonts/jetbrains-mono-latin-ext-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/densch-shared/fonts/jetbrains-mono-latin-ext-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --ddl-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace,
                     SFMono-Regular, Menlo, Consolas, monospace;

    /* ── Typo-Skala (rem — respektiert User-Textgröße) ──
       Display  Hero-/Brand-Headlines
       Title    Sektions-/Showcase-Headlines
       Subtitle Taglines
       Lead     große Subline / prominente Links
       Body     Fließtext (17px-Äquivalent)
       Small    Listen, sekundäre Texte
       Caption  Labels, Footer, Overlines                    */
    --ddl-fs-display:  clamp(3rem, 8vw, 5.5rem);
    --ddl-fs-title:    clamp(2.5rem, 5vw, 4rem);
    --ddl-fs-subtitle: 1.5rem;      /* 24px */
    --ddl-fs-lead:     1.3125rem;   /* 21px */
    --ddl-fs-body:     1.0625rem;   /* 17px */
    --ddl-fs-small:    0.9375rem;   /* 15px */
    --ddl-fs-caption:  0.8125rem;   /* 13px */

    /* Tracking ist größenspezifisch — nie ein Wert für alles */
    --ddl-track-display: -0.04em;   /* großes Display: eng    */
    --ddl-track-title:   -0.03em;
    --ddl-track-tight:   -0.01em;   /* Subtitles/Leads        */
    --ddl-track-caps:     0.06em;   /* kleine Uppercase-Labels */

    /* Leading läuft gegenläufig zur Größe */
    --ddl-lh-display: 1.02;
    --ddl-lh-title:   1.05;
    --ddl-lh-body:    1.5;
}

/* Eyebrow-Pattern (Hero, Section, Page-Headers) */
.ddl-eyebrow,
.hero-eyebrow,
.section-eyebrow,
.brand-overline,
.dm-page-eyebrow,
.dc-page-eyebrow,
.dl-page-eyebrow {
    font-family: var(--ddl-font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Caption Mono (kleine Begleittexte unter Sections) */
.ddl-caption-mono,
.caption-mono {
    font-family: var(--ddl-font-mono);
    font-weight: 600;
    letter-spacing: var(--ddl-track-caps);
}

/* Number Mono (Tables, Stats, Tabular Numerics) */
.ddl-number,
.tabular-num,
.dm-stat-value,
.dc-stat-value,
.kpi__val,
td.right,
.big-total {
    font-variant-numeric: tabular-nums;
    font-family: var(--ddl-font-mono);
    font-weight: 700;
}

/* Convenience-Klasse fürs direkte Anwenden */
.ddl-mono {
    font-family: var(--ddl-font-mono);
}

/* ─────────────────────────────────────────────────────────────────────────
   Partner-Logos (Kein Bock auf Nazis · Elektrisch)
   Responsive Größen + Dark-Mode-Behandlung via CSS-Filter.
   PNG-Quellen (kein SVG verfügbar) — invertieren nur dann, wenn klar
   monochrom; sonst leicht aufhellen via brightness/contrast.
   ───────────────────────────────────────────────────────────────────────── */
.partner-logo {
    width: auto;
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.partner-logo--kban {
    height: 59px;
    max-height: clamp(44px, 6vw, 59px);
}
.partner-logo--elektrisch {
    height: 40px;
    max-height: clamp(30px, 4.5vw, 40px);
}
@media (prefers-color-scheme: dark) {
    .partner-logo--kban {
        /* KBAN-Logo ist überwiegend schwarz/weiß-grafisch → leicht aufhellen */
        filter: brightness(1.15) contrast(1.05);
    }
    .partner-logo--elektrisch {
        /* "elektrisch."-Wortmarke ist schwarz auf weiß → invertieren */
        filter: invert(1) hue-rotate(180deg) brightness(0.95);
    }
}
@media (max-width: 480px) {
    .partner-logo--kban { height: 44px; }
    .partner-logo--elektrisch { height: 30px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Beta-Banner (konsistent über alle Produkt-Landings)
   Single Source of Truth — identisch mit dasdensch.de Top-Banner.
   Kontrast: Text ≥ 4,5:1 auf #1d1d1f (AA).
   ───────────────────────────────────────────────────────────────────────── */
.beta-banner {
    background: #1d1d1f;
    color: #b4b4b9;
    text-align: center;
    padding: 12px 20px;
    font-size: 0.875rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}
.beta-banner strong { color: #f5f5f7; font-weight: 600; }
.beta-banner a { color: #2997ff; text-decoration: none; font-weight: 600; }
.beta-banner a:hover { text-decoration: underline; }
@media (max-width: 480px) {
    .beta-banner { font-size: 0.8125rem; padding: 10px 16px; }
}