/* =====================================================================
   Rubinchen — Grundlage für alle Oberflächen (v0.30.0, RB-068)
   rubinchen.de, cast.rubinchen.de und das Venue-Formular laden diese Datei zuerst.
   Regeln: Bauplan §9 (06.10.2026), Musterseite „Rubinchen Bausteine“ Fassung 5.
   - eine Textgröße für alles außer Überschriften (Rechner 13 px, Handy 16 px)
   - eine Bauhöhe für Knopf, Auswahl, Feld, Reiter (30 / 44 px), Klein-Knopf 24 / 36 px
   - Abstände 4–20 / 4–24 px, Rundung 8 · 12 · rund, Inter überall
   - Farbe folgt der Marke (html data-marke), hell/dunkel der Einstellung (html data-hell)
   Was nur eine Oberfläche braucht, steht in rubinchen.css, cast.css bzw. haus.css.
   ===================================================================== */

/* Inter vom eigenen Server (DSGVO). Alle drei Oberflächen liefern die Dateien über /?schrift=… aus. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/?schrift=400") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/?schrift=500") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/?schrift=700") format("woff2"); } /* 600 nutzt den 700er Schnitt */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/?schrift=700") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/?schrift=800") format("woff2"); }

/* ---------- Größen: Rechner ---------- */
:root {
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --schrift-text: 13px;
  --schrift-h1: 20px; --schrift-h2: 16px; --schrift-h3: 15px;
  --hoehe: 30px; --hoehe-klein: 24px;
  --polster-x: 12px; --polster-x-klein: 8px;
  --abstand-1: 4px; --abstand-2: 6px; --abstand-3: 10px; --abstand-4: 14px; --abstand-5: 20px;
  --rund-feld: 8px; --rund-karte: 12px; --rund-etikett: 999px;
  --haken: 16px;
}
/* ---------- Größen: Handy — die Breite entscheidet, nicht die Adresse. 16 px in Feldern, sonst zoomt das iPhone beim Antippen ---------- */
@media (max-width: 700px) {
  :root {
    --schrift-text: 16px;
    --schrift-h1: 22px; --schrift-h2: 19px; --schrift-h3: 17px;
    --hoehe: 44px; --hoehe-klein: 36px;
    --polster-x: 16px; --polster-x-klein: 12px;
    --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 24px;
    --haken: 22px;
  }
}

/* ---------- Farben ----------
   Ohne Angabe: Rubinchen-Rot, hell oder dunkel nach Gerät.
   data-marke="menue-revue": Magenta (Menue-Revue-Reiter, Cast, Venue-Formular).
   data-hell="hell" | "dunkel": feste Wahl; fehlt sie, folgt es dem Gerät. */
:root {
  --grund: #f7f5f5; --karte: #ffffff; --text: #1c1718; --leise: #5f5759; --linie: #e7e1e2; --flaeche: #efecec;
  --akzent: #d9304c; --akzent-tief: #b8243e; --akzent-hell: #fdeef1; --auf-akzent: #ffffff;
  --gruen: #1d6b3a; --gruen-hell: #e5f4ea; --gelb: #8a5d00; --gelb-hell: #fff6dd; --rot: #b42318; --rot-hell: #fdecea;
  --pfeil: #6b6264;
  --test-grund: #ffd60a; --test-schrift: #1a1400; /* Testumgebung: Warn-Gelb, hell und dunkel gleich (v0.34.1) */
  color-scheme: light;
}
:root[data-marke="menue-revue"] {
  --grund: #f9f5f7; --karte: #ffffff; --text: #1a1a1a; --leise: #555555; --linie: #e8e8e8; --flaeche: #f3eff1;
  --akzent: #e6007e; --akzent-tief: #c2006a; --akzent-hell: #fdf0f6; --auf-akzent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-hell="hell"]) {
    --grund: #141112; --karte: #1d191a; --text: #f2eced; --leise: #a89ea1; --linie: #332c2e; --flaeche: #2a2527;
    --gruen: #5cc98f; --gruen-hell: #16301f; --gelb: #e5b64a; --gelb-hell: #33290f; --rot: #ff5a4f; --rot-hell: #3a1a17;
    --akzent: #ff4d63; --akzent-tief: #ff7686; --akzent-hell: #3a1419; --auf-akzent: #1a0c0f;
    --pfeil: #a89ea1;
    color-scheme: dark;
  }
  :root[data-marke="menue-revue"]:not([data-hell="hell"]) { --akzent: #ff4fa8; --akzent-tief: #ff7dbd; --akzent-hell: #3a1229; --auf-akzent: #1a0c12; }
}
:root[data-hell="dunkel"] {
  --grund: #141112; --karte: #1d191a; --text: #f2eced; --leise: #a89ea1; --linie: #332c2e; --flaeche: #2a2527;
  --gruen: #5cc98f; --gruen-hell: #16301f; --gelb: #e5b64a; --gelb-hell: #33290f; --rot: #ff5a4f; --rot-hell: #3a1a17;
  --akzent: #ff4d63; --akzent-tief: #ff7686; --akzent-hell: #3a1419; --auf-akzent: #1a0c0f;
  --pfeil: #a89ea1;
  color-scheme: dark;
}
:root[data-marke="menue-revue"][data-hell="dunkel"] { --akzent: #ff4fa8; --akzent-tief: #ff7dbd; --akzent-hell: #3a1229; --auf-akzent: #1a0c12; }

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grund); color: var(--text);
  font: 400 var(--schrift-text)/1.55 var(--schrift);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--akzent-tief); }
p { margin: 0 0 var(--abstand-3); }
h1, h2, h3, h4 { margin: 0 0 var(--abstand-2); font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; color: var(--text); text-wrap: balance; }
h1 { font-size: var(--schrift-h1); }
h2 { font-size: var(--schrift-h2); }
h3 { font-size: var(--schrift-h3); }
h4 { font-size: var(--schrift-text); }
code, kbd, pre { font-family: var(--mono); font-size: var(--schrift-text); }
code { background: var(--flaeche); padding: 1px 4px; border-radius: 4px; }
sup { font-size: 0.7em; }
strong, b { font-weight: 700; }
.klein { font-size: var(--schrift-text); color: var(--leise); }
.ab-offen { color: var(--gelb); }   /* v0.32.0: dezenter Hinweis „noch nicht mitgeteilt“ */
.etikett { margin: 0 0 var(--abstand-1); font-size: var(--schrift-text); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--akzent-tief); }
.zahl, .z { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------- Karten ---------- */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-karte); padding: var(--abstand-4); min-width: 0; }
.karte > :last-child { margin-bottom: 0; }
.karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2) var(--abstand-3); margin-bottom: var(--abstand-3); }
.karte-kopf > * { min-width: 0; overflow-wrap: anywhere; }
.karte-kopf h1, .karte-kopf h2, .karte-kopf h3 { margin: 0; }

/* ---------- Meldungen ---------- */
.meldung { margin: 0 0 var(--abstand-3); padding: var(--abstand-2) var(--abstand-3); border-radius: var(--rund-feld); }
.meldung.ok { background: var(--gruen-hell); color: var(--gruen); }
.meldung.warnung { background: var(--gelb-hell); color: var(--gelb); }
.meldung.fehler { background: var(--rot-hell); color: var(--rot); }

