/* =====================================================
   THEME / BASE
===================================================== */

:root{
  --blue:#2563eb;
  --blueDark:#1d4ed8;
  --orange:#f97316;
  --orangeDark:#ea580c;

  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;

  --radius:14px;

  /* Seat sizing (default desktop) */
  --seat:40px;
  --seatFont:12px;
  --seatRadius:8px;
  --seatGap:2px;
  --aisle:40px;
  --rowGap:40px;

  /* Platz für fixed seat-hint */
  --seatHintSpace:110px;
}

*{box-sizing:border-box}

body{
  font-family: Arial, sans-serif;
  margin:0;
  padding:18px;
  background:linear-gradient(180deg, #eef2ff 0%, var(--bg) 35%, var(--bg) 100%);
  color:var(--text);
}

.container{
  max-width:900px;
  margin:0 auto;
  padding-bottom: var(--seatHintSpace); /* damit fixed Hint nichts überdeckt */
}

h1{margin:0 0 16px 0}
h2,h3{margin:16px 0 10px 0}

#reservation-timer{
  font-weight:700;
  font-size:16px;
  margin-bottom:10px;
  padding:10px 12px;
  border:1px solid #dbeafe;
  border-radius:12px;
  background:linear-gradient(90deg, #eff6ff 0%, #fff7ed 100%);
}

.muted{color:var(--muted)}
.divider{height:1px;background:#eee;margin:12px 0}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  margin:12px 0;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}

/* =====================================================
   BÜHNE
===================================================== */

.front-area{
  width:100%;
  display:flex;
  justify-content:center;
}

.stage-box{
  width:100%;
  margin: 10px 0 18px 0;
  padding: 16px 10px;
  background: #9ca3af; /* von dir angepasst */
  border-radius: 14px;
  text-align:center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.stage-label{
  color:#fff;
  font-weight:900;
  letter-spacing:2px;
  font-size:18px;
}

/* =====================================================
   HINWEISBOX
===================================================== */

/* FIX am unteren Bildschirmrand, damit man ihn auch beim Scrollen sieht */
#seat-hint{
  display:none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(980px, calc(100% - 24px));
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  line-height: 1.35;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  z-index: 9999;
}

/* =====================================================
   KINDERBANK
===================================================== */

.child-bench{
  background:linear-gradient(90deg, #fff7ed 0%, #eff6ff 100%);
  border:2px dashed #c7d2fe;
  padding:12px;
  margin-bottom:14px;
  text-align:center;
  border-radius:14px;
}

.child-controls{
  margin-top:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}

.child-controls button{
  font-size:20px;
  padding:6px 14px;
  border-radius:12px;
  border:1px solid #cbd5e1;
  background:#fff;
  cursor:pointer;
}

.child-controls button:active{
  transform:scale(0.98);
}

/* =====================================================
   SEATPLAN
===================================================== */

/* Wichtig: nicht "abschneiden" -> wenig Padding + center */
.seatplan-wrap{
  overflow:visible;               /* kein Scrollbalken */
  -webkit-overflow-scrolling:touch;
  padding:2px 0 10px 0;           /* weniger Rand, damit links/rechts nichts verschwindet */
  margin-bottom:10px;
}

.seatplan{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:max-content;
  margin:0 auto;
}

.seat-row{
  display:flex;
  gap:var(--seatGap);
  margin-bottom:5px;
}

.layout-right .seat-row{ justify-content:right; }
.layout-left  .seat-row{ justify-content:left; }

.seat-group{display:flex;gap:var(--seatGap)}
.aisle{width:var(--aisle);flex-shrink:0}

.seat{
  width:var(--seat);
  height:var(--seat);
  background:#e5e7eb;
  border:1px solid #9ca3af;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--seatFont);
  cursor:pointer;
  user-select:none;
  transition:transform .12s, background .12s, border-color .12s;
  border-radius:var(--seatRadius);
}

.seat:hover{background:#bfdbfe}
.seat.reserved{background:#fed7aa;border-color:#fdba74;color:#111827;cursor:not-allowed}
.seat.mine{background:var(--blue);border-color:var(--blueDark);color:#fff}
.seat.sold{background:#ef4444;border-color:#dc2626;color:#fff;cursor:not-allowed}

/* ✅ zusätzlicher horizontaler Durchgang (z.B. Event 3) */
.seat-row-gap{ height:var(--rowGap); }

/* =====================================================
   AUSWAHLBOX
===================================================== */

#selected-seat-options{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}

/* Desktop: 3 Spalten, Select bewusst breiter */
.selected-row{
  display:grid;
  grid-template-columns: 1fr 280px 90px;  /* Select passt für "Erwachsene (ab 14 Jahre)" */
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid #eee;
  border-radius:14px;
  background:#fafafa;
  margin-bottom:10px;
}

/* Wichtig für Grid-Ellipsis/Schrumpfen */
.selected-row > *{ min-width:0; }

.selected-row:last-child{margin-bottom:0}

.selected-row select{
  width:100%;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  font-weight:700;
}

.selected-row > span:last-child{
  justify-self:end;
  font-weight:900;
  color:#111827;
  white-space:nowrap;
}

/* Platzlabel (z.B. C1) optisch kompakt */
.selected-row > span:first-child{
  font-weight:900;
  color:#111827;
}

/* =====================================================
   BUTTONS
===================================================== */

.actions{
  display:flex;
  gap:10px;
  margin-top:14px;
}

.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid #cbd5e1;
  background:#fff;
  cursor:pointer;
  font-weight:900;
}

.btn-primary{
  background:linear-gradient(90deg, var(--blue) 0%, var(--orange) 100%);
  border-color:transparent;
  color:#fff;
}

.btn-primary:hover{
  filter:brightness(0.97);
}

/* Zurück-Button (gleiches Farbschema, etwas kompakter) */
.btn-back{
  padding:10px 14px;
  font-size:14px;
}

#checkout-button{
  display:inline-block;
  width:auto;
  padding:12px 16px;
  background:linear-gradient(90deg, var(--blue) 0%, var(--orange) 100%);
  border:0;
  color:#fff;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  margin-top:16px;
  font-size:16px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

#checkout-button:hover{ filter:brightness(0.97); }

/* =====================================================
   CHECKOUT FORM GRID
===================================================== */

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px 16px;
}

.form-group{
  display:flex;
  flex-direction:column;
}

.form-group label{
  font-weight:800;
  margin-bottom:6px;
  font-size:14px;
}

.form-group input{
  padding:11px 12px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  font-size:15px;
  background:#fff;
  transition:border .2s, box-shadow .2s;
}

.form-group input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(37,99,235,0.14);
}

/* =====================================================
   SUMMARY LIST (Admin + Checkout)
===================================================== */

.summary-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.summary-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid #eee;
  border-radius:14px;
  background:#fafafa;
}

.summary-item .left{font-weight:900}
.summary-item .right{font-weight:900; white-space:nowrap}

/* =====================================================
   RESPONSIVE (WICHTIG FÜR S24)
===================================================== */

@media(max-width:700px){
  body{padding:12px}

  .form-grid{
    grid-template-columns:1fr;
  }

  /* Auswahlbox: auf Mobile wieder eine Zeile, aber mit sinnvollen festen Breiten */
  .selected-row{
    grid-template-columns: 52px 1fr 62px; /* Platz | Select | Preis */
    gap:8px;
    align-items:center;
    padding:10px;
  }

  .selected-row > span:first-child{
    text-align:left;
    font-size:14px;
  }

  .selected-row select{
    width:100%;
    padding:8px 10px;
    font-size:12px;
    font-weight:800;
  }

  .selected-row > span:last-child{
    font-size:14px;
  }

  .actions{
    flex-direction:column;
  }

  #checkout-button{
    width:100%;
  }
}

/* Mobile Seatplan wirklich "fit" machen:
   17 Plätze Breite müssen auf ~390px passen => Sitzgröße runter */
@media(max-width:500px){
  :root{
    --seat:18px;
    --seatFont:9px;
    --seatGap:2px;
    --aisle:14px;
    --rowGap:18px;
    --seatRadius:6px;

    --seatHintSpace:120px; /* etwas mehr Luft auf sehr kleinen Geräten */
  }

  .container{max-width:100%;}
  .card{padding:12px;}

  /* Noch etwas mehr Platz fürs Select: Preis schmaler, Label bleibt kompakt */
  .selected-row{
    grid-template-columns: 48px 1fr 56px;
  }

  .selected-row select{
    font-size:11px;
  }
}

/* sehr kleine Geräte */
@media(max-width:390px){
  :root{
    --seat:17px;
    --seatFont:8px;
    --aisle:12px;
    --rowGap:16px;
  }

  /* Maximales Zusammenschieben: Label/Preis minimal, Select bleibt lesbar */
  .selected-row{
    grid-template-columns: 44px 1fr 54px;
    gap:6px;
  }

  .selected-row select{
    font-size:11px;
    padding:8px 8px;
  }
}

/* =====================================================
   FOOTER LINKS (Index)
===================================================== */

.footer-links{
  margin-top:12px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:14px;
}

.footer-links a{
  color:#0d47a1;
  font-weight:800;
  text-decoration:none;
}

.footer-links a:hover{
  text-decoration:underline;
}

/* =====================================================
   INDEX PAGE (Hero + Event Cards)
===================================================== */

.hero{
  margin: 12px 0 18px 0;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1565c0, #1e88e5);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.hero h1{ margin:0 0 8px 0; font-size:26px; font-weight:800; }
.hero p{ margin:0; opacity:0.95; }

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
@media(max-width:900px){
  .grid{ grid-template-columns:1fr; }
}

.event-card{
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  gap:12px;
  border-top:6px solid #ff9800;
  transition:all .25s ease;
}
.event-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,0.12);
}

.event-title{
  font-size:20px;
  font-weight:800;
  margin:6px 0 4px 0;
  color:#1565c0;
}

.badge{
  display:inline-block;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:#e3f2fd;
  color:#1565c0;
  font-weight:700;
}

.kv{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
}
.kv strong{ color:#ff9800; }

.ticket-info{
  margin-top:2px;
  font-size:14px;
  font-weight:800;
  color:#0d47a1;
  background:#e3f2fd;
  border:1px solid #bbdefb;
  padding:10px 12px;
  border-radius:12px;
}

.btn-link{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  text-align:center;
  transition:all .2s;
}

/* Hover/Move auch für Link-Buttons im globalen Theme */
.btn-link.btn-primary:hover{
  filter:brightness(0.97);
  transform:translateY(-1px);
}

.footer-note{
  margin-top:18px;
  padding:14px;
  border-radius:14px;
  background:#e3f2fd;
  border:1px solid #bbdefb;
  color:#0d47a1;
  font-size:14px;
}


/* =====================================================
   COOKIE BANNER (DSGVO)
===================================================== */

.cookie-banner{
  position:fixed;
  left:12px;
  right:12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  background:#fff;
  border:1px solid #bbdefb;
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,0.18);
  padding:14px;
  z-index:9999;
  display:none;
}

.cookie-banner .title{
  font-weight:900;
  color:#0d47a1;
  margin-bottom:6px;
}

.cookie-banner .text{
  font-size:13px;
  color:#1f2937;
  line-height:1.35;
}

.cookie-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.cookie-actions button{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #cbd5e1;
  background:#fff;
  cursor:pointer;
  font-weight:900;
}

.cookie-actions .primary{
  border:none;
  color:#fff;
  background:linear-gradient(90deg, var(--blue) 0%, var(--orange) 100%);
}

.cookie-actions a{
  font-weight:900;
  color:#0d47a1;
  text-decoration:none;
}

.cookie-actions a:hover{ text-decoration:underline; }

@media(max-width:500px){
  .cookie-banner{ left:10px; right:10px; padding:12px; }
}


/* ✅ Checkout Loading Spinner */
.btn.loading{
  opacity: 0.85;
  cursor: not-allowed;
}

.btn.loading::after{
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  margin-left:10px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.55);
  border-top-color:#fff;
  animation:ticketingSpin 0.8s linear infinite;
  vertical-align:-2px;
}

@keyframes ticketingSpin{
  to { transform: rotate(360deg); }
}

/* --- Kompakter Hero --- */
.hero-compact {
  padding: 30px 20px;
}

.hero-compact p {
  font-size: 16px;
  font-weight: 600;
  margin-top: 8px;
}

/* --- Event Intro Box --- */
.event-intro {
  background: #ffffff;
  padding: 24px;
  margin: 20px 0 30px 0;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  line-height: 1.6;
}

.event-intro p {
  margin-bottom: 14px;
}

.event-intro .intro-headline {
  font-weight: 700;
  margin-top: 10px;
}

.event-intro .intro-list {
  margin: 10px 0 16px 0;
  padding-left: 18px;
}

.event-intro .intro-list li {
  margin-bottom: 6px;
}

.event-intro .highlight {
  font-weight: 600;
  color: #0d47a1;
}

.event-intro .cta {
  font-weight: 700;
  margin-top: 16px;
}