/* BENSA Wetter – öffentliche Landingpage (Premium-Redesign). Farb-Tokens bewusst identisch zu
   pwa/css/app.css / admin/index.html gehalten (gleiche Werte, bereits als WCAG-AA-konform
   getestet, siehe tests/run-ui-static-checks-tests.js), damit Landingpage/PWA/Admin optisch
   zusammengehören und kein neuer, ungeprüfter Kontrast entsteht. --accent2 spiegelt bewusst
   exakt --link-visited-color (in diesem File bereits als Textfarbe im Einsatz und damit
   implizit kontrastgeprüft) statt einen neuen, ungeprüften Farbwert einzuführen. */
:root {
  --bg: #0f1420;
  --panel: #1a2130;
  --panel2: #212a3d;
  --text: #e8ecf4;
  --muted: #93a0b8;
  --accent: #4da3ff;
  --accent2: #b4c6ff;
  --link-color: #8cc8ff;
  --link-hover-color: #b7dcff;
  --link-visited-color: #b4c6ff;
  --link-active-color: #e0f1ff;
  --border: #2c3850;
  --glow-a: rgba(77, 163, 255, .22);
  --glow-b: rgba(140, 120, 255, .16);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 28px -14px rgba(0, 0, 0, .55);
  --shadow-cta: 0 10px 26px -10px rgba(77, 163, 255, .55);
  /* Branding-Paket-Palette (public/assets/landing/branding/brand-colors.json) - ausschliesslich
     fuer DEKORATIVE Zwecke (Icon-Strichfarbe/Icon-Badge-Hintergrund, grosse Gradient-Ueberschrift,
     duenne Card-Border-Akzente) verwendet, NIE als Fliesstextfarbe: Kontrastmessung ergab fuer
     mehrere dieser Toene (u. a. Violett, reines Markenblau) auf --bg nur 4.3:1-5:1 - ausreichend
     fuer grosse Ueberschriften/Icons (>=3:1-Schwelle), nicht verlaesslich fuer kleinen Fliesstext
     (>=4.5:1). Fliesstext bleibt daher immer bei --text/--muted. */
  --brand-blue: #3B82F6;
  --brand-violet: #885CF6;
  --brand-cyan: #06B6D4;
  --brand-emerald: #10B981;
  --brand-amber: #F59E0B;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f5fa; --panel: #ffffff; --panel2: #eef2f8;
    --text: #1c2536; --muted: #5b6b85; --border: #d7dfeb;
    --link-color: #1d4ed8; --link-hover-color: #1e40af; --link-visited-color: #5b21b6; --link-active-color: #1e3a8a;
    --accent2: #5b21b6;
    --glow-a: rgba(29, 78, 216, .10); --glow-b: rgba(91, 33, 182, .08);
    --shadow-card: 0 1px 2px rgba(30, 41, 59, .06), 0 14px 28px -16px rgba(30, 41, 59, .18);
    --shadow-cta: 0 10px 24px -10px rgba(29, 78, 216, .35);
    /* Etwas gedaempfte Markenfarben fuer helles Layout (dieselben Toene wirken auf weissem
       Untergrund deutlich greller) - Rolle/Zuordnung je Feature bleibt identisch. */
    --brand-blue: #1d4ed8; --brand-violet: #6d28d9; --brand-cyan: #0891b2; --brand-emerald: #047857; --brand-amber: #b45309;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, sans-serif;
  min-height: 100vh; line-height: 1.5;
}
a { color: var(--link-color); text-decoration: underline; text-underline-offset: .16em; }
a:visited { color: var(--link-visited-color); }
a:hover, a:focus-visible { color: var(--link-hover-color); text-decoration-thickness: .12em; }
a:active { color: var(--link-active-color); }
img, svg { max-width: 100%; height: auto; }

/* Desktop-Layout - zentrale Inhaltsbreite bis ca. 1280px (80rem), damit breite Displays (1920px,
   1440px) mehr horizontale Flaeche nutzen. Einzelne Textelemente (Tagline) bleiben trotzdem auf
   eine lesbare Zeilenlaenge begrenzt - nur die Container/Grids selbst werden breiter. */