/* Testumgebung (v0.34.1, Dave 13.10.2026): Schild im Kopf jeder Oberfläche plus gelbe Kante oben —
   test.rubinchen.de soll auf den ersten Blick von live zu unterscheiden sein. Gesetzt über Ansicht::testSchild() */
.kopf.ist-test { border-top: 4px solid var(--test-grund); }
.test-schild {
  display: inline-flex; align-items: center; vertical-align: middle; margin-left: var(--abstand-2);
  padding: 2px var(--abstand-2); border-radius: var(--rund-feld);
  background: var(--test-schrift); color: var(--test-grund); box-shadow: 0 0 0 1px var(--test-grund);
  font-size: var(--schrift-text); font-weight: 800; letter-spacing: 0.04em; line-height: 1.4; white-space: nowrap;
}
.hinweis { background: var(--akzent-hell); padding: var(--abstand-2) var(--abstand-3); border-radius: var(--rund-feld); }
.wichtig { background: var(--gelb-hell); color: var(--text); border-left: 4px solid var(--gelb); padding: var(--abstand-2) var(--abstand-3); border-radius: var(--rund-feld); }

/* ---------- Felder: eine Höhe mit den Knöpfen ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]), select, textarea {
  font: 400 var(--schrift-text)/1.2 var(--schrift);
  height: var(--hoehe); padding: 0 var(--polster-x-klein);
  border: 1px solid var(--linie); border-radius: var(--rund-feld);
  background-color: var(--karte); color: var(--text);
  width: 100%; min-width: 0; max-width: 100%; margin: 0;
}
textarea { height: auto; min-height: calc(var(--hoehe) * 2); padding: var(--abstand-2) var(--polster-x-klein); line-height: 1.45; resize: vertical; }
select[multiple] { height: auto; padding: var(--abstand-1); }
input[type=number], input[inputmode=numeric], input[inputmode=decimal] { font-variant-numeric: tabular-nums; }
/* Safari zeichnet ein <select> sonst nativ und übergeht Höhe und Polster (v0.23.2) — eigener Pfeil */
select:not([multiple]) {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--pfeil) 50%), linear-gradient(135deg, var(--pfeil) 50%, transparent 50%);
  background-position: right calc(var(--polster-x-klein) + 5px) center, right var(--polster-x-klein) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: calc(var(--polster-x-klein) + 18px);
}
input[type=file] { font: inherit; width: 100%; max-width: 100%; min-width: 0; }
input[type=checkbox], input[type=radio] { width: var(--haken); height: var(--haken); margin: 0; accent-color: var(--akzent); flex: none; vertical-align: middle; }
::placeholder { color: var(--leise); opacity: 0.8; }

/* Beschriftung über dem Feld: gleiche Größe wie alles, nur fett. Ein Hinweis darunter bleibt grau. */
label:has(> input:not([type=checkbox]):not([type=radio]):not([type=hidden]), > select, > textarea),
.feld-gruppe {
  display: grid; gap: var(--abstand-1); align-content: start; min-width: 0;
  font-size: var(--schrift-text); font-weight: 600; color: var(--text);
}
label > .klein, .feld-gruppe > .klein { font-weight: 400; line-height: 1.4; }
/* Häkchen und Auswahlpunkte: Kästchen links, Text daneben */
label:has(> input[type=checkbox]), label:has(> input[type=radio]), .haken {
  display: flex; align-items: center; gap: var(--abstand-2);
  min-height: var(--hoehe-klein); font-size: var(--schrift-text); font-weight: 400; color: var(--text); cursor: pointer; margin: 0;
}
/* Lange Häkchen-Texte: Kästchen an der ersten Zeile, nicht in der Mitte */
label:has(> input[type=checkbox]), label:has(> input[type=radio]), .haken { align-items: flex-start; padding: calc((var(--hoehe-klein) - 1.55em) / 2) 0; }
label:has(> input[type=checkbox]) > input, label:has(> input[type=radio]) > input, .haken > input { margin-top: calc((1.55em - var(--haken)) / 2); }
fieldset { border: 0; margin: var(--abstand-1) 0 0; padding: 0; min-width: 0; }
legend { font-size: var(--schrift-text); font-weight: 600; padding: 0; margin-bottom: var(--abstand-1); }

.formular { display: grid; gap: var(--abstand-3); }
.formular > button, .formular > .knopf-reihe { justify-self: start; }

/* ---------- Knöpfe ----------
   Alle mit 1 px Rand, damit gefüllte und umrandete exakt gleich hoch sind. Kein Abstand oben.
   Gefüllt nur die Hauptsache; .leise und .zweit umrandet; .gefahr (Löschen, Absagen) grau mit rotem Zeichen. */
button, .knopf {
  font: 600 var(--schrift-text)/1 var(--schrift);
  height: var(--hoehe); padding: 0 var(--polster-x); margin: 0;
  border: 1px solid var(--akzent); border-radius: var(--rund-feld);
  background: var(--akzent); color: var(--auf-akzent);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2);
  cursor: pointer; white-space: nowrap; text-decoration: none; vertical-align: middle; max-width: 100%;
}
button.zweit, .knopf.zweit { background: transparent; color: var(--akzent-tief); }
button.leise, .knopf.leise { background: transparent; color: var(--akzent-tief); border-color: var(--linie); }
button.gefahr, .knopf.gefahr { background: transparent; color: var(--text); border-color: var(--linie); }
button.gefahr::before, .knopf.gefahr::before {
  content: ""; width: 1.05em; height: 1.05em; flex: none; background: var(--rot);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
button.gefahr.absagen::before, .knopf.gefahr.absagen::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E");
}
button.klein, .knopf.klein, button.klein-knopf { height: var(--hoehe-klein); padding: 0 var(--polster-x-klein); }
button.breit, .knopf.breit { width: 100%; }
button[disabled], .knopf[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* Hover nur, wo es eine Maus gibt — am Handy bliebe ein angetippter Knopf sonst eingefärbt */
@media (hover: hover) {
  button:hover, .knopf:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }
  button.zweit:hover, .knopf.zweit:hover { background: var(--akzent-hell); border-color: var(--akzent); }
  button.leise:hover, .knopf.leise:hover { background: var(--akzent-hell); border-color: var(--linie); }
  button.gefahr:hover, .knopf.gefahr:hover { background: var(--rot-hell); border-color: var(--rot); color: var(--rot); }
  button[disabled]:hover { background: var(--akzent); border-color: var(--akzent); }
  button.leise[disabled]:hover, button.zweit[disabled]:hover, button.gefahr[disabled]:hover { background: transparent; border-color: var(--linie); }
}

