/* ============================================================ Wetterstation – Dashboard (Desktop / Laptop / Tablet) Dunkles, hochwertiges Glas-/Card-Design ============================================================ */ :root { --bg-0:#0a0f1a; --bg-1:#0f1623; --bg-grad: radial-gradient(1400px 900px at 75% -15%, #1c2f52 0%, var(--bg-1) 55%, var(--bg-0) 100%); --card: rgba(24, 34, 51, 0.62); --card-solid: #18222f; --card-2: rgba(28, 39, 56, 0.55); --line: rgba(120, 150, 190, 0.16); --line-strong: rgba(120, 150, 190, 0.30); --txt: #e9eff8; --txt-2: #aebbcf; --mut: #7f8da6; --acc: #4ea1ff; --acc-2: #7cc6ff; --ok: #36d399; --warn: #fbbd23; --danger: #f87272; --cold: #5ec8ff; --hot: #ff8a5c; --radius: 18px; --radius-s: 12px; --shadow: 0 10px 35px rgba(0,0,0,0.35); --shadow-s: 0 4px 16px rgba(0,0,0,0.25); --gap: 18px; --pad-x: 22px; --pad-top: 22px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Diagrammfarben (Theme-abhängig, von charts.js gelesen) */ --chart-grid: rgba(120,150,190,0.12); --chart-tick: #aebbcf; } /* ---------- Hell-Modus (umschaltbar/auto nach Tageszeit) ---------- */ [data-theme="light"] { --bg-0:#dde6f1; --bg-1:#eef3f9; --bg-grad: radial-gradient(1400px 900px at 75% -15%, #cfe0f5 0%, #e7eef7 55%, #dde6f1 100%); --card: rgba(255,255,255,0.80); --card-solid: #ffffff; --card-2: rgba(255,255,255,0.66); --line: rgba(40,70,110,0.16); --line-strong: rgba(40,70,110,0.28); --txt: #14233a; --txt-2: #41546e; --mut: #6b7a92; --shadow: 0 10px 30px rgba(40,70,110,0.16); --shadow-s: 0 4px 14px rgba(40,70,110,0.12); --chart-grid: rgba(40,70,110,0.14); --chart-tick: #41546e; } /* Im Hell-Modus die wetterabhängigen Dunkel-Hintergründe neutralisieren */ html[data-theme="light"] body { background: var(--bg-grad); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { height: 100%; } /* Dezent gestylte Scrollbars (Desktop) */ * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--mut); background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } body { margin: 0; font-family: var(--font); color: var(--txt); background: var(--bg-grad); background-attachment: fixed; -webkit-font-smoothing: antialiased; line-height: 1.45; min-height: 100vh; } /* Wetterabhängige Hintergrund-Akzente (per JS auf ) */ body[data-wx="rain"] { background: radial-gradient(1400px 900px at 75% -15%, #1b3147 0%, #0d1622 60%, var(--bg-0) 100%); } body[data-wx="thunder"] { background: radial-gradient(1400px 900px at 75% -15%, #2a2150 0%, #120f1f 60%, var(--bg-0) 100%); } body[data-wx="improving"], body[data-wx="stable"] { background: radial-gradient(1400px 900px at 75% -15%, #1e3a5c 0%, var(--bg-1) 55%, var(--bg-0) 100%); } body[data-wx="worsening"] { background: radial-gradient(1400px 900px at 75% -15%, #243349 0%, #0d1521 60%, var(--bg-0) 100%); } a { color: var(--acc); text-decoration: none; } a:hover { color: var(--acc-2); } /* ---------------- Layout ---------------- */ .app { max-width: 1480px; margin: 0 auto; padding: var(--pad-top) calc(var(--pad-x) + env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) calc(var(--pad-x) + env(safe-area-inset-left)); } .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: calc(var(--pad-top) * -1); margin-right: calc((var(--pad-x) + env(safe-area-inset-right)) * -1); margin-left: calc((var(--pad-x) + env(safe-area-inset-left)) * -1); margin-bottom: var(--gap); padding: 12px calc(var(--pad-x) + env(safe-area-inset-right)) 12px calc(var(--pad-x) + env(safe-area-inset-left)); padding-top: calc(12px + env(safe-area-inset-top)); /* Glasoptik: Lichtschimmer + transluzente Basis über starkem Weichzeichner */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)), rgba(16, 24, 40, 0.42); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 28px rgba(0, 0, 0, 0.28); } /* Glasoptik im Hell-Modus */ [data-theme="light"] .topbar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.40)), rgba(255, 255, 255, 0.30); border-bottom: 1px solid rgba(40, 70, 110, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 8px 26px rgba(40, 70, 110, 0.12); } .topbar .brand { display: flex; flex-direction: column; margin-right: auto; min-width: 0; } .topbar .brand h1 { font-size: clamp(18px, 2.4vw, 22px); margin: 0; font-weight: 700; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .brand .loc { color: var(--txt-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .clock { text-align: right; line-height: 1.1; } .clock .time { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; font-variant-numeric: tabular-nums; } .clock .date { color: var(--txt-2); font-size: 13px; } .status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 600; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mut); box-shadow: 0 0 0 0 rgba(54,211,153,.5); } .dot.online { background: var(--ok); animation: pulse 2.4s infinite; } .dot.offline { background: var(--danger); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(54,211,153,.45); } 70% { box-shadow: 0 0 0 8px rgba(54,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(54,211,153,0); } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; min-height: 40px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--txt); font-size: 14px; font-weight: 600; transition: border-color .15s ease, background .15s ease, transform .1s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } @media (hover: hover) { .btn:hover { border-color: var(--line-strong); background: var(--card-2); } } .btn:active { transform: scale(.96); background: var(--card-2); } .btn .bic { font-size: 16px; line-height: 1; } .btn.primary { background: var(--acc); color: #06121f; border-color: transparent; } /* Glas-Buttons in der Menüleiste */ .topbar .btn { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%); } .topbar .btn:active { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); } .topbar .btn:disabled { opacity: .5; cursor: default; } @media (hover: hover) { .topbar .btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.07)); border-color: rgba(255, 255, 255, 0.26); } } [data-theme="light"] .topbar .btn { background: linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.42)); border: 1px solid rgba(40, 70, 110, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80); } @media (hover: hover) { [data-theme="light"] .topbar .btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.64)); border-color: rgba(40, 70, 110, 0.26); } } /* ---------------- Cards ---------------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px; } .card h2 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--txt-2); text-transform: uppercase; letter-spacing: .8px; } /* ---------------- Grid ---------------- */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } /* Grid-Elemente dürfen unter ihre Inhaltsbreite schrumpfen – sonst sprengen breite Inhalte (z. B. das fix dimensionierte Chart.js-Canvas) das Raster und erzeugen horizontales Scrollen auf schmalen Geräten. */ .grid > *, .charts > *, .tiles > *, .records > * { min-width: 0; } .col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; } /* ---------------- Hero (aktuelles Wetter) ---------------- */ .hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; position: relative; overflow: hidden; min-height: 230px; } .hero .hero-main { display: flex; flex-direction: column; justify-content: center; } .hero .wx-icon { font-size: clamp(48px, 7vw, 64px); line-height: 1; margin-bottom: 6px; } .hero .temp-big { font-size: clamp(56px, 11vw, 88px); font-weight: 800; line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -2px; } .hero .temp-big .unit { font-size: .42em; font-weight: 600; color: var(--txt-2); vertical-align: super; } .hero .feels { color: var(--txt-2); font-size: 16px; margin-top: 4px; } .hero .tendency { margin-top: 12px; font-size: 20px; font-weight: 700; } .hero .wx-text { color: var(--txt-2); font-size: 15px; margin-top: 2px; } /* Innenwerte (Temperatur + Feuchte) direkt neben den Außenwerten */ .hero .indoor { display: inline-flex; align-items: baseline; gap: 8px; align-self: flex-start; margin-top: 12px; padding: 6px 13px; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; font-variant-numeric: tabular-nums; } .hero .indoor .ic { font-size: 16px; align-self: center; } .hero .indoor .iv { font-size: 18px; font-weight: 700; color: var(--txt); } .hero .indoor .iv .u { font-size: .65em; font-weight: 600; color: var(--txt-2); margin-left: 1px; } .hero .indoor .sep { color: var(--mut); } .hero .indoor .lbl { color: var(--txt-2); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-left: 2px; } .hero .hero-side { display: flex; flex-direction: column; justify-content: center; gap: 10px; border-left: 1px solid var(--line); padding-left: 20px; } .hero .mini { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; } .hero .mini .k { color: var(--txt-2); font-size: 14px; min-width: 0; } .hero .mini .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow-wrap: anywhere; } /* ---------------- Messwert-Kacheln ---------------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .tile { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 15px; position: relative; transition: transform .12s ease, border-color .2s ease; } @media (hover: hover) { .tile:hover { transform: translateY(-2px); border-color: var(--line-strong); } } .tile .tile-head { display: flex; align-items: center; gap: 7px; color: var(--txt-2); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; min-width: 0; overflow-wrap: anywhere; } .tile .tile-head .ic { font-size: 15px; flex: 0 0 auto; } .tile .tile-val { font-size: clamp(24px, 5vw, 30px); font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1; overflow-wrap: anywhere; } .tile .tile-val .u { font-size: 15px; font-weight: 600; color: var(--txt-2); margin-left: 3px; } .tile .tile-sub { color: var(--txt-2); font-size: 12.5px; margin-top: 5px; min-height: 16px; overflow-wrap: anywhere; } /* Wertänderungs-Hervorhebung */ .flash-up { animation: flashUp .9s ease; } .flash-down { animation: flashDown .9s ease; } @keyframes flashUp { 0% { color: var(--hot); } 100% { color: inherit; } } @keyframes flashDown { 0% { color: var(--cold); } 100% { color: inherit; } } /* Windrose */ /* ---------------- Windkompass & Druck-Tacho (Wunderground-Stil) ---------------- */ .tile-compass, .tile-gauge { display: flex; flex-direction: column; } .compass { position: relative; width: 100%; max-width: 158px; aspect-ratio: 1 / 1; margin: 6px auto 0; } .compass-svg { width: 100%; height: 100%; display: block; } .cmp-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.4; } .cmp-ticks line { stroke: var(--mut); stroke-width: 1; } .cmp-ticks line.major { stroke: var(--txt-2); stroke-width: 1.7; } .cmp-dir { fill: var(--txt-2); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; } .cmp-dir.cmp-n { fill: var(--danger); } .cmp-needle { transform-box: view-box; transform-origin: 50px 50px; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .cmp-arrow { fill: var(--danger); } .cmp-tail { fill: var(--mut); } .compass-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .cc-dir { font-size: clamp(18px,4.4vw,22px); font-weight: 800; color: var(--txt); line-height: 1; } .cc-deg { font-size: 12px; color: var(--txt-2); margin-top: 3px; font-variant-numeric: tabular-nums; } .gauge { position: relative; width: 100%; max-width: 170px; margin: 8px auto 0; } .gauge-svg { width: 100%; display: block; overflow: visible; } .g-bg { fill: none; stroke: var(--line); stroke-width: 6; stroke-linecap: round; } .g-fill { fill: none; stroke: var(--acc); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); } .g-ticks line { stroke: var(--mut); stroke-width: 1; } .g-needle { transform-box: view-box; transform-origin: 50px 54px; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .g-needle-line { stroke: var(--txt); stroke-width: 2.4; stroke-linecap: round; } .g-hub { fill: var(--txt-2); } .gauge-ends { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--mut); padding: 0 2px; margin-top: -4px; font-variant-numeric: tabular-nums; } .gauge-val { text-align: center; font-size: clamp(22px,5vw,28px); font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1; } .gauge-val .u { font-size: 14px; font-weight: 600; color: var(--txt-2); margin-left: 3px; } /* ---------------- Windfahne / Windsack (animiert, je nach Windstärke) ---------------- */ .tile-windsock { display: flex; flex-direction: column; } .windsock { width: 100%; max-width: 172px; margin: 2px auto 0; } .ws-svg { width: 100%; display: block; overflow: visible; } .ws-mast, .ws-base { stroke: var(--txt-2); stroke-width: 2.4; stroke-linecap: round; } .ws-knob { fill: var(--txt-2); } .ws-r { fill: #e23b3b; } .ws-w { fill: #f4f7fb; } .ws-r, .ws-w { stroke: rgba(20,30,50,.18); stroke-width: .5; stroke-linejoin: round; } .ws-mouth { fill: none; stroke: #b81f1f; stroke-width: 1.4; } .ws-lift { transform-box: view-box; transform-origin: 22px 26px; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .ws-wave { transform-box: view-box; transform-origin: 22px 26px; animation: wsWave var(--ws-dur, 2.6s) ease-in-out infinite; } @keyframes wsWave { 0%, 100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } } @media (prefers-reduced-motion: reduce) { .ws-wave { animation: none; } } /* ---------------- Diagramme ---------------- */ .charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .chart-card { min-height: 250px; } .chart-card .chart-wrap { position: relative; height: 220px; } .chart-card.tall .chart-wrap { height: 260px; } /* ---------------- Vorhersage ---------------- */ .forecast-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; } .fc-day { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 10px; text-align: center; } .fc-day .d { font-weight: 700; font-size: 14px; } .fc-day .ic { font-size: 34px; margin: 6px 0; } .fc-day .t { font-size: 16px; font-weight: 700; } .fc-day .t .min { color: var(--txt-2); font-weight: 600; } .fc-day .meta { color: var(--txt-2); font-size: 12px; margin-top: 6px; } .fc-source { color: var(--mut); font-size: 12px; margin-top: 10px; } .hourly { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .hourly .h { flex: 0 0 auto; text-align: center; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 72px; scroll-snap-align: start; } .hourly .h .hh { font-size: 12px; color: var(--txt-2); } .hourly .h .ic { font-size: 22px; margin: 3px 0; } .hourly .h .tt { font-weight: 700; } .hourly .h .pp { font-size: 11px; color: var(--cold); } /* ---------------- Rekorde ---------------- */ .records { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; } .rec { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; min-width: 0; } .rec .k { color: var(--txt-2); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; overflow-wrap: anywhere; } .rec .v { font-size: 22px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* ---------------- Analyse ---------------- */ .analysis-list { list-style: none; margin: 0; padding: 0; } .analysis-list li { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; } .analysis-list li:last-child { border-bottom: none; } .analysis-list li::before { content: "›"; color: var(--acc); font-weight: 800; } /* ---------------- Warnungen ---------------- */ .warnings { display: flex; flex-direction: column; gap: 10px; } .warn-item { display: flex; gap: 12px; align-items: center; border-radius: var(--radius-s); padding: 12px 14px; border: 1px solid var(--line); } .warn-item .wic { font-size: 22px; } .warn-item .wt { font-weight: 700; } .warn-item .wd { color: var(--txt-2); font-size: 13px; } .warn-item.info { background: rgba(78,161,255,.10); border-color: rgba(78,161,255,.4); } .warn-item.warn { background: rgba(251,189,35,.10); border-color: rgba(251,189,35,.45); } .warn-item.danger { background: rgba(248,114,114,.12); border-color: rgba(248,114,114,.5); } .warnings.empty::after { content: "Keine aktiven Warnungen."; color: var(--mut); font-size: 14px; } /* ---------------- Banner / States ---------------- */ .banner { display: none; align-items: center; gap: 10px; background: rgba(248,114,114,.12); border: 1px solid var(--danger); color: #ffd9d9; padding: 11px 16px; border-radius: 12px; margin-bottom: var(--gap); } .banner.show { display: flex; } .banner.warn { background: rgba(251,189,35,.12); border-color: var(--warn); color: #ffe9b3; } .empty-state { text-align: center; padding: 60px 20px; color: var(--txt-2); } .empty-state .big { font-size: 48px; margin-bottom: 12px; } .skeleton { color: transparent !important; position: relative; overflow: hidden; border-radius: 6px; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.12), rgba(255,255,255,.04)); animation: shimmer 1.3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .updated-hint { color: var(--mut); font-size: 12px; } /* ---------------- Footer ---------------- */ .footer { margin-top: 26px; color: var(--mut); font-size: 12.5px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } /* ============================================================ Responsive Breakpoints ============================================================ */ @media (max-width: 1199px) { /* Laptop */ .col-8 { grid-column: span 7; } .col-4 { grid-column: span 5; } } /* --- Tablet (Quer- & Hochformat): 2-Spalten-Raster --------------------- Wichtig: ALLE Spaltenklassen werden hier neu gesetzt – inkl. .col-12. Sonst sprengt ein "span 12"-Element das schmalere Raster (implizite Spalten) und das gesamte Layout kollabiert. */ @media (max-width: 1023px) { :root { --pad-x: 18px; --pad-top: 18px; } .grid { grid-template-columns: repeat(2, 1fr); } .col-12, .col-8, .col-4 { grid-column: span 2; } /* volle Breite */ .col-6, .col-3 { grid-column: span 1; } /* halbe Breite (z. B. Rekorde · Analyse) */ .charts { grid-template-columns: repeat(2, 1fr); } .hero { grid-template-columns: 1fr; min-height: 0; } .hero .hero-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; } } /* --- Mobile / kleines Tablet hochkant: alles einspaltig -------------- */ @media (max-width: 767px) { :root { --pad-x: 14px; --pad-top: 14px; } .grid { grid-template-columns: 1fr; } .col-12, .col-8, .col-6, .col-4, .col-3 { grid-column: 1 / -1; } .charts { grid-template-columns: 1fr; gap: 14px; } /* Kopfzeile: ruhiges Raster statt chaotischem Umbruch. Auf Mobile nicht klebend, damit kein Bildschirmplatz verloren geht. */ .topbar { position: static; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "brand clock" "status status" "actions actions"; gap: 10px 12px; align-items: start; } .topbar .brand { grid-area: brand; align-self: center; } .topbar .clock { grid-area: clock; text-align: right; min-width: 0; } .topbar .clock .time { white-space: nowrap; } .topbar-status { grid-area: status; } .topbar-actions { grid-area: actions; justify-content: flex-start; flex-wrap: wrap; } /* Buttons nur als Icon -> mehr Platz, größere Tap-Fläche */ .btn { padding: 9px 12px; min-width: 46px; } .btn .blbl { display: none; } .btn .bic { font-size: 18px; } .hero .hero-side { gap: 8px; } .chart-card { min-height: 0; } .chart-card .chart-wrap { height: clamp(170px, 52vw, 230px); } .footer { justify-content: center; text-align: center; } } @media (max-width: 599px) { /* Mobile */ .card { padding: 14px; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tile { padding: 12px; } .records { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero .mini .v { font-size: 18px; } } @media (max-width: 380px) { /* sehr schmale Geräte: Aktionen mittig */ .topbar-actions { justify-content: center; } .tiles { gap: 8px; } } /* Bewegung reduzieren, wenn vom System gewünscht */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .dot.online { animation: none !important; } } /* ============================================================ Sonne & Mond (Hero-Fußzeile) ============================================================ */ .hero-astro { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .hero-astro .ha { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--txt-2); white-space: nowrap; } .hero-astro .ha .ic { font-size: 16px; } /* ============================================================ Interaktiver Verlauf (Zeitraum × Messgröße) ============================================================ */ .history-card .hist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .history-card .hist-head h2 { margin: 0; } .seg { display: inline-flex; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; } .seg-btn { border: 0; background: transparent; color: var(--txt-2); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; } .seg-btn.active { background: var(--acc); color: #fff; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .chip { border: 1px solid var(--line); background: var(--card-2); color: var(--txt-2); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .chip.active { border-color: var(--acc); color: var(--txt); background: rgba(78,161,255,0.16); } @media (hover: hover) { .seg-btn:hover, .chip:hover { color: var(--txt); } } .chart-wrap-lg { height: 360px; } .hist-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .charts-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } @media (max-width: 767px) { .charts-2 { grid-template-columns: 1fr; } .chart-wrap-lg { height: 300px; } .hero-astro { gap: 12px; font-size: 13px; } } /* ============================================================ Archiv (archiv.php) ============================================================ */ .arch-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .arch-input { background: var(--card); border: 1px solid var(--line); color: var(--txt); font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; color-scheme: dark; } [data-theme="light"] .arch-input { color-scheme: light; } .arch-bar .btn { padding: 9px 13px; }