/* Design-Paket Kulturhof Perg, Aufbau wie die Kartenseite der Website: schmales Band, darunter flächig die Listenfarbe bis zum Fuß, darauf nur die Zeilen der Terminliste als helle
   Streifen; Kopf, Fuß und Grund der Seite in der Kopffarbe. Steht nach kartenbuero.css und kartenseite.css und überschreibt sie. Die Jahresfarben kommen aus den Einstellungen Kopf, Akzent,
   Fläche, Listenfarbe; der Server setzt daraus --kopf, --auf-kopf und die Variablen --d-…: --d-band / --auf-d-band (Band), --d-knopf / --auf-d-knopf (Knöpfe), --d-liste / --d-auf-liste
   (Grund und Schrift direkt darauf), --d-dunkel, --d-hell (fest aus manifest.json). Hier steht keine Jahresfarbe; fest sind nur Tor-Gold und das Weiß der Zeilen. */

@font-face { font-family: "ADAM.CG Pro"; src: url("adam-cg-pro-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ADAM.CG Pro"; src: url("adam-cg-pro-light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }

:root {
  --font-anzeige: "ADAM.CG Pro", "Josefin Sans", "Century Gothic", Futura, sans-serif;
  --font-text: "Trebuchet MS", "Fira Sans", Roboto, "Noto Sans", "Segoe UI", Verdana, sans-serif;
  --d-spalte: 860px;
  --d-seite: max(var(--abstand-4), calc((100% - var(--d-spalte)) / 2));
  --d-tor: #cda17c;
  --d-zeile: rgba(255, 255, 255, 0.53);
  --billett-max: var(--d-spalte);
  --kopf-hoehe: 88px;
  --ecke-feld: 4px;
  --knopf-aus: color-mix(in srgb, var(--d-liste) 35%, var(--d-hell));
  --auf-knopf-aus: var(--d-dunkel);
  /* Saalplan auf der Listenfarbe: frei weiß, vergeben eine dunklere Tönung des Grunds ohne Nummer, gewählt in der Kopffarbe mit dunklem Rand; Bühne dunkel */
  --buehne: var(--d-dunkel);
  --auf-buehne: var(--d-hell);
  --sitz-frei: var(--d-hell);
  --sitz-frei-rand: var(--d-dunkel);
  --sitz-vergeben: color-mix(in srgb, var(--d-liste) 62%, var(--d-dunkel));
  --sitz-vergeben-rand: color-mix(in srgb, var(--d-liste) 40%, var(--d-dunkel));
  --sitz-gewaehlt: var(--kopf);
  --auf-sitz-gewaehlt: var(--auf-kopf);
  --sitz-gewaehlt-rand: var(--d-dunkel);
}

/* Grund der ganzen Seite ist die Kopffarbe; die Listenfarbe liegt als durchgehender Streifen dazwischen, auch auf kurzen Seiten bis zum Fuß */
body { display: flex; flex-direction: column; min-height: 100vh; background: var(--kopf); }
main { --tinte: var(--d-auf-liste); --tinte-leise: var(--d-auf-liste); flex: 1 0 auto; background: var(--d-liste); color: var(--tinte); }
main a:not(.kb-knopf) { color: var(--tinte); text-decoration: underline; }
.kb-leise { color: var(--tinte); }

/* Kopf: Logo mit dem Schriftzug über dem Tor, Navigation endet mit den Zeilen */
.kb-kopf { padding-left: max(var(--abstand-4), calc(var(--d-seite) - 45px)); padding-right: var(--d-seite); }
.kb-kopf nav { margin-right: calc(-1 * var(--abstand-3)); }
.kb-kopf nav a { font-weight: 400; font-size: 15px; letter-spacing: 0.02em; }
.kb-kopf__name { font-weight: 400; font-synthesis: none; }

/* Band: nur das Tor und der Titel, eine Zeile; der Titel steht bündig mit den Zeilen, das Tor hängt links davor. Alles andere aus dem Band liegt darunter auf dem Grund */
.kb-banner { --fokus-kopf: var(--tinte); padding: 0; background: none; color: var(--tinte); }
.kb-banner::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: radial-gradient(circle 6px at 50% 100%, var(--d-band) 97%, #0000) 0 0 / 20px 8px repeat-x; }
.kb-banner::after { display: none; }
.kb-banner__innen { display: flex; flex-direction: column; max-width: none; margin: 0; }
.kb-banner__innen > * { padding-left: var(--d-seite); padding-right: var(--d-seite); }
.kb-banner h1 { order: -1; display: flex; align-items: center; gap: 9px; min-height: 56px; margin: 0; padding-top: 20px; padding-bottom: 8px; background: var(--d-band); color: var(--auf-d-band); font: 400 36px/40px var(--font-anzeige); font-synthesis: none; letter-spacing: 0.02em; text-wrap: wrap; overflow-wrap: anywhere; }
.kb-banner h1::before { content: ""; flex: none; align-self: flex-start; width: 0.61em; height: 0.64em; margin-top: 0.17em; margin-left: calc(-0.61em - 9px); background: var(--d-tor); clip-path: polygon(0 0, 100% 6%, 100% 100%, 77% 100%, 77% 25.5%, 21.7% 21.6%, 21.7% 100%, 0 100%); }
.kb-banner p { margin: var(--abstand-5) 0 0; max-width: none; color: var(--tinte); }
.kb-banner p:empty { display: none; }
.kb-banner .kb-pfad { margin: var(--abstand-5) 0 var(--abstand-7); color: var(--tinte); }
.kb-banner .kb-pfad:where(:not([hidden])) ~ p { margin-top: 0; }   /* ausgeblendeter Pfad (Einstellung kartenseite_pfad): erster Absatz mit eigenem Abstand */
.kb-banner .kb-pfad ~ p + p { margin-top: var(--abstand-2); }
.kb-banner:has(+ .kb-inhalt .kb-termine) .kb-pfad ~ p { display: none; }   /* Produktionsseite: kein Beschreibungstext über den Terminen */
.kb-pfad a { color: var(--tinte); }

/* Überschrift über den Zeilen, Text aus dem Manifest; Abstand zum Band wie auf der Website, nach einem Pfad reicht dessen Abstand */
.kb-banner:has(.kb-pfad:not([hidden])) + .kb-inhalt .d-ueberschrift { margin-top: 0; }
.d-ueberschrift { margin: var(--abstand-6) 0 var(--abstand-6); font: 400 30px/36px var(--font-text); text-transform: uppercase; overflow-wrap: anywhere; }
.d-ueberschrift b { font-weight: 700; }
.d-ueberschrift small { display: block; font-size: 20px; line-height: 24px; }

/* Inhalt in der Spalte der Zeilen, ohne Kästen */
.kb-inhalt { max-width: none; margin: 0; padding: var(--abstand-6) var(--d-seite) var(--abstand-7); }
.kb-raster { gap: var(--abstand-6); }
@media (min-width: 861px) { .kb-raster { grid-template-columns: minmax(0, 1fr) 300px; } }   /* mehr Breite für den Saalplan */
.kb-karte { padding: 0; border-radius: 0; background: none; color: var(--tinte); }
.kb-karte > h2, .kb-billett__haupt h2 { font: 400 25px/30px var(--font-text); letter-spacing: 0; }
.kb-lauftext { max-width: none; }
.kb-kontakt { margin-top: var(--abstand-6); }
.kb-saal { overflow-x: auto; }
.kb-legende { color: var(--tinte); }
.reihe-text { font-size: 12px; }
.reihe-text.preis-text { font-size: 11px; }

/* Knöpfe: dunkel, Schrift weiß und nicht fett, wenig gerundet */
.kb-knopf, .kb-knopf--leise, .kb-knopf--aus { border: 0; border-radius: var(--ecke-feld); background: var(--d-knopf); color: var(--auf-d-knopf); font: 400 15px/18px var(--font-text); letter-spacing: 0; }
.kb-knopf:hover { text-decoration: underline; text-underline-offset: 3px; }
.kb-knopf--aus, .kb-knopf--aus:hover { text-decoration: none; cursor: default; }
.kb-knopf:disabled { background: var(--knopf-aus); color: var(--auf-knopf-aus); }
.kb-knopf--gross { font-size: 17px; }
.kb-knopf--telefon { font: 600 18px/24px var(--font-code); }
.kb-anzahl button, .kb-anzahl button:disabled { border: 0; border-radius: var(--ecke-feld); background: var(--d-knopf); color: var(--auf-d-knopf); opacity: 1; }
.kb-anzahl button:disabled { cursor: default; }   /* − bei Anzahl 0: ohne Wirkung, ohne eigene Farbe */

/* Terminliste: die Zeilen sind die einzigen hellen Streifen */
.kb-billettform { -webkit-mask: none; mask: none; }
.kb-termine { gap: 18px; }
.kb-vorstellung { --tinte: var(--d-dunkel); --tinte-leise: var(--d-dunkel); grid-template-columns: 171px minmax(0, 1fr) 261px; align-items: center; min-height: 82px; background: var(--d-zeile); border-radius: 0; color: var(--tinte); }
.kb-vorstellung__datum { align-items: flex-start; gap: 0; padding: 8px 0 8px 22px; background: none; color: var(--tinte); border: 0; text-align: left; }
.kb-vorstellung__datum::before, .kb-vorstellung__datum::after { display: none; }
.kb-vorstellung__datum small { font: 400 15px/16px var(--font-text); letter-spacing: 0; }
.kb-vorstellung__datum b { font: 700 30px/32px var(--font-text); letter-spacing: 0.02em; }
.kb-vorstellung__text { padding: 8px 16px 8px 0; }
.kb-vorstellung h2 { margin: 0; font: 400 25px/28px var(--font-text); letter-spacing: 0; overflow-wrap: anywhere; }
.kb-vorstellung__wann { font: 400 15px/20px var(--font-text); }
.kb-vorstellung__mehr { display: none; }   /* eine Zeile nennt nur Veranstaltung, Tag, Datum, Uhrzeit, Ort */
.kb-vorstellung .kb-marke--fehler { display: none; }   /* „Ausverkauft“ steht schon im Knopf */
.kb-vorstellung__aktion { justify-content: flex-end; padding: 8px 17px 8px 0; }
.kb-vorstellung__aktion .kb-knopf { width: 244px; min-height: 50px; padding: 0 var(--abstand-3); }
.kb-marke, .kb-marke--ok { padding: 0; border-radius: 0; background: none; color: var(--tinte); font-weight: 400; font-size: 13px; letter-spacing: 0.02em; }
.kb-marke--warn { padding: 2px 8px; border-radius: var(--ecke-feld); background: var(--kopf); color: var(--auf-kopf); }
.kb-vorstellung .kb-marke { display: block; width: fit-content; }

/* Datum in Blöcken: auf breiten Seiten eine Zeile, schmal untereinander (unten) */
.d-datum, .d-uhr { white-space: nowrap; }

/* Meldungen ruhig, als Strich vor dem Text; nur ein Fehler behält seine Fläche */
.kb-meldung { padding: 2px 0 2px var(--abstand-3); border-left: 3px solid var(--tinte); border-radius: 0; background: none; color: var(--tinte); }
.kb-meldung b:first-child, .kb-meldung--ok b:first-child, .kb-meldung--warn b:first-child { color: inherit; }
.kb-meldung--ok, .kb-meldung--warn { background: none; }
.kb-meldung--fehler { padding: var(--abstand-3) var(--abstand-4); border-left-color: var(--fehler-text); background: var(--fehler-flaeche); color: var(--d-dunkel); }
.kb-feld__fehler { color: var(--tinte); }
/* Laufende Reservierung: nur die Zeit in der Kopffarbe und fett; der Satz daneben bleibt dunkel. Kontrast der Zeit bewusst unter 4,5 : 1, Entscheidung vom 4.11.2026 */
#restzeit { color: var(--kopf); font-weight: 700; white-space: nowrap; }
/* Freie Platzwahl: die Preise stehen an den Eingaben; der Absatz bleibt in der Seite und ist hier ausgeblendet. Ohne diese Zeile erscheint er wieder */
.d-preise { display: none; }

/* Formular: Felder weiß, dunkler Rand */
.kb-karte > .kb-leise { margin-bottom: var(--abstand-5); }
.kb-feld[data-kategorie-wahl] + .kb-feld[data-kategorie-wahl] { margin-top: var(--abstand-6); }
.kb-feld label { font-weight: 400; }
.kb-feld input, .kb-feld textarea, .kb-anzahl input { border: 1px solid var(--d-dunkel); border-radius: var(--ecke-feld); background: var(--d-hell); color: var(--d-dunkel); }
.kb-zusammenfassung { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: var(--abstand-4); }
.kb-zusammenfassung dt { padding-top: var(--abstand-3); color: var(--tinte); }
.kb-zusammenfassung dd { font-weight: 400; }
.kb-zusammenfassung dd b { font-weight: 700; }
.kb-zusammenfassung .d-trenner { display: none; }   /* schmale Spalte: Datum und Uhrzeit untereinander, kein Trennzeichen am Zeilenende */
.kb-zusammenfassung .d-datum, .kb-zusammenfassung .d-uhr { display: block; }

/* Bestätigung: Angaben und Code direkt auf dem Grund; der Code bleibt in der Mono-Schrift, der QR-Code auf seiner weißen Fläche */
.kb-billett { background: none; border-radius: 0; color: var(--tinte); }
.kb-billett__haupt { padding: 0; }
.kb-billett__abriss { align-items: flex-start; justify-content: flex-start; padding: 20px 0 0 var(--abstand-6); background: none; border-left: 0; text-align: left; }
.kb-billett__abriss::before, .kb-billett__abriss::after { display: none; }
.kb-billett + .kb-billett { margin-top: var(--abstand-5); padding-top: var(--abstand-5); border-top: 1px solid var(--tinte); }
.kb-billett dt, .kb-billett__etikett { color: var(--tinte); }
.kb-billett--ungueltig .kb-billett__abriss { background: none; }
.kb-billett--ungueltig .kb-billett__code { color: var(--tinte); }

/* Fuß in der Kopffarbe, Trennlinie dunkel */
.kb-fuss { --tinte: var(--auf-kopf); --tinte-leise: var(--auf-kopf); background: var(--kopf); color: var(--auf-kopf); }
.kb-fuss__innen { max-width: none; margin: 0; padding: var(--abstand-5) var(--d-seite); }
.kb-fuss__unten { max-width: none; margin: 0 var(--d-seite); padding-left: 0; padding-right: 0; border-top-color: var(--d-dunkel); }
.kb-ueber, .kb-ueber b { color: var(--auf-kopf); }

/* Kein Platz links neben der Spalte: das Tor steht vor dem Titel in der Zeile */
@media (max-width: 960px) {
  .kb-banner h1::before { margin-left: 0; }
}
@media (max-width: 860px) {
  .kb-vorstellung { grid-template-columns: 96px minmax(0, 1fr) 170px; }
  .kb-vorstellung__datum { padding-left: var(--abstand-4); }
  .kb-vorstellung__aktion .kb-knopf { width: 100%; }
  .kb-vorstellung__aktion { padding-left: 0; }
  /* Blöcke untereinander: keine Trennzeichen am Zeilenanfang oder -ende */
  .kb-vorstellung__wann .d-trenner, .kb-banner .d-trenner, .kb-zusammenfassung .d-trenner, .kb-billett .d-trenner { display: none; }
  .d-datum, .d-uhr, .d-ort { display: block; }
  .kb-billett .d-uhr + br { display: none; }   /* die Uhrzeit ist schon eine eigene Zeile */
}
@media (max-width: 640px) {
  :root { --d-seite: var(--abstand-4); }
  .kb-kopf { padding-top: var(--abstand-2); padding-bottom: calc(var(--abstand-2) + 8px); }
  .kb-kopf nav { margin-right: calc(-1 * var(--abstand-2)); }
  .kb-banner h1 { gap: 7px; min-height: 46px; padding-top: 16px; padding-bottom: 7px; font-size: 26px; line-height: 32px; }
  .kb-banner h1::before { margin-top: 0.22em; }
  .kb-inhalt { padding: var(--abstand-5) var(--d-seite) var(--abstand-7); }
  .kb-karte { padding: 0; }
  .kb-fuss__innen { padding-left: var(--d-seite); padding-right: var(--d-seite); }
  .kb-fuss__unten { padding-left: 0; padding-right: 0; }
  .d-ueberschrift { font-size: 24px; line-height: 30px; margin-top: 0; margin-bottom: var(--abstand-5); }
  .d-ueberschrift small { font-size: 16px; line-height: 22px; }
  .kb-termine { gap: var(--abstand-3); }
  .kb-vorstellung { grid-template-columns: 94px minmax(0, 1fr); min-height: 0; }
  .kb-vorstellung .kb-vorstellung__datum { grid-row: auto; padding: var(--abstand-3) 0 0 var(--abstand-3); align-self: start; }
  .kb-vorstellung .kb-vorstellung__datum b { font-size: 24px; }
  .kb-vorstellung .kb-vorstellung__text { padding: var(--abstand-3) var(--abstand-3) var(--abstand-3) var(--abstand-1); }
  .kb-vorstellung h2 { font-size: 22px; line-height: 26px; }
  .kb-vorstellung__wann { font-size: 14px; }
  .kb-vorstellung .kb-vorstellung__aktion { grid-column: 1 / -1; padding: 0 var(--abstand-3) var(--abstand-3); }
  .kb-zusammenfassung dd { font-size: 16px; }
  .kb-billett .kb-billett__haupt { padding: 0; }
  .kb-billett .kb-billett__abriss { padding: var(--abstand-4) 0 0; border-top: 0; }
  .kb-billett dl { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
  .kb-billett dt { padding-top: var(--abstand-3); }
  .kb-billett dd { font-size: 16px; }
}