/* =========================================================================
   Cooking Holiday 2027 — Design-System (T-001)

   Eine einzige handgeschriebene Datei. Kein CDN, keine externen Schriften,
   kein JavaScript (SPEC Welle 1). Jede Farbe kommt über `var(--c-…)`;
   außerhalb von `:root` steht kein HEX-Wert.

   Tonalität: warme Toskana — Creme-Grund, Terracotta-Akzent, dunkles Braun
   für Text. Belegungsfarben: Heugelb für „reserviert", Olivgrün für
   „bestätigt". Feinschliff folgt, sobald Aarons Foto da ist.

   Dokumentierte Kontrastwerte (WCAG 2.1, relative Luminanz, gerundet):
     --c-ink       (#2f2620) auf --c-bg      (#faf4ea)  ≈ 13.3:1  AAA
     --c-ink       (#2f2620) auf --c-flaeche (#fffaf3)  ≈ 13.8:1  AAA
     --c-ink-weich (#6b5b4e) auf --c-bg      (#faf4ea)  ≈  6.0:1  AA
     --c-akzent    (#b04a2b) auf --c-bg      (#faf4ea)  ≈  5.0:1  AA
     --c-akzent-tief(#8c381f)auf --c-bg      (#faf4ea)  ≈  7.1:1  AAA
     weiß          (#ffffff) auf --c-akzent  (#b04a2b)  ≈  5.5:1  AA
   Die AA-Schwelle für Fließtext ist 4.5:1. Vor jedem Palettenwechsel
   nachrechnen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Farben */
  --c-bg: #faf4ea;            /* Seitengrund, warmes Creme                  */
  --c-flaeche: #fffaf3;       /* abgesetzte Flächen (Karten, Tabelle)       */
  --c-ink: #2f2620;           /* Haupttext, dunkles Braun                   */
  --c-ink-weich: #6b5b4e;     /* Sekundärtext, Hinweise                     */
  --c-akzent: #b04a2b;        /* Terracotta: Links, Knöpfe                  */
  --c-akzent-tief: #8c381f;   /* Hover/Active, Fokusring                    */
  --c-linie: #e0d3c0;         /* Rahmen und Trennlinien                     */
  --c-linie-kraeftig: #c9b394;/* Tabellenrahmen                             */

  /* Belegungszustände */
  --c-frei: #fdfaf4;          /* freie Nacht                                */
  --c-vorgemerkt: #f6e2b8;    /* reserviert (frueher „vorgemerkt"), Heugelb */
  --c-vorgemerkt-linie: #d5ab5c;
  --c-bestaetigt: #d3e0c4;    /* bestätigt, Olivgrün                        */
  --c-bestaetigt-linie: #8ea875;
  --c-voll-strich: #b4c7a2;   /* Schraffur einer vollen Nacht (T-018)       */
  --c-voll: #e7e2dc;          /* volle Nacht im Kalender, warmes Grau (T-070);
                                 --c-ink-weich darauf ≈ 4.9:1, AA           */
  --c-wahl: #f2d2c4;          /* Zweiklick-Auswahl im Raster (ADR 006);
                                 --c-ink darauf ≈ 10.4:1, AAA               */
  /* Meldungen */
  --c-hinweis-bg: #efe6d5;
  --c-fehler-bg: #f7dcd4;
  --c-fehler-linie: #b04a2b;
  --c-platzhalter-bg: #efe8dc;

  /* Schriften — nur System-Stacks, nichts wird nachgeladen */
  --schrift-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, serif;

  /* Fluide Schriftgrößen */
  --fs-h1: clamp(1.9rem, 1.4rem + 2.2vw, 2.7rem);
  --fs-h2: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
  --fs-h3: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --fs-text: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --fs-klein: 0.875rem;
  --fs-winzig: 0.75rem;

  /* Zeilenhöhen */
  --zh-eng: 1.2;
  --zh-normal: 1.6;

  /* Abstände */
  --ab-2xs: 0.25rem;
  --ab-xs: 0.5rem;
  --ab-s: 0.75rem;
  --ab-m: 1.25rem;
  --ab-l: 2rem;
  --ab-xl: 3rem;

  /* Formen */
  --radius-s: 3px;
  --radius-m: 6px;
  --schatten: 0 1px 2px rgba(47, 38, 32, 0.06), 0 2px 8px rgba(47, 38, 32, 0.05);

  /* Layout (T-033, Julius 02.10.2026): kein zentrierter Inhalt mehr — ein
     fester schmaler Rand links, ein knapper Rand rechts, bis zu dem die
     Bildspalte reicht. */
  --rand-l: 2.5rem;          /* 40 px: Inhalt zur Seitenleiste bzw. zum Fensterrand */
  --rand-r: 1.5rem;          /* 24 px: Inhalt zum rechten Fensterrand            */
  --leiste: 12.75rem;        /* Breite der Seitenleiste (T-035, Herleitung in 3.) */
  --karte-polster: 1.25rem;  /* Seitenpolster einer Leistenkarte                 */
  --breite: 2400px;          /* Deckel des Inhaltsbereichs                       */
  --breite-schmal: 35.5rem;  /* Inhalt der schmalen Seiten (Formulare, Prozesse) */
  --text-spalte: 36rem;      /* Textspalte der geteilten Kopfsektion             */
  --lesebreite: 60ch;
}

@media (max-width: 48rem) {
  :root {
    --rand-l: 1rem;
    --rand-r: 1rem;
  }
}

/* -------------------------------------------------------------------------
   2. Grundlagen
   ------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--schrift-text);
  font-size: var(--fs-text);
  line-height: var(--zh-normal);
}

h1,
h2,
h3 {
  font-family: var(--schrift-titel);
  line-height: var(--zh-eng);
  margin: 0 0 var(--ab-s);
}

p {
  margin: 0 0 var(--ab-m);
}

a {
  color: var(--c-akzent-tief);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--c-akzent);
}

:focus-visible {
  outline: 3px solid var(--c-akzent-tief);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* Der Inhaltsbereich beginnt links mit festem Abstand und endet knapp vor
   dem rechten Fensterrand (T-033) — er wird nicht mehr zentriert. Die
   schmale Variante hält Formulare und Prozessseiten in Lesebreite, ebenfalls
   links. */

.behaelter {
  width: 100%;
  max-width: var(--breite);
  padding-inline: var(--rand-l) var(--rand-r);
}

.behaelter--schmal {
  max-width: calc(var(--breite-schmal) + var(--rand-l) + var(--rand-r));
}

.abschnitt {
  padding-block: var(--ab-l) var(--ab-xl);
}

.sprung-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-flaeche);
  color: var(--c-ink);
  padding: var(--ab-xs) var(--ab-m);
  z-index: 10;
}

.sprung-link:focus {
  left: var(--ab-xs);
  top: var(--ab-xs);
}

/* -------------------------------------------------------------------------
   3. Seitenrahmen: Titelleiste, Seitenleiste, Fuß (T-033, Julius 02.10.2026)

   Oben die Titelleiste — Marke linksbündig, Sprachwahl rechts —, die mit der
   Seite wegscrollt. Darunter links die Seitenleiste mit sechs Karten, die
   auf breiten Schirmen beim Scrollen stehen bleibt, und rechts der Inhalt.
   Unter 48 rem wird die Leiste zur umbrechenden Kartenzeile unter der
   Titelleiste: dasselbe Markup, nur CSS, kein JavaScript. Prozessseiten,
   Passwort- und Fehlerseiten tragen nur die Titelleiste.

   Geschrieben vom Handy aus; der Desktop-Rahmen folgt ab 48 rem.
   ------------------------------------------------------------------------- */

.titelleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ab-2xs) var(--ab-m);
  padding: var(--ab-xs) var(--rand-r) var(--ab-xs) var(--rand-l);
  border-bottom: 1px solid var(--c-linie);
  background-color: var(--c-flaeche);
}

.kopf__marke {
  font-family: var(--schrift-titel);
  font-size: var(--fs-h3);
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

.kopf__marke:hover {
  color: var(--c-akzent-tief);
}

.titelleiste .sprachwahl {
  margin-left: auto;
}

/* Der Rahmen füllt die Fensterhöhe (einen Fußstreifen gibt es seit T-066
   nicht mehr); ohne Leiste ist er ein gewöhnlicher Block. */

.rahmen {
  flex: 1 0 auto;
}

/* Die Seitenleiste — auf dem Handy eine Kartenzeile. Das Polster links ist
   so bemessen, dass der Text der ersten Karte mit dem Inhalt fluchtet. */

.seitenleiste {
  padding-inline: calc(var(--rand-l) - var(--ab-xs)) var(--rand-r);
  border-bottom: 1px solid var(--c-linie);
  background-color: var(--c-flaeche);
}

.seitenleiste__karten {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ab-2xs);
}