/* Knopfreihe: nebeneinander, umbrechen erlaubt */
.knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin: var(--abstand-2) 0; }
.knopf-reihe form { margin: 0; }
/* Handy: Reihen nur aus Knöpfen werden ein gleich breites Raster — kein Flatterrand beim Umbrechen. Ein gefüllter Hauptknopf vorn läuft über die ganze Breite. */
@media (max-width: 700px) {
  .knopf-reihe:has(> button, > .knopf, > form > button):not(:has(> :not(button, .knopf, form, input[type=hidden]))) {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  }
  .knopf-reihe > button, .knopf-reihe > .knopf, .knopf-reihe > form > button { width: 100%; }
  /* Längere Beschriftungen brechen im Raster um, statt über den Nachbarknopf zu laufen (v0.36.0) */
  .knopf-reihe > :is(button, .knopf), .knopf-reihe > form > button { white-space: normal; height: auto; min-height: var(--hoehe); padding-top: 4px; padding-bottom: 4px; line-height: 1.2; text-align: center; }
  .knopf-reihe > form { display: grid; }
  .knopf-reihe > form:has(select, input:not([type=hidden])) { grid-column: 1 / -1; }
  .knopf-reihe > form .cast-rolle-wahl { display: flex; width: 100%; }
  .knopf-reihe > :is(button, .knopf):not(.leise):not(.zweit):not(.gefahr):not([disabled]):first-child,
  .knopf-reihe > form:first-child:has(> button:not(.leise):not(.zweit):not(.gefahr):not([disabled])) { grid-column: 1 / -1; }
}

/* Feld und Knopf in einer Zeile: unten bündig — die Beschriftung steht über dem Feld, der Knopf auf Feldhöhe */
.feld-knopf, .pb-suche, .pb-zeile, .anhang-neu, .sh-wahl, .foto-hoch, .filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--abstand-2) var(--abstand-3); margin: var(--abstand-2) 0;
}
:is(.feld-knopf, .pb-suche, .pb-zeile, .anhang-neu, .sh-wahl) > :is(label, input:not([type=hidden]), .feld-gruppe) { flex: 1 1 200px; }
:is(.feld-knopf, .pb-suche, .pb-zeile, .anhang-neu, .sh-wahl, .foto-hoch, .filter) > :is(button, .knopf) { flex: none; }

/* ---------- Etiketten (Stand, Rolle, Antwort) — gleiche Größe wie der Text, nur fett ---------- */
.ampel, .antwort, .status, .cast-rolle, .cast-status, .inv-status, .pb-mat-art, .anhang-rest, .etikett-klein, .ab-art, .pb-tag {
  display: inline-flex; align-items: center; min-height: calc(var(--schrift-text) + 8px); padding: 0 9px;
  border-radius: var(--rund-etikett); font-size: var(--schrift-text); font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: var(--flaeche); color: var(--leise); vertical-align: middle;
}
.etikett-klein, .ab-art { letter-spacing: 0.04em; text-transform: uppercase; }
:is(.ampel.gruen, .antwort.ja, .cast-status.aktiv, .status.an, .pb-mat-art.choreo, .pb-tag.ok) { background: var(--gruen-hell); color: var(--gruen); }
:is(.ampel.gelb, .antwort.vielleicht, .cast-status.offen, .pb-mat-art, .ab-art.moderation, .inv-status.spuren, .inv-status.unterwegs, .pb-tag.warn) { background: var(--gelb-hell); color: var(--gelb); }
:is(.ampel.rot, .antwort.nein, .cast-status.gesperrt, .inv-status.beschaedigt, .inv-status.fehlt, .inv-status.unterwegs.ueber) { background: var(--rot-hell); color: var(--rot); }
:is(.cast-rolle, .etikett-klein, .ab-art.song, .anhang-rest) { background: var(--akzent-hell); color: var(--akzent-tief); }
:is(.ampel.grau, .antwort.offen, .antwort.leise, .status, .status.aus) { background: var(--flaeche); color: var(--leise); }

/* ---------- Aufklapper ---------- */
details > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--abstand-2);
  min-height: var(--hoehe-klein); font-weight: 600; color: var(--akzent-tief);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ""; flex: none; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s;
}
details[open] > summary::before { transform: rotate(90deg); }
details[open] > summary { margin-bottom: var(--abstand-2); }
@media (prefers-reduced-motion: reduce) { details > summary::before { transition: none; } }
details.karte > summary { font-weight: 700; }

/* ---------- Tabellen ---------- */
.tw, .tab-huelle { overflow-x: auto; min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--schrift-text); }
th { text-align: left; font-size: var(--schrift-text); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--leise);
  padding: 0 var(--abstand-2) var(--abstand-2); border-bottom: 1px solid var(--linie); white-space: nowrap; vertical-align: bottom; }
td { padding: var(--abstand-2); border-bottom: 1px solid var(--linie); vertical-align: top; }
td.zahl, td.z { font-variant-numeric: tabular-nums; white-space: nowrap; }
th.z { text-align: right; }
td.z { text-align: right; }
tfoot td { font-weight: 700; border-bottom: 0; }

/* ---------- Werte-Liste ---------- */
.werte { display: grid; grid-template-columns: max-content 1fr; gap: var(--abstand-1) var(--abstand-4); margin: 0 0 var(--abstand-3); }
.werte dt { color: var(--leise); }
.werte dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 420px) { .werte { grid-template-columns: 1fr; gap: 0; } .werte dd { margin-bottom: var(--abstand-2); } }

/* ---------- Unterreiter und Filter-Pillen ---------- */
.unterreiter, .inv-filter { display: flex; flex-wrap: wrap; gap: var(--abstand-1); }
.unterreiter a, .inv-filter a {
  display: inline-flex; align-items: center; height: var(--hoehe); padding: 0 var(--polster-x);
  border-radius: var(--rund-feld); border: 1px solid var(--linie); background: var(--karte);
  text-decoration: none; color: var(--leise); font-weight: 600; white-space: nowrap;
}
.inv-filter a { border-radius: var(--rund-etikett); }
.unterreiter a.an, .inv-filter a.an { background: var(--akzent-hell); color: var(--akzent-tief); border-color: var(--akzent-hell); }
@media (max-width: 700px) {
  .unterreiter, .inv-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(135px, 100%), 1fr)); }
  .inv-filter { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
  .unterreiter a, .inv-filter a { justify-content: center; padding: 0 var(--abstand-2); }
}
@media (hover: hover) { .unterreiter a:not(.an):hover, .inv-filter a:not(.an):hover { color: var(--text); border-color: var(--leise); } }

.schritte { padding-left: 20px; margin: 0 0 var(--abstand-3); }
.schritte li { margin-bottom: var(--abstand-2); }
.liste { padding-left: 18px; margin: 0 0 var(--abstand-3); }
.liste li { margin-bottom: var(--abstand-2); }
.geheimnis { font: 600 var(--schrift-h3)/1.5 var(--mono); letter-spacing: 0.04em; background: var(--flaeche); padding: var(--abstand-3); border-radius: var(--rund-feld); overflow-wrap: anywhere; }
form.inline { display: inline; margin: 0; }
form { margin: 0; }

/* =====================================================================
   Bausteine, die auf rubinchen.de und cast.rubinchen.de gleich vorkommen
   (Personen, Termine, Inventar, Fotos, Playbacks, Abläufe, Kostüme, Packliste, Song-Historie)
   ===================================================================== */

/* Personen */
.cast-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--abstand-3); }
.cast-person-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); margin-bottom: var(--abstand-2); }
.cast-person-kopf h3 { flex: 1 1 100%; margin: 0; }
.cast-loeschen { margin-top: var(--abstand-3); }
.cast-loeschen > summary { color: var(--leise); }
.cast-rolle-wahl { display: inline-flex; gap: var(--abstand-2); align-items: flex-end; max-width: 100%; }
.cast-rolle-wahl select { flex: 1 1 12em; width: auto; min-width: 0; }
.cast-gruppe { margin: var(--abstand-3) 0 2px; }
.cast-fest { margin: var(--abstand-2) 0 0; }
.cast-hinweis { margin: 0 2px; }

