/* =========================================================================
   Waldzustands-Monitor - Gestaltungsgrundlage
   =========================================================================

   Handgeschriebenes CSS ohne Framework. [ANF]

   Aufbau der Datei:
     1. Designtokens         - Farben, Typografie, Abstaende, Radien
     2. Grundlagen           - Zuruecksetzen, Grundeinstellungen, Fokus
     3. Typografie           - Ueberschriften, Fliesstext, Verweise
     4. Layout               - Behaelter, Raster, Inhaltsbereich
     5. Bausteine            - Kopfzeile, Navigation, Karten, Tabellen, Fusszeile
     6. Hilfsklassen
     7. Besondere Ausgabemodi - Bewegung, Kontrast, Druck

   Namensschema (angelehnt an BEM, deutsche Begriffe):
     .baustein               Block
     .baustein__teil         Element innerhalb des Blocks
     .baustein--variante     Abwandlung des Blocks

   Farbwerte stehen ausschliesslich in Abschnitt 1. Kein Baustein enthaelt
   einen festen Farbwert; dadurch bleibt die Palette an einer Stelle pflegbar
   und laesst sich mit bin/kontrast.php automatisiert pruefen.
   Die gemessenen Kontrastverhaeltnisse stehen in docs/barrierefreiheit.md.
   ========================================================================= */


/* =========================================================================
   1. Designtokens
   ========================================================================= */

:root {
    /* Die Anwendung ist auf helle Darstellung ausgelegt; die Angabe
       verhindert, dass Browser eigenmaechtig dunkel einfaerben. */
    color-scheme: light;

    /* --- Farben: Grundtoene ---------------------------------------------
       Warmes Papierweiss statt reinem Weiss. Das nimmt der Flaeche die
       Haerte und ist Grundlage des ruhigen Gesamteindrucks. */
    --farbe-papier: #faf9f6;
    --farbe-papier-gedaempft: #f0eee6;
    --farbe-flaeche: #ffffff;

    /* --- Farben: Schrift -------------------------------------------------
       Die Textfarbe ist kein reines Schwarz, sondern ein sehr dunkles
       Waldgruen. Sie wirkt auf warmem Papier weicher, erreicht aber
       weiterhin ein Kontrastverhaeltnis weit ueber der Anforderung. */
    --farbe-tinte: #18241c;
    --farbe-tinte-gedaempft: #47564c;

    /* --- Farben: Akzent --------------------------------------------------
       Waldgruen fuer Verweise, aktive Zustaende und Auszeichnungen. */
    --farbe-akzent: #1c5637;
    --farbe-akzent-dunkel: #123c26;
    --farbe-akzent-flaeche: #e4ece5;

    /* --- Farben: Zustaende ----------------------------------------------
       Warnung und Fokus in Rostoenen. Sie stammen aus derselben warmen
       Familie wie das Papier und heben sich klar vom Gruen ab. */
    --farbe-warnung: #8a3a12;
    --farbe-warnung-flaeche: #f8ece3;
    --farbe-fokus: #94480a;

    /* --- Farben: Linien -------------------------------------------------- */
    --farbe-linie: #dcd8cc;
    --farbe-linie-stark: #857e6c;

    /* --- Farben: Fusszeile -----------------------------------------------
       Eigener Satz Tokens, weil die Fusszeile die Umkehrung des Seitenbilds
       ist. Der Baustein bildet sie in Abschnitt 5 auf die Grundtokens ab. */
    --farbe-fuss-grund: #18241c;
    --farbe-fuss-text: #e8ece5;
    --farbe-fuss-gedaempft: #b2bdb0;
    --farbe-fuss-linie: #35473c;
    --farbe-fuss-verweis: #a9d6b6;
    --farbe-fuss-fokus: #f0b978;

    /* --- Schriftfamilien --------------------------------------------------
       Bewusst ausschliesslich Systemschriften: keine Webschrift bedeutet
       keinen Nachladevorgang und damit keine Verschiebung des Layouts
       waehrend des Seitenaufbaus. [ANF]
       Ueberschriften in einer Serifenschrift, Fliesstext serifenlos - das
       gibt der Anwendung ein eigenes, redaktionelles Bild. */
    --schrift-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
    --schrift-sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* --- Schriftgroessen -------------------------------------------------
       Modulare Skala. Die grossen Grade wachsen mit der Fensterbreite
       (clamp), die kleinen bleiben fest, damit Beschriftungen auf kleinen
       Geraeten lesbar bleiben. */
    --schrift-2xs: 0.75rem;
    --schrift-xs: 0.8125rem;
    --schrift-s: 0.9375rem;
    --schrift-m: 1.0625rem;
    --schrift-l: 1.1875rem;
    --schrift-xl: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
    --schrift-2xl: clamp(1.75rem, 1.52rem + 1vw, 2.375rem);
    --schrift-3xl: clamp(2.125rem, 1.74rem + 1.7vw, 3rem);

    /* --- Zeilenhoehen und Laufweiten -------------------------------------- */
    --zeilenhoehe-eng: 1.18;
    --zeilenhoehe-mittel: 1.35;
    --zeilenhoehe-normal: 1.6;
    --laufweite-eng: -0.015em;
    --laufweite-weit: 0.09em;

    /* --- Abstandsskala ---------------------------------------------------
       Eine einzige Skala fuer Innen- und Aussenabstaende. Werte ausserhalb
       der Skala kommen in den Bausteinen nicht vor. */
    --abstand-1: 0.25rem;
    --abstand-2: 0.5rem;
    --abstand-3: 0.75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2rem;
    --abstand-7: 3rem;
    --abstand-8: 4rem;

    /* --- Radien -----------------------------------------------------------
       Klein gehalten; stark gerundete Ecken wirken verspielt und passen
       nicht zu einer fachlichen Auswertung. */
    --radius-s: 2px;
    --radius-m: 4px;
    --radius-l: 10px;
    --radius-rund: 999px;

    /* --- Breiten ----------------------------------------------------------
       --breite-inhalt begrenzt die Seite auf grossen Bildschirmen,
       --breite-text die Zeilenlaenge von Fliesstext auf ein gut lesbares
       Mass. */
    --breite-inhalt: 72rem;
    --breite-text: 38rem;

    /* --- Erhebung ---------------------------------------------------------
       Ein einziger, sehr zurueckhaltender Schatten. */
    --schatten-sanft: 0 1px 2px rgba(24, 36, 28, 0.05), 0 10px 24px -18px rgba(24, 36, 28, 0.35);

    /* --- Rahmenstaerke des Fokusrings -------------------------------------- */
    --fokus-staerke: 3px;
    --fokus-abstand: 2px;
}


/* =========================================================================
   2. Grundlagen
   ========================================================================= */

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

html {
    /* Platz fuer die Bildlaufleiste dauerhaft freihalten: der Inhalt
       springt dadurch nicht seitlich, wenn eine Seite laenger wird. [ANF] */
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--farbe-papier);
    color: var(--farbe-tinte);
    font-family: var(--schrift-sans);
    font-size: var(--schrift-m);
    line-height: var(--zeilenhoehe-normal);
    /* Deutsche Fachbegriffe sind lang (Kronenverlichtung, Baumartengruppe).
       Silbentrennung und Umbruch verhindern seitliches Ueberlaufen auf
       schmalen Geraeten. */
    hyphens: auto;
    overflow-wrap: break-word;
    /* Die Seite fuellt mindestens die Fensterhoehe, damit die Fusszeile auf
       kurzen Seiten unten steht und nicht in der Mitte haengt. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img,
svg {
    max-width: 100%;
}

/* Bilder erhalten ihr Seitenverhaeltnis aus den Attributen width und height;
   dadurch steht ihr Platz vor dem Laden fest. */
img {
    height: auto;
}

/* --- Fokus -----------------------------------------------------------------
   Eigenstaendiger Fokusring in Rost: deutlich sichtbar, klar vom Gruen der
   Verweise unterschieden und auf jedem Untergrund der Anwendung erkennbar.
   :focus-visible zeigt ihn bei Tastaturbedienung, nicht bei Mausklick. */
:focus-visible {
    outline: var(--fokus-staerke) solid var(--farbe-fokus);
    outline-offset: var(--fokus-abstand);
    border-radius: var(--radius-s);
}

/* Browser ohne :focus-visible erhalten den Ring beim einfachen Fokus. */
:focus:not(:focus-visible) {
    outline: none;
}

/* --- Sprungmarke -----------------------------------------------------------
   Ausserhalb des Sichtbereichs geparkt, aber nicht aus dem Dokument entfernt:
   sie bleibt fuer die Tastatur erreichbar und wird beim Fokus sichtbar.
   Da sie absolut positioniert ist, veraendert sie das Layout nicht. [ANF] */
.sprungmarke {
    position: absolute;
    z-index: 10;
    inset-inline-start: var(--abstand-4);
    inset-block-start: var(--abstand-2);
    padding: var(--abstand-3) var(--abstand-4);
    background-color: var(--farbe-akzent-dunkel);
    color: var(--farbe-papier);
    font-size: var(--schrift-s);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-m);
    transform: translateY(-250%);
    transition: transform 120ms ease-out;
}

.sprungmarke:focus {
    transform: translateY(0);
}

/* --- Uebersprungmarke innerhalb der Seite (T-23) ----------------------------
   Dieselbe Idee wie die Sprungmarke oben, aber mitten im Inhalt: unsichtbar,
   bis sie den Fokus bekommt.

   Der Anlass ist gemessen. Auf der Auswertungsseite in Fall D stehen 1136
   Elemente im Tabulatorlauf, davon 1103 Zellverweise - 560 in der Heatmap, 543
   in der Kreuztabelle. Dass jede Zelle ein Verweis ist, ist Absicht und ein
   Gewinn: Beim Ansteuern nennt sie Gebiet, Aufnahmejahr und Wert. Aber wer an
   der Tabelle *vorbei* will, drueckte ueber tausendmal die Tabulatortaste.

   Anders als die Sprungmarke oben wird diese hier nicht aus dem Bild
   geschoben, sondern nimmt im Fokus ihren Platz in der Zeile ein: Sie steht
   zwischen Ueberschrift und Tabelle, und dort ist Platz. `position: absolute`
   waere hier falsch - der Block darunter verschoebe sich beim Fokussieren. */
.ueberspringen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ueberspringen:focus {
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    margin-block: var(--abstand-2);
    padding: var(--abstand-2) var(--abstand-4);
    overflow: visible;
    clip-path: none;
    border-radius: var(--radius-m);
    background-color: var(--farbe-akzent-dunkel);
    color: var(--farbe-papier);
    font-size: var(--schrift-s);
    font-weight: 600;
    text-decoration: none;
}


/* =========================================================================
   3. Typografie
   ========================================================================= */

h1,
h2,
h3,
h4 {
    margin-block: 0 var(--abstand-4);
    font-weight: 600;
    line-height: var(--zeilenhoehe-eng);
    letter-spacing: var(--laufweite-eng);
    /* Vermeidet einzelne Restwoerter in der letzten Zeile; wird von
       Browsern ohne Unterstuetzung stillschweigend uebergangen. */
    text-wrap: pretty;
}

h1 {
    font-family: var(--schrift-serif);
    font-size: var(--schrift-2xl);
    max-width: 24ch;
}

h2 {
    font-family: var(--schrift-serif);
    font-size: var(--schrift-xl);
    max-width: 32ch;
}

h3 {
    font-size: var(--schrift-l);
    font-weight: 600;
}

h4 {
    font-size: var(--schrift-m);
    font-weight: 600;
}

p,
ul,
ol,
dl {
    margin-block: 0 var(--abstand-4);
}

/* Fliesstext auf gut lesbare Zeilenlaenge begrenzen. */
.fliesstext {
    max-width: var(--breite-text);
}

/* T-20: Leseansicht mit Sprungmarken, nicht mit versteckten Registertexten.
   Lange amtliche URLs duerfen auch bei 320 px keine Seitenbreite erzwingen.
   Die Farbmuster stammen als SVG-Attribute aus der Datenbank. [ANF M5, M6] */
.methoden,
.hilfe {
    max-width: 58rem;
    overflow-wrap: anywhere;
}

.methoden [id],
.hilfe [id] {
    scroll-margin-block-start: var(--abstand-5);
}

.methoden__wegweiser,
.hilfe__wegweiser {
    border-block: 1px solid var(--farbe-linie);
    padding-block: var(--abstand-4);
}

.methoden__wegweiser ul,
.methoden__parameterwahl ul,
.hilfe__wegweiser ul,
.hilfe__begriffwahl ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--abstand-3) var(--abstand-5);
    padding-inline-start: 1.25rem;
    margin: 0;
}