:root { --content-max-width: 80rem; }

/* ── Schlanke Kopfzeile: Marke + Ankernavigation + CTA. Rein statisch (kein Burger-Menu/JS),
   damit weiterhin genau ein <script>-Block auf der Seite bleibt (siehe Tests, die den Skriptinhalt
   per Regex extrahieren). Auf schmalen Breiten faellt die Nav weg, CTA und Marke bleiben. ── */
/* Bewusst OHNE backdrop-filter (teure, mit position:sticky bei jedem Scroll-Frame neu zu
   berechnende Kombination) - ein einfacher deckender Hintergrund wirkt ebenso hochwertig, ohne
   das Scroll-Rendering zu belasten. */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--content-max-width); margin: 0 auto; padding: .8rem 1.2rem;
  display: flex; align-items: center; gap: 1.2rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem;
  color: var(--text); text-decoration: none;
}
.brand:visited { color: var(--text); }
.brand-icon { width: 1.75rem; height: 1.75rem; border-radius: 6px; }
.topbar-nav { display: flex; gap: 1.3rem; margin: 0 auto; }
.topbar-nav a { color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 600; }
.topbar-nav a:hover, .topbar-nav a:focus-visible { color: var(--text); }
.topbar-cta {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--accent); color: #fff;
  text-decoration: none; font-weight: 700; font-size: .88rem; padding: .5rem .95rem; border-radius: 8px;
  white-space: nowrap; flex: 0 0 auto;
}
.topbar-cta:visited { color: #fff; }
.topbar-cta:hover, .topbar-cta:focus-visible { filter: brightness(1.08); }
@media (max-width: 700px) { .topbar-nav { display: none; } }

/* ── Hero ── */
.hero {
  position: relative; padding: 3.4rem 1.2rem 2rem; text-align: center;
  max-width: var(--content-max-width); margin: 0 auto; overflow: hidden;
}
/* Atmosphaerisches Hero-Hintergrundbild (branding/assets/backgrounds/hero_storm_dark.webp, nur
   240x222px Quellaufloesung - siehe manifest.json) plus mehrschichtiges Overlay: ein radialer
   "Spotlight"-Verlauf haelt die Bildmitte etwas praesenter, ein linearer Verlauf von unten nach
   oben sichert durchgaengig genug Kontrast fuer den Text, eine Vignette an den Raendern kaschiert
   die niedrige Quellaufloesung. object-fit:cover + leichtes CSS-Weichzeichnen verhindert sichtbare
   Kompressionsartefakte beim Hochskalieren auf Hero-Breite, ohne dass ein teures blur() auf einer
   grossen Flaeche noetig waere (das Bild selbst ist bereits klein genug, dass der Browser es beim
   Skalieren automatisch weich interpoliert). */
.hero-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  opacity: .92; filter: saturate(1.15) brightness(1.08);
}
/* Anforderung "Hintergrund soll sichtbar bleiben, nicht durch Overlay verschwinden": das
   Vorschau-Fenster selbst traegt eine eigene opake Panel-Flaeche (--panel), sein Textinhalt ist
   dadurch UNABHAENGIG von der Hero-Hintergrundhelligkeit lesbar - die Verlaufsstufen hier duerfen
   das Foto daher grosszuegiger durchscheinen lassen als bei einem Hero ohne eigenes Panel
   darunter. Nur ganz unten (Uebergang zu main/Standortsuche) wird vollstaendig auf --bg geschlossen. */
