/* Stueckseiten – uebernimmt die Gestaltung der Hauptseite (Elfenbein/Bronze) */
:root{
  --ink:#171717;
  --paper:#faf7f0; --paper-2:#f1ece0; --card:#fffdf8;
  --acc:#6e6455; --acc-deep:#544c40; --on-acc:#f7f3ea; --warm:#f7f3ea;
  --text:#2a2622; --text-soft:#5c554b; --mute:#8b8377;
  --line:rgba(23,23,23,.1); --line-2:rgba(23,23,23,.18); --aline:rgba(110,109,100,.5);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 20px 50px -30px rgba(20,15,8,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--ink);line-height:1.12}
.kicker{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute)}

/* Buttons – Grundregeln wie auf der Startseite (Metall kommt aus metall.css) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:15.5px;letter-spacing:.045em;
  padding:16px 32px;min-height:48px;border-radius:4px;border:1px solid transparent;
  cursor:pointer;transition:.2s ease;text-align:center}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc-deep)}
.btn-ghost.on-dark{color:var(--paper);border-color:rgba(245,240,231,.32)}
.btn-ghost.on-dark:hover{border-color:var(--acc);color:#fff}
.btn-sm{padding:12px 22px;min-height:44px;font-size:14px}
.is-sold{opacity:.55;pointer-events:none;text-decoration:line-through}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}

/* Kopfzeile */
header{position:sticky;top:0;z-index:60;background:rgba(252,249,242,.92);
  backdrop-filter:saturate(150%) blur(8px);-webkit-backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 22px;max-width:1140px;margin:0 auto}
.brand img{height:56px;width:auto}
@media(max-width:560px){.brand img{height:46px}}
.hnav{display:flex;gap:22px;align-items:center}
.hnav a{font-size:15.5px;font-weight:500;color:var(--text)}
.hnav a:hover{color:var(--acc-deep)}
@media(max-width:760px){.hnav a.hide-s{display:none}}

/* Seitenkopf – nutzt die volle Breite statt links zu kleben */
.seitenkopf{padding:26px 0 10px;display:grid;grid-template-columns:1.25fr .75fr;
  gap:26px 48px;align-items:end}
.seitenkopf .kopf-text{max-width:none}
.seitenkopf .kopf-text .anriss{max-width:58ch}
.seitenkopf .kopf-text .untertitel{max-width:52ch}
.seitenkopf h1{margin-top:10px}
.seitenkopf .kopf-fakten{background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px;align-self:end}
.seitenkopf .kopf-fakten dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.seitenkopf .kopf-fakten dt{font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap}
.seitenkopf .kopf-fakten dd{margin:0;font-size:15.5px;color:var(--text)}
.seitenkopf .kopf-fakten a{color:var(--acc-deep);text-decoration:underline}
@media(max-width:860px){
  .seitenkopf{grid-template-columns:1fr;gap:20px}
  .seitenkopf .kopf-fakten{align-self:stretch}
}

/* Spielort-Pillen wie im Ticketshop */
/* Abstand nach unten, damit die letzte Reihe nicht auf der Abschnittskante klebt */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 42px}
.chips a{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:14.5px;font-weight:500;line-height:1;padding:9px 17px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--text);background:var(--card);transition:.18s}
.chips a:hover{border-color:var(--acc);color:var(--acc-deep);transform:translateY(-1px)}
.chips a.aktiv{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.chips a .n{font-size:12.5px;opacity:.75;font-variant-numeric:tabular-nums}

/* Brotkrumen */
.crumbs{font-size:13.5px;color:var(--mute);padding:18px 0 0}
.crumbs a:hover{color:var(--acc-deep);text-decoration:underline}
.crumbs span{margin:0 7px;opacity:.6}

/* Kopf des Stuecks */
.stueck-kopf{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  padding:26px 0 8px}
@media(max-width:860px){.stueck-kopf{grid-template-columns:1fr;gap:24px}}
.motiv{border-radius:16px;overflow:hidden;background:#111;box-shadow:var(--shadow);
  aspect-ratio:3/2;position:relative}
.motiv img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:saturate(.92) contrast(1.03)}
.ai-tag{position:absolute;right:9px;bottom:9px;font-family:var(--sans);font-size:8px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);
  background:rgba(0,0,0,.32);padding:2px 7px;border-radius:4px;pointer-events:none}