.methoden__parameter,
.methoden__quelle,
.quelleneintrag,
.glossareintrag {
    border-block-start: 1px solid var(--farbe-linie);
    margin-block-start: var(--abstand-5);
    padding-block-start: var(--abstand-5);
}

.methoden__merkmale > div,
.hilfe__felder > div,
.hilfe__darstellung {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
    gap: var(--abstand-2) var(--abstand-4);
    margin-block-end: var(--abstand-2);
}

.methoden__merkmale dt,
.hilfe__felder dt,
.hilfe__darstellung dt,
.methoden__stufenname {
    font-weight: 600;
}

.methoden__merkmale dd,
.hilfe__felder dd,
.hilfe__darstellung dd {
    margin: 0;
}

.methoden__stufen {
    list-style: none;
    padding: 0;
}

.methoden__stufen li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--abstand-3);
    margin-block-end: var(--abstand-3);
}

.methoden__stufen svg {
    margin-block-start: 0.2em;
}

.methoden__stufen p {
    margin-block: var(--abstand-1) 0;
}

.methoden__fundstelle {
    font-size: var(--schrift-s);
}

.methoden__formel {
    border-inline-start: 3px solid var(--farbe-linie-stark);
    padding-inline-start: var(--abstand-4);
}

@media (max-width: 40rem) {
    .methoden__merkmale > div,
    .hilfe__felder > div,
    .hilfe__darstellung {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-block-end: var(--abstand-3);
    }
}

.einleitung {
    max-width: var(--breite-text);
    font-size: var(--schrift-l);
    line-height: var(--zeilenhoehe-normal);
    color: var(--farbe-tinte-gedaempft);
}

/* Kleine Auszeichnung oberhalb einer Ueberschrift, z. B. "Bereich". */
.bereichsmarke {
    display: block;
    margin-block-end: var(--abstand-2);
    color: var(--farbe-tinte-gedaempft);
    font-size: var(--schrift-2xs);
    font-weight: 600;
    letter-spacing: var(--laufweite-weit);
    text-transform: uppercase;
}

.kleingedruckt {
    font-size: var(--schrift-s);
    color: var(--farbe-tinte-gedaempft);
}

/* Hervorgehobener Kurztext innerhalb eines Absatzes oder einer Liste,
   z. B. ein fehlender Wert oder ein Zustandshinweis. */
.hinweistext {
    font-weight: 600;
}

.hinweistext--warnung {
    color: var(--farbe-warnung);
}

/* --- Verweise ---------------------------------------------------------------
   Verweise im Fliesstext sind unterstrichen; Farbe allein waere kein
   ausreichendes Unterscheidungsmerkmal. */
a {
    color: var(--farbe-akzent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

a:hover {
    color: var(--farbe-akzent-dunkel);
    text-decoration-thickness: 2px;
}


/* =========================================================================
   4. Layout
   ========================================================================= */

/* Zentrierter Inhaltsbereich. Der Seitenabstand waechst stufenlos mit der
   Fensterbreite; dadurch kommt das Layout ohne Sprungpunkte aus. */
.behaelter {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin-inline: auto;
    padding-inline: clamp(var(--abstand-4), 0.5rem + 2vw, var(--abstand-6));
}

.inhalt {
    /* flex-grow schiebt die Fusszeile auf kurzen Seiten nach unten. */
    flex: 1 0 auto;
    padding-block: clamp(var(--abstand-5), 1rem + 3vw, var(--abstand-7))
                   clamp(var(--abstand-7), 2rem + 4vw, var(--abstand-8));
}

/* Gleichmaessiger Abstand zwischen den Abschnitten einer Seite. */
.abschnitt + .abschnitt {
    margin-block-start: var(--abstand-7);
}

/* Automatisches Raster: die Spalten passen sich der Breite an, ohne dass je
   Endgeraet eine eigene Regel noetig waere. min(100%, ...) verhindert, dass
   eine Spalte breiter wird als der verfuegbare Platz. */
.raster {
    display: grid;
    gap: var(--abstand-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.raster--schmal {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}


/* =========================================================================
   5. Bausteine
   ========================================================================= */

/* --- Kopfzeile ------------------------------------------------------------- */

.kopf {
    background-color: var(--farbe-papier);
    border-block-end: 1px solid var(--farbe-linie);
}

.kopf__zeile {
    padding-block: var(--abstand-5) var(--abstand-4);
}

/* Wortmarke mit Jahresring-Signet. Das Signet ist eingebettetes SVG mit
   festen Massen - es laedt nichts nach und belegt seinen Platz sofort. */
.marke {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-3);
    color: var(--farbe-tinte);
    text-decoration: none;
}

.marke__signet {
    flex: none;
    color: var(--farbe-akzent);
}

.marke__name {
    font-family: var(--schrift-serif);
    font-size: var(--schrift-xl);
    font-weight: 600;
    letter-spacing: var(--laufweite-eng);
    line-height: var(--zeilenhoehe-eng);
    hyphens: manual;
}

.kopf__untertitel {
    margin-block: var(--abstand-2) 0;
    color: var(--farbe-tinte-gedaempft);
    font-size: var(--schrift-s);
}

/* --- Hauptnavigation -------------------------------------------------------
   Waagerechte Liste, die auf schmalen Geraeten umbricht. Bewusst ohne
   aufklappbares Menue: keine Skripte, keine verborgenen Bedienelemente,
   keine Verschiebung beim Laden - und die Reihenfolge im Quelltext
   entspricht genau der sichtbaren Reihenfolge. [ANF] */

.hauptnavigation {
    background-color: var(--farbe-papier-gedaempft);
    border-block-end: 1px solid var(--farbe-linie);
}

.hauptnavigation__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--abstand-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hauptnavigation__verweis {
    display: block;
    padding-block: var(--abstand-3);
    border-block-end: 2px solid transparent;
    color: var(--farbe-tinte);
    font-size: var(--schrift-s);
    font-weight: 500;
    text-decoration: none;
    hyphens: manual;
}

.hauptnavigation__verweis:hover {
    color: var(--farbe-akzent-dunkel);
    border-block-end-color: var(--farbe-linie-stark);
}

/* Die aktuelle Seite ist doppelt gekennzeichnet - durch Schriftschnitt und
   durch die Linie. Farbe allein genuegt nicht. */
.hauptnavigation__verweis[aria-current="page"] {
    color: var(--farbe-akzent-dunkel);
    font-weight: 700;
    border-block-end-color: var(--farbe-akzent);
}

/* --- Karte ------------------------------------------------------------------ */

.karte {
    background-color: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-l);
    padding: var(--abstand-5);
}

.karte__titel {
    margin-block-end: var(--abstand-2);
}

/* Karte, die vollstaendig als Verweis dient. */
.karte--verweis {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    color: var(--farbe-tinte);
    text-decoration: none;
    transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}

.karte--verweis:hover {
    border-color: var(--farbe-linie-stark);
    box-shadow: var(--schatten-sanft);
    color: var(--farbe-tinte);
}

.karte--verweis .karte__titel {
    color: var(--farbe-akzent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.karte--verweis:hover .karte__titel {
    color: var(--farbe-akzent-dunkel);
}

.karte__text {
    margin: 0;
    font-size: var(--schrift-s);
    color: var(--farbe-tinte-gedaempft);
}

/* --- Kennzeichen ------------------------------------------------------------
   Kleine Auszeichnung, z. B. fuer Bereiche, die noch im Aufbau sind. */

.kennzeichen {
    display: inline-block;
    align-self: flex-start;
    padding: 0.125rem var(--abstand-2);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-rund);
    background-color: var(--farbe-papier-gedaempft);
    color: var(--farbe-tinte-gedaempft);
    font-size: var(--schrift-2xs);
    font-weight: 600;
    letter-spacing: var(--laufweite-weit);
    text-transform: uppercase;
}

/* --- Hinweisfeld ------------------------------------------------------------ */

.hinweis {
    max-width: var(--breite-text);
    padding: var(--abstand-4) var(--abstand-5);
    border-inline-start: 4px solid var(--farbe-akzent);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    background-color: var(--farbe-akzent-flaeche);
}

.hinweis > :last-child {
    margin-block-end: 0;
}

.hinweis--warnung {
    border-inline-start-color: var(--farbe-warnung);
    background-color: var(--farbe-warnung-flaeche);
}

.hinweis__titel {
    margin-block-end: var(--abstand-2);
    font-size: var(--schrift-m);
    font-weight: 600;
}

/* --- Merkmalsliste ----------------------------------------------------------
   Zweispaltige Beschreibungsliste fuer Wertepaare. */

.merkmalsliste {
    display: grid;
    /* `minmax(0, max-content)` und nicht `max-content` allein: Eine reine
       max-content-Spalte schrumpft **nie**. Sie ist so breit wie ihr laengster
       Begriff, und wenn der nicht passt, schiebt sie die Wertespalte ueber den
       Seitenrand hinaus - die ganze Seite laeuft dann seitlich ueber.

       Genau das ist in T-19 gemessen worden: Der Begriff "Redaktionsstand der
       Erhebungen" neben dem Wert "1.386 Werte, 17 Gebiete, ..." brachte die
       Startseite auf einem Telefon um 38 Bildpunkte zum Ueberlaufen. Solange
       in dieser Liste "PHP" und "PostgreSQL" standen, fiel es nicht auf.
       [ANF T-19] */
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: var(--abstand-2) var(--abstand-5);
    margin: 0;
    font-size: var(--schrift-s);
}

.merkmalsliste dt {
    color: var(--farbe-tinte-gedaempft);
}

.merkmalsliste dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    /* Ein einzelnes ueberlanges Wort bricht um, statt die Spalte aufzuweiten. */
    overflow-wrap: break-word;
}

/* Auf schmalen Geraeten stehen Begriff und Wert untereinander. Zwei Spalten
   brauchen dort mehr Breite, als vorhanden ist: Ein ausgeschriebener Begriff
   belegt allein zwei Drittel der Zeile, und fuer den Wert bliebe ein
   Wortfragment je Zeile. Untereinander ist beides lesbar. */
@media (max-width: 30rem) {
    .merkmalsliste {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .merkmalsliste dt {
        margin-block-start: var(--abstand-3);
    }

    .merkmalsliste dt:first-child {
        margin-block-start: 0;
    }
}

/* --- Tabellen ---------------------------------------------------------------
   Die Tabelle bleibt eine Tabelle; der Bildlauf liegt im umschliessenden
   Bereich. Dieser ist mit tabindex="0" versehen, damit er auch per Tastatur
   gescrollt werden kann. */

.tabellenbereich {
    overflow-x: auto;
    /* contain: paint sagt aus, was overflow-x: auto ohnehin meint - was hier
       ueberlaeuft, bleibt hier. Ohne diese Angabe reicht eine sehr breite
       Tabelle ihren Ueberlauf bis an das Wurzelelement durch, und die ganze
       Seite laesst sich waagerecht schieben, obwohl der Bildlaufbereich selbst
       richtig rollt. Gemessen an der Kreuztabelle mit 41 Aufnahmejahren:
       1.647 Bildpunkte Ueberlauf der Seite, mit dieser Zeile keiner.
       Gefunden mit tests/browser/breite.html. [ANF M6] */
    contain: paint;
}

.datentabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--schrift-s);
    font-variant-numeric: tabular-nums;
}

.datentabelle caption {
    padding-block-end: var(--abstand-3);
    color: var(--farbe-tinte-gedaempft);
    font-size: var(--schrift-s);
    text-align: start;
}

.datentabelle th,
.datentabelle td {
    padding: var(--abstand-3) var(--abstand-4);
    border-block-end: 1px solid var(--farbe-linie);
    text-align: start;
    vertical-align: top;
}

.datentabelle thead th {
    border-block-end: 2px solid var(--farbe-linie-stark);
    font-weight: 600;
    white-space: nowrap;
}

.datentabelle tbody th {
    font-weight: 500;
}

.datentabelle tbody tr:last-child th,
.datentabelle tbody tr:last-child td {
    border-block-end: none;
}

/* --- Auswahlleiste ----------------------------------------------------------
   Die vier Auswahlfelder oberhalb der Ergebnisdarstellung. [ANF M4]

   Die Bedienelemente behalten ihr Aussehen aus dem Betriebssystem: ein
   nachgebautes Auswahlfeld muesste Tastaturbedienung, Vorlesefunktion und
   Beruehrbedienung erst wieder herstellen, die das native Element mitbringt.
   Gestaltet werden deshalb nur Rahmen, Abstaende und Groesse. */

.auswahlleiste {
    padding: var(--abstand-5);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-l);
    background-color: var(--farbe-flaeche);
}

