/* 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 3.0.0 */
/* Bausteine 3.0.0, 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. */

/* 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); }

/* 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: 36px; }
}
/* 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: 36px; min-width: 36px; justify-content: center; padding: 0; }
  .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; } }