/* ======================================================================
   TERMINWAHL  (nur /tickets/)
   Ruhig und gross: Promis (Alle oben, darunter 3 + 2), Kalender nur mit
   den Spieltagen, helle Kachel = Vorstellung. Sitzt im dunklen Seitenlook,
   nur die Uhrzeit-Karten sind hell, damit Text gut lesbar bleibt.
   ====================================================================== */

.tw{
  --tw-text:#2A0A2C;
  --tw-mute:#6B4A6E;
  --tw-linie:#E6D9E7;
  --tw-gut:#1F7A3A;
  --tw-gefragt:#A14A06;
  --tw-wenig:#B3261E;
  --tw-glas:rgba(24,0,28,.52);
  --tw-goldlinie:rgba(206,162,76,.38);
  max-width:1120px;
  margin:0 auto;
  color:#fff;
  font-size:1.0625rem;
  line-height:1.5;
}
.tw *{box-sizing:border-box}
.tw button{font-family:var(--f-body);-webkit-tap-highlight-color:transparent}
.tw :focus-visible{outline:3px solid var(--classic-gold);outline-offset:3px}
.tw [hidden]{display:none!important}

/* ---------- Promis: "Alle Termine" oben mittig, darunter 3 + 2 ---------- */
.tw-promis{display:grid;justify-items:center;text-align:center;margin-bottom:clamp(26px,3.4vw,40px)}
.tw-label{margin:0 0 16px;font-size:clamp(1.0625rem,1.6vw,1.25rem);font-weight:700;color:#fff}
.tw-promi-wahl{display:grid;justify-items:center;gap:clamp(14px,2vw,22px);width:100%}

.tw-alle{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:10px 30px 10px 14px;
  border-radius:var(--pill);border:2px solid rgba(206,162,76,.6);background:rgba(255,255,255,.06);
  color:#fff;font-size:1.0625rem;font-weight:800;cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.tw-alle img{width:30px;height:auto}
.tw-alle:hover{background:rgba(255,255,255,.12)}
.tw-alle[aria-pressed="true"]{background:var(--paper-white);border-color:var(--paper-white);color:var(--velvet-night);box-shadow:0 10px 26px rgba(8,0,10,.4)}
/* Zurueck zu allen: breit, golden, nicht zu uebersehen */
.tw-alle--zurueck{
  width:min(100%,420px);min-height:60px;padding:10px 24px;gap:14px;border:0;
  background:linear-gradient(180deg,#FFF6DF 0%,#F3E3BC 30%,#DFC384 70%,var(--classic-gold) 100%);
  color:var(--velvet-night);font-size:1.125rem;
  box-shadow:0 12px 28px rgba(8,0,10,.45),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(126,90,28,.5);
}
.tw-alle--zurueck:hover{background:linear-gradient(180deg,#FFF9EA 0%,#F6EACB 30%,#E6CD92 70%,#D6AC58 100%);transform:translateY(-1px)}
.tw-alle-x{
  display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--velvet-night);color:#fff;font-size:.9375rem;font-weight:900;
}

/* Leiste ueber Kalender und Liste, solange ein Promi gewaehlt ist */
.tw-filterleiste{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:16px;padding:10px 10px 10px 12px;
  border-radius:20px;background:rgba(206,162,76,.16);box-shadow:inset 0 0 0 1.5px rgba(206,162,76,.6);
}
.tw-filterleiste > img,.tw-filterleiste > .tw-initial{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 18%;
  box-shadow:0 0 0 2px var(--classic-gold);background:#4A1250;font-weight:800;
}
.tw-filterleiste > span{flex:1 1 160px;min-width:0;font-size:1rem;line-height:1.35;color:var(--stage-haze)}
.tw-filterleiste > span b{color:#fff}
.tw-filter-weg{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:8px 20px;border:0;border-radius:var(--pill);
  background:var(--paper-white);color:var(--velvet-night);font-size:1rem;font-weight:800;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 16px rgba(8,0,10,.35);
}
.tw-filter-weg:hover{background:#fff}
.tw-liste .tw-filterleiste{margin:10px 0 0}

.tw-promi-raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));row-gap:clamp(10px,1.6vw,18px);width:min(100%,540px)}
.tw-promi{
  grid-column:span 2;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:4px 4px 6px;border:0;border-radius:18px;background:none;color:#fff;cursor:pointer;
}
.tw-promi-bild{
  --g:clamp(72px,8vw,92px);position:relative;display:block;flex:none;width:var(--g);height:var(--g);border-radius:50%;padding:3px;
  background:rgba(255,255,255,.18);transition:background .2s,transform .2s,opacity .2s;
}
.tw-promi-bild img,.tw-promi-bild .tw-initial{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%;background:#4A1250;font-weight:800}
.tw-promi:hover .tw-promi-bild{background:rgba(206,162,76,.7);transform:translateY(-2px)}
.tw-promi-name{font-size:.9375rem;font-weight:500;line-height:1.2;color:var(--stage-haze)}
.tw-promi-name b{display:block;font-weight:800;color:#fff}
.tw-promi-zahl{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;min-height:38px;padding:6px 14px 6px 16px;
  border-radius:var(--pill);background:var(--paper-white);color:var(--velvet-night);font-size:.875rem;font-weight:800;white-space:nowrap;
  box-shadow:0 8px 18px rgba(8,0,10,.38),inset 0 0 0 1.5px rgba(206,162,76,.7);transition:background .2s,transform .2s,box-shadow .2s;
}
.tw-promi-zahl i{font-style:normal;font-weight:900;line-height:1}
.tw-promi-pfeil{font-size:1.25rem;margin-top:-2px;color:var(--magenta-pulse)}
.tw-promi:hover .tw-promi-zahl{background:#fff;transform:translateY(-1px);box-shadow:0 10px 22px rgba(8,0,10,.45),inset 0 0 0 2px var(--classic-gold)}
.tw-promi:focus-visible{outline:3px solid var(--confetti-glow);outline-offset:4px}
.tw-promi[aria-pressed="true"] .tw-promi-zahl{background:linear-gradient(180deg,#FFF6DF 0%,#F3E3BC 30%,#DFC384 70%,var(--classic-gold) 100%);box-shadow:0 8px 18px rgba(8,0,10,.38)}
.tw-promis.hat-wahl .tw-promi[aria-pressed="false"] .tw-promi-zahl{opacity:.75}
.tw-promi-tipp{margin:-6px 0 2px;max-width:46ch;font-size:.9375rem;line-height:1.45;color:var(--stage-haze)}
.tw-promi[aria-pressed="true"] .tw-promi-bild{background:linear-gradient(180deg,#F9EFD2,var(--classic-gold) 60%,#BE8F3F);transform:scale(1.06)}
.tw-promi[aria-pressed="true"] .tw-promi-bild::after{
  content:"\2713";position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--classic-gold);color:var(--velvet-night);font-size:.9375rem;font-weight:900;box-shadow:0 0 0 3px var(--velvet-night);
}
.tw-promis.hat-wahl .tw-promi[aria-pressed="false"] .tw-promi-bild{opacity:.45}
.tw-auswahl-info{margin:0;padding:12px 20px;border-radius:14px;background:rgba(206,162,76,.16);box-shadow:inset 0 0 0 1px var(--tw-goldlinie);font-size:1rem;color:var(--stage-haze)}
.tw-auswahl-info b{color:#fff}
.tw-gewaehr{margin:12px 0 0;font-size:.8125rem;color:var(--velvet-glow)}

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

.tw-kal{padding:clamp(14px,2vw,26px);border-radius:26px;background:var(--tw-glas);box-shadow:inset 0 0 0 1px var(--tw-goldlinie)}

.tw-monate{display:flex;gap:4px;padding:5px;border-radius:var(--pill);background:rgba(255,255,255,.08)}
.tw-monat-knopf{
  flex:1 1 0;display:grid;justify-items:center;min-width:0;min-height:54px;padding:6px 4px;border:0;border-radius:var(--pill);
  background:none;color:var(--stage-haze);cursor:pointer;line-height:1.15;transition:background .2s,color .2s;
}
.tw-monat-knopf b{font-size:1.0625rem;font-weight:800}
.tw-monat-knopf small{font-size:.75rem;font-weight:600;opacity:.8}
.tw-monat-knopf:hover:not(:disabled){background:rgba(255,255,255,.1)}
.tw-monat-knopf[aria-pressed="true"]{background:var(--paper-white);color:var(--velvet-night);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.tw-monat-knopf:disabled{opacity:.3;cursor:default}
.tw-monat-titel{margin:clamp(18px,2.4vw,26px) 0 clamp(12px,1.6vw,18px);text-align:center;font-family:var(--f-display);font-weight:400;font-size:clamp(2.125rem,3.6vw,2.75rem);line-height:1;letter-spacing:.03em;color:#fff;text-shadow:var(--schatten-text)}

.tw-raster{display:grid;grid-template-columns:repeat(var(--spalten,4),minmax(0,1fr));gap:clamp(7px,1vw,12px)}
.tw-wt{padding:0 0 2px;text-align:center;font-size:.875rem;font-weight:800;letter-spacing:.06em;color:var(--gold-schrift)}
.tw-wt-kurz{display:none}

.tw-feld{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;min-height:112px;
  padding:12px 14px;border:0;border-radius:16px;text-align:left;font:inherit;color:inherit;
}
.tw-feld--leer{background:none}
.tw-feld--ohne{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.tw-feld--ohne .tw-feld-nr{color:rgba(248,233,248,.3)}
.tw-feld--spiel{
  background:var(--paper-white);color:var(--velvet-night);cursor:pointer;
  box-shadow:0 8px 18px rgba(8,0,10,.35);transition:transform .16s,box-shadow .18s;
}
.tw-feld--spiel:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(8,0,10,.45),0 0 0 2px rgba(206,162,76,.8)}
.tw-feld--spiel[aria-pressed="true"]{transform:translateY(-2px);box-shadow:0 0 0 4px var(--classic-gold),0 14px 30px rgba(8,0,10,.55)}
.tw-feld--spiel.ist-aus{background:rgba(255,255,255,.14);color:rgba(255,255,255,.75);box-shadow:none}
.tw-feld-nr{font-size:1.625rem;font-weight:800;line-height:1}
.tw-feld-zeiten{display:grid;gap:1px;font-size:1rem;font-weight:700;color:#4A1250;font-variant-numeric:tabular-nums}
.tw-feld-zeiten .aus{text-decoration:line-through;opacity:.45}
.ist-aus .tw-feld-zeiten{color:inherit}
.tw-feld-promi{position:absolute;top:9px;right:9px;width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:50% 18%;box-shadow:0 0 0 2px var(--classic-gold);background:#4A1250}
.tw-feld-promi.tw-initial{display:grid;place-items:center;font-size:.6875rem;font-weight:800;color:#fff}
.tw-feld-preis{margin-top:auto;font-size:.8125rem;font-weight:600;color:var(--tw-mute);white-space:nowrap}
.tw-feld-info{margin-top:auto;font-size:.8125rem;font-weight:800;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-radius:var(--pill);border:1.5px solid rgba(206,162,76,.55);background:rgba(255,255,255,.04);
  color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:background .2s;
}
.tw-wechsel:hover{background:rgba(255,255,255,.1)}
.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 ---------- */
.tw-seite{position:sticky;top:calc(var(--tw-oben,76px) + 18px)}
.tw-detail{
  padding:clamp(16px,2vw,22px);border-radius:22px;background:var(--paper-white);color:var(--tw-text);
  box-shadow:0 22px 50px rgba(8,0,10,.5),inset 0 0 0 1px rgba(206,162,76,.55);
}
.tw-detail.ist-neu{animation:tw-auf .28s cubic-bezier(.2,.75,.3,1)}
.tw-detail--inline{grid-column:1 / -1;position:relative;margin:4px 0 6px}
.tw-detail--inline::before{
  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(--paper-white);
}
.tw-detail-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tw-detail-kopf h3{margin:0;font-size:1.3125rem;font-weight:800;line-height:1.2;color:var(--velvet-night)}
.tw-detail-zu{
  flex:none;width:46px;height:46px;border-radius:50%;border:2px solid var(--tw-linie);background:#fff;
  color:var(--velvet-night);font-size:1.125rem;cursor:pointer;
}
.tw-detail-zu:hover{border-color:var(--velvet-glow)}
.tw-detail-unter{margin:2px 0 14px;font-size:1rem;color:var(--tw-mute)}
.tw-fein{margin:14px 0 0;font-size:.875rem;line-height:1.45;color:var(--tw-mute)}

.tw-show{
  display:grid;gap:10px;padding:16px;border-radius:18px;background:#fff;color:var(--tw-text);
  border:1px solid var(--tw-linie);box-shadow:0 4px 14px rgba(51,0,51,.08);
}
.tw-show + .tw-show{margin-top:12px}
.tw-show-datum{margin:0;font-size:1rem;font-weight:800;color:var(--spotlight-violet)}
.tw-show-oben{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tw-show-zeit{margin:0;font-size:1.875rem;font-weight:800;line-height:1;color:var(--velvet-night);font-variant-numeric:tabular-nums}
.tw-show-zeit span{font-size:1.0625rem;font-weight:700}
.tw-show-preis{margin:0;font-size:1.1875rem;font-weight:800;white-space:nowrap;color:var(--velvet-night)}
.tw-show-preis span{font-size:.9375rem;font-weight:600;color:var(--tw-mute)}
.tw-show-promi{display:flex;align-items:center;gap:11px;margin:0;font-size:1.0625rem}
.tw-show-promi img,.tw-show-promi .tw-initial{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 18%;box-shadow:0 0 0 2px var(--classic-gold);background:#4A1250;color:#fff;font-weight:800}
.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:11px;height:11px;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:#7D6E80}
.tw-show.ist-aus .tw-show-zeit{color:#8E7F90;text-decoration:line-through}
.tw-show-tipp{margin:0;font-size:.9375rem;color:var(--tw-mute)}
.tw-show-tipp a{color:var(--spotlight-violet);font-weight:700;white-space:nowrap}
.tw-kaufen{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;margin-top:2px;padding:12px 20px;
  border:0;border-radius:var(--pill);background:var(--signal-red);color:#fff;font-size:1.125rem;font-weight:800;cursor:pointer;
  box-shadow:0 10px 24px rgba(230,14,8,.32);transition:background .18s,transform .16s,box-shadow .18s;
}
.tw-kaufen:hover{background:#C60B06;transform:translateY(-2px);box-shadow:0 14px 30px rgba(230,14,8,.42)}
.tw-kaufen i{font-style:normal;font-size:1.25rem;line-height:1}

/* Leere Seite rechts: kurze Anleitung */
.tw-leerseite{padding:28px 26px;border-radius:26px;background:var(--tw-glas);box-shadow:inset 0 0 0 1px var(--tw-goldlinie);text-align:center}
.tw-leerseite > img{display:block;width:50px;height:auto;margin:0 auto 10px;filter:drop-shadow(0 4px 12px rgba(230,14,8,.4))}
.tw-leerseite h3{margin:0 0 18px;font-family:var(--f-display);font-weight:400;font-size:2.125rem;line-height:1;letter-spacing:.03em;color:#fff}
.tw-leerseite ol{list-style:none;margin:0;padding:0;display:grid;gap:14px;text-align:left}
.tw-leerseite li{display:flex;align-items:center;gap:14px;font-size:1.0625rem;font-weight:600;color:var(--stage-haze)}
.tw-leerseite li b{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--paper-white);color:var(--velvet-night);font-weight:800}
.tw-schnell{
  display:grid;gap:2px;width:100%;margin-top:24px;padding:14px 18px;border-radius:18px;cursor:pointer;
  border:1.5px solid rgba(206,162,76,.6);background:rgba(255,255,255,.06);color:var(--stage-haze);font-size:.9375rem;font-weight:600;
}
.tw-schnell b{font-size:1.125rem;font-weight:800;color:#fff}
.tw-schnell:hover{background:rgba(255,255,255,.12)}

/* ---------- Liste ---------- */
.tw-listmonat{margin:28px 0 12px;font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,3vw,2.5rem);line-height:1;letter-spacing:.03em;color:#fff;text-shadow:var(--schatten-text)}
.tw-listgruppe{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.tw-listgruppe .tw-show + .tw-show{margin-top:0}

/* ---------- Service-Zeile ---------- */
.tw-service{margin:clamp(22px,3vw,32px) 0 0;text-align:center;font-size:1rem;color:var(--stage-haze)}
.tw-service a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--classic-gold);text-underline-offset:4px;white-space:nowrap}
.tw-leer{text-align:center;color:var(--stage-haze)}
.tw-leer a{color:#fff;font-weight:700}

@keyframes tw-auf{from{transform:translateY(-8px)}to{transform:none}}

/* ---------- Handy ---------- */
@media (max-width:699px){
  .tw-label{font-size:1.0625rem;margin-bottom:14px}
  .tw-promi-bild{--g:76px}
  .tw-promi-name{font-size:.875rem}
  .tw-promi-zahl{min-height:36px;padding:5px 9px 5px 11px;gap:4px;font-size:.78125rem}
  .tw-promi-raster{column-gap:8px}
  .tw-promi-tipp{font-size:.875rem}
  .tw-promi-tipp br{display:none}
  .tw-auswahl-info{font-size:.9375rem;padding:10px 14px}
  .tw-alle--zurueck{font-size:1rem;padding:10px 14px;gap:10px;white-space:nowrap}
  .tw-filter-weg{width:100%}

  .tw-kal{margin-inline:calc(var(--rand) * -1 + 8px);padding:12px 10px 14px;border-radius:22px}
  .tw-monate{padding:4px}
  .tw-monat-knopf{min-height:52px}
  .tw-monat-knopf b{font-size:1rem}
  .tw-wt-lang{display:none}
  .tw-wt-kurz{display:inline}
  .tw-wt{font-size:.9375rem}
  .tw-raster{gap:7px}
  .tw-feld{min-height:86px;padding:9px 9px;gap:4px;border-radius:13px}
  .tw-feld-nr{font-size:1.375rem}
  .tw-feld-zeiten{font-size:.9375rem}
  .tw-feld-promi{top:6px;right:6px;width:22px;height:22px}
  .tw-feld-preis{display:none}
  .tw-feld-info{font-size:.75rem}
  .tw-detail{padding:16px 12px 14px;border-radius:20px}
  .tw-detail-kopf h3{font-size:1.25rem}
  .tw-show{padding:14px}
  .tw-kaufen{padding:12px 12px;font-size:1.0625rem;gap:8px;white-space:nowrap}
  .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:8px 6px}
  .tw-feld-zeiten{font-size:.875rem}
  .tw-promi-bild{--g:68px}
  .tw-promi-zahl{padding-inline:8px;font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .tw-detail.ist-neu{animation:none}
  .tw-feld--spiel,.tw-kaufen,.tw-promi-bild{transition:none}
  .tw-feld--spiel:hover,.tw-kaufen:hover,.tw-promi:hover .tw-promi-bild{transform:none}
}

/* Auf dieser Seite braucht es die untere Ticketleiste nicht, der Kalender ist ja schon da. */
@media (max-width:899px){body{padding-bottom:env(safe-area-inset-bottom,0px)}}

/* ======================================================================
   TICKETFENSTER (.tm)
   Modales Fenster ueber der Seite. Heute laedt es den Saalplan aus dem
   ditix-Shop, spaeter das vivenu-Modal (siehe terminwahl.js, TICKETSHOP).
   ====================================================================== */
html.tm-offen,html.tm-offen body{overflow:hidden}
.tm{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:clamp(0px,2.4vw,28px)}
.tm[hidden]{display:none}
.tm-hinter{position:absolute;inset:0;background:rgba(18,0,20,.82);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:tm-ein .2s ease}
.tm-fenster{
  position:relative;display:flex;flex-direction:column;width:min(1200px,100%);height:min(940px,100%);
  background:#fff;border-radius:22px;overflow:hidden;color:var(--velvet-night);
  box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 0 0 1px rgba(206,162,76,.5);
  animation:tm-hoch .28s cubic-bezier(.2,.75,.3,1);
}
.tm-kopf{
  position:relative;display:flex;align-items:center;gap:clamp(12px,2vw,22px);padding:12px clamp(12px,2vw,22px);
  background:var(--velvet-night);color:#fff;
}
.tm-kopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--classic-gold),#F3E3BC 55%,var(--confetti-glow))}
.tm-zu{
  flex:none;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:10px 22px 10px 16px;border:0;border-radius:var(--pill);
  background:#fff;color:var(--velvet-night);font-family:var(--f-body);font-size:1rem;font-weight:800;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.tm-zu:hover{background:var(--stage-haze)}
.tm-zu i{font-style:normal;font-size:1.375rem;line-height:1}
.tm-zu:focus-visible{outline:3px solid var(--classic-gold);outline-offset:3px}
.tm-info{display:grid;gap:2px;min-width:0;flex:1}
.tm-titel{margin:0;font-size:clamp(1.0625rem,1.8vw,1.375rem);font-weight:800;line-height:1.2}
.tm-unter{margin:0;font-size:.9375rem;color:var(--gold-schrift)}
.tm-kurz{display:none}
.tm-koerper{position:relative;flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--paper-white);overscroll-behavior:contain}
.tm-koerper iframe{display:block;width:100%;height:100%;min-height:100%;border:0;background:var(--paper-white)}
.tm-laden{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  background:var(--paper-white);font-size:1.125rem;font-weight:700;color:var(--velvet-night);
}
.tm-laden[hidden]{display:none}
.tm-laden::before{content:"";width:48px;height:48px;border-radius:50%;border:4px solid #E3D5E4;border-top-color:var(--spotlight-violet);animation:tm-dreh .9s linear infinite}
.tm-laden small{font-weight:600;font-size:.9375rem;color:#6B4A6E}
.tm-fuss{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;
  padding:10px clamp(14px,2vw,22px);border-top:1px solid #E6D9E7;font-size:.9375rem;color:#5B2A5E;background:#fff;
}
.tm-fuss a{color:var(--spotlight-violet);font-weight:700;white-space:nowrap}
@keyframes tm-ein{from{opacity:0}to{opacity:1}}
@keyframes tm-hoch{from{transform:translateY(18px) scale(.985)}to{transform:none}}
@keyframes tm-dreh{to{transform:rotate(360deg)}}
@media (max-width:699px){
  .tm{padding:0}
  .tm-fenster{border-radius:0;height:100%;height:100dvh}
  .tm-kopf{padding:10px 12px;gap:12px}
  .tm-zu{min-height:48px;padding:8px 16px 8px 12px}
  .tm-lang{display:none}
  .tm-kurz{display:inline}
  .tm-titel{font-size:1.0625rem}
  .tm-unter{font-size:.8125rem}
  .tm-fuss{font-size:.875rem;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .tm-hinter,.tm-fenster{animation:none}
}

/* V16a: Kaufknopf, solange das vivenu-Fenster laedt */
.tw-kaufen.laedt{opacity:.75;cursor:progress}

/* ======================================================================
   V16b: KASSE IN DER SEITE
   Der Terminbereich wird zur Kasse: Leiste im Haus-Look, darunter der
   vivenu-Kauf auf Papierweiss im goldenen Rahmen. Kein Fenster darueber.
   ====================================================================== */
.tw.ist-kasse > .tw-promis,
.tw.ist-kasse > .tw-buehne,
.tw.ist-kasse > .tw-liste,
.tw.ist-kasse > .tw-service{display:none!important}
.tk-offen .ticketbar{display:none!important}

.tk{--tk-oben:calc(var(--tw-oben,76px) + 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:22px;
  background:rgba(30,0,34,.78);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 16px 40px rgba(8,0,10,.45),inset 0 0 0 1px var(--tw-goldlinie);
}
.tk-zurueck{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:8px 18px 8px 14px;cursor:pointer;
  border-radius:var(--pill);border:1.5px solid rgba(206,162,76,.6);background:rgba(255,255,255,.06);
  color:#fff;font-size:.9375rem;font-weight:700;white-space:nowrap;transition:background .2s,border-color .2s,transform .16s;
}
.tk-zurueck:hover{background:rgba(255,255,255,.12);border-color:var(--classic-gold);transform:translateX(-2px)}
.tk-pfeil{font-size:1.125rem;line-height:1;color:var(--gold-schrift)}
.tk-termin{display:flex;align-items:center;gap:12px;min-width:0;outline:0}
.tk-termin-bild{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 18%;box-shadow:0 0 0 2px var(--classic-gold),0 6px 16px rgba(8,0,10,.5);background:#4A1250}
.tk-termin-herz{object-fit:contain;padding:7px;background:var(--paper-white)}
.tk-termin .tw-initial{display:grid;place-items:center;color:#fff;font-weight:800}
.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:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-termin-text small{font-size:.8125rem;color:var(--stage-haze);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 7px;border-radius:var(--pill);font-size:.8125rem;font-weight:700;color:var(--stage-haze);white-space:nowrap}
.tk-schritte li b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.75rem;background:rgba(255,255,255,.12);color:#fff}
.tk-schritte li.ist-ok b{background:var(--classic-gold);color:var(--velvet-night)}
.tk-schritte li.ist-jetzt{background:var(--paper-white);color:var(--velvet-night)}
.tk-schritte li.ist-jetzt b{background:var(--signal-red);color:#fff}
.tk-schritte li.ist-jetzt.ist-ok b{background:#1F7A3A}
.tk-schritte li + li::before{content:"";width:18px;height:1.5px;margin:0 2px 0 -6px;background:var(--tw-goldlinie)}

/* ---------- 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:18px;background:var(--paper-white);color:var(--tw-text);
  box-shadow:0 14px 34px rgba(8,0,10,.4),inset 4px 0 0 var(--signal-red);animation:tk-rein .25s ease;
}
.tk-frage p{margin:0;font-size:.9375rem;line-height:1.45;max-width:56ch}
.tk-frage p b{color:var(--velvet-night)}
.tk-frage-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.tk-frage button{min-height:44px;padding:8px 18px;border-radius:var(--pill);font-size:.9375rem;font-weight:700;cursor:pointer}
.tk-frage-ja{border:1.5px solid var(--tw-linie);background:#fff;color:var(--velvet-night)}
.tk-frage-nein{border:0;background:var(--signal-red);color:#fff;box-shadow:0 8px 20px rgba(230,14,8,.3)}

/* ---------- Die Buehne: vivenu-Kauf auf Papierweiss ---------- */
.tk-buehne{
  position:relative;margin-top:14px;min-height:560px;border-radius:26px;overflow:hidden;
  background:var(--paper-white);
  box-shadow:0 26px 60px rgba(8,0,10,.55),inset 0 0 0 1px rgba(206,162,76,.55);
}
.tk-buehne::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;background:linear-gradient(90deg,var(--classic-gold),#F3E3BC 50%,var(--classic-gold));pointer-events:none}
.tk-rahmen{display:block;width:100%;height:680px;border:0;background:var(--paper-white);opacity:0;transition:opacity .45s ease,height .3s ease}
.tk.ist-bereit .tk-rahmen{opacity:1}

/* 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:var(--paper-white)}
.tk-saal{display:grid;justify-items:center;gap:7px}
.tk-saal-buehne{
  display:block;width:min(220px,60vw);margin-bottom:12px;padding:7px 0;border-radius:8px;
  background:linear-gradient(180deg,#F3E3BC,var(--classic-gold));color:var(--velvet-night);
  font-family:var(--f-display);font-size:1.125rem;letter-spacing:.12em;
}
.tk-reihe{display:flex;gap:6px}
.tk-reihe i{width:11px;height:11px;border-radius:50%;background:#E6D9E7;animation:tk-platz 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * 45ms + var(--r) * 110ms)}
@keyframes tk-platz{0%,100%{background:#E6D9E7;transform:scale(.85)}45%{background:var(--velvet-glow);transform:scale(1)}60%{background:var(--signal-red);transform:scale(1.05)}}
.tk-laden p{display:grid;gap:4px;margin:0;font-family:var(--f-display);font-size:1.75rem;letter-spacing:.03em;line-height:1;color:var(--velvet-night)}
.tk-laden small{font-family:var(--f-body);font-size:.9375rem;letter-spacing:0;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:6px;font-size:.875rem;color:var(--stage-haze)}
.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(--classic-gold);stroke-width:1.8}
.tk-sicher b{color:#fff}
.tk-hilfe a{color:#fff;font-weight:700;text-underline-offset:3px}
.tk.ist-langsam .tk-extern{padding:3px 10px;border-radius:var(--pill);background:var(--signal-red);text-decoration:none}

/* Nach dem Kauf: Zurueck-Knopf golden */
.tk.ist-fertig .tk-zurueck{border:0;background:linear-gradient(180deg,#FFF6DF 0%,#F3E3BC 30%,#DFC384 70%,var(--classic-gold) 100%);color:var(--velvet-night)}
.tk.ist-fertig .tk-pfeil{color:var(--velvet-night)}

/* 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}

/* ---------- Handy ---------- */
@media (max-width:860px){
  .tk-schritte{display:none}
  .tk-leiste{grid-template-columns:auto minmax(0,1fr);border-radius:18px}
}
@media (max-width:620px){
  .tk-lang{display:none}
  .tk-kurz{display:inline}
  .tk-leiste{margin-inline:calc(var(--rand) * -1 + 8px);padding:8px 10px;gap:10px}
  .tk-zurueck{min-height:44px;padding:6px 14px 6px 10px;font-size:.875rem}
  .tk-termin-bild{width:40px;height:40px}
  .tk-termin-text b{font-size:.9375rem}
  .tk-termin-text small{font-size:.75rem}
  .tk-buehne{margin-inline:calc(var(--rand) * -1 + 8px);border-radius:18px;min-height:520px}
  .tk-fuss{flex-direction:column;align-items:flex-start;font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){
  .tk.tk-rein,.tk-frage{animation:none}
  .tk-reihe i{animation:none}
  .tk-rahmen{transition:none}
}

/* Sticky-Leiste braucht einen Abschnitt ohne eigenen Scrollbereich */
main > section.tix{overflow:clip}
.tk.ist-bereit .tk-buehne{min-height:0}
@media (max-width:440px){
  .tk-zurueck .tk-kurz{display:none}
  .tk-zurueck{width:44px;padding:0;justify-content:center}
  .tk-termin-text small{white-space:normal}
}
/* Handy: kurzer Lade-Hinweis, bevor vivenus Kassenseite oeffnet */
.tw-laedt-punkt{display:inline-block;width:16px;height:16px;margin-right:8px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:tw-dreh .8s linear infinite;vertical-align:-3px}
@keyframes tw-dreh{to{transform:rotate(360deg)}}

/* ---------- 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:12px;background:#FBF7FB;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:16px;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:9px;background:#FFF3CF;color:#5C3D00;font-size:.9375rem;font-weight:700;line-height:1.3}
.tk-preis-rabatt{flex-basis:100%;font-weight:700;color:#5C3D00}