/* Kultur Stadthagen – Entwurf 2026 · 2FOX4
   Idee: das Programmheft als Website. Papier, Druckerschwarz, ein Kammerrot.
   Große Serifen-Typografie trägt die Seite, Fotos bleiben schwarzweiß. */

@font-face{font-family:"Instrument Serif";src:url(../fonts/instr.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instr-i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}

:root{
  --paper:#f4efe6; --paper-2:#ebe4d7; --ink:#17130f; --ink-2:#2a241e; --muted:#6e655a; --line:#d8cfbf;
  --red:#b6193d; --red-2:#c8244a; --on-red:#fbf6ee;
  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px; --gut:clamp(16px,4vw,48px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);font-feature-settings:"ss01","tnum" 0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* feines Papierkorn */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .33 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance}
h2{font-size:clamp(2.4rem,5.6vw,4.6rem)}
h2 em,h1 em{font-style:italic;color:var(--red)}
p{margin:0 0 1em}
.eyebrow{font:600 .78rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.eyebrow.light{color:#e9a3b0}

.draft{background:var(--ink);color:#d9cfbf;font:500 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:9px 12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 .95rem/1 var(--sans);letter-spacing:.01em;padding:15px 24px;border-radius:999px;background:var(--red);color:var(--on-red);text-decoration:none;border:1px solid var(--red);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--paper)}
.btn.invert{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.invert:hover{background:var(--red);border-color:var(--red);color:var(--on-red)}
.btn.small{padding:11px 18px;font-size:.88rem}
.btn[disabled],.btn.off{background:transparent;color:var(--muted);border-color:var(--line);cursor:default}

/* Kopf */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;gap:24px;height:76px}
.mark{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);line-height:1}
.mark:hover{color:var(--ink)}
.mark-k{font:italic 2.1rem/1 var(--serif);color:var(--red)}
.mark-s{font:700 .9rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;display:flex;flex-direction:column;gap:4px}
.mark-s small{font-weight:500;font-size:.62rem;letter-spacing:.14em;color:var(--muted)}
.mark.light{color:var(--paper)}.mark.light .mark-k{color:#e9a3b0}.mark.light small{color:#a99e8f}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-weight:500;font-size:.96rem;position:relative}
.nav a:not(.pill)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--red);transition:right .25s}
.nav a:not(.pill):hover::after{right:0}
.nav a[aria-current=page]:not(.pill)::after{right:0}
.pill{border:1px solid var(--ink);border-radius:999px;padding:10px 18px;white-space:nowrap}
@media (min-width:901px) and (max-width:1100px){.nav{gap:18px}.nav a{font-size:.9rem}.pill{padding:9px 14px}}
@media (min-width:901px) and (max-width:990px){.nav{gap:12px}.pill{padding:9px 12px}}
.pill:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--ink);border-radius:50%;background:none;cursor:pointer;position:relative}
.burger span:not(.sr){position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink);transition:transform .25s,top .25s}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
.burger[aria-expanded=true] span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){top:22px;transform:rotate(-45deg)}
@media (max-width:900px){
  .burger{display:block}
  .nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding:8px var(--gut) 28px;border-bottom:1px solid var(--line);transform:translateY(-12px);opacity:0;visibility:hidden;transition:.25s}
  .nav.open{transform:none;opacity:1;visibility:visible}
  .nav a{font:400 2rem/1.2 var(--serif);padding:12px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .pill{margin-top:20px;text-align:center;font:600 1rem var(--sans);border-bottom:1px solid var(--ink)}
}

