/**
 * Weather Underground System — Design-Tokens v2
 *
 * Wird ausschliesslich geladen, wenn der v2-Schalter aktiv ist
 * (Einstellungen > Design v2). v1 bleibt davon unberuehrt.
 *
 * GRUNDSATZ
 * Das Plugin erfindet keine eigene Skala. Es konsumiert Automatic.css (ACSS 4.x)
 * und faellt auf eigene Werte zurueck, wo die Site kein ACSS hat oder einen
 * Paletten-Slot nicht aktiviert hat. Farben setzt der Betreiber im
 * ACSS-Dashboard — dieses Stylesheet schreibt niemals in Bricks-Paletten.
 *
 * Auf wetterstation-essen.de sind genau drei ACSS-Hauptfarben aktiv:
 * Primary, Base, Neutral. Secondary/Tertiary/Accent und die semantischen
 * Farben (--success/--danger/--warning) sind LEER. Jede Nutzung braucht
 * deshalb zwingend einen Fallback.
 *
 * HALTEPUNKTE
 * Bricks ist auf dieser Site desktop-first konfiguriert:
 *   Desktop 1279 (Basis) · Tablet 991 · Mobil quer 767 · Mobil hoch 478
 * v2 verwendet exakt diese Werte. Nicht 768/480/375 — das war die Ursache
 * dafuer, dass das Plugin den Bricks-Umbruch bei 991 nie mitbekommen hat.
 * Custom Properties funktionieren nicht in @media, die Zahlen stehen deshalb
 * literal. Beim Aendern: hier UND in WU_Design::BP_* anpassen.
 */

