/* ======================================================================
   TERMINWAHL  (nur /tickets)
   Heller KICK-Look fuer ein aelteres Publikum: weisse und hellgraue
   Flaechen, Schwarz nur als Schriftfarbe.
     Pink = Spieltag (Rahmen und Zahl), Kaufknopf, Akzente
     Gelb = gewaehlter Tag und Monat, Kulturpreis
   ====================================================================== */

/* Farben fuer Kalender und Kasse (die Kasse haengt im Vollbild direkt an body) */
.tw,.tk{
  --tw-schwarz:#0a0a0a;
  --tw-pink:#e03373;
  --tw-pink-text:#c4205e;      /* Pink fuer Schrift auf Weiss, besser lesbar */
  --tw-pink-hell:#fdeef3;
  --tw-gelb:#ffdd00;
  --tw-gelb-hell:#fff6bf;
  --tw-text:#1a1a1a;
  --tw-mute:#5c5c5c;
  --tw-grau:#f4f3f0;           /* wie der Shop-Abschnitt */
  --tw-linie:#e4e2dc;
  --tw-gut:#1a7f3c;
  --tw-gefragt:#b45309;
  --tw-wenig:#c4205e;
  --tw-schraeg:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.tw{
  max-width:1180px;
  margin:0 auto;
  color:var(--tw-text);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.5;
}
.tw *,.tk *{box-sizing:border-box}
.tw button,.tk button{font-family:var(--f-body);-webkit-tap-highlight-color:transparent}
.tw :focus-visible,.tk :focus-visible{outline:3px solid var(--tw-pink);outline-offset:3px}
.tw [hidden],.tk [hidden],.tk[hidden]{display:none!important}

/* ---------- Buehne: Kalender links, Auswahl rechts (Computer) ---------- */
.tw-buehne{display:grid;gap:22px;align-items:start}
@media (min-width:980px){.tw-buehne{grid-template-columns:minmax(0,1fr) 380px}}

.tw-kal{
  position:relative;padding:clamp(14px,2vw,26px);border-radius:4px;background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.06),0 0 0 1px rgba(224,51,115,.1);
}
.tw-kal::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px 4px 0 0;background:linear-gradient(90deg,var(--tw-pink),var(--tw-gelb))}

