/* ===========================================================
   Club VULCANO – Design Tokens
   Signature-Akzent: warmes Orange, WCAG 2.1 AA geprüft gegen --ink
   Hintergrund:
     --ink        #0B0B0D  (fast schwarz, Hintergrund - entspricht
                            in etwa dem theme-color #080606 der echten Seite)
     --ink-2      #17161A  (Kartenflächen)
     --gold        #F28C28  (Signature-Akzent, Orange)         8.06:1
     --gold-bright #FFB45C  (helleres Gold für Hover & Akzent-Text)
     --gold-dim    #B85F12  (gedämpfter Orange-Ton, Labels)            4.54:1
     --wine       #4A1420  (sekundärer Akzent, Bordeaux)
     --paper      #EFE9DD  (warmes Off-White, Haupttext)            16.27:1
     --paper-dim  #A9A296  (gedämpfter Text)                         7.77:1
     --danger     #C05B4C  (Fehler/Ablehnen)                         4.53:1
     --ok         #7FA37B  (Erfolg/Bestätigt)                        6.95:1
   Typo (lokal gehostet, siehe /assets/fonts):
     Display: 'Oswald'  (kondensierte Headline-Schrift)
     Body:    'Inter'   (klare, ruhige Grotesk, auch für Zahlen
              mit font-variant-numeric: tabular-nums)
   Signature: Karten im Stil eines Garderoben-/VIP-Tickets mit
   perforierter Trennlinie und gestempelter Statusmarke.
   =========================================================== */

/* ---------- Lokale Fonts (kein externes CDN, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/oswald-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/oswald-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/oswald-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/oswald-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0B0B0D;
  --ink-2: #17161A;
  --ink-3: #1F1D22;
  --gold: #F28C28;
  --gold-bright: #FFB45C;
  --gold-dim: #B85F12;
  --wine: #4A1420;
  --paper: #EFE9DD;
  --paper-dim: #A9A296;
  --danger: #C05B4C;
  --ok: #7FA37B;

  --radius: 2px;
  --container: 1180px;
  --focus-ring: 3px solid var(--gold-bright); /* sichtbarer Fokus in Markenfarbe */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; } /* Sicherheitsnetz gegen horizontales Scrollen auf Mobile */

/* Bewegungsreduktion respektieren (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-bright); }
a:hover { color: var(--gold-bright); }

/* ---------- Sichtbarer Fokus-Indikator (WCAG 2.4.7 Focus Visible) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 1px;
}
/* Fallback für Browser ohne :focus-visible Support */
a:focus,
button:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Screenreader-only Utility (WCAG 1.3.1 / 2.4.1) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip-Link (WCAG 2.4.1 Bypass Blocks) ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 18px;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px;
}

h1, h2, h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0.4em;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Top bar ---------- */
.topbar {
  border-bottom: 1px solid rgba(242,140,40,0.18);
  padding: 22px 0;
  position: sticky;
  top: 0;
  background: rgba(11,11,13,0.92);
  backdrop-filter: blur(6px);
  z-index: 20;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brand-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0; /* verhindert unerwünschten Weißraum unter dem Bild */
}
.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}
.brand small {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.topbar nav a {
  color: var(--paper-dim);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 26px;
  padding: 4px 2px;
}
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--gold-bright); }

/* Widerruf-Button in der Navigation: bewusst als deutlich sichtbarer,
   farblich gefüllter Button statt eines reinen Text-Links, da es sich um
   eine wichtige Rechte-Funktion handelt (Fernabsatz-Widerrufsrecht), die
   Gäste schnell und eindeutig finden sollen. */
.topbar nav .btn-sm {
  margin-left: 26px;
  vertical-align: middle;
}

/* ---------- Hero ---------- */
.hero {
  padding: 76px 0 48px;
  border-bottom: 1px solid rgba(242,140,40,0.14);
  background:
    radial-gradient(ellipse at top right, rgba(242,140,40,0.10), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(74, 49, 20, 0.35), transparent 60%);
}
.hero .eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  display: block;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  max-width: 18ch;
  color: var(--paper);
}
.hero p.lead {
  max-width: 56ch;
  color: var(--paper-dim);
  font-size: 17px;
  margin: 18px 0 34px;
}

/* ---------- Event Scroller ---------- */
.event-scroller-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-scroller {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(242,140,40,0.4) var(--ink-2); /* Firefox: Thumb- und Track-Farbe, sonst weißer Systemstandard */
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  flex: 1 1 auto;
  min-width: 0;
}
.event-scroller::-webkit-scrollbar { height: 6px; }
.event-scroller::-webkit-scrollbar-track { background: var(--ink-2); border-radius: 3px; }
.event-scroller::-webkit-scrollbar-thumb { background: rgba(242,140,40,0.4); border-radius: 3px; }
.event-scroller::-webkit-scrollbar-thumb:hover { background: rgba(242,140,40,0.6); }