/* Termine, Verfügbarkeit, Besetzung */
.cast-termine { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--abstand-3); }
.cast-termin h3 { margin: 0; }
.cast-termin-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); }
.cast-termin-ort { margin: 2px 0 var(--abstand-2); }
.cast-termin.ich { border-left: 4px solid var(--akzent); }
.cast-termin.abgesagt { opacity: 0.7; }
.cast-termin.abgesagt h3 { text-decoration: line-through; }
.cast-eingeteilt, .cast-vorgemerkt { font-weight: 700; padding: var(--abstand-2) var(--abstand-3); border-radius: var(--rund-feld); }
.cast-eingeteilt { background: var(--akzent-hell); color: var(--akzent-tief); }
.cast-vorgemerkt { background: var(--gelb-hell); color: var(--gelb); }
.cast-zaehler { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.cast-wahlen { display: grid; gap: 0; margin: var(--abstand-2) 0; }
.cast-wahl { display: flex; align-items: center; gap: var(--abstand-3); min-height: calc(var(--hoehe-klein) + 10px); padding: 0 2px; border-bottom: 1px solid var(--linie); cursor: pointer; }
.cast-wahl-name { flex: 1; }
.cast-weitere { display: grid; grid-template-columns: 1fr 2fr; gap: var(--abstand-2) var(--abstand-3); margin: var(--abstand-2) 0; }
@media (max-width: 700px) { .cast-weitere { grid-template-columns: 1fr; } }
.cast-mitteilen { border: 2px solid var(--akzent); }
.cast-termin-kopf .cast-status { margin-left: var(--abstand-2); }
/* Gebucht / Vorgemerkt je Termin mit Buchen und Lösen (v0.29.0) — Klein-Knöpfe, gleich breit */
.cast-leute { list-style: none; padding: 0; margin: var(--abstand-1) 0 var(--abstand-3); }
.cast-leute li { display: flex; align-items: center; gap: var(--abstand-2); min-height: calc(var(--hoehe-klein) + 12px); border-bottom: 1px solid var(--linie); }
.cast-leute li > span { flex: 1; min-width: 0; }
.cast-leute li > form { display: flex; margin: 0; }
.cast-person-knopf button { height: var(--hoehe-klein); padding: 0 var(--polster-x-klein); min-width: 5.5em; }

/* Profil- und Formularraster */
.profil-felder, .inv-felder, .fest-felder, .pb-felder, .kontakt-form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--abstand-3); margin-top: var(--abstand-2);
}
.fest-felder, .pb-felder { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.inv-felder fieldset, .inv-felder > label:has(textarea), .inv-felder > .haken, .fest-felder .breit, .pb-felder .breit,
.kontakt-form .knopf-reihe, .kontakt-form > .haken { grid-column: 1 / -1; }
.pb-felder label.haken { grid-column: span 2; align-self: end; min-height: var(--hoehe); font-weight: 600; }
.inv-felder fieldset > label:not(.haken) { max-width: 320px; margin-top: var(--abstand-2); }
details.fest-neu { margin-top: var(--abstand-3); }
.fest-bearbeiten[open] { min-width: min(320px, 100%); }
.cast-profil { margin-top: var(--abstand-2); }
.wahl-reihe { display: flex; flex-wrap: wrap; gap: 0 var(--abstand-4); }

/* Inventar */
.inv-liste { list-style: none; margin: 0; padding: 0; }
.inv-eintrag { padding: var(--abstand-3) 0; border-bottom: 1px solid var(--linie); }
.inv-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-3); }
.inv-name { font-weight: 700; }
.inv-anzahl { font-weight: 700; color: var(--akzent-tief); }
.inv-nr, .inv-kiste { font: 600 var(--schrift-text)/1.6 var(--mono); padding: 0 6px; border-radius: 5px; white-space: nowrap; }
.inv-nr { background: var(--flaeche); color: var(--text); }
.inv-nr.eigen { font-family: inherit; color: var(--leise); }
.inv-kiste { border: 1px solid var(--linie); color: var(--leise); }
.inv-groesse { color: var(--leise); }
.inv-vorschau { float: right; display: flex; gap: var(--abstand-1); margin-left: var(--abstand-3); }
.inv-vorschau img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linie); }
.inv-eintrag::after, .outfit::after { content: ""; display: block; clear: both; }
.inv-eintrag.aus .inv-name, .inv-eintrag.aus .inv-nr { opacity: 0.6; text-decoration: line-through; }
.inv-filter { margin: 0 0 var(--abstand-3); }
.inv-achtung { border-left: 4px solid var(--rot); margin-bottom: var(--abstand-3); }
.inv-pflege-teil { margin: var(--abstand-2) 0; }
.inv-bearbeiten h4 { margin: var(--abstand-3) 0 var(--abstand-1); }
.inv-verlauf { list-style: none; margin: var(--abstand-2) 0; padding: 0; }
.inv-verlauf li { padding: var(--abstand-1) 0; border-bottom: 1px solid var(--linie); }
.kisten-ort { font-size: var(--schrift-h3); margin: var(--abstand-5) 0 var(--abstand-2); }
.kiste h3 { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; margin: 0; }
.outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--abstand-3); margin-top: var(--abstand-3); }
.outfit h3 { margin: 0; }
.outfit-teile { list-style: none; padding: 0; margin: var(--abstand-2) 0 var(--abstand-3); }
.outfit-teile li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); min-height: calc(var(--hoehe-klein) + 10px); border-bottom: 1px solid var(--linie); }
.outfit-teile form.inline { margin: 0 0 0 auto; }

/* Fotos */
.fotos { display: flex; flex-wrap: wrap; gap: var(--abstand-3); margin: var(--abstand-2) 0; }
.foto { margin: 0; display: grid; gap: var(--abstand-1); justify-items: start; }
.foto img { width: 110px; height: 110px; object-fit: cover; border-radius: var(--rund-feld); border: 1px solid var(--linie); display: block; }
.foto-wahl { display: grid; gap: var(--abstand-1); font-weight: 600; flex: 1 1 200px; min-width: 0; }