.tab {
  display: block;
  padding: 0.55rem var(--ab-xs) 0.45rem;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  color: var(--c-ink-weich);
  font-size: var(--fs-klein);
  text-decoration: none;
  white-space: nowrap;
}

.tab:hover {
  color: var(--c-akzent-tief);
  background-color: var(--c-bg);
}

.tab.ist-aktiv {
  color: var(--c-ink);
  font-weight: 700;
  background-color: var(--c-bg);
  border-bottom-color: var(--c-akzent);
}

/* Ab 48 rem: Leiste links, Inhalt rechts. Die Leiste reicht als Spalte über
   die ganze Höhe des Rahmens; stehen bleiben nur ihre Karten
   (`position: sticky`). Eine fensterhohe Leiste hätte kurze Seiten künstlich
   verlängert. Die Marke in
   der Titelleiste fluchtet mit dem Text der Karten. */

@media (min-width: 48rem) {
  .titelleiste {
    padding-left: calc(var(--karte-polster) + 3px);
  }

  .rahmen--mit-leiste {
    display: grid;
    grid-template-columns: var(--leiste) minmax(0, 1fr);
  }

  .seitenleiste {
    padding-inline: 0;
    border-bottom: 0;
    border-right: 1px solid var(--c-linie);
  }

  .seitenleiste__karten {
    position: sticky;
    top: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding-block: var(--ab-m);
  }

  /* Die Leiste ist so schmal, wie die längste Karte es erlaubt (T-035):
     --leiste = 1,25 rem Polster + 3 px Kante + 10,5 rem Text + 0,75 rem
     rechts + 1 px Linie. Die fette, aktive Karte „Sleeping reservations"
     maß bei der festen 1-rem-Schrift in Segoe UI 161 px, in Arial 166 px;
     10,5 rem sind 168 px. Seit T-066 heißt sie „Reservations" und ist
     kürzer; die Spalte blieb. Die Karten brechen nie um — eine noch breitere
     Systemschrift läuft ins rechte Polster, statt eine zweite Zeile zu
     öffnen. Die Spalte hat eine feste Breite und springt beim
     Seitenwechsel nicht. Wer eine Karte umbenennt, misst neu. */
  .tab {
    padding: 0.65rem var(--ab-s) 0.65rem var(--karte-polster);
    border-bottom: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    font-size: 1rem;
  }

  .tab.ist-aktiv {
    border-left-color: var(--c-akzent);
  }
}

.sprachwahl {
  display: flex;
  align-items: baseline;
  gap: var(--ab-2xs);
  font-size: var(--fs-klein);
  letter-spacing: 0.04em;
}

.sprachwahl__link {
  color: var(--c-ink-weich);
  text-decoration: none;
  padding: var(--ab-2xs) var(--ab-xs);
  border-radius: var(--radius-s);
}

.sprachwahl__link:hover {
  color: var(--c-akzent-tief);
  background-color: var(--c-bg);
}

.sprachwahl__link.ist-aktiv {
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: underline;
}

.sprachwahl__trenner {
  color: var(--c-linie-kraeftig);
}

/* -------------------------------------------------------------------------
   4. Textbausteine
   ------------------------------------------------------------------------- */

.titel {
  font-size: var(--fs-h2);
}

.titel--gross {
  font-size: var(--fs-h1);
}

.untertitel {
  margin: 0 0 var(--ab-l);
  color: var(--c-ink-weich);
  font-size: var(--fs-h3);
}

.untertitel-abschnitt {
  font-size: var(--fs-h3);
  margin-top: var(--ab-l);
}

.fliesstext {
  max-width: var(--lesebreite);
}

.hinweistext {
  max-width: var(--lesebreite);
  color: var(--c-ink-weich);
  font-size: var(--fs-klein);
}

.link-extern::after {
  content: " ↗";
  font-size: var(--fs-klein);
}

/* -------------------------------------------------------------------------
   5. Meldungen
   ------------------------------------------------------------------------- */

.meldung {
  max-width: var(--lesebreite);
  padding: var(--ab-s) var(--ab-m);
  border-radius: var(--radius-m);
  border-left: 4px solid var(--c-linie-kraeftig);
  background-color: var(--c-hinweis-bg);
}

.meldung--fehler {
  background-color: var(--c-fehler-bg);
  border-left-color: var(--c-fehler-linie);
  font-weight: 600;
}

.meldung--platzhalter {
  background-color: var(--c-platzhalter-bg);
  border-left-style: dashed;
  border-left-color: var(--c-ink-weich);
  color: var(--c-ink-weich);
  font-size: var(--fs-klein);
}

/* -------------------------------------------------------------------------
   6. Formulare und Knöpfe
   ------------------------------------------------------------------------- */

.formular {
  margin-block: var(--ab-l);
  max-width: var(--lesebreite);
}

.feld {
  margin-bottom: var(--ab-m);
}

.feld__label {
  display: block;
  margin-bottom: var(--ab-2xs);
  font-weight: 600;
}

.feld__eingabe {
  width: 100%;
  padding: var(--ab-xs) var(--ab-s);
  font: inherit;
  color: var(--c-ink);
  background-color: var(--c-flaeche);
  border: 1px solid var(--c-linie-kraeftig);
  border-radius: var(--radius-s);
}

.feld--haken {
  display: flex;
  align-items: flex-start;
  gap: var(--ab-xs);
}

.feld--haken .feld__label {
  margin-bottom: 0;
  font-weight: 400;
}

.feld__haken {
  margin-top: 0.3em;
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--c-akzent);
  flex: none;
}

/* Passwortfeld mit Auge (T-063, ADR 012). Der Server liefert den Knopf mit
   hidden; erst passwort.js zeigt ihn und setzt am Formular
   .formular--mit-auge. Ohne Skript bleibt das Feld, wie es war. Der Knopf
   sitzt rechts im Feld, 2,75 rem breit und mindestens so hoch: eine
   daumentaugliche Trefferfläche von 44 px. */

.passwortfeld {
  position: relative;
}

.formular--mit-auge .passwortfeld__eingabe {
  min-height: 2.75rem;
  padding-right: 3rem;
}

.passwortfeld__auge {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--c-ink-weich);
  cursor: pointer;
}

.passwortfeld__auge:hover,
.passwortfeld__auge:focus-visible {
  color: var(--c-akzent-tief);
}

/* Der Fokusring bleibt im Rahmen des Felds. */
.passwortfeld__auge:focus-visible {
  outline-offset: -4px;
}

.passwortfeld__symbol {
  width: 1.375rem;
  height: 1.375rem;
}

/* Verborgen ist das Passwort mit offenem Auge zu zeigen, sichtbar mit
   durchgestrichenem. */
.passwortfeld__auge[hidden],
.passwortfeld__auge[aria-pressed="false"] .passwortfeld__symbol--zu,
.passwortfeld__auge[aria-pressed="true"] .passwortfeld__symbol--auge {
  display: none;
}

/* Edge zeigt in Passwortfeldern ein eigenes Auge. Neben unserem wäre es
   doppelt; ohne Skript behält Edge seins. Eigene Regel: Andere Browser
   verwerfen eine Selektorliste mit diesem Pseudo-Element ganz. */
.formular--mit-auge .passwortfeld__eingabe::-ms-reveal {
  display: none;
}

.knopf {
  display: inline-block;
  padding: var(--ab-xs) var(--ab-m);
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--c-akzent);
  border: 1px solid var(--c-akzent-tief);
  border-radius: var(--radius-m);
  text-decoration: none;
  cursor: pointer;
}

.knopf:hover {
  background-color: var(--c-akzent-tief);
  color: #ffffff;
}

.knopf--gross {
  padding: var(--ab-s) var(--ab-l);
  font-size: var(--fs-h3);
}

.aufruf {
  margin-block: var(--ab-l) var(--ab-xs);
}

/* -------------------------------------------------------------------------
   7. Inhaltsseiten (T-026, Ränder seit T-033): geteilte Kopfsektion,
      Startseite, Villa-Seite mit Galerie, Diashow, Programm

   Die geteilte Kopfsektion ist der gemeinsame Vertrag aus
   SPEC_Inhaltsseiten, Abschnitt 4 (Ränder: Abschnitt 9) — auch
   `/reservierung` benutzt ihn; `/venue` seit T-035 nicht mehr
   (Abschnitt 10), die Startseite seit T-041 nicht mehr (7.2), Programm
   und Regeln seit T-044 nicht mehr (7.6, Abschnitt 8). Unter ihr
   folgt nichts Sichtbares mehr: Kalender und Box der Reservierung stehen
   seit T-041 in der Textspalte, dahinter nur die unsichtbare Diashow.
   ------------------------------------------------------------------------- */