.hero-bg-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(65% 60% at 50% 6%, var(--glow-a), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 8%, transparent) 0%, color-mix(in srgb, var(--bg) 38%, transparent) 30%, color-mix(in srgb, var(--bg) 62%, transparent) 55%, var(--bg) 92%, var(--bg) 100%),
    radial-gradient(135% 95% at 50% 40%, transparent 38%, var(--bg) 97%);
}
@media (prefers-color-scheme: light) {
  .hero-bg img { opacity: .26; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 1.1rem; padding: .4rem .9rem;
  border-radius: 999px; background: var(--panel2); border: 1px solid var(--border);
  color: var(--muted); font-size: .82rem; font-weight: 600; letter-spacing: .01em;
}
.eyebrow span { color: var(--accent); }

.hero h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height: 1.18; font-weight: 800;
  margin: 0 0 .9rem; letter-spacing: -.01em;
}
.hero h1 .accent-text {
  display: block; background: linear-gradient(92deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: var(--accent);
  -webkit-text-fill-color: transparent;
}
.hero p.tagline { color: var(--muted); font-size: 1.05rem; margin: 0 auto 1.6rem; max-width: 42rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-bottom: 1.3rem; }
.cta-primary, .cta-secondary {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-weight: 700; font-size: 1rem; padding: .85rem 1.5rem; border-radius: 10px; white-space: nowrap;
  font-family: inherit; cursor: pointer; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.cta-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent2)));
  color: #fff; box-shadow: var(--shadow-cta); border: 1px solid transparent;
}
.cta-primary:hover, .cta-primary:focus-visible { filter: brightness(1.08); transform: translateY(-1px); outline: 2px solid var(--accent); outline-offset: 2px; }
.cta-primary:visited { color: #fff; }
.cta-secondary { background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
.cta-secondary:visited { color: var(--text); }
.cta-secondary:hover, .cta-secondary:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .cta-primary, .cta-secondary { transition: none; } }

.trust-pills {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem;
  margin: 0 0 1.6rem; padding: 0; color: var(--muted); font-size: .88rem; font-weight: 600;
}
.trust-pills li { display: inline-flex; align-items: center; gap: .4rem; }

/* ── Hero-Vorschau: echtes HTML/CSS/SVG-Mockup der BENSA-Wetter-Oberflaeche (statische
   Beispieldaten fuer Braunschweig, klar als "Beispielansicht" beschriftet - siehe
   .preview-window-title/.preview-caption) statt eines Screenshots. Liegt VOR dem echten,
   funktionalen Standort-Widget weiter unten - beide sind eindeutig unterscheidbar (Fensterleiste +
   Bildunterschrift markieren die Vorschau als Beispiel, nicht als Live-Daten). Orientiert sich an
   references/final_braunschweig_dashboard_mockup.png, aber als echtes, responsives Markup statt
   eines rasterisierten Screenshots. ── */
/* Breite (Anforderung "1050-1200px auf 1280/1440/1920"): 74rem = 1184px, begrenzt zusaetzlich
   durch die Hero-Innenbreite (--content-max-width abzueglich Hero-Padding) auf kleineren
   Desktop-/Tablet-Fenstern - kein fixes 1184px, das ueberliefe. */
.hero-preview { max-width: 74rem; margin: 0 auto 1.6rem; }
.preview-window {
  background: var(--panel); border: 1px solid var(--border); border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow-card); text-align: left;
}
.preview-window-bar {
  display: flex; align-items: center; gap: .5rem; padding: .8rem 1.3rem; background: var(--panel2);
  border-bottom: 1px solid var(--border);
}
.preview-brand-icon { border-radius: 6px; flex: 0 0 auto; }
.preview-brand-name { font-weight: 700; font-size: .92rem; }
/* "Beispielansicht"-Badge (Ticket "wirkt wie Debug-/Entwicklerlabel"): vorher reiner
   Klartext in --muted - erfuellte seinen Zweck (klar erkennbar: keine Live-Daten), wirkte aber
   flach/technisch statt zum Premium-Dark-UI zu passen. Jetzt eine "Dark Glass Pill": dezenter
   Akzent-Farbverlauf als Hintergrund, duenne akzentfarbene Kontur, weicher Glow, Blur - der
   TEXT selbst bleibt bewusst bei --muted (nicht --accent/--brand-cyan): dieselbe, bereits an
   anderer Stelle in dieser Datei dokumentierte Kontrast-Policy (siehe Kommentar bei den
   --brand-*-Tokens oben) gilt auch hier - Akzentfarben sind fuer Fliesstext dieser Groesse nicht
   zuverlaessig AA-konform, nur der Rahmen/Glow/das Sparkle-Icon tragen die Akzentfarbe. Das
   Badge tritt dadurch bewusst hinter Temperatur/Wetterzustand/Warnhinweis zurueck, bleibt aber
   klar als Hinweis erkennbar. */
