/* Die Webfläche: das Layout einer Website - in Editor, Vorschau und Ausgabe.
 *
 * Hier steht bewusst kein Millimeter. Der gedruckte Satz rechnet in festen
 * Massen, weil ein Blatt eine feste Groesse hat; eine Website hat keine.
 * Sie hat einen Lesefluss, eine Spaltenbreite, die von der Flaeche abhaengt,
 * und Bausteine, die umbrechen, statt zu schrumpfen.
 *
 * DIE EINE REGEL, DIE ALLES TRAEGT: Jede Groesse haengt am BEHAELTER, nie am
 * Browserfenster.
 *
 * Der Grund ist der Anspruch des ganzen Programms - Editor, Vorschau und
 * Ausgabe muessen dasselbe zeigen, auf den Punkt. Im Editor steht die
 * Webflaeche in einem Fenster, das viel breiter ist als sie; in der Ausgabe
 * fuellt sie das Fenster ganz. Stuende hier ein ``vw`` oder ein ``@media``,
 * dann laege dieselbe Seite bei 390 Pixeln Flaechenbreite im Editor anders
 * als in der Ausgabe - dieselbe Datei, zwei Bilder. Deshalb:
 *
 *   container-type: inline-size   macht die Flaeche zum Massstab
 *   cqw statt vw                  ein Prozent DER FLAECHE, nicht des Fensters
 *   @container statt @media       der Umbruch fragt die Flaeche
 *
 * Damit ist die Gleichheit nicht verglichen, sondern gebaut: Bei gleicher
 * Flaechenbreite gibt es nur ein moegliches Ergebnis.
 *
 * Umgebrochen wird ohne feste Geraeteklassen, wo es geht. Eine Reihe aus
 * zwei Bausteinen steht nebeneinander, solange jeder seine Mindestbreite
 * bekommt, und untereinander, sobald nicht. Das ist robuster als eine Liste
 * von Geraeteklassen, die immer eine zu wenig hat.
 */

/* Der Massstab liegt AUSSEN, die Groessen liegen INNEN.
 *
 * Das ist keine Geschmacksfrage, sondern die Regel von cqw: Ein Element
 * fragt immer einen VORFAHREN-Behaelter, nie sich selbst. Standen die
 * Groessen auf derselben Ebene wie ``container-type``, rechnete jedes
 * cqw an der naechsthoeheren Flaeche - in der Ausgabe war das zufaellig
 * das Fenster und damit richtig, im Editor das Editorfenster und damit
 * falsch: 19,2 statt 16,085 Pixel Grundschrift bei 390 Pixeln Breite.
 * Dieselbe Seite, zwei Schriftgroessen. Deshalb traegt .webseite nur den
 * Massstab, und alles Weitere haengt an .webinhalt darin. */
.webseite {
  container-type: inline-size;
  container-name: webflaeche;
  display: flow-root;
}

/* Die Farben stehen an ALLEN Wurzeln der Ausgabe, nicht nur an der
   Inhaltsflaeche.

   Sie standen frueher allein auf .webinhalt - solange es nur die
   Inhaltsflaeche gab, war das richtig. Mit Kopf und Fuss war es ein
   Fehler: Beide liegen ausserhalb, --grund und --text waren dort nicht
   gesetzt, und was herauskam, hing davon ab, was der Browser gerade
   vererbte. Im dunklen Thema wurde daraus schwarze Schrift auf schwarzem
   Grund. Eine Farbe, die niemand bestimmt, kann auch niemand nachrechnen -
   und ein Kontrast, den niemand nachrechnen kann, ist keine Zusage.

   Die Groessen bleiben davon getrennt: --spur, --schritt und --grundmass
   haengen an cqw und muessen deshalb INNERHALB der Flaeche stehen, die
   den Container aufspannt. Genau das ist der Grund fuer den Aufbau
   darunter. */
.webseite, .webkopf, .webfuss {
  --grund: #ffffff;
  --grund-ruhig: #f4f1ec;
  --text: #221f1b;
  --text-leise: #5f574d;
  --rand: #e2dbcf;
  /* --marke ist die Hausfarbe und traegt Flaechen und Ranken. Fuer Text auf
     ihr reicht sie nicht: Weiss auf #8b7757 kommt auf 4,31 zu 1 und bleibt
     unter den 4,5, die die WCAG fuer normalen Text verlangt. Ein Knopf, den
     man bei Sonnenlicht nicht liest, ist kein gestalterisches Detail.
     --knopf ist deshalb dunkler: 6,18 zu 1. */
  --marke: #8b7757;
  --marke-tief: #6f5f45;
  --knopf: #6f5f45;
  --knopf-tief: #5c4d38;
  --knopf-schrift: #ffffff;
  --marke-flaeche: #f3eee4;
  --radius: 12px;

  /* Die Vorgabefassung - und zugleich der Stand, den ein Werk ohne
     eigenes Thema behaelt. Wer eines waehlt, bekommt dieselben Merkmale
     mit anderen Werten hinterhergeschoben (webtheme.py); die Auswahl ist
     dort dieselbe wie hier, damit allein die Reihenfolge entscheidet und
     nicht eine Steigerung der Spezifitaet. */
  --grundgrad: 1rem;
  --textschrift: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                 "Times New Roman", serif;
  --displayschrift: var(--textschrift);
}

/* Dunkel gibt es auf zwei Wegen, und die Reihenfolge ist wichtig.
 *
 * Der erste Weg braucht keine Zeile JavaScript: Wer sein System dunkel
 * gestellt hat, bekommt die Website dunkel. Das ist die Vorgabe, und sie
 * gilt auch dann, wenn Skripte abgeschaltet sind oder nicht laden.
 *
 * Der zweite Weg ist die ausdrueckliche Wahl des Lesers. Sie steht als
 * data-farbmodus am <html>-Element und schlaegt das System - in beide
 * Richtungen: "hell" bleibt hell, auch wenn das System dunkel will.
 *
 * Beide Bloecke setzen dieselben Merkmale. Stuende eine Farbe nur in
 * einem von ihnen, gaebe es einen Zustand, in dem sie fehlt - und eine
 * Farbe, die niemand bestimmt, kann auch niemand nachrechnen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-farbmodus="hell"]) .webseite,
  :root:not([data-farbmodus="hell"]) .webkopf,
  :root:not([data-farbmodus="hell"]) .webfuss {
    --grund: #17150f;
    --grund-ruhig: #211d17;
    --text: #f0ebe2;
    --text-leise: #b9b0a2;
    --rand: #383126;
    --marke: #c8b48c;
    --marke-tief: #d9c9a8;
    /* Im Dunkeln liegt der Knopf hell und die Schrift darauf dunkel -
       9,01 zu 1. */
    --knopf: #c8b48c;
    --knopf-tief: #d9c9a8;
    --knopf-schrift: #17150f;
    --marke-flaeche: #262017;
  }
}

