/* ═══════════════════════════════════════════════════════════════════════════
   wetter.bymw.de — Grundlage: Tokens, Reset, Hülle, Kopf, Suche, Held, Fuß.
   Karten und das Transparenz-Panel liegen in karten.css bzw. details.css.

   ⚠️ HAUSREGELN (CLAUDE.md), die hier gelten:
   • Schriftgrößen, Radien und Abstände laufen AUSSCHLIESSLICH über die Tabellen
     unten (--fs-* / --r-* / --sp-*), je einmal für Handy, ab 1000 px und ab
     1600 px. Neue Regel = `font-size: var(--fs-14)`, nie `14px`. Nachjustiert
     wird nur in der Tabelle, nicht verteilt über hunderte Regeln.
   • Schatten kommen aus den --sh-*-Bausteinen, nicht aus eigenen rgba-Rezepten.
   • z-index NUR über die benannte Leiter --z-*. Keine nackten Zahlen.
   • Ränder respektieren die Safe Area (env(safe-area-inset-*)).
   • Farbpaare sind quantitativ gegen WCAG AA geprüft (siehe qa/wetter-kontrast).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Farben ─────────────────────────────────────────────────────────────────
   Dunkel ist die Identität (wie Symbol und Startbild); Hell ist der zweite,
   gleichwertige Modus — nicht eine aufgehellte Notlösung. */
:root {
  --bg:      #070d22;
  --bg-2:    #0b1330;
  --flaeche: #101a3a;   /* Karten */
  --soft:    #16224a;   /* Chips, Eingabefelder */
  --line:    rgba(255, 255, 255, .10);
  --line-stark: rgba(255, 255, 255, .18);

  --ink:   #f2f6ff;     /* Überschriften, Zahlen */
  --body:  #c3cfe8;     /* Fließtext */
  --muted: #8b9ac0;     /* Beiwerk */

  --acc:   #4da3ff;     /* Marke: Himmelblau */
  --acc-2: #ffb347;     /* Marke: Sonne */
  --acc-ink: #071022;   /* Text AUF der Akzentfläche */
  --gut:   #46d39a;
  --warn:  #ffb347;
  --schlecht: #ff7a7a;

  --glas: rgba(16, 26, 58, .72);
  --glas-kopf: rgba(7, 13, 34, .82);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:      #eef3fc;
  --bg-2:    #e4ecf9;
  --flaeche: #ffffff;
  --soft:    #e8effb;
  --line:    rgba(11, 26, 64, .12);
  --line-stark: rgba(11, 26, 64, .22);

  --ink:   #0d1a3c;
  --body:  #2f3f63;
  --muted: #55658a;

  /* ⚠️ Nachgemessen, nicht geschätzt: --acc muss 4,5:1 auf --flaeche (#fff) UND
     auf --bg (#eef3fc) schaffen, --muted zusätzlich auf --soft (#e8effb, der
     hervorgehobene „Jetzt"-Kachel). Die naheliegenden #1f6fd0 / #5c6d92 lagen
     bei 4,45:1 bzw. 4,49:1 — auf weißem Grund grün, auf der leicht getönten
     Fläche knapp durchgefallen. Wer sie ändert: qa/wetter-ui.mjs misst das. */
  --acc:   #1b64c4;
  --acc-2: #a85a00;
  --acc-ink: #ffffff;
  --gut:   #0d7a54;
  --warn:  #9a5a00;
  --schlecht: #b3261e;

  --glas: rgba(255, 255, 255, .78);
  --glas-kopf: rgba(238, 243, 252, .84);

  color-scheme: light;
}

/* ── Schriftgrößen ──────────────────────────────────────────────────────────
   Name = Handy-Wert. Kleine Schrift wächst stärker als große, sonst wirken
   Überschriften auf dem Desktop erschlagend.

   ⚠️ 12 px ist die KLEINSTE ausgelieferte Größe — es gibt bewusst kein
   `--fs-11` mehr. Es hing an den Zeit- und Regenbeschriftungen im Stundenband,
   also an echten Daten, und die liest auf einem Handy niemand bequem. Wer eine
   noch kleinere Stufe vermisst, braucht meist weniger Text, nicht kleineren. */
