/* =====================================================================
   Bayern Krimi Dinner – Ticketshop  ·  Designsystem „Premium / theaterhaft"
   Warmes Off-White + matte Bronze, Cormorant Garamond + System-Sans.
   Farben laufen über Tokens; Akzent = gedeckte Bronze (kein Gold/Glanz).
   ===================================================================== */
:root{
  /* ===================================================================
     Sachliche Fassung (28.08.2026): ruhiger heller Grund statt Creme,
     fast schwarze Schrift, EINE serifenlose Schrift. Bayerisches Blau
     traegt den Kopfbereich, der Bronzeton bleibt dem Metallknopf.
     Vorherige Fassung: style.css.bak-260828-1304
     =================================================================== */
  /* Flächen */
  --bg:#f2f3f5; --bg-2:#ffffff; --bg-3:#eef0f3; --card:#ffffff;
  --dark:#171717;                         /* dunkle Sektionen/Footer */
  /* Text */
  --ink:#16191d; --ink-soft:#4a5058; --ink-mute:#656d78;   /* gedaempft: 4,7:1 auf dem hellen Grund - darunter wird es unlesbar */
  --on-dark:#f5f5f4; --on-dark-mute:#c3c7cc;
  /* Akzent = bayerisches Blau. Alte Namen bleiben, damit nichts bricht. */
  --blood:#12639f; --blood-bright:#0e5288; --blood-soft:#e7eef5;
  --brass:#12639f; --brass-deep:#0e5288; --gold-soft:#eef2f7;
  --on-acc:#ffffff;
  --bay:#12639f; --bayern-tief:#0e5288; --ok:#1a7f4b; --warn:#b45309; --weg:#9b2c2c;
  /* Linien + Schatten */
  --rule:rgba(16,22,32,.13); --rule-strong:rgba(16,22,32,.22);
  --shadow:0 1px 3px rgba(16,22,32,.09),0 6px 16px -10px rgba(16,22,32,.18);
  /* Schrift: nur noch EINE Familie. --serif zeigt bewusst auf dieselbe,
     damit vereinzelte Aufrufe keine Zierschrift mehr einschleppen. */
  --serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px; font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;color:var(--ink)}
.display{font-family:var(--serif)}
.mono{font-family:ui-monospace,"Courier New",monospace}
.kicker{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- Kopf ---------- */
/* Kopfzeile in bayerischem Blau - traegt zugleich das Logo. */
/* Schmale Kopfleiste: dasselbe Metall wie der grosse Block darunter. Jede
   Flaeche faengt ihr Licht oben neu ein - die Leiste endet unten dunkel, der
   Block beginnt darunter wieder hell. Dadurch entsteht eine klare Fuge statt
   zweier fast gleicher Blautoene, die sich beissen.
   Der Abschluss nach unten sitzt nicht hier, sondern am Fuss des grossen
   Blocks - dort trifft Blau auf Weiss (siehe .hero::before in index.html). */
.top{position:relative;z-index:50;border-bottom:none;
  background:
    linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%,
      rgba(0,0,0,.10) 72%, rgba(0,0,0,.18) 100%),
    linear-gradient(rgba(14,82,136,.9), rgba(14,82,136,.9));
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:inset 0 1px 0 rgba(226,238,248,.30)}

@keyframes kantenlicht{
  0%   {background-position:120% 0;  opacity:0}
  10%  {opacity:1}
  82%  {opacity:1}
  100% {background-position:-20% 0;  opacity:0}
}

/* Wer Bewegung im System abgestellt hat, bekommt die ruhige Kante. */
@media(prefers-reduced-motion:reduce){
  .hero::after,.foot.leuchtet::after{animation:none;opacity:0}
}
.top-inner{display:flex;align-items:center;justify-content:space-between;position:relative;gap:16px;
  max-width:1080px;margin:0 auto;padding:9px 20px}
.brand{display:flex;flex-direction:row;align-items:center;gap:20px;text-align:left}
.home-link{position:static;font-family:var(--sans);font-size:13px;font-weight:500;
  color:rgba(255,255,255,.85);letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap}