/* Playback-Bibliothek und Import */
.pb-datei-zeile { border: 1px solid var(--linie); border-radius: var(--rund-feld); padding: var(--abstand-2) var(--abstand-3); margin: var(--abstand-2) 0; display: grid; gap: var(--abstand-1); }
.pb-datei-zeile legend { padding: 0 4px; }
.pb-bausteine { display: flex; flex-wrap: wrap; gap: 0 var(--abstand-3); }
.pb-bausteine-gruppen { display: grid; gap: 2px; }
.pb-bausteine-zeile { display: flex; flex-wrap: wrap; gap: 0 var(--abstand-4); }
.pb-bausteine-zeile + .pb-bausteine-zeile { border-top: 1px dashed var(--linie); padding-top: 2px; }
.pb-alle { margin-right: var(--abstand-2); }
form.pb-ziehen { outline: 2px dashed var(--akzent); outline-offset: 4px; border-radius: var(--rund-feld); }
details.pb-titel > summary { flex-wrap: wrap; align-items: baseline; gap: 2px var(--abstand-2); color: var(--text); font-weight: 400; }
details.pb-titel > summary::before { color: var(--akzent-tief); align-self: center; }
.pb-titel-name { font-weight: 700; }
.pb-interpret { color: var(--leise); font-weight: 600; }
.pb-bezeichnung { font-weight: 600; }
.pb-player { flex-basis: 100%; margin: var(--abstand-1) 0 2px; }
.pb-player audio { width: 100%; display: block; }
.pb-player video { width: 100%; max-height: 70vh; display: block; background: #000; border-radius: var(--rund-feld); }
.pb-player-hinweis { margin: 2px 0 0; }
a.pb-hoeren { margin-left: auto; height: var(--hoehe-klein); padding: 0 var(--polster-x-klein); }
a.pb-hoeren.pb-laeuft { color: var(--leise); }
.pb-mehr { margin: 2px 0 var(--abstand-3); }
p:has(> .pb-hilfe) { position: relative; }
.pb-hilfe { position: static; display: inline; color: var(--akzent-tief); font-weight: 600; cursor: help; }
.pb-hilfe-wort { text-decoration: underline dotted; text-underline-offset: 3px; }
.pb-hilfe-text { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-width: 640px; padding: var(--abstand-3); background: var(--karte); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--rund-feld); box-shadow: 0 6px 20px rgba(0,0,0,.12); font-weight: 400; line-height: 1.45; text-decoration: none; cursor: auto; }
.pb-hilfe:hover .pb-hilfe-text, .pb-hilfe:focus .pb-hilfe-text, .pb-hilfe:focus-within .pb-hilfe-text { display: block; }
@media (max-width: 700px) { .pb-hilfe-text { position: static; margin-top: var(--abstand-2); box-shadow: none; } }
.pb-fassung { border-top: 1px solid var(--linie); padding: var(--abstand-3) 0 var(--abstand-1); margin-top: var(--abstand-3); }
.pb-fassung-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--abstand-1) var(--abstand-3); }
.pb-nr, .pb-kuerzel, .ab-nr { font: 700 var(--schrift-text)/1.6 var(--mono); }
.pb-nr { background: var(--flaeche); padding: 0 7px; border-radius: 5px; }
.pb-kuerzel { color: var(--akzent-tief); min-width: 4.5em; letter-spacing: .02em; }
.pb-endung { font-weight: 700; color: var(--leise); }
.pb-songs { margin: var(--abstand-2) 0; padding-left: 22px; }
.pb-dateien, .pb-material, .pb-wahl, .pb-frei-liste { list-style: none; margin: var(--abstand-2) 0; padding: 0; }
.pb-dateien li, .pb-material li, .pb-frei-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-3); min-height: calc(var(--hoehe-klein) + 10px); padding: 3px 0; border-bottom: 1px solid var(--linie); }
.pb-dateien li .cast-loeschen, .pb-material li .cast-loeschen { flex-basis: 100%; margin-top: 0; }
.pb-bearbeiten { margin-top: var(--abstand-2); }
.pb-bearbeiten h3 { margin-top: var(--abstand-3); }
.pb-pfade { list-style: none; padding: 0; margin: var(--abstand-2) 0; display: grid; gap: var(--abstand-2); }
.pb-pfade code { overflow-wrap: anywhere; }
.pb-filter { display: contents; }
.pb-suche select { flex: 1 1 150px; max-width: 220px; }
/* Songliste eines Mixes (v0.26.0) */
.pb-songzeilen { margin: var(--abstand-2) 0 var(--abstand-3); }
.pb-songzeile { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--abstand-1) var(--abstand-3); align-items: start; padding: var(--abstand-2) 0; border-top: 1px solid var(--linie); }
.pb-songzeile-nr { font-weight: 700; color: var(--leise); }
.pb-songzeile-link { display: flex; flex-direction: column; gap: 3px; }
.pb-songzeile-stimmen { grid-column: 2 / -1; }
.pb-songstimmen-kurz { font-weight: 600; letter-spacing: .03em; }
.pb-tag { border-radius: 6px; font-weight: 600; }
@media (max-width: 700px) { .pb-songzeile { grid-template-columns: 24px minmax(0, 1fr); } .pb-songzeile-link { grid-column: 2; } }
/* Import in Schritten (v0.27.0) */
.pb-schritte { list-style: none; display: flex; flex-wrap: wrap; gap: var(--abstand-2); padding: 0; margin: var(--abstand-1) 0 var(--abstand-4); }
.pb-schritte li { display: inline-flex; align-items: center; gap: var(--abstand-1); min-height: var(--hoehe-klein); padding: 0 var(--polster-x-klein) 0 4px; border-radius: var(--rund-etikett); border: 1px solid var(--linie); color: var(--leise); }
.pb-schritte li.an { border-color: var(--akzent); color: var(--text); font-weight: 600; }
.pb-schritte li.fertig a { color: var(--text); text-decoration: none; }
.pb-schritte b { font-weight: 600; }
.pb-schritt-nr { display: inline-grid; place-items: center; width: calc(var(--schrift-text) + 7px); height: calc(var(--schrift-text) + 7px); border-radius: 50%; background: var(--linie); font-weight: 700; }
.pb-schritte li.an .pb-schritt-nr { background: var(--akzent); color: var(--auf-akzent); }
.pb-schritte li.fertig .pb-schritt-nr { background: var(--gruen-hell); color: var(--gruen); }
.pb-import h3 { margin-top: var(--abstand-5); }
.pb-wahl li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--abstand-2); padding: var(--abstand-2) 0; border-bottom: 1px solid var(--linie); }
.pb-wahl li > a:first-child { text-decoration: none; color: var(--text); }
@media (hover: hover) { .pb-wahl li > a:first-child:hover b { color: var(--akzent-tief); } }
.pb-sprung { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); margin: var(--abstand-2) 0 2px; }
.pb-frei-wahl { margin: var(--abstand-3) 0; }
.pb-frei-liste { max-height: 60vh; overflow: auto; }
.pb-frei-liste li .pb-bausteine { flex-basis: 100%; }
.pb-frei-liste li.pb-passt { background: var(--akzent-hell); }
.pb-frei-name { min-width: 0; overflow-wrap: anywhere; }
.pb-frei-liste a.pb-hoeren { margin-left: auto; }
.pb-fertig { margin: var(--abstand-5) 0 0; padding-top: var(--abstand-3); border-top: 1px solid var(--linie); }

