/* =========================================================================
   Klimastand Österreich
   Token-Block 1:1 aus DESIGN.md. Werte werden hier nicht erfunden und nicht
   geändert – wenn sich das Design ändert, ändert sich zuerst DESIGN.md.
   Unterhalb der Token-Blöcke steht kein einziger Farbwert mehr.
   ========================================================================= */

/* -------------------------------------------------------------- Schriften

   Lokal eingebunden, kein Google-Fonts-Link: AGENTS.md verbietet fremde CDNs
   aus Datenschutzgründen. Beide Familien stehen unter der SIL Open Font
   License 1.1 – die Lizenztexte liegen in src/fonts/ daneben, wie es die
   Lizenz verlangt.

   Es sind Variable Fonts: eine Datei deckt den gesamten Bereich 400–700 ab,
   statt vier einzelner Schnitte. Zusammen 172 KB, davon lädt der Browser im
   Normalfall nur die beiden latin-Dateien.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Fustat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fustat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fustat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fustat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- Tokens

   Der Dunkelmodus folgt der Systemeinstellung und lässt sich im Kopf der
   Seite übersteuern. Deshalb dreimal derselbe Wertesatz: Voreinstellung hell,
   Systempräferenz dunkel (sofern nicht ausdrücklich hell gewählt), und
   ausdrücklich dunkel gewählt.
   -------------------------------------------------------------------------- */