.home-link:hover{color:#fff}
@media(max-width:560px){.home-link{left:14px;font-size:0}.home-link::before{content:"‹";font-size:20px}}
.build{position:static}
.brand-logo{height:104px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
@media(max-width:560px){.brand-logo{height:74px}}
.brand-mark{width:38px;height:38px;border:1.5px solid var(--brass);border-radius:50%;position:relative;flex-shrink:0;background:#fff}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;top:50%;left:50%;width:17px;height:1.6px;background:var(--ink)}
.brand-mark::before{transform:translate(-50%,-50%) rotate(45deg)}
.brand-mark::after{transform:translate(-50%,-50%) rotate(-45deg)}
.brand-mark span{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--brass);bottom:5px;right:5px}
.brand-name{font-family:var(--serif);font-weight:700;letter-spacing:.02em;font-size:18px;color:var(--ink)}
.brand-sub{font-family:var(--sans);font-size:10px;color:rgba(255,255,255,.8);letter-spacing:.2em;margin-top:2px;text-transform:uppercase}
.build{font-family:var(--sans);font-size:10.5px;color:rgba(255,255,255,.62);letter-spacing:.08em;border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:3px 8px;white-space:nowrap}

/* ---------- Hero ---------- */
.hero{background:
    linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%,
      rgba(0,0,0,.10) 72%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg,#2c5f88 0%,#123f63 55%,#0a2c47 100%);
  color:#fff;padding:30px 0 28px;text-align:left;border-bottom:0}
.hero .kicker{letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:rgba(255,255,255,.75)}
.hero h1{font-family:var(--sans);font-weight:700;font-size:clamp(24px,3.4vw,31px);line-height:1.2;letter-spacing:-.01em;margin:8px 0 6px;color:#fff}
.hero p{color:rgba(255,255,255,.85);max-width:680px;margin:0;font-size:15.5px}

/* ---------- Filterleiste ---------- */
.filters{position:static;background:rgba(242,243,245,.97);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);padding:12px 0}
.filters-inner{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chip{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em;
  padding:9px 15px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--card);
  color:var(--ink);cursor:pointer;transition:.18s;white-space:nowrap}
.chip:hover{border-color:var(--brass);color:var(--brass-deep)}
.chip.active{background:var(--blood);border-color:var(--blood);color:var(--on-acc)}
.chip .count{opacity:.7;margin-left:6px;font-family:var(--sans)}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--rule-strong);
  border-radius:999px;padding:8px 14px;background:var(--card);min-width:200px}
.search input{background:none;border:none;outline:none;color:var(--ink);font-family:inherit;font-size:16px;width:100%}
.search input::placeholder{color:var(--ink-mute)}

/* ---------- Terminliste ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;padding:28px 0 60px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,border-color .18s,box-shadow .18s;box-shadow:0 6px 18px -12px rgba(20,15,8,.28)}
.card:hover{transform:translateY(-3px);border-color:var(--rule-strong);box-shadow:var(--shadow)}
.card-img{aspect-ratio:16/10;background:var(--bg-3);position:relative;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-badge{position:absolute;top:12px;left:12px;font-family:var(--sans);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:4px;background:var(--card);color:var(--brass-deep);border:1px solid var(--rule);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.card-badge.soldout{color:var(--on-dark);background:var(--dark);border-color:var(--dark)}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-date{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--brass-deep);text-transform:uppercase}
.card-title{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--ink);line-height:1.12}
.card-meta{color:var(--ink-soft);font-size:16px;display:flex;flex-wrap:wrap;gap:4px 12px}
.card-meta .pin::before{content:"◆ ";color:var(--brass)}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--rule)}
.price{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink)}
.price small{font-family:var(--sans);font-weight:400;color:var(--ink-mute);font-size:13px}

/* ---------- Buttons (matte Bronze, 4px, System-Sans) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:4px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.04em;border:1px solid transparent;
  transition:.18s;background:none;color:inherit}
.btn-primary:disabled{background:var(--bg-3);color:var(--ink-mute);cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{border-color:var(--rule-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass-deep)}
.btn-sm{padding:10px 16px;font-size:12.5px}
.btn-block{width:100%}

/* ---------- Buchungs-Drawer ---------- */
.overlay{position:fixed;inset:0;background:rgba(23,23,23,.42);backdrop-filter:blur(3px);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;height:100dvh;width:min(560px,100%);background:var(--bg-2);
  border-left:1px solid var(--rule-strong);z-index:101;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;box-shadow:-20px 0 50px -30px rgba(20,15,8,.5)}
.drawer.open{transform:none}
.drawer-head{padding:20px 24px;border-bottom:1px solid var(--rule);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.drawer-head h3{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--ink);line-height:1.15}
.drawer-head .sub{color:var(--ink-soft);font-size:15px;margin-top:4px}
.x{background:none;border:1px solid var(--rule-strong);color:var(--ink-soft);width:34px;height:34px;border-radius:50%;
  cursor:pointer;font-size:18px;flex-shrink:0;transition:.15s}
.x:hover{border-color:var(--brass);color:var(--brass-deep)}
.steps{display:flex;gap:6px;padding:14px 24px 0}
.step{flex:1;height:4px;border-radius:2px;background:var(--bg-3)}
.step.done{background:var(--brass)}
.step.active{background:var(--blood)}
.drawer-body{padding:20px 24px;overflow-y:auto;flex:1}
.drawer-foot{padding:16px 24px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg-2)}
.total{font-family:var(--sans);font-weight:700;font-size:23px;letter-spacing:-.01em;color:var(--ink)}
.total small{font-family:var(--sans);font-weight:400;color:var(--ink-mute);font-size:13px;display:block}