/* Hero */
.hero{padding-top:clamp(28px,5vw,64px);position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.kicker{display:flex;align-items:center;gap:10px;font:600 .8rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(182,25,61,.5);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(182,25,61,0)}100%{box-shadow:0 0 0 0 rgba(182,25,61,0)}}
.season{margin:22px 0 26px;line-height:.82}
.s-word{display:block;font-style:italic;font-size:clamp(3.2rem,9vw,7.4rem);color:var(--red);margin-left:.06em}
.s-num{display:flex;align-items:baseline;font-size:clamp(7rem,24vw,19.5rem);letter-spacing:-.05em}
.s-num em{font-style:italic;color:var(--line);margin:0 -.04em;font-size:.8em;transform:translateY(-.04em)}
.season span,.season em{display:inline-block}
.reveal .season span,.reveal .season em{animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
.reveal .s-num span:first-child{animation-delay:.08s}.reveal .s-num em{animation-delay:.16s}.reveal .s-num span:last-child{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:none}}
.lede{font-size:clamp(1.08rem,1.6vw,1.28rem);max-width:34em;color:var(--ink-2)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Nächstes Konzert */
.next{border-top:1px solid var(--ink);padding-top:18px;margin-bottom:6px}
.next-top{display:flex;justify-content:space-between;align-items:center;font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.count{background:var(--red);color:var(--on-red);padding:7px 11px;border-radius:999px;letter-spacing:.08em}
.next-fig{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;aspect-ratio:5/4;overflow:hidden;background:var(--ink);cursor:pointer}
.next-fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.next-fig:hover img{transform:scale(1.04)}
.next-date{position:absolute;left:0;bottom:0;background:var(--paper);padding:12px 16px 8px 0;display:flex;align-items:baseline;gap:10px}
.next-date b{font:400 4.2rem/.8 var(--serif);letter-spacing:-.03em}
.next-date span{font:600 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.next h3{font-size:clamp(1.8rem,2.6vw,2.3rem);margin:16px 0 6px}
.next .meta{color:var(--muted);font-size:.95rem;margin-bottom:16px}
.next .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vvk{font-size:.86rem;color:var(--muted)}
.vvk b{color:var(--ink);font-weight:600}

/* Laufband */
.ticker{margin-top:clamp(40px,6vw,80px);border-block:1px solid var(--ink);overflow:hidden;white-space:nowrap;padding:16px 0}
.ticker-in{display:inline-flex;gap:0;animation:run 48s linear infinite;font:italic 400 clamp(1.5rem,2.6vw,2.2rem)/1 var(--serif)}
.ticker-in span{padding:0 28px;display:inline-flex;align-items:center;gap:28px}
.ticker-in span::after{content:"✦";font-style:normal;font-size:.5em;color:var(--red)}
.ticker:hover .ticker-in{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}

/* Programm */
.programm{padding-block:clamp(72px,10vw,140px) clamp(48px,7vw,96px);position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px)}
.sec-head h2{max-width:11em}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:500 .88rem/1 var(--sans);padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.item{border-bottom:1px solid var(--line);transition:background .25s}
.item[hidden]{display:none}
.item-a{display:grid;grid-template-columns:64px 150px minmax(0,1fr) 230px;gap:clamp(16px,2.6vw,40px);align-items:center;padding:clamp(22px,3vw,36px) 0;text-decoration:none;color:inherit;cursor:pointer;width:100%;background:none;border:0;text-align:left;font:inherit}
.item-a:hover{color:inherit}
.no{font:600 .78rem/1 var(--sans);letter-spacing:.12em;color:var(--muted);align-self:start;padding-top:12px}
.when{display:flex;align-items:baseline;gap:10px}
.when b{font:400 4.4rem/.8 var(--serif);letter-spacing:-.04em;transition:color .25s}
.when span{font:600 .74rem/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.what h3{font-size:clamp(1.7rem,3vw,2.7rem);transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.what .motto{font:italic 1.15rem/1.3 var(--serif);color:var(--red);margin:6px 0 4px}
.what .where{font-size:.92rem;color:var(--muted);margin:0}
.thumb{display:none}
.side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.price{font:400 1.5rem/1 var(--serif)}
.price small{font:500 .78rem var(--sans);color:var(--muted);margin-left:4px}
.status{font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.status.on{color:var(--red)}.status.on::before{background:var(--red)}
.go{display:inline-flex;align-items:center;gap:10px;font:600 .9rem var(--sans);border-bottom:1px solid currentColor;padding-bottom:3px}
.go i{display:inline-block;transition:transform .25s;font-style:normal}
@media (hover:hover){
  .item:hover{background:var(--paper-2)}
  .item:hover .when b{color:var(--red)}
  .item:hover .what h3{transform:translateX(10px)}
  .item:hover .go i{transform:translateX(5px)}
}
.list-note{margin-top:24px;color:var(--muted);font-size:.92rem}
/* Bild folgt dem Mauszeiger */
.peek{position:fixed;left:0;top:0;width:220px;aspect-ratio:4/5;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-3deg);transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.1,1);overflow:hidden;box-shadow:0 20px 50px -20px rgba(23,19,15,.45)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
.peek img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
@media (hover:none),(max-width:900px){.peek{display:none}}
@media (max-width:900px){
  .item-a{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"when thumb" "what what" "side side";gap:14px 18px}
  .no{display:none}
  .when{grid-area:when}.what{grid-area:what}.side{grid-area:side;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;text-align:left}
  .thumb{display:block;grid-area:thumb;justify-self:end;width:84px;aspect-ratio:1;overflow:hidden;border-radius:50%}
  .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
  .when b{font-size:3.6rem}
}

/* Zitat */
.quote{background:var(--red);color:var(--on-red);padding-block:clamp(64px,9vw,128px)}
.quote blockquote{margin:0}
.quote p{font:400 clamp(2.4rem,6.4vw,5.6rem)/1 var(--serif);letter-spacing:-.02em;max-width:15em;text-wrap:balance}
.quote em{font-style:italic;color:var(--ink)}
.quote footer{font:600 .8rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-top:30px;opacity:.85}

/* Karten */
.karten{background:var(--ink);color:var(--paper);padding-block:clamp(72px,10vw,140px)}
.karten h2{color:var(--paper);max-width:12em}
.karten a:hover{color:#e9a3b0}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(36px,5vw,64px);border-top:1px solid #4a4037}
.way{padding:30px 30px 10px 0;border-right:1px solid #4a4037}
.way+.way{padding-left:30px}
.way:last-child{border-right:0}
.way-n{font:italic 400 3.4rem/1 var(--serif);color:#e9a3b0}
.way h3{font-size:2rem;margin:18px 0 12px;color:var(--paper)}
.way p{color:#cfc5b6}
.vvk{list-style:none;margin:0 0 4px;padding:0}
.vvk li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:7px 0;border-bottom:1px solid #4a4037;color:#cfc5b6}
.vvk li:last-child{border-bottom:0}
.vvk b{font-weight:600;color:var(--paper)}
.vvk span{font-size:.92rem}
.vvk a{color:#e9dccb;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.vvk a:hover{color:#fff}
.map-ico{width:1em;height:1em;vertical-align:-.15em;margin-right:.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.way .fine{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#958a7b}
.karten-note{margin-top:36px;color:#a99e8f;font-size:.92rem}
@media (max-width:820px){.ways{grid-template-columns:1fr}.way,.way+.way{padding:28px 0 6px;border-right:0;border-bottom:1px solid #4a4037}}

/* Orte */
.orte{padding-block:clamp(72px,10vw,140px)}
.orte-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,60px);align-items:start}
.ort{border-top:1px solid var(--ink);padding-top:20px}
.ort h3{font-size:clamp(1.7rem,2.4vw,2.2rem);margin-bottom:12px}
.ort p{color:var(--ink-2)}
.ort .addr{font-size:.88rem;color:var(--muted)}
.ort.big{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;border-top:0;padding-top:0}
.ort.big figure{margin:0;aspect-ratio:1;overflow:hidden;border-radius:50% 50% 0 0}
.ort.big img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) saturate(.8)}
.ort.big > div{border-top:1px solid var(--ink);padding-top:20px}
@media (max-width:980px){.orte-grid{grid-template-columns:1fr 1fr}.ort.big{grid-column:1/-1}}
@media (max-width:600px){.orte-grid{grid-template-columns:1fr}.ort.big{grid-template-columns:1fr}.ort.big figure{max-width:320px}}

/* Verein */
.verein{background:var(--paper-2);padding-block:clamp(72px,10vw,140px)}
.verein-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.verein h2{margin-bottom:28px}
.verein-grid > div > p{font-size:1.1rem;max-width:36em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid var(--ink)}
.stats div{padding:20px 16px 0 0}
.stats b{display:block;font:400 clamp(3rem,6vw,4.8rem)/1 var(--serif);letter-spacing:-.03em}
.stats span{font:600 .74rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.member{background:var(--paper);padding:clamp(24px,3vw,40px);border-radius:4px;position:relative;box-shadow:0 1px 0 var(--line)}
.member h3{font-size:2.4rem;margin-bottom:14px}
.member .btn{margin-top:8px}
.board{margin-top:28px;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:18px}
.board b{display:block;color:var(--ink);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
@media (max-width:860px){.verein-grid{grid-template-columns:1fr}}

/* Newsletter */
.news{background:var(--ink);color:var(--paper);padding-block:clamp(64px,8vw,112px);border-bottom:1px solid #3a322b}
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end}
.news h2{font-size:clamp(2.2rem,4.4vw,3.6rem);color:var(--paper)}
.nl-row{display:flex;gap:10px;border-bottom:1px solid #6b6055;padding-bottom:10px}
.nl input[type=email]{flex:1;min-width:0;background:none;border:0;color:var(--paper);font:400 1.6rem var(--serif);padding:8px 0}
.nl input::placeholder{color:#8a7f71}
.nl input:focus{outline:none}
.nl-row:focus-within{border-color:var(--paper)}
.consent{display:flex;gap:10px;margin-top:16px;font-size:.84rem;color:#a99e8f;align-items:flex-start}
.consent input{margin-top:4px;accent-color:var(--red)}
.nl-msg{min-height:1.4em;margin-top:12px;font-size:.92rem;color:#e9a3b0}
@media (max-width:820px){.news-grid{grid-template-columns:1fr}.nl-row{flex-wrap:wrap}.nl-row .btn{width:100%;justify-content:center}}

/* Fuß */
.foot{background:var(--ink);color:#cfc5b6;padding-block:48px 56px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:32px;align-items:start}
.foot b{color:var(--paper);font-weight:600}
.foot a:hover{color:#e9a3b0}
.legal{display:flex;gap:20px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* Detail-Ansicht */
.sheet{border:0;padding:0;margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(760px,100vw);max-width:100vw;background:var(--paper);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.sheet::backdrop{background:rgba(23,19,15,.55);backdrop-filter:blur(3px)}
.sheet[open]{animation:slide .45s cubic-bezier(.2,.7,.1,1)}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.sheet-in{padding:0 0 64px}
.sh-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(20px,4vw,48px);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);font:600 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.x{width:42px;height:42px;border-radius:50%;border:1px solid var(--ink);background:none;cursor:pointer;font-size:1.2rem;line-height:1;color:var(--ink)}
.x:hover{background:var(--ink);color:var(--paper)}
.sh-fig{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--ink);max-height:52vh}
.sh-fig figure{margin:0;position:relative;overflow:hidden}
.sh-fig img{width:100%;height:100%;max-height:52vh;object-fit:cover;filter:grayscale(1)}
.sh-fig figcaption{position:absolute;right:6px;bottom:6px;font-size:.66rem;color:#ddd;background:rgba(0,0,0,.45);padding:2px 6px}
.sh-body{padding:clamp(24px,4vw,48px)}
.sh-date{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.sh-date b{font:400 5rem/.8 var(--serif);letter-spacing:-.04em;color:var(--red)}
.sh-date span{font:600 .8rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.sh-body h2{font-size:clamp(2.4rem,6vw,3.8rem)}
.sh-motto{font:italic 1.5rem/1.3 var(--serif);color:var(--red);margin:10px 0 6px}
.sh-cast{color:var(--muted);font-size:.95rem}
.sh-facts{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--ink);margin:28px 0}
.sh-facts div{padding:14px 12px 14px 0;font-size:.9rem}
.sh-facts div+div{padding-left:14px;border-left:1px solid var(--line)}
.sh-facts small{display:block;font:600 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sh-text p{font-size:1.06rem}
.sh-hinweis{margin:22px 0 6px;padding:18px 22px;background:rgba(182,25,61,.08);border:1.5px solid var(--red);border-radius:4px;font-weight:600;line-height:1.5;text-align:center}
.sh-text p:first-child::first-letter{font:400 4.4em/.8 var(--serif);float:left;margin:.06em .08em 0 0;color:var(--red)}
.prog{margin:36px 0}
.prog h4,.tix h4{font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:var(--muted)}
.prog ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prog li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.prog li b{font:400 1.25rem/1.2 var(--serif)}
.prog li.pause{display:block;text-align:center;font:italic 1rem var(--serif);color:var(--muted)}
.tix{background:var(--paper-2);border-radius:4px;padding:clamp(20px,3vw,32px)}
.tix-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.tix-row span{font-size:.95rem}
.tix-row b{font:400 1.4rem var(--serif);margin-left:auto;margin-right:12px}
.step{display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:999px}
.step button{width:36px;height:36px;border:0;background:none;font-size:1.1rem;cursor:pointer;color:var(--ink);border-radius:50%}
.step button:hover{background:var(--ink);color:var(--paper)}
.step output{min-width:22px;text-align:center;font-weight:600}
.tix-sum{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.tix-sum strong{font:400 2rem var(--serif)}
.tix .fine{font-size:.8rem;color:var(--muted);margin:14px 0 0}
.sh-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:14px 20px;border-radius:999px;font-size:.92rem;opacity:0;transition:.3s;z-index:200;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:600px){.sh-facts{grid-template-columns:1fr}.sh-facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}.prog li{grid-template-columns:1fr;gap:2px}}

/* Scroll-Einblendung */
.fade{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.1,1)}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fade{opacity:1;transform:none}
}

/* Hero mobil */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .next{max-width:520px}
}
.season .s-word{display:block}
.price small{display:block;margin-top:6px}
@media (max-width:600px){.draft{letter-spacing:.08em;font-size:.66rem}}

/* Vereinslogo */
.logo{display:block;line-height:0;flex:0 0 auto}
.logo img{height:64px;width:auto}
.top .logo{margin-left:-2px}
.foot-logo img{height:64px}
.foot-claim{margin-top:14px;font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#958a7b}
@media (max-width:600px){.logo img{height:46px}}

/* Teaser auf der Startseite (Abschnitt „Der Verein“) */
.gast{margin-top:36px;border-top:1px solid var(--ink);padding-top:20px}
.gast-k{font:600 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.gast-names{font:400 clamp(1.25rem,2vw,1.6rem)/1.35 var(--serif);margin-bottom:16px;max-width:30em}
.gast-names i{color:var(--red)}
.gast-go{display:inline-flex;align-items:center;gap:10px;font:600 .95rem var(--sans);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.gast-go i{font-style:normal;transition:transform .25s}
.gast-go:hover i{transform:translateX(5px)}

/* Kartenreservierung (Formular → E-Mail an info@) */
.res{background:var(--paper-2);padding-block:clamp(72px,10vw,140px);scroll-margin-top:70px}
.res-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.res-intro{position:sticky;top:110px}
.res-intro h2{margin-bottom:24px}
.res-intro > p{font-size:1.08rem;color:var(--ink-2);max-width:30em}
.res-facts{list-style:none;margin:28px 0;padding:0;border-top:1px solid var(--ink)}
.res-facts li{padding:12px 0 12px 26px;border-bottom:1px solid var(--line);position:relative;font-size:.95rem}
.res-facts li::before{content:"✦";position:absolute;left:2px;top:13px;font-size:.6rem;color:var(--red)}
.res-alt{font-size:.92rem;color:var(--muted)}
.res-alt a{color:var(--ink);font-weight:600}
.res-form{background:var(--paper);border-radius:4px;padding:clamp(20px,3vw,40px);box-shadow:0 1px 0 var(--line)}
.res-form fieldset{border:0;margin:0 0 28px;padding:0;min-width:0}
.res-form legend{font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;padding:0}
.res-concerts ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.res-row{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 10px 14px 0;border-bottom:1px solid var(--line);transition:background .3s}
.res-row.on{background:linear-gradient(90deg,rgba(182,25,61,.07),transparent)}
.res-row.on .res-t b{color:var(--red)}
.res-row.flash{animation:resflash 1.4s ease}
@keyframes resflash{0%,30%{background:rgba(182,25,61,.18)}}
.res-d{font:600 .74rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding-left:10px}
.res-t b{display:block;font:400 1.3rem/1.15 var(--serif);transition:color .2s}
.res-t small{display:block;margin-top:4px;font-size:.84rem;color:var(--muted)}
.res-zeit{margin-top:8px;font:500 .86rem var(--sans);padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink)}
.res-q select{appearance:none;-webkit-appearance:none;font:400 1.4rem/1 var(--serif);width:76px;padding:8px 26px 8px 14px;border:1px solid var(--ink);border-radius:999px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2317130f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--ink);cursor:pointer;text-align:center}
.res-q select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.res-row.on .res-q select{background-color:var(--red);border-color:var(--red);color:var(--on-red);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fbf6ee' stroke-width='1.5'/%3E%3C/svg%3E")}
.res-row.off{opacity:.55}
.res-row.off .res-q{font:400 1.4rem var(--serif);color:var(--muted);width:76px;text-align:center}
.res-anrede{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px;font-size:.95rem}
.res-anrede input{accent-color:var(--red)}
.res-f{display:block;margin-bottom:16px}
.res-f span{display:block;font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.res-f input,.res-f textarea{width:100%;font:400 1.05rem var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:8px 0;border-radius:0}
.res-f textarea{resize:vertical;border:1px solid var(--line);padding:10px;border-radius:4px}
.res-f input:focus,.res-f textarea:focus{outline:none;border-color:var(--red)}
.res-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.res-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.res-consent{color:var(--muted)}
.res-send{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.res-msg{margin:0;font-size:.92rem;min-height:1.4em;flex:1 1 220px}
.res-msg.err{color:var(--red)}
.res-done{outline:none}
.res-done h3{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:18px}
.res-done ul{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--ink)}
.res-done li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.res-done li b{font:400 1.25rem var(--serif)}
.res-done li span{color:var(--muted);font-size:.9rem}
@media (max-width:900px){.res-grid{grid-template-columns:1fr}.res-intro{position:static}}
@media (max-width:600px){
  .res-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d q" "t q";gap:4px 12px}
  .res-d{grid-area:d;padding-left:0}.res-t{grid-area:t}.res-q{grid-area:q}
  .res-two{grid-template-columns:1fr;gap:0}
}

/* Rechtstexte (Impressum, Datenschutz) */
.lg{padding-block:clamp(28px,4vw,48px) clamp(72px,10vw,130px)}
.lg-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.lg-toc{position:sticky;top:110px;font-size:.9rem}
.lg-toc p{font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.lg-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.lg-toc a{display:block;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink-2)}
.lg-toc a:hover{color:var(--red)}
.lg h1{font-size:clamp(3.2rem,8vw,6.4rem);line-height:.9;letter-spacing:-.03em;margin-bottom:18px}
.lg h1 em{font-style:italic;color:var(--red)}
.lg-lede{font-size:1.1rem;color:var(--ink-2);max-width:38em;margin-bottom:36px}
.lg-body{max-width:46em}
.lg-body section{border-top:1px solid var(--ink);padding-top:22px;margin-top:40px;scroll-margin-top:100px}
.lg-body h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:14px}
.lg-body h3{font:600 .78rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:22px 0 8px;color:var(--ink)}
.lg-body p,.lg-body li{font-size:1rem;color:var(--ink-2)}
.lg-body ul{padding-left:1.1em;margin:0 0 1em}
.lg-body li{margin-bottom:6px}
.lg-body address{font-style:normal;font-size:1.05rem;line-height:1.6;margin-bottom:1em}
.lg-dl{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:0;border-top:1px solid var(--line);margin:0 0 1em}
.lg-dl dt,.lg-dl dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line);font-size:.98rem}
.lg-dl dt{font:600 .72rem/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-right:16px}
.lg-stand{margin-top:48px;font-size:.86rem;color:var(--muted)}
@media (max-width:900px){.lg-grid{grid-template-columns:1fr}.lg-toc{position:static}}
@media (max-width:600px){.lg-dl{grid-template-columns:1fr}.lg-dl dt{border-bottom:0;padding-bottom:0}}
.lg .crumb{display:flex;gap:10px;align-items:center;font:500 .84rem/1 var(--sans);color:var(--muted);margin-bottom:clamp(28px,5vw,56px)}
.lg .crumb a{text-decoration:none}
.lg .crumb b{font-weight:600;color:var(--ink)}
@media (max-width:900px){.lg-toc{display:none}}

/* Kalender-Auswahl im Konzertfenster */
.cal{position:relative}
.cal summary{list-style:none}
.cal summary::-webkit-details-marker{display:none}
.cal summary i{font-style:normal;font-size:.75em;transition:transform .2s}
.cal[open] summary{background:var(--ink);color:var(--paper)}
.cal[open] summary i{transform:rotate(180deg)}
.cal-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:5;width:min(340px,calc(100vw - 40px));background:var(--paper);border:1px solid var(--ink);border-radius:6px;box-shadow:0 18px 40px -18px rgba(23,19,15,.45);padding:6px}
.cal-k{font:600 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:8px 10px 6px}
.cal-menu a,.cal-menu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:4px;text-decoration:none;color:var(--ink);background:none;border:0;font:inherit;cursor:pointer}
.cal-menu a:hover,.cal-menu a:focus-visible,.cal-menu button:hover,.cal-menu button:focus-visible{background:var(--paper-2);color:var(--ink)}
.cal-menu b{display:block;font:400 1.15rem/1.15 var(--serif)}
.cal-menu span{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}

/* Startseite: großes Logo (Wunsch Frau Hattendorf), beim Scrollen kleiner; „Saison“ kleiner */
.home .top-in{height:auto;padding-block:14px;transition:padding .3s}
.home .logo img{height:128px;transition:height .3s}
.home .top.scrolled .top-in{padding-block:6px}
.home .top.scrolled .logo img{height:64px}
.home .s-word{font-size:clamp(2.2rem,5.2vw,4.4rem)}
@media (max-width:900px){
  .home .nav{position:absolute;inset:100% 0 auto 0}
}
@media (max-width:600px){
  .home .logo img{height:84px}
  .home .top.scrolled .logo img{height:46px}
  .home .top-in{padding-block:10px}
}
@media (prefers-reduced-motion:reduce){.home .logo img,.home .top-in{transition:none}}

/* Ermäßigungs-Hinweis */
.karten-note.erm-note{margin-top:28px;color:#cfc5b6}
.karten-note.erm-note b{color:var(--paper);font-weight:600}
.karten-note.erm-note + .karten-note{margin-top:8px}
.tix .fine.erm{color:var(--ink);font-size:.86rem;margin-top:10px}

/* Kinderkonzerte: zwei Vorstellungen, je eigene Kartenarten (10.10.2026) */
.res-row.multi{grid-template-columns:118px minmax(0,1fr);align-items:start}
.res-arten{display:grid;gap:8px;margin-top:12px}
.res-art{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.92rem}
.res-art em{font-style:normal;color:var(--muted);white-space:nowrap}
.res-art select{appearance:none;-webkit-appearance:none;flex:none;font:400 1.15rem/1 var(--serif);width:64px;padding:6px 22px 6px 12px;border:1px solid var(--ink);border-radius:999px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2317130f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--ink);cursor:pointer;text-align:center}
.res-art select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.res-art select.set{background-color:var(--red);border-color:var(--red);color:var(--on-red)}
.res-fam{margin-top:10px!important;font-style:italic}
.res-done li b small{display:block;font:400 .85rem var(--sans);color:var(--muted);margin-top:2px}
.tix-show{margin-bottom:14px}
.tix-show h5{font:600 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px;color:var(--red)}
.tix-show h5 small{display:block;font:400 .85rem var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px}
.tix .sh-actions{flex-wrap:wrap}
@media (max-width:640px){
  .res-row.multi{grid-template-columns:1fr;grid-template-areas:"d" "t"}
  .res-art{font-size:.88rem}
}

/* Familienkarte: Personen je Karte für die Platzplanung (10.10.2026) */
.res-famp{display:grid;gap:6px;margin:-2px 0 4px;padding:10px 12px;border-left:2px solid var(--red);background:rgba(182,25,61,.05);font-size:.88rem}
.res-famp[hidden]{display:none}
.res-famp-head{color:var(--muted);font-style:italic}
.res-famp-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px}
.res-famp-row b{font-weight:600;min-width:7.5em}
.res-famp-row label{display:flex;align-items:center;gap:8px}
.res-famp-row select{appearance:none;-webkit-appearance:none;font:400 1.05rem/1 var(--serif);width:56px;padding:5px 20px 5px 10px;border:1px solid var(--ink);border-radius:999px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2317130f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center;color:var(--ink);cursor:pointer;text-align:center}
.res-famp-row select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.res-famp-row select.set{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.res-row .res-t .res-famp-row b{display:inline-block;font:600 .88rem/1.2 var(--sans);color:var(--ink)}

/* Karte zu den Spielorten als Fenster (10.10.2026) */
html.map-lock{overflow:hidden}
.map-dlg{border:0;padding:0;width:min(860px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--paper);color:var(--ink);border-radius:6px;box-shadow:0 30px 80px rgba(23,19,15,.35);overflow:hidden}
.map-dlg::backdrop{background:rgba(23,19,15,.55);backdrop-filter:blur(3px)}
.map-dlg[open]{animation:mapin .3s cubic-bezier(.2,.7,.1,1)}
@keyframes mapin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.map-in{display:flex;flex-direction:column;max-height:calc(100dvh - 32px)}
.map-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px clamp(18px,3vw,28px) 14px;border-bottom:1px solid var(--line)}
.map-head .eyebrow{margin:0 0 4px}
.map-head h3{margin:0;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.1}
.map-addr{margin:6px 0 0;font-size:.9rem;color:var(--muted)}
.map-x{flex:none;width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);font:300 1.7rem/1 var(--sans);cursor:pointer}
.map-x:hover{background:var(--ink);color:var(--paper)}
.map-x:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.map-frame{flex:1 1 auto;min-height:0;background:var(--paper-2)}
.map-frame iframe{display:block;width:100%;height:min(60vh,520px);border:0}
.map-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:12px clamp(18px,3vw,28px) 16px;border-top:1px solid var(--line);font-size:.9rem}
.map-foot > a{font-weight:600;color:var(--ink)}
.map-foot > a:hover{color:var(--red)}
.map-foot small{flex:1 1 100%;color:var(--muted);font-size:.78rem}
.map-foot small a{color:inherit}
@media (max-width:640px){.map-frame iframe{height:55vh}}
@media (prefers-reduced-motion:reduce){.map-dlg[open]{animation:none}}

/* Logo mit überstehendem K-Strich links (wie Original/Flyer, 10.10.2026):
   Das Bild beginnt mit dem Strich; die rote Box liegt bei 10,87 % der Bildhöhe → per negativem Rand wieder bündig */
.logo img{margin-left:-7px}
.foot-logo img{margin-left:-7px}
.home .logo img{margin-left:-14px;transition:height .3s,margin-left .3s}
.home .top.scrolled .logo img{margin-left:-7px}
@media (max-width:600px){
  .logo img{margin-left:-5px}
  .home .logo img{margin-left:-9px}
  .home .top.scrolled .logo img{margin-left:-5px}
}