/* kartenbuero.css – erzeugt von deploy/kartenbuero/bau_kb_css.py, nicht von Hand ändern. Quellen: tokens.json, bundle.css */
/* A Werte aus tokens.json */
: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;
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 48px;
  --ecke-billett: 10px;
  --ecke-feld: 6px;
  --ecke-sitz: 4px;
  --ecke-marke: 999px;
  --ziel: 48px;
  --kopf-hoehe: 76px;
  --logo-max-hoehe: 64px;
  --logo-max-breite: 240px;
  --monogramm: 56px;
  --sitz: 26px;
  --inhalt-max: 1040px;
  --billett-max: 760px;
  --bon-breite: 302px;
  --fokus-ring: 0 0 0 2px #ffffff, 0 0 0 5px #1f1e1c;
  --kopf: #1f1e1c;
  --auf-kopf: #f7f2e8;
  --auf-kopf-leise: #bbb7af;
  --akzent: #eaa41b;
  --auf-akzent: #1f1e1c;
  --flaeche: #f7f2e8;
  --karte: #ffffff;
  --karte-tief: #f1ece2;
  --tinte: #1f1e1c;
  --tinte-leise: #5c5850;
  --linie: #e4ded2;
  --rand: #8a8478;
  --billettgelb: #eaa41b;
  --papier: #f7f2e8;
  --knopf-aus: #ece7dd;
  --auf-knopf-aus: #5c5850;
  --ok-text: #1f6b2a;
  --ok-flaeche: #e2f0e3;
  --warn-text: #7a5200;
  --warn-flaeche: #fcefc7;
  --fehler-text: #b3261e;
  --fehler-flaeche: #fbe7e4;
  --info-text: #1f4fa8;
  --info-flaeche: #e3ecfb;
  --sitz-frei: #e6f4ea;
  --sitz-frei-rand: #3f8f4f;
  --sitz-vergeben: #cdc7bc;
  --sitz-vergeben-rand: #a39c90;
  --sitz-gewaehlt: var(--akzent);
  --auf-sitz-gewaehlt: var(--auf-akzent);
  --sitz-gewaehlt-rand: var(--tinte);
  --buehne: var(--kopf);
  --auf-buehne: var(--auf-kopf);
  --fokus: var(--tinte);
  --fokus-kopf: var(--auf-kopf);
  --systemband: #b3261e;
  --systemband-tief: #8f1c16;
  --auf-systemband: #ffffff;
}
/* B bundle.css des Design Systems, unverändert */
/* Kartenbüro – Bausteine der Kartenseite fürs Publikum. Werte aus tokens.json.
   Kopf-, Akzent- und Flächenfarbe stellt der Veranstalter frei ein: der Server setzt dann
   --kopf, --auf-kopf, --auf-kopf-leise, --akzent, --auf-akzent und --flaeche (README: Freie Farben).
   Alles andere hier leitet sich davon ab. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--flaeche); color: var(--tinte); font-family: var(--font-text); font-size: 17px; line-height: 26px; -webkit-text-size-adjust: 100%; }
a { color: var(--tinte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.kb-leise { color: var(--tinte-leise); }
.kb-klein { font-size: 14px; line-height: 20px; }
.kb-code { font-family: var(--font-code); letter-spacing: 0.08em; }
.kb-inhalt { max-width: var(--inhalt-max); margin: 0 auto; padding: var(--abstand-6) var(--abstand-5) var(--abstand-7); }
.kb-abschnitt { margin: 0 0 var(--abstand-3); font: 700 15px/20px var(--font-anzeige); letter-spacing: 0.12em; text-transform: uppercase; }
.kb-karte { background: var(--karte); border-radius: var(--ecke-feld); padding: var(--abstand-5); }
.kb-karte > h2 { margin: 0 0 var(--abstand-3); font: 700 18px/24px var(--font-anzeige); letter-spacing: 0.06em; text-transform: uppercase; }
.kb-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: var(--abstand-5); align-items: start; }
@media (max-width: 860px) { .kb-raster { grid-template-columns: 1fr; } }

/* Billettform: eingezogene Ecken als Maske; für Logo-Platte, Vorstellung und Billett */
.kb-billettform { --r: var(--ecke-billett);
  -webkit-mask: radial-gradient(circle var(--r) at top left, #0000 98%, #000) top left, radial-gradient(circle var(--r) at top right, #0000 98%, #000) top right, radial-gradient(circle var(--r) at bottom left, #0000 98%, #000) bottom left, radial-gradient(circle var(--r) at bottom right, #0000 98%, #000) bottom right;
  -webkit-mask-size: 51% 51%; -webkit-mask-repeat: no-repeat;
  mask: radial-gradient(circle var(--r) at top left, #0000 98%, #000) top left, radial-gradient(circle var(--r) at top right, #0000 98%, #000) top right, radial-gradient(circle var(--r) at bottom left, #0000 98%, #000) bottom left, radial-gradient(circle var(--r) at bottom right, #0000 98%, #000) bottom right;
  mask-size: 51% 51%; mask-repeat: no-repeat; }

/* Systemband */
.kb-systemband { padding: 6px var(--abstand-4); background: repeating-linear-gradient(-45deg, var(--systemband) 0 14px, var(--systemband-tief) 14px 28px); color: var(--auf-systemband); font: 700 13px/18px var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.kb-systemband small { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.kb-systemband--demo { background: var(--karte); color: var(--tinte); box-shadow: inset 0 -1px 0 var(--linie); }

/* Kopf: der Veranstalter vorne */
.kb-kopf { display: flex; align-items: center; gap: var(--abstand-4); min-height: var(--kopf-hoehe); padding: var(--abstand-3) var(--abstand-5); background: var(--kopf); color: var(--auf-kopf); }
.kb-kopf__marke { display: flex; align-items: center; gap: var(--abstand-3); min-width: 0; color: inherit; text-decoration: none; }
/* Logo des Veranstalters: Höhe nach Fläche (--logo-h rechnet der Server, README Baustein Logo), Breite folgt dem Seitenverhältnis */
.kb-logo { display: block; flex: none; width: auto; height: var(--logo-h, 40px); max-width: var(--logo-max-breite); max-height: var(--logo-max-hoehe); }
.kb-platte { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 6px 18px; background: var(--karte); --r: 9px; }
.kb-platte--dunkel { background: var(--tinte); }
.kb-kopf__monogramm { display: block; flex: none; width: var(--monogramm); height: var(--monogramm); }
.kb-kopf__name { font: 700 20px/1.1 var(--font-anzeige); letter-spacing: 0.06em; text-transform: uppercase; text-wrap: balance; }
.kb-kopf nav { display: flex; flex-wrap: wrap; gap: var(--abstand-1); margin-left: auto; }
.kb-kopf nav a { display: inline-flex; align-items: center; min-height: var(--ziel); padding: 0 var(--abstand-3); border-radius: var(--ecke-feld); color: var(--auf-kopf); font: 700 14px/18px var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.kb-kopf nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kb-kopf nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--auf-kopf); border-radius: 0; }
.kb-kopf :focus-visible, .kb-banner :focus-visible { box-shadow: none; outline: 3px solid var(--fokus-kopf); outline-offset: 2px; }
.kb-kopf--schmal { flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); }
  .kb-kopf--schmal .kb-platte { padding: 5px 14px; }
  .kb-kopf--schmal .kb-logo { height: calc(var(--logo-h, 40px) * 0.75); max-width: 180px; }
  .kb-kopf--schmal .kb-kopf__monogramm { width: 46px; height: 46px; }
  .kb-kopf--schmal .kb-kopf__name { font-size: 17px; }
  .kb-kopf--schmal nav a { padding: 0 var(--abstand-2); }
@media (max-width: 640px) {
  .kb-kopf { flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); }
  .kb-kopf .kb-platte { padding: 5px 14px; }
  .kb-kopf .kb-logo { height: calc(var(--logo-h, 40px) * 0.75); max-width: 180px; }
  .kb-kopf .kb-kopf__monogramm { width: 46px; height: 46px; }
  .kb-kopf .kb-kopf__name { font-size: 17px; }
  .kb-kopf nav a { padding: 0 var(--abstand-2); }
}

/* Banner der Produktion: setzt den Kopf fort, unten ein Abriss-Rand */
.kb-banner { position: relative; padding: var(--abstand-4) var(--abstand-5) calc(var(--abstand-6) + 4px); background: var(--kopf); color: var(--auf-kopf); }
.kb-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px; background: radial-gradient(circle 6px at 50% 100%, var(--flaeche) 97%, #0000) 0 0 / 20px 8px repeat-x; }
.kb-banner__innen { max-width: var(--inhalt-max); margin: 0 auto; }
.kb-pfad { margin: 0 0 var(--abstand-2); font-size: 14px; line-height: 20px; color: var(--auf-kopf-leise); }
.kb-pfad a { color: var(--auf-kopf); }
.kb-banner h1 { margin: 0; font: 700 36px/1.05 var(--font-anzeige); letter-spacing: 0.03em; text-transform: uppercase; text-wrap: balance; }
.kb-banner p { margin: var(--abstand-2) 0 0; max-width: 62ch; color: var(--auf-kopf-leise); }
@media (max-width: 640px) { .kb-banner { padding: var(--abstand-3) var(--abstand-4) calc(var(--abstand-5) + 4px); } .kb-banner h1 { font-size: 28px; } }

/* Vorstellung: ein Billett mit Datums-Abriss */
.kb-termine { display: flex; flex-direction: column; gap: var(--abstand-3); margin: 0; padding: 0; list-style: none; }
.kb-vorstellung { --stub: var(--akzent); --auf-stub: var(--auf-akzent); display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; background: var(--karte); }
.kb-vorstellung__datum { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--abstand-3) var(--abstand-2); background: var(--stub); color: var(--auf-stub); border-right: 3px dotted var(--flaeche); text-align: center; }
.kb-vorstellung__datum::before, .kb-vorstellung__datum::after { content: ""; position: absolute; right: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--flaeche); }
.kb-vorstellung__datum::before { top: -8px; } .kb-vorstellung__datum::after { bottom: -8px; }
.kb-vorstellung__datum small { font: 700 12px/16px var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; }
.kb-vorstellung__datum b { font: 700 34px/1 var(--font-anzeige); }
.kb-vorstellung__text { min-width: 0; padding: var(--abstand-4) var(--abstand-5); }
.kb-vorstellung h2 { margin: 0 0 var(--abstand-1); font: 700 22px/1.15 var(--font-anzeige); letter-spacing: 0.03em; text-transform: uppercase; text-wrap: balance; }
.kb-vorstellung p { margin: 0; }
.kb-vorstellung__wann { font-weight: 700; }
.kb-vorstellung__mehr { margin-top: var(--abstand-1) !important; font-size: 15px; line-height: 22px; color: var(--tinte-leise); }
.kb-vorstellung .kb-marke { margin-top: var(--abstand-2); }
.kb-vorstellung__aktion { display: flex; align-items: center; padding: var(--abstand-4) var(--abstand-5) var(--abstand-4) 0; }
.kb-vorstellung--aus { --stub: var(--knopf-aus); --auf-stub: var(--auf-knopf-aus); }
.kb-vorstellung--schmal { grid-template-columns: 74px minmax(0, 1fr); }
  .kb-vorstellung--schmal .kb-vorstellung__datum { grid-row: span 2; }
  .kb-vorstellung--schmal .kb-vorstellung__datum b { font-size: 28px; }
  .kb-vorstellung--schmal .kb-vorstellung__text { padding: var(--abstand-3) var(--abstand-4) var(--abstand-2); }
  .kb-vorstellung--schmal h2 { font-size: 19px; }
  .kb-vorstellung--schmal .kb-vorstellung__aktion { padding: 0 var(--abstand-4) var(--abstand-3); }
  .kb-vorstellung--schmal .kb-vorstellung__aktion .kb-knopf { width: 100%; }