:root {
  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;
  --fs-15: 15px;  --fs-16: 16px;  --fs-18: 18px;  --fs-20: 20px;
  --fs-24: 24px;  --fs-28: 28px;  --fs-34: 34px;  --fs-44: 44px;
  --fs-64: 64px;

  /* Radien */
  --r-6: 6px;   --r-10: 10px;  --r-14: 14px;  --r-18: 18px;  --r-24: 24px;
  --r-pill: 999px;

  /* Abstände. Werte unter 6 px bleiben absichtlich literal — sie dürfen nicht
     mitwachsen, sonst franst die Fläche aus. */
  --sp-6: 6px;   --sp-8: 8px;    --sp-10: 10px;  --sp-12: 12px;
  --sp-16: 16px; --sp-20: 20px;  --sp-24: 24px;  --sp-32: 32px;  --sp-48: 48px;
}

@media (min-width: 1000px) {
  :root {
    --fs-12: 13.5px; --fs-13: 15px;  --fs-14: 16px;
    --fs-15: 17px;   --fs-16: 17.5px; --fs-18: 20px;  --fs-20: 22px;
    --fs-24: 26px;   --fs-28: 31px;   --fs-34: 38px;  --fs-44: 50px;
    --fs-64: 80px;

    --r-6: 7px;   --r-10: 11px;  --r-14: 16px;  --r-18: 20px;  --r-24: 26px;

    --sp-6: 6.5px;  --sp-8: 9px;    --sp-10: 11px;  --sp-12: 13px;
    --sp-16: 18px;  --sp-20: 22px;  --sp-24: 26px;  --sp-32: 35px;  --sp-48: 53px;
  }
}

@media (min-width: 1600px) {
  :root {
    --fs-12: 15px;   --fs-13: 16px;  --fs-14: 17.5px;
    --fs-15: 18.5px; --fs-16: 19px;   --fs-18: 21px;  --fs-20: 23.5px;
    --fs-24: 28px;   --fs-28: 33px;   --fs-34: 41px;  --fs-44: 54px;
    --fs-64: 96px;

    --r-6: 8px;   --r-10: 12px;  --r-14: 17px;  --r-18: 22px;  --r-24: 28px;

    --sp-6: 7px;    --sp-8: 9.5px;  --sp-10: 12px;  --sp-12: 14px;
    --sp-16: 19px;  --sp-20: 24px;  --sp-24: 28px;  --sp-32: 38px;  --sp-48: 57px;
  }
}

/* ── Schatten-Bausteine ────────────────────────────────────────────────────
   Kombinierbar: box-shadow: var(--sh-2), var(--sh-glanz); */
:root {
  --sh-1: 0 1px 2px rgba(2, 8, 24, .28);
  --sh-2: 0 6px 18px rgba(2, 8, 24, .34);
  --sh-3: 0 14px 40px rgba(2, 8, 24, .42);
  --sh-4: 0 28px 70px rgba(2, 8, 24, .50);
  --sh-glanz: inset 0 1px 0 rgba(255, 255, 255, .07);
  --sh-saum:  inset 0 0 0 1px var(--line);
  --sh-ring-acc: 0 0 0 2px rgba(77, 163, 255, .55);
}
:root[data-theme="light"] {
  --sh-1: 0 1px 2px rgba(13, 26, 60, .08);
  --sh-2: 0 6px 18px rgba(13, 26, 60, .10);
  --sh-3: 0 14px 40px rgba(13, 26, 60, .14);
  --sh-4: 0 28px 70px rgba(13, 26, 60, .18);
  --sh-glanz: inset 0 1px 0 rgba(255, 255, 255, .9);
  --sh-ring-acc: 0 0 0 2px rgba(31, 111, 208, .45);
}