/* Monate: hellgraue Leiste, gewaehlter Monat gelb und schraeg */
.tw-monate{display:flex;gap:4px;padding:5px;background:var(--tw-grau);border-radius:3px;box-shadow:inset 0 0 0 1px var(--tw-linie)}
.tw-monat-knopf{
  position:relative;flex:1 1 0;display:grid;justify-items:center;align-content:center;min-width:0;min-height:56px;padding:6px 4px;
  border:0;background:none;color:#4a4a4a;cursor:pointer;line-height:1.05;
  clip-path:var(--tw-schraeg);transition:background .2s,color .2s;
}
.tw-monat-knopf b{font-family:var(--f-display);font-weight:900;font-size:1.5rem;letter-spacing:.06em;text-transform:uppercase}
.tw-monat-knopf small{font-size:.6875rem;font-weight:700;letter-spacing:.14em;color:#777}
.tw-monat-knopf:hover{background:#fff;color:var(--tw-schwarz)}
.tw-monat-knopf[aria-pressed="true"]{background:var(--tw-gelb);color:var(--tw-schwarz)}
.tw-monat-knopf[aria-pressed="true"] small{color:#4a4a4a}
/* Kulturpreis-Monate: kleiner pinker Punkt oben rechts */
.tw-monat-knopf.hat-kultur::after{content:"";position:absolute;top:8px;right:14px;width:7px;height:7px;border-radius:50%;background:var(--tw-pink)}

.tw-monat-titel{
  margin:clamp(18px,2.4vw,26px) 0 clamp(10px,1.4vw,14px);text-align:center;
  font-family:var(--f-display);font-weight:900;font-size:clamp(2.75rem,5vw,3.75rem);line-height:.9;
  letter-spacing:.03em;text-transform:uppercase;color:var(--tw-text);
}
.tw-monat-titel span{color:var(--tw-pink)}

/* Kulturpreis-Hinweis: gelbes Band, dunkle Schrift */
.tw-kulturband{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;
  margin:0 auto clamp(14px,1.8vw,20px);padding:9px 18px;max-width:560px;
  background:var(--tw-gelb);color:var(--tw-text);font-size:.9375rem;font-weight:600;text-align:center;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}
.tw-kulturband b{font-family:var(--f-display);font-weight:900;font-size:1.25rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tw-pink-text)}

.tw-raster{display:grid;grid-template-columns:repeat(var(--spalten,4),minmax(0,1fr));gap:clamp(6px,.9vw,10px)}
.tw-wt{padding:0 0 4px;text-align:center;font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--tw-pink-text)}
.tw-wt-kurz{display:none}

.tw-feld{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;min-height:112px;
  padding:10px 12px 12px;border:0;border-radius:4px;text-align:left;font:inherit;color:inherit;
}
.tw-feld--leer{background:none}
/* Kein Spieltag: flach und blass */
.tw-feld--ohne{background:var(--tw-grau)}
.tw-feld--ohne .tw-feld-nr{color:#c9c6be}
/* Spieltag: weiss mit pinkem Rahmen, hebt sich klar ab */
.tw-feld--spiel{
  background:#fff;color:var(--tw-text);cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--tw-pink),0 4px 12px rgba(224,51,115,.12);
  transition:transform .16s,box-shadow .18s,background .18s;
}
.tw-feld--spiel .tw-feld-nr{color:var(--tw-pink-text)}
.tw-feld--spiel:hover{transform:translateY(-2px);background:var(--tw-pink-hell);box-shadow:inset 0 0 0 2px var(--tw-pink),0 10px 20px rgba(224,51,115,.2)}
.tw-feld--spiel[aria-pressed="true"]{
  background:var(--tw-gelb);transform:translateY(-2px);
  box-shadow:inset 0 0 0 3px var(--tw-pink),0 12px 24px rgba(224,51,115,.25);
}
.tw-feld--spiel[aria-pressed="true"] .tw-feld-nr{color:var(--tw-text)}
.tw-feld--spiel.ist-aus{background:var(--tw-grau);color:#8a877f;box-shadow:inset 0 0 0 1px var(--tw-linie)}
.tw-feld--spiel.ist-aus .tw-feld-nr{color:#a8a59d}
.tw-feld-nr{font-family:var(--f-display);font-weight:900;font-size:2.25rem;line-height:.9;letter-spacing:.02em}
.tw-feld-zeiten{display:grid;gap:1px;font-size:1rem;font-weight:700;color:var(--tw-text);font-variant-numeric:tabular-nums}
.tw-feld-zeiten .aus{text-decoration:line-through;opacity:.5}
.ist-aus .tw-feld-zeiten{color:inherit}
.tw-feld-preis{
  margin-top:auto;padding:2px 8px;font-size:.75rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  background:var(--tw-gelb);color:var(--tw-text);clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
}
.tw-feld--spiel[aria-pressed="true"] .tw-feld-preis{background:#fff}
.tw-feld-info{margin-top:auto;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tw-feld-info--knapp{color:var(--tw-wenig)}

.tw-wechsel{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;margin-top:clamp(16px,2vw,22px);
  border:2px solid var(--tw-pink);border-radius:3px;background:#fff;
  color:var(--tw-text);font-size:.875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:background .2s,color .2s;
}
.tw-wechsel:hover{background:var(--tw-pink);color:#fff}
.tw-wechsel svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tw-wechsel--oben{margin:0 0 6px}

/* ---------- Auswahl eines Tages: weisse Karte ---------- */
.tw-seite{position:sticky;top:calc(var(--tw-oben,120px) + 18px)}
.tw-detail{
  position:relative;padding:clamp(16px,2vw,22px);border-radius:4px;background:#fff;color:var(--tw-text);
  box-shadow:0 18px 40px rgba(0,0,0,.1),0 0 0 1px rgba(224,51,115,.15);
}
.tw-detail::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px 4px 0 0;background:linear-gradient(90deg,var(--tw-pink),var(--tw-gelb))}
.tw-detail.ist-neu{animation:tw-auf .28s cubic-bezier(.2,.75,.3,1)}
.tw-detail--inline{grid-column:1 / -1;margin:8px 0 8px}
.tw-detail--inline::after{
  content:"";position:absolute;top:-10px;left:calc((var(--spalte) + .5) / var(--spalten) * 100%);transform:translateX(-50%);
  border:11px solid transparent;border-top:0;border-bottom-color:var(--tw-pink);
}
.tw-detail-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tw-detail-kopf h3{margin:0;font-family:var(--f-display);font-weight:900;font-size:2rem;line-height:.95;letter-spacing:.04em;text-transform:uppercase;color:var(--tw-text);outline:0}
.tw-detail-zu{
  flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--tw-linie);background:#fff;
  color:var(--tw-text);font-size:1rem;cursor:pointer;transition:background .2s,border-color .2s;
}
.tw-detail-zu:hover{border-color:var(--tw-pink);background:var(--tw-pink-hell)}
.tw-detail-unter{margin:4px 0 14px;font-size:1rem;color:var(--tw-mute)}
.tw-fein{margin:14px 0 0;font-size:.875rem;line-height:1.5;color:var(--tw-mute)}

.tw-show{
  display:grid;gap:10px;padding:16px;border-radius:4px;background:var(--tw-grau);color:var(--tw-text);
  box-shadow:inset 0 0 0 1px var(--tw-linie);
}
.tw-show + .tw-show{margin-top:10px}
.tw-show-datum{margin:0;font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tw-pink-text)}
.tw-show-oben{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tw-show-zeit{margin:0;font-family:var(--f-display);font-weight:900;font-size:3rem;line-height:.85;letter-spacing:.02em;color:var(--tw-text);font-variant-numeric:tabular-nums}
.tw-show-zeit span{font-family:var(--f-body);font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tw-mute)}
.tw-show-zeit small{display:block;margin-top:6px;font-family:var(--f-body);font-weight:500;font-size:.875rem;letter-spacing:0;color:var(--tw-mute)}
.tw-kultur{
  display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;white-space:nowrap;
  background:var(--tw-gelb);color:var(--tw-text);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
}
.tw-kultur b{font-family:var(--f-display);font-weight:900;font-size:1.125rem;letter-spacing:.02em;color:var(--tw-pink-text)}
.tw-show-lage{display:flex;align-items:center;gap:9px;margin:0;font-size:1rem;font-weight:700}
.tw-show-lage::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:currentColor}
.tw-lage--gut{color:var(--tw-gut)}
.tw-lage--gefragt{color:var(--tw-gefragt)}
.tw-lage--wenig{color:var(--tw-wenig)}
.tw-lage--aus{color:#77746c}
.tw-show.ist-aus .tw-show-zeit{color:#9a978f;text-decoration:line-through}
.tw-show-tipp{margin:0;font-size:.9375rem;color:var(--tw-mute)}
.tw-show-tipp a{color:var(--tw-pink-text);font-weight:700;white-space:nowrap}
/* Kaufknopf: Pink mit weisser Schrift, beim Darueberfahren gelb */
.tw-kaufen{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:58px;margin-top:2px;padding:12px 22px;
  border:0;background:var(--tw-pink);color:#fff;cursor:pointer;white-space:nowrap;
  font-family:var(--f-display)!important;font-size:1.5rem;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  transition:background .2s,color .2s;
}
.tw-kaufen:hover{background:var(--tw-gelb);color:var(--tw-text)}
.tw-kaufen i{font-style:normal;font-size:1.25rem;line-height:1;transition:transform .2s}
.tw-kaufen:hover i{transform:translateX(4px)}
.tw-kaufen:focus-visible{outline:3px solid var(--tw-gelb);outline-offset:3px}
.tw-kaufen.laedt{opacity:.75;cursor:progress}

/* Leere Seite rechts: kurze Anleitung */
.tw-leerseite{position:relative;padding:28px 26px 26px;border-radius:4px;background:#fff;color:var(--tw-text);box-shadow:0 18px 40px rgba(0,0,0,.08),0 0 0 1px rgba(224,51,115,.15)}
.tw-leerseite::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px 4px 0 0;background:linear-gradient(90deg,var(--tw-pink),var(--tw-gelb))}
.tw-leer-marke{
  display:inline-block;margin:0 0 10px;padding:4px 16px;background:var(--tw-pink);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:.9375rem;letter-spacing:.22em;text-transform:uppercase;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.tw-leerseite h3{margin:0 0 20px;font-family:var(--f-display);font-weight:900;font-size:2.75rem;line-height:.9;letter-spacing:.03em;text-transform:uppercase;color:var(--tw-text)}
.tw-leerseite ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tw-leerseite li{display:flex;align-items:center;gap:14px;font-size:1.0625rem;font-weight:600;color:var(--tw-text)}
.tw-leerseite li b{
  flex:none;display:grid;place-items:center;width:42px;height:38px;background:var(--tw-gelb);color:var(--tw-text);
  font-family:var(--f-display);font-weight:900;font-size:1.5rem;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
}
.tw-schnell{
  display:grid;gap:4px;width:100%;margin-top:24px;padding:14px 18px;text-align:left;cursor:pointer;
  border:2px solid var(--tw-pink);border-radius:3px;background:var(--tw-pink-hell);color:var(--tw-pink-text);
  font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;transition:background .2s;
}
.tw-schnell b{font-size:1.125rem;font-weight:800;letter-spacing:0;text-transform:none;color:var(--tw-text)}
.tw-schnell b i{font-style:normal;color:var(--tw-pink)}
.tw-schnell:hover{background:#fbdbe6}

/* ---------- Liste ---------- */
.tw-listmonat{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:30px 0 12px;
  font-family:var(--f-display);font-weight:900;font-size:clamp(2.5rem,4vw,3.25rem);line-height:.9;letter-spacing:.03em;text-transform:uppercase;color:var(--tw-text);
}
.tw-listmonat > span:not(.tw-kultur){color:var(--tw-pink)}
.tw-listmonat .tw-kultur{font-family:var(--f-body)}
.tw-listgruppe{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.tw-listgruppe .tw-show{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05),0 0 0 1px rgba(224,51,115,.18)}
.tw-listgruppe .tw-show + .tw-show{margin-top:0}

/* ---------- Service-Zeile ---------- */
.tw-service{margin:clamp(22px,3vw,30px) 0 0;text-align:center;font-size:1rem;color:var(--tw-mute)}
.tw-service a{color:var(--tw-text);font-weight:700;text-decoration:underline;text-decoration-color:var(--tw-pink);text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
.tw-service a:hover{color:var(--tw-pink-text)}
.tw-leer{text-align:center;color:var(--tw-mute)}
.tw-leer a{color:var(--tw-text);font-weight:700}

@keyframes tw-auf{from{transform:translateY(-8px);opacity:.4}to{transform:none;opacity:1}}

/* ---------- Handy ---------- */
@media (max-width:699px){
  .tw-kal{margin-inline:-6px;padding:12px 8px 14px}
  .tw-monate{gap:2px;padding:4px}
  .tw-monat-knopf{min-height:52px;padding:6px 2px}
  .tw-monat-knopf b{font-size:1.3125rem;letter-spacing:.03em}
  .tw-monat-knopf small{font-size:.625rem;letter-spacing:.06em}
  .tw-monat-knopf.hat-kultur::after{top:6px;right:9px;width:6px;height:6px}
  .tw-kulturband{font-size:.875rem;padding:8px 14px}
  .tw-kulturband b{font-size:1.0625rem}
  .tw-wt-lang{display:none}
  .tw-wt-kurz{display:inline}
  .tw-wt{font-size:.8125rem;letter-spacing:.12em}
  .tw-raster{gap:6px}
  .tw-feld{min-height:92px;padding:8px 8px 9px;gap:3px}
  .tw-feld-nr{font-size:1.875rem}
  .tw-feld-zeiten{font-size:.9375rem}
  .tw-feld-preis{font-size:.6875rem;padding:2px 6px}
  .tw-feld-info{font-size:.625rem;letter-spacing:.04em}
  .tw-detail{padding:16px 12px 14px}
  .tw-detail-kopf h3{font-size:1.75rem}
  .tw-show{padding:14px}
  .tw-show-zeit{font-size:2.625rem}
  .tw-kaufen{padding:12px 14px;font-size:1.375rem;letter-spacing:.1em;gap:8px}
  .tw-service .tw-trenner{display:none}
  .tw-service a{display:inline-block;margin-top:4px}
  .tw-service a + .tw-trenner + a{display:block;width:max-content;margin:8px auto 0}
}
@media (max-width:360px){
  .tw-feld{padding:7px 5px}
  .tw-feld-zeiten{font-size:.8125rem}
  .tw-feld-preis{font-size:.625rem;padding:2px 4px}
  .tw-monat-knopf b{font-size:1.125rem}
}
@media (prefers-reduced-motion:reduce){
  .tw-detail.ist-neu{animation:none}
  .tw-feld--spiel,.tw-kaufen{transition:none}
  .tw-feld--spiel:hover{transform:none}
}

/* ======================================================================
   KASSE IN DER SEITE
   Der Terminbereich wird zur Kasse: weisse Leiste mit dem gewaehlten
   Termin, darunter der vivenu-Kauf. Kein Fenster darueber.
   ====================================================================== */
.tw.ist-kasse > .tw-buehne,
.tw.ist-kasse > .tw-liste,
.tw.ist-kasse > .tw-service{display:none!important}

.tk{--tk-oben:calc(var(--tw-oben,120px) + 10px)}
.tk.tk-rein{animation:tk-rein .42s cubic-bezier(.2,.75,.3,1)}
@keyframes tk-rein{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tk-kurz{display:none}

/* ---------- Leiste: gewaehlter Termin ---------- */
.tk-leiste{
  position:sticky;top:var(--tk-oben);z-index:20;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(10px,1.6vw,20px);
  padding:10px clamp(10px,1.4vw,14px);border-radius:4px;background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 10px 28px rgba(0,0,0,.1),0 0 0 1px rgba(224,51,115,.15);
}
.tk-leiste::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--tw-pink),var(--tw-gelb))}
.tk-zurueck{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:8px 20px 8px 16px;cursor:pointer;
  border:2px solid var(--tw-pink);border-radius:3px;background:#fff;
  color:var(--tw-text);font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  transition:background .2s,transform .16s;
}
.tk-zurueck:hover{background:var(--tw-pink-hell);transform:translateX(-2px)}
.tk-pfeil{font-size:1.125rem;line-height:1;color:var(--tw-pink)}
.tk-termin{display:flex;align-items:center;gap:12px;min-width:0;outline:0}
.tk .tk-termin:focus,.tk .tk-termin:focus-visible{outline:none}   /* nur Sprungziel fuer Vorleseprogramme */
.tk-termin-tag{
  flex:none;display:grid;justify-items:center;align-content:center;width:52px;height:52px;
  background:var(--tw-gelb);color:var(--tw-text);font-family:var(--f-display);font-weight:900;font-size:1.75rem;line-height:.85;
  clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);
}
.tk-termin-tag small{font-family:var(--f-body);font-size:.625rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.tk-termin-text{display:grid;min-width:0;line-height:1.25}
.tk-termin-text b{font-size:clamp(1rem,1.5vw,1.1875rem);font-weight:800;color:var(--tw-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-termin-text small{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-schritte{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.tk-schritte li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tw-mute);white-space:nowrap}
.tk-schritte li b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.75rem;background:var(--tw-grau);color:var(--tw-text)}
.tk-schritte li.ist-ok b{background:var(--tw-pink);color:#fff}
.tk-schritte li.ist-jetzt{background:var(--tw-gelb);color:var(--tw-text);clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%)}
.tk-schritte li.ist-jetzt b{background:#fff;color:var(--tw-text)}
.tk-schritte li.ist-jetzt.ist-ok b{background:var(--tw-gut);color:#fff}
.tk-schritte li + li::before{content:"";width:18px;height:2px;margin:0 2px 0 -6px;background:var(--tw-pink)}
.tk-schritte li.ist-jetzt::before{display:none}

/* ---------- Nachfrage vor dem Zurueck ---------- */
.tk-frage{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:12px;
  padding:14px 18px;border-radius:4px;background:#fff;color:var(--tw-text);
  box-shadow:0 14px 34px rgba(0,0,0,.12),inset 4px 0 0 var(--tw-pink);animation:tk-rein .25s ease;
}
.tk-frage p{margin:0;font-size:1rem;line-height:1.45;max-width:56ch}
.tk-frage-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.tk-frage button{min-height:46px;padding:8px 18px;border-radius:3px;font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.tk-frage-ja{border:2px solid var(--tw-pink);background:#fff;color:var(--tw-text)}
.tk-frage-ja:hover{background:var(--tw-pink-hell)}
.tk-frage-nein{border:0;background:var(--tw-pink);color:#fff}
.tk-frage-nein:hover{background:var(--tw-gelb);color:var(--tw-text)}

/* ---------- Die Buehne: vivenu-Kauf auf Weiss ---------- */
.tk-buehne{
  position:relative;margin-top:14px;min-height:560px;border-radius:4px;overflow:hidden;background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.06),0 0 0 1px rgba(224,51,115,.12);
}
.tk-rahmen{display:block;width:100%;height:680px;border:0;background:#fff;opacity:0;transition:opacity .45s ease,height .3s ease}
.tk.ist-bereit .tk-rahmen{opacity:1}
.tk.ist-bereit .tk-buehne{min-height:0}

/* Ladezeit: ein Saal aus Punkten, der sich fuellt */
.tk-laden{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:22px;padding:24px;text-align:center;background:#fff}
.tk-saal{display:grid;justify-items:center;gap:7px}
.tk-saal-buehne{
  display:block;width:min(220px,60vw);margin-bottom:12px;padding:6px 0;background:var(--tw-pink);color:#fff;
  font-family:var(--f-display);font-weight:900;font-size:1.25rem;letter-spacing:.22em;text-transform:uppercase;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.tk-reihe{display:flex;gap:6px}
.tk-reihe i{width:11px;height:11px;border-radius:50%;background:#ebe9e3;animation:tk-platz 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * 45ms + var(--r) * 110ms)}
@keyframes tk-platz{0%,100%{background:#ebe9e3;transform:scale(.85)}45%{background:var(--tw-gelb);transform:scale(1)}60%{background:var(--tw-pink);transform:scale(1.05)}}
.tk-laden p{display:grid;gap:6px;margin:0;font-family:var(--f-display);font-weight:900;font-size:2.25rem;letter-spacing:.04em;line-height:.9;text-transform:uppercase;color:var(--tw-text)}
.tk-laden small{font-family:var(--f-body);font-weight:500;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--tw-mute)}

/* ---------- Fuss: Vertrauen und Hilfe ---------- */
.tk-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:16px;padding-inline:4px;font-size:.9375rem;color:var(--tw-mute)}
.tk-fuss p{margin:0}
.tk-sicher{display:flex;align-items:center;gap:10px}
.tk-sicher svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--tw-pink);stroke-width:1.8}
.tk-sicher b{color:var(--tw-text)}
.tk-hilfe a{color:var(--tw-text);font-weight:700;text-decoration:underline;text-decoration-color:var(--tw-pink);text-underline-offset:3px}
.tk.ist-langsam .tk-extern{padding:3px 10px;background:var(--tw-pink);color:#fff;text-decoration:none}

/* Nach dem Kauf: Zurueck-Knopf gelb */
.tk.ist-fertig .tk-zurueck{border-color:var(--tw-gelb);background:var(--tw-gelb);color:var(--tw-text)}
.tk.ist-fertig .tk-pfeil{color:var(--tw-text)}

/* Sanfter Uebergang zwischen Kalender und Kasse (wo der Browser es kann) */
::view-transition-group(tk-termin){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.75,.3,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}

@media (max-width:860px){
  .tk-schritte{display:none}
  .tk-leiste{grid-template-columns:auto minmax(0,1fr)}
}
@media (max-width:620px){
  .tk-lang{display:none}
  .tk-kurz{display:inline}
  .tk-leiste{margin-inline:-6px;padding:8px 10px;gap:10px}
  .tk-zurueck{min-height:44px;padding:6px 14px 6px 10px;font-size:.75rem}
  .tk-termin-tag{width:44px;height:44px;font-size:1.5rem}
  .tk-termin-text b{font-size:.9375rem}
  .tk-termin-text small{font-size:.6875rem}
  .tk-buehne{margin-inline:-6px;min-height:520px}
  .tk-fuss{flex-direction:column;align-items:flex-start;font-size:.875rem}
}
@media (max-width:440px){
  .tk-zurueck .tk-kurz{display:none}
  .tk-zurueck{width:44px;padding:0;justify-content:center}
}

/* ---------- Handy und Tablet: Kasse als Vollbild ----------
   Leiste oben, vivenu fuellt genau den Rest des Bildschirms und scrollt
   selbst. So liegen Saalplan und Preisauswahl immer im sichtbaren Bereich. */
html.tk-vollbild-offen,html.tk-vollbild-offen body{overflow:hidden!important;overscroll-behavior:none}
.tk.tk--vollbild{
  position:fixed;inset:0;z-index:2600;display:flex;flex-direction:column;
  height:100vh;height:100dvh;padding-top:env(safe-area-inset-top,0px);
  background:#fff;color:var(--tw-text);font-family:var(--f-body);font-size:1rem;line-height:1.5;
}
.tk--vollbild .tk-leiste{
  position:relative;top:auto;flex:none;margin:0;border-radius:0;padding:8px 10px 11px;gap:10px;
  grid-template-columns:auto minmax(0,1fr);background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.tk--vollbild .tk-leiste::after{border-radius:0}
.tk--vollbild .tk-schritte{display:none}
.tk--vollbild .tk-frage{flex:none;margin:8px;border-radius:4px}
.tk--vollbild .tk-buehne{flex:1 1 auto;min-height:0;margin:0;border-radius:0;box-shadow:none}
.tk--vollbild.ist-bereit .tk-buehne{min-height:0}
.tk--vollbild .tk-rahmen{height:100%!important}
.tk--vollbild .tk-fuss{display:none}
@media (prefers-reduced-motion:reduce){
  .tk.tk-rein,.tk-frage{animation:none}
  .tk-reihe i{animation:none}
  .tk-rahmen{transition:none}
}

/* ---------- Preiskategorien ---------- */
.tw-preise:empty{display:none}
.tw-preise{animation:tw-preis-rein .25s ease}
@keyframes tw-preis-rein{from{opacity:0}to{opacity:1}}
.tw-preisliste{padding:12px 14px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--tw-linie);color:var(--tw-text);font-size:1rem;line-height:1.3}
.tw-preis-kopf{margin:0 0 8px;font-size:.9375rem;font-weight:800}
.tw-preis-gleich{margin:0;display:flex;justify-content:space-between;gap:12px;font-weight:700}
.tw-preis-gleich b{font-weight:800}
.tw-preisliste ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:7px 20px;margin:0;padding:0;list-style:none}
.tw-preisliste li{display:flex;align-items:center;gap:9px;min-width:0;font-weight:600}
.tw-preisliste li b{margin-left:auto;font-weight:800;white-space:nowrap}
.tw-preisliste i,.tk-preis i{flex:none;display:inline-block;width:15px;height:15px;border-radius:50%;background:var(--f,#999);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.tw-preis-fein{margin:9px 0 0;color:var(--tw-mute);font-size:.875rem;line-height:1.35}
.tw-preise-auf summary{cursor:pointer;font-weight:700;color:var(--tw-text);padding:4px 0;min-height:32px}
.tw-preise-auf .tw-preise{margin-top:6px}
/* Leiste direkt ueber dem Saalplan (grosse Bildschirme) */
.tk-preise{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:14px;padding:12px 18px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--tw-linie);color:var(--tw-text);font-size:1rem}
.tk-preise[hidden]{display:none}
.tk-preise-kopf{font-weight:800}
.tk-preis{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.tk-preis b{font-weight:800}
/* Vorgeladene Kasse: unsichtbar neben dem Bildschirm, bis jemand kauft */
.tk[hidden].tk-vorrat{display:block!important;position:fixed;left:-300vw;top:0;width:var(--tk-vorrat-breite,1100px);height:900px;overflow:hidden;visibility:hidden;pointer-events:none}

/* Rabatt-Hinweis (ADAC-Seite) */
.tw-preis-rabatt{margin:9px 0 0;padding:8px 11px;border-radius:4px;background:var(--tw-gelb-hell);color:var(--tw-text);font-size:.9375rem;font-weight:700;line-height:1.3}
.tk-preis-rabatt{flex-basis:100%;font-weight:700;color:var(--tw-text)}