/* Chonu Wätter — Skin «Glass Cockpit» (Variante G), Phase 2. Farbschema 3-stufig: Auto / Hell / Dunkel. - Auto (kein data-theme am ): folgt prefers-color-scheme, funktioniert auch ganz ohne JS. - Hell/Dunkel: js/theme.js (+ Inline-Bootstrap im ) setzt html[data-theme="light"|"dark"] und überschreibt so die Auto-Regel. Tageszeit-Ambiente über Body-Klasse (dawn/dusk/night), von Cheetah pro Minuten-Generierung gesetzt. */ :root { --ink: #182338; --ink-2: #3d4d68; --ink-3: #5f7089; --glass: rgba(255,255,255,.6); --glass-edge: rgba(255,255,255,.75); --warm: #ea580c; --cool: #0369a1; --accent: #0284c7; --g1: #bfdcf5; --g2: #dfeaf8; --g3: #f6e7d8; --g4: #cfe8e2; --tl-night: #c7d2e2; --tl-twi: #a9bdd8; --tl-day: #7fb2e0; --tl-moon: #94a3b8; --warn: #b45309; --mono: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace; } /* Dunkel-Palette: einmal als Auto-Regel (nur wenn KEIN data-theme gesetzt ist, damit erzwungenes Hell auf Dunkel-OS gewinnt), einmal für erzwungenes Dunkel. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ink: #e6edf7; --ink-2: #b3c2d8; --ink-3: #8494ac; --glass: rgba(20,32,54,.55); --glass-edge: rgba(255,255,255,.14); --warm: #fb923c; --cool: #7dd3fc; --accent: #38bdf8; --g1: #0d1b33; --g2: #14263f; --g3: #2b2138; --g4: #0f2b33; --tl-night: #0d1526; --tl-twi: #2a3a63; --tl-day: #3b6ea5; --tl-moon: #8593ad; --warn: #fbbf24; } } :root[data-theme="dark"] { --ink: #e6edf7; --ink-2: #b3c2d8; --ink-3: #8494ac; --glass: rgba(20,32,54,.55); --glass-edge: rgba(255,255,255,.14); --warm: #fb923c; --cool: #7dd3fc; --accent: #38bdf8; --g1: #0d1b33; --g2: #14263f; --g3: #2b2138; --g4: #0f2b33; --tl-night: #0d1526; --tl-twi: #2a3a63; --tl-day: #3b6ea5; --tl-moon: #8593ad; --warn: #fbbf24; } * { box-sizing: border-box; margin: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ink); font-size: 15px; line-height: 1.45; min-height: 100vh; background: radial-gradient(ellipse 60% 45% at 12% 8%, var(--g3) 0%, transparent 60%), radial-gradient(ellipse 55% 50% at 88% 18%, var(--g4) 0%, transparent 60%), radial-gradient(ellipse 80% 70% at 50% 95%, var(--g1) 0%, transparent 70%), linear-gradient(180deg, var(--g2), var(--g1)); background-attachment: fixed; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(.8rem, 3vw, 1.5rem); } /* Monospace-Ziffern — Cockpit-Erbe */ .num, .tile .value, .tile .sub, .windc .value, .windc .sub, .ledger .v b, .ledger .v time, .ledger .mid b, .ledger .mid time, .timeline .scale, .moonpanel .sub, .sunpanel .cap { font-family: var(--mono); font-variant-numeric: tabular-nums; } header { padding: 1.6rem 0 .3rem; } .mast { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; } .mast h1 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 750; letter-spacing: -.015em; } .mast .meta { font-size: .84rem; color: var(--ink-3); } .badge { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--accent); border: 1.5px solid currentColor; padding:.08rem .55rem; border-radius:99px; align-self:center; } /* Prominente "Updated"-Pille + Stale-Warnung (JS: freshness.js) */ .updated { align-self:center; font-size:.82rem; padding:.16rem .6rem; border-radius:99px; background: var(--glass); border: 1px solid var(--glass-edge); color: var(--ink-2); white-space:nowrap; font-family: var(--mono); font-variant-numeric: tabular-nums; } .updated strong { font-weight:700; color: var(--ink); } .updated.is-stale { background: color-mix(in srgb, var(--warn) 18%, transparent); border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); } .updated.is-stale strong { color: var(--warn); } .stalebar { margin: .9rem 0 .2rem; padding: .55rem .85rem; border-radius: 12px; background: color-mix(in srgb, var(--warn) 16%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); color: var(--warn); font-size: .9rem; line-height: 1.35; } .stalebar strong { font-weight: 750; } .stalebar[hidden] { display: none; } nav.mainnav { margin: .8rem 0 1.2rem; display: inline-flex; flex-wrap: wrap; gap: .25rem; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 99px; padding: .3rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } nav.mainnav a { padding: .32rem 1rem; border-radius: 99px; color: var(--ink-2); font-size: .9rem; } nav.mainnav a.active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-weight: 600; } /* Farbschema-Umschalter (3-stufig, Auto | Light | Dark) — dezent im Footer, rechtsbuendig in der ersten Footer-Zeile, aktive Stufe nur zart accent-getoent. */ footer .themeseg { margin-left: auto; align-self: center; } .themeseg { display: inline-flex; gap: .1rem; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 99px; padding: .2rem; } .themeseg button { font: inherit; font-size: .74rem; color: var(--ink-3); cursor: pointer; border: 0; background: transparent; border-radius: 99px; padding: .22rem .7rem; line-height: 1.1; } .themeseg button:hover { color: var(--ink); } .themeseg button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-weight: 600; } /* Tageszeit-Ambiente — tönt die Aurora */ body.dawn { --g1: #cdd7f1; --g2: #eee3ee; --g3: #f8dcd8; --g4: #e3daf0; } body.dusk { --g1: #dbcce3; --g2: #f5e1cf; --g3: #f5cfae; --g4: #e7d4c5; } body.night { --g1: #b7c5dc; --g2: #c8d3e5; --g3: #c2c8dc; --g4: #bfccd9; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) body.dawn { --g1: #131a36; --g2: #1b2340; --g3: #3a2440; --g4: #23203c; } :root:not([data-theme]) body.dusk { --g1: #101828; --g2: #1a2236; --g3: #3d2418; --g4: #2a1f2e; } :root:not([data-theme]) body.night { --g1: #060d1c; --g2: #0a1426; --g3: #131327; --g4: #071720; } } :root[data-theme="dark"] body.dawn { --g1: #131a36; --g2: #1b2340; --g3: #3a2440; --g4: #23203c; } :root[data-theme="dark"] body.dusk { --g1: #101828; --g2: #1a2236; --g3: #3d2418; --g4: #2a1f2e; } :root[data-theme="dark"] body.night { --g1: #060d1c; --g2: #0a1426; --g3: #131327; --g4: #071720; } .card { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 22px; padding: 1.1rem 1.25rem; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 8px 32px rgba(24,35,56,.12); } .card h2 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: .6rem; } section { margin-bottom: 1.15rem; } .heror { display: grid; grid-template-columns: 1fr; gap: 1.15rem; } @media (min-width: 880px) { .heror { grid-template-columns: 1.7fr 1fr; } } .hero { display: flex; flex-direction: column; justify-content: center; } .hero .now { display: flex; align-items: last baseline; gap: 1rem; flex-wrap: wrap; } .hero .t { font-size: clamp(4.2rem, 10vw, 7rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; } .hero .t .dp { font-size: .55em; letter-spacing: -.04em; } .hero .t sup { font-size: .35em; font-weight: 350; } .hero .facts { font-size: .95rem; color: var(--ink-2); } .hero .facts b { color: var(--ink); font-weight: 650; } .hero .hilo { margin-top: .6rem; font-size: .9rem; color: var(--ink-2); } .hero .hilo .hi { color: var(--warm); font-weight: 650; } .hero .hilo .lo { color: var(--cool); font-weight: 650; } .pills { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; } .pill { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 99px; padding: .35rem .85rem; font-size: .85rem; font-weight: 600; backdrop-filter: blur(8px); } .pill span { color: var(--ink-3); font-weight: 500; } .windc { display: flex; flex-direction: column; align-items: center; text-align: center; } .windc svg { width: 130px; height: auto; display: block; margin-top: .2rem; } .windc .value { font-size: 1.75rem; font-weight: 600; margin-top: -.2rem; } .windc .value small { font-size: .55em; font-weight: 500; color: var(--ink-2); } .windc .sub { font-size: .8rem; color: var(--ink-3); margin-top: .2rem; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; } .tile { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 18px; padding: .85rem 1rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .tile .label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } .tile .value { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; margin-top: .3rem; } .tile .value small { font-size: .55em; font-weight: 500; color: var(--ink-2); } .tile .sub { font-size: .8rem; color: var(--ink-3); margin-top: .22rem; } .tile .sub .hi { color: var(--warm); font-weight: 600; } .tile .sub .lo { color: var(--cool); font-weight: 600; } /* Ephemeris-Deck */ .eph { display: grid; gap: 1.15rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .eph { grid-template-columns: 1.6fr 1fr; } } .sunpanel svg.arc { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; } .timeline { margin-top: .9rem; } .timeline .bar { position: relative; height: 14px; border-radius: 99px; overflow: hidden; border: 1px solid var(--glass-edge); } .timeline .bar .nowmark { position: absolute; top: -3px; bottom: -3px; width: 2.5px; background: #f59e0b; border-radius: 2px; } .timeline .scale { display: flex; justify-content: space-between; font-size: .7rem; color: var(--ink-3); margin-top: .3rem; } .sunpanel .cap { text-align: center; margin-top: .5rem; color: var(--ink-3); font-size: .8rem; } .moonpanel { display: flex; flex-direction: column; align-items: center; text-align: center; } .moonpanel svg { width: 110px; height: auto; display: block; } .moonpanel .mval { font-size: 1.3rem; font-weight: 650; margin-top: .3rem; } .moonpanel .mval span { color: var(--ink-2); font-size: .7em; } .moonpanel .sub { font-size: .8rem; color: var(--ink-3); margin-top: .15rem; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .2rem 2.2rem; } /* Statistik-Tabelle «Aligned Ledger» — geteilt von Summary (week/month/year) und «Since Midnight» (index). Feste Spalten High/Low mit einer Kopfzeile, Werte monospace rechtsbündig -> sie fluchten über alle Zeilen (scannbar). Zeit als kleine, gedämpfte Zweitzeile unter dem Wert. Panel mittig per max-width, damit die voll-breite Card keine tote rechte Hälfte hat; in der schmalen .duo-Card (Index) füllt es ohnehin die ganze Breite. */ table.ledger { width: 100%; max-width: 620px; border-collapse: collapse; } .ledger thead th { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); text-align: right; padding: 0 0 .25rem; border-bottom: 1px solid var(--glass-edge); } .ledger thead th:first-child { text-align: left; } .ledger thead th.hi { color: var(--warm); } .ledger thead th.lo { color: var(--cool); } .ledger tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--glass-edge) 55%, transparent); } .ledger tbody tr:last-child { border-bottom: 0; } .ledger th.lbl { text-align: left; font-weight: 500; color: var(--ink-2); white-space: nowrap; padding: .44rem 1.4rem .44rem 0; vertical-align: baseline; } .ledger td.v { text-align: right; width: 8.5em; padding: .44rem 0; vertical-align: baseline; } .ledger td.v b { display: block; font-weight: 650; font-size: 1.02rem; } .ledger td.v time { display: block; font-size: .72rem; color: var(--ink-3); margin-top: .03rem; } .ledger td.mid { text-align: right; padding: .44rem 0; vertical-align: baseline; } .ledger td.mid b { font-weight: 650; font-size: 1.02rem; } .ledger td.mid .mk { color: var(--ink-3); margin: 0 .5rem; } .ledger td.mid time { font-size: .72rem; color: var(--ink-3); margin-left: .6rem; } @media (max-width: 560px) { .ledger td.v { width: 6.2em; } } .duo { display: grid; grid-template-columns: 1fr; gap: 1.15rem; } @media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } } .iframe-wrap { display: flex; justify-content: center; } .iframe-wrap iframe { border: 0; max-width: 100%; } /* Meteoblue-Widget: optischer Crop. Der Ortsname/Kopf steckt im Fremd-iframe (cross-origin, per URL-Param nicht abschaltbar) — daher oben wegschneiden. ACHTUNG: Das Widget ist SELBST responsiv und rendert sein Layout je nach iframe-BREITE neu (breit = Tage in einer Reihe -> niedrig; schmal = Umbruch -> hoch). Ein fester Crop (px ODER aspect-ratio) geht deshalb nie über alle Breiten auf: Mac Leerraum, iPhone abgeschnitten. Lösung: iframe auf seine Design-Breite 520px FIXIEREN (Widget bricht nie um, Höhe konstant), dann das fertige Fixraster per transform:scale() auf die Container-Breite herunterskalieren. Der Crop wird damit an jeder Breite proportional korrekt. Referenz: voller Inhalt 490px, Kopf 90px, sichtbar 400. scale = Containerbreite/520 (cqw); translateY(-90) schneidet den Kopf weg (vor dem Skalieren, in ungeskalierten iframe-Koordinaten). */ .mb-crop { width: 100%; max-width: 520px; aspect-ratio: 520 / 400; /* sichtbar = voll(490) - Kopf(90) */ overflow: hidden; border-radius: 12px; container-type: inline-size; } /* aktiviert cqw = Containerbreite */ .mb-crop iframe { display: block; border: 0; width: 520px; height: 490px; /* fixe Design-Grösse -> kein Umbruch */ transform-origin: top left; transform: scale(calc(100cqw / 520)) translateY(-90px); } .graphs { display: grid; grid-template-columns: 1fr; gap: .8rem; } .graph { padding: .6rem; } .graph img { width: 100%; height: auto; display: block; border-radius: 12px; background: #fff; } .graph figcaption { font-size: .78rem; color: var(--ink-3); padding: .35rem .3rem 0; } /* Archiv-Seite */ .archcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.15rem; } ul.archlist { list-style: none; padding: 0; columns: 2; column-gap: 2rem; } ul.archlist li { padding: .2rem 0; break-inside: avoid; } footer { margin: 2rem 0 0; padding: 1.2rem 0 2rem; font-size: .82rem; color: var(--ink-3); } footer .wrap { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; } footer a { color: inherit; text-decoration: none; } footer a:hover { text-decoration: underline; } /* driveio-analoge Signatur: eigene, dezente Zeile am Fuss */ footer .sig { flex-basis: 100%; margin-top: .5rem; font-size: .72rem; opacity: .7; font-variant-numeric: tabular-nums; }