.preview-window-title {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .7rem .32rem .6rem; border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--brand-cyan) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
}
.preview-window-title::before { content: "✦"; color: var(--accent); font-size: .85em; line-height: 1; }
.preview-window-body { padding: 1.7rem 1.8rem 1.9rem; }
.preview-icon-sm { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; vertical-align: -.2rem; }

/* Kopfbereich: Ort/Temperatur links, Wettervisual mittig, Statuszeilen rechts - bricht ab 700px auf
   gestapelte Bloecke um (Anforderung: keine ueberlappenden Karten, kein Umbruch mitten im Wert).
   Temperatur/Visual deutlich groesser (Anforderung "mehr Premium Weather App, weniger
   Dashboard-Tabelle"). */
.preview-top-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.6rem; align-items: center; margin: 0 0 1.5rem; }
.preview-location { display: flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--muted); margin: 0 0 .5rem; font-weight: 600; }
.preview-postal { color: var(--muted); font-weight: 500; }
.preview-temp { font-size: clamp(2.8rem, 2.1rem + 2.4vw, 4.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.03; white-space: nowrap; }
.preview-condition { font-size: 1.1rem; font-weight: 600; margin: .4rem 0 .2rem; }
.preview-sub { font-size: .9rem; color: var(--muted); margin: 0; white-space: nowrap; }
/* Anforderung: 130-190px Zielbereich auf Desktop (8.5rem=136px), object-fit:contain statt
   Zuschnitt, kein border-radius (die Grafiken selbst sind bereits als runde Illustration mit
   transparentem Rand angelegt - ein zusaetzlicher CSS-Kreis wuerde nur eine hart abgeschnittene
   zweite Kontur erzeugen). */
.preview-weather-visual { width: 8.5rem; height: 8.5rem; }
.preview-weather-visual img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.preview-top-side { font-size: .88rem; color: var(--muted); text-align: right; }
.preview-top-side p { margin: 0 0 .55rem; line-height: 1.5; }
.preview-updated { display: flex; align-items: center; gap: .35rem; justify-content: flex-end; color: var(--brand-emerald); font-weight: 600; }
.preview-dot-live { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand-emerald); flex: 0 0 auto; }
.preview-warn-line { display: flex; align-items: center; gap: .35rem; justify-content: flex-end; color: var(--brand-amber); font-weight: 600; }

.preview-badge-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.4rem; }
.preview-badge {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--border); font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.preview-badge b { color: var(--text); font-weight: 700; }
.preview-badge-emerald { background: color-mix(in srgb, var(--brand-emerald) 14%, var(--panel2)); border-color: color-mix(in srgb, var(--brand-emerald) 32%, var(--border)); color: var(--brand-emerald); }
.preview-badge-emerald b { color: var(--brand-emerald); }

/* Metrik-Kacheln: auf Desktop zwingend EINE Reihe zu fuenft (kein auto-fit-Umbruch mehr, der
   z. B. "Luftfeuchte" in eine zweite Reihe schob) - Wert+Einheit stehen als EIN nowrap-Block. */