.auswahlleiste__titel {
    margin-block: 0 var(--abstand-4);
    font-size: var(--schrift-l);
    font-family: var(--schrift-sans);
}

/* Ein Feld je Spalte, solange Platz ist; darunter untereinander. Der Zusatz
   min(100%, ...) verhindert seitlichen Ueberlauf auf schmalen Geraeten. */
.auswahlleiste__felder {
    display: grid;
    gap: var(--abstand-4) var(--abstand-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.auswahlleiste__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-3) var(--abstand-5);
    margin-block-start: var(--abstand-5);
    padding-block-start: var(--abstand-4);
    border-block-start: 1px solid var(--farbe-linie);
}

.auswahlleiste__hinweis {
    margin: 0;
    color: var(--farbe-tinte-gedaempft);
    font-size: var(--schrift-xs);
    max-width: var(--breite-text);
}

.feld {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
}

.feld__beschriftung {
    font-size: var(--schrift-s);
    font-weight: 600;
}

.feld__eingabe {
    /* Ausreichend grosse Bedienflaeche auch fuer Beruehrbedienung */
    min-height: 2.75rem;
    padding: var(--abstand-2) var(--abstand-3);
    border: 1px solid var(--farbe-linie-stark);
    border-radius: var(--radius-m);
    background-color: var(--farbe-flaeche);
    color: var(--farbe-tinte);
    font-family: inherit;
    font-size: var(--schrift-s);
    /* Lange Optionstexte duerfen das Raster nicht auseinanderziehen */
    max-width: 100%;
}

.feld__hinweis {
    margin: 0;
    color: var(--farbe-tinte-gedaempft);
    font-size: var(--schrift-xs);
    line-height: var(--zeilenhoehe-mittel);
}

/* --- Schaltflaeche ----------------------------------------------------------- */

.schaltflaeche {
    display: inline-block;
    padding: var(--abstand-3) var(--abstand-5);
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    background-color: var(--farbe-akzent-dunkel);
    color: var(--farbe-papier);
    font-family: inherit;
    font-size: var(--schrift-s);
    font-weight: 600;
    cursor: pointer;
}

.schaltflaeche:hover {
    background-color: var(--farbe-tinte);
}

/* --- Zahlen und fehlende Angaben --------------------------------------------- */

/* Zahlen rechtsbuendig und mit gleich breiten Ziffern: Spalten bleiben
   untereinander vergleichbar. */
.zahl {
    text-align: end;
    font-variant-numeric: tabular-nums;
    /* Ziffern einer Zahl duerfen nicht getrennt werden. */
    white-space: nowrap;
}

/* Der Kopf einer Zahlenspalte steht rechtsbuendig ueber seinen Zahlen, darf
   aber umbrechen: Eine Ueberschrift wie "Anteil deutlich geschaedigter Baeume"
   zoege die Spalte sonst breiter als die halbe Tabelle. */
.zahlkopf {
    text-align: end;
}

/* Fehlende Werte werden ausgeschrieben, nicht durch ein Zeichen angedeutet,
   das sich als Zahl lesen liesse. [ANF] */
.ohne-angabe {
    color: var(--farbe-tinte-gedaempft);
    font-style: italic;
    white-space: nowrap;
}

/* Dieselbe Auszeichnung fuer einen ganzen Absatz - etwa den Hinweis, dass ein
   Abschnitt des Steckbriefs nichts zu zeigen hat.

   Das `nowrap` oben gilt kurzen Markern in Tabellenzellen und Listen: Dort
   soll "keine Angabe" nicht mitten im Wort umbrechen. Ein Satz mit
   `white-space: nowrap` laeuft dagegen ueber den Bildschirmrand hinaus - bei
   360 Bildpunkten Fensterbreite um 579 Bildpunkte, gemessen mit
   tests/browser/breite.html am Steckbrief Hamburgs. Genau dafuer gibt es
   diesen Pruefstand. */
.ohne-angabe--absatz {
    display: block;
    max-width: var(--breite-text);
    white-space: normal;
}

/* Kreuztabellen koennen sehr breit werden; die Gebietsspalte bleibt beim
   seitlichen Blaettern stehen. */
.datentabelle--kreuz {
    font-size: var(--schrift-xs);
}

.datentabelle--kreuz th,
.datentabelle--kreuz td {
    padding: var(--abstand-2) var(--abstand-3);
}

/* Die Eckzelle gehoert dazu, und zwar aus demselben Grund wie bei der Heatmap:
   Bis T-29 hielt diese Regel nur `tbody th` und `tfoot th` fest, nicht aber die
   Kopfzeile. Beim Rollen nach rechts schoben sich die Jahreszahlen dann in den
   Bereich der stehenden Gebietsspalte und erschienen angeschnitten - "012"
   statt "2012". Gefunden beim Aufnehmen von Bild 06 der Angebotsmappe.
   `:first-child` und nicht `th`, weil in `thead` jede Zelle ein `th` ist; nur
   die erste steht ueber der feststehenden Spalte. */
.datentabelle--kreuz thead th:first-child,
.datentabelle--kreuz tbody th,
.datentabelle--kreuz tfoot th {
    position: sticky;
    inset-inline-start: 0;
    /* Wie `.heatmap__ecke`: Ein Element mit `position` zeichnet ohnehin ueber
       nicht positionierte Geschwister, die Angabe macht es unabhaengig von der
       Reihenfolge im Markup. */
    z-index: 1;
    background-color: var(--farbe-flaeche);
    white-space: nowrap;
}

.datentabelle tfoot th,
.datentabelle tfoot td {
    border-block-start: 2px solid var(--farbe-linie-stark);
    font-weight: 600;
}

/* Der Bildlaufbereich einer Tabelle ist per Tastatur erreichbar; sein
   Fokusrahmen darf nicht unter der Tabelle verschwinden. */
.tabellenbereich:focus-visible {
    outline-offset: -1px;
}

/* --- Fusszeile --------------------------------------------------------------
   Umkehrung des Seitenbilds. Die Fusszeile bildet die eigenen Tokens auf die
   allgemeinen ab - dadurch gelten Fokusring und Verweisfarben hier
   automatisch in ihrer hellen Fassung. */

.fuss {
    --farbe-fokus: var(--farbe-fuss-fokus);

    margin-block-start: var(--abstand-8);
    padding-block: var(--abstand-7) var(--abstand-5);
    background-color: var(--farbe-fuss-grund);
    color: var(--farbe-fuss-text);
    font-size: var(--schrift-s);
}

.fuss a {
    color: var(--farbe-fuss-verweis);
}

.fuss a:hover {
    color: var(--farbe-fuss-text);
}

.fuss__spalte > :last-child {
    margin-block-end: 0;
}

.fuss__titel {
    margin-block: 0 var(--abstand-3);
    color: var(--farbe-fuss-gedaempft);
    font-family: var(--schrift-sans);
    font-size: var(--schrift-2xs);
    font-weight: 600;
    letter-spacing: var(--laufweite-weit);
    text-transform: uppercase;
}

.fuss__text {
    margin-block: 0 var(--abstand-3);
    color: var(--farbe-fuss-text);
}

.fuss__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fuss__liste li + li {
    margin-block-start: var(--abstand-2);
}

.fuss__abschluss {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2) var(--abstand-5);
    justify-content: space-between;
    margin-block-start: var(--abstand-6);
    padding-block-start: var(--abstand-4);
    border-block-start: 1px solid var(--farbe-fuss-linie);
    color: var(--farbe-fuss-gedaempft);
    font-size: var(--schrift-xs);
}

.fuss__abschluss p {
    margin: 0;
}


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

   Gezeichnet wird mit SVG und CSS, ohne Bibliothek. Die Werte selbst stehen
   im Markup - Breiten und Pfade kommen aus der Berechnung in PHP, damit
   Diagramm und Tabelle nicht auseinanderlaufen koennen.

   Die Farben der Abschnitte stehen NICHT in dieser Datei. Sie stammen aus
   auspraegung.farbe und werden als style-Attribut gesetzt; eine weitere Stufe
   ist deshalb allein ein Datensatz und kein CSS-Eingriff. [ANF M5]

   Zur Layoutstabilitaet: Jede Diagrammflaeche hat ein festes Mass oder ein
   festes Seitenverhaeltnis. Es gibt damit keinen Zeitpunkt, zu dem die
   Flaeche waechst und den Text darunter verschiebt.
   ------------------------------------------------------------------------- */
.svg-vorrat {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Schraffur fuer den nicht belegten Teil einer Verteilung. Eine Luecke wird
   als Luecke gezeichnet und nie als Farbe, die sich als Wert lesen liesse. */
.muster__grund {
    fill: var(--farbe-papier-gedaempft);
}

.muster__strich {
    stroke: var(--farbe-linie-stark);
    stroke-width: 2;
}

.diagramm {
    margin: 0 0 var(--abstand-6);
}

.diagramm__titel {
    font-family: var(--schrift-sans);
    font-size: var(--schrift-s);
    font-weight: 600;
    letter-spacing: var(--laufweite-weit);
    text-transform: uppercase;
    color: var(--farbe-tinte-gedaempft);
    margin-block-end: var(--abstand-2);
}

.diagramm__flaeche {
    display: block;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-s);
    background-color: var(--farbe-flaeche);
}

.diagramm__flaeche--balken {
    width: 100%;
    height: 2.75rem;
}

.diagramm__flaeche--kreis {
    width: min(100%, 17rem);
    aspect-ratio: 1;
    height: auto;
    border-radius: var(--radius-rund);
    padding: var(--abstand-2);
}

/* Die Trennlinie zwischen zwei Abschnitten bleibt gleich stark, egal wie der
   Balken gestreckt wird. */
.diagramm__abschnitt {
    stroke: var(--farbe-flaeche);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.diagramm__text {
    font-size: var(--schrift-s);
    line-height: var(--zeilenhoehe-normal);
    color: var(--farbe-tinte);
    max-width: var(--breite-text);
    margin-block-start: var(--abstand-3);
}

/* --- Legende in der Wertetabelle ---------------------------------------- */
.legende__feld {
    width: 2.25rem;
    text-align: center;
}

/* Das Legendenfeld ist ein span, solange seine Flaeche aus dem Stilbogen
   kommt, und ein SVG, sobald sie eine Farbe aus der Datenbank traegt: Die
   Farbe steht dann als Attribut an der Figur und nicht in einem
   style-Attribut. Beide Formen tragen dieselbe Klasse und sehen gleich
   aus. [ANF M6] */
.legende__muster {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--farbe-linie-stark);
    border-radius: var(--radius-s);
    vertical-align: -0.15em;
    overflow: hidden;
    /* Hebt die allgemeine Regel svg { max-width: 100% } auf. Das Feld steht in
       einer Tabellenzelle, deren Breite sich nach ihrem Inhalt richtet; die
       Obergrenze bezoege sich damit auf die Zelle, die das Feld selbst
       aufspannt, und das Feld fiele auf null zusammen. */
    max-width: none;
}

/* Reihen ohne Stufe fuehren keine Farbe aus der Datenbank; ihr Legendenfeld
   zeigt die Reihenfarbe des Stilbogens - dieselbe, in der sie gezeichnet sind. */
.legende__muster--reihe {
    background-color: var(--farbe-akzent);
}

.legende__muster--ohne-angabe {
    background-color: var(--farbe-papier-gedaempft);
    background-image: repeating-linear-gradient(
        45deg,
        var(--farbe-linie-stark) 0,
        var(--farbe-linie-stark) 1px,
        transparent 1px,
        transparent 4px
    );
}

/* --- Balken je Baumartengruppe ------------------------------------------
   Waagerechte Balken: die Beschriftungen sind Woerter und keine Zahlen, und
   waagerecht bleiben sie auch auf schmalen Geraeten lesbar. */
.balkenreihe {
    display: grid;
    gap: var(--abstand-2);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-s);
    background-color: var(--farbe-flaeche);
    padding: var(--abstand-4);
}

.balkenreihe__zeile {
    display: grid;
    /* minmax(0, 1fr) und nicht 1fr: Die Spur ist ein SVG und damit ein
       ersetztes Element. Ohne die Null als Mindestmass koennte sie die Spalte
       auf ihre eigene Groesse aufziehen, statt sich nach ihr zu richten. */
    grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) minmax(4rem, auto);
    align-items: center;
    gap: var(--abstand-3);
}

.balkenreihe__name {
    font-size: var(--schrift-s);
}

