/* Öffentliche Ansicht: Petrol im Kopf, Orange als Fläche, helle Karten, dunkle Knöpfe wie auf kulturhof-perg.at */
body.oeffentlich { background: var(--orange); }
.oeffentlich .kopf { background: var(--petrol); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 22px 6vw; flex-wrap: wrap; gap: 12px; }
.oeffentlich .kopf .wortmarke { color: #fff; font-size: 26px; }
.oeffentlich .kopf nav a { color: #fff; text-decoration: none; margin-left: 22px; letter-spacing: 0.1em; font-size: 15px; font-weight: 700; }
.oeffentlich .kopf nav a:hover { color: var(--gelb); }
.banner { background: var(--dunkel); color: #fff; padding: 26px 6vw; }
.banner h1 { margin: 0 0 6px; font-size: 32px; text-transform: uppercase; color: var(--orange); letter-spacing: 0.04em; display: flex; align-items: center; }
.banner p { margin: 0; color: #ddd; font-size: 17px; }
.banner.klein h1 { font-size: 26px; }
.banner .pfad { color: #bbb; font-size: 13px; margin-bottom: 6px; }
.banner .pfad a { color: #eee; }
.flaeche { padding: 28px 6vw 48px; max-width: 1200px; margin: 0 auto; }
.termine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.termin { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 18px; background: var(--orange-hell); padding: 16px 22px; }
.termin .datum { display: flex; flex-direction: column; line-height: 1; }
.termin .datum small { font-size: 13px; letter-spacing: 0.1em; font-weight: 700; }
.termin .datum b { font-size: 36px; }
.termin h2 { margin: 0 0 4px; font-size: 24px; text-transform: uppercase; letter-spacing: 0.02em; }
.termin p { margin: 0; }
.termin .beschreibung { color: #4a4a4a; font-size: 14px; margin-top: 4px; }
.termin .hinweis { font-weight: 700; margin-top: 6px; }
.termin.aus { opacity: 0.8; }
@media (max-width: 640px) {
  .termin { grid-template-columns: 80px 1fr; }
  .termin .knopf { grid-column: 1 / -1; text-align: center; }
  .termin .datum b { font-size: 28px; }
}
.leer, .kontakt { color: #fff; }
.kontakt { margin-top: 26px; }
.karte { background: var(--sand); padding: 20px 22px; }
.karte h2 { margin: 0 0 8px; font-size: 20px; text-transform: uppercase; }
.buchen-raster { display: grid; grid-template-columns: minmax(320px, 1.3fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .buchen-raster { grid-template-columns: 1fr; } }
.oeffentlich { --sitz-frei: #fff; --sitz-frei-rand: #c48a3c; --sitz-gewaehlt: var(--petrol); --sitz-gewaehlt-rand: var(--petrol-dunkel); --sitz-belegt: #e3d9cc; --sitz-belegt-rand: #bfb3a3; }
.bestaetigung { max-width: 720px; }
.code-block { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: #fff; padding: 16px 20px; margin-bottom: 16px; }
.code-block small { display: block; color: var(--grau); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
.code-block .code { font-size: 34px; letter-spacing: 0.12em; font-family: "SF Mono", Menlo, Consolas, monospace; }
.code-block .qr { width: 150px; height: 150px; margin-left: auto; }
.bestaetigung dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; margin: 0 0 16px; }
.bestaetigung dt { color: var(--grau); text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; padding-top: 3px; }
.bestaetigung dd { margin: 0; }
.oeffentlich .fuss { background: var(--dunkel); color: #ddd; padding: 26px 6vw; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 14px; letter-spacing: 0.04em; }
@media print { .oeffentlich .kopf nav, .oeffentlich .fuss, .bestaetigung .knopf { display: none; } body.oeffentlich { background: #fff; } }
/* Am Veranstaltungstag: nur ansehen, Telefonnummer als Knopf */
.termin .knopf.hell { background: var(--petrol); }
.telefon .knopf { font-family: "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: none; }