/* 7.1 Geteilte Kopfsektion (seit T-033 asymmetrisch): Textspalte in
   Lesebreite, Bildspalte bis zum rechten Rand des Inhalts. Einspaltig steht
   das Bild zuerst; die DOM-Reihenfolge bleibt Text → Bild (Lesereihenfolge),
   gedreht wird nur per `order`. Das Bild wird nie beschnitten — außer im
   Bildfluss der Reservierung (T-053), dessen Zellen gleich hoch sind.
   Seit T-041 ist jedes Bild ein Link in die Diashow (7.4). */

.geteilt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ab-m) var(--ab-xl);
  align-items: start;
}

.geteilt__text {
  max-width: var(--text-spalte);
}

.geteilt__text > :last-child {
  margin-bottom: 0;
}

.geteilt__bild {
  order: -1;
  margin: 0;
}

/* `width: auto` nimmt die echte Breite der Datei, `max-width: 100%` begrenzt
   auf die Spalte — über seine natürliche Größe gezogen wird das Bild nie.
   Die width/height-Attribute halten das Seitenverhältnis, solange es lädt. */

.geteilt__bild img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  box-shadow: var(--schatten);
}

.geteilt__bild .lightbox-glied {
  display: block;
  border-radius: var(--radius-m);
}

/* Die weiteren Bilder des Bildflusses (Reservierung): Einspaltig steht nur
   das erste — am Handy sparsam mit Bildern (Julius, 02.10.2026); geladen
   werden die übrigen dort auch nicht (`loading="lazy"`). */

.geteilt__weitere {
  display: none;
}

/* Zweispaltig erst ab 64 rem: Neben der Seitenleiste bliebe darunter für
   zwei Spalten zu wenig Platz. Die Bildspalte bekommt mindestens 40 % des
   Inhalts — die Textspalte nimmt ihre Lesebreite zuerst und ließe dem Bild
   auf mittleren Breiten sonst kaum etwas übrig. */

@media (min-width: 64rem) {
  .geteilt {
    grid-template-columns: minmax(0, var(--text-spalte)) minmax(40%, 1fr);
  }

  /* Das Bild füllt die Spaltenbreite schon vor dem Laden (Höhe aus
     width/height, kein Springen). Gestreckt wird dabei nie: Die Spalte wird
     höchstens 1712 px breit (gemessen bei 3840 px; der Inhalt endet bei
     2400 px), jedes Poolbild ist mindestens so breit (`view::bildpool`,
     Test). */
  .geteilt__bild {
    order: 0;
  }

  .geteilt__bild .lightbox-glied img {
    width: 100%;
  }

  /* Bildfluss der Reservierung (T-053, ADR 011; Julius 02.10.2026: „Ich
     würde gerne unterhalb des Textes in der linken Spalte auch Bilder
     reinfüllen, in der gleichen Rasterung/Höhe, sodass dann unterhalb die
     Bilder zweispaltig laufen."): zwei gleich breite Spalten, alle Zellen
     gleich hoch, gleicher Abstand waagrecht und senkrecht — so sind die
     Zeilen links und rechts gleich hoch.
     Der Text belegt links die Zeilen `1 / span var(--textzeilen)`. Ohne
     Skript setzt der Server so viele, wie es Bilder gibt, und die Zellen
     sind 3:2 — dann stehen alle Bilder rechts. `bildfluss.js` setzt
     Zeilenzahl und Zellhöhe (`--zellenhoehe`) so, dass der Text genau in
     seinen Zeilen aufgeht; das Zellformat bleibt dabei zwischen 1,25 und
     1,9, möglichst nah an 3:2. Das Polster unten zählt zur Texthöhe und
     hält das erste Bild darunter auf Abstand, das Polster rechts die Bilder
     daneben. `align-self: start` lässt den Text so hoch, wie er ist:
     Gedehnt auf seine Zeilen könnte das Skript sie nie mehr verkleinern.
     figure und Behälter lösen sich auf, jedes Bild ist eine Zelle; `dense`
     füllt erst die Zellen rechts neben dem Text, darunter laufen die Bilder
     zeilenweise links und rechts. Was nicht ins Zellformat passt, verliert
     seitlich oder oben und unten etwas (`object-fit: cover`), die Diashow
     zeigt es ganz. Gestreckt wird nie: Eine Zelle ist höchstens etwa
     1 160 × 930 px groß, jedes Poolbild größer. */
  .geteilt--bildfluss {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: var(--ab-s);
  }

  .geteilt--bildfluss .geteilt__text {
    grid-column: 1;
    grid-row: 1 / span var(--textzeilen, 1);
    align-self: start;
    padding-right: var(--ab-l);
    padding-bottom: var(--ab-m);
  }

  .geteilt--bildfluss .geteilt__bild,
  .geteilt--bildfluss .geteilt__weitere {
    display: contents;
  }

  .geteilt--bildfluss .lightbox-glied img {
    width: 100%;
    height: var(--zellenhoehe, auto);
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  /* Bleibt unter dem Text eine ungerade Zahl Bilder, entfällt im Raster das
     letzte (heute Aarons verwackeltes Schlafzimmer), damit unten keine Zelle
     leer bleibt (Orchestrator, Review T-053; `bildfluss.js` setzt
     `data-rest`). Die Diashow zeigt es weiter, wie die verborgenen Bilder am
     Handy. */
  .geteilt--bildfluss[data-rest="ungerade"] .geteilt__weitere > .lightbox-glied:last-child {
    display: none;
  }
}

/* 7.2 Startseite: seit T-039 ohne Knöpfe (Julius, 02.10.2026) — die
   Seitenleiste und die Links in Aarons Text führen weiter. Seit T-041 ohne
   geteilte Kopfsektion: Aarons Text in Lesebreite, darunter das Startbild.
   Seit T-052 steht der Zeitraum als graue Zeile unter der Begrüßung
   (`.untertitel`, Abschnitt 4), und das Bild hat wieder die Größe der
   ersten Fassung (Julius: „Bei Start ist mir das Bild zu groß. Lieber auf
   die Größe wie bei meiner ersten Version."): höchstens 61,5 rem breit — der
   64-rem-Behälter von damals ohne seinen Innenabstand — und höchstens
   27,5 rem (440 px) hoch; was darüber hinausgeht, schneidet `object-fit`
   wie damals oben und unten gleichmäßig ab. Gestreckt wird nie (das Bild
   ist 2134 px breit). Am Handy dieselbe Reihenfolge, das Bild bleibt dort
   ganz. */

.start {
  max-width: var(--text-spalte);
}

.start > :last-child {
  margin-bottom: 0;
}

.startbild {
  max-width: 61.5rem;
  margin: var(--ab-l) 0 0;
}

.startbild .lightbox-glied {
  display: block;
  border-radius: var(--radius-m);
}

.startbild img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 27.5rem;
  object-fit: cover;
  border-radius: var(--radius-m);
  box-shadow: var(--schatten);
}

/* 7.3 Villa-Seite (seit T-035 ohne Seitenbild, seit T-040 mit der
   Eckdaten-Tabelle aus 7.5): oben die Eckdaten, direkt danach die Kacheln —
   über die volle Inhaltsbreite, auf dem Handy eine Spalte; seit T-050 ohne
   Überschrift und Quellenzeile. Seit T-041 nur die Bilder, die keine Seite
   zeigt; ein Klick öffnet die Diashow über den ganzen Pool (7.4).

   Seit T-057 kompakter (Julius, 02.10.2026: „… kompakter hinbekommen, damit
   man die Bilder unten schneller sieht."): straffere Abstände der Eckdaten,
   ab 78 rem die Übersichtskarte als dritte Spalte daneben, darunter unter
   den Eckdaten, am Handy gar nicht. */

.villa-angaben {
  margin-bottom: var(--ab-l);
}

/* Straffere Eckdaten, nur hier: engere Zeilen, kein eigener Abstand nach
   unten — den hält die Sektion. Der Wortlaut bleibt. */

.villa-angaben .eckdaten {
  margin-bottom: 0;
  line-height: 1.45;
}

/* Die Übersichtskarte (T-057): Nord- und Mittelitalien als Inline-SVG aus
   Natural-Earth-Daten (`templates/italienkarte.html`, erzeugt von
   `scripts/karte.py`), die Villa als Punkt in --c-akzent mit weißem Ring,
   Mailand, Venedig, Florenz und Rom beschriftet. Italien als Fläche in
   Olivgrün, die Nachbarn heller in Beige, das Meer zurückhaltend im
   Seitengrund, ein feiner Rahmen in --c-linie. Die Namen stehen
   in der Schrift der Seite, mit hellem Rand für die Lesbarkeit; ihre Größe
   zählt in Einheiten der Karte und wächst mit ihr — `--karte-schrift`
   gleicht das je Breite aus, sodass sie um 12 px groß erscheinen. Ein Klick
   öffnet Google Maps wie `#maps-link`. Am Handy steht sie seit T-064 unter
   den Eckdaten, höchstens 20 rem breit und damit fast 1:1 (Julius,
   03.10.2026: „Unsere Mini-Karte von Nord-Italien fehlt in der
   Mobile-Variante."); das SVG steht im Markup und lädt nichts nach. */

