@charset "UTF-8";
/*
 * FMFlow Akte – tokens.css · gemeinsame Gestaltungs-Tokens (UMSTIEG §4 Phase 3 Etappe 1, §8 Nr. 13 und 17)
 *
 * EINZIGE Quelle ist public/assets/css/tokens.css (Modul G). Die Webseite (site/public/assets/css/tokens.css)
 * und künftig die Konsole bekommen eine byte-gleiche Kopie: php tools/assets_verteilen.php, geprüft von
 * tests/GleichlaufTest.php. Nie die Kopie bearbeiten.
 *
 * Nur Custom Properties und color-scheme an :root – keine Bauteile. Lädt VOR basis.css (App) bzw. web.css (Webseite).
 * Hell ist Standard; dunkel über data-theme="dark" oder die Systemeinstellung, solange nicht data-theme="light"
 * gesetzt ist (die Webseite setzt es fest, UMSTIEG §6.4 „Nur hell"). Druck: druck.css überschreibt die Farben.
 * Signalfarben tragen Bedeutung: Gelb/Schwarz (--luecke) nur „fehlt", Violett (--vorschlag) nur „Vorschlag",
 * Rot/Weiß (--fenster) Frist bzw. Kündigungsfenster.
 * Schrift: System-Stacks, keine Webfont (§8 Nr. 13).
 */