/* Spur und Balken sind ein SVG: Die Balkenlaenge stammt aus den Daten und
   steht als Breitenattribut der Figur. Als style="width: …" waere sie
   Inline-CSS und zwaenge die Inhaltsrichtlinie zu 'unsafe-inline'. [ANF M6]
   Die abgerundeten Ecken sitzen an der Spur; der Balken selbst endet glatt,
   damit sich seine Laenge ablesen laesst. */
.balkenreihe__spur {
    display: block;
    width: 100%;
    height: 1.25rem;
    background-color: var(--farbe-papier-gedaempft);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.balkenreihe__balken {
    fill: var(--farbe-akzent);
}

.balkenreihe__wert {
    font-size: var(--schrift-s);
    text-align: right;
}

@media (max-width: 30rem) {
    /* Auf schmalen Geraeten steht die Beschriftung ueber dem Balken, damit
       weder Name noch Wert abgeschnitten werden. */
    .balkenreihe__zeile {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .balkenreihe__name {
        grid-column: 1 / -1;
    }
}

/* --- Verlauf ueber die Aufnahmejahre (Fall B) ----------------------------
   Zwei Diagramme auf derselben Zeitachse: Saeulen je Aufnahmejahr und
   Linienzuege ueber die Jahre. Beide teilen sich die Jahresfaecher; welches
   Jahr hervorgehoben ist, entscheidet ein im Ausschnitt erzeugter Stilblock -
   er allein kennt die dargestellten Jahreszahlen. Alles andere steht hier. */
.zeitreihe {
    display: grid;
    gap: var(--abstand-5);
}

/* Siehe .gebietsvergleich > *: Ein Rasterfeld darf von sich aus nicht schmaler
   werden als sein Inhalt. Die Diagramme haben eine Mindestbreite und rollen
   innerhalb ihres Bildlaufbereichs; ohne diese Regel schoeben sie das Raster
   und damit die Seite ueber den Bildschirmrand hinaus. Gefunden mit
   tests/browser/breite.html. [ANF M6] */
.zeitreihe > * {
    min-width: 0;
}

.diagramm__flaeche--verlauf {
    display: block;
    width: 100%;
    height: auto;
}

/* Auf schmalen Geraeten wuerden die Achsenbeschriftungen unlesbar klein.
   Das Diagramm behaelt deshalb eine Mindestbreite und wird waagerecht
   gerollt - wie die Tabellen daneben auch. Der Bildlaufbereich traegt dafuer
   tabindex und role="region"; ohne das liesse er sich nur mit der Maus
   verschieben (WCAG 2.1.1). */
.diagrammbereich {
    overflow-x: auto;
}

.diagrammbereich:focus-visible {
    outline: var(--fokus-staerke) solid var(--farbe-fokus);
    outline-offset: 2px;
}

@media (max-width: 44rem) {
    .diagramm__flaeche--verlauf {
        min-width: 40rem;
    }
}

/* --- Achsen -------------------------------------------------------------- */
.achse__gitter {
    stroke: var(--farbe-linie);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.achse__grundlinie {
    stroke: var(--farbe-linie-stark);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

/* Die Schriftgroesse steht in Nutzerkoordinaten der Zeichenflaeche und
   waechst deshalb mit ihr. 13 von 240 Einheiten Hoehe entsprechen bei voller
   Breite rund 13 Pixeln. */
.achse__beschriftung {
    font-family: var(--schrift-sans);
    font-size: 13px;
    fill: var(--farbe-tinte-gedaempft);
}

/* --- Saeulen ------------------------------------------------------------- */
/* Die Trennlinie zwischen zwei gestapelten Abschnitten bleibt gleich stark,
   egal wie die Zeichenflaeche skaliert wird. */
.saeule__abschnitt {
    stroke: var(--farbe-flaeche);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

/* Die Fuellung steht bewusst NICHT in der Regel oben: Ein Attribut fill="..."
   am Element ist ein Praesentationsattribut und unterliegt damit jeder
   CSS-Regel, auch der schwaechsten. Eine Farbe aus auspraegung.farbe wuerde
   von einer Klassenregel ueberschrieben - und das Diagramm zeigte ueberall
   dieselbe Farbe. Gefaerbt wird deshalb nur, was gar keine Farbe mitbringt:
   Reihen ohne Stufe, also der Median numerischer Parameter. [ANF M5] */
.saeule__abschnitt:not([fill]) {
    fill: var(--farbe-akzent);
}

/* Ein Aufnahmejahr ohne Wert: Schraffur an der Grundlinie statt einer Saeule
   der Hoehe null. Eine Luecke ist kein Nullwert. */
.saeule__luecke {
    stroke: var(--farbe-linie-stark);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

/* --- Linien -------------------------------------------------------------- */
.verlauf {
    fill: none;
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Wie bei den Saeulen: nur eine Reihe ohne eigene Farbe wird hier gefaerbt. */
.verlauf:not([stroke]) {
    stroke: var(--farbe-akzent);
}

/* Das gleitende Mittel begleitet den Verlauf, ohne ihn zu ueberdecken:
   duenner, gestrichelt und in der gedaempften Linienfarbe. */
.verlauf--mittel,
.verlauf--mittel:not([stroke]) {
    stroke: var(--farbe-linie-stark);
    stroke-width: 1.5px;
    stroke-dasharray: 5 4;
}

/* Ein Punkt je Wert. Er macht vereinzelte Aufnahmejahre sichtbar, die als
   Linienstueck nichts ergaeben, und markiert bei dicht liegenden Jahren, wo
   ein erhobener Wert steht und wo nur die Verbindung zweier Werte verlaeuft. */
.verlaufpunkt {
    stroke: var(--farbe-flaeche);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.verlaufpunkt:not([fill]) {
    fill: var(--farbe-akzent);
}

/* --- Jahresfaecher: der Griff, der beide Diagramme koppelt ---------------- */
/* Unsichtbar, bis das zugehoerige Jahr ueberfahren oder angesteuert wird.
   Eingeblendet wird ueber den erzeugten Stilblock des Ausschnitts. */
.jahrleiste .hervor {
    opacity: 0;
}

.jahrband {
    fill: var(--farbe-akzent);
    fill-opacity: 0.12;
    stroke: var(--farbe-akzent-dunkel);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.jahrkugel {
    stroke: var(--farbe-flaeche);
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
}

.jahrkugel:not([fill]) {
    fill: var(--farbe-akzent);
}

/* Die durchsichtige Flaeche nimmt den Zeiger entgegen. Ohne pointer-events
   wuerde eine Flaeche ohne Fuellung nichts entgegennehmen. */
.jahrgriff {
    fill: none;
    pointer-events: all;
}

.jahrmarke:focus-visible {
    outline: var(--fokus-staerke) solid var(--farbe-fokus);
    outline-offset: 1px;
}

/* --- Sortierbare Spaltenkoepfe ------------------------------------------- */
/* Verweise, keine Schaltflaechen: Die Ordnung steht in der Adresszeile und
   ist damit teilbar, und ohne Skript fuehrt der Verweis regulaer zum Ziel. */
.sortierkopf {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    color: var(--farbe-akzent-dunkel);
    text-decoration: none;
    border-block-end: 1px dotted currentColor;
}

.sortierkopf:hover {
    color: var(--farbe-tinte);
    border-block-end-style: solid;
}

.sortierkopf--aktiv {
    color: var(--farbe-tinte);
    border-block-end-style: solid;
}

.sortierkopf__pfeil {
    font-size: 0.8em;
    line-height: 1;
}

/* Farbfelder in einer Ergebnistabelle - gleich, in welcher. Die Komponente
   zeichnet sie einheitlich; die Regel gilt deshalb fuer alle. */
.datentabelle .legende__muster {
    margin-inline-end: 0.4em;
}

/* --- CSV-Download -------------------------------------------------------
   Der Verweis steht unter seiner Tabelle und gehoert zu ihr. Er ist bewusst
   ein gewoehnlicher Verweis und keine Schaltflaeche: Er fuehrt zu einer
   Adresse, laesst sich in einem neuen Tab oeffnen und braucht kein Skript. */
.ausfuhr {
    font-weight: 600;
}

/* Ein Pfeil nach unten als Zeichen fuer den Download. Er steht im Inhalt und
   nicht als Hintergrundbild, damit er im Kontrastmodus erhalten bleibt; fuer
   Vorleseprogramme ist er verborgen, weil der Verweistext bereits sagt, was
   geschieht. */
.ausfuhr::before {
    content: "↓ ";
}

/* Ein Aufnahmejahr ohne jeden Wert bleibt als Zeile stehen - gedaempft, damit
   die Luecke sichtbar ist, ohne sich als Wert zu lesen. */
.datenzeile--luecke {
    background-color: var(--farbe-papier-gedaempft);
}


/* --- Laendervergleich (Fall C) -------------------------------------------
   Balkendiagramm je Gebiet, Punktdiagramm der Verteilung und Tabelle. Beide
   Diagramme teilen sich die Werteachse; ihre Seitenraender sind deshalb
   gleich, und die Referenzlinie steht in beiden untereinander.

   Keine Farbe einer Klasse steht hier: Sie kommen aus parameter.farbskala
   beziehungsweise auspraegung.farbe. [ANF M5] */

.gebietsvergleich {
    display: grid;
    gap: var(--abstand-5);
}

/* Ein Rasterfeld darf von sich aus nicht schmaler werden als sein Inhalt.
   Die Diagramme haben aber eine Mindestbreite und rollen innerhalb ihres
   Bildlaufbereichs; ohne diese Regel schoeben sie das ganze Raster - und damit
   die Seite - ueber den Bildschirmrand hinaus. [ANF M6] */
.gebietsvergleich > * {
    min-width: 0;
}

/* Die Hoehe waechst mit der Zahl der Gebiete; der viewBox gibt das
   Seitenverhaeltnis vor, height:auto laesst es wirken. */
.diagramm__flaeche--gebiete {
    width: 100%;
    height: auto;
}

/* Auf schmalen Geraeten bekommt das Diagramm eine Mindestbreite und rollt
   innerhalb seines Bildlaufbereichs: Sechzehn Gebietsnamen und eine Werteachse
   lassen sich auf 400 Bildpunkten nicht lesbar unterbringen. Der Bereich ist
   mit der Tastatur erreichbar (WCAG 2.1.1). */
@media (max-width: 44rem) {
    .diagramm__flaeche--gebiete {
        min-width: 34rem;
    }
}

/* --- Umschalter der Reihenfolge ------------------------------------------ */
.ordnung {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-2) var(--abstand-3);
}

.ordnung__titel {
    font-size: var(--schrift-s);
    font-weight: 600;
}

.ordnung__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ordnung__wahl {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--farbe-linie-stark);
    border-radius: var(--radius-s);
    color: var(--farbe-akzent-dunkel);
    text-decoration: none;
    font-size: var(--schrift-s);
}

.ordnung__wahl:hover {
    background-color: var(--farbe-papier-gedaempft);
    color: var(--farbe-tinte);
}

/* Die gewaehlte Ordnung ist nicht nur farblich gekennzeichnet: Sie traegt
   aria-current und einen Richtungspfeil. Farbe ist nie das einzige
   Unterscheidungsmerkmal. [ANF M6] */
.ordnung__wahl--aktiv {
    background-color: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
    color: var(--farbe-flaeche);
    font-weight: 600;
}

.ordnung__wahl--aktiv:hover {
    background-color: var(--farbe-akzent-dunkel);
    color: var(--farbe-flaeche);
}

.ordnung__pfeil {
    font-size: 0.8em;
    line-height: 1;
}

/* --- Orientierungsbereich am Rand der Auswertung (T-17) ------------------ */
/* Ergebnis und Orientierungsbereich stehen nebeneinander, sobald der Platz
   reicht. Im Quelltext steht das Ergebnis zuerst - wer die Seite ohne
   Stilbogen liest oder sie vorlesen laesst, bekommt zuerst die Antwort und
   danach die Einordnung. Das Raster rueckt den Rand danach nach rechts oben. */
.auswertung {
    display: block;
}

@media (min-width: 64rem) {
    .auswertung--mit-rand {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: var(--abstand-5);
        align-items: start;
    }

    .auswertung--mit-rand .auswertung__ergebnis {
        /* min-width: 0 - ohne diese Angabe waere die Mindestbreite eines
           Rasterfeldes der Inhalt selbst, und eine breite Tabelle sprengte die
           Spalte. Derselbe Fallstrick wie bei der Zeitreihe und beim
           Gebietsvergleich. */
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
    }

    .auswertung--mit-rand .auswertung__rand {
        min-width: 0;
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        /* Der Rand bleibt beim Rollen stehen, solange die Auswertung laenger
           ist als er. So bleibt die Karte sichtbar, waehrend man die Tabelle
           darunter liest. */
        top: var(--abstand-4);
    }
}

/* Der aufklappbare Rahmen.
   ------------------------------------------------------------------------
   Auf schmalen Geraeten ist er zugeklappt und verdraengt die Auswertung
   nicht; ein Griff oeffnet ihn. Auf breiten Schirmen ist er dauerhaft offen
   und der Griff verschwindet - dort ist Platz, und ein Bereich, den man erst
   aufklappen muesste, waere dort nur im Weg.

   Umgesetzt ohne Skript: `details` bringt das Auf- und Zuklappen samt
   Tastaturbedienung und Zustandsansage mit. Die Alternative waere eine
   Schaltflaeche mit aria-expanded, einem Zustand in JavaScript und einer
   Seite, die ohne Skript nichts mehr zuklappt. */
.orientierung {
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-s);
    background-color: var(--farbe-flaeche);
    margin-block-end: var(--abstand-5);
}

.orientierung__griff {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-1) var(--abstand-3);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--abstand-3);
    cursor: pointer;
    /* list-style: none - sonst zeigen Safari und aeltere Browser zusaetzlich
       ihr eigenes Dreieck. */
    list-style: none;
}

.orientierung__griff::-webkit-details-marker {
    display: none;
}

.orientierung__griff:hover {
    background-color: var(--farbe-papier-gedaempft);
}

.orientierung__griff:focus-visible {
    outline: var(--fokus-staerke) solid var(--farbe-fokus);
    outline-offset: -2px;
}

.orientierung__titel {
    font-family: var(--schrift-sans);
    font-size: var(--schrift-s);
    font-weight: 600;
    letter-spacing: var(--laufweite-weit);
    text-transform: uppercase;
    color: var(--farbe-tinte-gedaempft);
}

.orientierung__gebiet {
    font-family: var(--schrift-sans);
    font-weight: 600;
    color: var(--farbe-tinte);
}

/* Das Dreieck des Griffs. Es steht im Inhalt und nicht als Hintergrundbild,
   damit es im Windows-Kontrastmodus erhalten bleibt - derselbe Grund wie beim
   Pfeil des CSV-Verweises. */
.orientierung__titel::before {
    content: "\25B8\00a0";
    display: inline-block;
    color: var(--farbe-akzent);
}

.orientierung[open] .orientierung__titel::before {
    content: "\25BE\00a0";
}

.orientierung__inhalt {
    padding: 0 var(--abstand-3) var(--abstand-3);
}

@media (min-width: 64rem) {
    /* Dauerhaft offen: Der Inhalt eines zugeklappten `details` wird vom
       Browser ausgeblendet; eine eigene Regel mit hoeherer Gewichtung holt ihn
       zurueck. Der Griff entfaellt, weil es dort nichts mehr zu klappen gibt.

       Nachgemessen in tests/browser/orientierung.html - ohne Messung waere das
       eine Annahme ueber das Verhalten des Browsers. */
    /* Zwei Regeln, weil zwei Browsergenerationen gemeint sind. Aeltere
       blenden die Kinder eines zugeklappten `details` mit `display: none`
       aus - dagegen hilft die zweite Regel. Neuere legen den Inhalt in das
       Pseudoelement `::details-content` und setzen dort
       `content-visibility: hidden`; er wird dann zwar angeordnet, aber nicht
       gemalt und traegt keine Hoehe bei. Genau das war hier zu sehen: ein
       Rahmen von zwei Bildpunkten Hoehe mit unsichtbarem Inhalt darin. */
    .auswertung--mit-rand .orientierung::details-content {
        content-visibility: visible;
        block-size: auto;
    }

    .auswertung--mit-rand .orientierung > .orientierung__inhalt {
        display: block;
    }

    .auswertung--mit-rand .orientierung__griff {
        display: none;
    }

    .auswertung--mit-rand .orientierung__inhalt {
        padding-block-start: var(--abstand-3);
    }
}

/* Die verkleinerte Karte.
   Sie zeichnet dieselben Umrisse und faerbt nach derselben Skala ein wie die
   grosse; klein ist sie allein ueber diese Regel. Kuerzel und Leitlinien
   entfallen hier ohnehin - der Kasten ist schmaler als die Schwelle von 380
   Bildpunkten, ab der sie ausgeblendet werden. */
.landkartenbereich--klein {
    padding: var(--abstand-2);
}

.orientierung__bildtitel {
    font-family: var(--schrift-sans);
    font-size: var(--schrift-s);
    font-weight: 600;
    letter-spacing: var(--laufweite-weit);
    text-transform: uppercase;
    color: var(--farbe-tinte-gedaempft);
    margin-block-end: var(--abstand-2);
}

.orientierung__karte {
    margin: 0 0 var(--abstand-4);
}

/* Das gewaehlte Land in der kleinen Karte braucht einen kraeftigeren Rahmen
   als in der grossen: Bei rund 250 Bildpunkten Kartenbreite waere ein Strich
   von 3 Nutzereinheiten gut ein Bildpunkt. */
.landkartenbereich--klein .kartengebiet--gewaehlt .kartengebiet__kontur {
    stroke-width: 6;
}

/* --- Der Kurzsteckbrief --------------------------------------------------- */
.steckbrief__titel {
    font-family: var(--schrift-sans);
    font-size: var(--schrift-m);
    margin: 0 0 var(--abstand-2);
}

.steckbrief__liste {
    margin: 0;
    border-block-start: 1px solid var(--farbe-linie);
}

.steckbrief__zeile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-1) var(--abstand-3);
    justify-content: space-between;
    padding-block: var(--abstand-2);
    border-block-end: 1px solid var(--farbe-linie);
}

.steckbrief__begriff {
    font-family: var(--schrift-sans);
    font-size: var(--schrift-s);
    color: var(--farbe-tinte-gedaempft);
}

.steckbrief__wert {
    margin: 0;
    font-family: var(--schrift-sans);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
    color: var(--farbe-tinte);
}

/* Eine fehlende Angabe steht ausgeschrieben da und wird nicht hervorgehoben:
   Sie ist kein Wert. */
.steckbrief__wert--leer {
    font-weight: 400;
    color: var(--farbe-tinte-gedaempft);
}

.steckbrief__zusatz {
    display: block;
    font-size: var(--schrift-s);
    font-weight: 400;
    color: var(--farbe-tinte-gedaempft);
}

/* --- Die Landkarte (T-16) ------------------------------------------------ */
/* Sie skaliert ueber ihre viewBox und behaelt dabei ihr Seitenverhaeltnis: Sie
   wird schmaler, nicht abgeschnitten, und braucht deshalb keinen
   Bildlaufbereich. Die Hoehenbegrenzung haelt sie auf breiten Schirmen in
   lesbarer Groesse - ohne sie waere die Karte auf einem 1200 Punkte breiten
   Fenster ueber anderthalb Bildschirmhoehen hoch. [ANF T-16/AK4] */
.landkartenbereich {
    display: flex;
    justify-content: center;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-s);
    background-color: var(--farbe-flaeche);
    padding: var(--abstand-3);
    /* Macht diesen Kasten zum Bezug fuer die Abfrage weiter unten. Gefragt
       wird nach der Breite der **Karte** und nicht nach der des Fensters:
       Die Karte haengt an ihrem Kasten, und der kann in einer schmalen Spalte
       eines breiten Fensters stehen. */
    container-type: inline-size;
    container-name: landkarte;
}

/* Die Karte ist hochkant: Deutschland ist etwa ein Drittel hoeher als breit.
   Begrenzt wird deshalb die **Hoehe** und nicht die Breite - eine reine
   Breitenbegrenzung liesse sie auf einem breiten Schirm ueber eine ganze
   Bildschirmhoehe hinauswachsen, und man muesste rollen, um von Flensburg nach
   Garmisch zu sehen. Die Breite ergibt sich daraus; das Seitenverhaeltnis
   bleibt in jedem Fall erhalten, weil es aus der viewBox stammt.

   Zwischen 320 und 1200 Bildpunkten Fensterbreite wird die Karte dadurch
   kleiner oder groesser, aber nie beschnitten und nie unscharf: Sie ist ein
   Vektorbild. [ANF T-16/AK4] */
.landkarte {
    display: block;
    width: 100%;
    /* Begrenzt wird die **Breite**, obwohl die Hoehe gemeint ist. Eine
       Hoehenbegrenzung allein genuegt nicht: Sie beschneidet den Kasten des
       SVG, ohne seine Breite mitzunehmen - die Karte staende dann klein in
       der Mitte eines viel zu breiten Feldes. Die Breite ist der Hoehe ueber
       das Seitenverhaeltnis der viewBox fest zugeordnet (rund 0,74), und die
       Grenzen sind damit umgerechnet: 31rem entsprechen 42rem Hoehe, 58vh
       entsprechen 78vh Hoehe. */
    max-inline-size: min(31rem, 58vh);
    height: auto;
}

/* Ebene 1: die Flaechen. Die Farbe steht als Attribut am Gruppenelement und
   stammt aus dem Parameterregister; hier steht nur, was fuer alle Laender
   gleich ist. Der helle Haarstrich trennt benachbarte Laender, ohne wie eine
   Grenze im Sinne der Karte auszusehen. */
.kartenflaeche {
    stroke: var(--farbe-flaeche);
    stroke-width: 1;
    /* Ohne diese Angabe waere ein Loch im Umriss - Berlin in Brandenburg -
       kein Loch, sondern eine zweite gefuellte Flaeche. */
    fill-rule: evenodd;
}

/* Ebene 2: die Kontur. Sie greift mit `use` denselben Pfad wieder auf und
   liegt ueber allen Flaechen - deshalb kann kein spaeter gezeichnetes
   Nachbarland den Fokusrahmen halb verdecken.

   `fill: transparent` und nicht `fill: none`: Die Flaeche traegt keine Farbe,
   bleibt aber fuer Maus und Finger anwaehlbar. `pointer-events: all` sagt es
   noch einmal ausdruecklich; die Lochregel gilt dabei weiter, ein Klick auf
   Berlin trifft nicht Brandenburg. */
.kartengebiet__kontur {
    fill-rule: evenodd;
    pointer-events: all;
    stroke: none;
}

.kartengebiet:hover .kartengebiet__kontur {
    stroke: var(--farbe-tinte);
    stroke-width: 2;
}

.kartengebiet:focus {
    outline: none;
}

/* Der Fokusrahmen wird als Kontur des Landes gezeichnet und nicht als Rechteck
   darum: Ein `outline` um einen SVG-Pfad legte sich um dessen umschliessendes
   Rechteck und bezeichnete damit eine Flaeche, die dem Land nicht entspricht -
   bei Niedersachsen waere es ein Kasten, der halb Nordrhein-Westfalen
   einschliesst. */
.kartengebiet:focus-visible .kartengebiet__kontur {
    stroke: var(--farbe-fokus);
    stroke-width: 4;
}

/* Das gewaehlte Land in Fall A. Es ist hervorgehoben und nicht als einziges
   gefaerbt: Die uebrigen Laender sind der Vergleich, der die Hervorhebung
   ueberhaupt erst aussagekraeftig macht. */
.kartengebiet--gewaehlt .kartengebiet__kontur {
    stroke: var(--farbe-tinte);
    stroke-width: 3;
}

/* Kuerzel in der Flaeche. Zwei Schriftfarben, weil die Skala von hell nach
   dunkel laeuft: Auf der hellsten Klasse ist weisse Schrift nicht zu lesen, auf
   der dunkelsten schwarze. Welche gilt, rechnet Kartengebiet::beschriftungHell
   aus der Leuchtdichte der Flaeche aus. */
.kartengebiet__kuerzel {
    font-family: var(--schrift-sans);
    /* In Nutzereinheiten der viewBox, nicht in Bildpunkten des Schirms: Das SVG
       spannt ein eigenes Koordinatensystem auf. Bei der ueblichen Breite von
       rund 460 Bildpunkten entspricht das gut 11 Bildpunkten. Die Schranke, ab
       der ein Kuerzel in die Flaeche passt, ist mit 14 Einheiten Abstand zum
       Rand darauf abgestimmt (bin/extract/bkg_vg2500.php). */
    font-size: 15px;
    font-weight: 600;
    letter-spacing: var(--laufweite-weit);
}

.kartengebiet__kuerzel--hell {
    fill: var(--farbe-flaeche);
}

.kartengebiet__kuerzel--dunkel {
    fill: var(--farbe-tinte);
}

/* Unterhalb dieser Breite werden die Kuerzel ausgeblendet.
   ------------------------------------------------------------------------
   Die Schriftgroesse steht in Nutzereinheiten der viewBox und schrumpft mit
   der Karte. Gemessen (tests/browser/kartenbreite.html):

       Kartenbreite  247 px -> Kuerzel  6,2 px
                     287 px ->          7,2 px
                     327 px ->          8,2 px
                     404 px ->         10,2 px
                     496 px ->         12,5 px

   Unter rund zehn Bildpunkten ist ein zweibuchstabiges Kuerzel keine
   Beschriftung mehr, sondern ein Fleck. Es wird deshalb ganz weggelassen
   statt unlesbar gezeichnet - die Schwelle liegt zwischen den gemessenen
   Werten bei 380 Bildpunkten Innenbreite des Kastens.

   Was dabei **nicht** verlorengeht: Der zugaengliche Name jedes Landes steht
   im aria-label des Verweises und nicht in diesem Text; ein Vorleseprogramm
   liest ihn unveraendert. Die Werte stehen ohnehin in der Tabelle. Weg faellt
   allein eine Schrift, die niemand entziffern koennte.

   Die Leitlinien der Stadtstaaten fallen mit weg - eine Linie, die auf eine
   nicht vorhandene Beschriftung zeigt, waere sinnlos. Ihr Punkt bleibt: Er
   ist auf schmalen Geraeten das Ziel fuer den Finger und dort am noetigsten.

   Kennt ein Browser keine Bereichsabfragen, bleiben die Kuerzel sichtbar. Das
   ist die harmlosere Richtung. */
@container landkarte (max-width: 380px) {
    .kartengebiet__kuerzel,
    .kartengebiet__leitlinie {
        display: none;
    }
}

/* Stadtstaaten: Punkt und Leitlinie. Der Punkt vergroessert zugleich das Ziel -
   Bremen misst in der Karte rund zehn Nutzereinheiten und waere sonst mit dem
   Finger nicht zu treffen. */
.kartengebiet__leitlinie {
    stroke: var(--farbe-linie-stark);
    stroke-width: 1;
}

.kartengebiet__punkt {
    stroke: var(--farbe-flaeche);
    stroke-width: 1.5;
}

.kartengebiet:hover .kartengebiet__punkt,
.kartengebiet:focus-visible .kartengebiet__punkt {
    stroke: var(--farbe-tinte);
}

/* --- Eine Zeile je Gebiet ------------------------------------------------ */
/* Die ganze Zeile ist ein Verweis in die Einzelauswertung. Die Flaeche
   darunter macht sie als solche erkennbar und vergroessert zugleich das
   Ziel - eine Zeile von 26 Einheiten Hoehe statt nur des Balkens. */
.gebietszeile__flaeche {
    fill: transparent;
}

.gebietszeile:hover .gebietszeile__flaeche,
.gebietszeile:focus-visible .gebietszeile__flaeche {
    fill: var(--farbe-papier-gedaempft);
}

.gebietszeile:focus {
    outline: none;
}

.gebietszeile:focus-visible {
    outline: 2px solid var(--farbe-fokus);
    outline-offset: -1px;
}

.gebietszeile:hover .gebietsname {
    text-decoration: underline;
}

.gebietsname {
    font-size: 11px;
    fill: var(--farbe-tinte);
}

.gebietswert {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    fill: var(--farbe-tinte-gedaempft);
}

.gebietsspur {
    fill: var(--farbe-papier-gedaempft);
}

/* :not([fill]) - eine Klassenregel gewaenne sonst gegen das fill-Attribut,
   und alle Gebiete traegen dieselbe Farbe. Genau das ist in T-12 einmal
   passiert. */
.gebietsbalken:not([fill]) {
    fill: var(--farbe-akzent);
}

.gebietsbalken {
    stroke: var(--farbe-flaeche);
    stroke-width: 0.5;
}

/* Keine Erhebung: Schraffur ueber die ganze Spur, keine Farbe der Skala. */
.gebietsluecke {
    stroke: var(--farbe-linie);
    stroke-width: 0.5;
}

/* --- Referenzlinie und Kennzahlen ---------------------------------------- */
/* Gestrichelt und in Rost: Sie ist ein Bezug und kein Messwert, und beides
   soll sich auf den ersten Blick unterscheiden. */
.referenzlinie {
    stroke: var(--farbe-fokus);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

.referenzlinie__text {
    font-size: 11px;
    font-weight: 600;
    fill: var(--farbe-fokus);
}

/* Die mittlere Haelfte der Laender. */
.quartilband {
    fill: var(--farbe-papier-gedaempft);
    stroke: var(--farbe-linie);
    stroke-width: 0.5;
}

.medianlinie {
    stroke: var(--farbe-tinte);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.gebietspunkt:not([fill]) {
    fill: var(--farbe-akzent);
}

.gebietspunkt {
    stroke: var(--farbe-flaeche);
    stroke-width: 1;
}

/* --- Legende der Farbskala ----------------------------------------------- */
.farblegende {
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-s);
    background-color: var(--farbe-flaeche);
    padding: var(--abstand-3) var(--abstand-4);
}

.farblegende__titel {
    margin: 0 0 var(--abstand-2);
    font-size: var(--schrift-s);
}

.farblegende__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2) var(--abstand-4);
    margin: 0 0 var(--abstand-2);
    padding: 0;
    list-style: none;
}