.preview-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.4rem; }
.preview-metric {
  display: flex; flex-direction: column; gap: .25rem; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 16px; padding: .7rem .8rem; color: var(--brand-blue);
}
.preview-metric-label { font-size: .68rem; color: var(--muted); font-weight: 600; }
.preview-metric-value { font-size: 1rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.preview-metric-note { font-size: .68rem; color: var(--muted); }

.preview-hourly-title { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.preview-hours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.preview-hour {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .72rem; color: var(--muted);
  background: var(--panel2); border-radius: 14px; padding: .7rem .2rem;
}
/* Anforderung: 38-58px Zielbereich fuer Stundenicons (3rem=48px). */
.preview-hour img { width: 3rem; height: 3rem; object-fit: contain; object-position: center; display: block; }
.preview-hour b { color: var(--text); font-size: .84rem; white-space: nowrap; }
.preview-hour em { font-style: normal; color: var(--brand-blue); font-size: .68rem; white-space: nowrap; }
/* Mobile-first: nur 5 Stunden im DOM sichtbar (Grid hat 5 Spalten) - die Spaltenzahl UND die
   sichtbare Item-Anzahl muessen im Gleichschritt wachsen, sonst wuerden ueberzaehlige Items in
   eine zweite Zeile umbrechen statt sauber zu verschwinden (siehe .preview-hours Breakpoints
   unten, dieselben min-width-Schwellen). */
.preview-hour-hidden-sm, .preview-hour-hidden-md { display: none; }

.preview-footer-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem;
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--border);
}
.preview-footer-row div { display: flex; flex-direction: column; gap: .3rem; font-size: .76rem; color: var(--muted); }
.preview-footer-row div > svg:first-child { margin-bottom: -.1rem; }
.preview-footer-row b { color: var(--text); font-size: .88rem; font-weight: 700; white-space: nowrap; }

.preview-caption { font-size: .78rem; color: var(--muted); text-align: center; margin: .8rem 0 0; }

/* Metrik-Grid: ab 560px zu dritt (Tablet-Zwischenschritt), ab 900px zwingend ALLE FUENF in einer
   Reihe (Desktop-Kernanforderung METRIC_CARDS_DESKTOP_SINGLE_ROW). Stundenreihe: 5 Spalten als
   mobiler Standard, waechst mit der Breite auf 7 dann 9 (Desktop-Kernanforderung
   HOURLY_FORECAST_DESKTOP_SINGLE_ROW). */