/* Sichtbare Scroll-Pfeile - zeigen Nutzer:innen aktiv an, dass hier weitere
   Termine liegen und man horizontal navigieren kann (zusätzlich zur
   ohnehin vorhandenen Tastatur-/Wisch-Bedienung). */
.scroll-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(242,140,40,0.4);
  background: var(--ink-2);
  color: var(--gold-bright);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
  z-index: 2;
}
.scroll-arrow:hover { background: var(--gold); color: var(--ink); border-color: var(--gold-bright); }
.scroll-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  background: var(--ink-2);
  color: var(--gold-bright);
}
.scroll-arrow:disabled:hover { background: var(--ink-2); color: var(--gold-bright); }

.event-card {
  flex: 0 0 clamp(280px, 28vw, 420px);
  background: var(--ink-2);
  border: 2px solid rgba(242,140,40,0.2);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
  scroll-snap-align: start;
  position: relative;
}
.event-card:hover { border-color: rgba(242,140,40,0.55); transform: translateY(-2px); }
.event-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Deutlich dominantere Kennzeichnung des ausgewählten Termins: kräftiger
   Rahmen + leicht angehobener Orangeschimmer-Hintergrund + sichtbares
   "Ausgewählt"-Badge (statt nur eines dezenten Häkchens im Titel). */
.event-card.active {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(242,140,40,0.14), rgba(242,140,40,0.03) 60%), var(--ink-2);
  box-shadow: 0 0 0 2px var(--gold), 0 8px 22px rgba(242,140,40,0.18);
}
.event-card.active::before {
  content: 'Ausgewählt';
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: var(--gold);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--radius);
}
.event-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ink-3);
  overflow: hidden;
}
.event-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.event-card-body { padding: 16px 18px 20px; }
.event-card-date {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.event-card-body h3 {
  font-size: 18px;
  margin: 8px 0 6px;
  text-transform: none;
  letter-spacing: normal;
  font-family: 'Oswald', sans-serif;
}
.event-card-body p {
  font-size: 13px;
  color: var(--paper-dim);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.event-dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 18px;
  margin: 2px 0 6px;
}
.event-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper-dim);
  opacity: .35;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.event-dot.active {
  background: var(--gold-bright);
  opacity: 1;
  transform: scale(1.3);
}

/* ---------- Section heading ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 64px 0 26px;
  border-bottom: 1px solid rgba(242,140,40,0.18);
  padding-bottom: 16px;
}
.section-head h2 { font-size: 26px; }
.section-head .count {
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--paper-dim);
  font-size: 13px;
  text-transform: none;
}

/* ---------- VIP Area Cards ("ticket stub" signature) ---------- */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
  margin-bottom: 70px;
}

.ticket {
  position: relative;
  background: var(--ink-2);
  border: 1px solid rgba(242,140,40,0.22);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, transform .18s ease;
  overflow: hidden; /* verhindert, dass die Perforations-Punkte horizontales Scrollen erzeugen */
}
.ticket:hover {
  border-color: rgba(242,140,40,0.55);
  transform: translateY(-2px);
}
.ticket .no {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--gold-dim);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.ticket h3 {
  font-size: 21px;
  color: var(--paper);
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: normal;
}
.ticket .desc {
  color: var(--paper-dim);
  font-size: 14px;
  margin-bottom: 20px;
  flex-grow: 1;
}

.ticket .perforation {
  border-top: 1px dashed rgba(242,140,40,0.35);
  margin: 4px 0 16px;
  position: relative;
}
.ticket .perforation::before,
.ticket .perforation::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid rgba(242,140,40,0.22);
}
.ticket .perforation::before { left: -8px; }
.ticket .perforation::after { right: -8px; }

.ticket .meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.ticket .meta .item { }
.ticket .meta .item .label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display: block;
  margin-bottom: 4px;
}
.ticket .meta .item .val {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  color: var(--gold-bright);
}

.ticket .status-stamp {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--radius);
  border: 1px solid;
}
.status-stamp.free { color: var(--ok); border-color: var(--ok); }
.status-stamp.pending { color: var(--gold-bright); border-color: var(--gold-bright); }
.status-stamp.booked { color: var(--danger); border-color: var(--danger); }

.ticket .interest-note {
  font-size: 12.5px;
  color: var(--gold-bright);
  background: rgba(242,140,40,0.08);
  border: 1px solid rgba(242,140,40,0.25);
  padding: 9px 11px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }
.btn.btn-sm {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 11.5px;
}
.btn.btn-outline {
  background: transparent;
  color: var(--gold);
}
.btn.btn-outline:hover { background: rgba(242,140,40,0.1); }
.btn:disabled {
  background: transparent;
  border-color: rgba(255,255,255,0.12);
  color: var(--paper-dim);
  cursor: not-allowed;
}


.area-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: auto;
}
.area-image-btn svg { flex: 0 0 auto; }

.area-image-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.area-image-dialog img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
}

/* ---------- Booking form (inside Kendo Window) ---------- */
.booking-form .k-field-info,
.form-row { margin-bottom: 18px; }
.form-row label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 7px;
}
.form-row .req { color: var(--gold-bright); }
.form-row .hint {
  display: block;
  font-size: 11px;
  color: var(--paper-dim);
  margin-top: 5px;
  text-transform: none;
  letter-spacing: normal;
}
.form-row .field-error {
  display: block;
  font-size: 12px;
  color: #E3B7AE;
  margin-top: 6px;
  text-transform: none;
  letter-spacing: normal;
}

/* ---------- Checkbox-Zeile (z.B. Widerrufs-Bestätigung) ---------- */
.form-row-checkbox { display: flex; flex-direction: column; }
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--paper);
  text-transform: none;
  letter-spacing: normal;
}
.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 1px 0 0;
  accent-color: var(--gold-bright);
}

/* ---------- Honeypot (Spam-Schutz) ----------
   Für Menschen unsichtbar, aber weiterhin im Dokumentfluss vorhanden und
   NICHT display:none/visibility:hidden - manche Bots überspringen genau
   solche Felder gezielt. Stattdessen wird es weit außerhalb des sichtbaren
   Bereichs positioniert und per aria-hidden/tabindex=-1 auch für
   Screenreader- und Tastatur-Nutzer:innen unerreichbar gemacht. */
.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-summary {
  background: rgba(242,140,40,0.06);
  border: 1px solid rgba(242,140,40,0.2);
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--paper-dim);
}
.form-summary strong { color: var(--gold-bright); }
.interest-warning {
  background: rgba(74,20,32,0.35);
  border: 1px solid rgba(192,91,76,0.5);
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  color: #E3B7AE;
  margin-bottom: 18px;
}

/* ---------- Confirmation Dialog (nach erfolgreicher Buchungsanfrage) ---------- */
.confirmation-dialog {
  text-align: center;
  padding: 8px 4px 4px;
}
.confirmation-icon {
  width: 56px;
  height: 56px;
  line-height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  color: var(--gold-bright);
  font-size: 26px;
  font-family: 'Oswald', sans-serif;
}
.confirmation-text {
  font-size: 16px;
  color: var(--paper);
  line-height: 1.6;
  margin: 0 0 18px;
}
.confirmation-note {
  font-size: 13px;
  color: var(--gold-bright);
  background: rgba(242,140,40,0.08);
  border: 1px solid rgba(242,140,40,0.25);
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 22px;
  text-align: left;
}

footer {
  border-top: 1px solid rgba(242,140,40,0.14);
  padding: 34px 0;
  color: var(--paper-dim);
  font-size: 13px;
}
footer .footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}
footer a { color: var(--paper-dim); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--gold-bright); text-decoration: underline; }
.footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  border-top: 1px solid rgba(242,140,40,0.1);
  padding-top: 18px;
}
.footer-legal-nav a { font-size: 12.5px; }

/* Kendo theme overrides so widgets match the brand */
.k-window { background: var(--ink-2) !important; color: var(--paper) !important; border-color: rgba(242,140,40,0.3) !important; }
.k-window-titlebar { background: var(--ink-3) !important; border-color: rgba(242,140,40,0.2) !important; }
.k-window-title { color: var(--paper) !important; font-family: 'Oswald', sans-serif; text-transform: uppercase; }

/* Modale Dialoge IMMER fix zum Viewport, nie zum Dokument - verhindert, dass
   der Dialog beim (Touch-)Scrollen im Hintergrund "mitzuwandern" scheint.
   Ergänzt die JS-seitige Scroll-Sperre (lockBodyScroll/unlockBodyScroll)
   und das "pinned: true" der Kendo-Window-Konfiguration als zusätzliches
   Sicherheitsnetz, unabhängig von der eingesetzten Kendo-Version. */
.k-window.k-window-modal,
.k-window {
  position: fixed !important;
}

