/* MOTHER-NASSIMAI-MASTER-001-P3 — Design-Token-System (§8) Drei verbindliche Designmodelle (§7): Nero Classic, Nero Studio Light, Nero Cinematic Executive. Jedes Modell: Tag- und Nachtmodus. Steuerung über . */ :root { /* Typografie (§9) */ --font-familie: -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Cascadia Code", Consolas, monospace; --fs-haupttitel: clamp(1.7rem, 2.5vw, 2.2rem); --fs-seitentitel: clamp(1.35rem, 2vw, 1.6rem); --fs-abschnitt: 1.15rem; --fs-kartentitel: 1rem; --fs-untertitel: .95rem; --fs-text: .95rem; --fs-hilfe: .85rem; --fs-tabelle: .9rem; --fs-label: .82rem; --fs-button: .92rem; --fs-badge: .74rem; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-eng: 1.25; --lh-normal: 1.55; /* Abstände */ --ab-1: 4px; --ab-2: 8px; --ab-3: 12px; --ab-4: 16px; --ab-5: 24px; --ab-6: 32px; --ab-7: 48px; /* Radien */ --rad-s: 8px; --rad-m: 12px; --rad-l: 18px; --rad-voll: 999px; /* Animation (§8) */ --dauer-schnell: 140ms; --dauer-normal: 240ms; --dauer-langsam: 420ms; --kurve: cubic-bezier(.22,.68,.32,1); /* Z-Index */ --z-nav: 40; --z-header: 50; --z-panel: 60; --z-dialog: 80; --z-toast: 100; /* Layout */ --nav-breite: 264px; --nav-schmal: 68px; --header-hoehe: 60px; --touch-min: 44px; } /* ============ NERO CLASSIC — ruhiges Graphit, warmes Bronze-Akzent ============ */ html[data-modell="nero-classic"][data-modus="nacht"] { --f-hintergrund: #101114; --f-flaeche: #17181d; --f-flaeche-2: #1e2026; --f-karte: #17181d; --f-overlay: rgba(8, 9, 11, .66); --f-text: #e8e8ea; --f-text-2: #a3a6ad; --f-linie: #26282f; --f-primaer: #c8a45c; --f-primaer-text: #14120b; --f-sekundaer: #2c2e36; --f-akzent: #c8a45c; --f-fokus: #d9b978; --f-erfolg: #4fae6e; --f-warnung: #d8a13a; --f-fehler: #d96459; --f-info: #6a9bd8; --f-erfolg-bg: rgba(79,174,110,.13); --f-warnung-bg: rgba(216,161,58,.13); --f-fehler-bg: rgba(217,100,89,.13); --f-info-bg: rgba(106,155,216,.13); --schatten-karte: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28); --schatten-dialog: 0 12px 48px rgba(0,0,0,.55); --header-verlauf: linear-gradient(180deg, rgba(23,24,29,.92), rgba(23,24,29,.82)); color-scheme: dark; } html[data-modell="nero-classic"][data-modus="tag"] { --f-hintergrund: #f4f3f0; --f-flaeche: #ffffff; --f-flaeche-2: #edece8; --f-karte: #ffffff; --f-overlay: rgba(28, 26, 22, .42); --f-text: #23241f; --f-text-2: #6d6e66; --f-linie: #e0dfd8; --f-primaer: #9a7a34; --f-primaer-text: #ffffff; --f-sekundaer: #e9e7e0; --f-akzent: #9a7a34; --f-fokus: #7d6222; --f-erfolg: #2e7d4b; --f-warnung: #9c6f14; --f-fehler: #b3423a; --f-info: #3465a1; --f-erfolg-bg: rgba(46,125,75,.1); --f-warnung-bg: rgba(156,111,20,.1); --f-fehler-bg: rgba(179,66,58,.1); --f-info-bg: rgba(52,101,161,.1); --schatten-karte: 0 1px 2px rgba(35,30,20,.08), 0 6px 20px rgba(35,30,20,.07); --schatten-dialog: 0 12px 48px rgba(35,30,20,.25); --header-verlauf: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)); color-scheme: light; } /* ============ NERO STUDIO LIGHT — helle Studio-Klarheit, kühles Blau ============ */ html[data-modell="nero-studio-light"][data-modus="tag"] { --f-hintergrund: #f6f7f9; --f-flaeche: #ffffff; --f-flaeche-2: #eef0f3; --f-karte: #ffffff; --f-overlay: rgba(20, 24, 30, .4); --f-text: #1d2129; --f-text-2: #667081; --f-linie: #e2e5ea; --f-primaer: #2f6fd0; --f-primaer-text: #ffffff; --f-sekundaer: #e8ecf2; --f-akzent: #2f6fd0; --f-fokus: #1d5ab8; --f-erfolg: #278a52; --f-warnung: #b07713; --f-fehler: #c24438; --f-info: #2f6fd0; --f-erfolg-bg: rgba(39,138,82,.1); --f-warnung-bg: rgba(176,119,19,.1); --f-fehler-bg: rgba(194,68,56,.1); --f-info-bg: rgba(47,111,208,.1); --schatten-karte: 0 1px 2px rgba(25,32,44,.07), 0 6px 18px rgba(25,32,44,.06); --schatten-dialog: 0 12px 44px rgba(25,32,44,.22); --header-verlauf: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88)); color-scheme: light; } html[data-modell="nero-studio-light"][data-modus="nacht"] { --f-hintergrund: #14171c; --f-flaeche: #1b1f26; --f-flaeche-2: #232833; --f-karte: #1b1f26; --f-overlay: rgba(9, 11, 15, .64); --f-text: #e6e9ee; --f-text-2: #98a2b3; --f-linie: #2b313c; --f-primaer: #6ba3f5; --f-primaer-text: #0d1420; --f-sekundaer: #2a303c; --f-akzent: #6ba3f5; --f-fokus: #8db8f8; --f-erfolg: #55b47e; --f-warnung: #d8a13a; --f-fehler: #de7268; --f-info: #6ba3f5; --f-erfolg-bg: rgba(85,180,126,.13); --f-warnung-bg: rgba(216,161,58,.13); --f-fehler-bg: rgba(222,114,104,.13); --f-info-bg: rgba(107,163,245,.13); --schatten-karte: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); --schatten-dialog: 0 12px 48px rgba(0,0,0,.55); --header-verlauf: linear-gradient(180deg, rgba(27,31,38,.93), rgba(27,31,38,.84)); color-scheme: dark; } /* ============ NERO CINEMATIC EXECUTIVE — tiefes Kino-Schwarz, Amber-Signatur ============ */ html[data-modell="nero-cinematic-executive"][data-modus="nacht"] { --f-hintergrund: #0a0a0c; --f-flaeche: #121215; --f-flaeche-2: #1a1a1f; --f-karte: #121215; --f-overlay: rgba(0, 0, 0, .72); --f-text: #ececec; --f-text-2: #9a9aa2; --f-linie: #232329; --f-primaer: #e0862e; --f-primaer-text: #170d02; --f-sekundaer: #232329; --f-akzent: #e0862e; --f-fokus: #f0a04e; --f-erfolg: #4fae6e; --f-warnung: #e0a72e; --f-fehler: #e0554a; --f-info: #6a9bd8; --f-erfolg-bg: rgba(79,174,110,.13); --f-warnung-bg: rgba(224,167,46,.13); --f-fehler-bg: rgba(224,85,74,.14); --f-info-bg: rgba(106,155,216,.13); --schatten-karte: 0 1px 3px rgba(0,0,0,.55), 0 10px 32px rgba(0,0,0,.4); --schatten-dialog: 0 16px 56px rgba(0,0,0,.7); --header-verlauf: linear-gradient(180deg, rgba(18,18,21,.94), rgba(18,18,21,.85)); color-scheme: dark; } html[data-modell="nero-cinematic-executive"][data-modus="tag"] { --f-hintergrund: #efedea; --f-flaeche: #fbfaf8; --f-flaeche-2: #e6e3de; --f-karte: #fbfaf8; --f-overlay: rgba(22, 18, 12, .45); --f-text: #211d18; --f-text-2: #6f6a62; --f-linie: #ddd9d2; --f-primaer: #a85f12; --f-primaer-text: #ffffff; --f-sekundaer: #e8e4dd; --f-akzent: #a85f12; --f-fokus: #8a4c0c; --f-erfolg: #2e7d4b; --f-warnung: #9c6f14; --f-fehler: #b3423a; --f-info: #3465a1; --f-erfolg-bg: rgba(46,125,75,.1); --f-warnung-bg: rgba(156,111,20,.1); --f-fehler-bg: rgba(179,66,58,.1); --f-info-bg: rgba(52,101,161,.1); --schatten-karte: 0 1px 2px rgba(30,24,15,.09), 0 6px 22px rgba(30,24,15,.08); --schatten-dialog: 0 12px 48px rgba(30,24,15,.26); --header-verlauf: linear-gradient(180deg, rgba(251,250,248,.95), rgba(251,250,248,.87)); color-scheme: light; } @media (prefers-reduced-motion: reduce) { :root { --dauer-schnell: 0ms; --dauer-normal: 0ms; --dauer-langsam: 0ms; } }