/* Hohes Kreuz - Wetterseite
   Ergaenzt style.css um die Bausteine, die nur hier vorkommen: die Tafel der
   aktuellen Messwerte, die Zeitraumwahl der Diagramme und die Kennwerttabelle.
   Es werden ausschliesslich die Farbrollen und Masse aus style.css benutzt,
   damit die Seite im hellen und im dunklen Modus zum Rest der Website passt. */

/* --------------------------------------------------------- Stand der Daten
   Eine Fussnote unter dem Leitwert: wann wurde gemessen, wie alt ist der
   Wert, in welchem Abstand wird gemessen. Deutlich kleiner als der Wert
   darueber - sie beantwortet eine Rueckfrage, sie stellt keine auf.
   Veraltete Werte werden ausdruecklich benannt, statt sie als aktuell
   auszugeben. Die Angaben stehen durch Mittelpunkte getrennt in einer
   Zeile, damit die Spalte auf dem Telefon nicht zur Kolonne wird. */
.page-head .wk-kopf__wert .wk-stand {
  margin: .55rem 0 0; font-family: var(--sans);
  font-size: .78rem; line-height: 1.5; color: #d6c9b4; max-width: 46ch;
}
.wk-stand time { font-variant-numeric: tabular-nums; }
.wk-stand .wk-alt { color: var(--brand); }

/* ------------------------------------------------------------- Leitwert
   Die Temperatur steht gross und allein - sie ist der Wert, den fast alle
   Besucher suchen. Alles weitere folgt in der Tafel darunter. */
/* Der Kopf ist eine einzige Spalte, auf jedem Bildschirm gleich: die
   Ueberschrift, die Zeile darunter, dann die Temperatur von jetzt mit
   ihren beiden Nebenzeilen. Sie liegt auf dem Kopfbild, traegt also
   dessen helle Schrift. */