:root {
  --color-background:     #E2E7F1;
  --color-surface:        #FFFFFF;
  --color-surface-subtle: #F4F7FC;

  --color-text:        #4C5267;
  --color-text-strong: #244C4E;
  --color-muted:       #6C7386;
  --color-link:        #2F7A0A;
  --color-link-hover:  #244C4E;

  --color-border:        #E2E7F1;
  --color-border-strong: #CBD6E6;

  --color-accent:        #9EEA6C;
  --color-accent-on:     #244C4E;
  --color-accent-strong: #58C411;
  --color-accent-soft:   #89BA4F;
  --color-outline:       #337D63;

  --color-ok:    #2F7D32;
  --color-warn:  #B26A00;
  --color-error: #B3261E;
  --color-info:  #2A78D6;

  /* Datenreihen: Serie 1 = heuer, Serie 2 = Mittel 1991–2020 */
  --color-serie-1: #0E9384;
  --color-serie-2: #EB6834;
  --color-serie-3: #2A78D6;
  --color-serie-4: #EDA100;
  --color-serie-5: #4A3AA7;
  --color-serie-mittel: #9AA3B5;

  /* Seitenleiste – eigene Rollen, aber sie folgt dem Modus (ADR-022) */
  --color-leiste:        #FFFFFF;
  --color-leiste-tief:   #F1F5F4;
  --color-leiste-aktiv:  #E7EFED;
  --color-leiste-text:   #4C5267;
  --color-leiste-stark:  #244C4E;
  --color-leiste-rahmen: #779392;
  --color-leiste-akzent: #337D63;
  --color-leiste-fehler: #B3261E;

  /* Halo um die Kartenmarker – ohne Modus-Wert, die Kacheln sind immer hell */
  --color-karte-ring: #16302F;

  /* Badge-Flächen, pastellig – der Text trägt die kräftige Statusfarbe */
  --color-ok-flaeche:    #E8F5E9;
  --color-error-flaeche: #FDECEA;
  --color-warn-flaeche:  #FFF4DB;
  --color-info-flaeche:  #EAF2FE;

  --font-display: "Fustat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-base:   1.0625rem;
  --line-height-base: 1.8;
  --tracking-display: -0.03em;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;

  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --radius: var(--radius-md);

  --shadow-low:   0 2px 8px rgba(36, 76, 78, 0.08);
  --shadow-hover: 0 8px 24px rgba(36, 76, 78, 0.14);
  --shadow: var(--shadow-low);

  --leiste-breite: 280px;
  --inhalt-breite: 1240px;
  --touch: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background:     #0F2423;
    --color-surface:        #16302F;
    --color-surface-subtle: #1C3B39;

    --color-text:        #C3D4D2;
    --color-text-strong: #EAF3F0;
    --color-muted:       #93AAA8;
    --color-link:        #B7F08E;
    --color-link-hover:  #EAF3F0;

    --color-border:        #2A4E4C;
    --color-border-strong: #3C6663;

    --color-accent:    #9EEA6C;
    --color-accent-on: #16302E;

    --color-serie-1: #1FA08E;
    --color-serie-2: #F0805A;
    --color-serie-3: #3987E5;
    --color-serie-4: #C98500;
    --color-serie-5: #9085E9;
    --color-serie-mittel: #6E8A88;

    --color-leiste:        #16302F;
    --color-leiste-tief:   #0F2423;
    --color-leiste-aktiv:  #1C3B39;
    --color-leiste-text:   #C3D4D2;
    --color-leiste-stark:  #EAF3F0;
    --color-leiste-rahmen: #52807C;
    --color-leiste-akzent: #9EEA6C;
    --color-leiste-fehler: #F49384;

    --color-ok:    #86D98A;
    --color-warn:  #F0C069;
    --color-error: #F49384;
    --color-info:  #8FBDF5;

    --color-ok-flaeche:    #1B3A2A;
    --color-error-flaeche: #3D2220;
    --color-warn-flaeche:  #3A2F18;
    --color-info-flaeche:  #1B2F44;

    --shadow-low:   0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --color-background:     #0F2423;
  --color-surface:        #16302F;
  --color-surface-subtle: #1C3B39;

  --color-text:        #C3D4D2;
  --color-text-strong: #EAF3F0;
  --color-muted:       #93AAA8;
  --color-link:        #B7F08E;
  --color-link-hover:  #EAF3F0;

  --color-border:        #2A4E4C;
  --color-border-strong: #3C6663;

  --color-accent:    #9EEA6C;
  --color-accent-on: #16302E;

  --color-serie-1: #1FA08E;
  --color-serie-2: #F0805A;
  --color-serie-3: #3987E5;
  --color-serie-4: #C98500;
  --color-serie-5: #9085E9;
  --color-serie-mittel: #6E8A88;

  --color-leiste:        #16302F;
  --color-leiste-tief:   #0F2423;
  --color-leiste-aktiv:  #1C3B39;
  --color-leiste-text:   #C3D4D2;
  --color-leiste-stark:  #EAF3F0;
  --color-leiste-rahmen: #52807C;
  --color-leiste-akzent: #9EEA6C;
  --color-leiste-fehler: #F49384;

  --color-ok:    #86D98A;
  --color-warn:  #F0C069;
  --color-error: #F49384;
  --color-info:  #8FBDF5;

  --color-ok-flaeche:    #1B3A2A;
  --color-error-flaeche: #3D2220;
  --color-warn-flaeche:  #3A2F18;
  --color-info-flaeche:  #1B2F44;

  --shadow-low:   0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* -------------------------------------------------------------- Grundlage */

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: var(--line-height-base);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-strong);
  line-height: 1.15;
  margin: 0;
}

h1 { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.1rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }

p { margin: 0; }
a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }
svg { display: block; }

