/* Design angelehnt an spitziale.de (Divi):
   Rot #C11D25 (Footer/Header-Akzent), Indianred #CD5C5C (Links/Buttons),
   Seite #EEEEEE, Fließtext #666, Schrift Roboto / Roboto Condensed. */

:root {
  --red: #c11d25;
  --accent: #cd5c5c;
  --accent-dark: #b34848;
  --page-bg: #eeeeee;
  --card-bg: #ffffff;
  --text: #666666;
  --heading: #333333;
  --seat-free: #ffffff;
  --seat-free-border: #999999;
  --seat-taken: #c9c9c9;
  --font: Roboto, Helvetica, Arial, Lucida, sans-serif;
  --font-cond: "Roboto Condensed", "Arial Narrow", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background: var(--page-bg);
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; width: 100%; }

h1 { font-family: var(--font-cond); font-weight: 600; color: var(--heading); font-size: 32px; margin: 0.4em 0; }
h2 { font-family: var(--font-cond); font-weight: 600; color: var(--heading); font-size: 22px; margin: 0 0 0.5em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.site-header { background: #fff; border-bottom: 3px solid var(--red); }
.header-inner { display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
.logo img { height: 52px; display: block; }
.logo-text { font-family: var(--font-cond); font-weight: 700; font-size: 30px; color: var(--red); }
.header-claim { font-family: var(--font-cond); font-weight: 600; font-size: 19px; color: var(--text); margin-left: auto; text-align: right; }

main { flex: 1; padding: 24px 0 48px; }
.intro { max-width: 640px; }

/* Ticketkarten */
.ticket-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
.ticket-card {
  background: var(--card-bg); border: 1px solid #ddd; border-top: 4px solid var(--accent);
  padding: 22px 24px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ticket-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.ticket-card h3 { font-family: var(--font-cond); font-weight: 600; color: var(--heading); font-size: 24px; margin: 0 0 6px; }
.ticket-card .date { font-weight: 500; color: var(--heading); }
.ticket-card .times { font-size: 15px; }
.ticket-card .cta { display: inline-block; margin-top: 14px; color: var(--accent); font-family: var(--font-cond); font-weight: 600; font-size: 19px; }

/* Platzwahl */
.linklike { background: none; border: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.linklike:hover { text-decoration: underline; }

/* Anzahl-Auswahl */
.qty-buttons { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.qty-btn {
  width: 84px; height: 84px; font-family: var(--font-cond); font-weight: 600; font-size: 34px;
  background: var(--card-bg); color: var(--heading); border: 2px solid var(--accent); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.qty-btn:hover { background: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.ticket-card .price { font-family: var(--font-cond); font-weight: 700; font-size: 26px; color: var(--red); margin: 10px 0 0; }

/* Warenkorb */
.cart { border-top: 2px solid var(--page-bg); margin-top: 14px; padding-top: 10px; }
.cart h3 { font-family: var(--font-cond); font-weight: 600; color: var(--heading); font-size: 19px; margin: 0 0 6px; }
.cart table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cart td { padding: 3px 0; }
.cart td.amount { text-align: right; white-space: nowrap; }
.cart tr.total td { border-top: 1px solid #ddd; font-weight: 700; color: var(--heading); padding-top: 6px; }

.evening-tabs { display: flex; gap: 8px; margin: 18px 0 0; }
.tab {
  font-family: var(--font-cond); font-weight: 600; font-size: 19px; cursor: pointer;
  padding: 8px 22px; border: 1px solid #ccc; border-bottom: none; background: #e3e3e3; color: var(--text);
}
.tab.active { background: var(--card-bg); color: var(--red); }
.tab .check { color: #2e7d32; }

.seatmap-layout { display: flex; gap: 24px; align-items: flex-start; margin-top: 0; flex-wrap: wrap; }
.seatmap-panel { background: var(--card-bg); border: 1px solid #ddd; padding: 20px; flex: 1 1 560px; }
.screen-bar {
  background: #333; color: #fff; text-align: center; font-family: var(--font-cond);
  letter-spacing: 6px; font-size: 14px; padding: 4px 0; margin: 0 auto 18px; width: 70%;
  border-radius: 0 0 12px 12px;
}
#seatmap svg { width: 100%; height: auto; display: block; }

#seatmap .seat { cursor: pointer; fill: var(--seat-free); stroke: var(--seat-free-border); stroke-width: 1; }
#seatmap .seat:hover { stroke: var(--accent); stroke-width: 2; }
#seatmap .seat.selected { fill: var(--accent); stroke: var(--accent-dark); }
#seatmap .seat.taken { fill: var(--seat-taken); stroke: #b5b5b5; cursor: not-allowed; }
#seatmap .seat.blocked { fill: #f3f3f3; stroke: #cccccc; stroke-dasharray: 2 2; cursor: not-allowed; }
#seatmap .rowlabel { font-family: var(--font-cond); font-size: 9px; fill: #999; }

.legend { display: flex; gap: 22px; margin-top: 16px; font-size: 15px; flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 7px; }
.seat-demo { width: 14px; height: 14px; display: inline-block; border: 1px solid var(--seat-free-border); background: var(--seat-free); }
.seat-demo.selected { background: var(--accent); border-color: var(--accent-dark); }
.seat-demo.taken { background: var(--seat-taken); border-color: #b5b5b5; }
.seat-demo.blocked { background: #f3f3f3; border-style: dashed; border-color: #ccc; }

/* Zusammenfassung */
.summary { background: var(--card-bg); border: 1px solid #ddd; padding: 20px 22px; flex: 1 1 260px; max-width: 340px; }
.summary .evening-line { margin: 6px 0; }
.summary .evening-line b { color: var(--heading); }
.summary .hint { font-size: 14px; margin: 10px 0 0; }

.btn-primary, .btn-secondary {
  display: block; width: 100%; margin-top: 12px; padding: 11px 18px; cursor: pointer;
  font-family: var(--font-cond); font-weight: 600; font-size: 19px; border: 2px solid var(--accent);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-secondary { background: #fff; color: var(--accent); }
.btn-secondary:hover { background: #faf1f1; }

/* Reserviert */
.held-summary { background: var(--card-bg); border: 1px solid #ddd; padding: 20px 22px; max-width: 480px; }
.held-actions { max-width: 480px; }
#countdown { color: var(--red); font-variant-numeric: tabular-nums; }

/* Footer */
.site-footer { background: var(--red); color: #fff; padding: 22px 0; font-size: 15px; }
.site-footer p { margin: 4px 0; }
.site-footer a { color: #fff; text-decoration: underline; }

@media (max-width: 720px) {
  .header-claim { display: none; }
  body { font-size: 16px; }
}