@media (max-width: 640px) {
  .kb-vorstellung { grid-template-columns: 74px minmax(0, 1fr); }
  .kb-vorstellung .kb-vorstellung__datum { grid-row: span 2; }
  .kb-vorstellung .kb-vorstellung__datum b { font-size: 28px; }
  .kb-vorstellung .kb-vorstellung__text { padding: var(--abstand-3) var(--abstand-4) var(--abstand-2); }
  .kb-vorstellung h2 { font-size: 19px; }
  .kb-vorstellung .kb-vorstellung__aktion { padding: 0 var(--abstand-4) var(--abstand-3); }
  .kb-vorstellung .kb-vorstellung__aktion .kb-knopf { width: 100%; }
}

/* Marke (Zustand als Etikett) */
.kb-marke { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--ecke-marke); background: var(--info-flaeche); color: var(--info-text); font: 700 12px/16px var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; }
.kb-marke--ok { background: var(--ok-flaeche); color: var(--ok-text); }
.kb-marke--warn { background: var(--warn-flaeche); color: var(--warn-text); }
.kb-marke--fehler { background: var(--fehler-flaeche); color: var(--fehler-text); }

/* Knopf */
.kb-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); min-height: var(--ziel); padding: 0 var(--abstand-5); border: 2px solid color-mix(in srgb, var(--akzent) 70%, var(--tinte)); border-radius: var(--ecke-feld); background: var(--akzent); color: var(--auf-akzent); font: 700 14px/18px var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; }
.kb-knopf:hover { border-color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }
.kb-knopf--leise { background: var(--karte); color: var(--tinte); border-color: var(--tinte); }
.kb-knopf--aus, .kb-knopf:disabled { background: var(--knopf-aus); color: var(--auf-knopf-aus); border-color: var(--knopf-aus); cursor: default; text-decoration: none; }
.kb-knopf--gross { width: 100%; min-height: 56px; font-size: 16px; }
.kb-knopf--telefon { font: 600 18px/24px var(--font-code); letter-spacing: 0.04em; text-transform: none; }