:root {

  /* ── Flaeche und Schrift ──────────────────────────────────────────── */
  /* base-ultra-light ist bei ACSS das helle Ende der Base-Skala.        */
  --wu-surface:        var(--base-ultra-light, #f4f6f7);
  --wu-surface-sunk:   var(--base-light, #dfe5e8);
  --wu-ink:            var(--base-ultra-dark, #10171b);
  --wu-ink-quiet:      var(--base-semi-dark, #4c5a62);
  --wu-line:           var(--neutral-light, #d5d9db);
  --wu-line-strong:    var(--neutral-dark, #3d4245);

  /* Akzent = die Markenfarbe der jeweiligen Site, nicht des Plugins.    */
  --wu-accent:         var(--primary, #1f5c8b);
  --wu-accent-ink:     var(--primary-dark, #16405f);

  /* ── Der meteorologische Schluessel ───────────────────────────────── */
  /* Fuenf Rollen, eine Bedeutung, in allen Shortcodes gleich.           */
  /* -fill  = Flaechen, Balken, Legendenfelder, Diagrammserien.          */
  /* -ink   = Text und Icons. Getrennt, weil mehrere Fuellfarben den     */
  /*          Kontrastboden 4.5:1 als Text reissen wuerden (Ocker!).     */
  /* Eine Site kann jede Rolle einzeln ueberschreiben.                   */
  --wu-c-temp-fill:    #c2412d;   /* Temperatur   — Zinnober            */
  --wu-c-temp-ink:     #a3311f;
  --wu-c-wasser-fill:  #1f5c8b;   /* Feuchte + Niederschlag — eine Rolle */
  --wu-c-wasser-ink:   #17486d;
  --wu-c-wind-fill:    #5e7238;   /* Wind         — Moos                */
  --wu-c-wind-ink:     #4a5a2c;
  --wu-c-druck-fill:   #a8761c;   /* Luftdruck    — Ocker               */
  --wu-c-druck-ink:    #7a5410;   /* Fuellfarbe schafft als Text nur 3.6:1 */
  --wu-c-rekord-fill:  #6b3e7a;   /* Rekord / Extremwert                */
  --wu-c-rekord-ink:   #573165;

  /* ── Abstand: ACSS-Skala, sonst Rueckfall ─────────────────────────── */
  --wu-space-xs:  var(--space-xs, 0.5rem);
  --wu-space-s:   var(--space-s,  0.75rem);
  --wu-space-m:   var(--space-m,  1rem);
  --wu-space-l:   var(--space-l,  1.5rem);
  --wu-space-xl:  var(--space-xl, 2.25rem);

  /* ── Schriftgroesse: ACSS-Skala, sonst Rueckfall ──────────────────── */
  /* Sieben Stufen statt der 38 Einzelwerte aus v1.                      */
  --wu-text-xs:   var(--text-xs,  0.8125rem);
  --wu-text-s:    var(--text-s,   0.875rem);
  --wu-text-m:    var(--text-m,   1rem);
  --wu-text-l:    var(--text-l,   1.25rem);
  --wu-text-xl:   var(--text-xl,  1.5rem);
  --wu-text-xxl:  var(--text-xxl, 2rem);
  --wu-text-mess: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);  /* Leitmesswert */

  /* ── Schrift ──────────────────────────────────────────────────────── */
  /* Fliesstext und Ueberschriften erben die Site. Das Plugin bringt nur  */
  /* einen Ziffernschnitt mit — Familie wird spaeter gesetzt, der        */
  /* Rueckfall auf Tabellenziffern der Site-Schrift greift bis dahin.    */
  --wu-font-text:      inherit;
  --wu-font-mess:      var(--wu-font-num, inherit);

  /* ── Kanten und Bewegung ──────────────────────────────────────────── */
  --wu-radius:         2px;
  --wu-radius-l:       4px;
  --wu-hair:           1px;
  --wu-ease:           180ms cubic-bezier(.2, .7, .3, 1);

  /* ── Breite ───────────────────────────────────────────────────────── */
  /* v1 hatte max-width:1200px hart verdrahtet und lief damit gegen      */
  /* schmalere Bricks-Container. v2 fuellt die Spalte, die es bekommt.   */
  --wu-measure:        68ch;   /* nur fuer Fliesstext */
}

/* ══ Grundregeln — nur innerhalb von .wu-v2 ═════════════════════════ */

.wu-v2 {
  width: 100%;
  max-width: 100%;
  color: var(--wu-ink);
  font-family: var(--wu-font-text);
  font-size: var(--wu-text-m);
  container-type: inline-size;
}

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

/* Messwerte tragen immer Tabellenziffern: nur so stehen Zahlen in
   Spalten wirklich untereinander. Das ist die halbe Ablesbarkeit. */
.wu-v2 .wu-num,
.wu-v2 table,
.wu-v2 [data-wu-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.wu-v2 .wu-mess {
  font-family: var(--wu-font-mess);
  font-variant-numeric: tabular-nums;
  font-size: var(--wu-text-mess);
  line-height: 1;
}

/* Fliesstext bekommt ein Lesemass, alles andere nicht. */
.wu-v2 .wu-prosa { max-width: var(--wu-measure); }

/* Tabellen scrollen in sich, nie die Seite. */
.wu-v2 .wu-scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--wu-line-strong) transparent;
}

/* Browser-Oberflaechen mitgestalten statt den Defaults ueberlassen. */
.wu-v2 ::selection { background: var(--wu-accent); color: var(--wu-surface); }
.wu-v2 :focus-visible {
  outline: 2px solid var(--wu-accent);
  outline-offset: 2px;
  border-radius: var(--wu-radius);
}

/* Der Schluessel als Legendenfeld. */
.wu-v2 .wu-key {
  display: inline-block;
  inline-size: 0.85em;
  block-size: 0.85em;
  border: var(--wu-hair) solid var(--wu-line-strong);
  vertical-align: baseline;
}
.wu-v2 .wu-key--temp   { background: var(--wu-c-temp-fill); }
.wu-v2 .wu-key--wasser { background: var(--wu-c-wasser-fill); }
.wu-v2 .wu-key--wind   { background: var(--wu-c-wind-fill); }
.wu-v2 .wu-key--druck  { background: var(--wu-c-druck-fill); }
.wu-v2 .wu-key--rekord { background: var(--wu-c-rekord-fill); }

/* Unvollstaendige Zeitraeume muessen sichtbar unvollstaendig sein.
   Produktprinzip 4: Zwischenstaende kennzeichnen, nicht kaschieren. */
.wu-v2 .wu-teil {
  border-bottom: 1px dashed var(--wu-line-strong);
  cursor: help;
}
.wu-v2 .wu-teil::after {
  content: " " attr(data-wu-stand);
  font-size: var(--wu-text-xs);
  color: var(--wu-ink-quiet);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .wu-v2 *, .wu-v2 *::before, .wu-v2 *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ══ Haltepunkte — identisch mit Bricks ═════════════════════════════ */
@media (max-width: 991px)  { .wu-v2 { --wu-text-mess: clamp(2rem, 1.2rem + 3vw, 3rem); } }
@media (max-width: 767px)  { .wu-v2 { --wu-measure: 100%; } }
@media (max-width: 478px)  { .wu-v2 { --wu-text-mess: clamp(1.85rem, 1rem + 6vw, 2.6rem); } }