/* MG4 Kleve - oeffentliches Dashboard Basis-Identitaet des Projekts: dunkles HUD-Design (Standard), Mono-Zahlen, blauer Akzent. Lila/Amber bleiben bewusst dem Admin-Bereich vorbehalten. Hell-Theme via [data-theme="light"] auf , siehe /shared/theme.js. */ :root { --bg: #0d0f12; --card: #16191d; --card-alt: #1c1f24; --border: #24272c; --text: #f0f0ee; --text-muted: #9a9a96; --text-faint: #6b6b68; --blue: #378adb; --blue-bg: #122942; --green: #5dcaa5; --green-bg: #0f2a20; --coral: #d85a30; --amber: #fac775; --radius: 16px; --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --sans: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } :root[data-theme="light"] { --bg: #f4f5f7; --card: #ffffff; --card-alt: #eef0f3; --border: #e1e3e7; --text: #1a1c1f; --text-muted: #5a5e63; --text-faint: #8a8d91; --blue: #2f74b8; --blue-bg: #e7f0fb; --green: #2f9c76; --green-bg: #e4f5ee; --coral: #c14f29; --amber: #b8790f; } body, .card, .mini-tile, .stat-tile { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 640px; margin: 0 auto; padding: 28px 20px 56px; } /* Ab Tablet-/Laptop-Breite: mehr Platz nutzen statt eine schmale Spalte mit grossen leeren Raendern zu zentrieren. Karten, Torten (Doppel-Torte auf /laden.html) und Fliesstext (FAQ/Quellen) profitieren gleichermassen von der zusaetzlichen Breite - alles darunter ist bereits flex/grid- basiert und dehnt sich von selbst mit. */ @media (min-width: 900px) { .wrap { max-width: 880px; padding: 44px 40px 72px; } } @media (min-width: 1200px) { .wrap { max-width: 1040px; } } /* --- Header --- */ .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .brand svg { flex-shrink: 0; } .brand-text .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted); margin: 0; } .brand-text .title { font-size: 19px; font-weight: 600; margin: 2px 0 0; } /* --- Karten --- */ .card { background: var(--card); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; } .section-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--text-muted); margin: 26px 0 10px; } .section-label:first-of-type { margin-top: 0; } /* --- Hero: SoC gross --- */ .hero-soc { display: flex; align-items: center; gap: 20px; } .soc-ring { flex-shrink: 0; } .hero-info { min-width: 0; } .hero-info .soc-value { font-family: var(--mono); font-size: 40px; font-weight: 700; line-height: 1; margin: 0; } .hero-info .soc-range { color: var(--text-muted); font-size: 14px; margin: 6px 0 0; } .charging-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--green-bg); color: var(--green); font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 8px; margin-top: 10px; } .charging-badge.idle { background: var(--card-alt); color: var(--text-faint); } /* --- Mini-Stats-Grid (Live-Werte) --- */ .mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; } .mini-tile { background: var(--card-alt); border-radius: 11px; padding: 11px 12px; } .mini-tile .mini-label { font-family: var(--mono); font-size: 9.5px; color: var(--text-faint); letter-spacing: 0.03em; margin: 0 0 4px; } .mini-tile .mini-value { font-family: var(--mono); font-size: 15px; font-weight: 600; margin: 0; } .last-updated { text-align: center; font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); margin-top: 14px; } /* --- Statistik-Kacheln --- */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .stat-tile { background: var(--card-alt); border-radius: 11px; padding: 13px 14px; } .stat-tile .stat-label { font-family: var(--mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.04em; margin: 0 0 6px; } .stat-tile .stat-value { font-family: var(--mono); font-size: 18px; font-weight: 600; margin: 0; } /* --- Balken (Straßentyp, Reichweiten-Vergleich) --- */ .bar-row { margin: 12px 0; } .bar-row:first-child { margin-top: 0; } .bar-row-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; } .bar-track { background: var(--card-alt); border-radius: 6px; height: 8px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 6px; background: var(--blue); } .empty { text-align: center; padding: 24px 10px; color: var(--text-faint); font-size: 13px; } .muted { color: var(--text-muted); } .footer-links { display: flex; justify-content: center; gap: 18px; margin-top: 30px; font-size: 13px; color: var(--text-faint); } @media (max-width: 420px) { .wrap { padding: 20px 14px 48px; } .mini-grid { grid-template-columns: repeat(2, 1fr); } } /* --- FAQ-Seite (Fliesstext) --- */ .prose h2 { font-size: 16px; font-weight: 600; margin: 28px 0 10px; } .prose h2:first-child { margin-top: 0; } .prose p { font-size: 14.5px; line-height: 1.65; color: var(--text-muted); margin: 0 0 14px; max-width: 68ch; } .prose strong { color: var(--text); font-weight: 600; } .prose ul { margin: 0 0 14px; padding-left: 20px; } .prose li { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin-bottom: 6px; } .credits-list { list-style: none; padding: 0; margin: 0; } .credits-list li { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .credits-list li:last-child { border-bottom: none; } .credits-list .credit-name { color: var(--text); font-weight: 600; } .credits-list .credit-desc { color: var(--text-faint); font-size: 12.5px; margin-top: 2px; } .back-link { font-family: var(--mono); font-size: 12.5px; margin-bottom: 20px; display: inline-block; } /* --- FAQ: Unterueberschriften innerhalb eines Abschnitts --- */ .prose h3 { font-size: 14.5px; font-weight: 600; color: var(--text); margin: 18px 0 6px; } .prose h3:first-of-type { margin-top: 4px; } .prose code { font-family: var(--mono); font-size: 12.5px; background: var(--card-alt); padding: 2px 5px; border-radius: 5px; color: var(--blue); } /* --- Hell/Dunkel-Umschalter --- */ .theme-toggle-btn { background: var(--card); border: 1px solid var(--border); color: var(--text-muted); border-radius: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .theme-toggle-btn:hover { color: var(--text); } .header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .header-row .brand { margin-bottom: 0; } /* --- Aufklappbare Sektionen (Enthusiasten-Extras) --- */ .collapsible-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; margin: 26px 0 10px; cursor: pointer; text-align: left; color: inherit; font-family: inherit; } .collapsible-toggle .section-label { margin: 0; } .collapsible-toggle .chevron { color: var(--text-faint); transition: transform 0.15s ease; flex-shrink: 0; } .collapsible-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); } .hidden { display: none !important; } /* --- Screenshot-Galerie (Uhr-App-Präsentation) --- */ .screenshot-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 20px 0 28px; } .screenshot-gallery figure { margin: 0; text-align: center; } .screenshot-gallery img { width: 100%; max-width: 220px; border-radius: 16px; border: 1px solid var(--border, rgba(255,255,255,0.1)); display: block; margin: 0 auto 8px; } .screenshot-gallery figcaption { font-size: 12px; color: var(--text-faint); } /* ===== Navigations-Dropdown (ersetzt die lange Linkleiste oben) ===== */ .header-actions { display: flex; align-items: center; gap: 10px; } .nav-menu { position: relative; display: inline-flex; } .nav-menu > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 36px; box-sizing: border-box; border-radius: 10px; background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 500; } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu > summary::after { content: "\25BE"; font-size: 11px; color: var(--text-muted); transition: transform 0.15s ease; } .nav-menu[open] > summary::after { transform: rotate(180deg); } .nav-menu > summary:hover { background: var(--card-alt); } .nav-menu-list { position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 50; min-width: 240px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.30); } .nav-menu-list a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text); font-size: 14px; text-decoration: none; } .nav-menu-list a:hover { background: var(--card-alt); } .nav-menu-list hr { border: none; border-top: 1px solid var(--border); margin: 6px 4px; } /* ===== Textseiten (Erklärseiten) auf angenehme Artikel-Breite ===== */ /* Zwei Klassen (.wrap.wrap-text) schlagen die Media-Query-Regel .wrap, ohne selbst eine Media-Query zu brauchen - der Text bleibt lesbar und die Karte wirkt nicht mehr halb leer. Datenseiten (Grid/Diagramme) bleiben breit. */ .wrap.wrap-text { max-width: 720px; } .wrap-text .prose p { max-width: none; } /* ===== Textseiten: auf dem PC etwas größere, besser lesbare Schrift ===== */ /* Greift erst ab 900px (Desktop/Tablet quer) - auf dem Handy bleibt es bei den 14,5px von oben. line-height ist einheitenlos und skaliert automatisch. */ @media (min-width: 900px) { .prose p, .prose li { font-size: 16.5px; } .prose h2 { font-size: 19px; } .prose h3 { font-size: 16.5px; } .prose code { font-size: 14px; } } /* ===== Kachel-Beschriftungen auf dem PC etwas größer (Datenseiten) ===== */ /* Greift erst ab 900px - auf dem Handy bleiben die kompakten Größen von oben. Betrifft Statistik-/Dashboard-Kacheln (stat-tile/mini-tile) und die kleinen Abschnitts-Überschriften. */ @media (min-width: 900px) { .section-label { font-size: 14.5px; } .stat-tile .stat-label { font-size: 14px; } .stat-tile .stat-value { font-size: 24px; } .mini-tile .mini-label { font-size: 14px; } .mini-tile .mini-value { font-size: 19px; } }