:focus-visible {
  outline: 3px solid var(--color-text-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprunglink {
  position: absolute;
  left: var(--space-2);
  top: -4rem;
  z-index: 20;
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent);
  color: var(--color-accent-on);
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
}
.sprunglink:focus { top: var(--space-2); color: var(--color-accent-on); }

.zart { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ----------------------------------------------------------- Seitenleiste

   Auf dem Desktop eine volle Bildschirmhoehe hoch und ohne Scrollbalken: die
   beiden Ortsfelder teilen sich den Platz, der zwischen Eingaben und
   Quellenblock uebrig bleibt, und die Kartenausschnitte fuellen ihn aus.
   Gezeichnet wird deshalb auf die gemessene Groesse, nicht auf eine feste
   (siehe kartenZeichnen in app.js).
   -------------------------------------------------------------------------- */

.seitenleiste {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-leiste);
  color: var(--color-leiste-text);
  line-height: 1.45;
  /* Im Hellen liegt eine helle Flaeche auf einem hellen Hintergrund – die
     Kante macht die Leiste zur Leiste. Im Dunkeln schadet sie nicht. */
  border-block-end: 1px solid var(--color-leiste-rahmen);
}

.seitenleiste__felder {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
}

.quellenbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: auto;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-leiste-aktiv);
  font-size: 0.78rem;
  line-height: 1.5;
}
.quellenbox__zeichen {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 3px;
  color: var(--color-leiste-akzent);
}
.quellenbox__zeichen svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------- Eingaben */

.ortfeld { display: flex; flex-direction: column; gap: 6px; min-height: 0; }

.ortfeld__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-leiste-stark);
}

.ortfeld__eingabe { position: relative; }

.feld {
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--space-2);
  font: inherit;
  color: var(--color-leiste-stark);
  background: var(--color-leiste-tief);
  border: 1px solid var(--color-leiste-rahmen);
  border-radius: var(--radius-sm);
}
.feld::placeholder { color: var(--color-leiste-text); }

/* Abwahl des Vergleichsstandorts: sitzt im Feld, weil sie zu diesem einen Feld
   gehoert. Der Text weicht ihr nur aus, solange sie dasteht. */
.ortfeld__abwahl {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-leiste-text);
  cursor: pointer;
}
.ortfeld__abwahl svg { width: 15px; height: 15px; }
.ortfeld__abwahl:hover {
  color: var(--color-leiste-stark);
  border-color: var(--color-leiste-rahmen);
  background: var(--color-leiste-aktiv);
}
.ortfeld__eingabe:has(.ortfeld__abwahl:not([hidden])) .feld { padding-inline-end: 42px; }
.seitenleiste :focus-visible { outline-color: var(--color-leiste-akzent); }

.vorschlaege {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 4px);
  z-index: 10;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  max-height: 17rem;
  overflow-y: auto;
}
.vorschlag {
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.35;
}
.vorschlag[aria-selected="true"] {
  background: var(--color-surface-subtle);
  outline: 2px solid var(--color-text-strong);
  outline-offset: -2px;
}
.vorschlag__name { font-weight: 600; color: var(--color-text-strong); }
.vorschlag__lage { display: block; font-size: 0.82rem; color: var(--color-muted); }

.ortfeld__status { font-size: 0.8rem; line-height: 1.4; }
.ortfeld__status[data-art="fehler"] { color: var(--color-leiste-fehler); font-weight: 600; }
.ortfeld__status:empty { display: none; }

/* Die Zusatzdaten zum gewaehlten Ort – Bundesland, Bezirk, Seehoehe.
   Der Name steht schon im Eingabefeld darueber und wird nicht wiederholt. */
.ortfeld__lage { font-size: 0.78rem; line-height: 1.4; }
.ortfeld__lage:empty { display: none; }

/* ----------------------------------------------------------------- Inhalt */

.inhalt {
  padding: var(--space-3) var(--space-2) var(--space-5);
  max-width: var(--inhalt-breite);
}

.kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.kopfzeile__text { flex: 1 1 22rem; }
.kopfzeile__unter { max-width: 62ch; margin-top: 6px; }

/* Versionsstand neben dem Moduswechsel. Gleiche Rolle wie die Lage-Zeile in
   der Seitenleiste: kleine Nebenangabe im Fliesstext-Schnitt, nicht im
   Titelschnitt der Ueberschrift daneben. Farbe ist --color-text, nicht
   --color-muted: Muted erreicht auf der Seitenflaeche im Hellen nur 3,82:1,
   noetig sind 4,5:1 fuer kleinen Text. Die Lage-Zeile haelt es genauso - sie
   erbt die Textfarbe der Leiste, keine gedaempfte. */
