/* theme.css — Dunkelmodus-Variablen. Ueberschreibt die Farb-Variablen aus dem :root-Block jeder Seite, wenn gesetzt ist. Wird ueber ein kleines Inline-Skript im VOR dem ersten Rendern gesetzt (verhindert ein kurzes Aufblitzen im falschen Design). */ html[data-theme="dark"] { --bg: #10141d; --surface: #1a2030; --surface2: #232a3d; --ink: #e7eaf2; --muted: #939cb3; --line: #2d3550; --accent: #5b7cff; --accent-ink: #ffffff; --danger: #f87171; --badge1: #5b7cff; --badge2: #34d399; --badge3: #fb923c; --badge4: #c084fc; --badge5: #22d3ee; --badge6: #f472b6; --badge7: #a3e635; --badge8: #fbbf24; } /* Manche Seiten nutzen inline box-shadow / rgba(0,0,0,...) Werte, die auf dunklem Grund zu hart wirken — dezent abschwaechen. */ html[data-theme="dark"] .modal, html[data-theme="dark"] .sidebar, html[data-theme="dark"] .card { box-shadow: 0 4px 16px rgba(0,0,0,.35); } /* Eingabefelder: Browser-Autofill und native Steuerelemente an Dark Mode anpassen */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color-scheme: dark; } /* Logo-Vorschau-Flaechen (oft weiss hinterlegt) auf Dark Mode absetzen, damit z. B. transparente PNG-Logos nicht unsichtbar werden. */ html[data-theme="dark"] .logo-preview, html[data-theme="dark"] #imagePreview, html[data-theme="dark"] .image-preview { background: #ffffff; border-radius: 8px; } /* ---- Theme-Umschalter-Button in der Sidebar ---- */ #themeToggle { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); background: transparent; border: none; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; text-align: left; width: 100%; } #themeToggle:hover { background: var(--surface2); color: var(--ink); } #themeToggle svg { width: 16px; height: 16px; flex-shrink: 0; } #themeToggle .theme-icon-dark { display: none; } html[data-theme="dark"] #themeToggle .theme-icon-light { display: none; } html[data-theme="dark"] #themeToggle .theme-icon-dark { display: inline; } /* ---- Layout-Spruenge beim Seitenwechsel vermeiden ---- Jeder Sidebar-Klick laedt eine neue Seite. Alles, was erst nach einer fetch-Antwort Platz einnimmt, laesst die Sidebar in dem Moment nach unten springen. Deshalb den Platz von Anfang an reservieren. */ /* Plan-Anzeige im Footer: wird von sidebar.js mit zwei Zeilen gefuellt (E-Mail + Plan). Vorher war sie 0 Pixel hoch. */ .plan-badge { min-height: 46px; } /* Platzhalter fuer das Firmenlogo: sidebar.js setzt ein zwischengespeichertes Logo sofort ein. Beim allerersten Seitenaufruf (leerer Zwischenspeicher) greift weiterhin die :empty-Regel der Seite — dann gibt es einmalig einen Sprung, danach nicht mehr. */ #sidebarLogo { transition: none; } /* Waagrechtes Wackeln: Seiten mit wenig Inhalt haben keine Scrollleiste, Seiten mit viel Inhalt schon — dadurch verschiebt sich das ganze Layout beim Wechseln um die Breite der Leiste. Der reservierte Platz haelt es ruhig. */ html { scrollbar-gutter: stable; } /* ---- Weicher Seitenwechsel statt hartem Neuaufbau ---- Jeder Menuepunkt ist eine eigene HTML-Datei. Ohne die folgende Regel wirft der Browser beim Klick die ganze Seite weg und zeichnet sie neu — auch die Seitenleiste, obwohl sie auf beiden Seiten gleich aussieht. Genau dieses Wegwerfen-und-neu-Zeichnen wirkt wie ein Zucken. Mit @view-transition blendet der Browser zwischen den beiden Seiten weich ueber. Browser, die das noch nicht koennen (Firefox, aeltere Safari), ignorieren die Regel einfach — dort bleibt alles wie bisher. */ @view-transition { navigation: auto; } /* Die Seitenleiste bekommt einen eigenen Namen: sie wird dadurch NICHT mitgeblendet, sondern bleibt beim Wechsel ruhig stehen. Nur der Inhaltsbereich rechts wechselt. */ /* Die Seitenleiste wird beim Wechsel gar nicht mehr ersetzt (siehe "Seitenwechsel ohne Neuladen" in sidebar.js) — sie bekommt deshalb keinen eigenen Uebergang und bleibt einfach stehen. */ .app-main { view-transition-name: app-main; } /* Kurz halten — lange Blenden fuehlen sich traege an. */ ::view-transition-old(app-main), ::view-transition-new(app-main) { animation-duration: .18s; } /* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt keine Blende. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }