/* hb.css – erzeugt von deploy/v3/bau_hb_css.py, nicht von Hand ändern. Quellen: tokens.json, bundle.css, bausteine.css */
/* A Tokens */
:root {
  --font-anzeige: "Josefin Sans", "Century Gothic", Futura, sans-serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, "Segoe UI", sans-serif;
  --font-code: "Atkinson Hyperlegible Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-etikett: "Atkinson Hyperlegible Mono", "SF Mono", Menlo, Consolas, monospace;
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 48px;
  --abstand-8: 64px;
  --ecke-flaeche: 2px;
  --ecke-feld: 3px;
  --ecke-marke: 0px;
  --ziel: 40px;
  --ziel-handy: 48px;
  --kopf-hoehe: 56px;
  --sitz: 22px;
  --inhalt-max: 1280px;
  --einlass-max: 720px;
  --kopf-linie: #34363a;
  --grund: #f1f1ef;
  --flaeche: #ffffff;
  --flaeche-tief: #e6e7e8;
  --tinte: #17181a;
  --tinte-leise: #55595e;
  --linie: #d6d8da;
  --rand: #7d8288;
  --kopf: #17181a;
  --auf-kopf: #f4f3ef;
  --auf-kopf-leise: #b9bdc2;
  --kopf-aktiv: #f4f3ef;
  --auf-kopf-aktiv: #17181a;
  --kopf-strich: #f4f3ef;
  --akzent: #17181a;
  --auf-akzent: #ffffff;
  --knopf: #17181a;
  --auf-knopf: #f4f3ef;
  --knopf-hover: #34363a;
  --gefahr: #b3261e;
  --auf-gefahr: #ffffff;
  --ok-text: #1f6b2a;
  --ok-flaeche: #e2f0e3;
  --ok-voll: #2e7d32;
  --auf-ok-voll: #ffffff;
  --warn-text: #7a5200;
  --warn-flaeche: #fcefc7;
  --warn-voll: #f2c230;
  --auf-warn-voll: #1b1a17;
  --fehler-text: #b3261e;
  --fehler-flaeche: #fbe7e4;
  --fehler-voll: #b3261e;
  --auf-fehler-voll: #ffffff;
  --info-text: #1f4fa8;
  --info-flaeche: #e3ecfb;
  --sitz-frei: #e6f4ea;
  --sitz-frei-rand: #3f8f4f;
  --sitz-reserviert: #fff1c2;
  --sitz-reserviert-rand: #a87a00;
  --sitz-bezahlt: #a9c6f5;
  --sitz-bezahlt-rand: #2f6fdb;
  --sitz-haus: #f2b8bf;
  --sitz-haus-rand: #c1121f;
  --sitz-gehalten: #ffe2bd;
  --sitz-gehalten-rand: #c06c00;
  --sitz-gesperrt: #d9d6d0;
  --sitz-gesperrt-rand: #8f8a80;
  --buehne: #34363a;
  --auf-buehne: #ffffff;
  --systemband: #b3261e;
  --systemband-tief: #8f1c16;
  --auf-systemband: #ffffff;
  --sitz-wahl: var(--tinte);
  --auf-sitz-wahl: var(--flaeche);
  --fokus: var(--akzent);
  --fokus-kopf: var(--auf-kopf);
  --fokus-ring: 0 0 0 2px #ffffff, 0 0 0 5px #17181a;
  --menue-schatten: 0 10px 24px #00000059;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #0f1011;
    --flaeche: #1b1c1f;
    --flaeche-tief: #26282b;
    --tinte: #eef0f2;
    --tinte-leise: #a9aeb4;
    --linie: #303337;
    --rand: #80868d;
    --kopf: #17181a;
    --auf-kopf: #f4f3ef;
    --auf-kopf-leise: #b9bdc2;
    --kopf-aktiv: #f4f3ef;
    --auf-kopf-aktiv: #17181a;
    --kopf-strich: #f4f3ef;
    --akzent: #eef0f2;
    --auf-akzent: #1b1c1f;
    --knopf: #f4f3ef;
    --auf-knopf: #17181a;
    --knopf-hover: #d4d6d9;
    --gefahr: #ff8a7a;
    --auf-gefahr: #1b1a17;
    --ok-text: #8fd49a;
    --ok-flaeche: #1c3321;
    --ok-voll: #2e7d32;
    --auf-ok-voll: #ffffff;
    --warn-text: #f2c230;
    --warn-flaeche: #3a2f12;
    --warn-voll: #f2c230;
    --auf-warn-voll: #1b1a17;
    --fehler-text: #ff8a7a;
    --fehler-flaeche: #3d1c18;
    --fehler-voll: #b3261e;
    --auf-fehler-voll: #ffffff;
    --info-text: #9cbcf5;
    --info-flaeche: #1b2740;
    --sitz-frei: #1f3a26;
    --sitz-frei-rand: #6cc07c;
    --sitz-reserviert: #4a3c10;
    --sitz-reserviert-rand: #e0b23a;
    --sitz-bezahlt: #24427a;
    --sitz-bezahlt-rand: #7aa5f0;
    --sitz-haus: #5e2430;
    --sitz-haus-rand: #f08a95;
    --sitz-gehalten: #4a3016;
    --sitz-gehalten-rand: #f0a24a;
    --sitz-gesperrt: #3a3833;
    --sitz-gesperrt-rand: #8a857c;
    --buehne: #3a3d42;
    --auf-buehne: #ffffff;
    --systemband: #b3261e;
    --systemband-tief: #8f1c16;
    --auf-systemband: #ffffff;
    --sitz-wahl: var(--tinte);
    --auf-sitz-wahl: var(--flaeche);
    --fokus: var(--akzent);
    --fokus-kopf: var(--auf-kopf);
    --fokus-ring: 0 0 0 2px #1b1c1f, 0 0 0 5px #eef0f2;
    --menue-schatten: 0 10px 24px #00000059;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grund: #0f1011;
  --flaeche: #1b1c1f;
  --flaeche-tief: #26282b;
  --tinte: #eef0f2;
  --tinte-leise: #a9aeb4;
  --linie: #303337;
  --rand: #80868d;
  --kopf: #17181a;
  --auf-kopf: #f4f3ef;
  --auf-kopf-leise: #b9bdc2;
  --kopf-aktiv: #f4f3ef;
  --auf-kopf-aktiv: #17181a;
  --kopf-strich: #f4f3ef;
  --akzent: #eef0f2;
  --auf-akzent: #1b1c1f;
  --knopf: #f4f3ef;
  --auf-knopf: #17181a;
  --knopf-hover: #d4d6d9;
  --gefahr: #ff8a7a;
  --auf-gefahr: #1b1a17;
  --ok-text: #8fd49a;
  --ok-flaeche: #1c3321;
  --ok-voll: #2e7d32;
  --auf-ok-voll: #ffffff;
  --warn-text: #f2c230;
  --warn-flaeche: #3a2f12;
  --warn-voll: #f2c230;
  --auf-warn-voll: #1b1a17;
  --fehler-text: #ff8a7a;
  --fehler-flaeche: #3d1c18;
  --fehler-voll: #b3261e;
  --auf-fehler-voll: #ffffff;
  --info-text: #9cbcf5;
  --info-flaeche: #1b2740;
  --sitz-frei: #1f3a26;
  --sitz-frei-rand: #6cc07c;
  --sitz-reserviert: #4a3c10;
  --sitz-reserviert-rand: #e0b23a;
  --sitz-bezahlt: #24427a;
  --sitz-bezahlt-rand: #7aa5f0;
  --sitz-haus: #5e2430;
  --sitz-haus-rand: #f08a95;
  --sitz-gehalten: #4a3016;
  --sitz-gehalten-rand: #f0a24a;
  --sitz-gesperrt: #3a3833;
  --sitz-gesperrt-rand: #8a857c;
  --buehne: #3a3d42;
  --auf-buehne: #ffffff;
  --systemband: #b3261e;
  --systemband-tief: #8f1c16;
  --auf-systemband: #ffffff;
  --sitz-wahl: var(--tinte);
  --auf-sitz-wahl: var(--flaeche);
  --fokus: var(--akzent);
  --fokus-kopf: var(--auf-kopf);
  --fokus-ring: 0 0 0 2px #1b1c1f, 0 0 0 5px #eef0f2;
  --menue-schatten: 0 10px 24px #00000059;
  color-scheme: dark;
}
/* B bundle.css des Design Systems, unverändert */
/* Hinterbühne – Bausteine der Bedienoberfläche. Alle Werte kommen aus tokens.json; dieselben Klassen in der Kulturhof Edition und im Ticketing. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--tinte); font-family: var(--font-text); font-size: 15px; line-height: 22px; }
.hb-buehnenrand { padding: var(--abstand-5); }
.hb-stapel { display: flex; flex-direction: column; gap: var(--abstand-4); }
.hb-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; }
.hb-leise { color: var(--tinte-leise); }
.hb-klein { font-size: 13px; line-height: 18px; }
.hb-code { font-family: var(--font-code); letter-spacing: 0.06em; }
.hb-titel { margin: 0; font-family: var(--font-anzeige); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; text-wrap: balance; }
.hb-pfad { margin: 0 0 var(--abstand-1); font-size: 13px; line-height: 18px; color: var(--tinte-leise); }
.hb-pfad a { color: inherit; }
a { color: var(--akzent); text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--fokus-ring); }

/* Kopfleiste */
.hb-kopf { position: relative; display: flex; align-items: center; gap: var(--abstand-5); min-height: var(--kopf-hoehe); padding: 0 var(--abstand-5); background: var(--kopf); color: var(--auf-kopf); }
.hb-kopf__marke { display: flex; align-items: center; gap: var(--abstand-3); text-decoration: none; color: var(--auf-kopf); flex: none; }
.hb-kopf__marke img { height: 26px; width: auto; display: block; }
.hb-kopf__bereich { font: 700 11px/16px var(--font-etikett); letter-spacing: 0.14em; text-transform: uppercase; color: var(--auf-kopf-leise); padding-left: var(--abstand-3); border-left: 1px solid var(--auf-kopf-leise); }
.hb-kopf__menue { display: contents; }
.hb-kopf nav { display: flex; gap: 2px; flex-wrap: nowrap; align-self: stretch; }
.hb-kopf nav a { white-space: nowrap; display: inline-flex; align-items: center; padding: 0 var(--abstand-3); color: var(--auf-kopf); text-decoration: none; font-size: 14px; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.hb-kopf nav a:hover { background: var(--kopf-aktiv); color: var(--auf-kopf-aktiv); }
.hb-kopf nav a[aria-current="page"] { background: var(--kopf-aktiv); color: var(--auf-kopf-aktiv); border-bottom-color: var(--kopf-strich); font-weight: 700; }
.hb-kopf__wer { margin-left: auto; display: flex; align-items: center; gap: var(--abstand-2); font-size: 13px; color: var(--auf-kopf-leise); white-space: nowrap; }
.hb-kopf__wer a, .hb-kopf__knopf { color: var(--auf-kopf); background: none; border: 0; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hb-kopf__knopf--rahmen { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; border: 1px solid var(--auf-kopf-leise); border-radius: var(--ecke-feld); min-height: 32px; padding: 0 var(--abstand-2); }
.hb-kopf__knopf--menue { display: none; }
.hb-kopf :focus-visible { box-shadow: none; outline: 3px solid var(--fokus-kopf); outline-offset: -3px; }
.hb-kopf--schmal { gap: var(--abstand-2); padding: 0 var(--abstand-4); }
.hb-kopf--schmal .hb-kopf__menue { display: none; }
.hb-kopf--schmal .hb-kopf__knopf--menue { display: inline-flex; align-items: center; margin-left: auto; }
.hb-kopf--schmal.is-offen .hb-kopf__menue { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--kopf); box-shadow: var(--menue-schatten); }
.hb-kopf--schmal.is-offen nav { flex-direction: column; gap: 0; }
.hb-kopf--schmal.is-offen nav a { min-height: var(--ziel-handy); padding: 0 var(--abstand-4); border-top: 1px solid var(--kopf-aktiv); border-bottom-width: 0; border-left: 4px solid transparent; }
.hb-kopf--schmal.is-offen nav a[aria-current="page"] { border-left-color: var(--kopf-strich); }
.hb-kopf--schmal.is-offen .hb-kopf__wer { margin: 0; padding: var(--abstand-3) var(--abstand-4); border-top: 1px solid var(--kopf-aktiv); }

@media (max-width: 900px) {
.hb-kopf { gap: var(--abstand-2); padding: 0 var(--abstand-4); }
.hb-kopf .hb-kopf__menue { display: none; }
.hb-kopf .hb-kopf__knopf--menue { display: inline-flex; align-items: center; margin-left: auto; }
.hb-kopf.is-offen .hb-kopf__menue { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--kopf); box-shadow: var(--menue-schatten); }
.hb-kopf.is-offen nav { flex-direction: column; gap: 0; }
.hb-kopf.is-offen nav a { min-height: var(--ziel-handy); padding: 0 var(--abstand-4); border-top: 1px solid var(--kopf-aktiv); border-bottom-width: 0; border-left: 4px solid transparent; }
.hb-kopf.is-offen nav a[aria-current="page"] { border-left-color: var(--kopf-strich); }
.hb-kopf.is-offen .hb-kopf__wer { margin: 0; padding: var(--abstand-3) var(--abstand-4); border-top: 1px solid var(--kopf-aktiv); }
}
.hb-fuss { padding: var(--abstand-4) var(--abstand-5); font-size: 13px; line-height: 18px; color: var(--tinte-leise); }
.hb-fuss a { color: inherit; }

/* Systemband */
.hb-systemband { display: flex; align-items: center; justify-content: center; gap: var(--abstand-3); min-height: 28px; padding: 4px var(--abstand-5); background: repeating-linear-gradient(-45deg, var(--systemband) 0 14px, var(--systemband-tief) 14px 28px); color: var(--auf-systemband); font: 700 12px/16px var(--font-etikett); letter-spacing: 0.14em; text-transform: uppercase; }
.hb-systemband small { font: 400 12px/16px var(--font-text); letter-spacing: 0; text-transform: none; }

/* Knopf */
.hb-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); min-height: var(--ziel); padding: 0 var(--abstand-4); border: 2px solid var(--knopf); border-radius: var(--ecke-feld); background: var(--knopf); color: var(--auf-knopf); font: 700 13px/16px var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
.hb-knopf:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }
.hb-knopf--leise { background: var(--flaeche); color: var(--tinte); border-color: var(--rand); }
.hb-knopf--leise:hover { background: var(--flaeche-tief); border-color: var(--tinte); }
.hb-knopf--gefahr { background: var(--flaeche); color: var(--gefahr); border-color: var(--gefahr); }
.hb-knopf--gefahr:hover { background: var(--gefahr); color: var(--auf-gefahr); border-color: var(--gefahr); }
.hb-knopf--klein { min-height: 32px; padding: 0 var(--abstand-3); font-size: 12px; }
.hb-knopf--gross { min-height: var(--ziel-handy); width: 100%; font-size: 15px; }
.hb-knopf:disabled, .hb-knopf[aria-disabled="true"] { opacity: 0.45; cursor: default; pointer-events: none; }
.hb-textlink { background: none; border: 0; padding: 0; font: inherit; color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Formular */
.hb-formular { display: grid; gap: var(--abstand-3); max-width: 560px; }
.hb-formular__reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }
.hb-formular__reihe > .hb-feld { flex: 1 1 160px; min-width: 0; }
.hb-feld { display: flex; flex-direction: column; gap: var(--abstand-1); }
.hb-feld > label, .hb-feld__name { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--tinte); }
.hb-feld__hilfe { font-size: 13px; line-height: 18px; color: var(--tinte-leise); }
.hb-feld__fehler { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--fehler-text); }
.hb-eingabe { width: 100%; min-height: var(--ziel); padding: 8px 10px; border: 1px solid var(--rand); border-radius: var(--ecke-feld); background: var(--flaeche); color: var(--tinte); font: 16px/22px var(--font-text); }
.hb-eingabe:hover { border-color: var(--tinte-leise); }
.hb-eingabe:focus-visible { border-color: var(--tinte); }
.hb-eingabe[aria-invalid="true"] { border: 2px solid var(--fehler-text); padding: 7px 9px; }
.hb-eingabe--code { font-family: var(--font-code); letter-spacing: 0.2em; font-size: 20px; }
textarea.hb-eingabe { min-height: 88px; resize: vertical; }
.hb-kontrolle { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: var(--ziel); font-size: 15px; cursor: pointer; }
.hb-kontrolle input { width: 18px; height: 18px; margin: 0; accent-color: var(--akzent); }

/* Reiter */
.hb-reiter { display: flex; flex-wrap: wrap; gap: var(--abstand-1); border-bottom: 1px solid var(--linie); }
.hb-reiter a { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: var(--ziel); padding: 0 var(--abstand-3); margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--tinte-leise); font-size: 14px; font-weight: 700; text-decoration: none; }
.hb-reiter a:hover { color: var(--tinte); border-bottom-color: var(--rand); }
.hb-reiter a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--akzent); }
.hb-reiter__zahl { font: 700 11px/16px var(--font-etikett); padding: 0 6px; border-radius: var(--ecke-marke); background: var(--flaeche-tief); color: var(--tinte-leise); }

/* Karte und Klappzeile */
.hb-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--ecke-flaeche); padding: var(--abstand-4) var(--abstand-5); min-width: 0; }
.hb-karte__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--abstand-2); margin-bottom: var(--abstand-3); }
.hb-karte__titel { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.hb-karte--blass { background: var(--grund); }
.hb-karten { align-items: start; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--abstand-4); }
.hb-klapp { border-bottom: 1px solid var(--linie); }
.hb-klapp > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); min-height: var(--ziel); padding: var(--abstand-1) 0; cursor: pointer; }
.hb-klapp > summary::-webkit-details-marker { display: none; }
.hb-klapp > summary::before { content: "›"; width: 12px; font-weight: 700; color: var(--tinte-leise); transition: transform .15s; }
.hb-klapp[open] > summary::before { transform: rotate(90deg); }
.hb-klapp > summary .hb-klapp__rechts { margin-left: auto; }
.hb-klapp__inhalt { padding: var(--abstand-1) 0 var(--abstand-4) 20px; }

/* Tabelle */
.hb-tabelle-rahmen { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--ecke-flaeche); }
.hb-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.hb-tabelle th { padding: 8px 10px; background: var(--flaeche-tief); color: var(--tinte-leise); text-align: left; white-space: nowrap; font: 700 11px/16px var(--font-etikett); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--linie); }
.hb-tabelle td { padding: 7px 10px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.hb-tabelle tbody tr:last-child td { border-bottom: 0; }
.hb-tabelle tbody tr:hover td { background: var(--flaeche-tief); }
.hb-tabelle .hb-zahl { text-align: right; white-space: nowrap; }
.hb-tabelle .hb-aktionen { text-align: right; white-space: nowrap; }
.hb-tabelle .hb-aktionen > * + * { margin-left: var(--abstand-2); }
.hb-tabelle tr.is-storniert td:not(.hb-aktionen) { color: var(--tinte-leise); text-decoration: line-through; }
.hb-tabelle tr.is-inaktiv td { color: var(--tinte-leise); }
.hb-tabelle tr.is-fehler td { background: var(--fehler-flaeche); }
.hb-tabelle tfoot td { font-weight: 700; border-top: 2px solid var(--tinte); border-bottom: 0; }
@media (max-width: 700px) {
  .hb-tabelle--liste, .hb-tabelle--liste tbody, .hb-tabelle--liste tr, .hb-tabelle--liste td { display: block; }
  .hb-tabelle--liste thead { display: none; }
  .hb-tabelle--liste tr { padding: var(--abstand-2) 0; border-bottom: 1px solid var(--linie); }
  .hb-tabelle--liste td { border: 0; padding: 2px var(--abstand-3); text-align: left; }
  .hb-tabelle--liste td[data-label]::before { content: attr(data-label) " "; font: 700 11px/16px var(--font-etikett); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-leise); }
}

/* Statusmarke */
.hb-marke { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid transparent; border-radius: var(--ecke-marke); background: var(--flaeche-tief); color: var(--tinte-leise); font: 700 11px/16px var(--font-etikett); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.hb-marke--ok { background: var(--ok-flaeche); color: var(--ok-text); }
.hb-marke--warn { background: var(--warn-flaeche); color: var(--warn-text); }
.hb-marke--fehler { background: var(--fehler-flaeche); color: var(--fehler-text); }
.hb-marke--info { background: var(--info-flaeche); color: var(--info-text); }
.hb-marke--voll { background: var(--tinte); color: var(--flaeche); }
.hb-marke--leer { background: transparent; border-color: var(--rand); color: var(--tinte-leise); }
.hb-marke--reserviert { background: var(--sitz-reserviert); border-color: var(--sitz-reserviert-rand); color: var(--tinte); }
.hb-marke--bezahlt { background: var(--sitz-bezahlt); border-color: var(--sitz-bezahlt-rand); color: var(--tinte); }
.hb-marke--haus { background: var(--sitz-haus); border-color: var(--sitz-haus-rand); color: var(--tinte); }
.hb-marke--storniert { background: transparent; border-color: var(--rand); color: var(--tinte-leise); text-decoration: line-through; }

/* Zählung */
.hb-zaehlung { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-6); align-items: flex-end; }
.hb-zaehlung__wert { display: flex; flex-direction: column; gap: 2px; }
.hb-zaehlung__wert b { font: 700 28px/1 var(--font-anzeige); font-variant-numeric: tabular-nums; color: var(--tinte); }
.hb-zaehlung__wert span { font: 700 11px/16px var(--font-etikett); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-leise); }
.hb-zaehlung__balken { flex: 1 1 200px; height: 8px; background: var(--flaeche-tief); border: 1px solid var(--rand); position: relative; align-self: center; }
.hb-zaehlung__balken i { position: absolute; inset: 0 auto 0 0; background: var(--tinte); }

/* Meldung */
.hb-meldung { display: flex; gap: var(--abstand-3); align-items: baseline; padding: var(--abstand-3) var(--abstand-4); border: 1px solid var(--info-text); border-radius: var(--ecke-flaeche); background: var(--info-flaeche); color: var(--tinte); }
.hb-meldung__wort { flex: none; font: 700 11px/16px var(--font-etikett); letter-spacing: 0.1em; text-transform: uppercase; color: var(--info-text); }
.hb-meldung p { margin: 0; }
.hb-meldung--ok { border-color: var(--ok-text); background: var(--ok-flaeche); }
.hb-meldung--ok .hb-meldung__wort { color: var(--ok-text); }
.hb-meldung--warn { border-color: var(--warn-text); background: var(--warn-flaeche); }
.hb-meldung--warn .hb-meldung__wort { color: var(--warn-text); }
.hb-meldung--fehler { border-color: var(--fehler-text); background: var(--fehler-flaeche); }
.hb-meldung--fehler .hb-meldung__wort { color: var(--fehler-text); }

/* Kassa-Saalplan */
.hb-saalplan { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--ecke-flaeche); padding: var(--abstand-4); overflow-x: auto; }
.hb-saalplan svg { display: block; width: 100%; max-width: 640px; height: auto; }
.hb-buehne rect { fill: var(--buehne); }
.hb-buehne text { fill: var(--auf-buehne); font: 700 10px var(--font-etikett); letter-spacing: 0.2em; }
.hb-reihe-text { fill: var(--tinte-leise); font: 700 10px var(--font-text); }
.hb-sitz { cursor: pointer; }
.hb-sitz rect { fill: var(--sitz-frei); stroke: var(--sitz-frei-rand); stroke-width: 1.5; rx: 3px; }
.hb-sitz text { fill: var(--tinte); font: 700 9px var(--font-text); pointer-events: none; }
.hb-sitz:hover rect { stroke-width: 2.5; }
.hb-sitz--reserviert rect { fill: var(--sitz-reserviert); stroke: var(--sitz-reserviert-rand); }
.hb-sitz--bezahlt rect { fill: var(--sitz-bezahlt); stroke: var(--sitz-bezahlt-rand); }
.hb-sitz--haus rect { fill: var(--sitz-haus); stroke: var(--sitz-haus-rand); }
.hb-sitz--gehalten { cursor: not-allowed; }
.hb-sitz--gehalten rect { fill: var(--sitz-gehalten); stroke: var(--sitz-gehalten-rand); stroke-dasharray: 3 2; }
.hb-sitz--gesperrt { cursor: default; }
.hb-sitz--gesperrt rect { fill: var(--sitz-gesperrt); stroke: var(--sitz-gesperrt-rand); }
.hb-sitz--gesperrt text { fill: var(--tinte-leise); text-decoration: line-through; }
.hb-sitz--inaktiv { cursor: default; }
.hb-sitz--inaktiv rect { fill: var(--flaeche); stroke: var(--rand); stroke-dasharray: 2 2; }
.hb-sitz--inaktiv text { fill: var(--tinte-leise); }
.hb-sitz--zusatz rect { stroke-dasharray: 5 2; }
.hb-sitz--gewaehlt rect { fill: var(--sitz-wahl); stroke: var(--sitz-wahl); stroke-width: 2.5; }
.hb-sitz--gewaehlt text { fill: var(--auf-sitz-wahl); }
.hb-legende { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); margin: var(--abstand-3) 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.hb-legende li { display: inline-flex; align-items: center; gap: 6px; }
.hb-legende i { width: 14px; height: 14px; border: 1.5px solid var(--sitz-frei-rand); border-radius: 3px; background: var(--sitz-frei); }
.hb-legende .l-reserviert { background: var(--sitz-reserviert); border-color: var(--sitz-reserviert-rand); }
.hb-legende .l-bezahlt { background: var(--sitz-bezahlt); border-color: var(--sitz-bezahlt-rand); }
.hb-legende .l-haus { background: var(--sitz-haus); border-color: var(--sitz-haus-rand); }
.hb-legende .l-gehalten { background: var(--sitz-gehalten); border-color: var(--sitz-gehalten-rand); border-style: dashed; }
.hb-legende .l-gesperrt { background: var(--sitz-gesperrt); border-color: var(--sitz-gesperrt-rand); }
.hb-legende .l-gewaehlt { background: var(--sitz-wahl); border-color: var(--sitz-wahl); }
.hb-auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin-top: var(--abstand-3); padding-top: var(--abstand-3); border-top: 1px solid var(--linie); }
.hb-auswahl__summe { font-weight: 700; margin-right: auto; font-variant-numeric: tabular-nums; }

/* Einlass: immer dunkel, groß, fürs Handy am Abend */
.hb-einlass { background: var(--kopf); color: var(--auf-kopf); padding: var(--abstand-4); font-size: 18px; line-height: 26px; max-width: var(--einlass-max); display: flex; flex-direction: column; gap: var(--abstand-3); }
.hb-einlass :focus-visible { box-shadow: none; outline: 3px solid var(--fokus-kopf); outline-offset: 2px; }
.hb-einlass__stand { display: flex; align-items: baseline; gap: var(--abstand-2); }
.hb-einlass__stand b { font: 700 28px/1 var(--font-anzeige); font-variant-numeric: tabular-nums; }
.hb-einlass__stand span { font: 700 11px/16px var(--font-etikett); letter-spacing: 0.12em; text-transform: uppercase; color: var(--auf-kopf-leise); }
.hb-einlass__suche { display: flex; gap: var(--abstand-2); }
.hb-einlass__suche input { flex: 1; min-width: 0; min-height: var(--ziel-handy); padding: 0 var(--abstand-3); border: 2px solid var(--auf-kopf-leise); border-radius: var(--ecke-feld); background: var(--auf-kopf); color: var(--kopf); font: 22px/1 var(--font-code); letter-spacing: 0.08em; }
.hb-einlass__meldung { padding: var(--abstand-3) var(--abstand-4); border-radius: var(--ecke-feld); font: 700 20px/26px var(--font-text); }
.hb-einlass__meldung--ok { background: var(--ok-voll); color: var(--auf-ok-voll); }
.hb-einlass__meldung--warn { background: var(--warn-voll); color: var(--auf-warn-voll); }
.hb-einlass__meldung--fehler { background: var(--fehler-voll); color: var(--auf-fehler-voll); }
.hb-einlass__buchung { background: var(--kopf-aktiv); color: var(--auf-kopf-aktiv); border-radius: var(--ecke-feld); padding: var(--abstand-3) var(--abstand-4); display: flex; flex-direction: column; gap: var(--abstand-3); }
.hb-einlass__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--abstand-2); font-size: 22px; line-height: 28px; font-weight: 700; }
.hb-einlass__zeile .hb-code { font-size: 15px; font-weight: 500; }
.hb-einlass__unter { margin-top: -8px; font-size: 15px; line-height: 20px; }
.hb-plaetze { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.hb-platz { display: inline-flex; flex-direction: column; align-items: center; min-width: 84px; padding: 6px 10px 8px; border: 3px solid transparent; border-radius: var(--ecke-feld); background: var(--kopf); color: var(--auf-kopf); line-height: 1.15; cursor: pointer; font: inherit; }
.hb-platz__nr { font-size: 18px; font-weight: 700; line-height: 24px; }
.hb-platz__zustand { margin-top: 4px; padding: 1px 6px; border-radius: var(--ecke-marke); font: 700 10px/14px var(--font-etikett); letter-spacing: 0.1em; text-transform: uppercase; background: var(--warn-voll); color: var(--auf-warn-voll); }
.hb-platz--bezahlt .hb-platz__zustand { background: var(--ok-voll); color: var(--auf-ok-voll); }
.hb-platz--drin { background: var(--ok-voll); color: var(--auf-ok-voll); }
.hb-platz--drin .hb-platz__zustand { background: var(--auf-ok-voll); color: var(--ok-voll); }
.hb-platz--drin-offen { background: var(--ok-voll); color: var(--auf-ok-voll); }
.hb-platz--drin-offen .hb-platz__zustand { background: var(--fehler-voll); color: var(--auf-fehler-voll); }
.hb-platz[aria-pressed="true"] { border-color: var(--warn-voll); }
.hb-einlass__knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--abstand-2); }
.hb-einlass__knoepfe button { min-height: var(--ziel-handy); border: 0; border-radius: var(--ecke-feld); font: 700 15px/18px var(--font-text); cursor: pointer; }
.hb-einlass__alle { background: var(--kopf); color: var(--auf-kopf); box-shadow: inset 0 0 0 2px var(--auf-kopf-leise); }
.hb-einlass__bezahlen { background: var(--warn-voll); color: var(--auf-warn-voll); }
.hb-einlass__einlassen { background: var(--ok-voll); color: var(--auf-ok-voll); }

/* Dispo-Wahl */
.hb-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--abstand-2); }
.hb-wahl button { min-height: var(--ziel-handy); border: 2px solid var(--rand); border-radius: var(--ecke-feld); background: var(--flaeche); color: var(--tinte); font: 700 14px/18px var(--font-text); cursor: pointer; white-space: nowrap; }
.hb-wahl button:hover { border-color: var(--tinte); }
.hb-wahl button[aria-pressed="true"]::before { content: "✓ "; }
.hb-wahl .ja[aria-pressed="true"] { background: var(--ok-voll); border-color: var(--ok-voll); color: var(--auf-ok-voll); }
.hb-wahl .vielleicht[aria-pressed="true"] { background: var(--warn-voll); border-color: var(--warn-voll); color: var(--auf-warn-voll); }
.hb-wahl .nein[aria-pressed="true"] { background: var(--fehler-voll); border-color: var(--fehler-voll); color: var(--auf-fehler-voll); }

/* Anmeldung */
.hb-anmeldung { max-width: 400px; margin: 0 auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--ecke-flaeche); overflow: hidden; }
.hb-anmeldung__bild { display: block; width: 100%; height: auto; }
.hb-anmeldung__abzeichen { display: block; width: 112px; height: 112px; margin: var(--abstand-5) auto 0; }
.hb-anmeldung__inhalt { padding: var(--abstand-4) var(--abstand-5) var(--abstand-5); display: grid; gap: var(--abstand-3); }
.hb-anmeldung__titel { margin: 0; text-align: center; font: 700 22px/1.1 var(--font-anzeige); letter-spacing: 0.04em; text-transform: uppercase; }

/* Logo-Tafel (nur Vorschau) */
.hb-logotafel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-3); }
.hb-logotafel figure { margin: 0; display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-4); border: 1px solid var(--linie); background: var(--auf-kopf); min-width: 0; }
.hb-logotafel figure.dunkel { background: var(--kopf); border-color: var(--kopf); }
.hb-logotafel figure.dunkel figcaption { color: var(--auf-kopf-leise); }
.hb-logotafel figcaption { font: 700 11px/16px var(--font-etikett); letter-spacing: 0.1em; text-transform: uppercase; color: var(--kopf); }
.hb-logotafel img { display: block; max-width: 100%; height: auto; }
/* C Bausteine */
/* Bausteine, die das Design System (bundle.css) noch nicht hat. Handgepflegt; Quelle ist MOCK_CSS aus bau_mockup.py
   ohne die mk-Rahmenklassen des Mockups. Blöcke C1 bis C14 laut Bauplan 8.1. bau_hb_css.py hängt diese Datei als Teil C an hb.css.
   Keine Versionsnummer in Kommentaren: hb.css ist ohne Anmeldung abrufbar (Pflichtliste P12). */

/* C1 Seitenkopf, Hauptknöpfe, Hilfezeile (sichtbar nur mit data-hilfe="an" am html-Element) */
.hb-seitenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-4); }
.hb-seitenkopf .hb-titel { margin-right: auto; }
.hb-hauptknoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.hb-hilfe { display: none; margin: 0; padding: var(--abstand-2) var(--abstand-3); border-left: 3px solid var(--rand); background: var(--flaeche-tief); color: var(--tinte); font-size: 13px; line-height: 18px; border-radius: 0 var(--ecke-feld) var(--ecke-feld) 0; }
[data-hilfe="an"] .hb-hilfe { display: block; }
.hb-hilfe b { font: 700 11px/16px var(--font-etikett); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); margin-right: 6px; }

/* C2 Symbol vor dem Wort: in Knöpfen und in der Kopfleiste. Im Flex-Knopf zählt der Abstand des Knopfes
   (abstand-2) mit, deshalb dort 6px minus abstand-2, damit netto 6px bleiben. Wortmarke erbt die Kopffarbe. */
.hb-knopf__symbol { display: inline-flex; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; flex: none; }
.hb-knopf > .hb-knopf__symbol, .hb-kopf nav a > .hb-knopf__symbol { margin-right: calc(6px - var(--abstand-2)); }
.hb-kopf nav a { gap: var(--abstand-2); }
.hb-kopf__marke svg.wortmarke { display: block; height: 26px; width: auto; }
/* Gedrückter Schalter in der Kopfleiste (Hilfe an): gefüllt wie der aktive Bereich */
.hb-kopf__knopf--rahmen[aria-pressed="true"] { background: var(--kopf-aktiv); color: var(--auf-kopf-aktiv); border-color: var(--kopf-aktiv); }

/* C3 Aufklappliste: details/summary, ohne Skript bedienbar; oberflaeche.js schließt bei Klick daneben und Escape */
.hb-menue { position: relative; display: inline-block; }
.hb-menue > summary { list-style: none; }
.hb-menue > summary::-webkit-details-marker { display: none; }
.hb-menue > summary .hb-menue__pfeil { width: 18px; height: 18px; flex: none; margin-left: calc(2px - var(--abstand-2)); transition: transform .15s; }
.hb-menue[open] > summary .hb-menue__pfeil { transform: rotate(180deg); }
.hb-menue__liste { position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 240px; padding: 4px 0; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--ecke-feld); box-shadow: var(--menue-schatten); text-align: left; white-space: nowrap; }
.hb-menue--links .hb-menue__liste { left: 0; right: auto; }
.hb-menue__liste a, .hb-menue__liste button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 14px; border: 0; border-radius: 0; background: none; color: var(--tinte); font: 14px/20px var(--font-text); text-align: left; text-decoration: none; cursor: pointer; }
.hb-menue__liste a:hover, .hb-menue__liste button:hover { background: var(--flaeche-tief); }
.hb-menue__liste svg { width: 18px; height: 18px; flex: none; }
.hb-menue__platz { display: inline-block; width: 18px; flex: none; }
.hb-menue__trenner { height: 1px; margin: 4px 0; background: var(--linie); }
.hb-menue__liste .hb-menue__gefahr { color: var(--gefahr); }
/* Offene Liste fest im Fenster (oberflaeche.js setzt is-fest mit top/left): ein Tabellenrahmen mit overflow-x schneidet sie nicht
   mehr ab und wird nicht seitlich schiebbar (Prüfung von Schritt c, Befunde 2 und 15); über Handyfuß (49) und Leiste (50) */
.hb-menue__liste.is-fest { position: fixed; right: auto; z-index: 60; overflow-y: auto; max-width: calc(100vw - 16px); }

/* C4 Suche, zwei Spalten, Liste, Schalter, Segment */
.hb-suche { position: relative; display: flex; align-items: center; }
.hb-suche svg { position: absolute; left: 10px; width: 18px; height: 18px; stroke: var(--tinte-leise); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.hb-suche .hb-eingabe { padding-left: 36px; }
.hb-zwei { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--abstand-6); align-items: start; }
@media (max-width: 1100px) { .hb-zwei { grid-template-columns: 1fr; } }
.hb-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hb-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); min-height: var(--ziel-handy); padding: var(--abstand-2) 0; border-bottom: 1px solid var(--linie); }
.hb-liste li:last-child { border-bottom: 0; }
.hb-liste .hb-liste__rechts { margin-left: auto; }
.hb-liste a.hb-liste__weg { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--ziel-handy); color: var(--tinte); text-decoration: none; }
.hb-liste a.hb-liste__weg::after { content: "›"; font-weight: 700; color: var(--tinte-leise); font-size: 20px; }
.hb-schalter { display: flex; align-items: center; gap: var(--abstand-3); min-height: var(--ziel); cursor: pointer; }
.hb-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hb-schalter__knopf { flex: none; width: 44px; height: 26px; border-radius: 13px; border: 2px solid var(--rand); background: var(--flaeche); position: relative; transition: background .15s, border-color .15s; }
.hb-schalter__knopf::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--rand); transition: transform .15s, background .15s; }
.hb-schalter input:checked + .hb-schalter__knopf { background: var(--tinte); border-color: var(--tinte); }
.hb-schalter input:checked + .hb-schalter__knopf::after { background: var(--flaeche); transform: translateX(18px); }
.hb-schalter input:focus-visible + .hb-schalter__knopf { box-shadow: var(--fokus-ring); }
.hb-schalter__text { display: flex; flex-direction: column; }
.hb-schalter__text small { color: var(--tinte-leise); font-size: 13px; line-height: 18px; }
.hb-schalter__wort { margin-left: auto; }
.hb-schalter--bald { opacity: .55; cursor: default; }   /* Schalter einer Funktion, die es noch nicht gibt (reserviertes Modul) */
.hb-schalter--bald input { pointer-events: none; }
.hb-segment { display: inline-flex; border: 1px solid var(--rand); border-radius: var(--ecke-feld); overflow: hidden; }
.hb-segment label { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ziel); padding: 0 var(--abstand-3); font-size: 14px; font-weight: 700; cursor: pointer; border-right: 1px solid var(--rand); flex: 1; }
.hb-segment label:last-child { border-right: 0; }
.hb-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hb-segment input:checked + span { color: var(--auf-knopf); }
.hb-segment label:has(input:checked) { background: var(--knopf); color: var(--auf-knopf); }
.hb-segment label:has(input:focus-visible) { box-shadow: inset var(--fokus-ring); }

/* C5 Scanner-Fläche und Scannen-Hauptknopf im Einlass */
.hb-scanner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-2); aspect-ratio: 4 / 3; border: 2px dashed var(--auf-kopf-leise); border-radius: var(--ecke-feld); background: #000; color: var(--auf-kopf-leise); font: 700 11px/16px var(--font-etikett); letter-spacing: .12em; text-transform: uppercase; }
.hb-scanner svg { width: 96px; height: 96px; stroke: var(--auf-kopf); fill: none; stroke-width: 2.5; stroke-linecap: round; }
.hb-scanner--hell { background: var(--flaeche-tief); border-color: var(--rand); color: var(--tinte-leise); }
.hb-scanner--hell svg { stroke: var(--tinte); }
.hb-einlass__scan { display: flex; align-items: center; justify-content: center; gap: var(--abstand-2); min-height: 56px; border: 0; border-radius: var(--ecke-feld); background: var(--auf-kopf); color: var(--kopf); font: 700 16px/18px var(--font-text); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.hb-einlass__scan svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.hb-einlass__scan--klein { min-height: var(--ziel-handy); padding: 0 var(--abstand-3); font-size: 13px; flex: none; }
.hb-einlass select.hb-eingabe { background: var(--kopf); color: var(--auf-kopf); border-color: var(--auf-kopf-leise); min-height: var(--ziel-handy); }

/* C6 Schrittzeile, Auswahl-Liste, Kacheln, Summe, bündiger Klappinhalt; dazu Verlauf (Scannen) und Matrix-Ausrichtung */
.hb-schritt { font: 700 11px/16px var(--font-etikett); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); }
.hb-auswahl-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--abstand-1); font-variant-numeric: tabular-nums; }
.hb-auswahl-liste li { display: flex; align-items: center; gap: var(--abstand-2); min-height: var(--ziel); }
.hb-auswahl-liste li select { min-height: 36px; padding: 4px 8px; flex: 1; }
.hb-auswahl-liste li b { margin-left: auto; }
.hb-auswahl-liste li .hb-code { min-width: 68px; }
.hb-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--abstand-2); }
.hb-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 72px; padding: var(--abstand-3) var(--abstand-4); border: 1px solid var(--linie); border-radius: var(--ecke-flaeche); background: var(--flaeche); color: var(--tinte); text-decoration: none; }
.hb-kachel b { font: 700 24px/1 var(--font-anzeige); font-variant-numeric: tabular-nums; }
.hb-kachel span { font: 700 11px/16px var(--font-etikett); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); }
.hb-kachel--warn { border-color: var(--warn-text); background: var(--warn-flaeche); }
.hb-kachel--fehler { border-color: var(--fehler-text); background: var(--fehler-flaeche); }
.hb-kachel--zahl { display: inline-flex; min-height: 0; min-width: 44px; padding: 4px 8px; align-items: center; justify-content: center; flex: none; }   /* nur eine Zahl, etwa in „Offene Dinge“ */
.hb-kachel--zahl b { font-size: 20px; }
.hb-summe { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-3); padding-top: var(--abstand-2); border-top: 1px solid var(--linie); font-weight: 700; font-variant-numeric: tabular-nums; }
.hb-klapp__inhalt--buendig { padding-left: 0; }
.hb-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.hb-verlauf li { display: flex; gap: var(--abstand-2); align-items: baseline; }
.hb-verlauf time { color: var(--auf-kopf-leise); font-variant-numeric: tabular-nums; }
.hb-matrix td, .hb-matrix th { text-align: center; }
.hb-matrix td:first-child, .hb-matrix th:first-child { text-align: left; }
.hb-knopf--nebenweg { background: var(--flaeche); color: var(--tinte); border-color: var(--rand); flex: 0 0 auto; }   /* leiser Zweitknopf im Handyfuß, nicht volle Breite */

/* C7 701 bis 900 px: Kopfleiste mit umbrechenden Bereichen statt Klappmenü (neutralisiert bundle.css, @media max-width 900) */
@media (min-width: 701px) and (max-width: 900px) {
  .hb-kopf { flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-4); padding: var(--abstand-2) var(--abstand-4); }
  .hb-kopf .hb-kopf__menue { display: contents; }
  .hb-kopf .hb-kopf__knopf--menue { display: none; }
  .hb-kopf nav { flex-wrap: wrap; }
  .hb-kopf nav a { padding: 0 var(--abstand-2); font-size: 13px; min-height: var(--ziel); }   /* 40 px wie jedes Ziel am Schreibtisch (Schritt f) */
}
/* Schmale Kopfzeile (Hilfe und Thema nur als Symbol), Handy-Leiste, Mehr-Fläche und Handyfuß gibt es nur unter 700 px */
.hb-kopf__handy, .hb-leiste, .hb-handyfuss { display: none; }
.hb-nur-handy { display: none !important; }

/* C8 Unter 700 px: schmale Kopfzeile, feste Leiste unten, „Mehr“ von unten, Handyfuß mit Hauptknopf, größere Ziele */
@media (max-width: 700px) {
  :root { --leiste-hoehe: 68px; }
  .hb-nur-handy { display: revert !important; }
  .hb-nur-tisch { display: none !important; }
  .hb-kopf { min-height: 46px; gap: var(--abstand-2); padding: 0 var(--abstand-4); }
  .hb-kopf .hb-kopf__menue, .hb-kopf .hb-kopf__knopf--menue { display: none; }
  .hb-kopf__marke { gap: var(--abstand-2); min-width: 0; }
  .hb-kopf__marke svg.wortmarke { height: 22px; }
  .hb-kopf__bereich { padding-left: var(--abstand-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hb-kopf__handy { display: flex; margin-left: auto; gap: 6px; }
  .hb-kopf__handy .hb-kopf__knopf--rahmen { min-height: var(--ziel-handy); min-width: var(--ziel-handy); justify-content: center; padding: 0; }   /* 48 px (P3, f2) */
  .hb-kopf__handy form { display: contents; }
  .hb-buehnenrand { padding: var(--abstand-4); }
  body.hat-leiste { padding-bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom, 0px)); }
  body.hat-handyfuss { padding-bottom: calc(var(--leiste-hoehe) * 2 + env(safe-area-inset-bottom, 0px)); }
  .hb-titel { font-size: 22px; }
  .hb-karte { padding: var(--abstand-3) var(--abstand-4); }
  .hb-formular { max-width: none; }
  .hb-reiter a { min-height: var(--ziel-handy); }
  .hb-knopf { min-height: var(--ziel-handy); }
  .hb-knopf--klein { min-height: 36px; }
  .hb-eingabe { min-height: var(--ziel-handy); }
  .hb-kontrolle { min-height: var(--ziel-handy); }
  .hb-menue__liste a, .hb-menue__liste button { min-height: var(--ziel-handy); font-size: 15px; }
  .hb-zaehlung { gap: var(--abstand-2) var(--abstand-4); }
  .hb-zaehlung__wert b { font-size: 24px; }
  .hb-saalplan { padding: var(--abstand-2); }
  .hb-saalplan svg { max-width: none; }
  .hb-wahl button { font-size: 15px; }
  /* Einlass am Handy: der ganze Inhalt dunkel, nicht nur die Einlass-Fläche */
  body.hb-inhalt--dunkel { background: var(--kopf); color: var(--auf-kopf); }
  body.hb-inhalt--dunkel .hb-einlass { max-width: none; }
  body.hb-inhalt--dunkel .hb-fuss { color: var(--auf-kopf-leise); }
  /* Feste Leiste unten: bis zu vier Ziele und „Mehr“, gleich breite Zellen */
  .hb-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px 4px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--kopf); color: var(--auf-kopf); border-top: 1px solid var(--kopf-linie); }
  .hb-leiste > a, .hb-leiste > .hb-leiste__mehr > summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: var(--ecke-feld); background: none; color: var(--auf-kopf-leise); text-decoration: none; font: 700 10px/12px var(--font-etikett); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; list-style: none; }
  .hb-leiste > .hb-leiste__mehr > summary::-webkit-details-marker { display: none; }
  .hb-leiste > a[aria-current="page"], .hb-leiste > .hb-leiste__mehr > summary[aria-current="page"], .hb-leiste__mehr[open] > summary { background: var(--kopf-aktiv); color: var(--auf-kopf-aktiv); }
  .hb-leiste > a svg, .hb-leiste > .hb-leiste__mehr > summary svg { width: 22px; height: 22px; }
  .hb-leiste :focus-visible { box-shadow: none; outline: 3px solid var(--fokus-kopf); outline-offset: -3px; }
  .hb-leiste__mehr { min-width: 0; }
  /* Aufgeklapptes „Mehr“: Fläche über der Leiste, Einträge mit Symbol und Wort */
  .hb-mehr { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 5; background: var(--kopf); color: var(--auf-kopf); box-shadow: var(--menue-schatten); border-top: 1px solid var(--kopf-linie); max-height: calc(100vh - var(--leiste-hoehe) - 60px); overflow-y: auto; }
  .hb-mehr a, .hb-mehr button { display: flex; flex-direction: row; align-items: center; gap: var(--abstand-3); min-height: var(--ziel-handy); padding: 0 var(--abstand-4); color: var(--auf-kopf); text-decoration: none; border: 0; border-bottom: 1px solid var(--kopf-linie); background: none; width: 100%; font: 15px/22px var(--font-text); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; }
  .hb-mehr a[aria-current="page"] { font-weight: 700; }
  .hb-mehr form { display: contents; }
  .hb-mehr .hb-kopf__bereich { padding: var(--abstand-2) var(--abstand-4) 4px; border: 0; }
  .hb-mehr svg { width: 20px; height: 20px; flex: none; }
  .hb-mehr :focus-visible { box-shadow: none; outline: 3px solid var(--fokus-kopf); outline-offset: -3px; }
  /* Hauptknopf am Handy: bleibt unten über der Leiste stehen */
  .hb-handyfuss { position: fixed; left: 0; right: 0; bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom, 0px)); z-index: 49; display: flex; gap: var(--abstand-2); padding: var(--abstand-2) var(--abstand-4) var(--abstand-3); background: var(--grund); border-top: 1px solid var(--linie); }
  .hb-handyfuss .hb-knopf { flex: 1; min-height: var(--ziel-handy); }
  .hb-handyfuss .hb-knopf--nebenweg { flex: 0 0 auto; }
  .hb-handyfuss--schwarz { background: var(--kopf); border-top-color: var(--kopf-linie); }
}

/* C9 Symbolraster (Seite Anleitung, Sichtprüfung) */
.hb-symbole { display: grid; grid-template-columns: repeat(auto-fill, 88px); gap: var(--abstand-2); }
.hb-symbole figure { box-sizing: border-box; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border: 1px solid var(--linie); border-radius: var(--ecke-feld); background: var(--flaeche-tief); color: var(--tinte); }
.hb-symbole svg { width: 24px; height: 24px; }
.hb-symbole figcaption { font: 12px/16px var(--font-text); color: var(--tinte-leise); text-align: center; overflow-wrap: anywhere; }

/* C10 Fehler-Rot im Einlass (Entscheidung 8): auf dem dunklen Grund ein kräftigeres Rot als im hellen Backoffice */
.hb-einlass, body.hb-inhalt--dunkel { --fehler-voll: #c62828; }

/* C11 Dispo-Einteilung: Personen in Zeilen, Vorstellungen in Spalten; Zellenfarben über die Zustandsflächen */
table.matrix th.spalte { white-space: nowrap; }
table.matrix th.spalte .wt { font-size: 13px; }
table.matrix td.fix, table.matrix th.fix { position: sticky; left: 0; background: var(--flaeche); z-index: 1; white-space: nowrap; }
table.matrix td.zelle { text-align: center; white-space: nowrap; padding: 4px 6px; }
table.matrix td.zelle .hb-kontrolle, table.matrix td.zelle .kontrolle { justify-content: center; margin: 0; }
table.matrix td.zelle.ja { background: var(--ok-flaeche); }
table.matrix td.zelle.nein { background: var(--fehler-flaeche); }
table.matrix td.zelle.vielleicht { background: var(--warn-flaeche); }

/* C12 Bestätigung in der Seite (bestaetigen.js), versteckte Formularteile, Sendesperre (oberflaeche.js) */
.hb-bestaetigen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin: var(--abstand-2) 0; padding: var(--abstand-2) var(--abstand-3); border: 1px solid var(--warn-text); border-radius: var(--ecke-feld); background: var(--warn-flaeche); color: var(--tinte); font-size: 14px; line-height: 20px; }
.hb-bestaetigen__frage { font-weight: 700; margin-right: var(--abstand-2); }
.hb-bestaetigen__felder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
.hb-bestaetigen__felder .hb-eingabe, .hb-bestaetigen__felder input { width: auto; min-height: 32px; max-width: 160px; }
[hidden] { display: none !important; }
[aria-busy="true"] { pointer-events: none; opacity: .6; }

/* C13 „Kein Netz“ (Schritt f) und Untertitel in der Anmeldung (Veranstaltername) */
.hb-keinnetz { display: flex; flex-direction: column; justify-content: center; gap: var(--abstand-4); min-height: 60vh; text-align: center; padding: var(--abstand-4); max-width: 420px; margin: 0 auto; }
.hb-keinnetz .hb-meldung { text-align: left; }
.hb-keinnetz img { margin: 0 auto; }
.hb-anmeldung__untertitel { margin: calc(-1 * var(--abstand-2)) 0 0; text-align: center; font-size: 13px; line-height: 18px; color: var(--tinte-leise); }
.hb-anmeldung .hb-systemband { border-radius: 0; }

/* C14 Druck: Kopf- und Handyleiste, Hauptknöpfe und Hilfezeilen nicht drucken */
@media print { .hb-kopf, .hb-leiste, .hb-handyfuss, .hb-hauptknoepfe, .hb-hilfe, .hb-fuss { display: none !important; } }

/* C15 Kopfleiste am schmalen Schreibtisch, 901 bis 1260 px (Pflichtliste P18): zwei Zeilen statt seitlichem Überlauf – oben Wortmarke
   mit Bereich und rechts Name · Abmelden · Hilfe · Thema, darunter die Bereiche mit Symbol und Wort. Der Name ist nur hier gekürzt
   (12em, ganz im title); auf den anderen Breiten steht er ganz. 1261 bis 1340 px eine Zeile ohne Bereichsnamen neben der Wortmarke, solange die Bereiche den aktiven markieren (mit
   „Einstellungen“ lief sie dort sonst bis 32 px über, Messung aus Schritt e); ab 1341 px wie bisher. Jede Breite ab 901 px bricht
   lieber um, als seitlich zu laufen (langer Name, viele Module): dann rutscht Name · Abmelden · Hilfe · Thema rechtsbündig in eine
   zweite Zeile, die Bereiche bleiben 40 px hoch. */
.hb-kopf__bereich { max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* Seitentitel als Bereichsname (P9) */
@media (min-width: 901px) {
  .hb-kopf { flex-wrap: wrap; row-gap: 0; }
  .hb-kopf nav a { min-height: var(--ziel); }
}
@media (min-width: 901px) and (max-width: 1260px) {
  .hb-kopf { column-gap: var(--abstand-4); padding: var(--abstand-2) var(--abstand-4) 0; }
  .hb-kopf__name { display: inline-block; max-width: 12em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .hb-kopf__wer { order: 1; }
  .hb-kopf nav { order: 2; flex: 1 0 100%; flex-wrap: wrap; }
  .hb-kopf nav a { min-height: var(--ziel); padding: 0 var(--abstand-2); }
}
@media (min-width: 1261px) and (max-width: 1340px) {
  .hb-kopf:has(nav a[aria-current="page"]) .hb-kopf__bereich { display: none; }
}

/* C16 Fokusrahmen auf hellen Flächen im dunklen Kopf (Pflichtliste P24): aktiver Bereich, Bereich unter der Maus, gedrückter
   Hilfe-Schalter, aktives Ziel der Handy-Leiste und offenes „Mehr“ tragen kopf-aktiv (hell); dort ist der Rahmen dunkel
   (auf-kopf-aktiv) statt fokus-kopf (hell auf hell, 1 : 1). Nachgerechnet in deploy/v3/kontrast.py, in beiden Themen. */
.hb-kopf nav a:is(:hover, [aria-current="page"]):focus-visible,
.hb-kopf__knopf--rahmen[aria-pressed="true"]:focus-visible,
.hb-leiste > a[aria-current="page"]:focus-visible,
.hb-leiste > .hb-leiste__mehr > summary[aria-current="page"]:focus-visible,
.hb-leiste__mehr[open] > summary:focus-visible { outline-color: var(--auf-kopf-aktiv); }

/* C17 App-Hinweis auf der Startseite (Schritt f): Meldung mit Knopf „Ausblenden“ am Ende, am Handy darunter in voller Breite */
.hb-meldung--app { flex-wrap: wrap; align-items: center; }
.hb-meldung--app p { flex: 1 1 12em; }
.hb-meldung--app .hb-knopf { flex: 1 0 100%; }

/* C18 Querformat mit Kamera-Aussparung (viewport-fit=cover in basis.html und huelle.html; Nachbesserung f1, Befund 16): Kopfleiste,
   Inhalt und Fußzeile halten links und rechts mindestens den sicheren Rand des Geräts ein. Ohne Aussparung ist env() 0 und es bleibt
   der bisherige Abstand je Breite (Kopf 24 px ab 1261 px, sonst 16 px; Inhalt 24 px, unter 700 px 16 px; Fuß 24 px). Handy-Leiste und
   Handyfuß gibt es nur bis 700 px, quer ist jedes iPhone mit Aussparung breiter. Prüfen lässt sich das nur am iPhone quer. */
.hb-kopf { padding-left: max(var(--abstand-5), env(safe-area-inset-left, 0px)); padding-right: max(var(--abstand-5), env(safe-area-inset-right, 0px)); }
.hb-buehnenrand, .hb-fuss { padding-left: max(var(--abstand-5), env(safe-area-inset-left, 0px)); padding-right: max(var(--abstand-5), env(safe-area-inset-right, 0px)); }
@media (max-width: 1260px) {
  .hb-kopf { padding-left: max(var(--abstand-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--abstand-4), env(safe-area-inset-right, 0px)); }
}
@media (max-width: 700px) {
  .hb-buehnenrand { padding-left: max(var(--abstand-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--abstand-4), env(safe-area-inset-right, 0px)); }
}

/* C19 Handy-Kopfzeile ohne Überlauf (Nachbesserung e, Befund 12; Pflichtliste P7): ist kein Bereich markiert, steht der Seitentitel als
   Bereichsname (P9) und kann lang sein („Gastro Probestück Mo 12.10.2026, 20:00 Uhr“). Die Marke darf dann schrumpfen, nur der Name
   wird mit Auslassungszeichen gekürzt; Wortmarke, Hilfe und Thema behalten ihre Breite und bleiben im Bild. */
@media (max-width: 700px) {
  .hb-kopf__marke { flex: 0 1 auto; }
  .hb-kopf__marke svg.wortmarke, .hb-kopf__marke img { flex: none; }
  .hb-kopf__bereich { min-width: 0; }
  .hb-kopf__handy { flex: none; }
}

/* C20 Notbetrieb (Pflichtpunkt P25): Felder, die nur angesehen werden, stehen in einem gesperrten fieldset statt in einem Formular */
.hb-nur-ansehen { border: 0; margin: 0; padding: 0; min-width: 0; }
.hb-nur-ansehen .hb-eingabe:disabled { background: var(--flaeche-tief); color: var(--tinte); }   /* gesperrt erkennbar, Text lesbar */

/* C21 Aus uebergang.css übernommen (Schritt f2; Pflichtliste P14, P21, P41), damit uebergang.css ohne Änderung im Aussehen wegfallen kann.
   Gemessen: je Seite und Breite (375, 1280, 1920 px) die berechneten Stile aller Elemente mit und ohne uebergang.css; übernommen ist,
   was ohne die Datei anders aussähe. Gleiche Selektoren wie dort, gleiche Reihenfolge (nach bundle.css), daher gleiche Wirkung.
   Nicht übernommen (Aussehen wie im Design System, gemessen ohne Überlauf): die alten Handy-Regeln für #buchungstabelle und
   #vorstellungstabelle (Abstände der Listenzeilen), Rand und Ausrichtung der Häkchen (Klickfläche ist das Etikett), die dunkle
   Grundschrift 18 px des Einlass am Handy (Kopfleiste und Leiste dort wie auf allen Seiten 15 px). */
/* Formularelemente erben die Schrift (sonst 13,33 px Arial im Browser: Hilfe, Thema, Abmelden, Felder ohne Klasse; P21) */
input, select, textarea, button { font: inherit; }
/* Inhalt höchstens 1280 px breit und mittig, Luft unten (P21; gemessen bei 1920 px sonst x=0, w=1920) */
main.hb-buehnenrand { max-width: var(--inhalt-max); margin: 0 auto; padding-bottom: var(--abstand-7); }
.hb-reiter { margin-bottom: var(--abstand-4); }
/* Meldungen auf dem dunklen Einlass-Inhalt in dunkler Schrift (App-Hinweis, Notbetrieb) */
body.hb-inhalt--dunkel .hb-meldung { color: var(--tinte); }
/* Kamerabild beim Scannen (Inventar; Einlass hat zusätzlich .hb-einlass #scanner) */
#scanner { background: #000; border-radius: var(--ecke-feld); overflow: hidden; margin-bottom: var(--abstand-3); }
/* Saalplan (P14): Ergänzungen zu den hb-sitz-Regeln aus bundle.css (seatmap.js gibt beide Klassensätze aus): Kreis-Sitze der mobilen
   Reihen, nicht freigegebene Zusatzsessel, Beschriftung, Plus-Felder des Editors, Legende. In beiden Themen über die Tokens. */
.saalplan-svg { width: 100%; max-width: 640px; height: auto; display: block; }
.hb-sitz circle { fill: var(--sitz-frei); stroke: var(--sitz-frei-rand); stroke-width: 1.5; }
.hb-sitz--reserviert circle { fill: var(--sitz-reserviert); stroke: var(--sitz-reserviert-rand); }
.hb-sitz--bezahlt circle { fill: var(--sitz-bezahlt); stroke: var(--sitz-bezahlt-rand); }
.hb-sitz--haus circle { fill: var(--sitz-haus); stroke: var(--sitz-haus-rand); }
.hb-sitz--gehalten circle { fill: var(--sitz-gehalten); stroke: var(--sitz-gehalten-rand); stroke-dasharray: 3 2; }
.hb-sitz--gesperrt circle, .hb-sitz--belegt rect, .hb-sitz--belegt circle { fill: var(--sitz-gesperrt); stroke: var(--sitz-gesperrt-rand); }
.hb-sitz--belegt { cursor: default; }
.hb-sitz--belegt text { fill: var(--tinte-leise); }
.hb-sitz--inaktiv circle { fill: var(--flaeche); stroke: var(--rand); stroke-dasharray: 2 2; }
.hb-sitz--gewaehlt circle { fill: var(--sitz-wahl); stroke: var(--sitz-wahl); stroke-width: 2.5; }
/* Zusatzsessel, für die Vorstellung nicht freigegeben: hell mit Warnrand, gestrichelt */
.hb-sitz--zusatz-offen rect, .hb-sitz--zusatz-offen circle { fill: var(--warn-flaeche); stroke: var(--warn-text); stroke-dasharray: 3 2; }
.hb-sitz--zusatz-offen text { fill: var(--warn-text); }
.hb-sitz text.klein { font-size: 7.5px; }
.hb-reihe-text.preis-text { fill: var(--tinte); font-weight: 700; }
.hb-buehne text, .hb-buehne-text { letter-spacing: 3px; }
.slot { cursor: pointer; }
.slot rect { fill: none; stroke: var(--rand); stroke-dasharray: 2 2; }
.slot text { fill: var(--tinte-leise); font-size: 14px; }
.slot:hover rect { stroke: var(--tinte); fill: var(--flaeche-tief); }
.slot:hover text { fill: var(--tinte); }
.hb-legende .l-zusatz { background: var(--warn-flaeche); border-color: var(--warn-text); border-style: dashed; }
.hb-legende .l-slot { background: none; border-style: dashed; border-color: var(--rand); }
.hb-legende .l-inaktiv { background: var(--flaeche); border-color: var(--rand); border-style: dashed; }
/* Symbol als Verweis auf den Satz der Seite (P38, symbole.verweis): dieselben Werte wie die Attribute von symbole.svg */
.hb-sym { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Sitz und Plus-Feld mit der Tastatur (P42, seatmap.js): sichtbarer Fokus am Sitz selbst, in beiden Themen */
.hb-sitz:focus, .slot:focus { outline: none; }
.hb-sitz:focus-visible rect, .hb-sitz:focus-visible circle, .slot:focus-visible rect { stroke: var(--fokus); stroke-width: 3; stroke-dasharray: none; }
@media (max-width: 700px) {
  .saalplan-svg { max-width: none; }   /* passt in die Breite; „Plan vergrößern“ schaltet auf 560 px mit Verschieben */
  .plan-gross .saalplan-svg { min-width: 560px; }
}

/* C22 Zielgrößen nach dem Löschen des Übergangs-Stylesheets (Schritt f2, Stufe 2b): gemessen auf jeder angemeldeten Seite bei 1280, 1920
   und 375 px, hell und dunkel, fünf Konten. Am Schreibtisch hatten Hilfe und Thema 32 px, Name und Abmelden 22 px, die Wortmarke 26 px;
   am Handy die Wortmarke 22 px; der Direktlink der Produktion 22 px. Soll: 40 px am Schreibtisch, 48 px am Handy (Konzept 4.4, P4).
   Name und Abmelden bleiben Textlinks (inline-block, damit das Kürzen mit … zwischen 901 und 1260 px weiter greift). */
.hb-kopf__marke { min-height: var(--ziel); }
.hb-kopf__wer .hb-kopf__knopf--rahmen { min-height: var(--ziel); min-width: var(--ziel); justify-content: center; }
.hb-kopf__wer > a, .hb-kopf__wer .hb-kopf__knopf:not(.hb-kopf__knopf--rahmen) { display: inline-block; line-height: var(--ziel); }
.hb-reihe > a.hb-code { display: inline-flex; align-items: center; min-height: var(--ziel); }
@media (max-width: 700px) {
  .hb-kopf__marke { min-height: var(--ziel-handy); }
  .hb-reihe > a.hb-code { min-height: var(--ziel-handy); }
}

/* C23 Nachbesserung zum Abschluss von f2: Meldungen oben mit Abstand zum Inhalt; holt oberflaeche.js sie nach einem Sprung mit Anker vor eine
   Tabellenzeile, stehen sie als eigene Zeile darüber (Befund 19), ebenso die Fehlerzeile einer Saalplan-Reihe (Befunde 16, 17). Der Saalplan
   der Kassa schiebt sich nur selbst seitlich, Legende und Auswahl bleiben stehen (Befund 21). */
main > #meldungen-oben { margin-bottom: var(--abstand-4); }
.hb-tabelle tr.hb-zeilenmeldung td { padding: var(--abstand-2) 10px 0; border-bottom: 0; background: none; }
.hb-tabelle tr.hb-zeilenmeldung .hb-meldung { margin: 0 0 var(--abstand-2); }
.hb-saalplan__schieben { overflow-x: auto; }
@media (max-width: 700px) {
  .hb-tabelle--liste tr.hb-zeilenmeldung { border-bottom: 0; padding-bottom: 0; }
  .hb-tabelle--liste tr.hb-zeilenmeldung td { padding: 0; }
}

/* C24 Schmaler Schreibtisch (Pflichtpunkt P44; Entscheidung Thomas 12. Oktober 2026 zu Bauplan 9.1 Frage 7: Spalten ausblenden). Gilt nur für
   die drei Tabellen mit data-nebenspalten (Buchungsliste #buchungstabelle, Gutscheine #gutscheintabelle, Produktion), nur am
   Bildschirm (screen): Druck, Handy-Liste (bis 700 px) und alle anderen Tabellen unverändert. Gemessen im Rahmen (scrollWidth des
   .hb-tabelle-rahmen), nicht an der Seite.
   701 bis 1099 px: Nebenspalten mit hb-nicht-schmal fallen weg, ihre Angaben stehen mit hb-nur-schmal klein in einer Nachbarzelle
   (Buchungsliste Kanal und Seit unter dem Status; Gutscheine Art unter der Nummer, Zahlung und Rechnung unter Ausgegeben; Produktion
   Spielstätte · Bestuhlung unter dem Beginn, Haus und Einlass unter dem Status). Die Karte der Buchungsliste hat 16 statt 24 px Rand,
   die Marke „Mail fehlgeschlagen“ und „angerechnet …“ der Gutscheine brechen um, die Marke „Gedruckt, frei“ nur bis 799 px
   (sonst 701 px +33, 720 px +14).
   1100 bis 1279 px: alle Spalten, engere Zellen und umbrechende Aktionszelle wie verkauf.css bis 1100 px (sonst ab 1101 px
   Buchungsliste +153, Produktion +69, Gutscheine +7; Nachbesserung P44, Befund 2).
   701 bis 1279 px: Einlösen der Gutscheine (Feld, Knopf, „…“) bricht um (sonst 1100 px +47); ab 1280 px wie vorher in einer Zeile.
   Ab 701 px: die E-Mail unter dem Namen der Buchung bricht auch ohne Leerzeichen um (sonst mit zehn Plätzen und E-Mails um 60 Zeichen
   bei 1280 bis 1440 px +36). Beträge mit hb-ganz und Codes bleiben ganz.
   Die Bestätigung aus dem „…“-Menü steht am Schreibtisch als eigene Zeile über der betroffenen Zeile (bestaetigen.js, data-bestaetigen-zeile),
   nicht in der Aktionszelle (dort sonst bis +308 px; Befund 3); sie bleibt links im sichtbaren Teil des Rahmens stehen (sticky, Breite
   des Rahmens). Die Buchungsliste steht bis 840 px als Liste wie am Handy (C25); für sie gilt C24 erst ab 841 px. */
.hb-nur-schmal { display: none !important; }
.hb-ganz { white-space: nowrap; }   /* Betrag nicht zwischen Zahl und € umbrechen, wo die Zelle sonst umbrechen darf */
.hb-verkauf #buchungstabelle td[data-label="Bezahlt"] small.hb-umbricht { white-space: normal; }   /* „Guthaben … wird angerechnet“ bricht in jeder Breite zwischen Wörtern um, der Betrag bleibt ganz (sonst Tabelle 841 px +80, 1280 px +41; Liste bis 840 px wie bei 700 px) */
@media screen and (min-width: 701px) and (max-width: 1099.98px) {
  table[data-nebenspalten] .hb-nicht-schmal { display: none !important; }
  table[data-nebenspalten] .hb-nur-schmal { display: revert !important; }
  .hb-verkauf #buchungstabelle td[data-label="Name"] small .hb-marke { white-space: normal; overflow-wrap: normal; }   /* nur zwischen Wörtern */
  .hb-verkauf #gutscheintabelle td.hb-zahl small { white-space: normal; }
  .hb-verkauf .hb-karte:has(> .hb-tabelle-rahmen > #buchungstabelle) { padding-left: var(--abstand-4); padding-right: var(--abstand-4); }
}
@media screen and (min-width: 701px) and (max-width: 799.98px) {
  .hb-verkauf #gutscheintabelle td[data-label="Status"] .hb-marke { white-space: normal; }
}
@media screen and (min-width: 1100px) and (max-width: 1279.98px) {
  .hb-verkauf table[data-nebenspalten] th, .hb-verkauf table[data-nebenspalten] td { padding-left: 6px; padding-right: 6px; }
  .hb-verkauf table[data-nebenspalten] td.hb-aktionen { white-space: normal; }
  .hb-verkauf table[data-nebenspalten] td.hb-aktionen > * { margin: 2px 0 2px var(--abstand-2); }
}
@media screen and (min-width: 701px) {
  .hb-verkauf #buchungstabelle td[data-label="Name"] small { overflow-wrap: anywhere; }   /* E-Mail ohne Leerzeichen */
  .hb-tabelle tr.hb-zeilenbestaetigung .hb-bestaetigen { position: sticky; left: 10px; box-sizing: border-box; }
}
@media screen and (min-width: 701px) and (max-width: 1279.98px) {
  .hb-verkauf #gutscheintabelle td.hb-aktionen { white-space: normal; }
  .hb-verkauf #gutscheintabelle td.hb-aktionen > form.hb-einloesen { flex-wrap: wrap; justify-content: flex-end; }
}

/* C25 Buchungsliste bis 840 px als Liste wie am Handy (Pflichtpunkt P44; Entscheidung Thomas 12. Oktober 2026 zu Bauplan 9.1 Frage 7:
   „ja, wie am Handy als Liste“). Die Buchungsliste (#buchungstabelle, Vorstellungsseite mit Plan und Buchungen) lief als Tabelle bei 701 bis
   800 px trotz C24 bis 135 px über; iPads hochkant sind 744 bis 834 px breit. Darum steht sie von 701 bis 840 px (nur Bildschirm) genau
   wie unter 701 px: dieselben Regeln wie bundle.css (hb-tabelle--liste), C8, C23 und verkauf.css (max-width 700), hier auf die eine Tabelle
   beschränkt; ab 841 px die Tabelle mit C24. Dieselben Zellen, Aktionen und Reihenfolge, Kanal und Seit wie am Handy nicht gezeigt, keine
   Kleinzeile aus C24, Ziele 48 px wie am Handy. Kopfzeile, Handy-Leiste und Handyfuß wechseln weiter erst unter 701 px; Gutscheine und
   Produktion bleiben bei C24. Die Bestätigung aus dem „…“-Menü bleibt in der Liste in der Aktionszelle (bestaetigen.js fragt, ob die
   Tabelle als Liste steht). Ändert sich eine der Handy-Regeln, gehört die Änderung auch hierher (pruef_f2.py vergleicht die berechneten
   Stile der Liste bei 700 und 701 bis 840 px, auch mit Meldungszeile und offener Bestätigung).
   Nachbesserung (Prüfung von C25): Kante 840/841 px mit .98 geschlossen wie die übrigen (bei 840,5 px durch Zoom oder Skalierung galt
   vorher weder Liste noch 4-px-Rand, zehn Plätze +3); Meldungszeile mit 8/10 px Innenabstand wie am Handy (verkauf.css; die ID machte
   sie sonst bündig, Befunde 3, 4); die Bestätigung in der Aktionszelle behält ihren Abstand 8 px oben und unten wie am Handy (dort gilt
   nur „> * + *“, Befund 6). Die Kante 700/701 px hat dieselbe Lücke für alle Handy-Regeln (bei 700,5 px weder Handy noch Schreibtisch;
   Bauplan 9.3), sie gehört nicht zu C25. */
@media screen and (min-width: 701px) and (max-width: 840.98px) {
  #buchungstabelle, #buchungstabelle tbody, #buchungstabelle tr, #buchungstabelle td { display: block; }
  #buchungstabelle thead { display: none; }
  #buchungstabelle tr { padding: var(--abstand-2) 0; border-bottom: 1px solid var(--linie); }
  #buchungstabelle td { border: 0; padding: 2px var(--abstand-3); text-align: left; }
  #buchungstabelle td[data-label]::before { content: attr(data-label) " "; font: 700 11px/16px var(--font-etikett); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-leise); }
  #buchungstabelle .hb-nur-tisch, #buchungstabelle .hb-nur-schmal { display: none !important; }
  #buchungstabelle tr.hb-zeilenmeldung { border-bottom: 0; padding-bottom: 0; }
  #buchungstabelle tr.hb-zeilenmeldung td { padding: 0; }
  .hb-verkauf #buchungstabelle tr.hb-zeilenmeldung td { padding: var(--abstand-2) 10px 0; }   /* verkauf.css schlägt am Handy C23 */
  .hb-verkauf #buchungstabelle td.hb-zahl { text-align: left; }
  .hb-verkauf #buchungstabelle td.hb-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); padding-top: var(--abstand-2); white-space: normal; text-align: left; }
  .hb-verkauf #buchungstabelle td.hb-aktionen > * { margin: 0; }   /* hebt verkauf.css 701–1100 px auf */
  .hb-verkauf #buchungstabelle td.hb-aktionen > .hb-bestaetigen { margin: var(--abstand-2) 0; }   /* wie .hb-bestaetigen am Handy */
  .hb-verkauf #buchungstabelle .hb-aktionen .hb-menue__liste { left: 0; right: auto; }
  .hb-verkauf #buchungstabelle .hb-knopf, .hb-verkauf #buchungstabelle .hb-knopf--klein,
  .hb-verkauf #buchungstabelle .hb-bestaetigen__felder .hb-eingabe, .hb-verkauf #buchungstabelle .hb-bestaetigen__felder input { min-height: var(--ziel-handy); }
  .hb-verkauf #buchungstabelle .hb-bestaetigen__felder input { font-size: 16px; max-width: none; flex: 1 1 120px; }
  .hb-verkauf #buchungstabelle .hb-menue__liste a, .hb-verkauf #buchungstabelle .hb-menue__liste button { min-height: var(--ziel-handy); font-size: 15px; }
  .hb-verkauf #buchungstabelle td[data-label="Name"] small { overflow-wrap: normal; }   /* C24 (ab 701 px) zurück auf den Stand am Handy */
  .hb-verkauf #buchungstabelle td[data-label="Name"] small .hb-marke { white-space: nowrap; }
}
/* Gleich über der Kante (841 bis 899 px) ist die Tabelle mit zehn Plätzen je Buchung und langen Namen mit 6 px Zellenrand 3 px breiter als
   der Rahmen (gemessen bei 841 px); mit 4 px bleiben rund 30 px Luft. Ab 900 px wie C24. Meldungs- und Bestätigungszeile behalten ihre
   10 px (Nachbesserung, Befund 7). */
@media screen and (min-width: 840.99px) and (max-width: 899.98px) {
  .hb-verkauf #buchungstabelle th, .hb-verkauf #buchungstabelle tr:not(.hb-zeilenmeldung) > td { padding-left: 4px; padding-right: 4px; }
}