:root[data-farbmodus="dunkel"] .webseite,
:root[data-farbmodus="dunkel"] .webkopf,
:root[data-farbmodus="dunkel"] .webfuss {
  --grund: #17150f;
  --grund-ruhig: #211d17;
  --text: #f0ebe2;
  --text-leise: #b9b0a2;
  --rand: #383126;
  --marke: #c8b48c;
  --marke-tief: #d9c9a8;
  --knopf: #c8b48c;
  --knopf-tief: #d9c9a8;
  --knopf-schrift: #17150f;
  --marke-flaeche: #262017;
}

/* Die GROESSEN dagegen stehen hier - und nur hier. Sie haengen an cqw,
   und ein cqw fragt immer einen Vorfahren, nie sich selbst: Stuenden sie
   auf .webseite, rechnete der Browser gegen den Container darueber. */
.webseite > .webinhalt {
  --spur: min(100% - 2.5rem, 72rem);
  --schritt: clamp(2.5rem, 6cqw, 5rem);
  --grundmass: clamp(var(--grundgrad),
                     calc(var(--grundgrad) * 0.92 + 0.35cqw),
                     calc(var(--grundgrad) * 1.2));

  display: flow-root;
  background: var(--grund);
  color: var(--text);
  font: var(--grundmass)/1.65 var(--textschrift);
}
.webseite { background: var(--grund, #fff); }

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

.webseite img, .webseite video, .webseite table { max-width: 100%; }
.webseite img, .webseite video { height: auto; display: block; }

.webseite .webreihe {
  width: var(--spur);
  margin-inline: auto;
  padding-block: calc(var(--schritt) / 2);
}

/* Nebeneinander, solange jeder Baustein seine Mindestbreite bekommt - sonst
   untereinander. Ohne Geraeteklassen, ohne Zaehlen der Bausteine. */
.webseite .webreihe.nebeneinander {
  display: grid;
  gap: clamp(1.5rem, 4cqw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}

.webseite .webbaustein { min-width: 0; }

/* -------------------------------------------------------------- Text */

.webseite .textblock, .webseite .weblead,
.webseite .frageantwort, .webseite .punkttext { hyphens: auto; }
.webseite .textblock { max-width: 42rem; }
.webseite .webreihe:not(.nebeneinander) > .webbaustein > .textblock {
  margin-inline: auto;
}
.webseite .textblock p { margin: 0 0 1em; }
.webseite .textblock p:last-child { margin-bottom: 0; }
.webseite .textblock h1, .webseite .textblock h2, .webseite .textblock h3 {
  line-height: 1.2; margin: 1.6em 0 .5em; text-wrap: balance;
}
.webseite .textblock h1:first-child,
.webseite .textblock h2:first-child { margin-top: 0; }
.webseite a { color: var(--marke-tief); }
/* Auch die Laufweite steht ausdruecklich da.
 *
 * Der Editor ist eine Anwendung mit eigenem Schriftbild - studio.css
 * gibt allen Ueberschriften eine leichte Unterschneidung. Auf der
 * Webflaeche haette dieselbe Ueberschrift damit eine andere Breite als
 * in der Ausgabe: 183,70 statt 185,58 Pixel. Zwei Pixel, die niemand
 * sieht - und trotzdem zwei verschiedene Saetze. Die Flaeche traegt
 * deshalb ihre eigene Laufweite, statt die der Umgebung zu erben. */
.webseite h1, .webseite h2, .webseite h3,
.webseite .herotitel, .webseite .webtitel, .webseite .aufruftitel,
.webseite .kartentitel, .webseite .zitattext, .webseite .kennzahlwert,
.webkopfmarke {
  /* Und zugleich die Stelle, an der die Displayschrift des Themas
     greift. In der Vorgabefassung ist sie dieselbe wie im Text; ein Thema
     kann die beiden trennen. Die Liste steht an EINER Stelle - eine
     Ueberschrift, die hier fehlte, bliebe im Textschnitt stehen, und
     niemand saehe warum. */
  font-family: var(--displayschrift);
  letter-spacing: normal; word-spacing: normal;
}
.webseite .punkttitel, .webseite .fragetitel {
  font-family: var(--textschrift); letter-spacing: normal; word-spacing: normal;
}

/* ------------------------------------------------------------- Bühne */

.webseite .hero {
  display: grid;
  gap: clamp(1.5rem, 4cqw, 3rem);
  align-items: center;
  padding-block: clamp(1rem, 3cqw, 2.5rem);
}
/* Ab genug Platz IN DER FLAECHE Bild und Text nebeneinander - darunter
   gestapelt, Text zuerst: Auf einem schmalen Schirm zaehlt der Satz, nicht
   das Motiv. Gefragt wird die Flaeche, nicht das Fenster. */
@container webflaeche (min-width: 52rem) {
  /* Ein leeres Bildfeld zaehlt nicht: Die Ausgabe laesst ein Bild, das es
     nicht gibt, ersatzlos weg und liegt dann einspaltig. Ein Editor, der
     hier zweispaltig legte, zeigte etwas anderes als die Ausgabe. */
  .webseite .hero:has(.herobild:not([data-editorhilfe])) {
    grid-template-columns: 1fr 1fr;
  }
  .webseite .hero .herobild { order: 2; }
  .webseite .hero .heroinhalt { order: 1; }
}
.webseite .herobild {
  width: 100%; border-radius: var(--radius);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.webseite .heroinhalt { display: grid; gap: 1rem; justify-items: start; }
/* Schriftschnitt und Abstand stehen ausdruecklich da - nie als Vorgabe
   des Elements.
 *
 * In der Ausgabe ist der Buehnentitel ein <h1> und damit vom Browser aus
 * fett; im Editor ist dieselbe Stelle ein beschreibbares <div> und
 * bleibt mager. Gleiche Klasse, gleicher Grad, zwei verschiedene
 * Breiten - der Paritaetstest hat genau das gefunden. Wer sich auf
 * Elementvorgaben verlaesst, hat zwei Wahrheiten. */
.webseite .herotitel {
  margin: 0; line-height: 1.08; text-wrap: balance; font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 3.6cqw, 3.75rem);
}
.webseite .herolead, .webseite .weblead {
  margin: 0; color: var(--text-leise); font-weight: 400;
  font-size: clamp(1.05rem, 1rem + 0.5cqw, 1.35rem);
}

/* ------------------------------------------------------------ Knöpfe */

.webseite .webknopf {
  display: inline-block; padding: .8em 1.6em; border: none;
  border-radius: 999px; background: var(--knopf); color: var(--knopf-schrift);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  /* Auch die Ausrichtung ausdruecklich: Ein <button> zentriert seinen
     Text von Haus aus, ein <a> und ein <div> nicht. Im Formular stand
     die Beschriftung dadurch an zwei verschiedenen Stellen. */
  text-align: center;
  /* Fingergerecht: 44 px sind die kleinste Flaeche, die sich auf einem
     Telefon zuverlaessig treffen laesst. */
  min-height: 44px; line-height: 1.5;
}
.webseite .webknopf:hover { background: var(--knopf-tief); }
.webseite .webknopf:disabled { opacity: .5; cursor: not-allowed; }

.webseite :focus-visible { outline: 3px solid var(--marke); outline-offset: 2px; }

/* ------------------------------------------- Video, Titel und Zitate */

.webseite .webtitel, .webseite .aufruftitel {
  margin: 0 0 .4em; line-height: 1.15; text-wrap: balance; font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.8cqw, 2.4rem);
}
.webseite .videorahmen {
  width: 100%; border-radius: var(--radius); margin-bottom: 1rem;
}

.webseite .beleggitter {
  display: grid; gap: clamp(1rem, 3cqw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.webseite .belegkarte {
  margin: 0; padding: clamp(1.2rem, 3cqw, 2rem);
  background: var(--grund-ruhig); border-radius: var(--radius);
}
.webseite .belegtext {
  margin: 0 0 .8em; font-size: 1.05em; font-weight: 400; font-style: normal;
}
.webseite .belegname {
  color: var(--text-leise); font-size: .92em; font-weight: 400;
}

/* --------------------------------------------------------- Formulare */

.webseite .formular { max-width: 34rem; }
.webseite .webreihe:not(.nebeneinander) > .webbaustein > .formular {
  margin-inline: auto;
}
/* Zwei Felder nebeneinander, sobald die Flaeche es hergibt - und nur,
   wenn beide "halb" sind. Auf einem Telefon steht ohnehin alles
   untereinander: Eine Formularzeile mit zwei Feldern nebeneinander ist
   dort keine Zeile, sondern ein Gedraenge. */
.webseite .formularfelder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.2rem;
}
@container webflaeche (min-width: 34rem) {
  .webseite .formularfelder { grid-template-columns: 1fr 1fr; }
  /* Alles, was kein halbes Feld ist, nimmt die ganze Zeile. Die Regel
     nennt die Ausnahme und nicht die Faelle: Im Editor steht der Knopf
     in einer Zeilenhuelle, in der Ausgabe direkt im Raster - eine Liste
     von Klassennamen haette einen davon vergessen. */
  .webseite .formularfelder > :not(.formularfeld.feld-halb) {
    grid-column: 1 / -1;
  }
}
.webseite .formularhilfe {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.92em;
}
.webseite .formularfeld { margin: 0; display: grid; gap: .35rem; }
.webseite .feldname { font-size: .92em; color: var(--text-leise); }
/* Auch hier: die Klasse bestimmt, nicht das Element. In der Ausgabe ist
   das Eingabefeld ein <input>, im Editor ein Platzhalter-<span>. Ein span
   ist von Haus aus inline und nimmt weder Breite noch Mindesthoehe an -
   ohne diese Zeile stuenden die Felder verschieden. */
/* Feste Hoehe, keine inhaltsabhaengige.
 *
 * In der Ausgabe steht hier ein <input> beziehungsweise ein <textarea>,
 * im Editor ein leerer Platzhalter. Ein Feld, dessen Hoehe sich aus
 * seinem Inhalt ergibt, ist damit auf beiden Seiten verschieden hoch -
 * und alles darunter verrutscht. Die Hoehe steht deshalb ausdruecklich
 * da, in rem, und gilt fuer beide gleich. 2,75 rem sind 44 Pixel: die
 * kleinste Flaeche, die sich auf einem Telefon zuverlaessig treffen
 * laesst. */
.webseite .feldkasten {
  display: block;
  width: 100%; font: inherit; padding: .55rem .9rem; height: 2.75rem;
  border: 1px solid var(--rand); border-radius: 8px;
  background: var(--grund); color: var(--text);
  resize: none;
}
.webseite .formularfeld.gross .feldkasten { height: 8rem; }
.webseite .formulareinwilligung {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: .7rem; align-items: start; font-size: .92em; color: var(--text-leise);
}
/* Das Kaestchen ist die erste Spalte - egal, ob es ein <input> ist (in
   der Ausgabe) oder ein Platzhalter (im Editor). Waere es nur fuer
   <input> bemasst, saesse der Einwilligungstext im Editor um zwanzig
   Pixel weiter links und braeuchte eine Zeile weniger. */
/* Das Kaestchen ist die erste Spalte - egal, ob es ein <input> ist (in
   der Ausgabe) oder ein Platzhalter (im Editor).
 *
 * Und bemasst wird es in rem, nicht in em: Ein <input> erbt die
 * Schriftgroesse seiner Umgebung nicht, es bringt seine eigene mit. Ein
 * "1.1em" bedeutete dadurch im Editor 19,42 und in der Ausgabe 14,66
 * Pixel - der Einwilligungstext bekam zwei Pixel mehr Spalte und brach
 * eine Zeile frueher um. rem misst an der Wurzel und ist auf beiden
 * Seiten dieselbe Zahl. Der Aussenabstand faellt aus demselben Grund
 * ausdruecklich weg: Formularelemente bringen von Haus aus einen mit. */
.webseite .formulareinwilligung > :first-child {
  margin: .35rem 0 0; width: 1.15rem; height: 1.15rem; flex: none;
  border: 1px solid var(--rand); border-radius: 3px; box-sizing: border-box;
}
.webseite .formulareinwilligung > input:first-child { border: revert; }

/* Formularelemente erben Schrift und Groesse der Flaeche - sonst rechnet
   jede em-Angabe darin auf einer anderen Grundlage. */
.webseite input, .webseite textarea, .webseite button, .webseite select {
  font: inherit;
}
.webseite .formularfehler {
  margin: .8rem 0 0; padding: .8em 1em; border-radius: 8px;
  background: var(--marke-flaeche); color: var(--text);
}

/* -------------------------------------------------------------- FAQ */

.webseite .fragenkasten { border-bottom: 1px solid var(--rand); padding: .9rem 0; }
.webseite .fragetitel {
  cursor: pointer; font-weight: 600; min-height: 44px;
  display: flex; align-items: center;
}
.webseite .frageantwort { padding-top: .5rem; color: var(--text-leise); }

/* ------------------------------------------------------- Handlungsruf */

.webseite .aufruf {
  text-align: center; padding: clamp(2rem, 6cqw, 4rem);
  background: var(--grund-ruhig); border-radius: var(--radius);
  display: grid; gap: 1rem; justify-items: center;
}

/* ------------------------------------------------- Listen und Tabellen */

.webseite .listenblock {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem;
}
.webseite .listenpunkt { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.webseite .zaehler {
  color: var(--marke); font-weight: 700; font-variant-numeric: tabular-nums;
}
.webseite .punkttitel { font-weight: 600; }

/* Eine breite Tabelle scrollt in sich - nie die ganze Seite. */
.webseite .tabellenblock { overflow-x: auto; }
.webseite .tabellenblock table { border-collapse: collapse; min-width: 100%; }
.webseite .tabellenblock th, .webseite .tabellenblock td {
  border: 1px solid var(--rand); padding: .6em .8em; text-align: left;
}

.webseite .hinweisblock {
  padding: 1.2rem 1.4rem; border-left: 4px solid var(--marke);
  background: var(--grund-ruhig); border-radius: 0 var(--radius) var(--radius) 0;
}

.webseite .bildfeld img { width: 100%; border-radius: var(--radius); }
.webseite .bildunterschrift {
  color: var(--text-leise); font-size: .92em; margin-top: .6rem;
}

@media (prefers-reduced-motion: reduce) {
  .webseite *, .webseite *::before, .webseite *::after {
    animation: none !important; transition: none !important;
  }
}


/* =====================================================================
   Kartenraster, Kennzahlen, Zitat und die Aufmacherfassungen
   =====================================================================

   Eine Regel fuer alle: Es wird umgebrochen, nicht geschrumpft. Das
   Raster nennt eine MINDESTbreite je Karte, und wo die nicht mehr
   hinpasst, faellt eine Spalte weg. Niemand traegt hier eine Spaltenzahl
   je Geraet ein - genau das ist der Unterschied zwischen "responsiv" und
   "fuer drei Bildschirmgroessen von Hand gebaut".

   Gefragt wird dabei immer die FLAECHE (@container), nie das Fenster:
   Derselbe Baustein steht im Editor in einer 390 Pixel breiten Flaeche
   und in der Ausgabe in einem 390 Pixel breiten Fenster - und muss
   beide Male gleich umbrechen. */

.webseite .karten, .webseite .kennzahlen {
  display: grid;
  gap: clamp(1rem, 2.5cqw, 2rem);
  padding-block: clamp(1rem, 3cqw, 2.5rem);
}

.webseite .kartengitter {
  display: grid;
  gap: clamp(0.9rem, 2.2cqw, 1.6rem);
  /* min(100%, …) statt nur der Mindestbreite: Ohne das waere eine Karte
     auf einem 320-Pixel-Schirm breiter als ihr Platz, und die Seite
     schoebe waagerecht. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.webseite .karten-logos .kartengitter {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  align-items: center;
}
.webseite .karten-team .kartengitter {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.webseite .karte {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding: clamp(1rem, 2cqw, 1.5rem);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  color: inherit;
  text-decoration: none;
}
/* Eine Karte, die ein Verweis ist, verhaelt sich auch so - und sagt es
   nicht nur mit dem Mauszeiger. */
a.karte { transition: border-color .15s ease, transform .15s ease; }
a.karte:hover { border-color: var(--marke-tief); }
a.karte:focus-visible {
  outline: 2px solid var(--marke-tief);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  a.karte:hover { transform: translateY(-2px); }
}

.webseite .kartenbild {
  width: 100%;
  /* Ein festes Verhaeltnis reserviert den Platz, bevor das Bild da ist.
     Ohne das springt die ganze Seite, sobald es ankommt. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: calc(var(--radius) * 0.6);
}
.webseite .karten-team .kartenbild { aspect-ratio: 1 / 1; }
.webseite .karten-logos .kartenbild {
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: transparent;
}
.webseite .karten-logos .karte { border-color: transparent; background: transparent; }
.webseite .karteninhalt { display: grid; gap: 0.5rem; min-width: 0; }
.webseite .kartentitel {
  margin: 0;
  font-size: clamp(1.05rem, 0.98rem + 0.5cqw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
}
.webseite .kartentext {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.95em;
  line-height: 1.6;
}
.webseite .kartenweiter {
  margin-top: auto;
  color: var(--marke-tief);
  font-weight: 600;
  font-size: 0.95em;
}

/* Kennzahlen. Der Wert steht optisch ueber seiner Bezeichnung, im
   Quelltext aber darunter - dt vor dd, weil ein Vorlesewerkzeug erst die
   Bezeichnung und dann den Wert braucht, um einen Satz daraus zu machen.
   Gedreht wird deshalb hier und nicht im Markup. */
.webseite .zahlenreihe {
  margin: 0;
  display: grid;
  gap: clamp(1rem, 2.5cqw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
.webseite .kennzahl { display: flex; flex-direction: column-reverse; gap: 0.3rem; }
.webseite .kennzahlwert {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 3cqw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.webseite .kennzahlname {
  color: var(--text-leise);
  font-size: 0.95em;
  line-height: 1.4;
}

/* Das Zitat traegt links eine Linie statt Anfuehrungszeichen: Die setzt
   der Autor selbst, wenn er sie will, und ein Zeichen, das die Ausgabe
   hinzufuegt, steht spaeter zweimal da. */
.webseite .zitat {
  margin: 0;
  padding: clamp(1rem, 3cqw, 2rem) 0 clamp(1rem, 3cqw, 2rem)
           clamp(1rem, 3cqw, 2rem);
  border-inline-start: 3px solid var(--marke);
  display: grid;
  gap: 0.8rem;
}
.webseite .zitattext {
  margin: 0;
  font-size: clamp(1.2rem, 1.05rem + 1cqw, 1.8rem);
  line-height: 1.4;
  font-style: italic;
}
.webseite .zitatname { color: var(--text-leise); font-size: 0.95em; }

/* Der grosse Aufmacher: Text ueber dem Bild.

   Der Schleier ist keine Geschmacksfrage. Ohne ihn haengt die
   Lesbarkeit der Ueberschrift daran, welches Bild jemand hochlaedt - und
   ein Kontrast, den das Motiv entscheidet, ist keine Zusage, sondern
   ein Zufall. Mit ihm steht die Schrift auf einem Grund, den PageSetter
   kennt, und der laesst sich nachrechnen. */
.webseite .hero-gross { position: relative; padding: 0; }
.webseite .hero-gross .herobild {
  grid-area: 1 / 1;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
}
.webseite .hero-gross .heroinhalt {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  padding: clamp(1.2rem, 4cqw, 3rem);
  border-radius: var(--radius);
  /* Der Schleier reicht von 88 auf 68 Prozent - und zwar so gerechnet,
     dass er am HELLSTEN Ende noch traegt: Liegt darunter ein reinweisses
     Motiv, kommt die Ueberschrift dort auf 6,3:1 und die Unterzeile auf
     5,4:1. Ein Verlauf, der oben nur 2,4:1 haelt, sieht besser aus und
     ist eine Zusage, die vom hochgeladenen Bild abhaengt. */
  background: linear-gradient(to top, rgba(15, 13, 10, .88), rgba(15, 13, 10, .68));
  color: #fff9ef;
}
.webseite .hero-gross .herolead { color: #efe7d8; }
.webseite .hero-gross .webknopf {
  background: #fff9ef;
  border-color: #fff9ef;
  color: #17150f;
}
/* Ohne Bild bleibt vom grossen Aufmacher der Text - und der braucht dann
   keinen Schleier, sondern die gewoehnlichen Farben. */
.webseite .hero-gross:not(:has(.herobild)) .heroinhalt {
  background: none;
  color: inherit;
  padding-inline: 0;
}
.webseite .hero-gross:not(:has(.herobild)) .herolead { color: var(--text-leise); }
.webseite .hero-gross:not(:has(.herobild)) .webknopf {
  background: var(--knopf);
  border-color: var(--knopf);
  color: var(--knopf-schrift);
}

.webseite .hero-schlicht { justify-items: start; text-align: start; }
.webseite .hero-schlicht .heroinhalt { max-width: 46rem; }

/* =====================================================================
   Kopf, Navigation und Fuss - was allen Seiten gemeinsam ist
   =====================================================================

   Sie stehen ausserhalb von .webseite. Das ist keine Formsache: Der
   Messvertrag zwischen Editor, Vorschau und Ausgabe rechnet jede
   Blockposition relativ zu .webseite, und ein Kopf darueber darf daran
   nichts verschieben.

   Die Navigation hat bewusst kein Klappmenue. Ein Burger braucht
   JavaScript, um sich zu oeffnen, und diese Ausgabe muss ohne
   JavaScript vollstaendig benutzbar sein - eine Website, deren
   Impressum von einem Skript abhaengt, ist keine erreichbare Website.
   Die Punkte brechen deshalb um, wie Text umbricht. Auf einem Telefon
   stehen sie in zwei Zeilen statt hinter einem Knopf; das ist weniger
   modisch und mehr benutzbar. */

.webkopf, .webfuss {
  container-type: inline-size;
  container-name: webflaeche;
  background: var(--grund);
  color: var(--text);
  font-family: var(--textschrift);
}
.webkopf { border-bottom: 1px solid var(--rand); }
.webfuss { border-top: 1px solid var(--rand); }

.webkopfspur, .webfussspur {
  /* Dieselbe Spur und dasselbe Grundmass wie der Inhalt - und zwar hier
     berechnet, im Kind des Containers. Stuenden sie eine Ebene hoeher,
     rechnete cqw gegen die Flaeche darueber statt gegen den Kopf. */
  --spur: min(100% - 2.5rem, 72rem);
  --grundmass: clamp(var(--grundgrad),
                     calc(var(--grundgrad) * 0.92 + 0.35cqw),
                     calc(var(--grundgrad) * 1.2));
  width: var(--spur);
  margin-inline: auto;
  padding-block: clamp(0.9rem, 2cqw, 1.4rem);
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2cqw, 1.6rem);
  flex-wrap: wrap;
  font-size: var(--grundmass);
}

.webkopfmarke { font-weight: 700; font-size: 1.15em; letter-spacing: -0.01em; }

.webnavi, .webfussnavi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.7rem, 1.6cqw, 1.5rem);
}
.webnavi { margin-inline-end: auto; }

.webnavipunkt, .webfusspunkt {
  color: var(--text-leise);
  text-decoration: none;
  /* 44 px in beide Richtungen: WCAG 2.2 verlangt fuer Ziele 24 x 24, die
     App selbst haelt sich an 44 - und ein Navigationspunkt, den man auf
     dem Telefon dreimal treffen muss, ist kein Detail. */
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.webnavipunkt:hover, .webfusspunkt:hover { color: var(--text); }
.webnavipunkt:focus-visible, .webfusspunkt:focus-visible,
.webueberspringen:focus-visible {
  outline: 2px solid var(--marke-tief);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Die Seite, auf der man steht, traegt es sichtbar UND im Vorlesemodus:
   aria-current fuer die Ansage, die Linie fuer das Auge. */
.webnavipunkt[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--marke-tief);
  font-weight: 600;
}

.webkopfaktion { flex: none; }

.webfussspur { align-items: flex-start; flex-direction: column; }
.webfusstext { margin: 0; color: var(--text-leise); font-size: 0.92em; line-height: 1.6; }
@container webflaeche (min-width: 44rem) {
  .webfussspur { flex-direction: row; align-items: center; }
  .webfusstext { margin-inline-end: auto; }
}

/* Der Sprung zum Inhalt liegt ausserhalb des Bildes, bis ihn jemand mit
   der Tastatur erreicht. Nicht display:none - was nicht da ist, kann
   auch nicht angesprungen werden. */
.webueberspringen {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.7rem 1.1rem;
  background: var(--knopf);
  color: var(--knopf-schrift);
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.webueberspringen:focus { inset-inline-start: 0; }


/* ============================================================ Aufteilung

   Struktur, keine Erscheinung: zwei oder drei eigene Blockstapel
   nebeneinander. Die Breiten stehen als benannte Fassungen da, nicht als
   freie Rasterangabe im Werk - "seitenleiste-links" ist eine Entscheidung,
   "260px minmax(0,1fr)" waere ein zweites Layoutsystem, das keine Ausgabe
   pruefen kann.

   Schmal ist der Ausgangszustand: untereinander, in der Reihenfolge des
   Quelltextes. Nebeneinander wird erst ab genug Platz IN DER FLAECHE -
   dieselbe Frage wie ueberall hier, damit der Editor und die Ausgabe an
   derselben Stelle umbrechen. */

.webseite .aufteilung {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4cqw, 3rem);
  align-items: start;
}
.webseite .aufteilung[data-ausrichtung="mitte"] { align-items: center; }
.webseite .aufteilung[data-ausrichtung="gedehnt"] { align-items: stretch; }

.webseite .aufteilungsbereich {
  /* Der Bezugspunkt fuer die Editorhilfe, die eine leere Spalte sichtbar
     macht. Sie steht in beiden Fassungen gleich, damit die Anordnung in
     Editor und Ausgabe dieselbe bleibt. */
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5cqw, 2rem);
}

/* Die Reihenfolge auf schmalem Schirm laesst sich umkehren - fuer den
   Fall, dass rechts das Wesentliche steht. Der Quelltext bleibt dabei
   unveraendert: Was ein Vorlesewerkzeug liest, ist immer die
   Reihenfolge im Dokument. */
.webseite .aufteilung[data-mobil="umgekehrt"] > .aufteilungsbereich:nth-child(1) { order: 3; }
.webseite .aufteilung[data-mobil="umgekehrt"] > .aufteilungsbereich:nth-child(2) { order: 2; }
.webseite .aufteilung[data-mobil="umgekehrt"] > .aufteilungsbereich:nth-child(3) { order: 1; }

@container webflaeche (min-width: 52rem) {
  .webseite .aufteilung[data-mobil="umgekehrt"] > .aufteilungsbereich { order: 0; }

  .webseite .aufteilung-gleich[data-bereiche="2"] { grid-template-columns: 1fr 1fr; }
  .webseite .aufteilung-gleich[data-bereiche="3"] { grid-template-columns: repeat(3, 1fr); }
  .webseite .aufteilung-seitenleiste-links {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  }
  .webseite .aufteilung-seitenleiste-rechts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  }
  .webseite .aufteilung-formular-rechts {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 28.75rem);
  }
  .webseite .aufteilung-asymmetrisch-40-60 {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  /* Eine Spalte, die stehen bleibt, waehrend die andere laeuft. Erst ab
     dem Umbruch: Untereinander gaebe es nichts, woran sie haften
     koennte, ausser dem eigenen Text. */
  .webseite .aufteilungsbereich.haftend {
    position: sticky;
    top: clamp(1rem, 3cqw, 2rem);
  }
}

/* Innerhalb einer Spalte hat ein Textblock keine eigene Mitte mehr - die
   Spalte IST die Mitte. */
.webseite .aufteilungsbereich > .webbaustein > .textblock { margin-inline: 0; }


/* --------------------------------------------- Der Farbmodus-Umschalter

   Er steht im Quelltext und traegt dort ``hidden``: Was ohne JavaScript
   nichts tut, soll auch nicht danach aussehen. Das Modul nimmt das
   Merkmal weg, sobald es laeuft.

   Drei Zustaende, nicht zwei. "wie im System" ist die Vorgabe und der
   einzige Zustand, der einer spaeteren Aenderung des Lesers folgt - ein
   Schalter, der nur hell und dunkel kennt, nimmt ihm diese Einstellung
   weg, sobald er ihn einmal beruehrt. */
/* Zuerst: hidden gilt. Eine Klassenregel mit display schlaegt sonst die
   Regel des Browsers fuer [hidden] - und dann stuende ein Knopf da, der
   ohne JavaScript nichts tut. */
.webfarbmodus[hidden] { display: none; }

.webfarbmodus {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  /* 44 px in beide Richtungen - dasselbe Mass wie fuer jeden anderen
     Bedienpunkt dieser Website. */
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 0.7rem;
  font: inherit;
  font-size: 0.92em;
  color: var(--text-leise);
  background: transparent;
  border: 1px solid var(--rand);
  border-radius: 999px;
  cursor: pointer;
}
.webfarbmodus:hover { color: var(--text); border-color: var(--marke-tief); }
.webfarbmodus:focus-visible {
  outline: 2px solid var(--marke-tief);
  outline-offset: 3px;
}
.webfarbmodus .webfarbmodusname { white-space: nowrap; }
/* Ein Zeichen je Zustand. Es steht im Quelltext dreimal da; sichtbar ist
   immer genau eines - so braucht der Wechsel kein Nachladen und kein
   Bild, das erst kommen muss. */
.webfarbmodus .webfarbmoduszeichen { display: none; }
.webfarbmodus[data-farbmodus="system"] .webfarbmoduszeichen[data-fuer="system"],
.webfarbmodus[data-farbmodus="hell"] .webfarbmoduszeichen[data-fuer="hell"],
.webfarbmodus[data-farbmodus="dunkel"] .webfarbmoduszeichen[data-fuer="dunkel"] {
  display: inline;
}


/* ================================================ Kopf und Fuss in Fassungen

   Eine Fassung ist ein Merkmal am Element, keine eigene Auszeichnung:
   Was sie tut, steht hier an einer Stelle, und Editor und Ausgabe
   zeichnen dieselben Merkmale. */

/* Der haftende Kopf bleibt oben stehen. Das ist bequem und kostet Platz -
   auf einem schmalen Schirm mehr, als es wert waere. Deshalb haftet er
   erst ab genug Hoehe: Wer ein Telefon quer haelt, hat ungefaehr 390
   Pixel Hoehe, und ein Kopf, der davon ein Viertel nimmt, ist keine
   Hilfe. */
@media (min-height: 30rem) {
  .webkopf[data-variante="haftend"] {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Der Grund muss decken - sonst laeuft der Text darunter durch. */
    background: var(--grund);
  }
}

/* Die eingeklappte Navigation.

   Ohne das Laufzeitmodul steht sie sichtbar im Kopf und bricht um, genau
   wie in der einfachen Fassung: [data-menue] wird erst gesetzt, wenn das
   Modul laeuft. Ein Menue, das ohne JavaScript zu einem Knopf wuerde, den
   niemand oeffnen kann, waere schlimmer als drei Zeilen Links. */
.webmenueknopf {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  font: inherit;
  font-size: 0.95em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--rand);
  border-radius: 999px;
  cursor: pointer;
}
.webmenueknopf[hidden] { display: none; }
.webmenueknopf:hover { border-color: var(--marke-tief); }
.webmenueknopf:focus-visible {
  outline: 2px solid var(--marke-tief);
  outline-offset: 3px;
}
/* Drei Striche - aus einem Element und zwei Schatten, damit kein Bild
   nachgeladen werden muss und die Farbe der Schrift folgt. */
.webmenuestrich {
  width: 1.1em;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -0.36em 0 currentColor, 0 0.36em 0 currentColor;
}
.webkopf[data-menue="zu"] .webnavi { display: none; }
/* Aufgeklappt steht sie unter der Kopfzeile, ueber die ganze Breite -
   nicht als schwebende Flaeche: Was den Text verdeckt, verdeckt ihn auch
   fuer den, der gerade liest. */
.webkopf[data-menue="offen"] .webkopfspur { flex-wrap: wrap; }
.webkopf[data-menue="offen"] .webnavi {
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-inline-end: 0;
  padding-block: 0.4rem;
  border-top: 1px solid var(--rand);
}
.webkopf[data-menue="offen"] .webnavipunkt { border-bottom-color: transparent; }

/* Der Fuss in Spalten. Umgebrochen wird nach der FLAECHE: Es fallen
   Spalten weg, wenn eine ihre Mindestbreite nicht mehr bekommt - niemand
   traegt hier eine Spaltenzahl je Geraet ein. */
.webfuss[data-variante="spalten"] .webfusssaeulen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: clamp(1.2rem, 3cqw, 2.4rem);
  align-items: start;
  flex-direction: initial;
}
.webfussmarke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.webfuss[data-variante="spalten"] .webfussmarke .webfusstext { margin: 0; }
.webfusssaeule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.webfussueberschrift {
  margin: 0 0 0.2rem;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.webfusssaeule .webfusspunkt { border-bottom-color: transparent; }


/* ================================================== Zeitleiste

   Eine geordnete Liste an einer Linie. Die Zeitangabe steht im Quelltext
   VOR dem Titel und wird hier nur gesetzt - so liest ein
   Vorlesewerkzeug sie in derselben Reihenfolge, in der das Auge sie
   sieht. Eine Anordnung, die die Lesereihenfolge umkehrt, ist kein
   Layout, sondern ein Fehler. */

.webseite .zeitleiste { padding-block: clamp(1rem, 3cqw, 2.5rem); }

.webseite .zeitleisteliste {
  list-style: none;
  margin: clamp(1rem, 2.5cqw, 2rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.2rem, 3cqw, 2.2rem);
}

.webseite .zeiteintrag {
  display: grid;
  gap: 0.2rem 1.2rem;
  /* Schmal: alles untereinander, die Linie links. Breit: die Zeit in
     einer eigenen Spalte. Es entscheidet die Flaeche. */
  grid-template-columns: 1fr;
  padding-inline-start: 1.4rem;
  border-inline-start: 2px solid var(--rand);
  position: relative;
}
/* Der Punkt auf der Linie. Er ist Zierrat und traegt keine Bedeutung -
   deshalb kein eigenes Element, sondern ein ::before. */
.webseite .zeiteintrag::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.4rem;
  top: 0.45em;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--marke);
}
.webseite .zeitangabe {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--text-leise);
  letter-spacing: 0.02em;
}
.webseite .zeittitel { margin: 0 0 0.3em; font-size: 1.15em; line-height: 1.25; }
.webseite .zeittext { color: var(--text); }
.webseite .zeittext p:last-child { margin-bottom: 0; }

@container webflaeche (min-width: 40rem) {
  .webseite .zeiteintrag {
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
    align-items: baseline;
  }
  .webseite .zeitangabe { text-align: end; }
  .webseite .zeiteintrag::before { top: 0.4em; }
}

/* ============================================ Sprungnavigation

   Ohne Laufzeitmodul sind es Anker - und Anker funktionieren. Das Modul
   traegt nur nach, WO man gerade ist; es macht die Navigation nicht
   erst benutzbar. */

.webseite .sprungnavigation { padding-block: clamp(0.8rem, 2cqw, 1.6rem); }

.webseite .sprungliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem clamp(0.8rem, 2cqw, 1.6rem);
}

.webseite .sprungpunkt {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text-leise);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.webseite .sprungpunkt:hover { color: var(--text); }
.webseite .sprungpunkt:focus-visible {
  outline: 2px solid var(--marke-tief);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Wo man gerade steht - sichtbar UND im Vorlesemodus.

   Die Linie ist das Signal, nicht die Farbe allein (WCAG 1.4.1) - und
   nicht die Schriftstaerke: Diese Hervorhebung entsteht erst beim Lesen,
   im Editor gibt es sie nicht. Ein fetterer Schnitt machte das Wort
   breiter, und damit stuende in Editor und Ausgabe verschieden viel in
   einer Zeile. Eine Lesehilfe darf den Satz nicht verschieben. */
.webseite .sprungpunkt[aria-current="true"] {
  color: var(--text);
  border-bottom-color: var(--marke-tief);
}

/* Ein angesprungener Abschnitt soll nicht unter einem haftenden Kopf
   verschwinden. */
.webseite .webbaustein[id] { scroll-margin-top: 5rem; }


/* ==================================================== Pixelfresser

   Die Farben des Spiels stehen als Merkmale hier - der Zeichner liest
   sie aus dem Stilblatt, statt sie selbst zu kennen. Damit folgt das
   Spiel dem Farbmodus wie alles andere auch, und niemand muss zwei
   Paletten pflegen. */

.webseite .spiel {
  --spielgrund: #f7f8fa;
  --spielraster: rgba(20, 24, 31, 0.05);
  --spielkopf: #0e3b2e;
  --spielkopfschrift: #ffffff;
  --spielkoerper: #1b5e4f;
  --spieltot: #c9ced6;
  --spieltotkopf: #8a97a6;
  --spielfutter: #b25f00;
  --spielgold: #8a6100;
  padding-block: clamp(1rem, 3cqw, 2.5rem);
}

/* Die dunkle Fassung folgt denselben zwei Wegen wie der Rest der Seite:
   die Einstellung des Lesers, und seine ausdrueckliche Wahl. */
@media (prefers-color-scheme: dark) {
  :root:not([data-farbmodus="hell"]) .webseite .spiel {
    --spielgrund: #2a3646;
    --spielraster: rgba(255, 255, 255, 0.10);
    --spielkopf: #22c55e;
    --spielkopfschrift: #0b1a12;
    --spielkoerper: #16a34a;
    --spieltot: #5b6678;
    --spieltotkopf: #7c8797;
    --spielfutter: #f5a623;
    --spielgold: #ffd34d;
  }
}
:root[data-farbmodus="dunkel"] .webseite .spiel {
  --spielgrund: #2a3646;
  --spielraster: rgba(255, 255, 255, 0.10);
  --spielkopf: #22c55e;
  --spielkopfschrift: #0b1a12;
  --spielkoerper: #16a34a;
  --spieltot: #5b6678;
  --spieltotkopf: #7c8797;
  --spielfutter: #f5a623;
  --spielgold: #ffd34d;
}

.webseite .spielbuehne {
  display: grid;
  gap: clamp(0.6rem, 1.5cqw, 1rem);
  max-width: 34rem;
  margin-inline: auto;
}

.webseite .spielkopf {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 2cqw, 1.6rem);
  margin: 0;
}
.webseite .spielwert { margin: 0; display: flex; gap: 0.4em; align-items: baseline; }
.webseite .spielwertname { color: var(--text-leise); font-size: 0.88em; }
.webseite .spielwert strong { font-variant-numeric: tabular-nums; }

/* Das Feld behaelt sein Seitenverhaeltnis, egal wie breit die Flaeche
   ist - ein Spielfeld, das sich verzerrt, ist ein anderes Spiel. */
.webseite .spielflaeche {
  position: relative;
  aspect-ratio: 20 / 24;
  width: 100%;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--spielgrund);
}
.webseite .spielflaeche:focus-visible {
  outline: 3px solid var(--marke-tief);
  outline-offset: 2px;
}
.webseite .spielfeld {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.webseite .spielschleier {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--grund) 78%, transparent);
}
.webseite .spielschleier[hidden] { display: none; }
.webseite .spielschleiertext {
  margin: 0;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--text);
}