:root {
    --papier: #F6F4EE;
    --blatt: #FFFFFF;
    --karton: #ECE6D6;
    --linie: #DCD6C8;
    --linie-stark: #B8B1A2;
    --tinte: #1C232C;
    --tinte-2: #555C66;
    --tinte-3: #8A8F97;
    --aktenblau: #1F5A9E;
    --auf-aktenblau: #FFFFFF;
    --stop: #B8261C;
    --warn: #A36A00;
    --ok: #2B7A4B;
    --vorschlag: #6A3FB0;
    --vorschlag-grund: #F1EBFA;
    --signalgelb: #F2B200;
    --luecke-streifen: #1C232C;
    --luecke: repeating-linear-gradient(-45deg, var(--signalgelb) 0 6px, var(--luecke-streifen) 6px 12px);
    /* Frist-Schraffur rot/weiß: Kündigungsfenster (Lebenslinie, Vertragslineal) – Gelb/Schwarz heißt nur „fehlt“ (UMSTIEG §8 Nr. 17) */
    --fenster: repeating-linear-gradient(-45deg, var(--stop) 0 4px, var(--blatt) 4px 8px);

    --stop-grund: color-mix(in srgb, var(--stop) 9%, var(--blatt));
    --warn-grund: color-mix(in srgb, var(--warn) 11%, var(--blatt));
    --ok-grund: color-mix(in srgb, var(--ok) 9%, var(--blatt));
    --blau-grund: color-mix(in srgb, var(--aktenblau) 8%, var(--blatt));
    --karton-hell: color-mix(in srgb, var(--karton) 45%, var(--blatt));

    --kat-1: #C0392B;  /* Brandschutz */
    --kat-2: #2F5D8A;  /* Druckluft */
    --kat-3: #6C4BA6;  /* Gebäudefunk */
    --kat-4: #2A8C8C;  /* RLT */
    --kat-5: #7A6A55;  /* Aufzug */
    --kat-6: #5D7A2E;  /* Schädlingsbekämpfung */
    --kat-7: #1F7FB8;  /* Trinkwasser */
    --kat-8: #A0522D;  /* Reserve */
    --kat-9: #4A4A4A;  /* Reserve */
    --kat-10: #8E6C00; /* Reserve */

    --schrift: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --schrift-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --schrift-mono: "Cascadia Mono", "SF Mono", Menlo, Consolas, ui-monospace, monospace;
    --radius: 2px;
    --radius-gross: 4px;
    --abstand: 1rem;
    --leiste-breite: 15rem;
    --bewegung-kurz: 120ms;
    --bewegung: 160ms;
    --bewegung-lang: 200ms;
    --schatten-hoch: 0 14px 36px rgba(28, 35, 44, .18), 0 2px 6px rgba(28, 35, 44, .08);
    --rueckdrop: rgba(28, 35, 44, .42);

    /* Abstands-Skala (neu, gemeinsam für App, Webseite, Konsole) */
    --a-1: .25rem;
    --a-2: .5rem;
    --a-3: .75rem;
    --a-4: 1rem;
    --a-5: 1.5rem;
    --a-6: 2rem;
    --a-7: 3rem;
    --a-8: 4rem;

    /* Fließende Schriftgrade für große Flächen (Webseite, Konsole; rem + vw, damit Zoom wirkt). 375/1440/1920/2560 px */
    --t-display: clamp(2.125rem, 1.2rem + 4.2vw, 7.5rem);      /* 35/80/100/120 */
    --t-lagesatz: clamp(1.25rem, .9rem + 1.6vw, 3rem);          /* 20/37/45/48 */
    --t-ziffer: clamp(3rem, 1.5rem + 5.5vw, 10rem);             /* 48/103/130/160 */
    --t-h2: clamp(1.625rem, 1.05rem + 1.7vw, 3.25rem);          /* 26/41/49/52 */
    --t-h3: clamp(1.125rem, .95rem + .45vw, 1.5rem);            /* 18/22/24/24 */
    --t-lead: clamp(1.0625rem, .9rem + .55vw, 1.5rem);          /* 17/22/24/24 */
    --t-basis: clamp(1rem, .94rem + .22vw, 1.1875rem);          /* 16/18/19/19 */
    --t-kicker: clamp(.72rem, .68rem + .12vw, .875rem);         /* 11,5/12,6/13,2/14 */
    --mass-text: 66ch;
    --rand: clamp(1rem, 2.5vw, 4rem);
    --luecke-breit: clamp(12px, 1vw, 24px);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --papier: #12161B;
    --blatt: #1A1F26;
    --karton: #262B33;
    --linie: #2C333C;
    --linie-stark: #444D58;
    --tinte: #E8E4DA;
    --tinte-2: #A8AEB7;
    --tinte-3: #6F7782;
    --aktenblau: #7FAAE0;
    --auf-aktenblau: #0E1620;
    --stop: #F07468;
    --warn: #E9B44C;
    --ok: #62C68E;
    --vorschlag: #B89CFF;
    --vorschlag-grund: #2A2140;
    --luecke-streifen: #12161B;
    --kat-1: #E06A5D; --kat-2: #6E9BD0; --kat-3: #A088DA; --kat-4: #4DB6B6; --kat-5: #AE9C82;
    --kat-6: #93B35C; --kat-7: #52ACE0; --kat-8: #CF8458; --kat-9: #9A9A9A; --kat-10: #CBA234;
    --schatten-hoch: 0 18px 44px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    --rueckdrop: rgba(0, 0, 0, .6);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --papier: #12161B;
        --blatt: #1A1F26;
        --karton: #262B33;
        --linie: #2C333C;
        --linie-stark: #444D58;
        --tinte: #E8E4DA;
        --tinte-2: #A8AEB7;
        --tinte-3: #6F7782;
        --aktenblau: #7FAAE0;
        --auf-aktenblau: #0E1620;
        --stop: #F07468;
        --warn: #E9B44C;
        --ok: #62C68E;
        --vorschlag: #B89CFF;
        --vorschlag-grund: #2A2140;
        --luecke-streifen: #12161B;
        --kat-1: #E06A5D; --kat-2: #6E9BD0; --kat-3: #A088DA; --kat-4: #4DB6B6; --kat-5: #AE9C82;
        --kat-6: #93B35C; --kat-7: #52ACE0; --kat-8: #CF8458; --kat-9: #9A9A9A; --kat-10: #CBA234;
        --schatten-hoch: 0 18px 44px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
        --rueckdrop: rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}

/* Reduzierte Bewegung: Dauern auf 0 (die Bauteil-Regeln dazu stehen in basis.css bzw. web.css). */
@media (prefers-reduced-motion: reduce) {
    :root { --bewegung-kurz: 0ms; --bewegung: 0ms; --bewegung-lang: 0ms; }
}