/* Ticket-Auswahl */
.tier{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.tier-name{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink)}
.tier-price{color:var(--ink-soft);font-size:15px}
.tier-left{font-family:var(--sans);font-size:11px;color:var(--brass-deep);letter-spacing:.06em}
.tier.soldout{opacity:.5}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-strong);background:var(--card);
  color:var(--ink);font-size:20px;cursor:pointer;line-height:1;transition:.15s}
.stepper button:hover:not(:disabled){border-color:var(--brass);color:var(--brass-deep)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper span{min-width:22px;text-align:center;font-family:var(--sans);font-weight:700;font-size:17px}

/* Formular */
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:6px}
.field input,.field textarea{width:100%;background:var(--card);border:1px solid var(--rule-strong);border-radius:6px;
  padding:12px 14px;color:var(--ink);font-family:inherit;font-size:17px;outline:none;transition:border-color .15s}
.field input:focus,.field textarea:focus{border-color:var(--brass)}
.field textarea{resize:vertical;min-height:70px}
.cform{display:grid;grid-template-columns:1fr;gap:0 16px}
.cform .full{grid-column:1 / -1}
@media(min-width:561px){.cform{grid-template-columns:1fr 1fr}}
.more{grid-column:1 / -1;margin:0 0 14px}
.more>summary{cursor:pointer;list-style:none;display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--brass-deep);padding:9px 13px;border:1px dashed var(--rule-strong);border-radius:8px;user-select:none}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"＋ "}
.more[open]>summary::before{content:"－ "}
.more[open]>summary{border-style:solid}
.more>summary span{color:var(--ink-mute);font-weight:400;text-transform:none;letter-spacing:0}
.pay-opts{display:flex;flex-direction:column;gap:10px}
.pay{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--rule-strong);border-radius:8px;cursor:pointer;transition:.15s;background:var(--card)}
.pay:hover{border-color:var(--brass)}
.pay.sel{border-color:var(--blood);background:var(--blood-soft)}
.pay input{margin-top:4px}
.pay-t{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink)}
.pay-d{color:var(--ink-soft);font-size:15px}
.tag-soon{font-family:var(--sans);font-size:10px;letter-spacing:.06em;color:var(--brass-deep);border:1px solid var(--rule);border-radius:3px;padding:2px 6px;margin-left:6px}