.farblegende__eintrag {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--schrift-s);
}



/* --- Gebiet x Aufnahmejahr (Fall D) --------------------------------------
   Heatmap und Kreuztabelle sind beide echte Tabellen. Die Achsenspalte bleibt
   beim waagerechten Rollen stehen; ohne sie waere bei 41 Aufnahmejahren nach
   wenigen Spalten nicht mehr erkennbar, zu welchem Gebiet eine Zelle gehoert.

   Keine Klassenfarbe steht hier: Sie kommen aus dem erzeugten Stilbogen
   /auswertung/skala-....css und damit aus dem Parameterregister. [ANF M5] */

.kreuzbereich {
    display: grid;
    gap: var(--abstand-5);
}

/* Ein Rasterfeld darf von sich aus nicht schmaler werden als sein Inhalt;
   ohne diese Regel schoeben die breiten Tabellen das Raster auseinander. */
.kreuzbereich > * {
    min-width: 0;
}

.heatmap {
    border-collapse: collapse;
    font-size: var(--schrift-xs);
}

.heatmap__ecke,
.heatmap__gebiet {
    /* Die Achsenspalte bleibt stehen, waehrend die Jahre rollen. */
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background-color: var(--farbe-flaeche);
    text-align: start;
    white-space: nowrap;
    padding: 0 var(--abstand-3) 0 0;
    font-weight: 400;
    /* Eine Linie trennt die feststehende Spalte von den rollenden Feldern -
       sonst schoebe sich die Farbflaeche beim Rollen unter den Namen. */
    border-inline-end: 1px solid var(--farbe-linie-stark);
}