/* Saalplan */
.kb-saal { overflow-x: auto; padding: var(--abstand-2) 0; }
.kb-saal svg { display: block; margin: 0 auto; }
.kb-sitz rect { fill: var(--sitz-frei); stroke: var(--sitz-frei-rand); stroke-width: 1.5; rx: var(--ecke-sitz); }
.kb-sitz text { font: 600 10px var(--font-text); fill: var(--tinte); pointer-events: none; }
.kb-sitz { cursor: pointer; }
.kb-sitz:hover rect { stroke-width: 3; }
.kb-sitz--vergeben { cursor: default; }
.kb-sitz--vergeben rect { fill: var(--sitz-vergeben); stroke: var(--sitz-vergeben-rand); stroke-width: 1; }
.kb-sitz--vergeben text { display: none; }
.kb-sitz--gewaehlt rect { fill: var(--sitz-gewaehlt); stroke: var(--sitz-gewaehlt-rand); stroke-width: 2.5; }
.kb-sitz--gewaehlt text { fill: var(--auf-sitz-gewaehlt); font-weight: 800; }
.kb-buehne rect { fill: var(--buehne); }
.kb-buehne text { fill: var(--auf-buehne); font: 700 11px var(--font-text); letter-spacing: 0.24em; }
.kb-reihe-text { fill: var(--tinte-leise); font: 700 11px var(--font-text); }
.kb-legende { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-4); margin: var(--abstand-3) 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.kb-legende li::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; border-radius: 4px; background: var(--sitz-frei); box-shadow: inset 0 0 0 1.5px var(--sitz-frei-rand); }
.kb-legende .vergeben::before { background: var(--sitz-vergeben); box-shadow: inset 0 0 0 1px var(--sitz-vergeben-rand); }
.kb-legende .gewaehlt::before { background: var(--sitz-gewaehlt); box-shadow: inset 0 0 0 2.5px var(--sitz-gewaehlt-rand); }
.kb-anzahl { display: inline-flex; align-items: center; gap: var(--abstand-2); }
.kb-anzahl button { width: var(--ziel); height: var(--ziel); border: 2px solid var(--tinte); border-radius: var(--ecke-feld); background: var(--karte); color: var(--tinte); font: 700 24px/1 var(--font-text); cursor: pointer; }
.kb-anzahl input { width: 76px; height: var(--ziel); border: 2px solid var(--rand); border-radius: var(--ecke-feld); background: var(--karte); color: var(--tinte); font: 700 24px/1 var(--font-text); text-align: center; }

