/* Farben der CMC 2027: Cyan #29A8E0 auf Schwarz, dazu Hellgrau #ECEBE7.
   Aus dem Entwurf gemessen, nicht geschätzt (10.10.2026).

   **Die Variable heißt weiter `--gold`.** Sie steht an über hundert Stellen in
   dieser Datei; sie umzubenennen hieße, hundert Zeilen anzufassen, um nichts zu
   gewinnen. Hier wird der Wert getauscht, nicht der Name - der Rest der Datei
   bleibt unberührt und bekommt die neue Farbe von selbst. */

:root {
  --gold: #29a8e0;
  --gold-dunkel: #1b8fc4;
  --anthrazit: #0b0b0c;
  --anthrazit-hell: #1c1c1f;
  --grund: #f6f6f4;
  --karte: #ffffff;
  --text: #2a2a2d;
  --text-leise: #6e6e73;
  --linie: #e0dfdb;
  --warnung: #b4452f;
  --gut: #3f7a4a;
  --radius: 8px;
  --leiste-breite: 224px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* eventbase arbeitet mit 11-13px und Abständen von 8-10px. Das wirkt erst
     eng, zeigt aber deutlich mehr Zeilen - und genau darum geht es bei
     Teilnahme- und Akquiselisten. */
  font: 13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--grund);
  color: var(--text);
}

a { color: var(--anthrazit); }

/* --- Seitenleiste ---------------------------------------------------------
   Links fest, Inhalt daneben. Unter 900 px schiebt sie sich ueber den Inhalt
   und wird ueber die Kopfzeile aufgeklappt - ohne JavaScript, per Checkbox. */

.leiste {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--leiste-breite);
  background: var(--anthrazit);
  color: #ded9d0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 20;
}

.leiste .marke {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 18px 20px 16px;
  text-decoration: none;
  border-bottom: 1px solid #454545;
}