/* Abläufe und „Meine Show“ */
.ab-quelle { flex: 1 1 220px; }
.ab-freigabe { margin-top: var(--abstand-3); padding: var(--abstand-3); border-radius: var(--rund-feld); background: var(--akzent-hell); }
.ab-stimmen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--abstand-2) var(--abstand-4); margin: var(--abstand-2) 0 var(--abstand-3); }
.ab-stimme, .ab-stimme-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2); font-weight: 600; padding: var(--abstand-1) 0; border-bottom: 1px solid var(--linie); }
.ab-stimme select, .ab-stimme-zeile select { width: auto; min-width: 5.5em; }
.ab-stimme-zeile select:last-child { flex: 1; }
.ab-stimme-zeile.leer { opacity: .7; }
.ab-luecken ul { margin: var(--abstand-1) 0 0; padding-left: 1.2em; }
.ab-pos.ohne-playback { border-left: 3px solid var(--gelb); padding-left: var(--abstand-2); }
.ab-einteilung-liste .ab-fremd { opacity: .85; }
.ab-teil { border: 1px solid var(--linie); border-radius: var(--rund-feld); padding: var(--abstand-2) var(--abstand-3); margin: var(--abstand-2) 0; }
.ab-teil legend { padding: 0 4px; }
.ab-block-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-3); }
.ab-block-kopf h2 { margin: 0; }
.ab-block.pause { background: var(--flaeche); }
.ab-schieben { margin-left: auto; display: inline-flex; gap: var(--abstand-1); }
.ab-schieben form { margin: 0; display: inline; }
button.ab-pfeil { height: var(--hoehe-klein); min-width: var(--hoehe-klein); padding: 0 var(--abstand-2); }
.ab-fuellung { margin: var(--abstand-1) 0 var(--abstand-2); }
.ab-zu-lang { color: var(--rot); }
.ab-positionen { list-style: none; margin: var(--abstand-2) 0; padding: 0; }
.ab-pos { border-top: 1px solid var(--linie); padding: var(--abstand-2) 0; }
.ab-pos-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-2); }
.ab-nr { color: var(--leise); min-width: 1.8em; }
.ab-song { font-weight: 700; }
.ab-stimmen-liste { list-style: none; margin: var(--abstand-1) 0 0; padding: 0 0 0 2.4em; }
.ab-stimmen-liste.eigen { border-left: 3px solid var(--akzent); padding-left: var(--abstand-2); margin-left: 2.1em; }
.ab-standard { margin: 0 0 0 3.3em; }
.ab-einteilung, .ab-text { margin: var(--abstand-1) 0 0 2.4em; }
.ab-pos > .klein, .ab-pos > .pb-bearbeiten, .ab-pos > .ab-beispiel { margin-left: 2.4em; }
.ab-beispiel > summary { color: var(--leise); }
.ab-beispiel p { font-style: italic; }
.ab-neu { margin-top: var(--abstand-2); }
.ab-meine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-4); }
.ab-mein { border-top: 1px solid var(--linie); padding-top: var(--abstand-3); }
.ab-mein .cast-eingeteilt, .ab-mein .ab-eingeteilt { margin: var(--abstand-2) 0; }
.ab-ganz { list-style: none; margin: 0; padding: 0; }
.ab-zeile, .ab-zeile-block { display: flex; gap: var(--abstand-2); padding: var(--abstand-2) var(--abstand-1); border-bottom: 1px solid var(--linie); }
.ab-zeile-block { display: block; margin-top: var(--abstand-2); border-bottom: 2px solid var(--linie); }
.ab-zeile-block.pause { color: var(--leise); }
.ab-zeile.mein { background: var(--akzent-hell); border-radius: 6px; font-weight: 600; }
.ab-thema { margin: 2px 0 var(--abstand-2); }
.ab-ueben { margin: var(--abstand-3) 0 2px; }
/* Eigene Vorschlagslisten statt datalist (v0.18.1, seit v0.33.3 überall — ablauf.js) */
.pb-felder label.breit, .vorschlag-anker { position: relative; }
.ab-vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; list-style: none; margin: var(--abstand-1) 0 0; padding: var(--abstand-1); max-height: 280px; overflow-y: auto;
  background: var(--karte); color: var(--text); border: 1px solid var(--linie); border-radius: var(--rund-feld); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); font-weight: 400; }
.ab-vorschlaege li { padding: var(--abstand-2) var(--abstand-3); border-radius: 6px; cursor: pointer; }
.ab-vorschlaege li:hover, .ab-vorschlaege li.an { background: var(--akzent-hell); }
.ab-vorschlaege li.leer { cursor: default; color: var(--leise); }
.ab-vorschlaege li.leer:hover { background: none; }

/* Kostüme im Ablauf (v0.18.0, v0.25.0) */
.ko-zeilen { display: grid; gap: var(--abstand-2); margin: var(--abstand-2) 0 var(--abstand-3); }
.ko-zeile { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(140px, 2fr) minmax(140px, 2fr); gap: var(--abstand-2) var(--abstand-3); align-items: center; padding: var(--abstand-1) 0; border-bottom: 1px solid var(--linie); }
.ko-name { font-weight: 600; }
.ko-dabei { display: flex; align-items: center; gap: var(--abstand-2); cursor: pointer; }
.ko-aus .ko-name { opacity: 0.55; text-decoration: line-through; }
.ko-hinweis { grid-column: 1 / -1; }
.ko-alle { max-width: 420px; margin: var(--abstand-1) 0 var(--abstand-2); }
.ko-block { margin: 2px 0 var(--abstand-2); }
.ko-kurz { font-weight: 400; color: var(--leise); }
.ko-outfits, .ko-material { margin: var(--abstand-1) 0 0 2.4em; }
.ko-mein-outfit { margin: var(--abstand-1) 0; }
.ko-mixsong { border-bottom: 1px solid var(--linie); padding: var(--abstand-1) 0; }
.ko-mixsong > summary { cursor: pointer; }
.ko-mixsong .ko-zeilen { margin-bottom: var(--abstand-2); }
@media (max-width: 560px) { .ko-zeile { grid-template-columns: 1fr; gap: var(--abstand-1); } }

/* Packliste: große Abhak-Knöpfe mit zweiter Zeile */
.pack-stand { font-weight: 600; }
.pack-liste { list-style: none; margin: 0; padding: 0; }
.pack-zeile { display: grid; grid-template-columns: 1fr auto; gap: var(--abstand-2) var(--abstand-3); align-items: center; padding: var(--abstand-3) 0; border-bottom: 1px solid var(--linie); }
.pack-knoepfe { display: flex; gap: var(--abstand-2); }
.pack-knoepfe form { margin: 0; }
.pack-knopf { display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 104px; height: auto; min-height: calc(var(--hoehe) + 10px); margin: 0; padding: var(--abstand-1) var(--abstand-2);
  border-radius: var(--rund-feld); border: 2px solid var(--linie); background: var(--karte); color: var(--text); font: 700 var(--schrift-text)/1.2 var(--schrift); cursor: pointer; white-space: normal; }
span.pack-knopf { cursor: default; }
.pack-knopf.an { border-color: var(--gruen); background: var(--gruen-hell); color: var(--gruen); }
.pack-knopf.an .pack-titel::before { content: "✓ "; }
.pack-info { font-weight: 400; color: var(--leise); min-height: 1em; }
.pack-knopf[disabled] { opacity: 0.6; }
@media (hover: hover) {
  button.pack-knopf:hover { background: var(--karte); border-color: var(--akzent); color: var(--text); }
  button.pack-knopf.an:hover { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen); }
}
@media (max-width: 560px) {
  .pack-zeile { grid-template-columns: 1fr; }
  .pack-knoepfe { display: grid; grid-template-columns: 1fr 1fr; }
  .pack-knopf { width: 100%; }
}
.pack-kiste { list-style: none; font-weight: 700; color: var(--akzent-tief); padding: var(--abstand-4) 0 var(--abstand-1); border-bottom: 1px solid var(--linie); }
.pack-gemeldet { color: var(--rot); }
.pack-melden > summary { color: var(--leise); }
.pack-melden .formular { max-width: 420px; margin-top: var(--abstand-2); }
.pack-ordnung { margin: 0 0 var(--abstand-2); }

