/* ==========================================================================
   Brücke zum Wetter-Plugin
   --------------------------------------------------------------------------
   Das Plugin "Wetter CL Modern" bringt sein eigenes CSS mit und definiert je
   Shortcode eine kleine Farbpalette auf seinem Wurzelknoten, z.B.

       .wtdb-wetter { --wtdb-surface:#fff; --wtdb-fg:#1c2226; ... }

   Diese Werte sind fest hell. Hier werden sie auf die Theme-Token umgelenkt,
   damit alle neun Shortcodes den Moduswechsel mitmachen.

   Warum überall "body" davor?
   Das Plugin schreibt sein <style> inline in den Seiteninhalt, also NACH dem
   Stylesheet des Themes. Bei gleicher Spezifität gewänne deshalb das Plugin.
   "body .wtdb-wetter" (0,1,1) schlägt ".wtdb-wetter" (0,1,0) unabhängig von
   der Reihenfolge.

   Dadurch bleibt das Plugin unangetastet: ohne dieses Theme sieht es
   unverändert aus wie bisher.

   Nachgerechnet: alle zwölf Serienfarben des Plugins erreichen auf
   --wt-surface (#121820) mindestens 3:1. Die Kurvenfarben brauchen deshalb
   keine zweite Fassung.
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------- */

/*
 * Das Plugin erbt die Seitenschrift NICHT. Es trägt an zwölf Stellen einen
 * eigenen Stapel fest ein:
 *
 *     -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
 *
 * Solange das Theme auf derselben Systemgrotesk lief, fiel das niemandem
 * auf. Sobald --wt-font auf etwas anderes zeigt, wechselt die ganze Seite -
 * und die elf Shortcodes bleiben als einziger Block stehen.
 *
 * Neun Wurzelknoten plus drei SVG-Textklassen der Windrose. Die letzten
 * drei würden zwar normal erben, überschreiben die Vererbung aber, weil sie
 * ausdrücklich gesetzt sind.
 *
 * wtnd und wttp brauchen keinen Eintrag - ihr Rumpf steckt im wtgr-Wrapper.
 */
body .wtas-wetter,
body .wtcu-wetter,
body .wtlt-wetter,
body .wtst-wetter,
body .wtmt-wetter,
body .wtin-wetter,
body .wttb-wetter,
body .wtgr-wetter,
body .wtdb-wetter,
body .wtgr-kompass,
body .wtgr-mitte,
body .wtgr-mitte-sub { font-family: var(--wt-font); }

/* Die Überschriften der Shortcodes bekommen über den Elementselektor in
   basis.css die Antiqua - das ist gewollt, damit alle Überschriften der
   Seite dieselbe Handschrift tragen. Soll das Dashboard davon ausgenommen
   werden, genügt hier eine Zeile:
   body .wtdb-wetter h2 { font-family: var(--wt-font); font-weight: 700; } */

/* --- Die neun Paletten --------------------------------------------------- */

/* [wetter_aktuell] */
body .wtas-wetter {
  --wtas-bg: var(--wt-surface);        /* nur Aussparung in den Symbolen */
  --wtas-surface: var(--wt-surface);
  --wtas-surface-2: var(--wt-surface-2);
  --wtas-fg: var(--wt-fg);
  --wtas-fg-muted: var(--wt-muted);
  --wtas-accent: var(--wt-accent);
  --wtas-border: var(--wt-border);
  --wtas-shadow: var(--wt-shadow);
}

/* [wetter_uebersicht] */
body .wtcu-wetter {
  --wtcu-bg: var(--wt-bg);
  --wtcu-surface: var(--wt-surface);
  --wtcu-surface-2: var(--wt-surface-2);
  --wtcu-fg: var(--wt-fg);
  --wtcu-fg-muted: var(--wt-muted);
  --wtcu-accent: var(--wt-accent);
  --wtcu-border: var(--wt-border);
  --wtcu-shadow: var(--wt-shadow);
}