/* Bestätigung */
.confirm{text-align:center;padding:20px 0}
.confirm .seal{width:76px;height:76px;border-radius:50%;border:1.5px solid var(--brass);display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;font-size:34px;color:var(--brass-deep);background:var(--gold-soft)}
.confirm h4{font-family:var(--serif);font-weight:600;font-size:28px;color:var(--ink);margin-bottom:8px}
.ref{font-family:var(--mono,ui-monospace);letter-spacing:.1em;color:var(--brass-deep);font-size:18px;margin:10px 0}
.summary{background:var(--bg-3);border:1px solid var(--rule);border-radius:10px;padding:16px;text-align:left;margin:16px 0;font-size:16px}
.summary .row{display:flex;justify-content:space-between;gap:12px;padding:4px 0}

/* Hinweise / leer */
.notice{border:1px solid var(--rule-strong);border-radius:10px;padding:16px 18px;color:var(--ink-soft);
  font-size:16px;margin:20px 0;background:var(--bg-3)}
.notice b{color:var(--brass-deep)}
.empty{text-align:center;color:var(--ink-mute);padding:60px 0;font-size:20px}

/* Footer – dunkle Sektion */
/* Fusszeile: dieselbe Machart wie die Kopfleiste, nur gespiegelt. Die
   Metallkante sitzt OBEN, wo Weiss auf Blau trifft, und ihr Schatten faellt
   nach oben. Das Licht laeuft erst los, wenn die Fusszeile ins Bild kommt
   (Klasse "leuchtet") - beim Laden waere es laengst durch. */
.foot{position:relative;border-top:none;padding:34px 0;color:var(--on-dark-mute);
  font-size:14px;text-align:center;
  background:
    linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%,
      rgba(0,0,0,.10) 72%, rgba(0,0,0,.18) 100%),
    linear-gradient(rgba(14,82,136,.9), rgba(14,82,136,.9))}
.foot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(0deg,#2c5f88 0%,#123f63 55%,#0a2c47 100%);
  box-shadow:0 -1px 3px rgba(4,20,34,.45);
}
.foot::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(198,226,246,0) 38%, rgba(198,226,246,.55) 45%,
    #e6f2fc 50%, rgba(198,226,246,.55) 55%, rgba(198,226,246,0) 62%);
  background-size:200% 100%;
  background-position:120% 0;
  opacity:0;
}
.foot.leuchtet::after{animation:kantenlicht 14s cubic-bezier(.35,0,.45,1) 0s 1 forwards}
.foot a{color:var(--on-dark);border-bottom:1px solid rgba(247,243,234,.25)}
.foot a:hover{color:#fff;border-bottom-color:var(--brass)}

/* Stück-Detailseite */
.detail-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;padding:40px 0;align-items:center}
.detail-hero img{border-radius:14px;border:1px solid var(--rule);aspect-ratio:16/10;object-fit:cover;width:100%;box-shadow:var(--shadow)}
.detail-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,44px);color:var(--ink);line-height:1.08;margin-bottom:10px}
.detail-hero .subtitle{color:var(--brass-deep);font-family:var(--serif);font-size:23px;font-style:italic;margin-bottom:16px}
.detail-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--ink-soft);font-size:16px;margin-bottom:20px}
.detail-meta .m::before{content:"◆ ";color:var(--brass)}
.section-h{font-family:var(--serif);font-weight:600;font-size:30px;color:var(--ink);margin:30px 0 14px}
.desc-block{margin-bottom:20px;max-width:760px}
.desc-block h3{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--brass-deep);margin-bottom:6px}
.desc-block p{color:var(--ink-soft);font-size:18px}
.back-link{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}
.back-link:hover{color:var(--brass-deep)}

@media(max-width:820px){
  .detail-hero{grid-template-columns:1fr}
  .filters{top:0}
  .search{margin-left:0;width:100%;order:5}
}
@media(max-width:560px){
  .wrap,.top-inner,.filters .filters-inner{padding-left:18px;padding-right:18px}
  body{font-size:16px}
  .drawer{width:100%}
  .build{display:none}
}