.villa-karte {
  --karte-schrift: 12.5px;
  max-width: 20rem;
  margin: var(--ab-m) 0 0;
}

.villa-karte__link {
  display: block;
  border-radius: var(--radius-m);
}

/* „In Google Maps öffnen" unter der Karte (T-068, Julius 03.10.2026: so wird
   die linke Textspalte kürzer). */

.villa-karte__maps {
  margin: var(--ab-xs) 0 0;
}

.italienkarte {
  display: block;
  width: 100%;
  height: auto;
}

.italienkarte__meer {
  fill: var(--c-bg);
}

.italienkarte__nachbar {
  fill: var(--c-hinweis-bg);
  stroke: var(--c-linie-kraeftig);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.italienkarte__italien {
  fill: var(--c-bestaetigt);
  stroke: var(--c-bestaetigt-linie);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.italienkarte__rand {
  fill: none;
  stroke: var(--c-linie);
  stroke-width: 1;
}

.italienkarte__ort {
  fill: var(--c-ink);
}

.italienkarte__name {
  fill: var(--c-ink);
  font-size: var(--karte-schrift);
  paint-order: stroke;
  stroke: var(--c-flaeche);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.italienkarte__villa {
  fill: var(--c-akzent);
  stroke: #fff;
  stroke-width: 2;
}

/* Zweispaltig (48 bis 78 rem): die Karte unter den Eckdaten, 13 rem breit,
   damit die Kacheln auch hier höher rücken — dort erscheint sie mit 0,65
   ihrer Einheiten, die Schrift ist deshalb 19,2 statt 12,5 Einheiten groß
   (320 / 208 × 12,5). */

@media (min-width: 48rem) {
  .villa-karte {
    --karte-schrift: 19.2px;
    width: 13rem;
    margin-top: var(--ab-m);
  }
}

/* Dreispaltig ab 78 rem: Lage, Haus und Karte in drei gleichen Spalten von
   höchstens 20 rem; die Eckdaten legen ihre zwei Spalten per `subgrid` auf
   die ersten beiden (ohne `subgrid` gilt die erste Zeile davor). Die Karte
   trägt zur Zeilenhöhe nichts bei (`contain: size`) und füllt die Zeile —
   so ist sie nie höher als die höhere Textspalte; `preserveAspectRatio`
   hält sie oben links. Bei 20 rem erscheint sie fast 1:1. */

@media (min-width: 78rem) {
  .villa-angaben {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 20rem));
    column-gap: var(--ab-l);
    align-items: start;
  }

  .villa-angaben > .titel {
    grid-column: 1 / -1;
  }

  .villa-angaben > .eckdaten--spalten {
    grid-column: 1 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-columns: subgrid;
    column-gap: var(--ab-l);
  }

  .villa-karte {
    --karte-schrift: 12.5px;
    display: flex;
    flex-direction: column;
    grid-column: 3;
    align-self: stretch;
    width: auto;
    margin-top: 0;
    contain: size;
  }

  /* Die Karte nimmt, was die Zeile neben dem Maps-Link übrig lässt (T-068);
     das SVG passt sich mit `meet` ein. */
  .villa-karte__link {
    flex: 1 1 auto;
    min-height: 0;
  }

  .villa-karte .italienkarte {
    height: 100%;
  }
}

/* `auto-fit` seit T-041: Die Galerie zeigt nur noch die Bilder, die keine
   Seite zeigt (heute vier); die Kacheln füllen ihre Zeile, statt auf breiten
   Schirmen leere Spalten rechts stehen zu lassen. */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ab-s);
  margin: 0 0 var(--ab-s);
}

.galerie__glied {
  display: block;
  border-radius: var(--radius-s);
}

.galerie__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-s);
}

/* 7.4 Diashow (ADR 005; seit T-041 auf jeder Seite mit Bildern,
   `templates/diashow.html`) */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 20, 12, 0.88);
}

.lightbox[hidden] {
  display: none;
}

/* Ohne gesetzte Breite zeigt das Bild höchstens seine echte Größe (seit
   T-033 bis 2400 px); kleiner machen es nur Fensterbreite und -höhe. */

.lightbox__bild {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius-m);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.lightbox__schliessen,
.lightbox__pfeil {
  position: fixed;
  border: 0;
  background: rgba(250, 244, 234, 0.14);
  color: #faf4ea;
  font-size: 2rem;
  line-height: 1;
  padding: 0.35em 0.55em;
  border-radius: var(--radius-m);
  cursor: pointer;
}

.lightbox__schliessen:hover,
.lightbox__pfeil:hover {
  background: rgba(250, 244, 234, 0.3);
}

.lightbox__schliessen {
  top: 1rem;
  right: 1rem;
}

.lightbox__pfeil--links {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__pfeil--rechts {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

body.lightbox-offen {
  overflow: hidden;
}

/* 7.5 Eckdaten — seit T-026 nicht mehr auf der Startseite, aber auf der
   Buchungsseite, im Admin und seit T-040 auf der Villa-Seite. Unter 30 rem
   steht das Label über dem Wert. */

.eckdaten {
  margin: 0 0 var(--ab-l);
  padding: 0;
  max-width: var(--lesebreite);
}

.eckdaten__zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-block: var(--ab-xs);
  border-bottom: 1px solid var(--c-linie);
}

@media (min-width: 30rem) {
  .eckdaten__zeile {
    grid-template-columns: 9rem 1fr;
    gap: var(--ab-m);
  }
}

.eckdaten__label {
  font-weight: 600;
}

.eckdaten__wert {
  margin: 0;
}

/* Die Zimmer einer verteilten Partei: je Person eine Zeile (T-062). */

.eckdaten__wert--zeilen {
  white-space: pre-line;
}

/* Mehrere kurze Angaben in einem Wert, eine je Zeile (Aarons Entfernungen);
   bricht eine um, rückt die Fortsetzung ein. */

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

.eckdaten__liste li {
  padding-left: 1em;
  text-indent: -1em;
}

/* Aarons Entfernungen (T-046): Ort links, Kilometer rechtsbündig mit
   Tabellenziffern, Aarons Zusatz klein und zurückgenommen in derselben
   Zeile. Die Liste ist so breit wie ihre längste Zeile. */

.entfernungen {
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.entfernungen li {
  display: flex;
  justify-content: space-between;
  gap: var(--ab-m);
}

.entfernungen__zusatz {
  color: var(--c-ink-weich);
  font-size: var(--fs-klein);
}

.entfernungen__km {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* Mehrspaltige Eckdaten der Villa-Seite (T-043, ruhiger seit T-046; Julius
   02.10.2026: „Diese bitte in zwei Spalten, damit die Bilder weiter
   hochkommen. Oder gar drei Spalten (eine für die Nachbarorte)." — „Das
   sieht irgendwie unruhig aus." — „Vielleicht bekommen wir für den Text
   auf der Villa-Seite ein 2×2-Raster hin. Dann wäre es noch ruhiger.",
   T-047). Ab 48 rem ein 2×2-Raster, seit T-048 spaltenweise: links die
   Lage (Adresse über Entfernungen), rechts das Haus (Ausstattung über
   Zimmer). Jede Zeile trägt ihren Platz als Modifikator; die
   DOM-Reihenfolge ist Adresse, Entfernungen, Ausstattung, Zimmer — so liest
   es sich auch einspaltig. In den Spalten steht das Label über dem Wert,
   ohne Trennlinien, alle Spalten oben bündig. Unter 48 rem einspaltig wie
   alle Eckdaten. */

@media (min-width: 48rem) {
  .eckdaten--spalten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 28rem));
    grid-template-areas:
      "adresse ausstattung"
      "entfernungen zimmer";
    gap: var(--ab-s) var(--ab-xl);
    max-width: none;
  }

  .eckdaten--spalten .eckdaten__zeile {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0;
    padding-block: 0;
    border-bottom: 0;
  }

  .eckdaten__zeile--adresse {
    grid-area: adresse;
  }

  .eckdaten__zeile--zimmer {
    grid-area: zimmer;
  }

  .eckdaten__zeile--ausstattung {
    grid-area: ausstattung;
  }

  .eckdaten__zeile--entfernungen {
    grid-area: entfernungen;
  }
}