.kopfzeile__aktionen {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.kopfzeile__version { font-size: 0.78rem; line-height: 1.4; color: var(--color-text); }

.rubrik {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 6px;
}

.rundknopf {
  display: grid;
  place-items: center;
  width: var(--touch); height: var(--touch);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-strong);
  cursor: pointer;
}
.rundknopf svg { width: 20px; height: 20px; }
.rundknopf:hover { border-color: var(--color-text-strong); }

/* ----------------------------------------------------------------- Karten */

.karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.karte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.karte__unter {
  max-width: 62ch;
  margin-top: 4px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.raster-zwei { display: grid; gap: var(--space-2); }

/* ------------------------------------------------ Steuerung des Diagramms */

.groessenwahl {
  min-height: 40px;
  max-width: 100%;
  padding: 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-strong);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Kein Zustand allein ueber Farbe: Das abgeschaltete Feld sagt daneben, warum. */
.vergleichwahl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.88rem;
  line-height: 1.35;
}
.vergleichwahl input { width: 20px; height: 20px; accent-color: var(--color-outline); }
.vergleichwahl label { cursor: pointer; }
.vergleichwahl:has(input:disabled) label { cursor: not-allowed; }
.vergleichwahl:has(input:disabled) label { color: var(--color-muted); }

/* Kennzahlen und Verlaufsdiagramm als eine Reihe. Gestapelt sind sie zusammen
   ueber 1000px hoch und zwingen zum Scrollen, obwohl daneben Platz frei liegt
   (ADR-023).

   Bewusst Flexbox mit Umbruch statt eines dritten Breakpoints: Massgeblich ist
   die Breite, die der Reihe bleibt, nicht die des Fensters – und die haengt
   auch daran, ob die Seitenleiste danebensteht. Reicht es nicht fuer 15rem
   Kacheln neben 38rem Diagramm, bricht die Reihe von selbst um, und beide
   nehmen die volle Breite. Die Kacheln stehen in der schmalen Spalte
   untereinander und in der breiten nebeneinander, ohne eigene Regel: Das
   erledigt das auto-fit ihres eigenen Rasters. */