/* ── Ebenen-Leiter ─────────────────────────────────────────────────────────
   Neue gestapelte Fläche? HIER einordnen, nie „z-index: 999" raten. */
:root {
  --z-fx:      0;   /* Wetter-Leinwand im Hintergrund des Helden */
  --z-inhalt:  1;
  --z-sticky:  10;  /* klebender Abschnittskopf */
  --z-kopf:    20;  /* Seitenkopf */
  --z-blatt:   30;  /* Vorschlagsliste der Suche */
  --z-dialog:  40;
  --z-toast:   50;
}

/* Safe Area einmal zentral einlesen — Canvas kann env() nicht lesen und holt
   sich den Wert über getComputedStyle (Muster _safeTop() in KelRaid). */
:root {
  --wx-sat: env(safe-area-inset-top, 0px);
  --wx-sab: env(safe-area-inset-bottom, 0px);
  --wx-sal: env(safe-area-inset-left, 0px);
  --wx-sar: env(safe-area-inset-right, 0px);
}

/* ── Reset ─────────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--body);
  font: 400 var(--fs-15)/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;              /* die Seite scrollt NIE waagerecht */
  -webkit-font-smoothing: antialiased;
}

/* Der Farbverlauf des Hintergrunds bleibt beim Scrollen stehen — sonst
   „wandert" er unter dem Inhalt weg und wirkt billig. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(77, 163, 255, .16) 0%, rgba(7, 13, 34, 0) 70%),
    radial-gradient(70% 45% at 88% 4%, rgba(255, 179, 71, .10) 0%, rgba(7, 13, 34, 0) 68%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%);
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--ink); line-height: 1.18; font-weight: 700; letter-spacing: -.015em; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r-6); }

/* Nur für Screenreader. */
.wx-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Hülle ────────────────────────────────────────────────────────────────*/
.wx-wrap {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: max(var(--sp-16), var(--wx-sal), var(--wx-sar));
}
@media (min-width: 1600px) { .wx-wrap { width: min(1480px, 100%); } }

main { padding-bottom: calc(var(--sp-48) + var(--wx-sab)); }

/* ── Kopf ─────────────────────────────────────────────────────────────────*/
.wx-kopf {
  position: sticky; top: 0; z-index: var(--z-kopf);
  padding-top: var(--wx-sat);
  background: var(--glas-kopf);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.wx-kopf-in {
  display: flex; align-items: center; gap: var(--sp-10);
  min-height: 58px; padding-block: var(--sp-8);
}
@media (min-width: 1000px) { .wx-kopf-in { min-height: 68px; gap: var(--sp-16); } }

.wx-marke {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  color: var(--ink); font-weight: 700; font-size: var(--fs-18);
  letter-spacing: -.02em; flex: 0 0 auto;
  /* Feste Mindestgröße, bewusst KEINE --sp-Größe: Ein Fingerziel ist eine
     körperliche Größe und darf nicht mit der Schrift mitwachsen. Die BREITE
     zählt mit — auf sehr schmalen Geräten blendet die Regel unten die Wortmarke
     aus, und übrig bliebe sonst ein 30 px schmales Ziel. */
  min-height: 34px; min-width: 34px; justify-content: center;
}
.wx-marke:hover { text-decoration: none; }
.wx-marke svg { width: 30px; height: 30px; flex: 0 0 auto; }
@media (min-width: 1000px) { .wx-marke svg { width: 34px; height: 34px; } }
.wx-marke b { color: var(--acc); font-weight: 700; }
/* Auf sehr schmalen Geräten hat die Suche Vorrang vor der Wortmarke. */
@media (max-width: 419px) { .wx-marke span { display: none; } }

.wx-kopf-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* Runder Werkzeugknopf. Im Ruhezustand ohne Schlagschatten (Hausregel) — die
   Fläche grenzt sich über einen Innensaum ab. */
.wx-ik {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-pill); color: var(--body);
  box-shadow: var(--sh-saum);
  transition: background-color .16s, color .16s, transform .12s;
}
.wx-ik:hover { background: var(--soft); color: var(--ink); }
.wx-ik:active { transform: translateY(1px); }
.wx-ik svg { width: 20px; height: 20px; }
.wx-ik[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); }