.webseite .spielleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.webseite .spielknopf {
  min-height: 2.75rem;
  padding: 0 1rem;
  font: inherit;
  font-size: 0.95em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--rand);
  border-radius: 999px;
  cursor: pointer;
}
.webseite .spielknopf[hidden] { display: none; }
.webseite .spielknopf:disabled { opacity: 0.5; cursor: default; }
.webseite .spielknopf:hover:not(:disabled) { border-color: var(--marke-tief); }
.webseite .spielknopf:focus-visible,
.webseite .spiel .webknopf:focus-visible {
  outline: 2px solid var(--marke-tief);
  outline-offset: 3px;
}

/* Das Steuerkreuz nur dort, wo es gebraucht wird: auf einem Geraet ohne
   feinen Zeiger. Auf einem Laptop waeren vier Knoepfe neben einer
   Tastatur nur Ballast. */
.webseite .spieldpad { display: none; }
@media (pointer: coarse) {
  .webseite .spieldpad {
    display: grid;
    grid-template-columns: repeat(3, 3.5rem);
    grid-template-areas: ". oben ." "links . rechts" ". unten .";
    gap: 0.4rem;
    justify-content: center;
  }
  .webseite .spieldpad button {
    min-height: 3.5rem;
    font: inherit;
    font-size: 1.3em;
    color: var(--text);
    background: var(--grund-ruhig);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .webseite .spieldpad button[data-richtung="0,-1"] { grid-area: oben; }
  .webseite .spieldpad button[data-richtung="-1,0"] { grid-area: links; }
  .webseite .spieldpad button[data-richtung="1,0"] { grid-area: rechts; }
  .webseite .spieldpad button[data-richtung="0,1"] { grid-area: unten; }
}

.webseite .spielhilfe, .webseite .spielohnejs {
  margin: 0.6rem 0 0;
  color: var(--text-leise);
  font-size: 0.92em;
}
.webseite .spielohnejs[hidden] { display: none; }
/* Die Ansage ist fuer Vorlesewerkzeuge da, nicht fuers Auge - aber sie
   steht im Fluss und nicht ausserhalb: Was nicht da ist, wird auch nicht
   vorgelesen. */
.webseite .spielansage {
  margin: 0.3rem 0 0;
  min-height: 1.4em;
  color: var(--text-leise);
  font-size: 0.92em;
}

.webseite .spieldialog {
  width: min(94vw, 46rem);
  max-height: min(92vh, 60rem);
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
}
.webseite .spieldialog::backdrop { background: rgba(10, 12, 16, 0.66); }
.webseite .spieldialog form { display: flex; justify-content: flex-end; }

/* Die gemeinsame Bestenliste. Sie steht unter dem Feld und nicht daneben:
   Wer spielt, schaut aufs Feld; wer fertig ist, liest darunter weiter. */
.webseite .spielbestenliste {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund-ruhig);
}
.webseite .spielbestentitel { margin: 0; font-size: 1.05em; }
.webseite .spielbestenplaetze {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem;
  counter-reset: platz;
}
.webseite .spielbestenplaetze li {
  display: flex; align-items: baseline; gap: 0.6rem;
}
.webseite .spielbestenplaetze li::before {
  counter-increment: platz;
  content: counter(platz) ".";
  min-width: 1.6em;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.webseite .spielbestenname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.webseite .spielbestenpunkte { font-variant-numeric: tabular-nums; }
.webseite .spielbestenhinweis,
.webseite .spielbestenstand {
  margin: 0; color: var(--text-leise); font-size: 0.9em; line-height: 1.45;
}
.webseite .spielbestenstand:empty { display: none; }
.webseite .spielbesteneintrag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
}
.webseite .spielbesteneintrag[hidden] { display: none; }
.webseite .spielbesteneintrag input {
  flex: 1 1 8rem; min-width: 0;
  padding: 0.45em 0.6em;
  border: 1px solid var(--rand);
  border-radius: calc(var(--radius) * 0.5);
  background: var(--grund);
  color: var(--text);
  font: inherit;
}