/* ---------- Embed-Modus ---------- */
body.embed{background:transparent;min-height:0}
body.embed .top,body.embed .hero,body.embed .foot{display:none}
body.embed .filters{position:static;background:transparent;border:none;padding:8px 0}
body.embed .grid{padding:8px 0}
body.embed .wrap{padding:0 4px}
body.embed .overlay{display:none}
body.embed .drawer{position:static;width:100%;max-width:620px;height:auto;margin:0 auto;
  transform:none;box-shadow:none;border:1px solid var(--rule);border-radius:14px;background:var(--bg-2)}
body.embed .drawer:not(.open){display:none}
body.embed .drawer.open{display:flex;flex-direction:column;transform:none}
body.embed .drawer-body{overflow:visible;flex:none}
body.embed.booking .filters,
body.embed.booking main{display:none}

/* =====================================================================
   Metall-Buttons: „Tickets buchen" = echtes Metall (Bronze → beim Hover
   weiche Überblendung in blaues Metall). Beide Metalle aus dem Wappenlöwen
   (Bronze = sein Metall, Blau = der Ton der bayerischen Rauten).
   Texturen lokal in /assets/img/ (kein Fremd-Domain-Load).
   ===================================================================== */
.btn-primary{
  position:relative; isolation:isolate;
  background-color:#4e473c;
  background-image:
    linear-gradient(104deg,rgba(233,220,196,0) 14%,rgba(233,220,196,.20) 33%,rgba(233,220,196,.07) 44%,rgba(233,220,196,0) 60%),
    linear-gradient(180deg,rgba(233,220,196,.07) 0%,rgba(32,28,21,0) 36%,rgba(32,28,21,.20) 100%),
    url("/assets/img/metall-gen.jpg");
  background-size:auto,auto,100% 100%;
  background-repeat:no-repeat,no-repeat,no-repeat;
  color:#f7f3ea;
  border:1px solid rgba(32,28,21,.45);
  font-weight:700; font-size:15.5px; letter-spacing:.045em;
  text-shadow:0 1px 2px rgba(16,12,6,.6);
  box-shadow:inset 0 1px 0 rgba(233,220,196,.5),0 3px 9px -4px rgba(20,15,8,.45);
}
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background-color:#2f4959;
  background-image:
    linear-gradient(104deg,rgba(233,220,196,0) 30%,rgba(233,220,196,.22) 50%,rgba(233,220,196,.07) 62%,rgba(233,220,196,0) 78%),
    linear-gradient(180deg,rgba(233,220,196,.07) 0%,rgba(32,28,21,0) 36%,rgba(32,28,21,.20) 100%),
    url("/assets/img/metall-blau.jpg");
  background-size:auto,auto,100% 100%;
  background-repeat:no-repeat,no-repeat,no-repeat;
  opacity:0; transition:opacity .38s ease;
}
.btn-primary:hover::after{opacity:1}
.btn-primary:hover{
  border-color:rgba(20,34,45,.5);
  text-shadow:0 1px 2px rgba(10,20,28,.65);
  box-shadow:inset 0 1px 0 rgba(233,220,196,.55),0 6px 16px -6px rgba(16,26,34,.5);
}
/* Deaktivierte Buttons: kein Metall, keine blaue Überblendung auf Hover */
.btn-primary:disabled{background-image:none}
.btn-primary:disabled::after{opacity:0}
/* Kleine Listen-Buttons kompakt halten (Metall bleibt) */
.btn-primary.btn-sm{font-size:12.5px}

/* ---- Termine auf der Stueckseite -------------------------------------
   Eigene, ruhige Zeilen statt der Karten von der Startseite: Auf der Seite
   eines Stuecks sind Bild, Titel und Werbesatz bei jedem Termin gleich -
   sichtbar bleiben soll, was sich unterscheidet: Datum, Ort, Preis.       */
.ev-dates{display:flex;flex-direction:column;gap:10px;padding:6px 0 56px;max-width:820px}
.ev-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--brass);
  border-radius:12px;padding:14px 18px;transition:border-color .15s,transform .15s,box-shadow .15s}
.ev-row:hover{border-color:var(--rule-strong);border-left-color:var(--blood);
  transform:translateY(-1px);box-shadow:0 8px 20px -14px rgba(60,40,20,.45)}
.ev-day{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;
  padding-right:18px;border-right:1px solid var(--rule);line-height:1}