/* 7.6 Programm (T-044, Julius 02.10.2026: „… die Bilder auf zwei Spalten
   sein, 2×2, und darüber der Text auf der kompletten Breite."): Aarons
   Absatz über die volle Inhaltsbreite, darunter zwei Zeilen zu je zwei
   Bildern — oben der Tag, unten der Abend. Jede Zeile füllt die Breite und
   ist gleich hoch: Jedes Glied wächst im Verhältnis seiner Breite zur Höhe
   (`--breite`/`--hoehe` aus dem Bildpool im Markup), so passen auch Julius'
   höheres Wohnzimmer und die Küche nebeneinander, ohne dass etwas
   beschnitten wird. Gestreckt wird nie: Eine Zelle ist höchstens etwa die
   Hälfte des Inhalts (≤ 1 200 px), jedes Bild ist breiter. Am Handy
   dasselbe Raster, nur kleiner — keine lange Bildstrecke. */

.programm > :last-child {
  margin-bottom: 0;
}

.bildraster {
  display: grid;
  gap: var(--ab-s);
  margin-top: var(--ab-l);
}

.bildraster__zeile {
  display: flex;
  gap: var(--ab-s);
}

.bildraster .lightbox-glied {
  display: block;
  flex-grow: calc(var(--breite) / var(--hoehe));
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  border-radius: var(--radius-m);
}

.bildraster img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  box-shadow: var(--schatten);
}

/* -------------------------------------------------------------------------
   8. Commitments
   ------------------------------------------------------------------------- */

.commitments {
  margin: var(--ab-l) 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.commitments__punkt {
  padding: var(--ab-m);
  margin-bottom: var(--ab-m);
  background-color: var(--c-flaeche);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten);
}

.commitments__titel {
  font-size: var(--fs-h3);
  margin-bottom: var(--ab-2xs);
}

.commitments__text {
  margin: 0;
  max-width: var(--lesebreite);
}

/* Die Regeln-Leseseite (seit T-044 ohne Bilder, Julius 02.10.2026: „… die
   Commitments dafür in zwei Spalten."): oben ohne den großen Abstand der
   Zustimmungsseite; ab 48 rem die vier Zusagen als 2 × 2, je Zeile gleich
   hoch, jede Spalte höchstens so breit wie die Textspalte. Darunter
   untereinander. */

.commitments--zweispaltig {
  margin-top: var(--ab-m);
}

@media (min-width: 48rem) {
  .commitments--zweispaltig {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ab-m);
    max-width: calc(2 * var(--text-spalte) + var(--ab-m));
  }

  .commitments--zweispaltig .commitments__punkt {
    margin-bottom: 0;
  }
}

/* -------------------------------------------------------------------------
   9. Reservierung (T-027, ADR 010; Kalender und Box seit T-032, Box unter
      dem Kalender seit T-036): Belegung, Tagesauswahl, Steuerbereich, Box
      „Meine Buchung"

   Die Seite `/reservierung`: eine geteilte Kopfsektion (Abschnitt 7.1),
   seit T-041 mit dem ganzen Gebrauchsteil in der Textspalte — Aarons Text,
   die Überschrift „Betten belegt" und die Belegung als Kalender (je Nacht
   „belegt/20" und, wenn jemand wartet, „⟨n⟩ warten"; die eigenen Nächte in
   ihrer Statusfarbe), darunter der Steuerbereich oder, wenn das Gerät eine
   Buchung kennt, die Box „Meine Buchung"; rechts alle Bett- und Badbilder.
   Das Zimmerraster steht seit T-027 nur noch im Admin (Abschnitt 11).
   ------------------------------------------------------------------------- */

/* Aarons vier Punkte in der Kopfsektion */

.reservierung-punkte {
  margin: 0 0 var(--ab-m);
  padding-left: 1.4em;
}

.reservierung-punkte li {
  margin-bottom: var(--ab-xs);
}

/* Die Box „Meine Buchung" (T-032): seit T-036 unter dem Kalender, an der
   Stelle des Steuerbereichs, sobald das Gerät eine aktive Buchung kennt.
   Erst die Kennzahlen, darunter genau ein Knopf „Details" — ohne
   Erklärtext. Mehrere Buchungen (fremde Mail-Links auf demselben Gerät)
   stehen untereinander. */

.meine-buchung {
  /* Seit T-033 links in der Breite der Textspalte, nicht über den ganzen
     Inhalt. */
  max-width: var(--text-spalte);
  margin-block: var(--ab-m) 0;
  padding: var(--ab-s) var(--ab-m) var(--ab-m);
  background-color: var(--c-flaeche);
  border: 1px solid var(--c-linie-kraeftig);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten);
}

.meine-buchung__titel {
  margin: 0 0 var(--ab-s);
  font-size: var(--fs-h3);
}

.meine-buchung__eintrag + .meine-buchung__eintrag {
  margin-top: var(--ab-m);
  padding-top: var(--ab-m);
  border-top: 1px solid var(--c-linie);
}

.meine-buchung__kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--ab-s) var(--ab-m);
  margin: 0;
}

.meine-buchung__kennzahl dt {
  color: var(--c-ink-weich);
  font-size: var(--fs-winzig);
}

.meine-buchung__kennzahl dd {
  margin: 0;
  font-weight: 600;
  white-space: pre-line;
}

/* Mehrzeilig — die Zimmer je Person (T-062) — nimmt der Wert die ganze
   Zeile, statt in einer schmalen Spalte umzubrechen. */

.meine-buchung__kennzahl--breit {
  grid-column: 1 / -1;
}

.meine-buchung__aufruf {
  margin: var(--ab-m) 0 0;
}

/* Der Belegungskalender (T-032, Julius 02.10.2026): sieben gleich breite
   Spalten Mo–So, die Überschrift „Betten belegt" als gewöhnliches <h2>
   darüber (T-036). Erste Zeile: leer, Di 22.06. … So 27.06.; zweite: Mo 28.06. …
   Sa 03.07. (Abreisetag), leer. Dieselbe Darstellung auf allen Breiten —
   sieben schmale Spalten passen auch aufs Handy. raster.js rechnet über die
   Reihenfolge der Tageszellen, nicht über Spalten. */

.belegung-titel {
  margin: var(--ab-l) 0 var(--ab-s);
  font-size: var(--fs-h3);
}

.belegung-huelle {
  /* Seit T-033 links in der Breite der Textspalte (Julius' Vergleichsseite,
     Variante S): sieben Spalten brauchen nicht mehr. */
  max-width: var(--text-spalte);
  margin-block: 0 var(--ab-m);
  border: 1px solid var(--c-linie-kraeftig);
  border-radius: var(--radius-m);
  background-color: var(--c-flaeche);
  overflow-x: auto;
}

.belegung {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-klein);
}

.belegung th,
.belegung td {
  border: 1px solid var(--c-linie);
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.belegung th {
  padding-block: var(--ab-2xs);
  color: var(--c-ink-weich);
  font-size: var(--fs-winzig);
  font-weight: 600;
}

/* Vor der ersten Nacht und nach dem Abreisetag: kein Tag des Events. */

.belegung__leer {
  background-color: var(--c-bg);
}

.nacht {
  background-color: var(--c-frei);
}

/* Der Inhalt einer Zelle: ohne JavaScript ein Link auf das Formular mit
   genau dieser Nacht (ADR 006) — er füllt die ganze Zelle, damit die
   Trefferfläche auch auf dem Handy die sichtbare Fläche ist. */

.nacht__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-height: 3.6rem;
  padding: var(--ab-2xs) 1px;
  color: inherit;
  text-decoration: none;
}

a.nacht__link {
  cursor: pointer;
}

a.nacht__link:hover,
a.nacht__link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--c-akzent);
}

.nacht__datum {
  color: var(--c-ink-weich);
  font-size: var(--fs-winzig);
  white-space: nowrap;
}

/* Die Zahl einer Nacht: die freien Betten (T-066, Aarons „Available
   beds"); in der Abreisezelle das Wort „Abreise". */