/* ── Suche ────────────────────────────────────────────────────────────────*/
.wx-suche { position: relative; flex: 1 1 auto; min-width: 0; max-width: 460px; }
.wx-suche-feld {
  display: flex; align-items: center; gap: var(--sp-8);
  background: var(--soft); border-radius: var(--r-pill);
  padding: var(--sp-8) var(--sp-12);
  box-shadow: var(--sh-saum);
  transition: box-shadow .16s;
}
.wx-suche-feld:focus-within { box-shadow: var(--sh-saum), var(--sh-ring-acc); }
.wx-suche-feld svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.wx-suche input {
  flex: 1 1 auto; min-width: 0; background: none; border: 0;
  font-size: var(--fs-14); color: var(--ink);
  /* Das Feld selbst muss antippbar sein — das Polster liegt am Label, und ein
     22 px hohes Eingabefeld trifft auf dem Handy niemand zuverlässig. */
  min-height: 32px;
}
.wx-suche input::placeholder { color: var(--muted); }
.wx-suche input:focus { outline: none; }
.wx-suche-x { display: none; color: var(--muted); font-size: var(--fs-16); line-height: 1; padding: 2px; }
.wx-suche.hat-text .wx-suche-x { display: block; }

.wx-vorschlaege {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--z-blatt);
  background: var(--flaeche); border-radius: var(--r-14);
  box-shadow: var(--sh-3), var(--sh-saum);
  overflow: hidden; max-height: min(60vh, 420px); overflow-y: auto;
}
.wx-vorschlaege[hidden] { display: none; }
/* Eine Zeile trägt ZWEI Schaltflächen nebeneinander (auswählen / vergessen) —
   nie ineinander, siehe die Begründung in index.php. */
.wx-vs-reihe { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.wx-vs-reihe:last-child { border-bottom: 0; }
.wx-vs-reihe:hover { background: var(--soft); }

.wx-vs {
  display: flex; align-items: baseline; gap: var(--sp-8);
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: var(--sp-10) var(--sp-12); text-align: left; color: var(--body);
}
.wx-vs:hover, .wx-vs:focus-visible { background: var(--soft); }
.wx-vs b { color: var(--ink); font-size: var(--fs-14); font-weight: 600; white-space: nowrap; }
.wx-vs span {
  color: var(--muted); font-size: var(--fs-12);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wx-vs-weg {
  flex: 0 0 auto; width: 44px; display: grid; place-items: center;
  color: var(--muted); border-radius: var(--r-10);
}
.wx-vs-weg svg { width: 16px; height: 16px; }
.wx-vs-weg:hover { color: var(--schlecht); background: var(--soft); }

.wx-vs-kopf {
  padding: var(--sp-10) var(--sp-12) var(--sp-6); color: var(--muted);
  font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
}
.wx-vs-leer { padding: var(--sp-12); color: var(--muted); font-size: var(--fs-13); }

/* ── Abschnitte ───────────────────────────────────────────────────────────*/
.wx-abschnitt { margin-top: var(--sp-32); }

/* ⚠️ `flex-wrap` UND `flex: 0 0 auto` an der Überschrift, sonst schrumpft sie
   zugunsten des Untertitels und „Sieben Tage" bricht auf dem Handy mitten
   entzwei — die Überschrift stand zweizeilig, der Untertitel einzeilig daneben.
   Jetzt: erst die ganze Überschrift, der Untertitel rutscht bei Platzmangel in
   die nächste Zeile. */
.wx-abschnitt-kopf {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 2px var(--sp-10);
  margin-bottom: var(--sp-12);
}
.wx-abschnitt-kopf h2 { flex: 0 0 auto; font-size: var(--fs-20); }
.wx-abschnitt-kopf p { flex: 1 1 auto; color: var(--muted); font-size: var(--fs-13); }

/* ── Fuß ──────────────────────────────────────────────────────────────────*/
.wx-fuss {
  margin-top: var(--sp-48); padding-block: var(--sp-24);
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-12);
}
.wx-fuss-quellen { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-12); margin-bottom: var(--sp-12); }
.wx-fuss-quellen a { color: var(--body); }
/* ⚠️ Die Navigationslinks im Fuß sind eigenständige Ziele, keine Wörter in
   einem Satz — sie brauchen deshalb echte Antippfläche. Sie vorher von der
   Prüfung auszunehmen war bequem, aber auf dem Handy trifft man 14 px hohe
   Links nebeneinander schlicht nicht zuverlässig. */