/* Formular */
.kb-formular { display: flex; flex-direction: column; gap: var(--abstand-4); }
.kb-feld { display: flex; flex-direction: column; gap: 6px; }
.kb-feld label { font-size: 15px; line-height: 20px; font-weight: 700; }
.kb-feld input, .kb-feld textarea { min-height: var(--ziel); padding: 10px 14px; border: 2px solid var(--rand); border-radius: var(--ecke-feld); background: var(--karte); color: var(--tinte); font: 17px/24px var(--font-text); }
.kb-feld input:focus-visible { border-color: var(--tinte); }
.kb-feld__hilfe { font-size: 14px; line-height: 20px; color: var(--tinte-leise); }
.kb-feld--fehler input { border-color: var(--fehler-text); }
.kb-feld__fehler { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--fehler-text); }
.kb-kontrolle { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 22px; }
.kb-kontrolle input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--tinte); }
.kb-zusammenfassung { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--abstand-4); margin: 0; }
.kb-zusammenfassung dt { padding-top: 4px; font: 700 12px/16px var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-leise); }
.kb-zusammenfassung dd { margin: 0; font-weight: 700; }

/* Meldung */
.kb-meldung { margin: 0; padding: var(--abstand-3) var(--abstand-4); border-radius: var(--ecke-feld); background: var(--info-flaeche); color: var(--tinte); }
.kb-meldung b:first-child { color: var(--info-text); }
.kb-meldung--ok { background: var(--ok-flaeche); } .kb-meldung--ok b:first-child { color: var(--ok-text); }
.kb-meldung--warn { background: var(--warn-flaeche); } .kb-meldung--warn b:first-child { color: var(--warn-text); }
.kb-meldung--fehler { background: var(--fehler-flaeche); } .kb-meldung--fehler b:first-child { color: var(--fehler-text); }
.kb-meldung .kb-knopf { margin-top: var(--abstand-3); }