@media (min-width: 560px) {
  .preview-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .preview-metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .preview-hours { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .preview-hour-hidden-sm { display: flex; }
}
@media (min-width: 860px) {
  .preview-hours { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .preview-hour-hidden-md { display: flex; }
}
@media (max-width: 700px) {
  .preview-top-row { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .preview-top-side { text-align: center; }
  .preview-updated, .preview-warn-line { justify-content: center; }
  .preview-weather-visual { width: 7rem; height: 7rem; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.location-picker { max-width: 34rem; margin: 1.4rem auto 0; text-align: left; }
.location-picker-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; justify-content: center; }
.location-picker-row #useGpsBtn { flex: 0 0 auto; }
.location-search-form { display: flex; gap: .5rem; flex: 1 1 16rem; min-width: 0; }
.location-search-form input[type="text"] {
  flex: 1 1 auto; min-width: 0; height: 2.75rem; box-sizing: border-box; padding: .6rem .8rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); font-size: .95rem; font-family: inherit;
}
.location-search-form input[type="search"] {
  flex: 1 1 auto; min-width: 0; height: 2.75rem; box-sizing: border-box; padding: .6rem .8rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); font-size: .95rem; font-family: inherit;
}
.location-search-form button { flex: 0 0 auto; padding: .6rem 1rem; font-size: .9rem; }
@media (max-width: 480px) {
  .location-picker-row { flex-direction: column; align-items: stretch; }
  .location-search-form { flex-direction: column; }
  .location-search-form input[type="text"],
  .location-search-form input[type="search"] { flex: 0 0 2.75rem; }
}
.location-status { font-size: .88rem; color: var(--muted); margin: .7rem 0 0; text-align: center; }
.location-results {
  list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem;
}
.location-result-card { width: 100%; min-height: 3.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; padding: .7rem .85rem; font-size: .95rem; cursor: pointer; }
.location-result-card strong { font-size: 1rem; }
.location-result-card span { color: var(--muted); font-size: .85rem; }
.location-result-card:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; }

/* Oeffentlicher Wetter-Hauptblock + Warnlage: auf Desktop zwei Spalten (Wetterblock breiter,
   Warnlage als Seitenpanel), ab 900px Breite - darunter (Tablet schmal/Mobile) sauber gestapelt. */
.weather-panels {
  max-width: var(--content-max-width); margin: 1.8rem auto 0; text-align: left;
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 900px) {
  .weather-panels { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
.weather-block, .warnings-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-card);
}
.weather-block h2, .warnings-panel h2 { font-size: .85rem; margin: 0 0 .7rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.weather-summary { font-size: 1.2rem; font-weight: 600; margin: 0 0 .9rem; }
.weather-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin: 0 0 .9rem;
}
.weather-stat { margin: 0; }
.weather-stat dt { font-size: .78rem; color: var(--muted); margin: 0 0 .2rem; }
.weather-stat dd { font-size: 1.1rem; margin: 0; font-weight: 700; }
.weather-observation, .weather-consensus { font-size: .9rem; color: var(--muted); margin: 0 0 .4rem; }
.snapshot-meta { font-size: .82rem; color: var(--muted); margin: 0; }
.warnings-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.warnings-list li { font-size: .9rem; font-weight: 600; color: var(--warn, #f5b942); }
#warningsContent { font-size: .9rem; color: var(--muted); }

/* Initial-Refresh-Ladeanzeige: indeterminierter Ladebalken (kein erfundener Prozentwert) + echte
   Statusschritte, die nur als erledigt markiert werden, wenn die Anwendung dafuer tatsaechliche
   Evidenz besitzt (siehe loadSnapshotFor() renderProgressSteps()). */
.progress-steps { margin: 0 0 .9rem; }
.progress-bar {
  height: .35rem; border-radius: 999px; background: var(--panel2); overflow: hidden; margin: 0 0 .7rem;
}
.progress-bar-fill {
  height: 100%; width: 40%; border-radius: 999px; background: var(--accent);
  animation: progress-indeterminate 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .progress-bar-fill { animation: none; width: 100%; } }
@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.progress-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.progress-step { font-size: .85rem; color: var(--muted); padding-left: 1.4rem; position: relative; }
.progress-step::before {
  content: "○"; position: absolute; left: 0; top: 0; color: var(--muted);
}
.progress-step.done { color: var(--text); }
.progress-step.done::before { content: "✓"; color: var(--accent); }
.progress-complete {
  margin: .6rem 0 0; font-size: .9rem; font-weight: 600; color: var(--accent);
}
.progress-steps.collapsing { animation: progress-steps-fade .5s ease forwards; }
@keyframes progress-steps-fade { to { opacity: 0; max-height: 0; margin: 0; overflow: hidden; } }
@media (prefers-reduced-motion: reduce) { .progress-steps.collapsing { animation: none; } }

main { max-width: var(--content-max-width); margin: 0 auto; padding: 0 1.2rem 3rem; }
section.feature-section { margin: 4.2rem 0; scroll-margin-top: 5.5rem; }
.section-eyebrow {
  margin: 0 0 .35rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
}
section.feature-section h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); margin: 0 0 1.3rem; font-weight: 800; letter-spacing: -.01em; }
/* Feste 1/2/3-Spalten-Stufen statt repeat(auto-fit, minmax(...)) (Ticket "6 Kacheln unschoen
   verteilt"): auto-fit erzeugte je nach Containerbreite eine wechselnde Spaltenzahl (z. B. 4 oder
   5 Spalten bei den ueblichen Desktop-Breiten), wodurch die genau 6 vorhandenen Karten/Chips
   unausgewogen umbrachen (5 oben + 1 unten bzw. 4 oben + 2 unten) statt eines sauberen 3x2-Rasters.
   Dieselben Stufen/Breakpoints wie .badge-grid (Abschnitt "Warum BENSA Wetter?" weiter unten) -
   beide 6er-Bereiche verhalten sich dadurch bewusst konsistent: Mobile 1 Spalte, Tablet 2, Desktop
   3 Spalten x 2 Reihen. Gleiche Kartenhoehe je Reihe ergibt sich automatisch aus dem CSS-Grid-
   Standardverhalten (align-items:stretch), keine zusaetzliche Regel noetig. */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem 1.3rem;
  box-shadow: var(--shadow-card); transition: transform .18s ease, border-color .18s ease;
}
.feature-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
@media (prefers-reduced-motion: reduce) { .feature-card { transition: none; } .feature-card:hover { transform: none; } }
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
  border-radius: 10px; margin: 0 0 .8rem;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel2)); color: var(--accent);
}
.feature-icon svg { width: 1.4rem; height: 1.4rem; }
/* Je Feature eine eigene Markenfarbe (Icon-Strichfarbe + passend eingefaerbter Badge-Hintergrund) -
   rein dekorativ (siehe Kontrast-Hinweis bei den --brand-*-Tokens oben), macht die Kartenreihe
   aber auf einen Blick unterscheidbar statt einheitlich blau. */
