/* ==========================================================================
   Basis: Farbtoken, Grundeinstellungen, Schrift
   --------------------------------------------------------------------------
   Alle Maße stehen in px. Das bisherige Theme setzte html{font-size:10px};
   sollte diese Einstellung irgendwo überleben, rechnen rem-Werte falsch.
   ========================================================================== */

/* --- Farbtoken -----------------------------------------------------------
   Die hellen Werte sind genau jene, die das Wetter-Plugin bisher fest
   eingebaut hatte. Dadurch sieht der helle Modus exakt aus wie bisher, und
   der dunkle ist die einzige echte Neuerung.

   Nachgerechnet (WCAG, Stand 09/2026):
     Text  #e8edf2 auf #121820 = 15,1:1     Text #1c2226 auf #fff = 16,1:1
     grau  #94a3b2 auf #121820 =  6,9:1     grau #5b6570 auf #fff =  5,9:1
     Alle zwölf Serienfarben des Plugins erreichen auf #121820 mindestens
     3:1 - deshalb ist diese Fläche die dunkelste zulässige Kartenfarbe.
   ------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Flächen */
  --wt-bg: #0a0e13;
  --wt-bg-tief: #070a0e;
  --wt-surface: #121820;
  --wt-surface-2: #1a2029;
  --wt-surface-hoch: #161d26;

  /* Schrift */
  --wt-fg: #e8edf2;
  --wt-muted: #94a3b2;
  /* Gedämpfter Text auf dem Seitengrund braucht mehr als auf einer Karte:
     dort liegt der lebendige Hintergrund darunter. Gemessen gegen die
     hellste Stelle des Schichtstapels (Leuchtdichte 0,058) - damit 5,3:1. */
  --wt-muted-grund: #b4c0cc;
  --wt-leise: #6b7887;

  /* Linien und Akzent */
  --wt-border: #232c38;
  --wt-border-stark: #2f3a48;
  --wt-accent: #d4a03c;        /* Flächen, Ränder, Symbole */
  --wt-accent-text: #d4a03c;   /* Text - im hellen Modus dunkler, s.u. */
  /* Gold auf dem Seitengrund: #d4a03c erreicht dort nur 4,1:1 - gemessen
     gegen die hellste Stelle des Schichtstapels. */
  --wt-accent-grund: #dcae4e;
  --wt-accent-weich: rgba(212, 160, 60, .14);

  /* Zustände */
  --wt-gut: #3fb27f;
  --wt-warnung: #e0a41f;
  --wt-fehler: #e4635a;

  /* Schatten und Glanz */
  --wt-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  --wt-shadow-hoch: 0 2px 4px rgba(0, 0, 0, .34), 0 18px 48px rgba(0, 0, 0, .4);
  --wt-glanz: inset 0 1px 0 rgba(255, 255, 255, .045);

  /* Maße */
  /* Höhe der festen Kopfleiste. Daran hängen Sprungmarken, der Abstand des
     Seitenkopfs, die klebrige Seitenspalte und das Menü am Telefon - deshalb
     steht sie hier einmal und nicht siebenmal verstreut. */
  --wt-kopf-hoehe: 88px;
  --wt-breite: 1180px;
  --wt-breite-schmal: 760px;
  --wt-radius: 16px;
  --wt-radius-klein: 10px;
  --wt-gap: 18px;
  --wt-rand: 20px;

  /* Bewegung */
  --wt-schnell: 140ms;
  --wt-normal: 260ms;
  --wt-ruhig: 520ms;
  --wt-kurve: cubic-bezier(.22, .61, .36, 1);
  --wt-kurve-weich: cubic-bezier(.4, 0, .2, 1);

  /* Schrift
     Die Familien und die Umschaltung der Antiqua stehen in schrift.css;
     der Systemstapel bleibt als Rückfall, falls die Datei fehlt. */
  --wt-font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wt-font-zahl: "SF Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, monospace;
}

/* Heller Modus: entweder vom Gerät gewünscht oder von Hand gewählt.
   data-modus gewinnt immer, damit der Schalter die Systemeinstellung
   überstimmen kann. */