.heatmap__ecke {
    font-weight: 600;
}

.heatmap__jahr {
    padding: 0 0 var(--abstand-2);
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--farbe-tinte-gedaempft);
    /* Die Spalte ist schmaler als die Jahreszahl; die Beschriftung darf
       darueber hinausragen, ohne die Spaltenbreite zu bestimmen. */
    white-space: nowrap;
}

.heatmap__jahrtext {
    display: inline-block;
}

.heatmap__feld {
    padding: 1px;
    width: 1.6rem;
}

/* Die Zellen sind leer - sie tragen ihre Aussage in der Farbe und in der
   Beschriftung. Ohne Mindestbreite zoege die automatische Tabellenbreite sie
   auf schmalen Geraeten zu Strichen zusammen: Bei 400 Bildpunkten blieben
   neun Bildpunkte je Aufnahmejahr, und die Heatmap waere zwar vorhanden, aber
   nicht mehr lesbar. Lieber rollt sie. [ANF M6] */
.heatzelle {
    min-width: 1.25rem;
}

/* Die Zelle selbst ist der Verweis: Die ganze Farbflaeche ist das Ziel, nicht
   nur ein Punkt darin. */
.heatzelle {
    display: block;
    width: 100%;
    height: 1.25rem;
    border-radius: 2px;
    background-color: var(--farbe-papier-gedaempft);
}

.heatzelle:hover {
    outline: 2px solid var(--farbe-tinte);
    outline-offset: 0;
}

.heatzelle:focus {
    outline: none;
}

.heatzelle:focus-visible {
    outline: var(--fokus-staerke) solid var(--farbe-fokus);
    outline-offset: 1px;
    /* Der Fokusring soll ueber den Nachbarzellen liegen. */
    position: relative;
    z-index: 2;
}

/* Keine Erhebung: Schraffur statt Farbe. Die hellste Klasse waere hier eine
   Behauptung. [ANF M4] */
.heatzelle--luecke {
    background-color: var(--farbe-flaeche);
    background-image: repeating-linear-gradient(
        45deg,
        var(--farbe-linie-stark) 0,
        var(--farbe-linie-stark) 1px,
        transparent 1px,
        transparent 4px
    );
}

/* In der Kreuztabelle ist jede belegte Zelle ebenfalls ein Verweis. Er bleibt
   unauffaellig, damit die Tabelle eine Zahlentabelle bleibt und kein Feld aus
   Verweisen. */
.datentabelle--kreuz td a {
    color: inherit;
    text-decoration: none;
    border-block-end: 1px dotted var(--farbe-linie-stark);
}

.datentabelle--kreuz td a:hover {
    color: var(--farbe-akzent-dunkel);
    border-block-end-color: currentColor;
}


/* -------------------------------------------------------------------------
   Die Startseite (T-19)
   -------------------------------------------------------------------------

   Die Startseite hat ein Zeitmass: Ein fachfremder Besucher soll in fuenfzehn
   Sekunden verstehen, was hier angeboten wird. Daraus folgt die Gestaltung
   dieses Abschnitts.

   Die Kennzahl ist deshalb **gross**, und zwar deutlich groesser als jede
   Ueberschrift der Seite. Das ist kein Schmuck: Auf einer Seite, die in
   fuenfzehn Sekunden gelesen werden soll, entscheidet die Schriftgroesse
   darueber, was zuerst gesehen wird - und zuerst gesehen werden sollen die
   drei Zahlen, nicht die Navigation.

   Alles uebrige an der Kachel ist dem untergeordnet: Name, Aufnahmejahr,
   Vorwert und Leserichtung stehen in abgestuften Graden darunter. Sie sind
   nicht Beiwerk - ohne Jahr und Leserichtung waere die Zahl nicht zu lesen -,
   aber sie werden in dieser Reihenfolge gebraucht.
   ------------------------------------------------------------------------- */

/* --- Der Datenstand im Aufmacher ------------------------------------------
   Er steht unmittelbar unter dem Einleitungsabsatz und nicht im
   Kleingedruckten: Er beantwortet die erste Rueckfrage, die jede Zahl dieser
   Seite aufwirft. Der senkrechte Strich hebt ihn vom Fliesstext ab, ohne ihm
   das Gewicht einer eigenen Ueberschrift zu geben. */
.datenstand {
    max-width: var(--breite-text);
    margin-block: var(--abstand-5) 0;
    padding-inline-start: var(--abstand-4);
    border-inline-start: 3px solid var(--farbe-akzent-flaeche);
    font-size: var(--schrift-s);
    line-height: var(--zeilenhoehe-normal);
    color: var(--farbe-tinte-gedaempft);
}

.datenstand__marke {
    display: block;
    margin-block-end: var(--abstand-1);
    color: var(--farbe-akzent);
    font-size: var(--schrift-2xs);
    font-weight: 600;
    letter-spacing: var(--laufweite-weit);
    text-transform: uppercase;
}

/* --- Die Kennzahlenkacheln -------------------------------------------------
   Dasselbe selbstordnende Raster wie bei .raster: Die Spalten passen sich der
   Breite an, ohne dass je Endgeraet eine eigene Regel noetig waere. Drei oder
   vier Kacheln stehen auf breiten Schirmen nebeneinander, auf schmalen
   untereinander - und weil die Zahl der Kacheln aus den Daten kommt, darf hier
   keine feste Spaltenzahl stehen. */
.kennzahlen {
    display: grid;
    gap: var(--abstand-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    margin: 0 0 var(--abstand-4);
    padding: 0;
    list-style: none;
}

/* Die Kachel ist ein Spaltenfluss, damit die Leserichtung unten buendig
   abschliesst, auch wenn die Namen unterschiedlich viele Zeilen brauchen. */
.kennzahl {
    display: flex;
    flex-direction: column;
    padding: var(--abstand-4);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-m);
    background-color: var(--farbe-flaeche);
    box-shadow: var(--schatten-sanft);
}