.feature-icon-blue { background: color-mix(in srgb, var(--brand-blue) 16%, var(--panel2)); color: var(--brand-blue); }
.feature-icon-violet { background: color-mix(in srgb, var(--brand-violet) 16%, var(--panel2)); color: var(--brand-violet); }
.feature-icon-amber { background: color-mix(in srgb, var(--brand-amber) 16%, var(--panel2)); color: var(--brand-amber); }
.feature-icon-cyan { background: color-mix(in srgb, var(--brand-cyan) 16%, var(--panel2)); color: var(--brand-cyan); }
.feature-icon-emerald { background: color-mix(in srgb, var(--brand-emerald) 16%, var(--panel2)); color: var(--brand-emerald); }
.feature-card h3 { font-size: 1.02rem; margin: 0 0 .45rem; font-weight: 700; }
.feature-card p { font-size: .9rem; color: var(--muted); margin: 0; line-height: 1.55; }

/* ── Warum-BENSA-Trust-Sektion: Badge-Chips im Stil von branding/assets/badges/ (dunkles Chip,
   Icon, kurzer Aussagesatz) - Text bleibt bewusst bei --text auf --panel2, nur der Rand/Icon-Punkt
   traegt Markenfarbe, damit der Kontrast unabhaengig von der gewaehlten Akzentfarbe immer sicher
   AA-konform bleibt. ── */
.trust-section .lead { color: var(--muted); margin: 0 0 1.3rem; font-size: .95rem; }
/* Dieselben 1/2/3-Spalten-Stufen wie .feature-grid oben (Ticket "6 Kacheln unschoen verteilt" +
   Konsistenz-Anforderung "beide 6er-Bereiche auf Desktop einheitlich 3x2") statt eines eigenen,
   leicht abweichenden repeat(auto-fit, minmax(15rem,...)), das bei typischen Desktop-Breiten 4
   statt 3 Spalten ergab (4 oben + 2 unten). */
.badge-grid {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: 1fr; gap: .8rem;
}
@media (min-width: 640px) { .badge-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .badge-grid { grid-template-columns: repeat(3, 1fr); } }
.badge-chip {
  display: flex; align-items: center; gap: .7rem; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 12px; padding: .85rem 1rem; font-size: .88rem; font-weight: 600; color: var(--text);
}
.badge-chip-icon {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; font-size: .95rem;
  background: color-mix(in srgb, var(--brand-emerald) 20%, var(--panel)); color: var(--brand-emerald);
}

/* ── Radar-/Nowcast-Vorschau: statisches Beispielbild, ausdruecklich mit "Beispiel"-Badge markiert
   (Anforderung: keine falsche Live-Daten-Behauptung). ── */