.nacht__wert {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* „2 warten" darf in der schmalen Spalte umbrechen. */

.nacht__wartend {
  color: var(--c-akzent-tief);
  font-size: var(--fs-winzig);
  line-height: var(--zh-eng);
}

/* Voll heißt: kein Bett mehr frei. Wählbar bleibt die Nacht trotzdem — die
   Buchung käme auf die Warteliste (ADR 010). Seit T-070 neutral grau statt
   heugelb: Gelb heißt im Kalender „deine Buchung, noch offen" (Julius,
   03.10.2026); die eigene Buchung färbt auch eine volle Nacht. */

.nacht--voll {
  background-color: var(--c-voll);
}

.nacht--voll .nacht__wert {
  color: var(--c-ink-weich);
}

/* Der 03.07. ist nur noch Abreisetag — keine Nacht. */

.nacht--abreisetag {
  background-color: var(--c-flaeche);
}

/* Das Wort „Abreise" steht klein wie Datum und Wartende; sein weicher
   Trennstrich (texte::raster) lässt es in der schmalen Spalte umbrechen. */

.nacht--abreisetag .nacht__wert {
  color: var(--c-ink-weich);
  font-weight: 400;
  font-size: var(--fs-winzig);
  line-height: var(--zh-eng);
}

.nacht--abreisetag:focus-visible {
  outline: 2px solid var(--c-akzent);
  outline-offset: -2px;
}

/* Auswahl-Markierung; sie setzt raster.js. Die Auswahl dominiert: gefüllt
   wie ein durchgehender Balken, der Anreisetag kräftiger umrandet. */

.nacht--wahl,
.nacht--wahl-abreise {
  background-color: var(--c-wahl);
  box-shadow: inset 0 0 0 2px var(--c-akzent);
}

.nacht--wahl-start {
  box-shadow: inset 0 0 0 3px var(--c-akzent-tief);
}

/* Der eigene Zeitraum (T-036; Farben T-038, Julius 02.10.2026): eine reine
   Anzeige, keine Auswahl — deshalb nur eine dezente Hintergrundfarbe nach
   Status, kein Rahmen: bestätigt grün, reserviert und Warteliste orange.
   Je Zelle zählt die Buchung, welche die Nacht abdeckt (view::raster). Der
   Abreisetag ist nur zur linken Hälfte gefüllt, mit sauberer Kante wie der
   Auslauf im Admin; die rechte Hälfte zeigt die Nacht, wie sie ist. Die
   Zahl einer vollen Nacht bleibt terrakotta. Fremde Buchungen färbt nichts:
   Die Seite kennt sie nur als Zahl. */

.nacht.nacht--eigen-bestaetigt {
  background-color: var(--c-bestaetigt);
}

.nacht.nacht--eigen-offen {
  background-color: var(--c-vorgemerkt);
}

.nacht.nacht--eigen-abreise-bestaetigt {
  background-image: linear-gradient(
    to right,
    var(--c-bestaetigt) 0 calc(50% - 1px),
    var(--c-bestaetigt-linie) calc(50% - 1px) 50%,
    transparent 50%
  );
}

.nacht.nacht--eigen-abreise-offen {
  background-image: linear-gradient(
    to right,
    var(--c-vorgemerkt) 0 calc(50% - 1px),
    var(--c-vorgemerkt-linie) calc(50% - 1px) 50%,
    transparent 50%
  );
}

/* Meldungsfeld unter dem Kalender (T-008): Zusammenfassung der Auswahl und
   die Bewertung — freie Betten oder volle Nächte. */

.raster-meldung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-2xs) var(--ab-m);
  margin-block: var(--ab-m) 0;
}

.raster-meldung[hidden] {
  display: none;
}

/* Die Zusammenfassung steht mehrzeilig (Anreise, Abreise, Nächte); die
   Zeilen kommen als Zeilenumbruch aus dem Server-Text — das Skript setzt nur
   `textContent`. */

.raster-meldung__text {
  margin: 0;
  font-weight: 600;
  white-space: pre-line;
}

.raster-meldung__hinweis {
  margin: 0;
  color: var(--c-ink-weich);
  font-size: var(--fs-klein);
}

.raster-meldung__hinweis:empty {
  display: none;
}

.raster-meldung__aufheben {
  margin-left: auto;
}

.raster-meldung--warnung {
  background-color: var(--c-vorgemerkt);
  border-left-color: var(--c-vorgemerkt-linie);
}

.raster-meldung--warnung .raster-meldung__hinweis {
  color: var(--c-ink);
}

/* Die Anleitung unter dem Kalender, solange nichts gewählt ist (T-066; bis
   dahin gibt es keinen Knopf). Sie trägt die Akzentfarbe, damit sie als
   Aufforderung gelesen wird und nicht als Fehler. */

.hinweis-warnung {
  margin-block: var(--ab-2xs) 0;
  max-width: var(--lesebreite);
  color: var(--c-akzent-tief);
  font-size: var(--fs-klein);
}

.hinweis-warnung[hidden] {
  display: none;
}

/* Meldung und Knopf bilden zusammen den Steuerbereich (T-008). Ohne
   JavaScript steht der Knopf unter der (versteckten) Meldung, mit
   JavaScript in ihr — vor „Auswahl aufheben" (T-066). */

.raster-meldung + .aufruf {
  margin-top: var(--ab-s);
}

.raster-meldung .aufruf {
  margin: 0;
}

/* -------------------------------------------------------------------------
   10. Buchungsflow: Formular, Partei, Buchungsseite, eigene Buchungen
   ------------------------------------------------------------------------- */

/* Zwei Felder nebeneinander, sobald Platz ist (Anreise/Abreise, Name/E-Mail) */
.feld-paar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--ab-m);
}

@media (min-width: 30rem) {
  .feld-paar {
    grid-template-columns: 1fr 1fr;
  }
}

.partei {
  margin: var(--ab-m) 0;
  padding: 0;
  list-style: none;
}

.partei__zeile {
  padding: var(--ab-m) var(--ab-m) var(--ab-xs);
  margin-bottom: var(--ab-m);
  background-color: var(--c-flaeche);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius-m);
}

/* Kopfzeile einer Personenzeile (T-021): links die Beschriftung, rechts das
   „×". Ohne JavaScript ist der Knopf `hidden`, dann bleibt es eine Zeile. */

.partei__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ab-s);
}

.partei__titel {
  margin: 0 0 var(--ab-xs);
  font-family: var(--schrift-text);
  font-size: var(--fs-klein);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-ink-weich);
}

/* Das „×" ist eine leise Handlung: erst im Zugriff bekommt es Kontur. Die
   Trefferfläche ist trotzdem 2,25 rem groß — daumentauglich (WCAG 2.5.8). */

.knopf-entfernen {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background-color: transparent;
  color: var(--c-ink-weich);
  font-family: var(--schrift-text);
  font-size: var(--fs-normal);
  line-height: 1;
  cursor: pointer;
}

.knopf-entfernen:hover,
.knopf-entfernen:focus-visible {
  border-color: var(--c-akzent);
  color: var(--c-akzent-tief);
}

.knopf-entfernen[hidden] {
  display: none;
}

.knopf--leise {
  color: var(--c-akzent-tief);
  background-color: transparent;
  border-color: var(--c-linie-kraeftig);
}

.knopf--leise:hover {
  color: #ffffff;
  background-color: var(--c-akzent-tief);
}

.knopf--klein {
  padding: var(--ab-2xs) var(--ab-xs);
  font-size: var(--fs-klein);
}

.knopf:disabled {
  background-color: var(--c-linie);
  border-color: var(--c-linie-kraeftig);
  color: var(--c-ink-weich);
  cursor: not-allowed;
}

.aufruf-klein {
  margin-block: 0 var(--ab-m);
}

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

.meldung--erfolg {
  background-color: var(--c-bestaetigt);
  border-left-color: var(--c-bestaetigt-linie);
}

/* Die Belegungskontrolle im Formular (ADR 007; seit ADR 010 nur noch eine
   Warnung): Sie nennt die vollen Nächte, der Knopf bleibt aktiv. */

.buchen-meldung {
  margin-block: var(--ab-m) var(--ab-s);
  white-space: pre-line;
  background-color: var(--c-vorgemerkt);
  border-left-color: var(--c-vorgemerkt-linie);
}

.buchen-meldung[hidden] {
  display: none;
}

/* Die Buchungsseite (T-027): der Statussatz vorn, die Knöpfe nebeneinander,
   sobald Platz ist. */

.buchung-status {
  font-weight: 600;
}

.buchung-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-s);
  align-items: center;
}

.buchung-knoepfe__storno {
  margin: 0;
}

/* -------------------------------------------------------------------------
   11. Admin (Welle 3, Tabs seit T-023, Bettenmodell seit T-028):
       Kennzahlen, Tabellen, Ampel, Naechte, Zuteilungsraster, Matrix

   Der Admin benutzt bewusst dieselben Bausteine wie die Gästeseiten —
   Meldungen, Eckdaten, Knöpfe. Neu ist nur, was es dort nicht gibt.
   ------------------------------------------------------------------------- */

/* Das Banner nach einer Tat (T-028): die Partei verlinkt, darunter, wer
   nachgerückt ist. */

.admin-banner {
  margin-block: var(--ab-s) var(--ab-m);
}

.admin-banner p {
  margin: 0;
}

.admin-banner p + p {
  margin-top: var(--ab-2xs);
}

/* Die Warnung in einer Rückfrage (Kapazität, Überbelegung): Heugelb wie die
   Belegungskontrolle im Formular — sie hält nichts auf. */