.ueberblick {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;   /* buendig: beide Bloecke enden auf derselben Linie */
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
/* Die Kacheln bleiben nahe an ihrer Grundbreite, der Rest geht ans Diagramm:
   Deshalb das ungleiche flex-grow, nicht etwa eine feste Breite. Eine feste
   Breite wuerde nach dem Umbruch stehen bleiben, statt die Zeile zu fuellen. */
.ueberblick > .kacheln { flex:  1 1 15rem; min-width: 0; }
.ueberblick > .karte   { flex: 20 1 38rem; min-width: 0; }
.ueberblick > .kacheln,
.ueberblick > .karte { margin-bottom: 0; }
/* Die Kacheln geben die Hoehe der Reihe vor und werden selbst nie gestreckt:
   Sonst wuerden sie sich beim Aufklappen der Wertetabelle in die Laenge
   ziehen. Gestreckt wird die Diagrammkarte - zugeklappt auf die Hoehe der
   Kacheln, aufgeklappt waechst sie darueber hinaus und laesst sie in Ruhe.
   Damit das aufgeht, bleibt die Karte zugeklappt knapp unter den Kacheln;
   dafuer ist die viewBox-Hoehe des Verlaufs gewaehlt (siehe diagramme.js).
   grid-auto-rows: 1fr haelt die vier Kacheln untereinander gleich hoch. */
.ueberblick > .kacheln { align-self: flex-start; grid-auto-rows: 1fr; }

/* Die Restluft der gestreckten Karte gehoert um das Diagramm, nicht unter die
   Klappe: Sonst steht "Werte als Tabelle" mitten in der Karte statt an ihrem
   Fuss. */
.ueberblick > .karte { display: flex; flex-direction: column; }
.ueberblick > .karte > .diagramm {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
}

/* ----------------------------------------------------------------- Banner */

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.banner__text { flex: 1 1 20rem; line-height: 1.6; }
.banner__text strong { color: var(--color-text-strong); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge svg { width: 14px; height: 14px; }
/* Richtung und Ausmass tragen Pfeil, Vorzeichen und Wort - nicht die Farbe.
   Rot und Gruen behaupteten "schlecht" und "gut"; solange nur der Niederschlag
   dastand, stimmte das, neben "Hitzetage" nicht mehr. Die Seite liefert
   Witterung, keine Beratung (AGENTS.md, ADR-026). Die Kennzahlentabelle hielt
   es immer schon so.

   "vorlaeufig" bleibt farbig: Das ist ein Zustand der Daten, keine Bewertung
   des Wetters - und Gelb warnt hier vor der Zahl, nicht vor dem Jahr. */
.badge[data-art="tief"],
.badge[data-art="hoch"],
.badge[data-art="normal"]     { background: var(--color-surface-subtle); color: var(--color-text); }
.badge[data-art="vorlaeufig"] { background: var(--color-warn-flaeche);  color: var(--color-warn); }

/* ---------------------------------------------------------------- Kacheln */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.kachel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.kachel__titel { font-size: 0.88rem; line-height: 1.3; }
.kachel__wert {
  display: block;
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--color-text-strong);
}
.kachel__einheit {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-muted);
}
.kachel__unter { font-size: 0.85rem; line-height: 1.4; color: var(--color-muted); }

/* -------------------------------------------------------------- Diagramme */

.diagramm svg { width: 100%; height: auto; overflow: visible; }

.legende { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.legende__eintrag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.legende__marke { width: 16px; height: 3px; border-radius: 2px; }

.achse      { stroke: var(--color-border-strong); stroke-width: 1; }
.raster     { stroke: var(--color-border); stroke-width: 1; }
.achsentext { fill: var(--color-muted); font-size: 12px; font-family: var(--font-sans); }
/* Die Reihennummer traegt die Farbe, nicht die Rolle: Seit Spec 002 koennen
   vier Kurven im Bild stehen - zwei Standorte mal heuer und Mittel. Serie 1/2
   ist der Betrieb, Serie 3/4 der Vergleichsstandort, das Mittel jeweils
   gestrichelt. Die Zuordnung traegt die Farbe, deshalb steht der Name
   zusaetzlich direkt an jeder Kurve. */
[data-reihe="1"] { --serie: var(--color-serie-1); }
[data-reihe="2"] { --serie: var(--color-serie-2); }
[data-reihe="3"] { --serie: var(--color-serie-3); }
[data-reihe="4"] { --serie: var(--color-serie-4); }

.serie          { stroke: var(--serie); fill: none; stroke-width: 2.5; }
.serie--strich  { stroke-dasharray: 7 5; }
.serie-flaeche  { fill: var(--serie); opacity: 0.12; }
.punkt          { fill: var(--serie); }
.balken         { fill: var(--serie); }
.endwert        { fill: var(--serie); font-size: 13px; font-weight: 600; font-family: var(--font-sans); }
.endwert__unter { fill: var(--color-muted); font-weight: 500; font-size: 12px; }
.balkentext     { fill: var(--serie); font-size: 12px; font-weight: 600; font-family: var(--font-sans); }

.notiz {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--color-info-flaeche);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  line-height: 1.5;
}

.tabellenklappe { margin-top: var(--space-2); }
.tabellenklappe summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-link);
  padding: 6px 0;
}
.tabellenklappe summary:hover { color: var(--color-link-hover); }
.tabellenklappe .tabelle-rahmen { margin-top: var(--space-2); }

