/**
 * firmwert — Gestaltungs-Tokens für alle Weboberflächen.
 *
 * Muss NACH dem seiteneigenen <style> eingebunden werden, damit die
 * Neubelegung der Alt-Variablen greift.
 *
 * Serverseitiges Pendant: server/services/brand.js (Dossier-PDF).
 * Beide Dateien synchron halten.
 */

/* ── IBM Plex (SIL Open Font License 1.1) ── */
@font-face { font-family: 'IBM Plex Serif'; font-weight: 400; font-style: normal; font-display: swap;
             src: url('/fonts/IBMPlexSerif-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-weight: 600; font-style: normal; font-display: swap;
             src: url('/fonts/IBMPlexSerif-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap;
             src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap;
             src: url('/fonts/IBMPlexSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap;
             src: url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap;
             src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap;
             src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2'); }

:root {
    /* ── Kanonische Tokens ── */
    --fw-ink:        #131C2E;
    --fw-ink-2:      #3D4757;
    --fw-ink-3:      #6B7688;
    --fw-rule:       #D5DAE2;
    --fw-rule-soft:  #E5E9EF;
    --fw-paper:      #EFF1F5;
    --fw-surface:    #FFFFFF;
    --fw-surface-2:  #F7F8FA;

    --fw-accent:      #14508C;
    --fw-accent-dark: #0E3A66;
    --fw-accent-soft: #E3EAF3;

    /* Signalfarben — entsättigt, dokumenttauglich */
    --fw-critical:   #8C2F2A;
    --fw-important:  #8A6A1C;
    --fw-supplement: #3A5F45;

    --fw-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
    --fw-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --fw-mono:  'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

    /* ── Neubelegung der Alt-Variablen: bestehende Regeln erben das neue System ── */
    /* App (index.html) */
    --hahn-blue:            #14508C;
    --hahn-blue-secondary:  #1B5FA3;
    --hahn-blue-tertiary:   #35719E;
    --hahn-blue-quaternary: #6089AE;
    --hahn-blue-quinary:    #93AEC6;
    --text-dark:      #131C2E;
    --text-secondary: #3D4757;
    --text-hint:      #6B7688;
    --border:         #D5DAE2;
    --bg-white:       #FFFFFF;
    --bg-light:       #EFF1F5;
    --success:        #3A5F45;
    --warning:        #8A6A1C;
    --danger:         #8C2F2A;
    --info:           #14508C;
    --white:          #FFFFFF;

    /* Landing (landing.html) */
    --ink:       #131C2E;
    --ink-soft:  #3D4757;
    --blue:      #14508C;
    --blue-dark: #0E3A66;
    --blue-bg:   #E3EAF3;
    --bg:        #FFFFFF;
    --bg-soft:   #F7F8FA;
    --green:     #3A5F45;
    --amber:     #8A6A1C;
}

/* ── Typografie global ── */
body {
    font-family: var(--fw-sans);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .sec-title, .brand {
    font-family: var(--fw-serif);
    letter-spacing: -0.015em;
}
/* Formularfelder erben die Seitenschrift nicht automatisch */
input, select, textarea, button { font-family: var(--fw-sans); }

/* Zahlen laufen in Tabellenziffern */
table, .cb-value, .stat-value, .metric-value, .value-number {
    font-variant-numeric: tabular-nums;
}

/* ── Schweregrad-Darstellung (ersetzt Ampel-Emoji) ── */
.fw-sev {
    display: grid;
    grid-template-columns: 3px 96px 1fr;
    gap: 0 14px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--fw-rule-soft);
}
.fw-sev:last-child { border-bottom: 0; }
.fw-sev-bar { align-self: stretch; background: var(--fw-important); }
.fw-sev[data-sev="critical"]   .fw-sev-bar { background: var(--fw-critical); }
.fw-sev[data-sev="supplement"] .fw-sev-bar { background: var(--fw-supplement); }
.fw-sev-lv {
    font-family: var(--fw-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fw-ink-3);
    padding-top: 3px;
    white-space: nowrap;
}
.fw-sev-tx { font-size: 14px; line-height: 1.55; min-width: 0; }
.fw-sev-tx strong { font-weight: 600; }
.fw-sev-detail { display: block; color: var(--fw-ink-2); font-size: 12.5px; margin-top: 3px; }

/* ── Belastbarkeits-Skala (ersetzt Gold/Silber/Bronze) ── */
.fw-gauge { margin: 4px 0 0; }
.fw-gauge-head {
    font-family: var(--fw-serif);
    font-size: 19px; font-weight: 600;
    margin: 0 0 4px; letter-spacing: -0.01em;
}
.fw-gauge-note { font-size: 13.5px; color: var(--fw-ink-2); margin: 0 0 16px; }
.fw-gauge-track { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; }
.fw-gauge-seg { height: 7px; background: var(--fw-rule); }
.fw-gauge-seg.on { background: var(--fw-accent); }
.fw-gauge-legend {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; margin-top: 9px;
    font-family: var(--fw-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-ink-3);
}
.fw-gauge-legend .on { color: var(--fw-accent); }
.fw-gauge-docs {
    font-family: var(--fw-mono); font-size: 12px; letter-spacing: 0.05em;
    color: var(--fw-ink-3); margin: 14px 0 0; font-variant-numeric: tabular-nums;
}

/* ── Bewertungsergebnis: Dokument-Anmutung statt gefülltem Kasten ──
   Der Wert wird gesetzt wie ein Kursziel in einer Research-Notiz:
   Rubrik klein darüber, Zahl in Tabellenziffern, Bandbreite gleichberechtigt. */
.result-box {
    background: transparent;
    color: var(--fw-ink);
    padding: 22px 0 24px;
    border-radius: 0;
    border-top: 2px solid var(--fw-ink);
    border-bottom: 1px solid var(--fw-rule);
    margin-bottom: 30px;
}
.result-box h2 {
    font-family: var(--fw-mono);
    font-size: 11px; font-weight: 400;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--fw-ink-3);
    margin: 0 0 12px;
}
.result-box .value {
    font-family: var(--fw-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(30px, 6vw, 44px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--fw-ink);
}
.result-box .range {
    font-family: var(--fw-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--fw-ink-3);
    opacity: 1;
    margin-top: 16px;
    letter-spacing: 0.03em;
}

/* ── Quick-Rechner: Ergebniswerte als Zahlen setzen, nicht als Werbebotschaft ── */
.calc-box .cb-value {
    font-family: var(--fw-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
    font-weight: 500;
}
.calc-box .cb-label,
.sec-label {
    font-family: var(--fw-mono);
    letter-spacing: 0.14em;
}

/* ── Kennzahl in Tabellenziffern ── */
.fw-figure {
    font-family: var(--fw-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    font-weight: 500;
}
.fw-figure-unit {
    font-family: var(--fw-mono);
    font-size: 0.42em; letter-spacing: 0.04em;
    color: var(--fw-ink-3); margin-left: 0.5em;
}
.fw-label {
    font-family: var(--fw-mono); font-size: 10px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-ink-3);
}