/* Billett: die Bestätigung als Eintrittskarte */
.kb-billett { --r: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 236px; max-width: var(--billett-max); background: var(--karte); }
.kb-billett__haupt { padding: var(--abstand-5); }
.kb-billett__haupt h2 { margin: var(--abstand-2) 0 var(--abstand-1); font: 700 26px/1.1 var(--font-anzeige); letter-spacing: 0.03em; text-transform: uppercase; text-wrap: balance; }
.kb-billett__wann { margin: 0; font-weight: 700; }
.kb-billett dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px var(--abstand-4); margin: var(--abstand-4) 0 0; }
.kb-billett dt { padding-top: 4px; font: 700 12px/16px var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-leise); }
.kb-billett dd { margin: 0; }
.kb-billett__abriss { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-2); padding: var(--abstand-5) var(--abstand-4); background: color-mix(in srgb, var(--akzent) 14%, var(--karte)); border-left: 3px dotted var(--flaeche); text-align: center; }
.kb-billett__abriss::before, .kb-billett__abriss::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--flaeche); }
.kb-billett__abriss::before { top: -10px; } .kb-billett__abriss::after { bottom: -10px; }
.kb-billett__etikett { font: 700 12px/16px var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-leise); }
.kb-billett__code { font: 500 28px/1.1 var(--font-code); letter-spacing: 0.12em; white-space: nowrap; }
.kb-billett__qr { display: block; width: 156px; height: 156px; padding: 8px; background: #ffffff; }
.kb-billett--ungueltig .kb-billett__abriss { background: var(--karte-tief); }
.kb-billett--ungueltig .kb-billett__code { color: var(--tinte-leise); text-decoration: line-through; text-decoration-thickness: 2px; }
.kb-billett--quer { grid-template-columns: 1fr; }
  .kb-billett--quer .kb-billett__haupt { padding: var(--abstand-4); }
  .kb-billett--quer .kb-billett__haupt h2 { font-size: 22px; }
  .kb-billett--quer .kb-billett__abriss { border-left: 0; border-top: 3px dotted var(--flaeche); }
  .kb-billett--quer .kb-billett__abriss::before { top: -11px; left: -10px; }
  .kb-billett--quer .kb-billett__abriss::after { top: -11px; bottom: auto; left: auto; right: -10px; }
@media (max-width: 640px) {
  .kb-billett { grid-template-columns: 1fr; }
  .kb-billett .kb-billett__haupt { padding: var(--abstand-4); }
  .kb-billett .kb-billett__haupt h2 { font-size: 22px; }
  .kb-billett .kb-billett__abriss { border-left: 0; border-top: 3px dotted var(--flaeche); }
  .kb-billett .kb-billett__abriss::before { top: -11px; left: -10px; }
  .kb-billett .kb-billett__abriss::after { top: -11px; bottom: auto; left: auto; right: -10px; }
}

/* Fußzeile */
.kb-fuss { background: var(--karte); color: var(--tinte-leise); font-size: 14px; line-height: 20px; }
.kb-fuss__innen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--abstand-4) var(--abstand-5); max-width: var(--inhalt-max); margin: 0 auto; padding: var(--abstand-5); }
.kb-fuss b { color: var(--tinte); }
.kb-fuss a { color: inherit; }
.kb-fuss__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2) var(--abstand-4); max-width: var(--inhalt-max); margin: 0 auto; padding: var(--abstand-3) var(--abstand-5) var(--abstand-4); border-top: 1px solid var(--linie); }
.kb-ueber { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--tinte-leise); text-decoration: none; }
.kb-ueber img { display: block; width: auto; height: 20px; }
.kb-ueber b { color: var(--tinte); }
.kb-ueber:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Eintrittskarte auf dem Bondrucker (80 mm, nur Schwarz) */
.kb-bon { width: var(--bon-breite); padding: 14px 16px 18px; background: #ffffff; color: #000000; font: 14px/19px var(--font-text); }
.kb-bon__logo { display: block; max-width: 200px; max-height: 56px; margin: 0 auto 10px; filter: grayscale(1) contrast(1.6); }
.kb-bon__veranstalter { margin: 0 0 10px; text-align: center; font: 700 15px/1.15 var(--font-anzeige); letter-spacing: 0.06em; text-transform: uppercase; }
.kb-bon h2 { margin: 0; font: 700 21px/1.1 var(--font-anzeige); letter-spacing: 0.03em; text-transform: uppercase; text-align: center; }
.kb-bon__wann { margin: 4px 0 0; text-align: center; font-weight: 700; }
.kb-bon__ort { margin: 0; text-align: center; }
.kb-bon__platz { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 0; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.kb-bon__platz div { padding: 6px 0; text-align: center; }
.kb-bon__platz div + div { border-left: 2px dashed #000; }
.kb-bon__platz small { display: block; font: 700 11px/14px var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; }
.kb-bon__platz b { font: 700 30px/1.1 var(--font-anzeige); }
.kb-bon__code { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kb-bon__code b { font: 600 20px/1.1 var(--font-code); letter-spacing: 0.1em; }
.kb-bon__code img { width: 110px; height: 110px; }
.kb-bon__klein { margin: 10px 0 0; font-size: 11px; line-height: 14px; }
.kb-bon__ueber { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding-top: 8px; border-top: 1px dashed #000; font-size: 11px; line-height: 14px; }
.kb-bon__ueber img { height: 14px; width: auto; }
@media print { body { background: #ffffff; } .kb-kopf nav, .kb-fuss, .kb-knopf { display: none; } }