.meldung--warnung {
  background-color: var(--c-vorgemerkt);
  border-left-color: var(--c-vorgemerkt-linie);
}

/* Tabs: ein konstanter Kopf, darunter genau ein Bereich (T-023). Es sind
   gewöhnliche Links auf dieselbe Adresse — kein JavaScript, keine Anker. */

.tabs {
  margin-block: var(--ab-m);
  border-bottom: 1px solid var(--c-linie);
}

.tabs__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs__tab {
  display: block;
  padding: var(--ab-xs) var(--ab-s);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  color: var(--c-ink-weich);
  font-size: var(--fs-klein);
  text-decoration: none;
  white-space: nowrap;
}

.tabs__tab:hover,
.tabs__tab:focus-visible {
  background-color: var(--c-flaeche);
  color: var(--c-ink);
}

.tabs__tab--aktiv,
.tabs__tab--aktiv:hover {
  background-color: var(--c-flaeche);
  border-color: var(--c-linie);
  color: var(--c-ink);
  font-weight: 600;
  /* Deckt die Linie des Kopfes ab: Der offene Tab hängt am Inhalt. */
  margin-bottom: -1px;
  padding-bottom: calc(var(--ab-xs) + 1px);
}

.kennzahlen {
  margin-block: var(--ab-m);
}

.kennzahlen__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--ab-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kennzahl {
  padding: var(--ab-xs) var(--ab-s);
  background-color: var(--c-flaeche);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius-m);
  text-align: center;
}

.kennzahl--warnung {
  background-color: var(--c-fehler-bg);
  border-color: var(--c-fehler-linie);
}

.kennzahl__wert {
  display: block;
  font-family: var(--schrift-titel);
  font-size: var(--fs-h2);
  line-height: var(--zh-eng);
}

.kennzahl__label {
  display: block;
  font-size: var(--fs-winzig);
  color: var(--c-ink-weich);
}

.kennzahl__detail {
  display: block;
  font-size: var(--fs-winzig);
  color: var(--c-ink);
}

/* Zuteilungsraster: Zimmer × Nächte mit den zugeteilten Parteien (T-028,
   Bänder aus dem alten Gästeraster). Die Umhüllung nutzen auch die
   Listen-Tabellen. */

.raster-huelle {
  overflow-x: auto;
  margin-block: var(--ab-xs) var(--ab-m);
  border: 1px solid var(--c-linie-kraeftig);
  border-radius: var(--radius-m);
  background-color: var(--c-flaeche);
  /* Seit T-033 an der linken Inhaltskante und so breit wie der Inhalt; der
     zentrierte Ausbruch aus T-013 entfällt, weil der Inhalt selbst schon bis
     kurz vor den Fensterrand reicht. Reicht der Platz nicht, scrollt die
     Tabelle in ihrer Hülle. */
}

.raster {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-klein);
}

.raster__beschriftung {
  padding: var(--ab-xs) var(--ab-s);
  text-align: left;
  color: var(--c-ink-weich);
  font-size: var(--fs-klein);
  border-bottom: 1px solid var(--c-linie);
}

.raster th,
.raster td {
  border: 1px solid var(--c-linie);
  padding: var(--ab-2xs) var(--ab-xs);
  text-align: center;
  vertical-align: middle;
}

.raster th.raster__ecke,
.raster th.raster__zimmer {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--c-flaeche);
  text-align: left;
  border-right: 2px solid var(--c-linie-kraeftig);
}

/* Drei bündige Spalten im Zeilenkopf (T-013): Bezeichnung, Lage, Plätze.
   Das Grid liegt auf einem inneren Wrapper, nicht auf dem `<th>` selbst —
   ein Grid-`th` verliert sein Zellverhalten (Julius, 18.09.2026). Die Lage
   bekommt eine feste Breite, damit die Plätze in jeder Zeile an derselben
   Stelle stehen. Seit T-060 nur 6,5 statt 13 rem: Eine lange Lage
   („Erdgeschoss, eigener Eingang") bricht zweizeilig um, dafür passt das
   Raster ab 1280 px ohne inneres Scrollen — mindestens 971 px breit (EN
   960), die Hülle hat bei 1280 px samt Bildlaufleiste 995 px. */

.raster__zimmerkopf {
  display: grid;
  grid-template-columns: max-content 6.5rem max-content;
  align-items: baseline;
  gap: 0 var(--ab-s);
  font-size: var(--fs-klein);
}

.raster__zimmer-lage,
.raster__zimmer-plaetze {
  color: var(--c-ink-weich);
  font-weight: 400;
}

.raster__zimmer-plaetze {
  font-size: var(--fs-winzig);
  white-space: nowrap;
}

/* Auf schmalen Geräten stehen die drei Stücke untereinander; das Raster
   scrollt dort in seiner Hülle. `min-width` statt `width`, sonst schrumpft
   der Zeilenkopf auf ein Zeichen (T-022-Abnahme). */

@media (max-width: 48rem) {
  .raster th.raster__ecke,
  .raster th.raster__zimmer {
    min-width: 9.5rem;
  }

  .raster__zimmerkopf {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    line-height: 1.3;
  }

  .raster__zimmer-lage {
    overflow-wrap: anywhere;
  }
}

/* Die Tagesspalten sind mindestens 3,75 rem breit (T-060, vorher 3,9) —
   den übrigen Platz verteilt die Tabelle auf die Tage, bei 1280 px sind sie
   wieder gut 60 px breit, bei 1440 px knapp 100 px. */

.raster__nacht {
  min-width: 3.75rem;
  padding-inline: var(--ab-2xs);
  font-weight: 600;
  background-color: var(--c-flaeche);
}

.raster__wochentag,
.raster__datum {
  display: block;
}

.raster__wochentag {
  color: var(--c-ink-weich);
  font-size: var(--fs-winzig);
  font-weight: 400;
}

.raster__datum {
  font-size: var(--fs-winzig);
}

.zelle {
  min-width: 3.1rem;
  height: 2.6rem;
}

/* T-022: Jede Partei bekommt ihr eigenes Band in ihrer Statusfarbe — das
   Polster sitzt deshalb im Band, nicht in der Zelle. Seit T-028 ist jedes
   Band ein Link auf seine Buchung. */

.raster td.zelle {
  padding: 0;
}

.zelle__segmente {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 2.6rem;
  height: 100%;
}

.zelle__segment {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem var(--ab-2xs);
  color: var(--c-ink);
  text-decoration: none;
}

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

.zelle__segment--reserviert {
  background-color: var(--c-vorgemerkt);
  box-shadow: inset 0 0 0 1px var(--c-vorgemerkt-linie);
}

.zelle__segment--bestaetigt {
  background-color: var(--c-bestaetigt);
  box-shadow: inset 0 0 0 1px var(--c-bestaetigt-linie);
  font-weight: 600;
}

.zelle__namen {
  display: block;
  font-size: var(--fs-winzig);
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
}

.zelle--frei {
  background-color: var(--c-frei);
}

/* Alle Plätze des Zimmers vergeben (T-018, ADR 009): Die Schraffur liegt in
   der Bandfläche, damit die Namen darüber lesbar bleiben (T-024). Auslauf-
   Bänder bleiben frei davon — sie belegen die Nacht ja nicht. */

.zelle--voll .zelle__segment:not(.zelle__segment--auslauf) {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 0.3rem,
    var(--c-voll-strich) 0.3rem 0.45rem
  );
}

/* Mehr Köpfe als Plätze (T-028, `domain::konflikt`): eine Warnung, nie eine
   Sperre. Der Rahmen liegt über den Bändern — ein `outline` malt nach dem
   Inhalt. */

.raster td.zelle--ueberbelegt {
  outline: 2px solid var(--c-fehler-linie);
  outline-offset: -2px;
}

/* Auslauf am Abreisetag (T-018, T-024, T-025): ein eigenes, halb gefülltes
   Band mit sauberer Kante — die Nacht selbst ist frei. */

.zelle__segment--auslauf {
  background-color: transparent;
  box-shadow: none;
  font-weight: 400;
  min-height: 1.25rem;
}

.zelle__segment--auslauf.zelle__segment--reserviert {
  background-image: linear-gradient(
    to right,
    var(--c-vorgemerkt) 0 calc(50% - 1px),
    var(--c-vorgemerkt-linie) calc(50% - 1px) 50%,
    transparent 50%
  );
}

.zelle__segment--auslauf.zelle__segment--bestaetigt {
  background-image: linear-gradient(
    to right,
    var(--c-bestaetigt) 0 calc(50% - 1px),
    var(--c-bestaetigt-linie) calc(50% - 1px) 50%,
    transparent 50%
  );
}

/* Die zwölfte Spalte (T-009): nur noch Abreisetag. Keine Grauflaeche — nur
   die feine Linie trennt ihn als „keine Nacht" ab. */