@media (prefers-color-scheme: light) {
  :root:not([data-modus="dunkel"]) {
    color-scheme: light;
    --wt-bg: #eef1f4;
    --wt-bg-tief: #e4e9ee;
    --wt-surface: #ffffff;
    --wt-surface-2: #f0f2f5;
    --wt-surface-hoch: #ffffff;
    --wt-fg: #1c2226;
    --wt-muted: #5b6570;
    /* Nicht derselbe Wert wie --wt-muted: hier liegt der lebendige
       Hintergrund darunter. Gemessen gegen die dunkelste Stelle des
       Schichtstapels (Leuchtdichte 0,547) - damit 4,96:1. */
    --wt-muted-grund: #434c57;
    --wt-leise: #7d8894;
    --wt-border: #e1e6ea;
    --wt-border-stark: #cdd5dd;
    --wt-accent: #bf9733;
    --wt-accent-text: #8d6f26;   /* 4,7:1 auf Weiß - #bf9733 erreicht nur 2,7:1 */
    /* Auf dem Seitengrund reicht #8d6f26 NICHT: dort sind es nur 2,7:1, und
       selbst auf der nackten Seitenfarbe ohne Aurora nur 4,2:1. Der Wert war
       gegen weiße Karten gerechnet und für den Grund ungeprüft übernommen.
       Dieser hier hält 4,85:1 - im hellen Modus wirkt Gold zwangsläufig
       bronzen, sonst trägt es auf hellem Grund nicht. */
    --wt-accent-grund: #5e4a12;
    --wt-accent-weich: rgba(191, 151, 51, .14);
    --wt-gut: #2f9e5f;
    --wt-warnung: #d68a10;
    --wt-fehler: #c2452c;
    --wt-shadow: 0 1px 2px rgba(20, 30, 40, .06), 0 4px 16px rgba(20, 30, 40, .08);
    --wt-shadow-hoch: 0 2px 6px rgba(20, 30, 40, .09), 0 18px 44px rgba(20, 30, 40, .12);
    --wt-glanz: none;
  }
}

:root[data-modus="hell"] {
  color-scheme: light;
  --wt-bg: #eef1f4;
  --wt-bg-tief: #e4e9ee;
  --wt-surface: #ffffff;
  --wt-surface-2: #f0f2f5;
  --wt-surface-hoch: #ffffff;
  --wt-fg: #1c2226;
  --wt-muted: #5b6570;
  --wt-muted-grund: #434c57;   /* siehe Begründung im Block darüber */
  --wt-leise: #7d8894;
  --wt-border: #e1e6ea;
  --wt-border-stark: #cdd5dd;
  --wt-accent: #bf9733;
  --wt-accent-text: #8d6f26;
  --wt-accent-grund: #5e4a12;
  --wt-accent-weich: rgba(191, 151, 51, .14);
  --wt-gut: #2f9e5f;
  --wt-warnung: #d68a10;
  --wt-fehler: #c2452c;
  --wt-shadow: 0 1px 2px rgba(20, 30, 40, .06), 0 4px 16px rgba(20, 30, 40, .08);
  --wt-shadow-hoch: 0 2px 6px rgba(20, 30, 40, .09), 0 18px 44px rgba(20, 30, 40, .12);
  --wt-glanz: none;
}

/* --- Grundeinstellungen -------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 16px;          /* ausdrücklich: das alte Theme setzte 10px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungmarken unter der festen Kopfleiste */
  scroll-padding-top: calc(var(--wt-kopf-hoehe) + 22px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--wt-bg);
  color: var(--wt-fg);
  font-family: var(--wt-font);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--wt-normal) var(--wt-kurve-weich),
              color var(--wt-normal) var(--wt-kurve-weich);
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
svg { fill: currentColor; }

/*
 * Eingebettete Rahmen dürfen nie breiter werden als ihr Platz. Ohne das
 * lässt sich die Seite am Telefon waagrecht schieben, sobald jemand ein
 * Widget mit fester Pixelbreite einfügt - das meteoblue-Widget stand
 * beispielsweise auf 378 px und ragte damit über jedes 375-px-Telefon.
 *
 * Nur die Breite, nicht die Höhe: die bringt jeder Anbieter selbst mit,
 * und "height:auto" würde manchen Rahmen auf null zusammenfallen lassen.
 */
iframe, embed, object { max-width: 100%; }

