/* ticket.actionplace.world - Design 2026 (05.10.2026, Stufe 2 "hochwertig")
   Wird NACH den alten Stylesheets geladen und ueberschreibt nur das Aussehen.
   Logik, Formulare und Sitzplan-Positionen bleiben unveraendert. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --tk-ink:#0d1b26;
  --tk-ink-2:#1c3142;
  --tk-muted:#6b7680;
  --tk-line:#e6e2db;
  --tk-bg:#f7f5f1;
  --tk-card:#ffffff;
  --tk-gold:#b8955a;
  --tk-gold-soft:#f3ecdf;
  --tk-radius:14px;
  --tk-shadow:0 1px 1px rgba(13,27,38,.04), 0 12px 32px -12px rgba(13,27,38,.18);
  --tk-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --tk-sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html{ -webkit-text-size-adjust:100%; }
body{ margin:0 !important; padding:0 !important; }
.div_flex_events_list > div{ box-sizing:border-box; min-width:0; }
.div_events_list_part_2{ overflow-wrap:anywhere; }
body{
  font-family:var(--tk-sans) !important;
  background:var(--tk-bg) !important;
  color:var(--tk-ink);
  font-size:16px !important;
  line-height:1.6 !important;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--tk-ink); }

/* ---------- Sprachwahl ---------- */
.tk-lang{ position:absolute; top:12px; right:16px; z-index:40; display:flex; gap:4px; font-family:var(--tk-sans); }
.tk-lang a{ color:#c9d1d8 !important; text-decoration:none; font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; padding:6px 8px; border-bottom:1px solid transparent; }
.tk-lang a[aria-current]{ color:#fff !important; border-bottom-color:var(--tk-gold); }
.tk-lang a:hover{ color:#fff !important; }
body{ position:relative; }

/* ---------- Kopfbereich ---------- */
.div_header, .main_menue{
  background:var(--tk-ink) !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  margin:0 0 36px !important; width:auto !important;
  padding:26px 20px 30px !important; text-align:center !important; position:relative;
}
.div_header::after, .main_menue::after{
  content:''; position:absolute; left:50%; bottom:0; width:56px; height:2px; margin-left:-28px; background:var(--tk-gold);
}
.div_header a, .div_header .h1_link{
  font-family:var(--tk-sans); font-size:13px !important; font-weight:600 !important;
  letter-spacing:3px; text-transform:uppercase; color:#fff !important; margin:0 !important;
}
.main_menue h1{
  margin:0 auto 10px !important; max-width:900px;
  font-family:var(--tk-serif) !important; font-weight:500 !important;
  font-size:clamp(22px, 3.4vw, 36px) !important; line-height:1.2 !important; letter-spacing:.3px;
}
.main_menue h2{
  margin:0 !important; padding:0 !important; background:none; border:0;
  font-family:var(--tk-sans) !important; font-size:13px !important; font-weight:500 !important;
  letter-spacing:2.4px; text-transform:uppercase; color:#d9c7a4 !important;
}

/* ---------- Startseite: Eventliste ---------- */
.main_content{
  width:auto !important; max-width:1080px; margin:0 auto !important;
  padding:8px 20px 56px !important; background:transparent !important; font-size:16px !important;
}
.div_flex_events_list{
  background:var(--tk-card); border:1px solid var(--tk-line); border-radius:var(--tk-radius) !important;
  box-shadow:var(--tk-shadow); padding:0 !important; margin:0 0 32px !important; overflow:hidden;
  gap:0; flex-wrap:nowrap !important; color:var(--tk-ink) !important; box-sizing:border-box;
}
.div_events_list_part_1{ width:34% !important; flex:0 0 34%; padding:0 !important; }
.div_events_list_part_1 img{ width:100% !important; height:100%; border-radius:0 !important; display:block; object-fit:cover; aspect-ratio:1/1; }
.div_events_list_part_2{ width:auto !important; flex:1 1 auto; padding:30px 32px !important; color:var(--tk-muted); font-size:15px; }
.div_events_list_part_2 h2{
  font-family:var(--tk-serif) !important; color:var(--tk-ink) !important; font-weight:500 !important;
  font-size:clamp(22px,2.4vw,28px) !important; line-height:1.22 !important; margin:0 0 14px !important; letter-spacing:.2px;
}
.div_events_list_part_2 p{ color:var(--tk-ink-2) !important; font-size:15.5px !important; line-height:1.7 !important; margin:0 0 14px; }
.div_events_list_part_2 > p.tk-sponsor{ color:var(--tk-gold) !important; font-size:13px !important; letter-spacing:1.6px; text-transform:uppercase; font-weight:600; }
.div_events_list_part_3{
  width:auto !important; flex:0 0 200px; padding:30px 28px 30px 0 !important;
  display:flex !important; flex-direction:column !important; justify-content:flex-end !important; gap:10px;
}
.list_ticket, .list_preis, .list_ticket_infos{ background-image:none !important; }
.list_preis{
  order:-1; width:auto !important; background:none !important; background-color:transparent !important; color:var(--tk-ink) !important;
  padding:0 !important; border-radius:0 !important; text-align:center;
  font-family:var(--tk-serif); font-size:22px !important; font-weight:500;
}
.list_ticket{
  width:auto !important; background-color:var(--tk-ink) !important; color:#fff !important;
  border-radius:10px !important; padding:15px 12px !important; text-align:center;
  font-size:14px !important; font-weight:600; letter-spacing:2.4px; text-transform:uppercase; transition:background-color .15s;
}
.list_ticket:hover{ background-color:var(--tk-ink-2) !important; }
.list_ticket_infos{
  background:transparent !important; background-color:transparent !important; color:var(--tk-ink) !important; border:1px solid var(--tk-ink);
  padding:9px 18px !important; border-radius:10px !important; font-size:12px !important; font-weight:600; letter-spacing:2px;
}
.list_ticket_infos:hover{ background-color:var(--tk-ink) !important; color:#fff !important; }
.details{
  color:var(--tk-gold) !important; font-size:11px !important; text-transform:uppercase; letter-spacing:1.8px;
  margin:22px 0 4px !important; font-weight:600;
}

/* ---------- Fusszeile ---------- */
.footer{
  background:var(--tk-ink) !important; background-image:none !important; border:0 !important; border-radius:0 !important;
  width:auto !important; height:auto !important; padding:40px 16px 48px !important; margin-top:56px !important;
  font-size:13px !important; letter-spacing:.4px; color:#9aa7b2 !important;
}
.footer a{ color:#d9dee3 !important; margin:6px 12px !important; font-size:12px; letter-spacing:1.6px; }

/* ---------- Ticketseite: Sitzplan + Warenkorb ---------- */
.main_flex_container{
  height:auto !important; overflow:visible !important;
  max-width:1360px; margin:0 auto; padding:0 20px; box-sizing:border-box;
  gap:28px; flex-wrap:nowrap !important; align-items:flex-start !important;
}
.part_formular_raum{
  flex:1 1 auto; width:auto !important; min-width:0;
  background:var(--tk-card); border:1px solid var(--tk-line); border-radius:var(--tk-radius);
  box-shadow:var(--tk-shadow); padding:22px !important; box-sizing:border-box;
  height:calc(100vh - 230px) !important; min-height:440px; overflow:auto !important;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.part_formular_raum > h1{ font-family:var(--tk-sans) !important; font-size:11px !important; letter-spacing:2.4px; color:var(--tk-gold) !important; font-weight:600 !important; margin:0 !important; text-align:left; }
.part_formular_raum > p{ text-align:left !important; color:var(--tk-ink) !important; margin:4px 0 14px !important; font-family:var(--tk-serif); font-size:20px; }
.button_lupe{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:38px !important; height:38px !important; padding:0 !important; margin:0 6px 16px 0 !important;
  border-radius:50%; border:1px solid var(--tk-line); background:#fff;
  color:var(--tk-ink) !important; font-size:18px !important; font-weight:500; line-height:1; user-select:none;
}
.button_lupe:hover{ border-color:var(--tk-ink); }
.hauptcontainer_res{ background:transparent !important; }

.part_formular_data{
  flex:0 0 380px; width:380px !important; background:none !important; height:auto !important; position:sticky; top:20px;
}
.part_formular_data > h2{
  margin:0 !important; padding:18px 24px !important; text-align:left !important;
  background:var(--tk-ink); color:#fff !important; font-family:var(--tk-serif) !important;
  font-size:20px !important; font-weight:500 !important; letter-spacing:.3px;
  border-radius:var(--tk-radius) var(--tk-radius) 0 0;
}
.part_formulat_data_maindata{
  width:auto !important; margin:0 !important; padding:20px 24px 24px !important; height:auto !important;
  max-height:calc(100vh - 270px); overflow:auto;
  background:var(--tk-card) !important; border:1px solid var(--tk-line); border-top:0;
  border-radius:0 0 var(--tk-radius) var(--tk-radius) !important; box-shadow:var(--tk-shadow);
  font-size:15px; text-align:left;
}
.part_formulat_data_maindata table{ width:100%; border-collapse:collapse; }
.part_formulat_data_maindata td{ padding:10px 0; border-bottom:1px solid var(--tk-line); font-size:15px; color:var(--tk-ink-2); }
.part_formulat_data_maindata td:last-child{ text-align:right; white-space:nowrap; font-weight:600; color:var(--tk-ink); }
.part_formulat_data_maindata p{ color:var(--tk-muted); font-size:14px; }
.part_formulat_data_maindata a{ color:var(--tk-muted); font-size:13px; }
#sammelbox_reservierungen{ margin-top:12px; font-weight:600; font-size:14px; }
#sammelbox_reservierungen textarea{
  width:100% !important; box-sizing:border-box; margin:10px 0 !important; padding:14px !important;
  border:1px solid var(--tk-line) !important; border-radius:10px; background:var(--tk-bg);
  font-family:var(--tk-sans) !important; font-size:14px !important; line-height:1.7; color:var(--tk-ink); resize:none;
}

/* Plaetze */
.sitzplatz_standart_stadion{
  border:1px solid #cfd6dc !important; border-radius:7px !important; background-color:#fff !important;
  color:var(--tk-ink-2); font-size:12px !important; font-weight:500; letter-spacing:.4px;
  display:flex !important; align-items:center; justify-content:center;
  box-sizing:border-box; cursor:pointer; transition:background-color .12s, border-color .12s, color .12s;
}
.sitzplatz_standart_stadion:hover{ border-color:var(--tk-ink) !important; }
.sitzplatz_standart_rund, .sitzplatz_standart{ border-radius:7px !important; }
.reserviert{
  background-color:#f1efeb !important; border-color:#ebe7e0 !important; background-image:none !important;
  color:transparent !important; cursor:default !important;
}
.reserviert::after{ content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#c9c2b6; }
.reserviert:hover{ border-color:#ebe7e0 !important; }
.obj_selected{
  background-image:none !important; background-color:var(--tk-ink) !important; border-color:var(--tk-ink) !important;
  color:#fff !important; box-shadow:0 0 0 2px var(--tk-gold);
}
.nicht_moeglich{ opacity:.4 !important; }
.buehne, .bar, .tisch_rund_10pers, .tisch_rund_8pers{ border-radius:10px !important; background-color:var(--tk-gold-soft) !important; border-color:#e7dcc6 !important; color:var(--tk-ink) !important; font-weight:500; letter-spacing:1px; }

/* Auswahlfenster "Ticketart fuer diesen Platz?" (Computer) */
div:has(> #select_field){
  background:#fff !important; background-image:none !important;
  border:1px solid var(--tk-line); border-radius:12px; padding:10px !important;
  box-shadow:0 18px 40px -10px rgba(13,27,38,.35) !important; width:260px !important; z-index:20 !important;
}
#select_field select{
  width:100% !important; font-family:var(--tk-sans) !important; font-size:16px !important;
  padding:11px 12px !important; border:1px solid var(--tk-ink) !important; border-radius:8px; background:#fff; color:var(--tk-ink);
}

/* Formulare und Knoepfe */
.formular input[type=text], .formular input[type=email], .formular input[type=tel], .formular textarea,
.part_formular_data_step_2 input[type=text], .part_formular_data_step_2 input[type=email], .part_formular_data_step_2 input[type=tel]{
  width:100% !important; box-sizing:border-box; font-family:var(--tk-sans) !important; font-size:16px !important;
  padding:14px 16px !important; margin:0 0 12px !important; color:var(--tk-ink) !important;
  border:1px solid var(--tk-line) !important; border-radius:10px; background:#fff;
}
.formular input:focus, .formular textarea:focus{ outline:none; border-color:var(--tk-ink) !important; box-shadow:0 0 0 3px rgba(184,149,90,.22); }
.formular input[type=submit], input.button_2, #sammelbox_reservierungen input[type=submit]{
  display:block; width:100% !important; box-sizing:border-box; margin:16px 0 6px !important;
  padding:16px 18px !important; border:0 !important; border-radius:10px !important;
  background:var(--tk-ink) !important; background-image:none !important; color:#fff !important;
  font-family:var(--tk-sans) !important; font-size:14px !important; font-weight:600; letter-spacing:2.4px; text-transform:uppercase; cursor:pointer;
  transition:background-color .15s;
}
.formular input[type=submit]:hover, input.button_2:hover{ background:var(--tk-ink-2) !important; }
input.button_2[name=send_data_kor]{ background:transparent !important; color:var(--tk-ink) !important; border:1px solid var(--tk-ink) !important; }

/* Schritt 2: Bestellung */
.part_formular_data_step_2{
  width:auto !important; max-width:640px; margin:0 auto 48px !important; padding:0 !important;
  background:none !important; box-shadow:none !important;
}
.part_formular_data_step_2 > h1{ color:var(--tk-ink) !important; font-family:var(--tk-serif); font-size:clamp(22px,3vw,30px) !important; font-weight:500; text-align:left; margin:0 20px 16px !important; }
.part_formular_data_step_2 > h1 span{ display:block; color:var(--tk-gold) !important; font-family:var(--tk-sans); font-size:11px; letter-spacing:2.4px; text-transform:uppercase; font-weight:600; margin-bottom:6px; }
.part_formular_data_step_2 > div{
  width:auto !important; margin:0 20px !important; padding:28px !important;
  border:1px solid var(--tk-line); border-radius:var(--tk-radius) !important; box-shadow:var(--tk-shadow); text-align:left;
}

/* Handy: Ticketart-Auswahl als Fenster unten */
#tk-sheet{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:60;
  background:#fff; border-radius:16px; padding:18px; box-shadow:0 -10px 40px rgba(13,27,38,.3);
}
#tk-sheet .tk-sheet-title{ font-family:var(--tk-serif); font-weight:500; font-size:19px; margin:0 0 12px; color:var(--tk-ink); }
#tk-sheet select{ width:100% !important; font-size:17px !important; padding:14px !important; border:1px solid var(--tk-ink) !important; border-radius:10px; background:#fff; font-family:var(--tk-sans) !important; }

/* ---------- Mobile Leiste "Zur Kasse" ---------- */
.tk-bar{ display:none; }

@media (max-width: 900px){
  .tk-lang{ position:static; justify-content:center; background:var(--tk-ink); padding:10px 0 0; }
  .tk-lang + .div_header, .tk-lang + .main_menue{ padding-top:14px !important; }
  .div_flex_events_list{ flex-wrap:wrap !important; }
  .div_events_list_part_1{ flex:0 0 100%; width:100% !important; }
  .div_events_list_part_1 img{ aspect-ratio:4/3; }
  .div_events_list_part_2{ flex:0 0 100%; padding:24px 22px 8px !important; }
  .div_events_list_part_3{ flex:0 0 100%; padding:8px 22px 24px !important; }
  .list_preis{ text-align:left; }

  .main_flex_container{ flex-direction:column; flex-wrap:nowrap !important; padding:0 12px; gap:16px; }
  .part_formular_raum{ width:100% !important; height:62vh !important; min-height:360px; padding:16px !important; }
  .part_formular_data{ position:static; flex:none; width:100% !important; padding:0 !important; box-shadow:none !important; margin-bottom:100px; }
  .part_formulat_data_maindata{ max-height:none; }
  .tk-bar{
    display:flex; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:50; align-items:center; gap:12px; padding:10px 10px 10px 18px;
    background:var(--tk-ink); color:#fff; border-radius:14px; box-shadow:0 14px 34px rgba(13,27,38,.4);
    transform:translateY(140%); transition:transform .22s ease;
  }
  .tk-bar.is-visible{ transform:none; }
  .tk-bar-info{ flex:1; font-size:13px; line-height:1.35; color:#c9d1d8; }
  .tk-bar-info strong{ display:block; font-family:var(--tk-serif); font-weight:500; font-size:18px; color:#fff; }
  .tk-bar button{
    border:0; border-radius:10px; padding:14px 18px; font-family:var(--tk-sans); font-size:13px; font-weight:600;
    letter-spacing:2px; text-transform:uppercase; background:var(--tk-gold); color:var(--tk-ink); cursor:pointer;
  }
}

/* ---------- Startseite: Galerie, Suche, Kategorien (Stufe 3) ---------- */
.tk-hero{ margin:0 0 28px; }
.tk-hero-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:2px 2px 6px; scrollbar-width:none; }
.tk-hero-track::-webkit-scrollbar{ display:none; }
.tk-slide{ position:relative; flex:0 0 min(78%, 520px); aspect-ratio:4/3; border-radius:var(--tk-radius); overflow:hidden; scroll-snap-align:start; text-decoration:none; background:var(--tk-ink); box-shadow:var(--tk-shadow); }
.tk-slide img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.tk-slide:hover img{ transform:scale(1.03); }
.tk-slide-info{ position:absolute; left:0; right:0; bottom:0; padding:48px 20px 18px; display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(180deg, rgba(13,27,38,0) 0%, rgba(13,27,38,.86) 62%); color:#fff; }
.tk-slide-info strong{ font-family:var(--tk-serif); font-weight:500; font-size:clamp(19px,2.4vw,24px); line-height:1.2; }
.tk-slide-info > span:last-child{ font-size:13px; color:#d6dde3; letter-spacing:.3px; }
.tk-chip{ align-self:flex-start; display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; background:var(--tk-gold-soft); color:#7a5f30; }
.tk-slide .tk-chip{ background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px); }
.tk-dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
.tk-dots button{ width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#d3cec4; cursor:pointer; transition:width .2s, background .2s; }
.tk-dots button.is-aktiv{ width:22px; border-radius:4px; background:var(--tk-ink); }

.tk-filter{ display:flex; flex-direction:column; gap:12px; margin:0 0 26px; }
#tk-suche{ width:100%; box-sizing:border-box; font-family:var(--tk-sans); font-size:16px; padding:14px 16px 14px 44px; border:1px solid var(--tk-line); border-radius:12px; background:#fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b7680' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") 16px center no-repeat; color:var(--tk-ink); }
#tk-suche:focus{ outline:none; border-color:var(--tk-ink); box-shadow:0 0 0 3px rgba(184,149,90,.22); }
.tk-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.tk-chips::-webkit-scrollbar{ display:none; }
.tk-chips button{ flex:0 0 auto; font-family:var(--tk-sans); font-size:13px; font-weight:500; padding:9px 16px; border-radius:999px; border:1px solid var(--tk-line); background:#fff; color:var(--tk-ink-2); cursor:pointer; }
.tk-chips button.is-aktiv{ background:var(--tk-ink); border-color:var(--tk-ink); color:#fff; }

.tk-karte-kopf{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.tk-datum{ font-size:13px; font-weight:600; color:var(--tk-ink); letter-spacing:.3px; }
.tk-ort{ font-size:14px; color:var(--tk-muted); margin:0 0 12px; line-height:1.5; }
.tk-fakten{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:4px 18px; margin:8px 0 6px; color:var(--tk-ink); }
.tk-tags{ color:var(--tk-muted) !important; font-size:13px !important; }
.tk-leer{ text-align:center; color:var(--tk-muted); padding:30px 10px; }
.tk-hilfe-link{ text-align:center; margin:10px 0 0; }
.tk-hilfe-link a{ color:var(--tk-ink); font-size:13px; letter-spacing:1px; text-transform:uppercase; font-weight:600; text-decoration:none; border-bottom:1px solid var(--tk-gold); padding-bottom:2px; }

/* Ticketlimit und Hinweise im Bestellweg */
.tk-limit{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--tk-muted); margin:10px 0 4px; }
.tk-limit strong{ color:var(--tk-ink); }
.tk-meldung{ background:var(--tk-gold-soft); border-left:3px solid var(--tk-gold); padding:10px 12px; border-radius:8px; font-size:14px; color:var(--tk-ink); margin:8px 0; }
.tk-zustimmung{ display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--tk-ink-2); margin:10px 0 6px; text-align:left; }
.tk-zustimmung input{ width:22px !important; height:22px; margin:2px 0 0 !important; flex:0 0 22px; accent-color:var(--tk-ink); }
.tk-hinweis{ font-size:13px; line-height:1.55; color:var(--tk-muted); background:var(--tk-bg); border-radius:10px; padding:12px 14px; margin:8px 0 4px; text-align:left; }
.tk-hinweis strong{ color:var(--tk-ink); }
.tk-feldname{ display:block; font-size:12px; font-weight:600; letter-spacing:.6px; color:var(--tk-muted); margin:4px 0 6px; text-align:left; }

@media (max-width: 900px){
  .tk-slide{ flex-basis:86%; }
}