/* ============================================ Sammlungen

   Eine Uebersicht ueber Seiten - Publikationen, Beitraege, Projekte.
   Was hier steht, gilt fuer Editor, Vorschau und Ausgabe gleich; die
   Masse sind relativ, weil dieselbe Uebersicht in einer schmalen
   Editorspalte und in einem breiten Fenster stehen muss. Gemessen wird
   deshalb die FLAECHE (@container webflaeche) und nicht das Fenster. */
.webseite .sammlungsansicht { display: grid; gap: 2rem; }
.webseite .sammlungleer {
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  color: var(--text-leise);
}

/* Der hervorgehobene Eintrag. Schmal steht das Bild ueber dem Text,
   breit daneben - eine Medienspalte, die nicht mitwaechst, damit die
   Karte bei jeder Breite dieselbe Gestalt behaelt. */
.webseite .sammlungfokus {
  display: grid;
  gap: 1.1rem;
  padding: 1.3rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund-ruhig);
}
.webseite .sammlungbild {
  overflow: hidden;
  border-radius: calc(var(--radius) * 0.6);
  aspect-ratio: 16 / 10;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--marke) 22%, transparent),
    color-mix(in srgb, var(--marke) 6%, transparent)
  );
}
.webseite .sammlungbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.webseite .sammlungtext { display: grid; gap: 0.5rem; align-content: start; }
.webseite .sammlungmarken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.85em;
}
.webseite .sammlungmarke {
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--knopf);
  color: var(--knopf-schrift);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.webseite .sammlungkategorie { font-weight: 600; color: var(--text); }