.ev-day .wd{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-mute)}
.ev-day .dd{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--ink);margin:3px 0 2px}
.ev-day .mo{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute)}
.ev-main{min-width:0}
.ev-when{font-family:var(--sans);font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.25}
.ev-where{color:var(--ink-soft);font-size:15px;margin-top:3px}
.ev-where .vcode{color:var(--brass-deep);font-weight:600;font-size:.84em;letter-spacing:.04em}
.ev-note{color:var(--ink-mute);font-size:13.5px;margin-top:3px}
.ev-cta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0}
.ev-price{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);white-space:nowrap}
.ev-price small{color:var(--ink-mute);font-weight:400}
.ev-row.soldout{background:var(--bg-2);border-left-color:var(--blood)}
.ev-row.soldout .ev-day .dd,.ev-row.soldout .ev-when{color:var(--ink-soft)}
.ev-sold{font-family:var(--serif);font-weight:800;color:var(--blood);text-transform:uppercase;
  letter-spacing:.07em;font-size:13.5px;white-space:nowrap}
@media(max-width:620px){
  .ev-row{grid-template-columns:auto 1fr;gap:14px;row-gap:12px;padding:13px 15px}
  .ev-cta{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;
    border-top:1px solid var(--rule);padding-top:11px}
  .ev-day{min-width:52px;padding-right:14px}
  .ev-day .dd{font-size:27px}
}
/* Ohne JavaScript kommt dieselbe Liste vom Server - gleiche Optik */
.ev-dates .ev-row a.ev-link{display:contents;color:inherit}

/* "Nur Buchung" (dinner.events): ausschliesslich der Dialog, cremefarbener Grund */
body.solo-book{background:var(--bg)}
body.solo-book .filters,body.solo-book .grid,body.solo-book .empty,body.solo-book .embed-heading,body.solo-book .embed-credit{display:none!important}
body.solo-book .drawer{margin:26px auto;border:1px solid #e7ddc8;border-radius:14px;box-shadow:0 24px 60px -30px rgba(20,15,8,.35)}


/* ===================================================================
   ORTS-WARNUNG: an einem Tag spielen wir an zwei Orten. Gaeste
   verwechseln die Spielstaette - darum wird der Ort hier gross,
   farbig und mit ausdruecklichem Hinweis gezeigt.
   =================================================================== */
.ortwarn{
  display:flex; gap:11px; align-items:flex-start;
  border:2px solid #b8860b; background:#fdf6e3;
  border-radius:9px; padding:11px 14px; margin:9px 0 2px;
}
.ortwarn .zeichen{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  background:#b8860b; color:#fff; font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.ortwarn .txt{ font-family:var(--sans); font-size:14px; line-height:1.5; color:#5a4708 }
.ortwarn .txt b{ color:#3d3005 }
.ortwarn .ort{
  display:block; font-family:var(--serif); font-weight:800;
  font-size:19px; line-height:1.25; color:var(--ink); margin:3px 0 2px;
  letter-spacing:.01em;
}
.ortwarn .andere{ display:block; margin-top:4px; font-size:13.5px; color:#7a6318 }
/* In der Terminliste etwas kompakter */
.list-row .ortwarn{ padding:9px 12px; margin:7px 0 0 }
.list-row .ortwarn .ort{ font-size:17px }
@media (max-width:640px){
  .ortwarn{ padding:10px 12px }
  .ortwarn .ort{ font-size:17px }
}


/* --- Bedienbarkeit am Handy ---------------------------------------
   Fingerziele brauchen rund 44px Hoehe. Die kleinen Knoepfe (btn-sm)
   kamen auf 38px - am Rechner voellig in Ordnung, mit dem Daumen aber
   knapp. Gilt fuer alle Seiten des Shops.
   ----------------------------------------------------------------- */
@media(max-width:820px){
  .btn{min-height:46px}
  .btn-sm{min-height:44px;padding:12px 18px;font-size:13.5px}
  /* Auch die Mengen-Schalter im Buchungsfenster */
  .qty button,.stepper button{min-width:44px;min-height:44px}
}