h1{font-size:clamp(32px,5.2vw,50px);letter-spacing:.01em;margin-top:12px}
.untertitel{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.7vw,25px);
  color:var(--text-soft);margin-top:8px}
.anriss{font-size:18px;color:var(--text-soft);margin-top:18px;max-width:46ch}
.kopf-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Abschnitte */
section{padding:clamp(46px,6vw,74px) 0}
section.hell{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-kopf{max-width:640px;margin-bottom:26px}
.sec-kopf h2{font-size:clamp(26px,4vw,36px);margin-top:10px}
.fliess{max-width:68ch}
.fliess h3{font-size:22px;margin:26px 0 8px}
.fliess h3:first-child{margin-top:0}
.fliess p{color:var(--text-soft);margin-bottom:14px}

/* Ablauf-Karten */
.ablauf{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:8px}
.abl{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 22px 24px}
.abl .ic{font-family:var(--serif);font-size:25px;color:var(--acc);line-height:1}
.abl h3{font-size:20px;margin-top:10px}
.abl p{color:var(--text-soft);font-size:15.5px;margin-top:7px}

/* Termine */
.plan{display:flex;flex-direction:column;gap:12px}
.pcard{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 24px;
  transition:.2s ease}
.pcard:hover{border-color:var(--aline);box-shadow:0 16px 40px -24px rgba(20,15,8,.5);transform:translateY(-1px)}
.pcard .date{text-align:center;border-right:1px solid var(--aline);padding-right:18px;min-width:60px}
.pcard .dw{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-deep)}
.pcard .dd{font-family:var(--serif);font-weight:700;font-size:33px;color:var(--ink);line-height:1;margin:3px 0}
.pcard .dm{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pcard .st{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);line-height:1.2}
.pcard .mt{font-size:14.5px;color:var(--text-soft);margin-top:3px}
.pcard .av{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.pcard.sold .date,.pcard.sold .st,.pcard.sold .mt{opacity:.55}
.pcard.sold .av{display:inline-block;background:#8c1f14;color:#ffe6e1;font-weight:800;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;
  border-radius:4px;margin-top:9px}
.leer{color:var(--text-soft);background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:20px 24px}
@media(max-width:560px){
  .pcard{grid-template-columns:auto 1fr;gap:14px;padding:16px 18px}
  .pcard .cta{grid-column:1/-1}
  .pcard .cta .btn{width:100%;justify-content:center}
}

/* Spielorte */
.orte{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 30px;margin-top:6px}
.orte a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 2px;border-bottom:1px solid var(--line);font-size:15.5px}
.orte a .w{font-size:12.5px;color:var(--acc-deep);white-space:nowrap}
.orte a:hover .w{color:var(--acc)}

/* weitere Stuecke */
.weitere{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:8px}
.wk{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:#111;
  box-shadow:0 18px 36px -22px rgba(0,0,0,.5)}
.wk img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:saturate(.9) contrast(1.04);transition:transform .5s ease}
.wk:hover img{transform:scale(1.045)}
.wk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(13,13,13,.85))}
.wk .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px}
.wk .cap h3{color:var(--warm);font-size:19px;line-height:1.15}
.wk .cap span{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--warm);
  border-bottom:1px solid var(--acc);padding-bottom:2px}

/* Gutschein-Hinweis */
.gutschein{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.gutschein h2{font-size:25px}
.gutschein p{color:var(--text-soft);margin-top:6px;max-width:52ch}

/* Band */
.band{background:var(--ink);color:var(--paper);text-align:center}
.band h2{color:var(--warm);font-size:clamp(25px,4vw,38px)}
.band p{color:#cbc3b5;font-size:17.5px;margin:12px auto 22px;max-width:52ch}

/* Fusszeile */
footer{background:var(--paper-2);color:var(--text-soft);padding:48px 0 40px;text-align:center;
  border-top:1px solid var(--line)}
footer .flogo{height:54px;margin:0 auto 14px}
footer .fnav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:14px 0;font-size:14px}
footer .fnav a:hover{color:var(--acc-deep)}
footer .fine{font-size:12px;color:var(--mute);margin-top:12px;line-height:1.7}
.ai-hinweis{font-size:11px;color:var(--mute);opacity:.8;margin-top:14px}