.webseite .sammlungdatum { color: var(--text-leise); }
.webseite .sammlungtitel { margin: 0; font-size: 1.35em; line-height: 1.2; }
.webseite .sammlungkurztext { margin: 0; color: var(--text); }
.webseite .sammlungweiter {
  justify-self: start;
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Die Gruppen. Eine Zeile ist Zeitpunkt, Punkt, Titel - genau das und
   nicht mehr; was daraus eine Karte machen wuerde, macht aus einer
   Liste ein Raster, und ein Verzeichnis ist eine Liste. */
.webseite .sammlunggruppe { display: grid; gap: 0.7rem; }
.webseite .sammlunggruppentitel {
  margin: 0;
  font-size: 1.05em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.webseite .sammlungliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.webseite .sammlungzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.webseite .sammlungzeitpunkt {
  color: var(--text-leise);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}
.webseite .sammlungtrenner { color: var(--rand); }
.webseite .sammlungverweis { text-underline-offset: 3px; }
.webseite .sammlungrest { margin: 0; color: var(--text-leise); font-size: 0.9em; }

/* Die Detailseite. 21:9 fuer den Aufmacher, und der Kopf steht ueber dem
   normalen Inhalt der Seite - er ersetzt ihn nicht. */
.webseite .sammlungeintrag { display: grid; gap: 1.2rem; margin-bottom: 2rem; }
.webseite .sammlungeintragkopf { display: grid; gap: 0.6rem; }
.webseite .sammlungzurueck {
  justify-self: start;
  font-size: 0.9em;
  color: var(--text-leise);
  text-underline-offset: 3px;
}
.webseite .sammlungeintragtitel { margin: 0; line-height: 1.12; }
.webseite .sammlungeintraglead { margin: 0; color: var(--text-leise); font-size: 1.1em; }
.webseite .sammlungeintragbild {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 21 / 9;
  background: color-mix(in srgb, var(--marke) 10%, transparent);
}
.webseite .sammlungeintragbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@container webflaeche (min-width: 40rem) {
  .webseite .sammlungfokus {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
  }
  .webseite .sammlungbild { aspect-ratio: 4 / 3; }
  .webseite .sammlungzeile { flex-wrap: nowrap; }
  .webseite .sammlungzeitpunkt { flex: 0 0 9rem; }
}

/* Das Thema dieser Website. Erzeugt aus benannten Merkmalen -
   webtheme.py. Es gibt hier keine Zeile, die jemand frei
   geschrieben hat, und deshalb keine, die niemand prüfen kann. */
.webseite, .webkopf, .webfuss {
  --grund: #ffffff;
  --grund-ruhig: #f4f1ec;
  --text: #221f1b;
  --text-leise: #5f574d;
  --rand: #e2dbcf;
  --marke: #8b7757;
  --marke-tief: #6f5f45;
  --knopf: #6f5f45;
  --knopf-tief: #5c4d38;
  --knopf-schrift: #ffffff;
  --marke-flaeche: #f3eee4;
  --radius: 12px;
  --grundgrad: 1rem;
  --textschrift: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --displayschrift: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-farbmodus="hell"]) .webseite,
  :root:not([data-farbmodus="hell"]) .webkopf,
  :root:not([data-farbmodus="hell"]) .webfuss {
    --grund: #17150f;
    --grund-ruhig: #211d17;
    --text: #f0ebe2;
    --text-leise: #b9b0a2;
    --rand: #383126;
    --marke: #c8b48c;
    --marke-tief: #d9c9a8;
    --knopf: #c8b48c;
    --knopf-tief: #d9c9a8;
    --knopf-schrift: #17150f;
    --marke-flaeche: #262017;
  }
}
:root[data-farbmodus="dunkel"] .webseite,
:root[data-farbmodus="dunkel"] .webkopf,
:root[data-farbmodus="dunkel"] .webfuss {
  --grund: #17150f;
  --grund-ruhig: #211d17;
  --text: #f0ebe2;
  --text-leise: #b9b0a2;
  --rand: #383126;
  --marke: #c8b48c;
  --marke-tief: #d9c9a8;
  --knopf: #c8b48c;
  --knopf-tief: #d9c9a8;
  --knopf-schrift: #17150f;
  --marke-flaeche: #262017;
}