/* KRITISCH: Dialog darf nie höher als der sichtbare Viewport werden - sonst
   ragt er unten (oder oben) über den Bildschirmrand hinaus und Buttons wie
   "Anfrage senden" werden unerreichbar, weil das Fenster kein internes
   Scrollen hatte. Titelleiste bleibt fix sichtbar, nur der Inhaltsbereich
   scrollt bei Bedarf intern.
   WICHTIG: Hier NIEMALS "display" setzen (auch nicht mit !important)! Kendo
   blendet das Fenster über genau diese Eigenschaft ein/aus (inline
   style="display:none" wenn geschlossen). Ein !important auf "display" in
   dieser Stylesheet-Regel würde Kendos inline-Style dauerhaft überstimmen -
   die Folge: alle Dialoge erscheinen sofort offen beim Laden der Seite. */
.k-window {
  max-height: 90vh !important;
}
.k-window-content {
  max-height: calc(90vh - 48px) !important; /* 48px ≈ Höhe der Titelleiste */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

/* Touch auf der Titelleiste soll nicht als Drag/Scroll-Geste interpretiert
   werden, auch wenn "draggable: false" gesetzt ist. */
.k-window-titlebar {
  touch-action: none;
}
.k-input, .k-picker, .k-numerictextbox, .k-textbox, textarea.k-input-inner {
  background: var(--ink) !important; color: var(--paper) !important; border-color: rgba(242,140,40,0.3) !important;
}
.k-input-inner { color: var(--paper) !important; }
.k-button-solid-primary { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; }
.k-button-solid-base { background: transparent !important; border-color: rgba(242,140,40,0.35) !important; color: var(--paper) !important; }
.k-calendar { background: var(--ink-2) !important; color: var(--paper) !important; }

/* Kendo Notification: auf Mobile unten, volle Breite statt oben-rechts pinned
   (sonst kann der Container auf schmalen Screens abgeschnitten wirken /
   mit dem Kendo-Window-Overlay kollidieren). */
.k-notification-group,
.k-notification-container {
  max-width: 92vw;
}

@media (max-width: 640px) {
  .hero { padding: 54px 0 34px; }
  .container { padding: 0 18px; }
  footer .footer-main { flex-direction: column; gap: 8px; }
  .footer-legal-nav { gap: 8px 18px; }

  /* Topbar: Marke + Nav stapeln statt nebeneinander zu quetschen */
  .topbar .container { flex-direction: column; align-items: flex-start; gap: 10px; }
  .topbar nav a { margin-left: 0; margin-right: 18px; }
  .topbar nav .btn-sm { margin-left: 0; margin-top: 4px; }

  /* Event-Karten: etwas schmaler, damit am Rand ein Rest der nächsten Karte sichtbar bleibt */
  .event-card { flex: 0 0 78vw; }
  .event-card-img { height: auto; aspect-ratio: 16 / 9; }
  .event-dots { display: flex; }

  /* Pfeile auf Mobile ausgeblendet: Wisch-Geste über die Termin-Karten
     reicht hier aus, die Pfeile wirken auf kleinem Screen nur beengt. */
  .scroll-arrow { display: none; }

  /* VIP-Ticket-Karten: einspaltig, Status-Stempel rückt unter den Titel statt zu überlappen */
  .area-grid { grid-template-columns: 1fr; gap: 16px; }
  .ticket { padding: 22px 18px 18px; }
  .ticket .status-stamp { position: static; display: inline-block; margin-bottom: 12px; }
  .ticket .meta { flex-wrap: wrap; gap: 14px; }

  .section-head { margin: 44px 0 20px; flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Kendo Window (Buchungsdialog / Admin-Dialoge): feste Pixel-Breite überläuft
     auf schmalen Screens -> auf fast volle Breite umstellen, max-height etwas
     knapper als die globalen 90vh für mehr Luft auf kleinen Displays. */
  .k-window {
    width: 92vw !important;
    max-width: 92vw !important;
    left: 4vw !important;
    max-height: 85vh !important;
  }
  .k-window-content {
    max-height: calc(85vh - 48px) !important;
  }

  /* Kendo Notification: unten, volle Breite, statt oben rechts pinned */
  .k-notification-group,
  .k-notification-container {
    top: auto !important;
    right: 12px !important;
    left: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
  .k-notification {
    width: 100% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .hero .lead { font-size: 15px; }
  .event-card { flex: 0 0 88vw; }
}

/* ---------- High Contrast Mode Unterstützung (Windows) ---------- */
@media (forced-colors: active) {
  .btn, .ticket, .event-card, .k-window { border: 1px solid CanvasText; }
}

/* ---------- Formular-Fehlerkennzeichnung (WCAG 3.3.1) ---------- */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
.k-input:has(input[aria-invalid="true"]) {
  border-color: var(--danger) !important;
}