/* [wetter_langzeit] */
body .wtlt-wetter {
  --wtlt-bg: var(--wt-bg);
  --wtlt-surface: var(--wt-surface);
  --wtlt-surface-2: var(--wt-surface-2);
  --wtlt-fg: var(--wt-fg);
  --wtlt-fg-muted: var(--wt-muted);
  --wtlt-accent: var(--wt-accent);
  --wtlt-border: var(--wt-border);
  --wtlt-shadow: var(--wt-shadow);
}

/* [wetter_status] */
body .wtst-wetter {
  --wtst-bg: var(--wt-bg);
  --wtst-surface: var(--wt-surface);
  --wtst-surface-2: var(--wt-surface-2);
  --wtst-fg: var(--wt-fg);
  --wtst-fg-muted: var(--wt-muted);
  --wtst-accent: var(--wt-accent);
  --wtst-border: var(--wt-border);
  --wtst-shadow: var(--wt-shadow);
}

/* [wetter_minitabelle] - Fläche ist dort halbdurchsichtig gedacht */
body .wtmt-wetter {
  --wtmt-surface: color-mix(in srgb, var(--wt-surface) 82%, transparent);
  --wtmt-surface-2: var(--wt-surface-2);
  --wtmt-fg: var(--wt-fg);
  --wtmt-fg-muted: var(--wt-muted);
  --wtmt-accent: var(--wt-accent);
  --wtmt-border: var(--wt-border);
  --wtmt-shadow: var(--wt-shadow);
}

/* [wetter_instrumente] */
body .wtin-wetter {
  --wtin-surface: var(--wt-surface);
  --wtin-fg: var(--wt-fg);
  --wtin-fg-muted: var(--wt-muted);
  --wtin-accent: var(--wt-accent);
  --wtin-track: var(--wt-surface-2);   /* war cremefarben - auf Dunkel zu hell */
  --wtin-border: var(--wt-border);
}

/* [wetter_tabelle] */
body .wttb-wetter {
  --wttb-surface: var(--wt-surface);
  --wttb-surface-2: var(--wt-surface-2);
  --wttb-fg: var(--wt-fg);
  --wttb-fg-muted: var(--wt-muted);
  --wttb-accent: var(--wt-accent);
  --wttb-border: var(--wt-border);
  --wttb-shadow: var(--wt-shadow);
}

/* [wetter_grafiken] - und damit auch [wetter_statistik_niederschlag] und
   [wetter_statistik_temperatur]: beide hängen ihren Wurzelknoten zusätzlich
   an .wtgr-wetter und erben diese Werte. */
body .wtgr-wetter {
  --wtgr-surface: var(--wt-surface);
  --wtgr-surface-2: var(--wt-surface-2);
  --wtgr-fg: var(--wt-fg);
  --wtgr-muted: var(--wt-muted);
  --wtgr-accent: var(--wt-accent);
  --wtgr-border: var(--wt-border);
  --wtgr-shadow: var(--wt-shadow);
}

/* [wetter_dashboard] */
body .wtdb-wetter {
  --wtdb-surface: var(--wt-surface);
  --wtdb-surface-2: var(--wt-surface-2);
  --wtdb-fg: var(--wt-fg);
  --wtdb-muted: var(--wt-muted);
  --wtdb-accent: var(--wt-accent);
  --wtdb-border: var(--wt-border);
  --wtdb-shadow: var(--wt-shadow);
}

/* --- Die Stellen ohne Variable ------------------------------------------- */

/* Im Plugin-CSS stehen 17 fest eingetragene Farben. Die meisten sind auf
   beiden Gründen unbedenklich (Serienfarben, Verläufe, Mondscheibe). Diese
   hier nicht - sie sind auf hellen Grund gerechnet und blenden auf Dunkel. */

