/* HK Design Basics — zentrale CI-Tokens für ALLE HKM-OS-Oberflächen. Quelle: „HK Design Basics" (Pantone 3005/3025, Cool Gray 9/2, Avenir Next). STANDARD = HELL für ALLE Apps (Entscheidung SM 24.07.2026: „nix Schwarzes mehr"). html.dunkel bleibt als Option erhalten (z. B. Nachtschicht-Blendschutz per Klasse aktivierbar). V4.2b: vollwertiges Design-System — Schatten in Ebenen, Typo-Skala, Seiten-Atmosphäre, Motion-Standards. Farbe erzählt: Blau = Aktion, Grays = Bühne, Ampeln = Zustand. */ :root { /* Markenfarben */ --hk-blau: #1275bb; /* Pantone 3005 C — Primäraktion/Akzent */ --hk-blau-hell: #2a8fd6; /* Hover/Verlauf-Endpunkt */ --hk-dunkelblau: #004e70; /* Pantone 3025 C — Flächenakzent */ --hk-grau: #777a7b; /* Cool Gray 9 C — Sekundärtext */ --hk-hellgrau: #d0d0d0; /* Cool Gray 2 C — Linien/Deko */ /* Helles Thema (Design Basics: Ruhe, Weißraum, Blau nur mit Bedeutung) */ --nacht: #eef2f6; /* Seitenhintergrund-Grundton */ --atmo: /* Seiten-Atmosphäre: kaum sichtbare Blau-Wäschen */ radial-gradient(1100px 500px at 85% -10%, rgba(18, 117, 187, 0.07), transparent 60%), radial-gradient(900px 600px at -15% 110%, rgba(0, 78, 112, 0.06), transparent 55%), linear-gradient(180deg, #f4f7fa 0%, #eef2f6 100%); --flaeche: #ffffff; /* Karten */ --flaeche-hell: #eef3f7; /* Sekundärflächen, Zebra, Chips */ --rand: #dfe6ec; /* Linien (an Cool Gray 2 angelehnt) */ --rand-stark: #c7d2db; --text: #16232c; --text-gedimmt: #64737e; /* an Cool Gray 9 angelehnt, AA auf Weiß */ --akzent-nr: #004e70; /* Belegnummern/Hervorhebung */ --kopf-flaeche: rgba(255, 255, 255, 0.82); /* App-Header (Glas) */ --badge-bg: #e2eff9; /* Status-Badges */ --badge-text: #004e70; /* Ampeln (einzige Buntfarben neben Blau) */ --gruen: #2e9e5b; --gruen-flaeche: #e3f4ea; --gelb: #d99a00; --gelb-flaeche: #fbf1d9; --rot: #d9534f; --rot-flaeche: #fbe7e6; /* Typo: Avenir Next (Bold/Demi/Regular) mit Fallbacks */ --schrift: "Avenir Next", Avenir, Poppins, "Segoe UI", system-ui, sans-serif; --titel-spationierung: -0.015em; /* große Titel leicht enger — ruhiger */ /* Maße (8pt-Raster) */ --radius: 10px; --radius-gross: 16px; --touch: 44px; /* Schatten-Ebenen: 1 = liegt auf, 2 = Karte, 3 = schwebt (Modal/Panel) */ --schatten-1: 0 1px 2px rgba(13, 40, 60, 0.06); --schatten-2: 0 1px 2px rgba(13, 40, 60, 0.05), 0 6px 18px -6px rgba(13, 40, 60, 0.12); --schatten-3: 0 2px 6px rgba(13, 40, 60, 0.08), 0 24px 60px -12px rgba(13, 40, 60, 0.28); --schatten-blau: 0 3px 12px -2px rgba(18, 117, 187, 0.45); /* Alt-Aliase (Bestandsregeln) */ --schatten: var(--schatten-3); --karten-schatten: var(--schatten-2); /* Motion */ --schnell: 140ms cubic-bezier(0.3, 0.7, 0.4, 1); --sanft: 260ms cubic-bezier(0.25, 0.8, 0.3, 1); } /* Dunkles Thema für die Halle (Terminal, MES, Störmeldung setzen ) */ html.dunkel { --nacht: #0d1418; --atmo: radial-gradient(1100px 500px at 85% -10%, rgba(18, 117, 187, 0.12), transparent 60%), linear-gradient(180deg, #101a20 0%, #0d1418 100%); --flaeche: #142028; --flaeche-hell: #1c2c36; --rand: #26404e; --rand-stark: #35566a; --text: #eef2f5; --text-gedimmt: #9caab3; --akzent-nr: #9fd0ee; --kopf-flaeche: rgba(16, 26, 32, 0.85); --badge-bg: #004e70; --badge-text: #cfe8f7; --gruen: #3cb371; --gruen-flaeche: rgba(60, 179, 113, 0.16); --gelb: #e0a800; --gelb-flaeche: rgba(224, 168, 0, 0.16); --rot-flaeche: rgba(217, 83, 79, 0.18); --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4); --schatten-2: 0 2px 10px rgba(0, 0, 0, 0.35); --schatten-3: 0 10px 40px rgba(0, 0, 0, 0.6); --schatten: var(--schatten-3); --karten-schatten: var(--schatten-2); } /* Echtes HK-Logo (Brand Design) — überall gleich eingebunden */ .logo-bild { height: 2.1rem; width: auto; display: block; } /* Design Basics, global: sichtbarer Fokus, ruhige Übergänge, Zahlen in Tabellenziffern */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--hk-blau); outline-offset: 2px; border-radius: 4px; } button { transition: filter var(--schnell), background var(--schnell), border-color var(--schnell), transform var(--schnell), box-shadow var(--schnell), color var(--schnell); } table, .kennzahl .wert, .zahl .wert { font-variant-numeric: tabular-nums; } ::selection { background: var(--hk-blau); color: #fff; } /* Schlanke, markenfarbene Scrollbalken */ * { scrollbar-width: thin; scrollbar-color: var(--rand-stark) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--rand-stark); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--hk-grau); } ::-webkit-scrollbar-track { background: transparent; } /* Mobil: Formularfelder nie unter 16px — sonst zoomt iOS beim Antippen in die Seite */ @media (max-width: 720px) { input, select, textarea { font-size: 16px !important; } button { min-height: 40px; } .logo-bild { height: 1.7rem; } /* Home-Logo kompakt, aber immer sichtbar und antippbar */ } /* Gemeinsame Auftritts-Animationen */ @keyframes hkm-auftauchen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes hkm-aufziehen { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }