/* Ergänzungen zum übernommenen Grundstil (style.css) und das dunkle Farbschema. Was dort schon steht — .karte, .datentabelle, .warnung-kasten, die Dialoge — wird dort genutzt und hier nicht nachgebaut. Palette und Aufbau sind aus ParkWeg und MD-Assist übernommen, damit die Werkzeuge des Hauses nebeneinander wie eine Familie aussehen und nicht wie drei Zufälle. */ /* ===================================================================== Dunkles Farbschema Dunkel ist die Voreinstellung und steht direkt im :root — so gibt es beim Laden kein kurzes Aufblitzen einer hellen Seite. Wer lieber hell arbeitet, setzt über den Umschalter im Kopf data-thema="hell" auf ; ein winziges Skript im jeder Seite liest die Wahl, bevor der Stil greift. ===================================================================== */ :root { --bg:#12171F; --surface:#1A212B; --ink:#E6EBF2; --ink-soft:#93A1B5; --line:#2C3644; --blue:#60A5FA; --blue-deep:#93C5FD; --blue-tint:#1B2A41; --yellow:#FCD34D; --yellow-ink:#FCD34D; --yellow-tint:#3A2F0B; --green:#86EFAC; --green-ink:#86EFAC; --green-tint:#14351F; --red:#FCA5A5; --red-tint:#3D1618; --lightblue:#7DD3FC; --purple:#C4A0C2; --gray-ink:#93A1B5; --gray-tint:#232B36; --eingabe-bg:#141A23; --auf-akzent:#0B1017; --schatten:rgba(0,0,0,.45); --logo-navy:#9CC5EC; --logo-papier:#12171F; } :root[data-thema="hell"] { --bg:#F4F7FA; --surface:#FFFFFF; --ink:#17262B; --ink-soft:#5A6B70; --line:#DFE6EC; --blue:#003E77; --blue-deep:#002C55; --blue-tint:#E4EDF6; --yellow:#FFD405; --yellow-ink:#8F7400; --yellow-tint:#FFF7D1; --green:#4DAF45; --green-ink:#2F7A29; --green-tint:#E7F5E5; --red:#B2452F; --red-tint:#F9E9E5; --lightblue:#70CAF3; --purple:#A862A4; --gray-ink:#5A6B70; --gray-tint:#ECEFF0; --eingabe-bg:#FFFFFF; --auf-akzent:#FFFFFF; --schatten:rgba(23,38,43,.14); --logo-navy:#003E77; --logo-papier:#FFFFFF; } /* ===================================================================== Seitenwechsel — weich statt hart, ohne eine Zeile JavaScript ===================================================================== */ @view-transition { navigation: auto; } html { background: var(--bg); } ::view-transition-old(root) { animation: ausblenden .12s ease both; } ::view-transition-new(root) { animation: einblenden .16s ease both; } @keyframes ausblenden { to { opacity: 0; } } @keyframes einblenden { from { opacity: 0; } } header { view-transition-name: kopfzeile; } ::view-transition-group(kopfzeile) { animation-duration: 0s; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* color-scheme ist wichtiger, als es aussieht: Ohne diese Angabe zeichnet der Browser die Aufklappliste eines