/* Gitternetz und Windrosenringe: waren #e6eaee, also fast weiß. */
body .wtgr-grid,
body .wtgr-ring { stroke: var(--wt-border); }

/* Nulllinie: darf sich vom Gitter abheben, aber nicht stechen. */
body .wtgr-null { stroke: var(--wt-leise); }

/* Zeilenhervorhebung in den Tabellen: war ein helles Gold. */
body .wtas-wetter table.wtas-history tbody tr:hover td:first-child,
body .wttb-detail tbody tr:hover td:first-child,
body .wttp-tabelle tbody tr:hover td:first-child,
body .wtnd-tabelle tbody tr:hover td:first-child { background: var(--wt-accent-weich); }

/* Wochenenden in der Detailtabelle */
body .wttb-detail tbody tr.wttb-we td:first-child {
  background: color-mix(in srgb, var(--wt-accent) 7%, var(--wt-surface));
}

/* Fehlermeldungen und Kennzeichnungen: auf Dunkel aufgehellt */
body .wtas-wetter .wtas-error,
body .wtcu-error,
body .wtlt-error,
body .wtst-error,
body .wtmt-error,
body .wtin-error,
body .wttb-error,
body .wtgr-fehler,
body .wtnd-fehler,
body .wttp-fehler { color: var(--wt-fehler); }

body .wtnd-abw.wtnd-trocken { color: var(--wt-warnung); }