/* Der Name traegt den Verweis und bleibt ein gewoehnlicher, unterstrichener
   Verweis. Die Unterstreichung ist kein Schoenheitsfehler, sondern das zweite
   Merkmal neben der Farbe - darauf ist die gesamte Anwendung angelegt.

   Er steht ueber der Zahl und nicht darunter: Wer von links oben liest, soll
   zuerst wissen, wovon die Zahl handelt. Klein gesetzt bleibt er trotzdem,
   damit die Zahl das Uebergewicht behaelt. */
.kennzahl__name {
    margin: 0 0 var(--abstand-2);
    font-family: var(--schrift-sans);
    font-size: var(--schrift-s);
    font-weight: 600;
    line-height: var(--zeilenhoehe-mittel);
    letter-spacing: 0;
}

/* Der Verweis bekommt Luft nach oben und unten. Ohne sie waere er genau so
   hoch wie seine Zeile - bei diesem Schriftgrad 20 Bildpunkte -, und das ist
   auf einem Telefon kein Ziel, das man mit dem Finger sicher trifft. Das
   Mindestmass der WCAG fuer ein Bedienziel betraegt 24 Bildpunkte; gemessen
   wird es in tests/browser/startseite.html. [ANF M6] */
.kennzahl__name a {
    display: inline-block;
    padding-block: var(--abstand-1);
}

.kennzahl__wert {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    margin: 0;
}

/* Die eigentliche Zahl. Serifenschrift wie die Ueberschriften, damit sie als
   redaktionelle Aussage gelesen wird und nicht als Tabellenwert; Ziffern mit
   gleicher Breite, damit mehrere Kacheln nebeneinander nicht flackern, wenn
   sich ein Wert aendert. */
.kennzahl__zahl {
    font-family: var(--schrift-serif);
    font-size: var(--schrift-3xl);
    font-weight: 600;
    line-height: var(--zeilenhoehe-eng);
    letter-spacing: var(--laufweite-eng);
    font-variant-numeric: tabular-nums;
    color: var(--farbe-tinte);
}

.kennzahl__einheit {
    font-size: var(--schrift-s);
    color: var(--farbe-tinte-gedaempft);
}

.kennzahl__jahr {
    margin: var(--abstand-2) 0 0;
    font-size: var(--schrift-s);
    color: var(--farbe-tinte-gedaempft);
}

.kennzahl__vergleich {
    margin: var(--abstand-1) 0 0;
    font-size: var(--schrift-s);
    color: var(--farbe-tinte-gedaempft);
}

/* Die Leserichtung schliesst die Kachel ab. `margin-block-start: auto`
   schiebt sie an den unteren Rand, damit die Trennlinien mehrerer Kacheln
   auf einer Hoehe liegen. */
.kennzahl__richtung {
    margin: auto 0 0;
    padding-block-start: var(--abstand-3);
    border-block-start: 1px solid var(--farbe-linie);
    font-size: var(--schrift-xs);
    line-height: var(--zeilenhoehe-mittel);
    color: var(--farbe-tinte-gedaempft);
}


/* -------------------------------------------------------------------------
   Glossar: Infofelder und Verweise (T-21)
   -------------------------------------------------------------------------

   Das Infofeld ist ein `details`-Element und sieht aus wie eine Pille: ein
   Fragezeichen, der Begriff, ein Rahmen. Das native Dreieck ist entfernt -
   in einer Pille sitzt es schief -, und an seine Stelle tritt das
   Fragezeichen. Es bleibt in beiden Zustaenden dasselbe; dass das Feld offen
   ist, sagt der aufgeklappte Kasten darunter und, fuer Vorleseprogramme, der
   Zustand der Schaltflaeche.

   Das Ziel ist mindestens 24 Bildpunkte hoch - dasselbe Mass, das seit T-18
   fuer jedes Bedienziel dieser Anwendung gilt und das in T-19 einmal knapp
   verfehlt wurde. Hier kommt es aus Schriftgroesse, Innenabstand und Rahmen.

   Die Felder stehen in einer Reihe nebeneinander, solange sie zugeklappt
   sind. Ein aufgeklapptes Feld nimmt die ganze Zeile: Sonst stuende sein
   Kasten neben den uebrigen Pillen und schoebe sie aus der Reihe.
   ------------------------------------------------------------------------- */

.infofelder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--abstand-2) var(--abstand-3);
    margin-block: var(--abstand-3) var(--abstand-4);
}

/* Die Beschriftung der Gruppe. Keine Ueberschrift: Eine weitere Ebene in der
   Gliederung traegt hier keinen Inhalt. */
.infofelder__marke {
    align-self: center;
    color: var(--farbe-tinte-gedaempft);
    font-size: var(--schrift-2xs);
    font-weight: 600;
    letter-spacing: var(--laufweite-weit);
    text-transform: uppercase;
}

.infofeld[open] {
    /* Volle Zeile, damit der Kasten unter der Pille steht und nicht neben
       den Nachbarn. */
    flex-basis: 100%;
}

.infofeld__griff {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-2);
    padding: var(--abstand-2) var(--abstand-3);
    border: 1px solid var(--farbe-linie-stark);
    border-radius: var(--radius-rund);
    background-color: var(--farbe-flaeche);
    color: var(--farbe-akzent);
    font-size: var(--schrift-s);
    line-height: var(--zeilenhoehe-mittel);
    cursor: pointer;
    /* Das native Dreieck entfaellt; das Fragezeichen tritt an seine Stelle.
       `list-style` deckt die meisten Browser ab, die Pseudoklasse darunter
       aeltere WebKit-Fassungen. */
    list-style: none;
}

.infofeld__griff::-webkit-details-marker {
    display: none;
}

.infofeld__griff:hover {
    border-color: var(--farbe-akzent);
    color: var(--farbe-akzent-dunkel);
}

.infofeld[open] > .infofeld__griff {
    border-color: var(--farbe-akzent);
    background-color: var(--farbe-akzent-flaeche);
}

/* Das Fragezeichen ist ein Bild und fuer Vorleseprogramme ausgeblendet; der
   zugaengliche Name steht daneben im Text. */
.infofeld__zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: var(--radius-rund);
    background-color: var(--farbe-akzent);
    color: var(--farbe-papier);
    font-size: var(--schrift-2xs);
    font-weight: 700;
}

.infofeld__inhalt {
    max-width: var(--breite-text);
    margin-block-start: var(--abstand-2);
    padding: var(--abstand-4) var(--abstand-5);
    border-inline-start: 4px solid var(--farbe-akzent);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    background-color: var(--farbe-akzent-flaeche);
}

.infofeld__inhalt > :last-child {
    margin-block-end: 0;
}

.infofeld__kurz {
    font-weight: 600;
}

.infofeld__lang,
.infofeld__quelle {
    font-size: var(--schrift-s);
}

/* Ein Glossarbegriff im Fliesstext. Er bleibt ein gewoehnlicher Verweis -
   Farbe und Unterstreichung wie ueberall -, traegt aber eine gepunktete
   Linie: das seit je uebliche Zeichen fuer "hier steht eine Erlaeuterung". */
.glossarverweis {
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
}

/* --- Die Hilfeseite ------------------------------------------------------ */

.hilfe__felder,
.hilfe__darstellungen {
    max-width: var(--breite-text);
    margin-block-end: var(--abstand-5);
}

.hilfe__darstellungen {
    max-width: 58rem;
}

.glossareintrag__kurz {
    font-weight: 600;
    max-width: var(--breite-text);
}

.glossareintrag__lang,
.glossareintrag__verwandt,
.glossareintrag__parameter,
.glossareintrag__quelle {
    max-width: var(--breite-text);
}


/* -------------------------------------------------------------------------
   Rechtliche Angaben und Quellenverzeichnis (T-22)
   -------------------------------------------------------------------------

   Vier Seiten teilen sich diesen Block: Kontakt, Impressum, Datenschutz und
   das Quellenverzeichnis. Sie haben gemeinsam, dass sie fast nur aus Text
   bestehen - und genau deshalb brauchen sie wenig: begrenzte Zeilenlaenge,
   eine lesbare Anschrift und einen Kasten, in dem eine lange technische Zeile
   umbrechen darf, ohne die Seite mitzunehmen.

   Der Eintrag des Quellenverzeichnisses selbst steht weiter oben bei den
   Quellen des Methodenbereichs und den Glossareintraegen: Er ist derselbe
   Fall, und drei Fassungen desselben Abstands waeren drei Gelegenheiten,
   auseinanderzulaufen.
   ------------------------------------------------------------------------- */

/* --- Die Anschrift ---------------------------------------------------------
   Ein Anschriftsblock ist keine Aufzaehlung und kein Fliesstext. Er steht
   abgesetzt, damit das Auge ihn als Einheit nimmt, und behaelt seine Zeilen:
   Wer eine Anschrift abschreibt, will sie zeilenweise sehen. */
.rechtsseite__anschrift {
    max-width: var(--breite-text);
    margin-block: var(--abstand-4);
    padding-inline-start: var(--abstand-4);
    border-inline-start: 3px solid var(--farbe-akzent);
    font-style: normal;
    line-height: var(--zeilenhoehe-normal);
}

/* --- Die Inhaltsrichtlinie --------------------------------------------------
   Eine einzige lange Zeile aus Fachbegriffen. Sie darf umbrechen - anders als
   Programmtext verliert sie dabei nichts -, und was dennoch nicht passt, laeuft
   im Kasten und nicht auf der Seite. `max-width: 100%` ist dabei nicht
   ueberfluessig: Ein `pre` mit langem Inhalt sprengt sonst seinen Behaelter,
   und auf einem Telefon lief in T-19 schon einmal genau so die ganze Seite
   ueber. */
.rechtsseite__richtlinie {
    max-width: 100%;
    margin-block: var(--abstand-4);
    padding: var(--abstand-4);
    overflow-x: auto;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-m);
    background-color: var(--farbe-papier-gedaempft);
    font-size: var(--schrift-xs);
    line-height: var(--zeilenhoehe-normal);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* --- Der woertliche Quellenvermerk ------------------------------------------
   Er ist ein Zitat und sieht so aus: eingerueckt, in der Serifenschrift des
   Fliesstextes. Gekuerzt wird er nie - die Lizenz verlangt ihn unveraendert -,
   also muss er auch auf schmalen Geraeten vollstaendig umbrechen koennen. */
.quelleneintrag__vermerk {
    max-width: var(--breite-text);
    margin-block: var(--abstand-2) var(--abstand-4);
    padding-inline-start: var(--abstand-4);
    border-inline-start: 2px solid var(--farbe-linie-stark);
    color: var(--farbe-tinte-gedaempft);
    overflow-wrap: break-word;
}

/* --- Der Veraenderungshinweis -----------------------------------------------
   Er steht in einem eigenen Kasten und nicht in der Merkmalsliste. Die
   Datenlizenz verlangt ihn neben dem Quellenvermerk; wer den Vermerk liest,
   soll ihn im selben Blick haben.

   Kein Warnton: Eine Bearbeitung ist nichts Bedenkliches, sondern etwas
   Anzugebendes. Die Warnfarbe dieser Anwendung bliebe fuer das reserviert, was
   wirklich schiefgeht. */
.quelleneintrag__veraenderung {
    max-width: var(--breite-text);
    margin-block: var(--abstand-4);
    padding: var(--abstand-3) var(--abstand-4);
    border-radius: var(--radius-m);
    background-color: var(--farbe-papier-gedaempft);
}

.quelleneintrag__veraenderung p {
    margin: 0;
    max-width: none;
    font-size: var(--schrift-s);
}

/* Zwei Klassen im Selektor, damit die Regel die Absatzregel darueber
   schlaegt - `!important` kommt in diesem Stilbogen nur dort vor, wo es
   hingehoert: im Block fuer verringerte Bewegung. */
.quelleneintrag__veraenderung .quelleneintrag__veraenderungstitel {
    margin-block-end: var(--abstand-1);
    color: var(--farbe-tinte-gedaempft);
    font-family: var(--schrift-sans);
    font-size: var(--schrift-2xs);
    font-weight: 600;
    letter-spacing: var(--laufweite-weit);
    text-transform: uppercase;
}


/* =========================================================================
   6. Hilfsklassen
   ========================================================================= */

/* Nur fuer Vorleseprogramme sichtbar - fuer Beschriftungen, die im Bild
   ueberfluessig, im Vorlesen aber noetig sind. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.abstand-oben {
    margin-block-start: var(--abstand-6);
}


/* --- Die Gebietssteckbriefe (T-18) ---------------------------------------
   Eine Seite je Bundesland, alle sechzehn nach demselben Bauplan. Die Regeln
   hier betreffen ausschliesslich die Anordnung; die Farben der Diagramme
   stammen wie ueberall aus dem Parameterregister. [ANF M5, ENT-03] */