.wk-kopf h1 { margin-bottom: .33em; }
.wk-kopf__wert { min-width: 0; margin-top: 1.6rem; }
.wk-leitwert { margin: 0; max-width: none; }
.wk-leitwert__zahl {
  display: block;
  font-family: var(--serif); font-weight: 600; line-height: 1;
  font-size: clamp(2.6rem, 8vw, 4rem); color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.wk-leitwert__zahl i {
  font-style: normal; font-size: .34em; color: #e4d9c6;
  margin-left: .12em; font-family: var(--sans);
}
/* Zweite Zeile unter der Zahl: gefuehlte Temperatur und Tagesspanne. */
.wk-leitwert__text {
  display: block; margin-top: .3rem;
  color: #e4d9c6; font-size: var(--step--1); line-height: 1.45;
}

/* Die Kacheln schliessen dicht an die Diagramme an - zwischen ihnen steht
   keine Ueberschrift mehr, also braucht es dort auch keinen Absatz. */
.wk-tafel { padding-top: 0; }

/* --------------------------------------------------------------- Messtafel
   Beschreibungsliste statt Tabelle: jedes Paar ist Bezeichnung und Wert.
   Auf dem Handy bleiben zwei Spalten stehen, damit die Seite nicht zu
   einer endlosen Kolonne wird. */
.wk-werte {
  display: grid; gap: 0; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  background: var(--surface-1);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
/* Die Trennlinien gehoeren den Zellen, nicht dem Abstand dazwischen: So
   bleibt eine nicht gefuellte Zelle in der letzten Reihe unsichtbar,
   statt als Farbfleck stehenzubleiben. Der negative Rand legt die Linie
   der ersten Reihe und Spalte auf den Rahmen. */
.wk-werte > div {
  padding: 1rem 1.1rem 1.05rem;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  margin: -1px 0 0 -1px;
}
.wk-werte dt {
  font-size: var(--step--1); color: var(--ink-3); margin: 0 0 .25rem;
  display: flex; align-items: baseline; gap: .35rem;
}
.wk-werte dd {
  margin: 0; font-family: var(--serif); font-size: var(--step-1);
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}
.wk-werte dd i {
  font-style: normal; font-size: .62em; font-weight: 400; color: var(--ink-3);
  margin-left: .2em; font-family: var(--sans);
}
.wk-werte dd small {
  display: block; margin-top: .3rem; font-size: .8rem; color: var(--ink-3);
  font-family: var(--sans); font-weight: 400; letter-spacing: .01em;
}
/* Tendenzpfeil: Richtung steckt im Zeichen, nicht nur in der Farbe. */
.wk-tendenz { font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

@media (min-width: 40rem) {
  .wk-werte { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

/* ------------------------------------------------------- Zeitraumwahl
   Vier Schalter fuer alle Diagramme gemeinsam. Ohne JavaScript bleiben sie
   verborgen, dann fuehrt der Weg ueber die weewx-Seiten weiter unten.

   Die Leiste bleibt beim Rollen oben stehen, solange Diagramme zu sehen
   sind: Wer beim letzten Diagramm den Zeitraum wechseln will, soll nicht
   erst zurueckrollen muessen. Sie klebt unter der Kopfleiste der Seite
   (min-height 4.2rem plus deren Trennlinie) und loest sich von selbst,
   sobald der Abschnitt mit den Diagrammen endet - mehr ist nicht noetig,
   weil position: sticky nur innerhalb des eigenen Elternelements haftet. */
.wk-spanne {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem;
  padding: .35rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-1); width: fit-content;
  position: sticky; top: calc(4.2rem + 1px); z-index: 20;
  /* Deckend und mit Schatten, damit die Zeichenflaeche, die darunter
     hindurchlaeuft, die Schalter nicht unleserlich macht. */
  box-shadow: 0 .35rem .9rem -.4rem rgb(0 0 0 / .22);
}
.wk-spanne button {
  font: inherit; font-size: var(--step--1); padding: .45rem .9rem;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
/* Lange Beschriftung auf dem Schreibtisch, kurze auf dem Handy. */
.wk-spanne .kurz { display: none; }
.wk-spanne button:hover { background: var(--surface-2); color: var(--ink); }
.wk-spanne button[aria-pressed="true"] {
  background: var(--brand); color: var(--surface-1); font-weight: 600;
}
:root[data-theme="dark"] .wk-spanne button[aria-pressed="true"],
.wk-spanne button[aria-pressed="true"] { color: var(--surface-0); }

/* Auf schmalen Schirmen (geprueft bei 375 px) stehen die vier Schalter in
   einer Zeile, mit kurzer Beschriftung und engeren Abstaenden. Zwei Zeilen
   waeren unter der Kopfleiste zu viel - die Leiste soll den Blick auf das
   Diagramm nicht verstellen, sondern nur erreichbar bleiben. Die Regel muss
   hinter .kurz { display: none } stehen, sonst gewinnt die gleich starke
   Grundregel ueber die Reihenfolge. */
@media (max-width: 29rem) {
  .wk-spanne {
    flex-wrap: nowrap; width: 100%; gap: .2rem; padding: .25rem;
    margin-bottom: 1rem;
  }
  .wk-spanne button { flex: 1 1 auto; padding: .4rem .35rem; text-align: center; }
  .wk-spanne .lang { display: none; }
  .wk-spanne .kurz { display: inline; }
}

/* ------------------------------------------------------------- Diagramme
   Die Grundform steckt in style.css (.figure, .chart, .legend, .tooltip).
   Hier kommen nur die Balken fuer den Niederschlag, der Hinweis fuer
   Zeitraeume ohne Werte und das zweispaltige Raster dazu.

   Auf breiten Schirmen stehen je zwei Diagramme nebeneinander: so bleibt
   die Seite trotz acht Messgroessen ueberschaubar. Auf dem Handy wird
   daraus eine Spalte - aber eine mit klaren Abstaenden, keine Endlosliste. */
.wk-diagramme {
  display: grid; gap: 1.5rem;
  /* min() haelt das Raster auch auf schmalen Schirmen in der Breite -
     ohne das erzwingt die Mindestbreite einen waagerechten Rollbalken. */
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  /* Die Karten einer Zeile sind gleich hoch. Unterschiedlich lange
     Einleitungen und Bildunterschriften ließen sie sonst verschieden weit
     nach unten reichen, was neben einer gleich hohen Zeichenfläche
     unaufgeräumt aussieht. */
  align-items: stretch;
}
.wk-diagramme > div { display: flex; flex-direction: column; }
.wk-diagramme > div > .figure {
  margin: 0; flex: 1; display: flex; flex-direction: column;
}
/* Die Zeichenfläche nimmt den Platz, die Bildunterschrift bleibt unten. */
.wk-diagramme > div > .figure > .figure__body { flex: 1; }
.wk-diagramme > div > .figure > figcaption { margin-top: auto; }
.chart .balken rect { shape-rendering: crispEdges; }

.chart .achsentitel { fill: var(--ink-3); font-size: 11px; }

/* -------------------------------------------------------- Stand von jetzt
   Der aktuelle Messwert stand bis zum 2.11.2026 im Diagramm selbst und
   musste dort den Kurven ausweichen. Jetzt steht er rechts oben im Kopf
   der Abbildung, auf einer Grundlinie mit der Ueberschrift und etwas
   kleiner als diese. Das Wort davor sagt, welcher Zeitpunkt gemeint ist;
   bei zwei Reihen steht vor jeder Zahl dieselbe Marke wie in der Legende. */
.wk-diagramme .figure__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .15rem .9rem;
}
.wk-diagramme .figure__head h3 { margin: 0; }
.wk-jetzt {
  margin: 0 0 0 auto; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .15rem .8rem;
}
.wk-jetzt__g { display: inline-flex; align-items: baseline; gap: .4rem; }
.wk-jetzt small { color: var(--ink-3); font-size: 1em; }
.wk-jetzt b {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--serif); font-weight: 600; font-size: 1.15em;
  font-variant-numeric: tabular-nums;
}
.wk-jetzt b i {
  width: 1rem; height: 0; border-top: 3px solid currentColor;
  border-radius: 2px; flex: none;
}
.wk-jetzt b i.dash { border-top-style: dashed; }
.wk-jetzt__z { color: var(--ink); }
/* Hinweiszeilen stehen unter breiten Rastern und duerfen deshalb nicht
   auf die schmale Lesespalte beschnitten werden. */
main .wrap > p.small { max-width: none; }

.wk-leer {
  margin: 0; padding: 2.2rem 1rem; text-align: center;
  font-size: var(--step--1); color: var(--ink-3);
}

/* ---------------------------------------------------------- Kennwerte
   Breite Tabellen bekommen in style.css schon einen Rollbereich; hier wird
   nur die Spaltenbreite gezaehmt und der Kopf abgesetzt. */
.wk-tabelle { margin: 0 0 1.4rem; }
.wk-tabelle .scroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-1);
}
.wk-tabelle table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.wk-tabelle caption {
  text-align: left; padding: 0 0 .5rem; font-size: var(--step--1);
  color: var(--ink-3);
}
.wk-tabelle th, .wk-tabelle td {
  padding: .6rem .85rem; text-align: left; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.wk-tabelle thead th {
  background: var(--surface-2); color: var(--ink-2); font-weight: 600;
  position: sticky; top: 0;
}
.wk-tabelle tbody th { font-weight: 600; color: var(--ink); }
.wk-tabelle tbody tr:last-child th, .wk-tabelle tbody tr:last-child td { border-bottom: 0; }
.wk-tabelle td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Kopfzellen stehen wie ihr Spalteninhalt: Zahlenspalten rechtsbuendig,
   die Messgroessenspalte links. Die Klasse num setzt das JavaScript schon
   an Kopf- und Datenzellen, die Regel gilt deshalb fuer beide. */
.wk-tabelle .num { text-align: right; }
.wk-tabelle .wk-zeit { display: block; font-size: .8rem; color: var(--ink-3); }

/* Der Verweis auf die Wetterstation, als Kachel. */
.wk-seiten {
  display: grid; gap: .7rem; margin: 1.4rem 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.wk-seiten a {
  display: block; padding: .8rem 1rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--ink-2); font-size: var(--step--1);
  transition: border-color .18s ease, color .18s ease;
}
.wk-seiten a:hover { border-color: var(--brand); color: var(--ink); }

/* -------------------------------------------------- Bewegung und Druck
   Dieselbe sparsame Einblendung wie auf den anderen Seiten, mit demselben
   Keyframe aus style.css. Wer weniger Bewegung wuenscht, bekommt keine. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wk-werte, .wk-tabelle, .wk-seiten {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}

@media print {
  .wk-spanne { display: none !important; }
}