/* ============================================================================ WETTERSTATION SCHLADMING - DESIGN TOKENS Dark-Theme = Standard, Light-Theme per .light Klasse auf ~45 Kern-Tokens + Akzentfarben + Dashboard-Canvas-Tokens ============================================================================ */ /* ============================================================================ DARK THEME (Standard) ============================================================================ */ :root { /* ── Hintergründe ── */ --bg-page: #0a0e1a; --bg-card: linear-gradient(135deg, rgba(20, 30, 48, 0.95) 0%, rgba(30, 45, 70, 0.9) 100%); --bg-card-hover: linear-gradient(135deg, rgba(30, 50, 80, 0.95) 0%, rgba(40, 65, 100, 0.9) 100%); --bg-card-solid: #0e1726; --bg-tooltip: rgba(15, 23, 42, 0.95); --bg-overlay: rgba(0, 0, 0, 0.6); --bg-header: #0b1121; --bg-page-gradient: linear-gradient(135deg, #0d1b35 0%, #102040 40%, #0a3060 100%); --bg-dark-contrast: #1a1a2e; /* ── Klima-Tabellen: Ø/Σ Zusammenfassungszeile + Spalte ── */ --avg-bg: #1a2744; --avg-color: #7dd3fc; --avg-highlight: #fbbf24; /* ── Glass-Effekte (3 Stufen) ── */ --glass-light: rgba(255, 255, 255, 0.06); --glass-medium: rgba(255, 255, 255, 0.08); --glass-hover: rgba(255, 255, 255, 0.15); /* ── Overlay (2 Stufen) ── */ --overlay-medium: rgba(0, 0, 0, 0.5); --overlay-heavy: rgba(0, 0, 0, 0.7); /* ── Text (3 Stufen) ── */ --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #a0b3ca; /* ≥7:1 Kontrast – WCAG AAA auf Card-Gradient */ /* ── Blue (3 solid + 3 alpha) ── */ --blue: #3b82f6; --blue-light: #60a5fa; --blue-accent: #93c5fd; --blue-a10: rgba(59, 130, 246, 0.10); --blue-a25: rgba(59, 130, 246, 0.25); --blue-a40: rgba(59, 130, 246, 0.40); /* ── Akzentfarben ── */ --green: #4ade80; --green-dark: #22c55e; --green-muted: #34d399; --green-deep: #10b981; --red: #ef4444; --red-light: #f87171; --red-dark: #dc2626; --yellow: #fbbf24; --yellow-dark: #f59e0b; --yellow-deep: #eab308; --yellow-bright: #facc15; --orange: #f97316; --orange-light: #fb923c; --purple: #a78bfa; --purple-bright: #a855f7; --purple-dark: #7c3aed; --indigo: #818cf8; --cyan: #22d3ee; --teal: #06b6d4; --teal-light: #2dd4bf; --lime: #a3e635; --lime-dark: #84cc16; --brown: #a0845c; --brown-dark: #7a5c3a; /* ── Farbige Alphas (2 Stufen pro Farbe) ── */ --yellow-a15: rgba(251, 191, 36, 0.15); --yellow-a35: rgba(251, 191, 36, 0.35); --red-a15: rgba(239, 68, 68, 0.15); --red-a30: rgba(239, 68, 68, 0.30); --green-a15: rgba(52, 211, 153, 0.15); --green-a35: rgba(52, 211, 153, 0.35); --purple-a15: rgba(168, 85, 247, 0.15); --purple-a30: rgba(168, 85, 247, 0.30); --orange-a15: rgba(251, 146, 60, 0.15); --orange-a35: rgba(251, 146, 60, 0.35); --sky-a15: rgba(56, 189, 248, 0.15); --sky-a40: rgba(56, 189, 248, 0.40); --indigo-a15: rgba(129, 140, 248, 0.15); /* ── Font-Sizes (7 Stufen) ── */ --fs-xs: 0.65rem; --fs-sm: 0.78rem; --fs-base: 0.88rem; --fs-md: 1.00rem; --fs-lg: 1.15rem; --fs-xl: 1.40rem; --fs-hero: 2.20rem; /* ── Border-Radius (4 Stufen) ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 50%; /* ── Spacing (5 Stufen) ── */ --space-xs: 0.25rem; --space-sm: 0.50rem; --space-md: 0.75rem; --space-lg: 1.00rem; --space-xl: 1.50rem; /* Mobile: einheitliche Abstände – zentral steuerbar. Hier ändern → wirkt auf ALLE Pages (Vorhersage, Klima, Dashboard etc.) */ --mobile-page-top: 1rem; /* Abstand zwischen Header und Page-Inhalt */ --mobile-page-side: 0.4rem; /* Abstand links/rechts zum Bildschirmrand */ /* ── Schatten + Übergänge ── */ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5); --transition-base: all 0.2s ease; /* ── Sonstiges ── */ --font-main: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'SF Mono', Consolas, monospace; --border-light: rgba(255, 255, 255, 0.10); --border-blue: rgba(59, 130, 246, 0.25); --max-width: 1100px; --header-h: 50px; /* Alte semantische Aliase (Kompatibilität) */ --primary: #2c3e50; --secondary: #3498db; --accent: #e74c3c; --success: #27ae60; --warning: #f39c12; --light: #ecf0f1; --dark: #34495e; --gradient: var(--bg-page-gradient); /* ── Chart-Farben ── */ --chart-grid: rgba(100, 130, 180, 0.15); --chart-text: #94a3b8; --chart-tooltip-bg: rgba(15, 23, 42, 0.95); /* ── Heatmap-Skala ── */ --heat-blue-dark: #000080; --heat-blue: #0080ff; --heat-cyan: #00ffff; --heat-green: #00ff00; --heat-yellow: #ffff00; --heat-orange: #ff8000; --heat-red: #ff0000; --heat-darkred: #800000; /* ── Glow-Effekte ── */ --glow-blue: 0 0 12px rgba(59, 130, 246, 0.20); --glow-green: 0 0 12px rgba(52, 211, 153, 0.20); --glow-yellow: 0 0 12px rgba(251, 191, 36, 0.20); --glow-red: 0 0 12px rgba(239, 68, 68, 0.20); --glow-purple: 0 0 12px rgba(168, 85, 247, 0.20); --glow-indigo: 0 0 12px rgba(129, 140, 248, 0.20); /* ── Z-Index ── */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-tooltip: 500; --z-toast: 600; /* ========================================================================= DASHBOARD TOKENS – Semantische Farben für Cards, Charts, Canvas Alle dashboard.css und dashboard.js Farben referenzieren NUR diese Tokens. ========================================================================= */ /* Card-Inhalt */ --db-label: #6b8caf; --db-value: #ffffff; --db-unit: #8b9dc3; --db-sub: #6b8caf; --db-divider: rgba(59, 130, 246, 0.25); /* Extreme-Boxen (MAX/MIN) */ --db-extreme-label: #5a7fa8; --db-extreme-cold: #5a9ad8; --db-extreme-hot: #d86060; --db-extreme-neutral: #b0bfd0; --db-extreme-yellow-label: #d4a030; /* Chart (48h) – Achsen + Grid */ --db-chart-title: #6b8caf; --db-chart-tick: #c0cee0; --db-chart-tick-strong: #e2e8f0; --db-chart-grid: rgba(100, 160, 220, 0.15); --db-chart-grid-strong: rgba(160, 190, 230, 0.25); --db-chart-grid-y: rgba(100, 160, 220, 0.08); --db-chart-copyright: rgba(148, 163, 184, 0.45); /* Canvas – Text/Linienfarben (JS fillText/strokeStyle) */ --db-canvas-text: rgba(148, 163, 184, 0.90); --db-canvas-text-muted: rgba(148, 163, 184, 0.60); --db-canvas-text-strong: #e2e8f0; --db-canvas-line: rgba(148, 163, 184, 0.55); --db-canvas-line-light: rgba(148, 163, 184, 0.20); --db-canvas-dot: rgba(148, 163, 184, 0.80); --db-canvas-tooltip-text: #e2e8f0; /* Sonnen-/Mond-Arc */ --db-arc-bg-top: rgba(8, 20, 70, 0.55); --db-arc-bg-bot: rgba(10, 14, 26, 0.10); --db-arc-twi-top: rgba(15, 40, 110, 0.35); --db-arc-twi-bot: rgba(10, 14, 26, 0); --db-arc-jun: rgba(160, 185, 230, 0.65); --db-arc-jun-label: rgba(160, 185, 230, 0.80); --db-arc-dez: rgba(148, 170, 215, 0.70); --db-arc-dez-label: rgba(148, 170, 215, 0.80); --db-arc-horizon: rgba(148, 163, 184, 0.55); --db-arc-guide: rgba(148, 163, 184, 0.20); --db-arc-label: rgba(148, 163, 184, 0.90); --db-arc-elev-sun: #fef08a; --db-arc-elev-moon: rgba(210, 225, 252, 0.95); --db-arc-moon-peak: rgba(200, 215, 240, 0.90); --db-arc-moon-hidden: rgba(100, 116, 139, 0.50); --db-arc-moon-bg-top: rgba(5, 10, 40, 0.65); --db-arc-moon-bg-bot: rgba(10, 14, 26, 0.10); --db-arc-moon-guide: rgba(148, 163, 184, 0.45); /* Föhn-Chart Canvas */ --db-foehn-alpen: rgba(148, 197, 253, 0.65); --db-foehn-sued-label: rgba(250, 204, 21, 0.80); --db-foehn-sued-line: rgba(250, 204, 21, 0.65); --db-foehn-zero: rgba(148, 197, 253, 0.25); --db-foehn-fill: rgba(210, 218, 230, 0.45); } /* ============================================================================ LIGHT THEME – Überschreibt Dark wenn gesetzt ============================================================================ */ :root.light { /* Hintergründe – Page dunkler, Cards weiß → klarer Kontrast */ --bg-page: #e4eaf2; --bg-header: #ffffff; --bg-card: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.96) 100%); --bg-card-hover: linear-gradient(135deg, rgba(245, 248, 255, 0.98) 0%, rgba(238, 244, 255, 0.96) 100%); --bg-card-solid: #ffffff; --bg-tooltip: rgba(255, 255, 255, 0.98); --bg-overlay: rgba(0, 0, 0, 0.35); --bg-page-gradient: linear-gradient(135deg, #dce4f0 0%, #e2eaf4 40%, #d6e0ee 100%); --bg-dark-contrast: #1e293b; /* ── Klima-Tabellen: Ø/Σ Zusammenfassungszeile + Spalte ── */ --avg-bg: #e0e7f1; --avg-color: #1e40af; --avg-highlight: #b45309; /* Glass – stärker für sichtbare Flächen */ --glass-light: rgba(30, 60, 120, 0.05); --glass-medium: rgba(30, 60, 120, 0.07); --glass-hover: rgba(30, 60, 120, 0.12); /* Overlay */ --overlay-medium: rgba(0, 0, 0, 0.25); --overlay-heavy: rgba(0, 0, 0, 0.50); /* Text */ --text-primary: #1e293b; --text-secondary: #334155; --text-muted: #64748b; /* Blue */ --blue: #2563eb; --blue-light: #3b82f6; --blue-accent: #60a5fa; --blue-a10: rgba(37, 99, 235, 0.08); --blue-a25: rgba(37, 99, 235, 0.20); --blue-a40: rgba(37, 99, 235, 0.35); /* Akzentfarben */ --green: #16a34a; --green-dark: #15803d; --green-muted: #059669; --green-deep: #047857; --red: #dc2626; --red-light: #ef4444; --red-dark: #b91c1c; --yellow: #d97706; --yellow-dark: #b45309; --yellow-deep: #a16207; --yellow-bright: #ca8a04; --orange: #ea580c; --orange-light: #f97316; --purple: #7c3aed; --purple-bright: #8b5cf6; --purple-dark: #6d28d9; --indigo: #6366f1; --cyan: #0891b2; --teal: #0d9488; --teal-light: #0d9488; --lime: #65a30d; --lime-dark: #4d7c0f; /* Farbige Alphas */ --yellow-a15: rgba(217, 119, 6, 0.15); --yellow-a35: rgba(217, 119, 6, 0.35); --red-a15: rgba(220, 38, 38, 0.15); --red-a30: rgba(220, 38, 38, 0.30); --green-a15: rgba(5, 150, 105, 0.15); --green-a35: rgba(5, 150, 105, 0.35); --purple-a15: rgba(109, 40, 217, 0.15); --purple-a30: rgba(109, 40, 217, 0.30); --orange-a15: rgba(234, 88, 12, 0.15); --orange-a35: rgba(234, 88, 12, 0.35); --sky-a15: rgba(14, 165, 233, 0.15); --sky-a40: rgba(14, 165, 233, 0.40); --indigo-a15: rgba(99, 102, 241, 0.15); /* Borders – sichtbarer */ --border-light: rgba(0, 0, 0, 0.10); --border-blue: rgba(37, 99, 235, 0.18); /* Schatten – kräftiger für sichtbaren Card-Lift */ --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(30, 60, 120, 0.06); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(30, 60, 120, 0.08); /* Charts */ --chart-grid: rgba(40, 60, 100, 0.25); --chart-text: #1e293b; --chart-tooltip-bg: rgba(255, 255, 255, 0.97); /* Glow */ --glow-blue: 0 0 12px rgba(37, 99, 235, 0.20); --glow-green: 0 0 12px rgba(5, 150, 105, 0.20); --glow-yellow: 0 0 12px rgba(217, 119, 6, 0.20); --glow-red: 0 0 12px rgba(220, 38, 38, 0.20); --glow-purple: 0 0 12px rgba(109, 40, 217, 0.20); --glow-indigo: 0 0 12px rgba(99, 102, 241, 0.20); /* Dashboard Tokens – Light */ --db-label: var(--text-muted); --db-value: var(--text-primary); --db-unit: var(--text-muted); --db-sub: var(--text-secondary); --db-divider: var(--border-light); --db-extreme-label: var(--text-muted); --db-extreme-cold: #1d6fa5; --db-extreme-hot: #b33030; --db-extreme-neutral: var(--text-secondary); --db-extreme-yellow-label: #92600a; --db-chart-title: var(--text-primary); --db-chart-tick: #334155; --db-chart-tick-strong: #1e293b; --db-chart-grid: rgba(40, 60, 100, 0.25); --db-chart-grid-strong: rgba(40, 60, 100, 0.40); --db-chart-grid-y: rgba(40, 60, 100, 0.18); --db-chart-copyright: rgba(40, 60, 100, 0.70); --db-canvas-text: rgba(30, 50, 80, 0.95); --db-canvas-text-muted: rgba(40, 60, 90, 0.75); --db-canvas-text-strong: #1e293b; --db-canvas-line: rgba(40, 60, 90, 0.55); --db-canvas-line-light: rgba(40, 60, 90, 0.30); --db-canvas-dot: rgba(40, 60, 90, 0.80); --db-canvas-tooltip-text: #1e293b; --db-arc-bg-top: rgba(200, 215, 240, 0.35); --db-arc-bg-bot: rgba(230, 238, 248, 0.10); --db-arc-twi-top: rgba(180, 200, 230, 0.20); --db-arc-twi-bot: rgba(230, 238, 248, 0); --db-arc-jun: rgba(80, 110, 160, 0.50); --db-arc-jun-label: rgba(60, 90, 140, 0.85); --db-arc-dez: rgba(80, 110, 160, 0.55); --db-arc-dez-label: rgba(60, 90, 140, 0.85); --db-arc-horizon: rgba(50, 70, 100, 0.35); --db-arc-guide: rgba(50, 70, 100, 0.18); --db-arc-label: rgba(40, 60, 90, 0.90); --db-arc-elev-sun: #b45309; --db-arc-elev-moon: rgba(40, 60, 100, 0.95); --db-arc-moon-peak: rgba(40, 60, 100, 0.90); --db-arc-moon-hidden: rgba(60, 80, 110, 0.65); --db-arc-moon-bg-top: rgba(180, 195, 220, 0.40); --db-arc-moon-bg-bot: rgba(220, 228, 240, 0.10); --db-arc-moon-guide: rgba(50, 70, 100, 0.30); --db-foehn-alpen: rgba(40, 90, 170, 0.70); --db-foehn-sued-label: rgba(160, 120, 0, 0.90); --db-foehn-sued-line: rgba(160, 120, 0, 0.55); --db-foehn-zero: rgba(40, 90, 170, 0.20); --db-foehn-fill: rgba(140, 155, 175, 0.35); } /* ============================================================================ RESET & GRUNDLAGEN ============================================================================ */ html { color-scheme: dark; background: var(--bg-page); overflow-y: auto; scrollbar-width: none; } html::-webkit-scrollbar { display: none; } html.light { color-scheme: light; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Placeholder-Kontrast WCAG AA (betrifft admin-Login & alle Formulare) */ ::placeholder { color: var(--text-muted); opacity: 1; } ::-webkit-input-placeholder { color: var(--text-muted); opacity: 1; } ::-moz-placeholder { color: var(--text-muted); opacity: 1; } body { font-family: var(--font-main); line-height: 1.6; color: var(--text-primary); background: var(--bg-page); min-height: 100vh; } /* Theme-Wechsel: sanfte Farb-Übergänge (nur aktiv beim Toggle, nicht beim Laden!) */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important; transition-delay: 0s !important; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } /* ============================================================================ HEADER ============================================================================ */ header { background: var(--bg-header); padding: 0.8rem 1.5rem; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-md); border-bottom: 1px solid var(--border-light); } header .header-content { display: flex; justify-content: space-between; align-items: center; max-width: 100%; margin: 0; } header .header-left { display: flex; align-items: center; gap: 0.6rem; } header .header-icon { line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; border-radius: var(--radius-md); transition: var(--transition-base); } header .header-icon:hover { background: var(--glass-hover); } header .header-icon svg { width: 34px; height: 34px; transition: var(--transition-base); stroke: var(--text-secondary); } header .header-icon:hover svg { stroke: var(--text-primary); } header .header-text h1, header .header-text h2 { font-size: var(--fs-lg); margin: 0; color: var(--text-primary); font-weight: 700; letter-spacing: 0.3px; } .header-breadcrumb { font-size: var(--fs-base); color: var(--text-muted); font-weight: 400; margin-top: 0.1rem; letter-spacing: 0.2px; } .header-breadcrumb:empty { display: none; } /* Live-Status im Header (nur auf Dashboard sichtbar) */ .header-live { display: none; align-items: center; gap: 0.4rem; font-size: var(--fs-base); color: var(--text-muted); font-weight: 500; margin-top: 0.1rem; } .header-live.sichtbar { display: flex; } .header-live::before { content: '·'; color: var(--text-muted); margin-right: 0.1rem; } .header-live .live-dot { display: inline-block; width: 6px; height: 6px; background: var(--green-deep); border-radius: var(--radius-full); animation: pulse 2s ease-in-out infinite; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); } /* Theme-Toggle Button */ .theme-toggle { background: var(--glass-medium); border: 1px solid var(--border-light); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, border-color 0.2s; padding: 0; line-height: 1; color: var(--text-secondary); } .theme-toggle:hover { background: var(--glass-hover); border-color: var(--border-light); color: var(--text-primary); } .theme-toggle svg { display: block; } /* ============================================================================ NAVIGATION - Sidebar ============================================================================ */ /* ============================================================================ NAVIGATION - Sidebar ============================================================================ */ nav { position: fixed; top: var(--header-h); right: -185px; width: 185px; height: calc(100vh - var(--header-h)); background: var(--bg-header); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-left: 1px solid var(--border-light); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2); z-index: 1000; transition: left 0.15s ease-out; overflow-y: auto; padding-top: 0; } nav.active { right: 0; } nav ul { list-style: none; padding: 0.8rem 0 0.5rem 0; margin: 0; display: flex; flex-direction: column; align-items: stretch; } nav ul li { margin: 0; } nav ul li a { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.2rem; color: var(--text-secondary); text-decoration: none; font-size: var(--fs-md); font-weight: 500; border-right: 3px solid transparent; transition: var(--transition-base); white-space: nowrap; text-align: left; } nav ul li a svg { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.75; } nav ul li a:hover svg, nav ul li a.active svg { opacity: 1; } nav ul li a:hover { background: var(--glass-medium); color: var(--text-primary); border-right-color: var(--blue-light); } nav ul li a.active { background: var(--glass-hover); color: var(--blue-light); border-right-color: var(--blue-light); font-weight: 600; } .nav-separator { height: 1px; background: var(--border-light); margin: 0.4rem 1.2rem; list-style: none; } .nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--bg-overlay); z-index: 999; opacity: 0; visibility: hidden; transition: var(--transition-base); } .nav-overlay.active { opacity: 1; visibility: visible; } /* ============================================================================ SEITENLAYOUT ============================================================================ */ main { margin-top: 0; } .page-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } /* ============================================================================ GEMEINSAME KOMPONENTEN ============================================================================ */ .table-responsive { overflow-x: auto; margin-top: var(--space-xl); } /* Heatmap-Tabellen: Layout-Basis → Details in klima.css + heatmap-colors.css */ .heatmap-table { width: 100%; border-collapse: separate; border-spacing: 1.5px; } .heatmap-table th { padding: var(--space-sm); text-align: center; font-weight: 700; font-size: var(--fs-sm); color: var(--blue-light); background: var(--bg-card-solid); } .heatmap-table td { padding: var(--space-sm); text-align: center; font-weight: 600; } .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--glass-medium); border-top-color: var(--blue-light); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================================ FOOTER ============================================================================ */ footer { display: block; background: none; padding: 0; margin: 0; } /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width: 768px) { header { padding: 0.7rem 1rem; } header .header-icon svg { width: 34px; height: 34px; } header .header-text h1, header .header-text h2 { font-size: var(--fs-lg); } /* Globales Page-Padding auf Mobile: zentrale Steuerung für alle Seiten. Padding hier ändern wirkt auf alle Seiten (Vorhersage, Klima, Webcam, Livekarte, Chronik, Index/Dashboard, Grafik etc.) und auch auf Chart-Popups/Modals die als Vollbild über die Seite gelegt werden. */ .container, .fc-container, .webcam-container, .forecast-page, .klima-page, .chronik-page, .livekarte-page, .dashboard-wrapper, .gfx-outer, .card-modal-overlay, .card-modal-content, .card-modal-content .db-card { padding-left: var(--mobile-page-side) !important; padding-right: var(--mobile-page-side) !important; } /* Verschachtelte Container: kein zusätzliches seitliches Padding (sonst summiert sich der Abstand) */ .fc-container, .card-modal-content .db-card { padding-left: 0 !important; padding-right: 0 !important; } /* Livekarte + Chronik bleiben edge-to-edge ohne seitlichen Abstand */ .chronik-page, .livekarte-page { padding-left: 0 !important; padding-right: 0 !important; } /* Einheitlicher Abstand zum Header für alle Pages auf Mobile. Steuerung über --mobile-page-top in :root. Ausnahme: livekarte + chronik bleiben edge-to-edge ohne Top-Abstand. */ .container, .webcam-container, .forecast-page, .klima-page, .dashboard-wrapper, .gfx-outer { padding-top: var(--mobile-page-top) !important; } /* fc-container ist innerhalb forecast-page → keinen zusätzlichen Top-Abstand */ .fc-container { padding-top: 0 !important; } .chronik-page, .livekarte-page { padding-top: 0 !important; } /* Sticky Mobile-Navs: kein zusätzlicher Top-Abstand (erzeugen sonst doppelten Abstand zum Header) */ .forecast-page .fc-mobile-nav, body #klima-gruppen { padding-top: 0 !important; margin-top: 0 !important; } /* Modal-Content darf auf Mobile nicht durch max-width begrenzt werden */ .card-modal-content { max-width: 100% !important; } } @media (orientation: landscape) and (max-height: 768px) { header { display: none !important; } :root { --header-h: 0px; } nav { top: 0; height: 100vh; } main { margin-top: 0; } } /* ============================================================================ LIGHT THEME – Globaler Card-Lift Alle Card-ähnlichen Container bekommen im Light-Theme einen Schatten, damit sie sich vom Hintergrund abheben. Zentral statt seitenspezifisch. ============================================================================ */ :root.light .db-card, :root.light .db-mini, :root.light .metric-card, :root.light .dashboard-header, :root.light .fc-card, :root.light .fc10-day, :root.light .chart-card, :root.light .heatmap-section, :root.light .klima-gruppe-header, :root.light .webcam-card, :root.light .chr-sb-card, :root.light .mobile-btn, :root.light .wc-btn { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(30, 60, 120, 0.05); } /* ============================================================================ LEAFLET CONTROLS – Einheitliches Styling für alle Karten-Seiten Gilt für: Livekarte, Chronik, Grafiken, Ereignisse ============================================================================ */ .leaflet-control-layers-toggle { background-color: var(--bg-tooltip) !important; border-radius: var(--radius-md) !important; border: 1px solid var(--border-light) !important; } .leaflet-control-layers { background: var(--bg-tooltip) !important; border: 1px solid var(--border-light) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; color: var(--text-primary) !important; } .leaflet-control-layers label { color: var(--text-secondary) !important; } .leaflet-control-layers label:hover { color: var(--text-primary) !important; } .leaflet-control-layers-separator { border-top: 1px solid var(--border-light) !important; } .leaflet-control-zoom a { background-color: var(--bg-tooltip) !important; color: var(--text-primary) !important; border-color: var(--border-light) !important; } .leaflet-control-zoom a:hover { background-color: var(--glass-hover) !important; } /* Dark Theme: Leaflet-Icon invertieren (Standard ist weißes Sprite) */ .leaflet-control-layers-toggle { filter: none; } :root:not(.light) .leaflet-control-layers-toggle { filter: invert(0.85) hue-rotate(180deg); } /* Ausnahme: grafik.php nutzt ein eigenes SVG-Icon im blauen Stil, der Filter würde das korrekt gefärbte Icon unnötig invertieren. */ :root:not(.light) .gfx-map-wrap .leaflet-control-layers-toggle { filter: none; } :root:not(.light) .leaflet-control-zoom a { filter: invert(0.85) hue-rotate(180deg); } /* Schneeflocke: im Light-Theme dunklere Farbe */ :root.light .icon-schnee { color: #0ea5e9 !important; } /* ============================================================================ LIGHT MODE KONTRAST-FIXES – Aurora/Kp Card Inline-Farben (helles Grün #22c55e, #86efac, Slate #94a3b8) haben auf weißem Card-Hintergrund zu schwachen Kontrast. Override mit dunkleren Varianten. ============================================================================ */ /* Card-Titel, Hauptwert, Icon, Aurora Status → dunklere Grün/Gelb-Töne */ :root.light #card-kp [style*="#22c55e"] { color: #15803d !important; stroke: #15803d !important; } :root.light #card-kp [style*="#86efac"] { color: #15803d !important; stroke: #15803d !important; } :root.light #card-kp [style*="#fbbf24"] { color: #b45309 !important; stroke: #b45309 !important; } /* "Nicht sichtbar" in Schladming-Box: hardcoded #94a3b8 → dunkler */ :root.light #card-kp [style*="#94a3b8"] { color: #475569 !important; } /* Kp-Skala: aktive Ziffer war #fff (weiß) — im Light Mode unlesbar → dunkel */ :root.light #card-kp span[style*="color:#fff"] { color: #0f172a !important; } /* Marker auf der Kp-Skala: weißer Glow ist im Light Mode sinnlos */ :root.light #card-kp div[style*="box-shadow:0 0 6px rgba(255,255,255,0.6)"] { box-shadow: 0 0 4px rgba(0,0,0,0.25) !important; } /* "Heute"/Datums-Label unter dem Kp-Chart: wird via Canvas gezeichnet — falls Orange (#f59e0b / #fbbf24) zu hell: Chart-JS müsste separat angepasst werden */ /* Mondphasen-Box: weißer Border war im Light Mode unsichtbar */ :root.light #card-mond div[style*="border:1px solid rgba(255,255,255,0.07)"] { border-color: var(--border-light) !important; } /* Mobile Kp-Button: gleiche helle Farben problematisch */ :root.light .mobile-btn [style*="#22c55e"], :root.light .mobile-btn [style*="#86efac"] { color: #15803d !important; stroke: #15803d !important; } :root.light .mobile-btn [style*="#fbbf24"] { color: #b45309 !important; stroke: #b45309 !important; } /* ============================================================================ POPUPS & MODALS – Einheitliches Styling Basis-Klassen für alle Popup-Fenster über alle Seiten. ============================================================================ */ /* Overlay */ .popup-overlay { display: none; position: fixed; inset: 0; background: var(--overlay-heavy); z-index: 9998; } /* Popup-Container */ .popup-base { background: var(--bg-tooltip); border: 1.5px solid var(--glass-medium); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem 1.25rem; max-width: 460px; width: 92%; box-shadow: var(--shadow-lg); color: var(--text-primary); } /* Popup-Header */ .popup-base .popup-header, .ipu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--glass-light); } /* Popup-Titel */ .popup-base h3, .popup-base h4, .popup-base .popup-title, .ipu-title { font-size: var(--fs-md); font-weight: 700; line-height: 1.2; color: var(--text-primary); } /* Popup-Body */ .popup-base .popup-body, .ipu-body { font-size: var(--fs-base); line-height: 1.6; color: var(--text-secondary); } .popup-base p, .ipu-body p { margin: 0 0 0.6rem 0; color: var(--text-secondary); } .popup-base strong, .ipu-body strong { color: var(--text-primary); } .popup-base ul, .ipu-body ul { margin: 0.4rem 0 0.8rem 0; padding-left: 1.2rem; } .popup-base li, .ipu-body li { margin: 0.3rem 0; } /* Popup Close-Button */ .popup-base .close-btn, .ipu-close { background: none; border: none; color: var(--text-muted); font-size: var(--fs-xl); cursor: pointer; line-height: 1; padding: 0.1rem 0.3rem; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; flex-shrink: 0; } .popup-base .close-btn:hover, .ipu-close:hover { color: var(--text-primary); background: var(--glass-medium); } /* Popup-Formel */ .popup-base .formula, .ipu-body .ipu-formula { background: var(--glass-light); border-radius: var(--radius-md); padding: 0.45rem 0.7rem; font-family: var(--font-mono); font-size: var(--fs-sm); margin: 0.4rem 0 0.8rem; color: var(--text-primary); } /* Popup-Footer */ .popup-base .popup-footer, .ipu-body .ipu-footer { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid var(--glass-light); } /* Leaflet Controls: einheitlicher Abstand zum Kartenrand */ .leaflet-top { top: 1.5rem !important; } .leaflet-left { left: 1rem !important; } .leaflet-right { right: 1rem !important; } .leaflet-bottom { bottom: 1rem !important; }