.wx-fuss-nav { display: flex; flex-wrap: wrap; gap: 2px var(--sp-6); }
.wx-fuss-nav a {
  display: inline-flex; align-items: center;
  min-height: 34px; padding-inline: var(--sp-8);
  margin-inline-start: calc(-1 * var(--sp-8));
  border-radius: var(--r-10);
}
.wx-fuss-nav a:hover { background: var(--soft); text-decoration: none; }

/* ── Meldungen ────────────────────────────────────────────────────────────*/
.wx-hinweis {
  display: flex; align-items: flex-start; gap: var(--sp-10);
  padding: var(--sp-12) var(--sp-16); border-radius: var(--r-14);
  background: var(--soft); box-shadow: var(--sh-saum);
  font-size: var(--fs-13); color: var(--body);
  margin-top: var(--sp-16);
}
.wx-hinweis svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--warn); }
.wx-hinweis.ist-fehler svg { color: var(--schlecht); }
.wx-hinweis[hidden] { display: none; }

.wx-toast {
  position: fixed; left: 50%; z-index: var(--z-toast);
  bottom: calc(var(--sp-20) + var(--wx-sab)); transform: translate(-50%, 12px);
  padding: var(--sp-10) var(--sp-16); border-radius: var(--r-pill);
  background: var(--flaeche); color: var(--ink); font-size: var(--fs-13);
  box-shadow: var(--sh-3), var(--sh-saum);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: calc(100vw - 2 * var(--sp-20));
}
.wx-toast.an { opacity: 1; transform: translate(-50%, 0); }

/* ── Ladezustand ──────────────────────────────────────────────────────────
   Ein Skelett statt eines Spinners: Die Seite zeigt sofort ihre Form, der
   Sprung beim Eintreffen der Daten fällt weg. */
.wx-skelett {
  position: relative; overflow: hidden;
  background: var(--soft); border-radius: var(--r-10); color: transparent;
}
.wx-skelett::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: wx-schimmer 1.4s linear infinite;
}
@keyframes wx-schimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .wx-skelett::after { animation: none; } }

/* ── Textseiten (ueber.php) ───────────────────────────────────────────────*/
.wx-text { max-width: 74ch; }
.wx-text h1 { font-size: var(--fs-34); margin-bottom: var(--sp-12); }
.wx-text h2 { font-size: var(--fs-24); margin-top: var(--sp-32); margin-bottom: var(--sp-10); }
.wx-text h3 { font-size: var(--fs-18); margin-top: var(--sp-20); margin-bottom: var(--sp-6); }
.wx-text p, .wx-text ul, .wx-text ol { margin-bottom: var(--sp-12); }
.wx-text ul, .wx-text ol { padding-left: 1.3em; }
.wx-text li { margin-bottom: 4px; }
.wx-text code {
  background: var(--soft); border-radius: var(--r-6); padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; color: var(--ink);
}
.wx-text .wx-lead { font-size: var(--fs-18); color: var(--ink); }
.wx-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-13); margin-bottom: var(--sp-16); }
.wx-tabelle th, .wx-tabelle td { padding: var(--sp-8) var(--sp-10); text-align: left; border-bottom: 1px solid var(--line); }
.wx-tabelle th { color: var(--ink); font-weight: 600; }
.wx-roll { overflow-x: auto; -webkit-overflow-scrolling: touch; }