/* Rosen-Montags-Divertissementchen von 1861 e.V. – Design */
:root{
  --rot:#b8182b; --rot-d:#8a0f1f; --rot-h:#d62a3e;
  --gruen:#0f4a33; --gruen-d:#0a2f21; --gruen-n:#07231a;
  --gelb:#f3b917; --gelb-d:#b98700; --gelb-h:#ffd452;
  --papier:#fbf5e6; --papier-2:#f4ead0; --weiss:#fffdf7;
  --tinte:#1f1a15; --grau:#5d544a; --linie:#e2d4b0;
  --serif:'Bodoni Moda', 'Didot', Georgia, serif;
  --sans:'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r:14px; --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 17.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--rot);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:1.45rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.eyebrow{font:600 .78rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--rot);display:inline-flex;align-items:center;gap:.7em;margin-bottom:1.1em}
.eyebrow::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--rot) 0 33%,var(--gelb) 33% 66%,var(--gruen) 66%)}
.eyebrow.hell{color:var(--gelb)}
em.gold{font-style:italic;color:var(--gelb-d)}
.tricolor{height:6px;background:linear-gradient(90deg,var(--rot) 0 33.33%,var(--gelb) 33.33% 66.66%,var(--gruen) 66.66%)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:600 .95rem/1 var(--sans);padding:.95em 1.45em;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:transform .2s,background .2s,color .2s,border-color .2s;cursor:pointer;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-gelb{background:var(--gelb);color:var(--gruen-n)}
.btn-gelb:hover{background:var(--gelb-h)}
.btn-rot{background:var(--rot);color:#fff}
.btn-rot:hover{background:var(--rot-h)}
.btn-linie{border-color:currentColor;color:var(--gruen)}
.btn-linie:hover{background:var(--gruen);color:#fff;border-color:var(--gruen)}
.btn-hell{border-color:rgba(255,255,255,.55);color:#fff}
.btn-hell:hover{background:#fff;color:var(--gruen-d)}
.btn svg{width:18px;height:18px}

/* Topbar */
.topbar{background:var(--gruen-d);color:#e9e2cc;font-size:.84rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:20px}
.topbar a{color:#e9e2cc;text-decoration:none}
.topbar a:hover{color:var(--gelb)}
.topbar .links{display:flex;gap:22px;align-items:center}
.topbar .links span{opacity:.4}

/* Header */
header.site{background:var(--weiss);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:50}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:88px;gap:24px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tinte)}
.brand svg{width:58px;height:58px;flex:none}
.brand b{display:block;font:600 1.12rem/1.1 var(--serif)}
.brand small{display:block;font:500 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-top:4px}
nav#mainnav{display:flex;align-items:center;gap:30px}
nav#mainnav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px}
nav#mainnav ul a{font:500 .98rem/1 var(--sans);color:var(--tinte);text-decoration:none;padding:8px 0;position:relative}
nav#mainnav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rot);transform:scaleX(0);transition:transform .25s}
nav#mainnav ul a:hover::after,nav#mainnav ul a.aktiv::after{transform:scaleX(1)}
nav#mainnav .aktionen{display:flex;gap:10px}
nav#mainnav .aktionen .btn{padding:.8em 1.25em;font-size:.9rem}
.burger{display:none;background:none;border:0;width:46px;height:46px;cursor:pointer;padding:11px;border-radius:10px}
.burger span{display:block;height:2px;background:var(--tinte);margin:5px 0;transition:transform .25s,opacity .25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero: Bühne */
.buehne{position:relative;background:radial-gradient(ellipse 60% 70% at 50% 58%,#1a6a4a 0%,var(--gruen) 38%,var(--gruen-n) 100%);overflow:hidden;padding:120px 0 110px;color:#fff}
.buehne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.lambrequin{position:absolute;top:0;left:0;right:0;height:74px;z-index:3;
  background:repeating-linear-gradient(90deg,var(--rot-d) 0 4px,var(--rot) 14px,var(--rot-h) 22px,var(--rot) 30px,var(--rot-d) 40px);
  -webkit-mask:radial-gradient(40px 26px at 40px 100%,transparent 98%,#000) 0 0/80px 100%;
          mask:radial-gradient(40px 26px at 40px 100%,transparent 98%,#000) 0 0/80px 100%;}
.lambrequin-kante{position:absolute;top:0;left:0;right:0;height:10px;background:var(--gelb);z-index:4;box-shadow:0 2px 0 var(--gelb-d)}
.vorhang{position:absolute;top:0;bottom:0;width:22%;max-width:300px;z-index:2;
  background:repeating-linear-gradient(90deg,var(--rot-d) 0 5px,var(--rot) 16px,var(--rot-h) 25px,var(--rot) 34px,var(--rot-d) 46px);
  box-shadow:inset 0 -60px 60px rgba(0,0,0,.25)}
.vorhang.links{left:0;clip-path:polygon(0 0,100% 0,62% 38%,34% 62%,58% 100%,0 100%)}
.vorhang.rechts{right:0;clip-path:polygon(0 0,100% 0,100% 100%,42% 100%,66% 62%,38% 38%)}
.raffung{position:absolute;top:60%;z-index:3;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--gelb-h),var(--gelb-d));box-shadow:0 3px 8px rgba(0,0,0,.4)}
.raffung.links{left:calc(min(22%,300px)*.34 - 13px)}
.raffung.rechts{right:calc(min(22%,300px)*.34 - 13px)}
.raffung::after{content:"";position:absolute;left:50%;top:22px;width:3px;height:44px;margin-left:-1.5px;background:linear-gradient(var(--gelb),var(--gelb-d))}
.konfetti{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.9}
.konfetti i{position:absolute;display:block;width:9px;height:14px;border-radius:2px}

.zettel{position:relative;z-index:5;max-width:720px;margin:0 auto;background:var(--weiss);color:var(--tinte);text-align:center;padding:54px 56px 48px;border-radius:4px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.zettel::before{content:"";position:absolute;inset:12px;border:1px solid var(--gelb-d);outline:3px double var(--linie);outline-offset:5px;pointer-events:none}
.zettel .seit{font:600 .8rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gruen);display:flex;align-items:center;justify-content:center;gap:14px}
.zettel .seit::before,.zettel .seit::after{content:"";width:46px;height:1px;background:var(--gelb-d)}
.zettel h1{font-size:clamp(2.2rem,5.1vw,3.9rem);margin:.45em 0 .25em;color:var(--rot);font-weight:700;letter-spacing:-.02em}
.zettel h1 span{display:block;font-style:italic;font-weight:500;color:var(--tinte);font-size:.62em;margin-top:.12em;letter-spacing:0}
.zettel .ornament{display:flex;justify-content:center;margin:18px 0 20px}
.zettel .ornament svg{width:180px;height:18px}
.zettel p.lead{font-size:1.1rem;color:var(--grau);max-width:500px;margin:0 auto 28px}
.zettel .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Fakten */
.fakten{background:var(--weiss);border-bottom:1px solid var(--linie)}
.fakten .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.fakt{padding:34px 20px;text-align:center;border-left:1px solid var(--linie)}
.fakt:first-child{border-left:0}
.fakt b{display:block;font:700 2.5rem/1 var(--serif);color:var(--rot)}
.fakt:nth-child(2) b{color:var(--gelb-d)}
.fakt:nth-child(3) b{color:var(--gruen)}
.fakt span{display:block;margin-top:10px;font-size:.9rem;color:var(--grau);line-height:1.4}

/* Sektionen */
section.block{padding:110px 0}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.gross{font:italic 500 1.5rem/1.45 var(--serif);color:var(--gruen);margin-bottom:1em}

/* Spielplan */
.spielplan{background:var(--weiss);border:1px solid var(--linie);border-radius:4px;padding:40px 40px 30px;position:relative;box-shadow:0 18px 40px rgba(60,40,10,.08)}
.spielplan::before{content:"";position:absolute;inset:8px;border:1px solid var(--papier-2);pointer-events:none}
.spielplan h3{text-align:center;font-size:1.05rem;font-family:var(--sans);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gruen);margin-bottom:26px}
.spielplan ol{list-style:none;margin:0;padding:0}
.spielplan li{padding:16px 0;border-top:1px dashed var(--linie)}
.spielplan li:first-child{border-top:0}
.spielplan .zeile{display:flex;align-items:baseline;gap:12px}
.spielplan .akt{font:italic 500 .95rem/1 var(--serif);color:var(--rot);flex:none;width:72px}
.spielplan .titel{font:600 1.3rem/1.2 var(--serif)}
.spielplan .punkte{flex:1;border-bottom:2px dotted var(--linie);transform:translateY(-5px)}
.spielplan .fuer{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);flex:none}
.spielplan p{margin:.35em 0 0 84px;font-size:.95rem;color:var(--grau)}
.spielplan li.finale .titel{color:var(--rot)}

/* Sitzung */
.sitzung{background:var(--gruen-d);color:#efe8d4;position:relative;overflow:hidden}
.sitzung::before{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;border:1px solid rgba(243,185,23,.18);box-shadow:0 0 0 40px rgba(243,185,23,.04),0 0 0 90px rgba(243,185,23,.03)}
.sitzung h2{color:#fff}
.sitzung p{color:#d9d1bb}
.sitzung .zwei{align-items:center}
.ticket{display:grid;grid-template-columns:1fr 150px;background:var(--papier);color:var(--tinte);border-radius:14px;position:relative;box-shadow:0 28px 60px rgba(0,0,0,.4);transform:rotate(-1.5deg)}
.ticket .haupt{padding:34px 34px 30px;border-right:2px dashed var(--linie)}
.ticket .haupt small{font:600 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rot)}
.ticket .haupt h3{font-size:2rem;margin:.35em 0 .2em}
.ticket .haupt p{color:var(--grau);margin:0 0 18px;font-size:.98rem}
.ticket dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.95rem}
.ticket dt{color:var(--grau)}
.ticket dd{margin:0;font-weight:600}
.ticket .abriss{background:var(--rot);color:#fff;border-radius:0 14px 14px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 12px;gap:6px}
.ticket .abriss b{font:700 3rem/1 var(--serif);color:var(--gelb)}
.ticket .abriss span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.ticket::before,.ticket::after{content:"";position:absolute;right:139px;width:22px;height:22px;border-radius:50%;background:var(--gruen-d)}
.ticket::before{top:-11px}.ticket::after{bottom:-11px}
.sitzung .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* Aktuelles */
.kopf{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:44px}
.kopf h2{margin:0}
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.kachel{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:34px;display:flex;flex-direction:column}
.kachel h3{display:flex;align-items:center;gap:12px}
.kachel h3 .ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--papier-2);color:var(--rot);flex:none}
.kachel h3 .ico svg{width:20px;height:20px}
.kachel iframe{width:100%;border:0;min-height:260px}
.platzhalter{flex:1;display:flex;flex-direction:column;gap:14px;margin:8px 0 24px}
.platzhalter div{border:1px dashed var(--linie);border-radius:10px;padding:16px 18px;display:flex;gap:16px;align-items:center;background:var(--papier)}
.platzhalter .dat{width:56px;text-align:center;flex:none;font:700 1.5rem/1 var(--serif);color:var(--rot)}
.platzhalter .dat small{display:block;font:600 .68rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.platzhalter b{display:block;font-weight:600}
.platzhalter span{font-size:.88rem;color:var(--grau)}
.kachel .mehr{margin-top:auto;font-weight:600;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.hinweis{font-size:.78rem;color:var(--grau);margin:-10px 0 18px;font-style:italic}

/* Chronik */
.chronik{background:var(--papier-2)}
.zeitleiste{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;margin-top:56px}
.zeitleiste::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--gelb-d) 0 8px,transparent 8px 14px)}
.station{position:relative}
.station .punkt{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--weiss);border:2px solid var(--rot);font:700 .95rem/1 var(--serif);color:var(--rot);position:relative;z-index:1;margin-bottom:22px}
.station:nth-child(2) .punkt{border-color:var(--gelb-d);color:var(--gelb-d)}
.station:nth-child(3) .punkt{border-color:var(--gruen);color:var(--gruen)}
.station:nth-child(4) .punkt{background:var(--rot);color:#fff}
.station h3{font-size:1.3rem}
.station p{font-size:.97rem;color:var(--grau);margin:0}
.chronik .zentriert{text-align:center;margin-top:52px}

/* Mitglied / Kontakt */
.einladung{background:var(--rot);color:#fff;position:relative;overflow:hidden}
.einladung::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,212,82,.25),transparent 45%);pointer-events:none}
.einladung .zwei{align-items:center}
.einladung h2{color:#fff}
.einladung p{color:#fbe3e3}
.einladung .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.kontaktkarte{background:var(--weiss);color:var(--tinte);border-radius:var(--r);padding:36px;position:relative;z-index:1}
.kontaktkarte h3{margin-bottom:18px}
.kontaktkarte ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.kontaktkarte li{display:flex;gap:14px;align-items:flex-start}
.kontaktkarte li svg{width:20px;height:20px;color:var(--rot);flex:none;margin-top:4px}
.kontaktkarte a{color:var(--tinte);text-decoration:none}
.kontaktkarte a:hover{color:var(--rot)}

/* Footer */
footer.site{background:var(--gruen-n);color:#cfc7b1;font-size:.95rem}
footer.site .spalten{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding:72px 0 56px}
footer.site h4{font:600 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gelb);margin:0 0 20px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.site a{color:#e9e2cc;text-decoration:none}
footer.site a:hover{color:var(--gelb)}
footer.site .brand{color:#fff;margin-bottom:18px}
footer.site .brand small{color:#a79f89}
footer.site .unten{border-top:1px solid rgba(255,255,255,.1)}
footer.site .unten .wrap{display:flex;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px;font-size:.85rem;color:#a79f89}
footer.site .unten a{color:#e9e2cc;text-decoration:underline;text-decoration-color:rgba(243,185,23,.5)}

/* Einblenden */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Tablet */
@media (max-width:1100px){
  .burger{display:block}
  nav#mainnav{position:fixed;left:0;right:0;bottom:0;top:128px;background:var(--weiss);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:28px;padding:28px 24px 40px;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s;z-index:60}
  nav#mainnav.open{visibility:visible;opacity:1}
  nav#mainnav ul{flex-direction:column;gap:0}
  nav#mainnav ul a{display:block;padding:18px 4px;border-bottom:1px solid var(--linie);font:600 1.5rem/1.1 var(--serif)}
  nav#mainnav ul a::after{display:none}
  nav#mainnav .aktionen{flex-direction:column}
  nav#mainnav .aktionen .btn{width:100%;padding:1.05em;font-size:1rem}
  .zwei{gap:48px}
}
@media (max-width:860px){
  .zwei,.kacheln{grid-template-columns:1fr}
  .fakten .wrap{grid-template-columns:1fr 1fr}
  .fakt:nth-child(3){border-left:0}
  .fakt:nth-child(n+3){border-top:1px solid var(--linie)}
  .zeitleiste{grid-template-columns:1fr 1fr;row-gap:44px}
  .zeitleiste::before{display:none}
  footer.site .spalten{grid-template-columns:1fr 1fr}
  footer.site .spalten > div:first-child{grid-column:1/-1}
}
/* Mobil */
@media (max-width:600px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .topbar .mail,.topbar .links span.m{display:none}
  header.site .wrap{height:74px}
  nav#mainnav{top:114px}
  .brand svg{width:46px;height:46px}
  .brand b{font-size:.98rem}
  .brand small{font-size:.64rem;letter-spacing:.1em}
  .buehne{padding:88px 0 70px}
  .lambrequin{height:52px;-webkit-mask-size:56px 100%;mask-size:56px 100%;-webkit-mask-image:radial-gradient(28px 18px at 28px 100%,transparent 98%,#000);mask-image:radial-gradient(28px 18px at 28px 100%,transparent 98%,#000)}
  .vorhang{width:40px}
  .vorhang.links{clip-path:polygon(0 0,100% 0,60% 40%,0 60%)}
  .vorhang.rechts{clip-path:polygon(0 0,100% 0,100% 60%,40% 40%)}
  .raffung{display:none}
  .buehne .wrap{padding:0 26px}
  .zettel{padding:40px 22px 32px}
  .zettel::before{inset:8px;outline-offset:3px}
  .zettel .seit{font-size:.68rem;letter-spacing:.22em;gap:10px}
  .zettel .seit::before,.zettel .seit::after{width:22px}
  .zettel p.lead{font-size:1rem}
  .zettel .ctas .btn,.sitzung .ctas .btn,.einladung .ctas .btn{width:100%}
  section.block{padding:72px 0}
  .fakt{padding:24px 10px}
  .fakt b{font-size:2rem}
  .spielplan{padding:30px 20px 20px}
  .spielplan .akt{width:auto}
  .spielplan .fuer{display:none}
  .spielplan p{margin-left:0}
  .ticket{grid-template-columns:1fr;transform:none}
  .ticket .haupt{border-right:0;border-bottom:2px dashed var(--linie);padding:28px 24px}
  .ticket .abriss{border-radius:0 0 14px 14px;flex-direction:row;gap:14px}
  .ticket .abriss b{font-size:2.2rem}
  .ticket::before,.ticket::after{display:none}
  .kopf{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:30px}
  .kachel{padding:26px 20px}
  .zeitleiste{grid-template-columns:1fr;row-gap:30px}
  .station{display:grid;grid-template-columns:56px 1fr;gap:0 18px}
  .station .punkt{margin:0;grid-row:span 2}
  .kontaktkarte{padding:28px 22px}
  footer.site .spalten{grid-template-columns:1fr;gap:36px;padding:56px 0 40px}
  footer.site .unten .wrap{flex-direction:column;gap:6px}
}
.kachel .mehr svg{width:18px;height:18px}
.btn-linie svg,.btn svg{flex:none}
@media (max-width:600px){.zettel h1{font-size:clamp(1.55rem,7.4vw,2rem)}.zettel h1 span{font-size:.7em}}