/* Song-Historie (v0.21.0) */
.sh-liste { list-style: none; padding-left: 0; margin: 0; }
.sh-liste > li.sh-song { padding: var(--abstand-2) 0; border-top: 1px solid var(--linie); }
.sh-liste > li.sh-song:first-child { border-top: 0; }
.sh-eintraege { list-style: none; padding-left: 0; margin: var(--abstand-1) 0 0; }
.sh-eintraege > li { margin: 0 0 var(--abstand-2); }
.sh-stimme { font-weight: 600; }
.sh-bisher ul { margin: 2px 0 0; padding-left: 18px; }
.sh-bisher li { margin: 0; }

/* Anhang-Codes (v0.23.0) */
table.anhang-tabelle code { white-space: nowrap; }
table.kompakt td { padding: var(--abstand-1) var(--abstand-2); }

/* Alte Namen, falls eine Stelle sie noch nutzt */
:root { --rubin: var(--akzent); --rubin-hell: var(--akzent-hell); --akzent-text: var(--akzent-tief); --akzent-hover: var(--akzent-tief); --grau-hell: var(--flaeche); }

/* ---------- Schalter-Liste (v0.33.0): Mail-Einstellungen — Pflicht-Mails als fester Schalter ---------- */
.schalter-liste { list-style: none; padding: 0; margin: 0 0 var(--abstand-3); }
.schalter-zeile { display: flex; align-items: flex-start; gap: var(--abstand-3); padding: var(--abstand-3) 0; border-bottom: 1px solid var(--linie); }
.schalter-zeile:last-child { border-bottom: 0; }
.schalter-zeile p { margin: 2px 0 0; }
.schalter-name { font-weight: 600; cursor: pointer; }
.schalter-zeile.pflicht .schalter-name { cursor: default; }
input[type=checkbox].schalter {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; cursor: pointer;
  width: calc(var(--haken) * 2.1); height: calc(var(--haken) * 1.2); margin-top: 1px;
  border-radius: var(--rund-etikett); background: var(--linie); transition: background .15s;
}
input[type=checkbox].schalter::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: calc(var(--haken) * 1.2 - 4px); height: calc(var(--haken) * 1.2 - 4px);
  border-radius: 50%; background: var(--karte); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
input[type=checkbox].schalter:checked { background: var(--akzent); }
input[type=checkbox].schalter:checked::after { transform: translateX(calc(var(--haken) * 0.9)); }
input[type=checkbox].schalter:disabled { cursor: not-allowed; opacity: .55; }
input[type=checkbox].schalter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------- Änderungen am mitgeteilten Stand (v0.33.0) ---------- */
.liste-kompakt { padding-left: 18px; margin: 0 0 var(--abstand-3); }
.liste-kompakt li { margin-bottom: var(--abstand-1); }
.cast-neu.frisch { border-left: 4px solid var(--akzent); }
.cast-geaendert { margin: var(--abstand-2) 0; font-weight: 600; color: var(--akzent-tief); }
.ab-zeile.geaendert { box-shadow: inset 3px 0 0 var(--akzent); }

/* ---------- Segment-Schalter (v0.36.0): zwei bis drei Knöpfe als ein Schalter, der gewählte hervorgehoben ----------
   Ansicht::segment(). Für Einstellungen mit wenigen festen Werten (Listen-Ansicht, Intensität). Ohne Skript: jeder Knopf schickt ab. */
.segment { display: inline-flex; align-items: stretch; border: 1px solid var(--linie); border-radius: var(--rund-feld); overflow: hidden; background: var(--karte); vertical-align: middle; }
.segment button { height: calc(var(--hoehe-klein) - 2px); padding: 0 var(--polster-x-klein); border: 0; border-radius: 0; background: transparent; color: var(--leise); }
.segment button + button { border-left: 1px solid var(--linie); }
.segment button.an { background: var(--akzent-hell); color: var(--akzent-tief); }
@media (hover: hover) {
  .segment button:not(.an):hover { background: var(--flaeche); color: var(--text); border-color: var(--linie); }
  .segment button.an:hover { background: var(--akzent-hell); }
}
.nur-handy { display: none !important; }
@media (max-width: 700px) { .nur-handy { display: inline-flex !important; } }

/* ---------- Umschaltbare Liste (v0.36.0, Dave 18.10.2026; Gerüst v0.37.0, RB-103) ----------
   Tabelle mit Klasse `umschaltbar`: am Handy entweder seitlich wischen (Standard, .tw drumherum) oder — mit data-liste="karten"
   am <html> — je Zeile ein Block. Jede Zelle trägt data-titel (Beschriftung im Block). Rollen der Zellen:
   .haupt = Kopf des Blocks (fett, ohne Beschriftung) · .unter = Zeile darunter (leise, ohne Beschriftung; mehrere stehen mit „·“ in einer Zeile)
   .aktion = Knöpfe/Haken, unten im Block · .leer-zelle = ohne Inhalt, wird ausgeblendet.
   Zeilen: tr.gruppe-kopf = Zwischenüberschrift über den Blöcken · td.leer (colspan) = Hinweis „Keine …“ ohne Rahmen · tfoot = Block „Summe“. */