/*
 * Und der Grund, warum das meteoblue-Widget auf dunklem Grund in einem
 * weißen Kasten stand:
 *
 * Oben steht color-scheme: dark. Trifft ein eingebettetes Dokument darauf,
 * das selbst im hellen Schema läuft, malt der Browser eine DECKEND WEISSE
 * Platte dahinter, statt es durchscheinen zu lassen - eine Schutzmaßnahme
 * gegen unlesbare Durchsichtigkeit. Weder allowtransparency noch ein
 * Hintergrund am iframe kommen dagegen an: die Platte liegt darüber.
 *
 * Nachgewiesen auf der Live-Seite: Elternabsatz grün, iframe magenta - die
 * Fläche blieb weiß. Mit color-scheme: normal schien beides sofort durch.
 *
 * "normal" heißt: das Theme drängt fremden Rahmen kein Schema auf, das
 * eingebettete Dokument entscheidet selbst.
 */
iframe { color-scheme: normal; }

/*
 * Eingebettete Rahmen bekommen dieselbe Fläche wie eine Kachel des
 * Dashboards - Milchglas, Rand, Rundung, Schatten. Damit fügen sich
 * fremde Widgets ins Gesamtbild ein, statt als Fremdkörper dazustehen.
 *
 * Die Werte sind bewusst dieselben wie bei .wt-karte in layout.css; hier
 * stehen sie ausgeschrieben, weil ein iframe kein Kind der Karte ist.
 *
 * Der Innenabstand hält den Inhalt vom Rand weg. Er verkleinert die
 * nutzbare Fläche des Widgets um 2x12 px - das verträgt es, es rechnet
 * seine Spalten selbst neu.
 *
 * Wichtig dazu: assets/js/theme.js stellt den layout-Parameter der
 * meteoblue-Widgets auf hell oder dunkel, passend zum Modus. Ohne das
 * stünde im hellen Modus weiße Schrift auf weißer Kachel.
 */
.wt-text iframe {
  background: color-mix(in srgb, var(--wt-surface) 88%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  box-shadow: var(--wt-shadow), var(--wt-glanz);
  padding: 12px;
}

@supports not (backdrop-filter: blur(1px)) {
  .wt-text iframe { background: var(--wt-surface); }
}

a {
  color: var(--wt-accent-text);
  text-decoration-color: color-mix(in srgb, var(--wt-accent-text) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--wt-schnell) var(--wt-kurve);
}
a:hover { color: var(--wt-fg); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/*
 * Die großen Überschriften tragen die Antiqua und nehmen damit die
 * Wortmarke auf. Nur h1 und h2 - ab h3 zählt Nüchternheit, dort stehen
 * Kachel- und Beitragstitel.
 *
 * Gewicht und Sperrung müssen mit: 700 und -.015em sind auf eine Grotesk
 * gerechnet. Eine klassizistische Antiqua wird bei 700 zur Plakatschrift,
 * und negative Sperrung lässt ihre feinen Haarstriche verkleben. Die
 * Wortmarke selbst ist weit gesperrt, nicht eng.
 *
 * Der Grad-Ausgleich über --wt-titel-faktor gleicht aus, dass Cormorant
 * bei gleicher Angabe kleiner läuft als Playfair (siehe schrift.css).
 */
h1, h2 {
  font-family: var(--wt-font-titel);
  font-weight: var(--wt-titel-gewicht, 500);
  letter-spacing: 0;
}

h1 { font-size: calc(clamp(30px, 5vw, 46px) * var(--wt-titel-faktor, 1)); }
h2 { font-size: calc(clamp(24px, 3.4vw, 34px) * var(--wt-titel-faktor, 1)); }
h3 { font-size: clamp(19px, 2.2vw, 23px); }
h4 { font-size: 17px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

hr {
  border: 0;
  height: 1px;
  background: var(--wt-border);
  margin: 32px 0;
}

::selection { background: var(--wt-accent-weich); color: var(--wt-fg); }

:focus-visible {
  outline: 2px solid var(--wt-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Nur für Vorlesesoftware */
.wt-nur-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink zum Inhalt */
.wt-sprung {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  transform: translateY(-160%);
  padding: 10px 18px;
  border-radius: var(--wt-radius-klein);
  background: var(--wt-accent);
  color: #10141a;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--wt-normal) var(--wt-kurve);
}
.wt-sprung:focus { transform: translateY(0); color: #10141a; }

/* Zahlen überall in gleicher Breite - Werte sollen beim Aktualisieren
   nicht hin- und herspringen. */
.wt-zahl,
table td, table th { font-variant-numeric: tabular-nums; }