.radar-preview { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: center; }
@media (min-width: 800px) { .radar-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.radar-preview-image {
  position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-card); max-width: 18rem; margin: 0 auto;
}
.radar-preview-image img { display: block; width: 100%; height: auto; }
.radar-preview-badge {
  position: absolute; top: .7rem; right: .7rem; background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid var(--border); color: var(--text); font-size: .72rem; font-weight: 700;
  padding: .3rem .6rem; border-radius: 999px; backdrop-filter: none;
}
/* Ersetzt die frueher in die Rastergrafik eingebrannte Titelzeile "RADAR PREVIEW (PNG)" - echter,
   barrierefreier HTML-Text statt Pixel, spiegelbildlich zum "Beispiel"-Badge oben rechts positioniert. */
.radar-preview-title {
  position: absolute; top: .7rem; left: .7rem; background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid var(--border); color: var(--text); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px;
}
.radar-preview-text p { color: var(--muted); font-size: .93rem; line-height: 1.65; margin: 0 0 1rem; }

/* ── Abschlussbereich mit Aurora-Hintergrund (branding/assets/backgrounds/hero_aurora.webp) - exakt
   dieselbe Overlay-Technik wie beim Hero, damit beide Bildbereiche stilistisch zusammengehoeren. ── */
.cta-band {
  position: relative; margin: 4.2rem 0 0; padding: 3.2rem 1.5rem; border-radius: 20px; overflow: hidden;
  text-align: center; border: 1px solid var(--border);
}
.cta-band-bg { position: absolute; inset: 0; z-index: -1; }
.cta-band-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.cta-band-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 50% 30%, var(--glow-b), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 45%, var(--bg) 100%);
}
@media (prefers-color-scheme: light) { .cta-band-bg img { opacity: .18; } }
.cta-band-content h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem); margin: 0 0 1.3rem; font-weight: 800; }
.cta-band .cta-row { margin-bottom: 0; }

.apps-section {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 2rem 1.8rem;
  box-shadow: var(--shadow-card);
}
.apps-section h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); margin: 0 0 .4rem; }
.apps-section p.lead { color: var(--muted); margin: 0 0 1.4rem; font-size: .95rem; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.1rem; }
.apps-grid > div { background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem 1.2rem; }
/* Premium-Plattformgrafiken (public/assets/landing/premium/assets/platform/, freigestellt via
   scripts/make-platform-icons-transparent.ps1) statt generischer SVG-Icons. Bewusst OHNE
   Hintergrund/Kachel-Optik (border-radius/box-shadow) - die Grafiken sind jetzt transparent
   freigestellt und sollen direkt auf der Kartenflaeche sitzen, keine zusaetzliche Box dahinter
   vortaeuschen. object-fit:contain verhindert jede Verzerrung, feste Breite/Hoehe haelt alle drei
   Karten visuell gleich gross trotz leicht unterschiedlicher Quellauflösung (76x91 / 69x90 /
   81x88px). */
.platform-icon {
  display: block; width: 3rem; height: 3rem; object-fit: contain; object-position: center;
  margin: 0 0 .8rem;
}
.apps-grid h3 { font-size: .98rem; margin: 0 0 .45rem; font-weight: 700; }
.apps-grid p { font-size: .87rem; color: var(--muted); margin: 0; line-height: 1.55; }

footer.site-footer {
  border-top: 1px solid var(--border); padding: 1.8rem 1.2rem 2.2rem;
}
.footer-inner {
  max-width: var(--content-max-width); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .8rem;
}
.footer-brand { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 700; color: var(--text); font-size: .92rem; }
.footer-brand img { border-radius: 5px; }
.footer-links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.footer-links a { font-size: .85rem; text-decoration: none; color: var(--muted); }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--text); }
@media (max-width: 480px) { .footer-inner { flex-direction: column; align-items: flex-start; } }

@media (max-width: 480px) {
  .hero h1 { font-size: 1.5rem; }
  .cta-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 360px) {
  .preview-window-body { padding: .9rem 1rem 1rem; }
  .preview-hours { gap: .2rem; }
  .preview-hour { font-size: .66rem; }
  .preview-temp { font-size: 1.8rem; }
}