tr.gruppe-kopf th { white-space: normal; padding: var(--abstand-4) var(--abstand-2) var(--abstand-2); font-size: var(--schrift-text); letter-spacing: 0; text-transform: none; color: var(--leise); font-weight: 400; border-bottom: 1px solid var(--linie); }
tbody:first-of-type tr.gruppe-kopf th { padding-top: var(--abstand-2); }
th.aktion, td.aktion { width: 1%; }
@media screen and (max-width: 700px) { /* nur Bildschirm: gedruckt wird immer die Tabelle (Gästeliste) */
  :root[data-liste="karten"] table.umschaltbar thead { display: none; }
  :root[data-liste="karten"] table.umschaltbar, :root[data-liste="karten"] table.umschaltbar tbody, :root[data-liste="karten"] table.umschaltbar tfoot,
  :root[data-liste="karten"] table.umschaltbar tr, :root[data-liste="karten"] table.umschaltbar td { display: block; width: 100%; }
  :root[data-liste="karten"] table.umschaltbar tr {
    display: flex; flex-wrap: wrap; align-items: baseline; position: relative; border: 1px solid var(--linie); border-radius: var(--rund-feld);
    padding: var(--abstand-2) var(--abstand-3); margin-bottom: var(--abstand-3); background: var(--karte);
  }
  /* Inhalt fließt normal (Umbrüche, Balken, mehrere Teile); die Beschriftung steht links daneben in einer festen Spalte */
  :root[data-liste="karten"] table.umschaltbar td { display: flow-root; flex: 1 0 100%; padding: 2px 0 2px calc(7em + var(--abstand-3)); border: 0; text-align: left; white-space: normal; max-width: none; }
  :root[data-liste="karten"] table.umschaltbar td[data-titel]::before { content: attr(data-titel); float: left; width: 7em; margin-left: calc(-7em - var(--abstand-3)); color: var(--leise); font: 400 var(--schrift-text) var(--schrift); letter-spacing: 0; overflow-wrap: anywhere; }
  :root[data-liste="karten"] table.umschaltbar td.haupt { order: -2; font-weight: 700; padding: 0 0 var(--abstand-1); }
  :root[data-liste="karten"] table.umschaltbar td.haupt::before { content: none; }
  :root[data-liste="karten"] table.umschaltbar td.haupt .klein { font-weight: 400; }
  :root[data-liste="karten"] table.umschaltbar td.unter { order: -1; flex: 0 1 auto; width: auto; color: var(--leise); padding: 0 var(--abstand-1) var(--abstand-1) 0; }
  :root[data-liste="karten"] table.umschaltbar td.unter[data-titel]::before { content: none; }
  :root[data-liste="karten"] table.umschaltbar td.unter + td.unter::before { content: "· "; float: none; width: auto; margin: 0; }
  :root[data-liste="karten"] table.umschaltbar td.aktion { order: 9; padding: var(--abstand-2) 0 0; }
  :root[data-liste="karten"] table.umschaltbar td.aktion::before { content: none; }
  :root[data-liste="karten"] table.umschaltbar td.leer-zelle { display: none; }
  :root[data-liste="karten"] table.umschaltbar tr:has(> td.leer) { border: 0; background: transparent; padding: 0; }
  :root[data-liste="karten"] table.umschaltbar td.leer { padding-left: 0; text-align: center; }
  :root[data-liste="karten"] table.umschaltbar tfoot tr { background: var(--flaeche); }
  :root[data-liste="karten"] table.umschaltbar tr.gruppe-kopf { border: 0; background: transparent; padding: var(--abstand-3) 0 0; margin: 0; }
  :root[data-liste="karten"] table.umschaltbar tr.gruppe-kopf th { display: block; width: 100%; border: 0; padding: 0; }
  :root[data-liste="karten"] .tw:has(> table.umschaltbar) { overflow: visible; }
}
/* Nur für Bildschirmleser (v0.36.0): Beschriftung, die sichtbar schon ein Zeichen trägt */
.nur-leser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.segment button[disabled] { opacity: 0.45; }
/* Rubinchen — nur cast.rubinchen.de (fürs Handy gebaut). Grundlage und gemeinsame Bausteine: public/assets/basis.css, wird beim Ausliefern davorgesetzt (v0.30.0). */

.kopf {
  background: var(--karte); border-bottom: 3px solid var(--akzent); padding: var(--abstand-2) var(--abstand-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); min-height: 56px;
}
.kopf .marke { display: inline-flex; align-items: center; gap: var(--abstand-3); font-weight: 800; color: var(--akzent-tief); text-decoration: none; }
.kopf .marke span { color: var(--text); letter-spacing: -0.01em; }
.kopf .marke img { display: block; width: 86px; height: auto; }
@media (min-width: 701px) { .kopf .marke img { width: 110px; } }
.kopf-rechts { display: flex; align-items: center; gap: var(--abstand-3); }
.nutzer { color: var(--leise); }
/* Logo: helle Fassung im Dunkeln (Schrift weiß statt schwarz) */
.logo-dunkel { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-hell="hell"]) .logo-hell { display: none !important; }
  :root:not([data-hell="hell"]) .logo-dunkel { display: block !important; }
}
:root[data-hell="dunkel"] .logo-hell { display: none !important; }
:root[data-hell="dunkel"] .logo-dunkel { display: block !important; }

.reiter { display: flex; gap: var(--abstand-1); padding: 0 var(--abstand-3); background: var(--karte); border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.reiter a { display: inline-flex; align-items: center; height: calc(var(--hoehe) + 4px); padding: 0 var(--polster-x-klein); text-decoration: none; color: var(--leise); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.reiter a.an { color: var(--akzent-tief); border-bottom-color: var(--akzent); }

main { max-width: 680px; margin: 0 auto; padding: var(--abstand-4); display: grid; gap: var(--abstand-4); }
.seitentitel { margin: var(--abstand-1) 0 0; }

/* Antwort auf einen Termin: drei gleich breite Knöpfe */
.antwort-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--abstand-2); }
.antwort-knopf { background: transparent; color: var(--text); border: 2px solid var(--linie); }
.antwort-knopf.ja.an { background: var(--gruen); border-color: var(--gruen); color: var(--karte); }
.antwort-knopf.vielleicht.an { background: var(--gelb); border-color: var(--gelb); color: var(--karte); }
.antwort-knopf.nein.an { background: var(--rot); border-color: var(--rot); color: var(--karte); }
@media (hover: hover) {
  .antwort-knopf:not(.an):hover { background: var(--akzent-hell); border-color: var(--akzent); color: var(--text); }
  .antwort-knopf.ja.an:hover { background: var(--gruen); border-color: var(--gruen); }
  .antwort-knopf.vielleicht.an:hover { background: var(--gelb); border-color: var(--gelb); }
  .antwort-knopf.nein.an:hover { background: var(--rot); border-color: var(--rot); }
}

/* F&F — Anhang-Codes */
.anhang-liste { list-style: none; padding: 0; }
.anhang-code { padding: var(--abstand-3) 0; border-bottom: 1px solid var(--linie); }
.anhang-code.erledigt { opacity: 0.75; }
.anhang-zeile { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-3); align-items: center; }
.anhang-wert { font: 700 var(--schrift-h3)/1.4 var(--mono); letter-spacing: 0.03em; user-select: all; }
.anhang-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-2); }
.anhang-link { overflow-wrap: anywhere; margin: var(--abstand-2) 0 0; user-select: all; }

/* Menü am Handy (v0.33.1, RB-078): ab 700 px Breite die Reiterleiste, darunter der Menü-Knopf im Kopf */
.menue-handy { display: none; position: relative; }
@media (max-width: 700px) {
  .reiter, .kopf-rechts { display: none; }
  .kopf { position: relative; }
  .menue-handy { display: block; position: static; }
  .menue-handy > summary { display: flex; align-items: center; gap: var(--abstand-3); min-height: var(--hoehe); padding: 0 var(--polster-x-klein);
    border: 1px solid var(--linie); border-radius: var(--rund-feld); color: var(--text); font-weight: 600; }
  .menue-handy > summary::before { content: none; display: none; }
  .menue-aktiv { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .burger { display: inline-grid; gap: 4px; width: 20px; }
  .burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .15s, opacity .15s; }
  .menue-handy[open] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menue-handy[open] .burger i:nth-child(2) { opacity: 0; }
  .menue-handy[open] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .menue-handy[open] > summary { border-color: var(--akzent); color: var(--akzent-tief); }
  .menue-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--karte); padding: var(--abstand-2) var(--abstand-4) var(--abstand-3);
    border-bottom: 1px solid var(--linie); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
  .menue-liste { display: grid; gap: 2px; }
  .menue-liste a { display: flex; align-items: center; min-height: var(--hoehe); padding: 0 var(--abstand-3); color: var(--text); font-weight: 600; text-decoration: none; border-radius: var(--rund-feld); }
  .menue-liste a.an { background: var(--akzent-hell); color: var(--akzent-tief); }
  .menue-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-3); margin-top: var(--abstand-2); padding: var(--abstand-2) var(--abstand-3) 0; border-top: 1px solid var(--linie); }
}