/* --------------------------------------------------------------- Tabellen */

.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.tabelle th, .tabelle td {
  padding: var(--space-1) var(--space-2);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  vertical-align: top;
}
.tabelle thead th {
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-strong);
}
.tabelle tbody tr:last-child td, .tabelle tbody tr:last-child th { border-bottom: 0; }

/* Die Beschriftungsspalte steht links, im Kopf wie im Koerper.
   Ueber thead th:first-child statt ueber eine Klasse: Die Grundregel
   ".tabelle th, .tabelle td" ist mit text-align: right spezifischer als eine
   Klasse allein - im tbody fiel das nie auf, weil ".tabelle tbody th" ohnehin
   gewinnt, im thead schon. In beiden Tabellen ist die erste Spalte die
   Beschriftungsspalte, damit faellt auch "Monat" nicht mehr aus der Reihe. */
.tabelle thead th:first-child { text-align: left; }

.tabelle__kennzahl, .tabelle tbody th {
  text-align: left;
  white-space: normal;
  min-width: 12rem;
  color: var(--color-text-strong);
  font-weight: 600;
}
.tabelle--monate th:first-child, .tabelle--monate td:first-child { min-width: 5rem; }

.wert { display: block; font-weight: 600; color: var(--color-text-strong); }
.wert__einheit { font-weight: 500; color: var(--color-muted); font-size: 0.85em; }
.mittel { display: block; font-size: 0.85rem; color: var(--color-muted); line-height: 1.4; }
.veraenderung {
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-text-strong);
}
.rang { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.4; color: var(--color-muted); }
.rang[data-auffaellig="true"] { font-weight: 600; color: var(--color-text-strong); }
.quelle {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}
.keine-daten { color: var(--color-muted); font-weight: 500; }
.laedt { display: inline-block; color: var(--color-muted); font-weight: 500; }
.laedt::after {
  content: "";
  display: inline-block;
  width: 3rem; height: 0.7em;
  margin-left: var(--space-1);
  vertical-align: middle;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-strong);
}

/* ----------------------------------------------------------------- Karten */

.ortkarte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.ortkarte:empty { display: none; }

.ortkarte__rahmen {
  position: relative;
  height: 148px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-leiste-rahmen);
  background: var(--color-leiste-tief);
}

.karte__flaeche { position: relative; overflow: hidden; user-select: none; }
.karte__kachel { position: absolute; width: 256px; height: 256px; }

.marker {
  position: absolute;
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.marker--ort {
  width: 13px; height: 13px;
  background: var(--color-accent);
  border: 2px solid var(--color-karte-ring);
  box-shadow: 0 0 0 1px var(--color-accent);
}
.marker--raster {
  width: 11px; height: 11px;
  background: var(--color-serie-2);
  border: 2px solid var(--color-karte-ring);
}

.ortkarte__vollbild {
  position: absolute;
  top: 6px; right: 6px;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--color-leiste-rahmen);
  border-radius: var(--radius-sm);
  background: var(--color-leiste);
  color: var(--color-leiste-stark);
  cursor: pointer;
}
.ortkarte__vollbild svg { width: 16px; height: 16px; }
.ortkarte__vollbild:hover {
  color: var(--color-leiste-akzent);
  border-color: var(--color-leiste-akzent);
}

.ortkarte__fuss { font-size: 0.72rem; line-height: 1.4; }

/* Die Vollbildkarte: ein eigenes Fenster über der Seite. Als <dialog>, damit
   Esc schließt, der Fokus gefangen bleibt und kein Popup-Blocker dazwischen
   geht – das leistet ein window.open nicht. */
.kartenfenster {
  width: min(94vw, 1000px);
  max-width: none;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-hover);
}
.kartenfenster::backdrop { background: rgba(15, 36, 35, 0.6); }

.kartenfenster__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
}
.kartenfenster__unter { margin-top: 4px; font-size: 0.9rem; color: var(--color-muted); }