/* Brotkrume. Sie sagt, dass die Einzelseite unterhalb der Uebersicht liegt -
   die Hauptnavigation zeigt nur, dass man sich im Bereich befindet. */
.brotkrume {
    margin-block-end: var(--abstand-3);
    font-size: var(--schrift-s);
    color: var(--farbe-tinte-gedaempft);
}

.brotkrume span {
    margin-inline: var(--abstand-2);
}

/* Lagekarte und Kennzahlen stehen nebeneinander, sobald der Platz reicht.
   Auf schmalen Geraeten untereinander - in der Reihenfolge des Quelltextes,
   also Karte zuerst. */
.steckbriefseite {
    display: grid;
    gap: var(--abstand-5);
}

@media (min-width: 56rem) {
    .steckbriefseite {
        grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
        align-items: start;
    }
}

/* Die Lagekarte ist kleiner als die thematische: Sie beantwortet eine
   einfachere Frage und soll den Kennzahlen daneben nicht die Spalte nehmen. */
.lagekarte .landkarte {
    max-inline-size: min(19rem, 46vh);
}

/* Die Flaechen der Lagekarte tragen **keine** Datenfarbe. Anders als bei der
   thematischen Karte, deren Fuellung ein Messwert ist, steht sie hier im
   Stilbogen: Es gibt nichts einzufaerben. [ENT-03] */
.lageflaeche {
    fill: var(--farbe-papier-gedaempft);
    stroke: var(--farbe-flaeche);
    stroke-width: 1;
    /* Ohne diese Angabe waere ein Loch im Umriss - Berlin in Brandenburg -
       kein Loch, sondern eine zweite gefuellte Flaeche. */
    fill-rule: evenodd;
}

.lageflaeche--gewaehlt {
    fill: var(--farbe-akzent);
}

.lagepunkt {
    fill: var(--farbe-papier-gedaempft);
}

.lagepunkt--gewaehlt {
    fill: var(--farbe-akzent);
}

/* Die Kuerzel stehen auf einfarbigen Flaechen; eine Umschaltung der
   Schriftfarbe nach Leuchtdichte wie in der thematischen Karte braucht es
   hier nicht. Das gewaehlte Land traegt die Akzentfarbe und bekommt deshalb
   helle Schrift. */
.kartengebiet__kuerzel--lage {
    fill: var(--farbe-tinte);
}

.kartengebiet--gewaehlt .kartengebiet__kuerzel--lage {
    fill: var(--farbe-papier);
}

/* Verweis auf die nummerierte Quelle am Fuss der Seite. Hochgestellt und
   klein - er begleitet die Angabe, er ist nicht die Angabe. */
.quellenverweis {
    font-size: var(--schrift-2xs);
    font-weight: 600;
    vertical-align: super;
    text-decoration: none;
    white-space: nowrap;
}

.quellenverweis:hover,
.quellenverweis:focus-visible {
    text-decoration: underline;
}

/* Die Quellenliste. Der woertliche Vermerk steht in eigener Auszeichnung: Er
   ist ein Zitat und darf nicht wie erklaerender Text aussehen. [ANF M7] */
.quellenliste {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: quelle;
}

.quellenliste__eintrag {
    max-width: var(--breite-text);
    margin-block-end: var(--abstand-5);
    padding-inline-start: var(--abstand-5);
    border-inline-start: 3px solid var(--farbe-linie);
    counter-increment: quelle;
}

/* Die Nummer steht vor dem Titel und ist dieselbe, auf die die Verweise
   zeigen. Sie kommt aus dem Zaehler und nicht aus der Vorlage: So kann sie
   nicht von der Reihenfolge abweichen, in der die Eintraege stehen. */
.quellenliste__titel::before {
    content: "[" counter(quelle) "] ";
    font-weight: 700;
}

.quellenliste__titel {
    margin-block-end: var(--abstand-1);
    font-weight: 600;
}

.quellenliste__herausgeber {
    margin-block-end: var(--abstand-2);
    font-size: var(--schrift-s);
    color: var(--farbe-tinte-gedaempft);
}

.quellenliste__vermerk {
    margin-block-end: var(--abstand-2);
    font-size: var(--schrift-s);
    font-style: italic;
}

/* Die Anteilsliste neben dem Kreisdiagramm. Sie traegt dieselben Zahlen wie
   das Bild; unterschieden wird nie ueber die Farbe allein. [ANF M6] */
.anteilsliste {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--schrift-s);
}

.anteilsliste__eintrag {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) max-content;
    align-items: baseline;
    gap: var(--abstand-1) var(--abstand-3);
    padding-block: var(--abstand-2);
    border-block-end: 1px solid var(--farbe-linie);
}

/* Die Menge steht unter dem Anteil und nicht daneben: Sie ist die Zugabe,
   nicht die Hauptzahl. */
.anteilsliste__menge {
    grid-column: 3;
    font-size: var(--schrift-xs);
    color: var(--farbe-tinte-gedaempft);
}

.steckbrief__verteilung {
    margin-block-end: var(--abstand-6);
}

.steckbrief__verteilungsbild {
    display: grid;
    gap: var(--abstand-4);
    align-items: center;
}

@media (min-width: 44rem) {
    .steckbrief__verteilungsbild {
        grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    }
}

/* Die Besonderheiten. Eine Beschreibungsliste, weil es Begriffspaare sind -
   Titel und Befund. */
.besonderheiten {
    max-width: var(--breite-text);
    margin: 0 0 var(--abstand-4);
}

.besonderheiten__zeile {
    padding-block: var(--abstand-3);
    border-block-end: 1px solid var(--farbe-linie);
}

.besonderheiten__titel {
    font-weight: 600;
}

.besonderheiten__text {
    margin: var(--abstand-1) 0 0;
    color: var(--farbe-tinte-gedaempft);
}

/* Knappe Fassung des Hinweisfelds fuer die nicht ausgewiesenen Angaben. */
.hinweis--knapp {
    margin-block-start: var(--abstand-4);
    font-size: var(--schrift-s);
}

.hinweis__liste {
    margin: 0;
    padding-inline-start: var(--abstand-5);
}

/* Die Liste aller Steckbriefe auf der Uebersichtsseite. Sie fuehrt dieselben
   sechzehn Verweise wie die Karte darueber - fuer alle, die einen Namen
   suchen oder die Karte nicht bedienen koennen. [ANF M6] */
.steckbriefliste {
    display: grid;
    gap: var(--abstand-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .steckbriefliste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .steckbriefliste {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.steckbriefliste__eintrag {
    padding: var(--abstand-3) var(--abstand-4);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-m);
    background-color: var(--farbe-flaeche);
}

.steckbriefliste__verweis {
    display: flex;
    align-items: baseline;
    gap: var(--abstand-2);
    font-weight: 600;
    text-decoration: none;
}

.steckbriefliste__verweis:hover .steckbriefliste__name,
.steckbriefliste__verweis:focus-visible .steckbriefliste__name {
    text-decoration: underline;
}

.steckbriefliste__kuerzel {
    padding: 0 var(--abstand-2);
    border-radius: var(--radius-s);
    background-color: var(--farbe-akzent-flaeche);
    color: var(--farbe-akzent-dunkel);
    font-size: var(--schrift-2xs);
    font-weight: 700;
    letter-spacing: var(--laufweite-weit);
}

.steckbriefliste__angaben {
    margin: var(--abstand-2) 0 0;
    font-size: var(--schrift-xs);
    color: var(--farbe-tinte-gedaempft);
}

.steckbriefliste__angabe {
    display: block;
}

.steckbriefliste__stand {
    white-space: nowrap;
}


/* =========================================================================
   7. Besondere Ausgabemodi
   ========================================================================= */

/* Nutzer, die reduzierte Bewegung eingestellt haben, erhalten keine
   Uebergaenge. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Im Windows-Kontrastmodus setzt das Betriebssystem eigene Farben. Der
   Fokusring wird dort auf die Systemfarbe umgestellt, damit er sichtbar
   bleibt. */
@media (forced-colors: active) {
    :focus-visible {
        outline-color: Highlight;
    }

    .hauptnavigation__verweis[aria-current="page"] {
        border-block-end-color: Highlight;
    }

    .karte {
        border-color: CanvasText;
    }

    /* Im Kontrastmodus ersetzt das System alle Farben. Bei Diagrammen wuerde
       das die Aussage zerstoeren: Die Stufenfarben SIND hier die Information,
       nicht Schmuck. Sie bleiben deshalb erhalten; Rahmen und Trennlinien
       nehmen dagegen die Systemfarbe an, damit die Abschnitte voneinander
       abgegrenzt bleiben. Wer die Farben nicht unterscheiden kann, liest
       dieselben Zahlen in der Tabelle und in der Bildunterschrift. */
    .diagramm__abschnitt,
    .legende__muster,
    .balkenreihe__balken,
    .saeule__abschnitt,
    .verlauf,
    .verlaufpunkt,
    .jahrkugel,
    .gebietsbalken,
    .gebietspunkt,
    .kartenflaeche,
    .kartengebiet__punkt,
    .heatzelle {
        forced-color-adjust: none;
    }

    /* Die Kuerzel dagegen sind Schrift und keine Daten: Sie nehmen die
       Systemfarbe an. Weil die Flaeche darunter ihre Farbe behaelt, bekommen
       sie zusaetzlich eine Kontur in der Systemhintergrundfarbe - sonst
       stuende dunkle Schrift auf dunkler Flaeche. */
    .kartengebiet__kuerzel {
        fill: CanvasText;
        paint-order: stroke;
        stroke: Canvas;
        stroke-width: 3;
    }

    /* Die Lagekarte ist hier die Ausnahme von der Ausnahme: Ihre Flaechen
       tragen keine Daten, sondern zeigen nur Lage und Auswahl. Sie duerfen
       deshalb - anders als die eingefaerbten Flaechen der thematischen
       Karte - die Systemfarben annehmen. Die Auswahl bleibt dabei sichtbar,
       weil sie die Hervorhebungsfarbe bekommt. */
    .lageflaeche {
        fill: Canvas;
        stroke: CanvasText;
    }

    .lageflaeche--gewaehlt,
    .lagepunkt--gewaehlt {
        fill: Highlight;
    }

    .kartengebiet:focus-visible .kartengebiet__kontur,
    .kartengebiet--gewaehlt .kartengebiet__kontur {
        stroke: Highlight;
    }

    /* Die feststehende Achsenspalte braucht im Kontrastmodus einen eigenen
       Grund, sonst scheinen die Farbflaechen darunter hindurch. */
    .heatmap__ecke,
    .heatmap__gebiet {
        background-color: Canvas;
        forced-color-adjust: none;
        color: CanvasText;
    }

    /* Referenz- und Medianlinie sind Geruest und keine Daten: Sie nehmen die
       Systemfarbe an. Die Referenzlinie bleibt durch ihre Strichelung von der
       durchgezogenen Medianlinie unterscheidbar. */
    .referenzlinie,
    .referenzlinie__text {
        stroke: Highlight;
        fill: Highlight;
    }

    .medianlinie {
        stroke: CanvasText;
    }

    .quartilband {
        fill: Canvas;
        stroke: CanvasText;
    }

    .diagramm__abschnitt,
    .saeule__abschnitt {
        stroke: CanvasText;
    }

    .diagramm__flaeche,
    .balkenreihe,
    .legende__muster {
        border-color: CanvasText;
    }

    /* Achsen und Hervorhebung sind keine Daten, sondern Geruest: Sie nehmen
       die Systemfarben an, damit sie im Kontrastmodus sichtbar bleiben. */
    .achse__gitter,
    .achse__grundlinie,
    .saeule__luecke {
        stroke: CanvasText;
    }

    .achse__beschriftung {
        fill: CanvasText;
    }

    .jahrband {
        fill: Highlight;
        fill-opacity: 0.3;
        stroke: Highlight;
    }
}

/* Druckausgabe: Papierfarben, keine Navigationsflaechen, Verweisziele
   ausgeschrieben. */
@media print {
    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .hauptnavigation,
    .sprungmarke {
        display: none;
    }

    .fuss {
        margin-block-start: var(--abstand-5);
        padding-block: var(--abstand-4);
        background: none;
        color: #000;
        border-block-start: 1px solid #000;
    }

    .fuss a,
    a {
        color: #000;
    }

    .karte {
        border-color: #999;
        box-shadow: none;
    }

    .inhalt a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }
}