/* Die kleinen Dreiecke im Dashboard */
body .wtdb-pfeil-auf { border-bottom-color: var(--wt-fehler); }
body .wtdb-pfeil-ab { border-top-color: #5b9bd8; }

/* Platzhalterfläche hinter den Original-GIFs von WSWin. Die Bilder selbst
   sind hell - ein grauer Grund passt in beiden Modi. */
body .wtgr-gif img { background: #c0c0c0; }

/* --- Einbettung ins Theme ------------------------------------------------ */

/* Die Shortcodes bringen eigene Höchstbreiten mit. Innerhalb einer
   Theme-Karte sollen sie die volle Breite nutzen. */
.wt-karte-blank .wtas-wetter,
.wt-karte-blank .wtcu-wetter,
.wt-karte-blank .wtlt-wetter,
.wt-karte-blank .wtst-wetter,
.wt-karte-blank .wtmt-wetter,
.wt-karte-blank .wtin-wetter,
.wt-karte-blank .wttb-wetter,
.wt-karte-blank .wtgr-wetter,
.wt-karte-blank .wtdb-wetter { max-width: none; }

/* Die Shortcodes haben ihre eigene Überschrift. Steht schon eine vom Theme
   darüber, wäre die zweite doppelt gemoppelt. */
.wt-ohne-shortcode-titel .wtgr-masthead,
.wt-ohne-shortcode-titel .wtdb-masthead,
.wt-ohne-shortcode-titel .wtcu-masthead,
.wt-ohne-shortcode-titel .wtas-masthead { display: none; }

/* Nur die Überschrift weg, die Zeile mit Ort, Datum und Uhrzeit bleibt.
   Verwendet auf der Startseite, wo die Wortmarke schon darüber steht. */
.wt-ohne-shortcode-h2 .wtdb-masthead h2,
.wt-ohne-shortcode-h2 .wtgr-masthead h2,
.wt-ohne-shortcode-h2 .wtcu-masthead h2 { display: none; }

/* Ohne Überschrift rückt der Untertitel sonst an den Rand darüber. */
.wt-ohne-shortcode-h2 .wtdb-masthead,
.wt-ohne-shortcode-h2 .wtgr-masthead,
.wt-ohne-shortcode-h2 .wtcu-masthead { margin-top: 0; }

/* Auswahlfelder und Schaltflächen der Shortcodes an den Modus angleichen -
   Browser zeichnen sie sonst im Systemhell. */
body .wtgr-form select,
body .wttb-form select {
  background: var(--wt-surface-2);
  color: var(--wt-fg);
  border-color: var(--wt-border);
}

body .wtgr-chip,
body .wtgr-mchip { background: var(--wt-surface); }

body .wtgr-chip.wtgr-ist,
body .wtgr-mchip.wtgr-ist {
  background: var(--wt-accent);
  border-color: var(--wt-accent);
  color: #10141a;                      /* dunkle Schrift auf Gold, beide Modi */
}

body .wtgr-form button:hover,
body .wttb-form button:hover { background: var(--wt-accent); filter: brightness(.9); }

/* --- Texte, die auf dem Seitengrund stehen ------------------------------- */

/* Diese Zeilen liegen nicht auf einer Karte, sondern direkt über dem
   lebendigen Hintergrund. Dort reicht der gedämpfte Ton nicht: im
   nachgebauten Schichtstapel kam gedämpfter Text bei lebhaften Lagen auf
   3,2:1. Mit der helleren Fassung sind es 5,3:1. */
body .wt-karte-blank .wtdb-hinweis,
body .wt-karte-blank .wtdb-standort,
body .wt-karte-blank .wtgr-hinweis,
body .wt-karte-blank .wtnd-fussnote,
body .wt-karte-blank .wttp-fussnote,
body .wt-karte-blank .wtdb-fussnote,
body .wt-karte-blank .wtcu-footnote { color: var(--wt-muted-grund); }

/* Die goldene Untertitelzeile steht ebenfalls frei auf dem Hintergrund. */
body .wt-karte-blank .wtdb-sub,
body .wt-karte-blank .wtgr-sub,
body .wt-karte-blank .wtcu-sub { color: var(--wt-accent-grund); }

body .wt-karte-blank .wtdb-hinweis b,
body .wt-karte-blank .wtgr-hinweis b { color: var(--wt-fg); }

/* Zitate im freien Inhalt stehen auf der Startseite ohne Karte. */
.wt-karte-blank .wt-text blockquote { color: var(--wt-muted-grund); }

/* ==========================================================================
   Cookie-Hinweis von Orbit Fox (themeisle-companion)
   --------------------------------------------------------------------------
   Das Plugin schreibt seine Farben fest in ein <style> im Kopf:

       .obfx-cookie-bar { background: #fff; border: 1px solid #333; }

   Eine Schriftfarbe setzt es NICHT - die erbt es vom <body>. Im dunklen
   Modus ist das #e8edf2, also helles Grau auf weißem Grund: praktisch
   unlesbar. Genau das war zu sehen.

   Das Plugin-CSS steht an erster Stelle im Dokument, diese Datei als
   siebzehnte - die Reihenfolge genügt also schon. Das führende "body"
   steht trotzdem da, falls das Plugin sein <style> eines Tages in den Fuß
   verschiebt; dann entscheidet die Spezifität statt der Reihenfolge.

   Nachgerechnet: #e8edf2 auf #121820 = 15,1:1, #1c2226 auf #ffffff = 16,1:1.
   Die Verweise erben den Goldton des Themes und halten dort 4,7:1.
   ========================================================================== */

body .obfx-cookie-bar {
  background: color-mix(in srgb, var(--wt-surface) 94%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  color: var(--wt-fg);

  /* Statt eines Rahmens ringsum nur eine Trennlinie nach oben - die Leiste
     klebt ohnehin am unteren Rand, seitliche Kanten sähen nach Kasten aus. */
  border: 0;
  border-top: 1px solid var(--wt-border);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .3);

  font-size: 14.5px;
  line-height: 1.5;
}

@supports not (backdrop-filter: blur(1px)) {
  body .obfx-cookie-bar { background: var(--wt-surface); }
}

/* Das Kreuz zum Schließen sitzt rechts oben in der Leiste. */
body .obfx-close-cb { color: var(--wt-muted); }
body .obfx-close-cb:hover { color: var(--wt-fg); }