/* Der Ausschnitt im Vollbild ist verschiebbar (ADR-027). Gezeichnet wird eine
   Flaeche, die groesser ist als dieser Rahmen; das Verschieben macht der
   Browser. Kein zentrierendes Flexbox-Layout mehr: Bei Inhalt, der groesser
   ist als der Rahmen, waere der ueberstehende Anfang nicht mehr erreichbar. */
.kartenfenster__karte {
  height: min(60vh, 560px);
  overflow: auto;
  /* Am Rand des Ausschnitts nicht die Seite dahinter mitscrollen. */
  overscroll-behavior: contain;
  background: var(--color-surface-subtle);
  border-block: 1px solid var(--color-border);
  cursor: grab;
}
.kartenfenster__karte[data-zieht] { cursor: grabbing; }
/* Der Fokusring liegt innen: aussen schneiden ihn die Rahmenlinien ab. */
.kartenfenster__karte:focus-visible { outline-offset: -3px; }

.kartenfenster__fuss {
  padding: var(--space-2) var(--space-3) var(--space-3);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* ---------------------------------------------------------- Hinweis, Knopf */

.hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.hinweis__text { flex: 1 1 20rem; font-size: 0.92rem; line-height: 1.5; }

.knopf {
  min-height: var(--touch);
  padding: 0 var(--space-3);
  font: inherit;
  font-weight: 600;
  color: var(--color-accent-on);
  background: var(--color-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.knopf:hover { border-color: var(--color-text-strong); }
.knopf--sekundaer {
  background: transparent;
  color: var(--color-text-strong);
  border-color: var(--color-text-strong);
}

/* ----------------------------------------------------------- Definitionen */

.definitionen { margin: 0; }
.definition { padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.definition:first-child { border-top: 0; padding-top: 0; }
.definition dt { font-weight: 600; color: var(--color-text-strong); }
.definition dd { margin: 0; font-size: 0.92rem; line-height: 1.6; }

/* --------------------------------------------------------------------- Fuß */

.fuss { padding-top: var(--space-3); border-top: 1px solid var(--color-border-strong); }
.fuss__liste {
  margin: 0;
  padding-left: var(--space-3);
  font-size: 0.86rem;
  line-height: 1.7;
}
.fuss__liste li { margin-bottom: 4px; }
.fuss__liste strong { color: var(--color-text-strong); }

/* ------------------------------------------------------------ Breakpoints */

@media (min-width: 640px) {
  .inhalt { padding-inline: var(--space-3); }
  .karte { padding: var(--space-3) var(--space-4); }
}

@media (min-width: 1024px) {
  .rahmen {
    display: grid;
    grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
    align-items: start;
  }
  .seitenleiste {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    /* Nebeneinander statt uebereinander: die Kante wandert an die Seite */
    border-block-end: 0;
    border-inline-end: 1px solid var(--color-leiste-rahmen);
  }
  /* Die Felder nehmen die Resthoehe, die Karten darin den Rest davon.
     overflow-y bleibt als Notausgang fuer sehr niedrige Fenster. */
  .seitenleiste__felder { flex: 1 1 auto; }
  .ortfeld[data-karte="true"] { flex: 1 1 0; }
  .ortkarte { flex: 1 1 0; }
  .ortkarte__rahmen { flex: 1 1 0; height: auto; min-height: 92px; }
  .quellenbox { flex: 0 0 auto; }
  .inhalt { padding: var(--space-3) var(--space-4) var(--space-5); }
  .raster-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tabelle__kennzahl, .tabelle tbody th { min-width: 16rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* Muss ganz am Schluss stehen: Attributselektor und Klasse haben dieselbe
   Spezifität, also gewinnt die spätere Regel. Sonst überstimmt ein
   display-Wert wie bei .hinweis das hidden-Attribut. */
[hidden] { display: none; }