.raster__abreisetag,
.zelle--abreisetag {
  border-left: 2px solid var(--c-linie-kraeftig);
}

/* Die Buchungen ohne Zimmer: Auswahl und Knopf in einer Zeile, solange
   Platz ist (T-028). */

.zimmerwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-xs);
  margin: 0;
}

.zimmerwahl__auswahl {
  max-width: 100%;
  padding: var(--ab-2xs) var(--ab-xs);
  font: inherit;
  font-size: var(--fs-klein);
  color: var(--c-ink);
  background-color: var(--c-flaeche);
  border: 1px solid var(--c-linie-kraeftig);
  border-radius: var(--radius-s);
}

/* Auf der Detailseite so breit wie die Eckdaten darüber (T-062). */

.zimmerwahl--detail {
  max-width: var(--lesebreite);
  margin-block: 0 var(--ab-m);
}

.zimmerwahl--detail .feld__label {
  flex-basis: 100%;
  margin-bottom: 0;
}

/* Je Person eine Auswahl (T-062): Name und Auswahl nebeneinander, die
   Auswahl für alle als letzte Zeile, etwas abgesetzt; Überschrift und Knopf
   über die ganze Breite. */

.zimmerwahl--personen {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: var(--ab-2xs) var(--ab-xs);
}

.zimmerwahl--personen .zimmerwahl__titel,
.zimmerwahl--personen .knopf {
  grid-column: 1 / -1;
  justify-self: start;
}

.zimmerwahl__person {
  font-size: var(--fs-klein);
}

.zimmerwahl__person--alle {
  margin-top: var(--ab-2xs);
  color: var(--c-ink-weich);
}

.zimmerwahl__person--alle + .zimmerwahl__auswahl {
  margin-top: var(--ab-2xs);
}

/* Der Plan in der Rückfrage einer Zimmerwahl: eine Zeile je Person. */

.zimmerplan {
  margin-block: 0 var(--ab-s);
}

/* Die Nächte (T-028): je Nacht belegt/20, wartend, die Parteien. Über der
   Kapazität (Ermessen, „23/20") steht die Zahl rot hinterlegt, genau voll
   heugelb. */

.naechte__nacht {
  white-space: nowrap;
}

.naechte__belegt {
  display: inline-block;
  padding: 1px var(--ab-xs);
  border-radius: var(--radius-s);
  font-weight: 600;
  white-space: nowrap;
}

.naechte__belegt--voll {
  background-color: var(--c-vorgemerkt);
}

.naechte__belegt--ueber {
  background-color: var(--c-fehler-bg);
  box-shadow: inset 0 0 0 1px var(--c-fehler-linie);
}

.naechte__parteien li + li {
  margin-top: var(--ab-2xs);
}

.naechte__personen {
  color: var(--c-ink-weich);
  font-size: var(--fs-winzig);
  white-space: nowrap;
}

/* Eine Zuteilung, nach der der Gast geändert hat (Datenmodell,
   `zuteilung_pruefen`). */

.pruefen-marke {
  display: inline-block;
  padding: 0 var(--ab-2xs);
  border: 1px solid var(--c-vorgemerkt-linie);
  border-radius: var(--radius-s);
  background-color: var(--c-vorgemerkt);
  font-size: var(--fs-winzig);
}

/* Zimmerwunsch einer Partei (T-067). In der Übersicht eine Marke wie
   „prüfen", aber neutral: ein Hinweis, keine Aufgabe. In der Zuteilung der
   Text unter der Partei, auf der Detailseite ein abgesetzter Kasten direkt
   über der Zimmerwahl — jeweils mit den Zeilenumbrüchen des Gastes. */

.wunsch-marke {
  display: inline-block;
  padding: 0 var(--ab-2xs);
  border: 1px solid var(--c-linie-kraeftig);
  border-radius: var(--radius-s);
  background-color: var(--c-hinweis-bg);
  font-size: var(--fs-winzig);
  font-weight: 400;
}

/* Mindestens 10 rem breit: Am Handy zwängt die Tabelle sonst die
   Partei-Spalte auf ein Wort zusammen, und der Wunsch zerfällt in Silben —
   lieber scrollt die Tabelle in ihrer Hülle. `break-word` statt `anywhere`,
   damit die Spalte nicht unter die Wortbreite schrumpft. */
.tabelle__wunsch {
  display: block;
  min-width: 10rem;
  margin-top: var(--ab-2xs);
  font-size: var(--fs-klein);
  font-weight: 400;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.zimmerwunsch {
  max-width: var(--lesebreite);
  margin-block: var(--ab-m);
  padding: var(--ab-s) var(--ab-m);
  border-left: 3px solid var(--c-akzent);
  border-radius: var(--radius-s);
  background-color: var(--c-hinweis-bg);
}

.zimmerwunsch__titel {
  margin: 0 0 var(--ab-2xs);
  font-weight: 600;
}

.zimmerwunsch__text {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Listen-Tabellen (Buchungen, Protokoll, Teilnehmer) */

.tabelle {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-klein);
}

.tabelle th,
.tabelle td {
  border-bottom: 1px solid var(--c-linie);
  padding: var(--ab-xs);
  text-align: left;
  vertical-align: top;
}

.tabelle thead th {
  background-color: var(--c-flaeche);
  white-space: nowrap;
}

/* Ein Knopf in einer Tabellenzeile (Kaution erhalten, T-028). */

.tabelle__formular {
  margin: 0;
}

/* Das Protokoll: feste Spalten, damit die Zeilen untereinander stehen und
   nur die Detailspalte umbricht (T-023 — vorher zerhackte
   `overflow-wrap: anywhere` jede Spalte mitten im Wort). */

.tabelle--protokoll {
  table-layout: fixed;
  min-width: 34rem;
}

.tabelle--protokoll th,
.tabelle--protokoll td {
  vertical-align: baseline;
}

.protokoll__wann {
  width: 9.5rem;
  white-space: nowrap;
}

.protokoll__was {
  width: 9rem;
}

.protokoll__wer {
  width: 4.5rem;
}

.protokoll__detail {
  overflow-wrap: break-word;
}

.tabelle__stark {
  font-weight: 600;
}

/* Als eigene Zeile nur der Name über der Kontaktzeile — eine Tabellenzelle
   mit dieser Klasse bleibt eine Tabellenzelle (T-028). */

span.tabelle__stark {
  display: block;
}

.tabelle__leise {
  display: block;
  color: var(--c-ink-weich);
  font-size: var(--fs-winzig);
  overflow-wrap: anywhere;
}

/* Kautions-Ampel (ADR 010): grün erhalten, gelb in der Frist, rot drüber,
   grau wartend */

.ampel {
  display: inline-block;
  padding: 1px var(--ab-xs);
  border: 1px solid var(--c-linie-kraeftig);
  border-radius: var(--radius-s);
  white-space: nowrap;
}

.ampel--gruen {
  background-color: var(--c-bestaetigt);
  border-color: var(--c-bestaetigt-linie);
}

.ampel--gelb {
  background-color: var(--c-vorgemerkt);
  border-color: var(--c-vorgemerkt-linie);
}

.ampel--rot {
  background-color: var(--c-fehler-bg);
  border-color: var(--c-fehler-linie);
  font-weight: 600;
}

.ampel--grau {
  background-color: var(--c-flaeche);
  border-color: var(--c-linie-kraeftig);
  color: var(--c-ink-weich);
}

.ampel--beendet {
  background-color: transparent;
  border-color: var(--c-linie);
  color: var(--c-ink-weich);
}

/* Aktionen auf der Detailseite: nebeneinander, sobald Platz ist */

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-s);
  align-items: center;
  margin-block: var(--ab-m);
}

.aktionen .formular,
.aktionen .aufruf-klein {
  margin: 0;
}

/* Die Erläuterung „vorher / jetzt" behält ihre Zeilenumbrüche */

.vorher-nachher {
  white-space: pre-line;
}

/* Tagesmatrix der Teilnehmerliste */

.matrix__zelle {
  min-width: 2.2rem;
  height: 1.8rem;
  background-color: var(--c-frei);
}

.matrix__zelle--reserviert {
  background-color: var(--c-vorgemerkt);
  box-shadow: inset 0 0 0 1px var(--c-vorgemerkt-linie);
}

.matrix__zelle--bestaetigt {
  background-color: var(--c-bestaetigt);
  box-shadow: inset 0 0 0 1px var(--c-bestaetigt-linie);
}

.matrix__summe {
  font-size: var(--fs-winzig);
  font-weight: 600;
  text-align: center;
}

/* -------------------------------------------------------------------------
   12. Rücksichten
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

.pflicht-legende {
  white-space: nowrap;
}