.marke-zeichen { color: var(--gold); font-weight: 700; letter-spacing: 0.08em; }
.marke-text    { color: #9c968b; font-size: 13px; }

.leiste nav { flex: 1; padding: 12px 0 20px; }

.leiste .gruppe {
  padding: 16px 20px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #837d72;
}

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

.leiste a,
.leiste .geplant {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 18px;
  font-size: 13.5px;
  text-decoration: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
}

.leiste a { color: #ded9d0; }
.leiste a:hover { background: var(--anthrazit-hell); color: #fff; }

.leiste a.aktiv {
  background: var(--anthrazit-hell);
  color: #fff;
  border-left-color: var(--gold);
}

/* Geplant, aber noch nicht gebaut: sichtbar, damit man die Form des Ganzen
   sieht - aber erkennbar und nicht anklickbar. */
.leiste .geplant { color: #6d675d; cursor: default; }
.leiste .geplant::after {
  content: "bald";
  margin-left: auto;
  flex: none;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  border: 1px solid #4d4a44;
  border-radius: 999px;
  padding: 0 6px;
  color: #6d675d;
}

.leiste .zeichen {
  width: 16px;
  text-align: center;
  color: var(--gold);
  opacity: 0.75;
  font-size: 12px;
}

.leiste .geplant .zeichen { color: #5a554d; }

.leiste-fuss {
  border-top: 1px solid #454545;
  padding: 14px 20px;
  font-size: 13px;
}

.leiste-fuss .wer    { color: #ded9d0; }
.leiste-fuss .rollen { color: #837d72; font-size: 11.5px; margin-bottom: 6px; }
.leiste-fuss a       { color: var(--gold); text-decoration: none; font-size: 12.5px; }
.leiste-fuss a:hover { text-decoration: underline; }

/* --- Rahmen und Kopfzeile fuer schmale Fenster --- */

.rahmen { margin-left: var(--leiste-breite); min-height: 100vh; }

.leiste-schalter, .leiste-schatten, .klein-kopf { display: none; }

@media (max-width: 900px) {
  .leiste {
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
  }
  .leiste-schalter:checked ~ .leiste { transform: none; }
  .leiste-schalter:checked ~ .leiste-schatten {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 15;
  }
  .rahmen { margin-left: 0; }
  .klein-kopf {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--anthrazit);
    /* Weiß statt Markenblau. Das Blau bleibt als Linie darunter, dort trägt
       es die Marke, ohne Text unleserlich zu machen. */
    color: #fff;
    padding: 12px 16px;
    border-bottom: 3px solid var(--gold);
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .leiste-knopf { cursor: pointer; font-size: 20px; line-height: 1; }
}

/* --- Inhalt --- */

/* Der Inhalt nutzt die volle Breite des Bildschirms.
   Vorher standen hier 1240px. Auf Bennys 37-Zoll-Schirm blieb dadurch rechts
   ein breiter grauer Streifen ungenutzt, waehrend die Industrieliste mit ihren
   elf Spalten *innerhalb* ihres Rahmens waagerecht scrollen musste - Platz war
   da, er wurde nur nicht hergegeben (17.09.2026).

   Fliesstext bleibt trotzdem schmal: Eine Zeile ueber die ganze Breite eines
   Vier-K-Schirms liest niemand gern. Deshalb wird nur das begrenzt, was
   gelesen wird - Tabellen duerfen sich ausbreiten. */
main { max-width: none; padding: 20px 26px 48px; }

main > p,
main > .unterzeile,
main > .leiser-hinweis,
main > .hinweis,
.karte > p {
  max-width: 96ch;
}

h1 { font-size: 20px; margin: 0 0 3px; }
h2 { font-size: 15px; margin: 22px 0 8px; }
.unterzeile { color: var(--text-leise); font-size: 12.5px; margin: 0 0 16px; }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 13px 15px;
}

/* --- Kennzahlen --- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 9px;
  margin-bottom: 8px;
}

.zahl {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.zahl .wert { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zahl .was { color: var(--text-leise); font-size: 11.5px; }
.zahl.achtung { border-left-color: var(--warnung); }
.zahl.achtung .wert { color: var(--warnung); }

/* --- Tabellen --- */

.tabellenrahmen { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; background: var(--karte); }

th, td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}

th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-leise); }
tbody tr:hover { background: #faf8f4; }
td.zahl-rechts { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Kleinteile --- */

.marke-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #efece5;
  color: var(--text-leise);
}

.marke-chip.bounce, .marke-chip.erloschen { background: #f7e2dd; color: var(--warnung); }
.marke-chip.aktiv { background: #e4efe5; color: var(--gut); }

.leer { color: var(--text-leise); padding: 22px; text-align: center; }

/* --- Formulare --- */

.formular { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

input[type=text], input[type=email], input[type=password], input[type=date], select {
  padding: 7px 9px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font-size: 13.5px;
  background: #fff;
  min-width: 0;
}

input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: -1px; }

/* Knöpfe: dunkel mit weißer Schrift, beim Überfahren blau mit weißer Schrift.

   Vorher stand hier `color: var(--gold)` auf anthrazitem Grund. Die Variable
   heißt zwar „gold", ist aber das Blau der Marke (#29a8e0) – also blaue
   Schrift auf Schwarz, schlecht zu lesen und auf jeder Seite des Portals.

   Benny am 12.10.2026: „Ich möchte gerne solche Buttons, wenn wir so arbeiten,
   schwarze Buttons mit weißer Schrift drin oder blaue Buttons mit weißer
   Schrift drin."

   Weiß bleibt in beiden Zuständen. Nur der Hintergrund wechselt – so kann der
   Hover nie den Text verschlucken, egal welche Regel später dazukommt. */
button {
  padding: 7px 15px;
  border: 0;
  border-radius: 8px;
  background: var(--anthrazit);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

/* Der dunkle Hover gilt nur im Teambereich.

   Vorher stand hier `button:hover` ohne Einschränkung, und das war die
   Ursache eines Fehlers, der immer wieder auftauchte: Ein Element-Selektor
   mit Pseudoklasse wiegt mehr als eine Klassenregel ohne eigenes `:hover`.
   Jeder Knopf im Gastbereich, der seinen Hintergrund nur im Normalzustand
   setzte, wurde beim Überfahren anthrazit, mit grauer Schrift darauf.

   Benny am 12.10.2026: „Wenn ich drüber hovere, wird der Hintergrund schwarz
   und die Schrift grau, ist schlecht lesbar. Bitte einmal einstellen, dass es
   im gesamten Anmeldeprozess nicht wieder zu diesem Problem kommt."

   Betroffen waren die Wahl im ersten Schritt, die Zimmerauswahl, „ändern"
   und „entfernen" und das Abmelden im Konto. Einzeln geflickt wäre der
   nächste neue Knopf wieder dunkel geworden, deshalb steht die Grenze hier.

   `body` im Gastbereich trägt die Klasse `gast` (rueckmeldung_rahmen.html),
   die Teamseiten haben keine. Im Gastbereich entscheidet damit allein die
   Klasse des Knopfes, wie er beim Überfahren aussieht. */
body:not(.gast) button:hover { background: var(--gold-dunkel); color: #fff; }

/* --- Anmeldung --- */

.anmelden-huelle {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--anthrazit);
}

.anmelden-karte {
  background: var(--karte);
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  border-top: 4px solid var(--gold);
}

.anmelden-karte h1 { font-size: 20px; }
.anmelden-karte label { display: block; font-size: 13px; color: var(--text-leise); margin: 14px 0 5px; }
.anmelden-karte input { width: 100%; }
.anmelden-karte button { width: 100%; margin-top: 22px; }

.fehler {
  background: #f7e2dd;
  color: var(--warnung);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-top: 16px;
}

@media (max-width: 620px) {
  .kopf .innen { gap: 12px; }
  .kopf .rechts { margin-left: 0; width: 100%; }
}

/* --- Aufgaben und Preispflege --- */

td.umbruch { white-space: normal; }

tr.erledigt td { color: var(--text-leise); text-decoration: line-through; }
tr.erledigt td .marke-chip { text-decoration: none; }
tr.ueberfaellig td:first-child + td { font-weight: 600; }

button.haken, button.leise {
  background: none;
  border: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}

button.leise { color: var(--linie); font-size: 14px; }
button.leise:hover { color: var(--warnung); }
button.haken:hover { color: var(--gold-dunkel); }

/* Formulare in Tabellenzellen sollen keine Zeilenhoehe erzeugen */
td form { display: inline; margin: 0; }

input.zahl-feld {
  width: 92px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
}

input.zahl-feld.schmal { width: 58px; }

.hinweis {
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}

.hinweis.gut { background: #e4efe5; color: var(--gut); }

.karte.formular { align-items: center; }

/* --- Leiste einklappen ----------------------------------------------------
   Eingeklappt bleiben nur die Zeichen stehen. Das gibt breiten Tabellen -
   Teilnahmelisten, Rechnungspositionen - spuerbar mehr Platz. Der Zustand
   steht im localStorage und wird vor dem ersten Zeichnen gesetzt. */

:root { --leiste-schmal: 58px; }

.leiste-kopf {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #454545;
}

.leiste-kopf .marke { flex: 1; border: 0; }

button.klapp {
  background: none;
  border: 0;
  color: #837d72;
  font-size: 18px;
  line-height: 1;
  padding: 0 16px 0 6px;
  cursor: pointer;
}

button.klapp:hover { color: var(--gold); }

html.leiste-schmal .rahmen { margin-left: var(--leiste-schmal); }
html.leiste-schmal .leiste { width: var(--leiste-schmal); }

html.leiste-schmal .marke-text,
html.leiste-schmal .leiste .text,
html.leiste-schmal .leiste-fuss .wer,
html.leiste-schmal .leiste-fuss .rollen,
html.leiste-schmal .leiste .gruppe { display: none; }

html.leiste-schmal .leiste .geplant::after { content: none; }

html.leiste-schmal .leiste a,
html.leiste-schmal .leiste .geplant { justify-content: center; padding: 9px 0; }

html.leiste-schmal .leiste .zeichen { width: auto; font-size: 14px; }

html.leiste-schmal .marke { justify-content: center; padding: 18px 0 16px; }
html.leiste-schmal .leiste-kopf { flex-direction: column; gap: 2px; padding-bottom: 8px; }
html.leiste-schmal button.klapp { padding: 0 0 4px; transform: rotate(180deg); }

/* Gruppen trennt im schmalen Zustand ein Strich statt einer Ueberschrift */
html.leiste-schmal .leiste .gruppe + ul { border-top: 1px solid #454545; padding-top: 6px; margin-top: 6px; }

html.leiste-schmal .leiste-fuss { padding: 12px 0; text-align: center; }
.leiste-fuss .kurz { display: none; }
html.leiste-schmal .leiste-fuss .kurz { display: inline; font-size: 16px; }

/* Die eigene Obergrenze fuer den schmalen Zustand ist weg - main hat keine
   mehr, der gewonnene Platz kommt also ohnehin dem Inhalt zugute. */

@media (max-width: 900px) {
  button.klapp { display: none; }
  html.leiste-schmal .leiste { width: var(--leiste-breite); }
  html.leiste-schmal .rahmen { margin-left: 0; }
  html.leiste-schmal .marke-text,
  html.leiste-schmal .leiste .text,
  html.leiste-schmal .leiste .gruppe,
  html.leiste-schmal .leiste-fuss .wer,
  html.leiste-schmal .leiste-fuss .rollen { display: revert; }
}

/* --- Akquise --------------------------------------------------------------
   Die Reihenfolge macht die Arbeit: zugesagt oben, Abgesagte unten. Farbe ist
   nur Beiwerk - wer sie nicht unterscheiden kann, liest die Reihenfolge. */

a.zahl { text-decoration: none; color: inherit; display: block; }
a.zahl:hover { border-color: var(--gold-dunkel); }
.zahl.gewaehlt { outline: 2px solid var(--gold); outline-offset: -1px; }

.zahl.stand-zugesagt      { border-left-color: var(--gut); }
.zahl.stand-wackelt       { border-left-color: #c8922f; }
.zahl.stand-angeschrieben { border-left-color: var(--gold); }
.zahl.stand-offen         { border-left-color: var(--linie); }
.zahl.stand-abgesagt      { border-left-color: var(--warnung); }

table.akquise tr.stand-zugesagt td:nth-child(2) { font-weight: 600; }
table.akquise tr.stand-abgesagt td { color: var(--text-leise); }

select.stand-wahl {
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  max-width: 150px;
}

tr.stand-zugesagt select.stand-wahl { border-color: var(--gut); color: var(--gut); }
tr.stand-abgesagt select.stand-wahl { border-color: var(--linie); }

.fehlt {
  display: inline-block;
  font-size: 11.5px;
  color: var(--warnung);
  background: #f7e2dd;
  border-radius: 999px;
  padding: 1px 7px;
  margin-right: 5px;
}

.leise-text { color: var(--text-leise); font-size: 13px; }

.werkzeugleiste {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.knopf-leise {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--karte);
  text-decoration: none;
  font-size: 14px;
}

.knopf-leise:hover { border-color: var(--gold-dunkel); }
.leiser-hinweis { color: var(--text-leise); font-size: 12.5px; }
.leiser-link { align-self: center; font-size: 13px; color: var(--text-leise); }

/* --- Rückmeldeseiten ------------------------------------------------------
   Das sieht ein Händler auf dem Handy, nicht das Team am Schreibtisch.
   Große Knöpfe, nichts zu lesen, ein Klick und fertig. */

/* Heller Grund statt Anthrazit. Benny am 12.10.2026: „Dadurch, dass wir die
   ganze Zeit mit weißen Fenstern arbeiten, würde ich auch den Hintergrund
   gerne weiß machen. Selbst wenn mal was verrutscht, ist dann alles
   einheitlich." Ein Hauch Grau statt reinem Weiß, damit die Karte auf großen
   Bildschirmen noch als Fläche erkennbar bleibt. */
body.gast { background: #F4F5F6; color: var(--text); }

/* `min-height` war einmal 100vh, damit die Karte auf einer sonst leeren Seite
   nicht oben klebt. Seit dem 13.10.2026 steht die Leiste der Website darueber
   und der Fuss darunter; volle Fensterhoehe schoebe den Fuss weit nach unten
   und liesse eine graue Wueste dazwischen. 60vh traegt die kurze
   Rueckmeldeseite und gibt dem Fuss trotzdem seinen Platz. */
.gast-huelle {
  min-height: 60vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 56px;
}

/* 430 Pixel waren für die kurze Rückmeldeseite gedacht - eine Frage, ein Knopf.
   Das Anmeldeformular hat fünf Personenblöcke und wirkte dadurch auf dem Laptop
   wie ein Handy mit Rand (Benny, 10.10.2026). Deshalb richtet sich die Breite
   jetzt nach dem Inhalt: Seiten mit `gast-breit` bekommen Platz, alle anderen
   bleiben schmal. */
.gast-karte {
  background: var(--karte);
  border-radius: 16px;
  border-top: 5px solid var(--gold);
  padding: 30px 26px 24px;
  width: 100%;
  max-width: 430px;
}

.gast-karte.gast-breit {
  max-width: 920px;
  padding: 34px 38px 30px;
}

/* Formularzeilen dürfen nebeneinander stehen, sobald Platz da ist. */
@media (min-width: 760px) {
  .gast-breit .gast-block { padding: 22px 24px; }
  .gast-breit .gast-zwei {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
}

.gast-marke {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold-dunkel);
  font-weight: 700;
  margin-bottom: 18px;
}

/* Seit dem 13.10.2026 traegt den Seitentitel der schwarze Balken darueber,
   in der Karte steht h2. Beide Regeln bleiben: h1 fuer den Fall, dass eine
   Vorlage noch eine hat. */
.gast-karte h1, .gast-karte h2 { font-size: 21px; margin: 0 0 4px; }
.gast-zeile { color: var(--text-leise); font-size: 14px; margin: 0 0 20px; }
.gast-frage { font-size: 15.5px; line-height: 1.6; margin: 0 0 20px; }

.gast-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 9px;
  padding: 14px 16px;
  background: var(--karte);
  border: 1.5px solid var(--linie);
  border-radius: 11px;
  color: var(--text);
  font-size: 15.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.gast-knopf:hover { border-color: var(--gold); background: #fdfbf7; }
.gast-knopf[aria-current] { border-color: var(--gold); background: #fdf7ec; }
.gast-knopf-wert { color: var(--text-leise); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Von sicher nach nein: die Farbe folgt der Antwort, führt sie aber nicht. */
.gast-knopf.w100 { border-left: 5px solid var(--gut); }
.gast-knopf.w75  { border-left: 5px solid #7ba05b; }
.gast-knopf.w50  { border-left: 5px solid #c8922f; }
.gast-knopf.w25  { border-left: 5px solid #c2763a; }
.gast-knopf.w0   { border-left: 5px solid var(--warnung); }

.gast-gruende { margin-bottom: 16px; }

.gast-grund {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 9px;
  margin-bottom: 7px;
  cursor: pointer;
  font-size: 14.5px;
}

.gast-grund:hover { border-color: var(--gold); }
.gast-grund input { margin-top: 2px; }
.gast-abmelden { background: #faf8f4; margin-top: 14px; }

.gast-feld { display: block; font-size: 13.5px; color: var(--text-leise); margin-bottom: 6px; }

.gast-feld textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 9px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

/* Der Knopf, der die Anmeldung abschickt. Blau mit weißer Schrift, wie
   „Weiter" und wie der Abschlussknopf in Schritt 3.

   Vorher setzte er nur Größe und Abstände und erbte damit den dunklen
   Grundzustand aus dem Teambereich. Benny am 12.10.2026: „Das verbindliche
   Buchen ist aktuell schwarzer Hintergrund und blaue Schrift drauf. Ich
   würde es wie die anderen machen, blauer Hintergrund und weiße Schrift." */
.gast-senden {
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  font-size: 16px;
  background: var(--gold);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
}
.gast-senden:hover { background: var(--gold-dunkel); }
.gast-senden:disabled { background: var(--linie); color: var(--text-leise); cursor: default; }

.gast-fuss {
  color: var(--text-leise);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}

/* --- Jahrgangs-Umschalter --- */

.jahrgang { padding: 9px 14px 4px 18px; }

.jahrgang select {
  width: 100%;
  background: var(--anthrazit-hell);
  /* Weiß statt Markenblau: Dasselbe schlecht lesbare Paar wie bei den
     Knöpfen, nur an einem Auswahlfeld. */
  color: #fff;
  border: 1px solid #4d4a44;
  font-size: 12px;
  padding: 5px 8px;
}

html.leiste-schmal .jahrgang { display: none; }

/* --- Umbruchpunkte wie bei eventbase: 900 und 560 -------------------------
   Bei 900 verschwindet die Leiste hinter dem Menüknopf. Bei 560 - Handy -
   werden aus Tabellenzeilen Karten: eine Tabelle mit acht Spalten ist auf
   einem Telefon nicht lesbar, egal wie man scrollt. */

@media (max-width: 560px) {
  main { padding: 14px 14px 40px; }
  h1 { font-size: 18px; }

  .zahlen { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px; }
  .zahl { padding: 8px 10px; }
  .zahl .wert { font-size: 18px; }

  .formular { gap: 6px; }
  .formular input, .formular select, .formular button { width: 100%; }

  /* Tabellen werden zu Karten. Die Spaltenüberschrift steht dann vor dem Wert -
     dafür trägt jede Zelle sie in data-spalte. */
  table.karten thead { display: none; }
  table.karten, table.karten tbody, table.karten tr, table.karten td { display: block; width: 100%; }

  table.karten tr {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    margin-bottom: 8px;
    padding: 4px 0;
    background: var(--karte);
  }

  table.karten td {
    border: 0;
    padding: 4px 12px;
    white-space: normal;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  table.karten td::before {
    content: attr(data-spalte);
    color: var(--text-leise);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: none;
    padding-top: 2px;
  }

  table.karten td:empty { display: none; }
  table.karten td.zahl-rechts { text-align: right; }
}

/* --- Aufklappbare Menuegruppen -------------------------------------------
   Benny: "damit es nicht zu voll gehauen ist". Die Gruppe mit der aktiven
   Seite bleibt offen, der Rest klappt zu. Der Zustand haelt im localStorage. */

.leiste details { border: 0; }

.leiste details > summary {
  padding: 13px 18px 5px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #837d72;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.leiste details > summary::-webkit-details-marker { display: none; }
.leiste details > summary::after { content: "▾"; font-size: 9px; opacity: 0.6; }
.leiste details[open] > summary::after { content: "▴"; }
.leiste details > summary:hover { color: var(--gold); }

html.leiste-schmal .leiste details > summary { display: none; }
html.leiste-schmal .leiste details > ul {
  border-top: 1px solid #454545; padding-top: 5px; margin-top: 5px;
}

.gast-block {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 13px 14px;
  margin-bottom: 12px;
}

.gast-block-titel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-leise);
  margin-bottom: 8px;
}

/* Alle Felder, nicht nur Zahlenfelder: Sonst laufen Text- und Mailfelder aus
   der Karte heraus - auf dem Handy sofort sichtbar. */
.gast-block .gast-feld input,
.gast-block .gast-feld select,
.gast-block .gast-feld textarea,
.gast-feld input,
.gast-feld select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
}

/* Nebeneinanderstehende Felder dürfen nicht über ihren Anteil hinauswachsen */
.gast-block > div[style*="flex"] > .gast-feld { min-width: 0; }

.gast-block .gast-grund { margin-bottom: 6px; }

/* --- Stufe ---------------------------------------------------------------
   Sichtbar, aber nicht laut. Sie ist der Grund, die eigene Teilnahmezahl
   einzutragen - nicht der Zweck der Seite. */

.stufe {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--stufe-farbe);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  background: #fdfbf7;
}

.stufe-zeichen { font-size: 26px; line-height: 1; color: var(--stufe-farbe); }
.stufe-name { font-weight: 700; font-size: 15px; }
.stufe-zeile { color: var(--text-leise); font-size: 12.5px; margin-top: 2px; }

/* --- Aufgaben mit Meilensteinen --- */

tr.meilenstein td { background: #fafaf8; }
tr.meilenstein td:nth-child(2) { font-weight: 600; }
.einzug { color: var(--text-leise); margin-right: 5px; }

.prio { display: inline-block; font-weight: 700; margin-right: 5px; }
.prio-1 { color: var(--warnung); }
select.prio-1 { border-color: var(--warnung); color: var(--warnung); }
select.prio-3 { color: var(--text-leise); }

/* --- Summenblock auf der Rechnung --- */

.summenblock {
  margin: 14px 0 0 auto;
  max-width: 320px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  padding: 10px 14px;
}

.summenblock > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}

.summenblock > div span:first-child { color: var(--text-leise); }
.summenblock > div.dick { font-weight: 700; border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 6px; }
.summenblock > div.offen span { color: var(--warnung); font-weight: 600; }

button.warnknopf { background: var(--warnung); color: #fff; }
button.warnknopf:hover { background: #963722; }

/* --- Aussteller-Checkliste --- */

.aussteller-karte { margin-bottom: 9px; }

.aussteller-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.checkliste {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--linie);
  padding-top: 9px;
}

.checkliste label { font-size: 12.5px; color: var(--text-leise); display: flex; align-items: center; gap: 5px; }
.mini-wahl { white-space: nowrap; }

/* --- Balken in der Auswertung --- */

.balken { height: 9px; border-radius: 999px; background: var(--gold); min-width: 2px; }

.optionsliste { margin: 6px 0 0; padding-left: 18px; color: var(--text-leise); font-size: 12.5px; }

tr.ungelesen td:nth-child(4) { font-weight: 600; }

.hinweis { background: #f6f3ec; color: var(--text); }
.hinweis.warn { background: #f7e2dd; color: var(--warnung); }

/* --- Assistentin --- */

.lage { border-left: 3px solid var(--gold); }
.lage p { margin: 0; line-height: 1.6; font-size: 14px; }
.lage-kopf { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
             color: var(--text-leise); margin-bottom: 7px; }
.lage .leiser-hinweis { margin-top: 9px; }

.hinweis-karte { margin-bottom: 8px; border-left: 3px solid var(--linie); }
.hinweis-karte.dringend-1 { border-left-color: var(--warnung); }
.hinweis-karte.dringend-2 { border-left-color: var(--gold); }

.hinweis-kopf { display: flex; justify-content: space-between; align-items: center;
                gap: 12px; flex-wrap: wrap; }
.hinweis-knoepfe { display: flex; gap: 7px; align-items: center; }
.hinweis-knoepfe form { display: inline; }
.hinweis-text { margin: 6px 0 0; color: var(--text-leise); font-size: 13px; }

button.knopf-leise-echt {
  background: var(--karte); color: var(--text); border: 1px solid var(--linie);
  font-weight: 500;
}
button.knopf-leise-echt:hover { border-color: var(--gold-dunkel); background: var(--karte); }
button.leise { font-size: 12.5px; }

.dashboard-hinweis {
  padding: 5px 0 5px 10px;
  border-left: 3px solid var(--linie);
  margin-bottom: 4px;
  font-size: 13.5px;
}
.dashboard-hinweis.dringend-1 { border-left-color: var(--warnung); }
.dashboard-hinweis.dringend-2 { border-left-color: var(--gold); }
.dashboard-hinweis a { text-decoration: none; font-weight: 500; }
.dashboard-hinweis a:hover { text-decoration: underline; }
.dashboard-hinweis .leise-text { display: block; }

/* --- Freigaben und Wünsche --- */

.freigabe-karte { margin-bottom: 9px; border-left: 3px solid var(--gold); }
.freigabe-zeilen { margin: 9px 0 0; font-size: 13px; }
.freigabe-zeilen > div { padding: 2px 0; }
.freigabe-zeilen span:first-child {
  display: inline-block; width: 110px; color: var(--text-leise); font-size: 12px;
}
.freigabe-knoepfe {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--linie); margin-top: 10px; padding-top: 10px;
}

.wunsch-karte { margin-bottom: 7px; border-left: 3px solid var(--linie); }
.wunsch-zeichen { font-size: 15px; margin-right: 5px; color: var(--gold-dunkel); }

/* ---------------------------------------------------------------------------
   Gesprächsverlauf
   Benny wollte es „wie einen WhatsApp-Verlauf": eingehend links, ausgehend
   rechts, je Nachricht nur die Kernaussage – die ganze Mail einen Klick
   dahinter. Darüber Reiter je Saison zum Zurückblättern.
   --------------------------------------------------------------------------- */

.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 18px;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 8px;
}
.reiter-blatt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
}
.reiter-blatt:hover { border-color: var(--gold-dunkel); }
.reiter-blatt.gewaehlt {
  background: var(--anthrazit);
  border-color: var(--anthrazit);
  color: #fff;
}
.reiter-zahl {
  font-size: 11px;
  opacity: .7;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,.08);
}
.reiter-blatt.gewaehlt .reiter-zahl { background: rgba(255,255,255,.18); }

.verlauf { max-width: 760px; }

/* Der Tagestrenner. Ohne ihn verliert man in einem langen Verlauf das Datum. */
.verlauf-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  color: var(--text-leise);
  font-size: 11px;
}
.verlauf-tag::before,
.verlauf-tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

.blase {
  max-width: 78%;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
}
.blase.von-ihnen { margin-right: auto; border-bottom-left-radius: 3px; }
.blase.von-uns {
  margin-left: auto;
  border-bottom-right-radius: 3px;
  background: #f0ede6;
}
/* Ungelesenes bekommt eine Kante, keine Farbe – Farbe ist im Verlauf schon
   für die Richtung vergeben. */
.blase.ungelesen { border-left: 3px solid var(--gold-dunkel); }

.blase-kopf {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-leise);
}
.blase-wer { font-weight: 600; color: var(--text); }
.blase-betreff { font-size: 12px; font-weight: 600; margin: 3px 0 2px; }
.blase-text { font-size: 12px; line-height: 1.5; }
.blase-fuss {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
}

.mailtext {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 560px) {
  .blase { max-width: 92%; }
}

/* Orga-Team. Eine eigene Farbe, weil es weder Stand noch Warnung ist, sondern
   eine Eigenschaft der Person: „mit der planen wir zusammen". */
.marke-chip.orga {
  background: var(--anthrazit);
  color: #fff;
  border-color: var(--anthrazit);
}
.marke-chip.orga-alt {
  background: transparent;
  color: var(--text-leise);
  border: 1px dashed var(--linie);
}

/* Dubletten-Entscheidung. Jede Gruppe ist eine eigene Karte mit eigenem
   Formular – so entscheidet man eine nach der anderen und verliert nichts,
   wenn man mittendrin aufhört. */
.dublette { margin-bottom: 18px; }
.dublette-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.dublette-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.dublette-fuss input[type=text] { flex: 1; min-width: 200px; }

/* ---------------------------------------------------------------------------
   Umfrage. Sie wird auf dem Telefon ausgefüllt, oft zwischen zwei Terminen –
   große Klickflächen, wenig Text, keine Scrollerei nach rechts.
   --------------------------------------------------------------------------- */
.frage { margin-bottom: 12px; }
.frage-text { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.frage-hinweis { font-size: 11px; color: var(--text-leise); margin-bottom: 8px; line-height: 1.5; }
.pflicht { color: var(--gold-dunkel); }

/* Das ganze Label ist anklickbar, nicht nur das Kästchen – auf dem Telefon
   trifft man sonst daneben. */
.wahl {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 8px;
  border: 1px solid var(--linie);
  border-radius: 6px;
  margin-bottom: 5px;
  font-size: 13px;
  cursor: pointer;
}
.wahl:hover { border-color: var(--gold-dunkel); }
.wahl input { margin-top: 2px; flex: 0 0 auto; }

.skala { display: flex; align-items: center; gap: 12px; }
.skala input[type=range] { flex: 1; }
.skala-wert {
  min-width: 56px;
  text-align: right;
  font-weight: 600;
  font-size: 15px;
}
.skala-enden {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-leise);
  margin-top: 2px;
}
.frage textarea { width: 100%; box-sizing: border-box; font-size: 13px; }

/* Auswertung. Balken statt Zahlenkolonne – man sieht in einer Sekunde, was
   oben steht, ohne zu vergleichen. */
.balkenzeile {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr 36px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin-bottom: 5px;
}
.balken-text { color: var(--text); }
.balken {
  display: block;
  height: 14px;
  background: var(--grund);
  border-radius: 3px;
  overflow: hidden;
}
.balken-fuell { display: block; height: 100%; background: var(--gold-dunkel); }
.balken-zahl { text-align: right; font-weight: 600; }

.freitext {
  border-left: 3px solid var(--linie);
  padding: 4px 0 4px 10px;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.55;
}
.freitext-wer { font-weight: 600; font-size: 11px; color: var(--text-leise); }

@media (max-width: 560px) {
  .balkenzeile { grid-template-columns: 1fr 34px; }
  .balkenzeile .balken { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Postfach. Briefe als Karten statt Tabellenzeilen: In einer Zeile steht der
   Betreff, aber nicht, worum es geht - und genau das will man beim Durchsehen
   wissen, ohne jede Mail einzeln zu öffnen.
   --------------------------------------------------------------------------- */
.postfach { max-width: 860px; }
.brief {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.brief.ungelesen { border-left-color: var(--gold-dunkel); }
.brief.erledigt { opacity: .58; }
.brief-kopf {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-leise);
}
.brief-wer { font-weight: 600; color: var(--text); }
.pfeil { color: var(--text-leise); }
.brief-betreff { font-size: 13px; font-weight: 600; margin: 3px 0 2px; }
.brief-betreff a { color: var(--text); text-decoration: none; }
.brief-betreff a:hover { color: var(--gold-dunkel); }
.brief-text { font-size: 12px; color: var(--text-leise); line-height: 1.5; }
.brief-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
}
.brief-knoepfe { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.inline-form { display: inline; }
.wahl-klein { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }

@media (max-width: 560px) {
  .brief-knoepfe { margin-left: 0; width: 100%; margin-top: 6px; }
}

/* Der neue Stand „nicht erreicht". Eigene Farbe, weil er etwas anderes bedeutet
   als „angeschrieben": Dort wartet man, hier muss man nochmal ran. */
.stand-nicht_erreicht { border-left-color: #8a6f3f; }
.zahl.stand-nicht_erreicht .wert { color: #8a6f3f; }
.marke-chip.nicht_erreicht { background: #f3ece0; border-color: #d9c9a8; }

/* Abschnittstrenner in der Arbeitsliste. Er sagt nicht nur, wo man ist,
   sondern auch, wo man aufhören darf. */
tr.abschnitt td {
  background: var(--grund);
  font-weight: 600;
  font-size: 12px;
  padding: 9px 10px 7px;
  border-top: 2px solid var(--gold-dunkel);
  color: var(--text);
}
tr.abschnitt td .leise-text { float: right; font-weight: 400; }

/* Ansprechpartner-Pflege in der Kundenakte
   Eine Zeile je Person, direkt beschreibbar. Die Felder sind schmal und
   randlos, damit die Tabelle noch wie eine Tabelle aussieht und nicht wie
   ein Formular mit acht Kästen nebeneinander. */
.kontaktpflege input[type="text"],
.kontaktpflege input[type="email"],
.kontaktpflege input:not([type]) {
  border: 1px solid transparent;
  background: transparent;
  padding: 3px 4px;
  border-radius: 4px;
  font: inherit;
  max-width: 100%;
}
.kontaktpflege input:not([type="checkbox"]):hover { border-color: var(--rand, #d8d8d8); }
.kontaktpflege input:not([type="checkbox"]):focus {
  border-color: var(--akzent, #b8860b);
  background: #fff;
  outline: none;
}
.kontaktpflege td { vertical-align: top; }
.kontaktpflege .wahl-klein { display: inline-block; margin: 0 8px 2px 0; white-space: nowrap; }
.kontaktpflege .zeilenformular { display: none; }   /* nur Träger der id */
.kontaktpflege tr.ausgeschieden { opacity: .55; }
.kontaktpflege tr.neue-zeile { background: var(--flaeche-leise, #faf8f4); }
.nowrap { white-space: nowrap; }

/* Verdachtsfall statt Beleg: gedämpft und mit Fragezeichen-Rand, damit man
   beim Durchgehen sieht, dass hier nachgesehen werden muss. */
.karte.dublette.verdacht { border-left: 3px solid var(--warnung, #c8a24a); }
.abschnitt-titel { margin-top: 32px; }

/* Anruf festhalten - das Formular in der Listenzeile
   Aufgeklappt wird nur eine Zeile, der Rest der Liste bleibt schmal. */
details.anruf { margin-top: 4px; }
details.anruf > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--akzent, #8a6d1f);
  list-style: none;
  user-select: none;
}
details.anruf > summary::-webkit-details-marker { display: none; }
details.anruf > summary:hover { text-decoration: underline; }
details.anruf[open] > summary { font-weight: 600; }
.anruf-formular {
  display: grid;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 8px;
  border: 1px solid var(--rand, #e0dcd4);
  border-radius: 6px;
  background: var(--flaeche-leise, #faf8f4);
  min-width: 240px;
}
.anruf-formular label { display: block; font-size: 12px; color: var(--leise, #6b6b6b); }
.anruf-formular textarea,
.anruf-formular input,
.anruf-formular select {
  display: block; width: 100%; margin-top: 2px; font: inherit;
  padding: 4px 6px; border: 1px solid var(--rand, #d8d8d8); border-radius: 4px;
}
.anruf-formular input[type="number"] { width: 5.5em; display: inline-block; }
.anruf-formular button { justify-self: start; }
.notizverlauf {
  white-space: pre-wrap; font: inherit; font-size: 12px;
  margin: 4px 0 0; color: var(--leise, #6b6b6b);
}

/* Auf breiten Schirmen bekommt die Rueckmeldungsspalte Platz.
   Dort stehen seit dem 17.09.2026 die Anrufnotizen - in 132 Pixeln liest die
   niemand. Erst ab 1400px, damit schmale Schirme nicht ins Scrollen kommen. */
@media (min-width: 1400px) {
  td[data-spalte="Rückmeldung"] { min-width: 280px; }
  td[data-spalte="Anschrift"]   { min-width: 200px; }
}

/* --- Die zimmerweise Anmeldung -------------------------------------------
   Seit dem 10.10.2026 ist das Zimmer die Einheit und nicht die Person. Jedes
   Zimmer ist ein eigener Kasten, damit man beim Durchsehen sofort erkennt,
   wer mit wem in einem Raum liegt. Die Preise stehen an jeder Auswahl, die
   Summe rechnet unten mit. */

.zimmer {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 14px 4px;
  margin-bottom: 10px;
}

.zimmer-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.zimmer-titel {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.zimmer-weg {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: var(--text-leise);
  cursor: pointer;
  text-decoration: underline;
}
.zimmer-weg:hover { color: var(--gold-dunkel); background: none; }

/* Zwei Personen in einem Zimmer brauchen eine sichtbare Trennung, sonst
   verschwimmen vier Namensfelder zu einem Block. */
.zimmer-person + .zimmer-person {
  border-top: 1px dashed var(--linie);
  padding-top: 10px;
  margin-top: 4px;
}

.feldpaar { display: flex; gap: 9px; }
.feldpaar > .gast-feld { flex: 1; min-width: 0; }

/* Der Preis steht direkt an der Auswahl, nicht in einer Fußnote. */
.zimmer-preis {
  float: right;
  font-size: 12.5px;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.zimmer-dazu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.zimmer-knopf {
  flex: 1 1 190px;
  text-align: left;
  background: var(--flaeche, #fafafa);
  border: 1px solid var(--linie);
  border-radius: 9px;
  padding: 10px 13px;
  cursor: pointer;
  font: inherit;
}
.zimmer-knopf:hover { border-color: var(--gold); background: #f5f5f3; }
.zimmer-knopf-name { display: block; font-size: 13.5px; color: var(--text); }
.zimmer-knopf-preis {
  display: block;
  font-size: 12px;
  color: var(--text-leise);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.summe-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.summe-tabelle td { padding: 4px 0; vertical-align: top; }
.summe-tabelle .rechts { text-align: right; white-space: nowrap;
                         font-variant-numeric: tabular-nums; }
.summe-tabelle tbody td { color: var(--text-leise); }
.summe-tabelle tbody tr.dick td { color: var(--text); font-weight: 600; }
.summe-tabelle tfoot td { border-top: 1px solid var(--linie); padding-top: 8px; }
.summe-tabelle tfoot tr.leise td { border-top: 0; padding-top: 2px;
                                   color: var(--text-leise); font-size: 12.5px; }
.summe-tabelle tfoot tr.dick td { font-weight: 700; font-size: 15px; }

@media (max-width: 560px) {
  .feldpaar { flex-direction: column; gap: 0; }
  .zimmer-knopf { flex: 1 1 100%; }
}

/* --- Auf dem Handy eine Seite statt verschachtelter Kästen ---------------
   Benny am 10.10.2026 auf dem iPhone: „Rechts und links haben noch schwarze
   Balken, das wirkt wie ein Pop-up. Drumherum ein schwarzer Balken, dann die
   weiße Fläche, und dann trägt man in einem grauen Rahmen die ganzen Sachen
   ein, und die sind viel zu schmal."

   Gemessen: Hülle 20, Karte 38, Block 14, Zimmer 14 Pixel Polster je Seite.
   Zusammen 172 von 390 Bildschirmpunkten, also 44 Prozent nur Rand. Deshalb
   fallen auf schmalen Geräten die beiden äußeren Rahmen weg: Die Karte liegt
   randlos auf dem Bildschirm, die Blöcke gliedern über ihre Überschrift statt
   über einen eigenen Kasten. Der Rahmen um ein Zimmer bleibt, der trägt eine
   Bedeutung - er fasst zusammen, wer in einem Raum schläft. */
@media (max-width: 560px) {
  .gast-huelle { padding: 0 0 36px; }

  .gast-karte, .gast-karte.gast-breit {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 22px 16px 24px;
    max-width: none;
  }

  .gast-block {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 22px;
  }
  /* Kästen, die von ihrem Rahmen leben, behalten ihn auch auf dem Handy. */
  .gast-block.industrie-hinweis {
    border-left: 3px solid var(--gold);
    padding: 16px 18px 18px;
  }

  /* Ohne Kasten braucht die Überschrift eine eigene Kante, sonst laufen die
     Abschnitte ineinander. */
  .gast-block-titel {
    border-bottom: 1px solid var(--linie);
    padding-bottom: 6px;
    margin-bottom: 10px;
  }

  .zimmer { padding: 11px 12px 3px; }
}

/* Die Summentabelle lief aus ihrem Kasten heraus: Die Bezeichnungen sind lang,
   und die Betragsspalte darf nicht umbrechen. Mit fester Tabellenbreite teilt
   sich der Platz berechenbar auf, und lange Wörter brechen um, statt die
   Tabelle aufzublähen. */
.summe-tabelle { table-layout: fixed; }
.summe-tabelle td:first-child { overflow-wrap: anywhere; }
.summe-tabelle .rechts { width: 7.5em; }

/* Der Mengenhinweis einer Zimmerzeile steht unter dem Titel, nicht dahinter.
   Dahinter schob er sich auf dem iPhone über den Betrag. */
.summe-tabelle .menge {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--text-leise);
  margin-top: 2px;
}

/* Dieselbe Absicherung wie auf der Website: Eine Regel mit Klassenselektor
   wiegt in CSS mehr als `[hidden]`. Auf der Galerie blieb dadurch ein Knopf
   sichtbar, den das Javascript längst ausgeblendet hatte (11.10.2026). Hier
   steuert `hidden` den Summenblock, das soll verlässlich bleiben. */
[hidden] { display: none !important; }

/* --- Das Kundenkonto ------------------------------------------------------
   Die Übersicht, die ein Betrieb von sich sieht. Bewusst dieselbe Optik wie
   die übrigen Gastseiten, damit der Wechsel aus der Anmeldung nicht wie ein
   anderes Programm wirkt. */
.konto-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.konto-kopf h1 { margin-bottom: 2px; }

.konto-abmelden {
  background: none;
  border: 0;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-leise);
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}
.konto-abmelden:hover { color: var(--gold-dunkel); background: none; }

/* Zwei Zahlen, die zeigen, dass die Historie bekannt ist. Mehr nicht, es ist
   kein Dashboard. */
.konto-zahlen { display: flex; gap: 32px; margin: 0 0 20px; }
.konto-zahlen b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.konto-zahlen span {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-leise);
  margin-top: 5px;
}

.konto-jahre { display: flex; flex-wrap: wrap; gap: 7px; }
.konto-jahr {
  display: inline-block;
  padding: 5px 11px;
  background: var(--flaeche, #f3f3f3);
  border-radius: 6px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .konto-kopf { flex-direction: column; gap: 6px; }
  .konto-zahlen { gap: 24px; }
}

/* --- Die Anmeldung in Schritten -------------------------------------------
   Bennys Ablauf vom 11.10.2026. Vier Abschnitte in einem Formular, sichtbar
   ist immer nur einer. */
.schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  counter-reset: schritt;
}
.schritte li {
  counter-increment: schritt;
  font-size: 12px;
  color: var(--text-leise);
  padding: 5px 11px 5px 8px;
  border-radius: 20px;
  background: var(--flaeche, #f3f3f3);
  white-space: nowrap;
}
.schritte li::before {
  content: counter(schritt);
  display: inline-block;
  width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  border-radius: 50%;
  background: var(--linie);
  color: var(--text-leise);
  font-size: 10.5px;
  margin-right: 6px;
}
.schritte li.jetzt { background: var(--gold); color: #fff; }
.schritte li.jetzt::before { background: rgba(255, 255, 255, 0.3); color: #fff; }
.schritte li.erledigt::before { background: var(--gold); color: #fff; content: "✓"; }

.schritt-weg,
.stufen-weg {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 6px;
}

/* Vorwärts und zurück, unabhängig davon, in welcher Leiste sie stehen.

   Vorher hingen beide an `.schritt-weg`. „Verwerfen" und „Übernehmen" stehen
   aber in `.stufen-weg` und erbten deshalb den dunklen Grundzustand aus dem
   Teambereich: schwarzer Knopf mit blauer Schrift. Benny am 12.10.2026: „Hin
   und wieder sehe ich doch nochmal Buttons, wo der Hintergrund schwarz ist
   und blaue Schrift drin. Lass uns dafür sorgen, dass das einheitlich ist."

   Die Klasse allein bestimmt jetzt das Aussehen. Ein neuer Knopf mit
   `class="weiter"` sieht überall gleich aus, egal wohin er gesetzt wird. */
.weiter {
  flex: 1;
  max-width: 230px;
  margin-left: auto;
  background: var(--gold);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.weiter:hover { background: var(--gold-dunkel); }

.zurueck {
  background: none;
  border: 0;
  padding: 11px 4px;
  font-size: 14px;
  color: var(--text-leise);
  cursor: pointer;
  text-decoration: underline;
}
.zurueck:hover { background: none; color: var(--gold-dunkel); }

/* Schritt 1: zwei große Flächen statt zweier Radioknöpfe. */
.wahl { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.wahl-knopf {
  /* Einer der beiden ist ein Link (zur Kontoanmeldung), der andere ein Knopf.
     Aussehen muss identisch sein, sonst wirkt einer wichtiger. */
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: left;
  background: var(--karte, #fff);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 15px 16px;
  cursor: pointer;
  font: inherit;
}
.wahl-knopf:hover { border-color: var(--gold); background: #f5f5f3; }

/* Der gewählte Zustand wird **ausdrücklich** gesetzt, Hintergrund und
   Schriftfarbe inbegriffen. Ohne das färbte Safari auf dem iPhone den
   angetippten Knopf dunkel ein, und die zweite Zeile war kaum noch zu lesen
   (Bennys Screenshot vom 12.10.2026).

   Gewählt heißt jetzt blau mit weißer Schrift, wie beim Knopf zum Abschluss.
   Vorher war es nur ein blauer Rahmen, und auf welchem der beiden man steht,
   musste man suchen. */
.wahl-knopf.gewaehlt {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: none;
  outline: none;
}
.wahl-knopf.gewaehlt:hover { background: var(--gold-dunkel); border-color: var(--gold-dunkel); }
.wahl-knopf:focus-visible {
  outline: 2px solid var(--gold-dunkel);
  outline-offset: 2px;
}
.wahl-knopf b { display: block; font-size: 15px; margin-bottom: 4px; color: var(--text); }
.wahl-knopf span { display: block; font-size: 13px; color: var(--text-leise); line-height: 1.45; }
.wahl-knopf.gewaehlt b { color: #fff; }
.wahl-knopf.gewaehlt span { color: rgba(255,255,255,.88); }

/* Der Hinweis für Aussteller ist ein eigener Kasten, kein Block mit einer
   Linie davor. Am Handy nimmt `.gast-block` allen Innenabstand weg, dadurch
   klebte der Text direkt an der Linie. Padding und Grund stehen deshalb hier
   und gelten auf jeder Breite. */
.industrie-hinweis {
  background: var(--flaeche, #f7f7f7);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px 18px;
  margin-top: 14px;
}
.industrie-hinweis p { font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; }
.industrie-hinweis .gast-block-titel { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }

/* Die Auswahl der Zimmerart steht über der Liste, nicht darunter. Erst die
   Frage, dann die Felder (Benny, 11.10.2026). */
#zimmerliste:not(:empty) { margin-top: 16px; }

/* Zwei Knöpfe, mehr steht hier nicht. Hinzufügen oder abschließen, und
   beide sagen in einer zweiten Zeile, was danach kommt. Benny am 12.10.2026:
   „Dass man einfach alles immer kurz sieht und danach eine richtige
   Entscheidung ist, wie man weitermachen möchte."

   Untereinander, nicht nebeneinander. Bei zwei Spalten muss man erst lesen,
   welcher links und welcher rechts steht. Untereinander gibt es ein Oben und
   ein Unten, und das liest sich auch auf dem Handy gleich. */
.entscheidung {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.entscheidung-knopf {
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  /* Nicht weiß. Der Kasten ringsum ist weiß, da ginge der Knopf unter.
     Benny am 12.10.2026: „Damit man auch sieht, dass es hier irgendwie
     weitergeht, wenn man sich danach wundert, wo man klicken muss." */
  background: var(--grund);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .12s, background .12s;
}
.entscheidung-knopf:hover { border-color: var(--gold); background: #f0f0ed; }
.entscheidung-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.entscheidung-titel { font-weight: 600; font-size: 16px; line-height: 1.3; }
.entscheidung-klein { font-size: 13.5px; line-height: 1.45; opacity: .7; }

/* Beide Zeichen gleich groß und gleich stark, sonst wirkt eines wichtiger
   als das andere. Sie schrumpfen nicht mit, wenn der Text umbricht. */
.entscheidung-zeichen {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entscheidung-haupt {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.entscheidung-haupt:hover { background: var(--gold-dunkel); border-color: var(--gold-dunkel); }
.entscheidung-haupt .entscheidung-klein { opacity: .85; }

/* Der Hinweis, wenn beim Absenden noch etwas fehlt. Steht unter der
   Schrittleiste, damit er beim Zurückspringen im Blick ist. */
.fehlhinweis {
  border-left: 3px solid var(--gold);
  margin-bottom: 14px;
}

/* Ein Link, der wie ein Knopf aussieht. Im Gastbereich gab es dafür bisher
   nichts, `.knopf` gehört zur Website und greift hier nicht. */
.gast-knopf-link {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: var(--radius);
  font-size: 15px;
}
.gast-knopf-link:hover { background: var(--gold-dunkel); }

/* Für Dinge, die im Dokument stehen, aber niemand sehen soll, etwa der
   Honigtopf im Anmeldeformular. `left:-9999px` wäre die alte Lösung, aber
   Safari auf dem iPhone macht daraus einen seitlich scrollbaren Bereich. */
.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sicherheitsnetz. Falls doch einmal etwas über den Rand ragt, soll daraus
   kein seitliches Wischen werden. */
html, body { overflow-x: hidden; }

/* Ein Knopf, der wie Fließtext aussieht. Für Nebenwege wie „doch nichts
   weiter, zur Übersicht". */
.nurtext {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text-leise);
  text-decoration: underline;
  cursor: pointer;
}
.nurtext:hover { color: var(--gold-dunkel); background: none; }

/* Ein Pflichtfeld, das beim Übernehmen noch leer war. Kurz hervorgehoben,
   damit klar ist, woran es hängt. */
input.fehlt {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(41, 168, 224, 0.18);
}

/* Gesperrtes „Weiter", solange nichts ausgewählt ist. */
.weiter:disabled {
  background: var(--linie);
  color: var(--text-leise);
  cursor: not-allowed;
}

/* Ein übernommenes Zimmer in der Übersicht. Die Felder bleiben im Formular,
   sichtbar ist nur noch eine Zeile. */
.zimmer.kompakt > *:not(.zimmer-kopf):not(.zimmer-zusammen) { display: none; }
.zimmer.kompakt { padding-bottom: 12px; }
.zimmer-zusammen { font-size: 14px; color: var(--text); line-height: 1.45; }
.zimmer-knoepfe { display: flex; gap: 14px; }
.zimmer:not(.kompakt) .zimmer-aendern { display: none; }

/* --- Stornierungsbedingungen und Zustimmungen ----------------------------
   Aufklappbar im Formular, damit niemand die Seite verlassen muss. */
.storno { margin: 0 0 16px; border: 1px solid var(--linie); border-radius: var(--radius); }
.storno summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--text);
  list-style: none;
}
.storno summary::-webkit-details-marker { display: none; }
.storno summary::before { content: "▸ "; color: var(--gold); }
.storno[open] summary::before { content: "▾ "; }
.storno[open] summary { border-bottom: 1px solid var(--linie); }
.storno-text { padding: 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-leise); }
.storno-text p { margin: 0 0 11px; }
.storno-text ul { list-style: none; margin: 0 0 11px; padding: 0; }
.storno-text li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--linie);
}
.storno-text li b { font-weight: 600; color: var(--text); }
.storno-text li span { white-space: nowrap; }

/* Zustimmungen sichtbar vom übrigen Formular abgesetzt. Wer hier klickt,
   geht eine Verpflichtung ein, das soll man merken. */
/* Ein Ankreuzfeld ist eine Zeile: Kästchen links, Text daneben. Ohne diese
   Regel ist ein `label` ein Inline-Element, und dann passieren zwei Dinge auf
   einmal, die Benny am 12.10.2026 beide gesehen hat: Die beiden Zustimmungen
   liefen in einen Textfluss („es ist beides in einem Text"), und der
   `border-top` eines Inline-Elements wurde mitten durch die Zeile gezeichnet
   („irgendwie ist da ein Strich durch"). `align-items` und `gap` standen schon
   da, nur die eine Zeile fehlte, die sie überhaupt wirken lässt. */
.gast-ankreuz {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.gast-ankreuz > input { flex: none; margin-top: 2px; }

.zustimmung {
  align-items: flex-start;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid var(--linie);
  font-size: 14px;
  line-height: 1.5;
}
.zustimmung input { margin-top: 3px; flex: none; }
/* Die zweite Zustimmung schließt den Block ab, damit die Haken als Paar
   stehen und nicht am nächsten Absatz kleben. */
.zustimmung + .zustimmung { border-bottom: 1px solid var(--linie); }

@media (max-width: 560px) {
  .storno-text li { flex-direction: column; gap: 2px; }
}

/* Ein Pflichtfeld, das beim Absenden fehlte. Bei Ankreuzfeldern hilft der
   Fokus allein wenig, deshalb wird die ganze Zeile kurz hervorgehoben. */
.fehlt-hervor {
  background: rgba(41, 168, 224, 0.1);
  box-shadow: 0 0 0 6px rgba(41, 168, 224, 0.1);
  border-radius: 4px;
}

/* Der Satz unter einem Feld, der erklärt, was damit passiert. Dicht am Feld,
   damit er dazugehört, und leise, damit er das Feld nicht überstimmt.

   `clear` ist nötig, weil die Preise daneben mit `float` stehen. Ohne das
   läuft ein Betrag in diesen Satz hinein, sobald die Zeile darüber umbricht. */
.zimmer-nebensatz {
  clear: both;
  margin: 2px 0 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-leise);
}
/* Nach einem Ankreuzfeld wird der Satz auf die Höhe des Textes eingerückt,
   damit er zum Haken gehört und nicht zum nächsten Feld. Nach einem
   Eingabefeld steht er am Rand, auf einer Linie mit dem Feld darüber. */
.zimmer-voranreise + .zimmer-nebensatz { margin-left: 26px; }

/* Die Voranreise betrifft das ganze Zimmer, nicht die Person darüber. Eine
   Linie trennt sie von den Namensfeldern.

   Der Preis steht hier nicht im Fluss, sondern am rechten Rand auf Höhe der
   ersten Zeile. Bei „für beide Personen" bricht die Beschriftung um, und ein
   gefloateter Betrag rutschte dann auf die zweite Zeile. */
.zimmer-voranreise {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.zimmer-voranreise > input { margin-top: 2px; }
.zimmer-voranreise > span {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.zimmer-voranreise .zimmer-preis { float: none; white-space: nowrap; }

/* Der eine Satz im Ausstellerhinweis, der eine Regel ist und keine Auskunft.
   Eigener Kasten statt Unterstreichung: Unterstrichener Text sieht im Browser
   nach einem Link aus, und dann klickt jemand darauf. */
.merksatz {
  margin: 14px 0 16px;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

/* Die Mahlzeiten einer Person. Eingeklappt, weil fast alle alles mitnehmen
   und acht Kästchen im Doppelzimmer niemandem helfen. Der Kopf sagt, ob
   darin etwas abgewählt ist, sonst müsste man ihn öffnen, um das zu sehen. */
.mahlzeiten {
  margin: 10px 0 4px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
}
.mahlzeiten > summary {
  cursor: pointer;
  padding: 11px 13px;
  font-size: 13.5px;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.mahlzeiten > summary::-webkit-details-marker { display: none; }
/* Ein richtiger Pfeil statt eines Textzeichens. Benny am 12.10.2026: „Damit
   klarer ist, dass man den Punkt aufklappen kann, da fehlt so ein Pfeil nach
   unten." Das kleine Dreieck war zu unscheinbar. */
.mahlzeiten-pfeil {
  flex: 0 0 auto;
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--gold);
  transition: transform .15s;
}
.mahlzeiten-pfeil svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mahlzeiten[open] .mahlzeiten-pfeil { transform: rotate(180deg); }
.mahlzeiten-kopf { flex: 1; min-width: 0; }
.mahlzeiten-klein {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-leise);
  font-weight: 400;
}
.mahlzeiten-geaendert {
  margin-left: auto;
  padding-left: 10px;
  font-size: 12px;
  color: var(--gold-dunkel);
  font-weight: 600;
}
.mahlzeiten-text {
  margin: 0 13px 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-leise);
}
.mahlzeiten-text:last-of-type { margin-bottom: 12px; }
.mahlzeit-zeile {
  padding: 7px 13px;
  font-size: 13.5px;
  border-top: 1px solid var(--linie);
}
.mahlzeit-zeile .zimmer-preis { float: none; margin-left: 8px; }

/* Ein Abzug in der Summe. Nicht rot, es ist kein Fehler. */
.minuszeile td { color: var(--text-leise); }

/* Der Weg zum Passwort-Zurücksetzen. Direkt unter dem Knopf, weil man ihn
   genau dann sucht, wenn die Anmeldung gerade nicht geklappt hat. */
.konto-vergessen-zeile {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13.5px;
}

/* Und der Weg zurück, wenn man feststellt, dass man gar kein Konto hat.
   Abgesetzt durch eine Linie, damit er nicht wie ein zweiter Anmeldeweg
   aussieht. */
.konto-anderer-weg {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
}
.konto-anderer-weg .gast-block-titel { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
.konto-anderer-weg .wahl-knopf { margin-top: 12px; }

/* Die Zimmerauswahl in zwei Reihen. Oben die beiden Zimmerarten, groß und
   nebeneinander, darunter die kleineren Wege. Benny am 12.10.2026:
   „Einzelzimmer plus Doppelzimmer zweispaltig oben nebeneinander." */
.zimmer-dazu-haupt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.zimmer-dazu-haupt .zimmer-knopf { flex: none; }
.zimmer-knopf-gross { padding: 14px 16px; }
.zimmer-knopf-gross .zimmer-knopf-name { font-size: 15px; font-weight: 600; }
.zimmer-dazu-klein { display: flex; flex-wrap: wrap; gap: 8px; }
.zimmer-dazu-klein .zimmer-knopf { flex: 1 1 190px; }

@media (max-width: 560px) {
  .zimmer-dazu-haupt { grid-template-columns: 1fr; }
}

/* Eine kleine Überschrift über einer Gruppe von Knöpfen. Benny am 12.10.2026:
   „Ob man beim Einzelzimmer und Doppelzimmer sowas rüberschreibt, Standardpaket,
   das wird die Leute auch gar nicht verwirren." */
.auswahl-ueberschrift {
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin: 4px 0 8px;
}

/* Der Weg für die kürzeren Aufenthalte. Über die volle Breite, damit Platz
   für die Erklärung ist, dafür flacher als die Pakete darüber. */
.zimmer-knopf-breit {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px 11px;
  text-align: left;
}
.zimmer-knopf-breit .zimmer-knopf-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
/* Der Erklärtext macht den Knopf zwangsläufig höher als einen ohne. Schmale
   Zeilen und wenig Innenabstand halten ihn trotzdem flacher als die Pakete
   darüber, die mit Preis und Namen zwei große Zeilen tragen. */
.zimmer-knopf-text {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-leise);
}
.kurz-auswahl {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
}
.kurz-auswahl .auswahl-ueberschrift { margin-top: 0; }
.kurz-auswahl .zimmer-knopf { background: #fff; }

/* Verpflegung, die dazugebucht wird. Offen statt eingeklappt: Was man aktiv
   auswählen soll, darf man nicht erst suchen müssen. */
.verpflegung-dazu {
  margin: 12px 0 4px;
  padding: 12px 13px 4px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
}
.verpflegung-dazu .gast-block-titel {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 6px;
}
.verpflegung-dazu .mahlzeiten-text { margin-left: 0; margin-right: 0; }
.verpflegung-dazu .mahlzeit-zeile:first-of-type { border-top: 1px solid var(--linie); }

/* Die Bestätigung direkt nach der Anmeldung. Sie steht über dem
   Passwort-Band, weil sie die Antwort auf „ist es angekommen?" ist - und
   diese Frage hat man, bevor man an ein Passwort denkt. Grün und nicht
   gold, damit die beiden Bänder nicht gleich aussehen. */
.konto-gebucht {
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--grund);
  border-left: 3px solid #2E9E5B;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.konto-gebucht .gast-block-titel {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 6px;
}

/* Das Band über dem Konto, solange kein Passwort gesetzt ist. Auffällig, aber
   keine Warnung: Es ist kein Fehler, sondern der nächste Schritt. */
.konto-passwort-band {
  margin-bottom: 20px;
  padding: 16px 18px;
  background: var(--grund);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.konto-passwort-band .gast-block-titel {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 6px;
}
.konto-passwort-band .gast-knopf-link { margin-top: 10px; }

/* Eine Zeile, die zur Akte führt. Benny am 12.10.2026 suchte die
   Kundenseite und fand sie nicht, obwohl der Firmenname schon darauf
   verlinkte: Links sind im Portal schwarz und nicht unterstrichen, in einer
   Tabelle sieht das aus wie gewöhnlicher Text. */
tr.zeile-klickbar { cursor: pointer; }
tr.zeile-klickbar:hover { background: var(--flaeche, #fafafa); }

/* Der Firmenname trägt jetzt die Akzentfarbe und wird beim Überfahren
   unterstrichen. Damit sieht man, dass dort etwas dahinter liegt. */
.firma-link {
  color: var(--gold-dunkel);
  font-weight: 600;
  text-decoration: none;
}
.firma-link:hover { text-decoration: underline; }

/* Das Logbuch einer Firma. Eine Zeile je Ereignis, aufklappbar. */
.logbuch { margin-bottom: 18px; }
.logbuch-eintrag {
  border: 1px solid var(--linie);
  border-bottom: 0;
  background: var(--karte);
}
.logbuch-eintrag:last-of-type { border-bottom: 1px solid var(--linie); }
.logbuch-eintrag:first-of-type { border-radius: var(--radius) var(--radius) 0 0; }
.logbuch-eintrag:last-of-type { border-radius: 0 0 var(--radius) var(--radius); }
.logbuch-eintrag > summary {
  cursor: pointer;
  padding: 9px 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  list-style: none;
}
.logbuch-eintrag > summary::-webkit-details-marker { display: none; }
.logbuch-eintrag > summary:hover { background: var(--flaeche, #fafafa); }
.logbuch-datum {
  flex: 0 0 auto;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.logbuch-titel { flex: 1; font-weight: 600; }
.logbuch-beleg {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--gold-dunkel);
  font-variant-numeric: tabular-nums;
}
.logbuch-wer { flex: 0 0 auto; font-size: 12px; color: var(--text-leise); }
.logbuch-inhalt {
  padding: 4px 12px 12px 12px;
  font-size: 13px;
  border-top: 1px solid var(--linie);
}
.logbuch-grund { font-style: italic; color: var(--text-leise); }
.logbuch-tabelle { width: 100%; border-collapse: collapse; margin: 6px 0; }
.logbuch-tabelle td { padding: 3px 0; vertical-align: top; }
.logbuch-tabelle td:first-child { width: 42%; font-weight: 600; }
.logbuch-nachtrag { margin-bottom: 22px; }
.logbuch-nachtrag > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-leise);
  padding: 4px 0;
}

/* Eine Blase im Gesprächsverlauf öffnet die Mail. */
.blase-klickbar { cursor: pointer; }
.blase-klickbar:hover { filter: brightness(0.97); }
.blase-klickbar:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Das Pop-up mit der ganzen Mail. `dialog` bringt den dunklen Hintergrund,
   Escape und die Fokusführung mit, das muss man nicht nachbauen. */
.mail-fenster {
  width: min(760px, 92vw);
  max-height: 86vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
.mail-fenster::backdrop { background: rgba(0, 0, 0, .45); }
#mail-inhalt {
  padding: 22px 24px 24px;
  max-height: 86vh;
  overflow-y: auto;
}
.mail-zu {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--text-leise);
  cursor: pointer;
  padding: 4px 8px;
}
.mail-zu:hover { background: none; color: var(--text); }
.mail-kopf h3 { margin: 0 30px 12px 0; font-size: 17px; }
.mail-kurzfassung {
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--flaeche, #fafafa);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px;
}
.mail-fenster .mailtext {
  margin-top: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.55;
}
.mail-fuss { margin: 16px 0 0; font-size: 12.5px; }

@media (max-width: 560px) {
  .mail-fenster { width: 96vw; }
  #mail-inhalt { padding: 18px 16px 20px; }
}

/* Die zugeklappten Gruppen unten in der Leiste. Etwas leiser als die oberen,
   damit der Blick zuerst auf dem landet, was gerade dran ist. Abgesetzt durch
   eine Linie, damit die Grenze sichtbar ist. */
.leiste details.gruppe-spaeter > summary {
  color: var(--text-leise);
  opacity: .75;
}
.leiste details.gruppe-spaeter:first-of-type {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.leiste details.gruppe-spaeter[open] > summary { opacity: 1; }

/* --- Merkmale an der Akquisezeile ----------------------------------------
   Bennys Wunsch vom 12.10.2026: neben den Ständen frei vergebbare Merkmale,
   nach denen sich filtern lässt. Sie stehen als Chips in der Zeile, eine
   Farbe je Bedeutung - mehr als drei wären eine Ampel zu viel. */

.merkmale { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }

.merkmal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 4px 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #efece5;
  color: var(--text-leise);
  white-space: nowrap;
}

.merkmal-chip.gut      { background: #e4efe5; color: var(--gut); }
.merkmal-chip.warnung  { background: #f6efe0; color: #8a6514; }
.merkmal-chip.schlecht { background: #f7e2dd; color: var(--warnung); }

/* Das Kreuz zum Wegnehmen. Als Knopf in einem eigenen Formular, damit es
   ohne JavaScript funktioniert - und unscheinbar, damit niemand im
   Vorbeiklicken ein Merkmal verliert. */
.merkmal-chip form { display: inline; margin: 0; }
.merkmal-chip button {
  all: unset;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 999px;
  opacity: .35;
  font-size: 13px;
  line-height: 1;
}
.merkmal-chip button:hover { opacity: 1; color: var(--warnung); }

/* Die Filterleiste über der Tabelle. Flacher als die Kacheln darüber: Die
   Stände sind die Hauptfrage, die Merkmale die Nebenfrage. */
.merkmal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 12px;
  font-size: 13px;
}
.merkmal-filter a {
  padding: 2px 10px;
  border: 1px solid var(--linie, #ddd8cc);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-leise);
}
.merkmal-filter a:hover { border-color: #b9b2a2; }
.merkmal-filter a.gewaehlt {
  background: #2f2f2d;
  border-color: #2f2f2d;
  color: #fff;
}
.merkmal-filter .zahl-klein { opacity: .55; }

details.merkmal-setzen > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-leise);
}
details.merkmal-setzen .merkmal-formular {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
details.merkmal-setzen select,
details.merkmal-setzen input[type=text] { font-size: 13px; }

/* Die Shirtgrößen über der Anmeldeliste. Eine Zeile Chips, keine eigene
   Kachelreihe: Die Größen sind eine Nebenauskunft, nicht die Hauptzahl. */
.shirt-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 14px;
  font-size: 13px;
}

/* Zwei Namen in einer Zeile sollen nicht wie zwei Zeilen wirken. */
table.anmeldeliste td > div + div { margin-top: 2px; }

/* Die drei Schritte des Anmeldeformulars bei der Industrie. Jedes Formular
   eine Zeile, damit beim Klicken klar ist, was gerade gesetzt wird. */
details.formular-schritte > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-leise);
}
details.formular-schritte .schritt {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linie);
}
details.formular-schritte .schritt label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-leise);
}
details.formular-schritte .schritt input[type=date] { font-size: 13px; }
details.formular-schritte .schritt input[type=file] { font-size: 11px; max-width: 190px; }

/* Die zwei Betten eines Doppelzimmers rücken zusammen und bekommen keine
   Linie dazwischen. Sonst läse sich die Anmeldeliste als zwei getrennte
   Anmeldungen, obwohl es eine ist.

   Die trennende Linie ist der untere Rand der oberen Zeile - deshalb wird sie
   dort abgeschaltet und nicht an der unteren. */
table.anmeldeliste tr.erstes-bett  > td { border-bottom: 0; padding-bottom: 1px; }
table.anmeldeliste tr.zweites-bett > td { padding-top: 1px; }

/* Die Anmerkung des Teams am Zimmer. Abgesetzt von dem, was der Kunde selbst
   geschrieben hat, damit man die beiden nicht verwechselt. */
.notiz-team {
  margin-top: 2px;
  padding-left: 7px;
  border-left: 2px solid var(--linie);
  color: var(--text);
}

/* Nur ein Plus, und unauffällig. Es soll zeigen, wo man klicken kann, ohne
   in jeder Zeile das Wort „Anmerkung" zu wiederholen. */
details.notiz-schreiben > summary {
  cursor: pointer;
  display: inline-block;
  width: 17px;
  height: 17px;
  line-height: 16px;
  text-align: center;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-leise);
  list-style: none;
  margin-top: 3px;
}
details.notiz-schreiben > summary::-webkit-details-marker { display: none; }
details.notiz-schreiben > summary:hover {
  border-color: var(--gold-dunkel);
  color: var(--gold-dunkel);
}
details.notiz-schreiben[open] > summary { color: var(--text); }
details.notiz-schreiben textarea {
  width: 100%;
  min-width: 190px;
  font-size: 12.5px;
  margin-top: 4px;
}
details.notiz-schreiben button { margin-top: 4px; }

/* Das Beleg-Fenster in der Anmeldeliste. Gleiche Bauart wie das Mail-Fenster
   im Verlauf, nur mit einem PDF darin statt HTML. */
.beleg-fenster {
  width: min(900px, 94vw);
  height: min(88vh, 1100px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  flex-direction: column;
}

/* `display` nur im geöffneten Zustand.
   Ein <dialog> ist von Haus aus unsichtbar, der Browser setzt dafür
   `display: none`, solange das Attribut `open` fehlt. Ein `display: flex` an
   der Grundregel wiegt schwerer und hebelt das aus - dann steht das Fenster
   offen am Seitenende, mit leerem PDF-Rahmen. Genau das ist passiert. */
.beleg-fenster[open] { display: flex; }
.beleg-fenster::backdrop { background: rgba(0, 0, 0, .45); }
.beleg-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linie);
  font-size: 13px;
}
.beleg-kopf a { font-size: 12px; color: var(--gold-dunkel); }
.beleg-zu {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--text-leise);
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
}
.beleg-zu:hover { background: none; color: var(--warnung); }
#beleg-rahmen { flex: 1; width: 100%; border: 0; }

/* Die Belegnummer in der Liste sieht aus wie ein Link, weil sie einer ist. */
.beleg-link { color: var(--gold-dunkel); text-decoration: none; }
.beleg-link:hover { text-decoration: underline; }

/* --- Steckbrief der Firma -------------------------------------------------
   Benny am 12.10.2026: „Dass das ein bisschen netter aufgebaut ist, wie so ein
   kleiner Steckbrief." Logo links, Daten rechts, jede Zeile mit ihrem Zeichen,
   damit man Telefon und Mail findet, ohne zu lesen. */

.steckbrief {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
}

.steckbrief-logo, .mitarbeiter-bild {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.steckbrief-logo { width: 84px; height: 84px; }

/* So hoch wie der Inhalt der Karte: Name, Kontaktzeile und „Bearbeiten"
   ergeben zusammen rund 70 Pixel.

   Am 13.10.2026 kurz auf 40 verkleinert – das war ein Missverständnis. Bennys
   „umso kleiner, umso unscheinbarer" galt den erzeugten Bildern auf der
   Team-Seite der Website, nicht der Kundenakte. Hier dürfen sie groß sein. */
.mitarbeiter-bild { width: 68px; height: 68px; border-radius: 50%; align-self: flex-start; }

.steckbrief-logo img, .mitarbeiter-bild img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Die Initialen, solange kein Bild da ist. Sie zeigen auch, wo das Logo
   später hinkommt - ein leerer Platz sähe nach einem Fehler aus. */
.initialen {
  font-weight: 700;
  color: #9b958a;
  letter-spacing: 0.04em;
}
.steckbrief-logo .initialen { font-size: 26px; }
.mitarbeiter-bild .initialen { font-size: 20px; }

.steckbrief-daten { flex: 1; min-width: 0; }
.steckbrief-daten h1 { margin: 0 0 2px; }

.steckbrief-zeilen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin-top: 10px;
  font-size: 13px;
}
.steckbrief-zeile { display: flex; align-items: center; gap: 7px; }
.steckbrief-zeile .zeichen,
.mitarbeiter-kontakt .zeichen {
  color: var(--text-leise);
  font-size: 13px;
  width: 15px;
  text-align: center;
}
.steckbrief-zeile a, .mitarbeiter-kontakt a { color: var(--gold-dunkel); text-decoration: none; }
.steckbrief-zeile a:hover, .mitarbeiter-kontakt a:hover { text-decoration: underline; }

/* --- Mitarbeiter --- */

.mitarbeiter-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.mitarbeiter {
  display: flex;
  gap: 12px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.mitarbeiter.ehemalig { opacity: .72; }
.mitarbeiter-daten { flex: 1; min-width: 0; }
.mitarbeiter-name { font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mitarbeiter-kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 20px;
  margin-top: 4px;
  font-size: 13px;
}
.mitarbeiter-kontakt > span { display: flex; align-items: center; gap: 6px; }

details.mitarbeiter-bearbeiten > summary,
details.mitarbeiter-neu > summary,
details.ehemalige > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-leise);
  margin-top: 6px;
}
details.ehemalige > summary { margin: 0 0 10px; }
details.mitarbeiter-bearbeiten[open] > summary { color: var(--text); }

.mitarbeiter-formular { margin-top: 8px; }
.mitarbeiter-formular .feldzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 8px;
}
.mitarbeiter-formular label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-leise);
}
.mitarbeiter-formular .haken {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 8px;
}

/* Das Facebook-Zeichen in den Kontaktzeilen. Ein gesetztes „f" im blauen
   Kreis statt einer Grafik: Es gibt kein zusätzliches Bild zu laden, und es
   skaliert mit der Schrift. */
.zeichen.fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: #1877f2;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

/* Bild größer ansehen. Der Knopf ist unsichtbar, man sieht nur das Bild –
   aber als Knopf ist er mit der Tastatur erreichbar, ein <div> wäre es nicht. */
button.bild-knopf {
  all: unset;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
button.bild-knopf img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Beim Überfahren schon eine größere Vorschau, ohne Klick.
   Benny am 13.10.2026: „Allein wenn man rüberhovert, dass sich das Bild auch
   schon groß öffnet."

   Reines CSS, kein JavaScript: Das Bild steckt schon in der Seite, es wird nur
   ein zweites Mal größer gezeigt. Erst nach einer kurzen Verzögerung, damit
   es beim Vorbeifahren über eine Liste nicht aufblitzt. */
.mitarbeiter-bild, .steckbrief-logo { position: relative; }

.bild-knopf::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) scale(.92);
  width: 220px;
  height: 220px;
  background-image: var(--vorschau);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity .12s ease .35s, transform .12s ease .35s;
}

.bild-knopf:hover::after,
.bild-knopf:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* In einer Tabelle würde die Vorschau unter der nächsten Zeile verschwinden. */
td .bild-knopf::after { z-index: 60; }

.bild-fenster {
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  max-width: 92vw;
  max-height: 90vh;
}
.bild-fenster[open] { display: block; }
.bild-fenster::backdrop { background: rgba(0, 0, 0, .55); }
#bild-gross {
  display: block;
  max-width: min(560px, 88vw);
  max-height: 76vh;
  margin: 0 auto;
}
.bild-name {
  padding: 10px 16px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-leise);
}
.bild-zu {
  position: absolute;
  top: 6px;
  right: 8px;
  background: rgba(255, 255, 255, .85);
  border: 0;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  color: var(--text-leise);
  font-size: 17px;
  line-height: 1;
  padding: 0;
}
.bild-zu:hover { background: #fff; color: var(--warnung); }

/* Der Stand bei der gewählten Veranstaltung, oben in der Kundenakte. */
.jahrgang-stand {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.stand-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stand-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 8px;
  font-size: 13px;
}
.stand-zimmer { margin: 10px 0 0; padding-left: 0; list-style: none; font-size: 13px; }
.stand-zimmer li { padding: 6px 0; border-top: 1px solid var(--linie); }
.stand-belege { margin-top: 10px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.warnton { color: var(--warnung); }
.gutton  { color: var(--gut); }

/* Die Zusammenfassung der Buchung in der Kundenakte. */
.zimmer-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zimmer-person {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  padding: 3px 0 3px 14px;
}
.stand-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-top: 10px;
  font-size: 13px;
}