:root{
  --bg:#0c0c11; --bg2:#14141b; --text:#f2f2f5; --muted:#a9a9b8; --line:#ffffff1a;
  --musiker:#ff7f00; --streamer:#0cc0df; --komponist:#9147ff; --dirigent:#ca191a;
  --c:#ff7f00; --radius:14px; --maxw:1120px; --header:60px;
  --font: "Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header)}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em}
.container{width:min(var(--maxw),100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.5rem 1rem;z-index:200}
.skip:focus{left:0}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;height:var(--header);z-index:100;display:flex;align-items:center;background:#0c0c11cc;backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:background .3s}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font-weight:800;text-decoration:none;font-size:1.15rem;letter-spacing:-.02em;transition:opacity .3s}
.brand span{color:var(--brand,var(--musiker))}
.home .site-header:not(.scrolled){background:linear-gradient(#000a,transparent);border-color:transparent;backdrop-filter:none}
.home .site-header:not(.scrolled) .brand{opacity:0;pointer-events:none}
.nav ul{list-style:none;display:flex;gap:1.4rem;align-items:center}
.nav a{text-decoration:none;font-size:.95rem;color:var(--muted);transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:#fff}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;padding:.3rem .5rem}

/* Buttons */
.btn{display:inline-block;padding:.75rem 1.4rem;border-radius:999px;font-weight:700;text-decoration:none;background:var(--c);color:#fff;border:2px solid var(--c);transition:transform .2s,background .2s,color .2s;font-size:.95rem;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--c)}
.btn.ghost:hover{background:var(--c);color:#fff}
.btn.light{background:#fff;color:#111;border-color:#fff}

/* Hero */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;display:flex;overflow:hidden;background:#000}
.hero-title{position:absolute;top:calc(var(--header) + 1rem);left:0;right:0;z-index:20;text-align:center;font-size:clamp(2.2rem,6vw,5rem);font-weight:900;letter-spacing:-.03em;text-shadow:0 2px 4px #000a,0 4px 30px #000b;pointer-events:none;padding:0 1rem}
.hero-title::before{content:"";position:absolute;left:0;right:0;top:calc(var(--header) * -1);bottom:-3.5rem;z-index:-1;background:linear-gradient(#000000b3,#00000080 55%,transparent);pointer-events:none}
.hero-title small{display:block;font-size:clamp(.8rem,1.4vw,1.1rem);font-weight:500;letter-spacing:.3em;text-transform:uppercase;opacity:.85;margin-top:.4rem}
.panel{position:relative;flex:1;overflow:hidden;cursor:pointer;transition:flex .6s cubic-bezier(.2,.7,.2,1);outline:none;border-right:1px solid #0008}
.panel:last-child{border-right:0}
.panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease,filter .5s}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000c 0%,#0000 55%);transition:opacity .4s}
.panel-name{position:absolute;left:0;right:0;bottom:2.2rem;text-align:center;z-index:3;font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;text-shadow:0 2px 14px #000a;transition:opacity .3s}
.panel-name::after{content:"";display:block;width:48px;height:5px;border-radius:3px;background:var(--c);margin:.6rem auto 0}
.panel-over{position:absolute;inset:0;z-index:4;background:linear-gradient(#00000040,#00000040),color-mix(in srgb,var(--c) 64%,transparent);backdrop-filter:blur(1px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1.4rem;padding:2rem clamp(1.2rem,3vw,3rem);opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s;pointer-events:none}
.panel-over h2,.panel-over p{text-shadow:0 1px 3px #0009,0 2px 14px #0008}
.panel-over h2{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.panel-over p{font-size:clamp(.95rem,1.15vw,1.1rem);max-width:30ch}
.panel-over .btn{background:#fff;color:#111;border-color:#fff}
.panel:hover,.panel:focus-within,.panel.active{flex:1.5}
.panel:hover>img,.panel.active>img{transform:scale(1.06)}
.panel:hover .panel-over,.panel:focus-within .panel-over,.panel.active .panel-over{opacity:1;transform:none;pointer-events:auto}
.panel:hover .panel-name,.panel.active .panel-name,.panel:focus-within .panel-name{opacity:0}
.scroll-hint{position:absolute;bottom:.6rem;left:50%;translate:-50% 0;z-index:15;font-size:1.4rem;opacity:.7;animation:bob 2s infinite;pointer-events:none;display:none}
@keyframes bob{50%{transform:translateY(6px)}}

@media (max-width:820px){
  .hero{flex-direction:column}
  .hero-title{position:relative;top:0;flex:none;background:#000;padding:calc(var(--header) + .3rem) 1rem .9rem;font-size:2.1rem}
  .hero-title small{font-size:.6rem;letter-spacing:.18em}
  .hero-title::before{display:none}
  .panel{border-right:0;border-bottom:1px solid #0008}
  .panel-name{left:1rem;right:auto;bottom:.8rem;translate:none;text-align:left;font-size:1.5rem}
  .panel-name::after{display:none}
  .panel:hover,.panel:focus-within{flex:1}
  .panel.active{flex:3.2}
  .panel-over p{max-width:42ch;font-size:.95rem}
  .panel-over{gap:.9rem;padding:1rem 1.4rem}
  .nav-toggle{display:block}
  .nav{position:fixed;inset:var(--header) 0 auto 0;background:#0c0c11f5;border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .35s}
  .nav.open{max-height:80vh}
  .nav ul{flex-direction:column;align-items:flex-start;padding:1rem 1.5rem 1.5rem;gap:1rem}
  .nav a{font-size:1.1rem}
}
@media (hover:none){
  .panel:hover{flex:1}
  .panel:hover .panel-over{opacity:0;pointer-events:none}
  .panel:hover .panel-name{opacity:1}
  .panel.active .panel-over{opacity:1;transform:none;pointer-events:auto}
  .panel.active .panel-name{opacity:0}
}

/* Sections */
section{padding:clamp(3.5rem,8vw,7rem) 0}
.eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--c);margin-bottom:.8rem}
.section-title{font-size:clamp(2rem,4.5vw,3.4rem);margin-bottom:1.2rem}
.lead{color:var(--muted);font-size:1.1rem;max-width:60ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.split.reverse .media{order:2}
.media img{width:100%;height:auto;border-radius:var(--radius);aspect-ratio:3/2;object-fit:cover;box-shadow:0 20px 50px #0008}
.media.portrait img{aspect-ratio:4/5}
.text p+p{margin-top:1rem}
.text .btn{margin-top:1.6rem}
.text ul{margin:1rem 0 0 1.2rem;color:var(--muted)}
.band{background:var(--bg2);border-block:1px solid var(--line)}
.accent-section{border-left:6px solid var(--c)}
@media (max-width:820px){.split{grid-template-columns:1fr}.split.reverse .media{order:0}}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem;margin-top:2rem}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;transition:transform .25s,border-color .25s;text-decoration:none;display:block}
.card:hover{transform:translateY(-4px);border-color:var(--c)}
.card h3{font-size:1.15rem;margin-bottom:.4rem}
.card p{color:var(--muted);font-size:.95rem}
.card .tag{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:700;margin-bottom:.6rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:2rem}
.gallery img{border-radius:var(--radius);aspect-ratio:3/2;object-fit:cover;width:100%}
.event{display:flex;gap:1.5rem;align-items:center;background:var(--bg2);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:var(--radius);padding:1.4rem 1.6rem;margin-top:1.6rem;flex-wrap:wrap}
.event .date{font-weight:900;font-size:1.6rem;line-height:1;text-align:center;min-width:80px}
.event .date small{display:block;font-size:.8rem;letter-spacing:.15em;color:var(--muted);font-weight:600}
.event .info{flex:1;min-width:200px}
.socials{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.socials a{padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.9rem;color:var(--muted);transition:.2s}
.socials a:hover{color:#fff;border-color:#fff}

/* Subpage head */
.page-head{position:relative;min-height:56vh;display:flex;align-items:flex-end;padding-top:var(--header);overflow:hidden}
.page-head>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-head::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 0%,#0c0c1166 60%,#0c0c1199 100%);z-index:1}
.page-head .container{position:relative;z-index:2;padding-bottom:3rem}
.page-head h1{font-size:clamp(2.4rem,7vw,5rem);font-weight:900}
.page-head h1::after{content:"";display:block;width:80px;height:6px;border-radius:3px;background:var(--c);margin-top:1rem}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:.8rem}
.breadcrumb a{text-decoration:none}

/* Contact / prose */
.prose{max-width:70ch}
.prose h2{font-size:1.5rem;margin:2rem 0 .6rem}
.prose p,.prose li{color:#d4d4de}
.prose ul{margin-left:1.2rem}
.todo{background:#ffd34d22;border:1px dashed #ffd34d;padding:.8rem 1rem;border-radius:8px;color:#ffd34d;font-size:.9rem;margin:1rem 0}

/* Footer */
.site-footer{background:#07070a;border-top:1px solid var(--line);padding:3rem 0 2rem;color:var(--muted);font-size:.92rem}
.footer-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
.site-footer h4{color:#fff;margin-bottom:.6rem;font-size:.95rem}
.site-footer ul{list-style:none}
.site-footer li{margin:.3rem 0}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff}
.copy{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.82rem}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* Termine-Feeds */
.event .meta{color:var(--muted);font-size:.95rem}
.event .desc{margin-top:.5rem;font-size:.92rem;color:#cfcfda}
.event .desc a{color:var(--c)}
.event .tag{display:inline-block;margin-top:.5rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:700}
.event.past{opacity:.65;border-left-color:#555;padding:.9rem 1.2rem}
.event.past .date{font-size:1.2rem}
.event .date small{font-size:.68rem;white-space:nowrap}
.feed-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);margin-top:1rem}
.feed-cols h3.col-title{font-size:1.3rem;display:flex;align-items:center;gap:.6rem}
.feed-cols h3.col-title::before{content:"";width:10px;height:28px;border-radius:3px;background:var(--c)}
.past-list{margin-top:1.4rem}
.past-list summary{cursor:pointer;color:var(--muted);font-size:.95rem}
@media (max-width:820px){.feed-cols{grid-template-columns:1fr}}
/* Formular */
.field{display:block;margin-bottom:1rem;font-size:.92rem;color:var(--muted)}
.field input,.field select,.field textarea{display:block;width:100%;margin-top:.35rem;padding:.75rem .9rem;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:#fff;font:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--c);border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:1rem;font-size:.95rem}
.form-msg.ok{color:#5fd38d}.form-msg.err{color:#ff7a7a}
/* Einbettungen */
.embed{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--bg2);border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;transition:border-color .2s}
.embed:hover{border-color:var(--c)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed.loaded{cursor:default;padding:0}
.embed .play{width:56px;height:56px;border-radius:50%;background:var(--c);display:grid;place-items:center;margin:0 auto .7rem;font-size:1.3rem}
.embed strong{display:block;font-size:1rem}
.embed small{color:var(--muted);font-size:.78rem;display:block;margin-top:.3rem}
.embed.spotify{aspect-ratio:auto;height:352px}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-top:2rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.chips span{padding:.45rem 1rem;border:1px solid var(--line);border-radius:999px;font-size:.92rem;color:#d4d4de;background:var(--bg2)}
.card.nolink:hover{transform:none;border-color:var(--line)}
.card .more{display:inline-block;margin-top:.6rem;font-size:.82rem;color:var(--c);font-weight:600}
.facts{list-style:none;margin:1rem 0 0!important}
.facts li{padding:.5rem 0;border-bottom:1px solid var(--line)}
.facts b{display:inline-block;min-width:9rem;color:#fff}
@media print{.site-header,.site-footer,.page-head img,.no-print{display:none!important}body{background:#fff;color:#000}.page-head::before{display:none}*{color:#000!important;background:transparent!important}}

/* Hero: nächster Termin */
.hero-next{display:flex;width:fit-content;margin-inline:auto;align-items:center;gap:.6rem;margin-top:1.35rem;padding:.5rem 1.1rem;border-radius:999px;background:#000a;border:1px solid #ffffff44;backdrop-filter:blur(6px);font-size:clamp(.8rem,1.2vw,1rem);font-weight:600;letter-spacing:0;text-transform:none;text-decoration:none;color:#fff;pointer-events:auto;text-shadow:none;transition:background .2s}
.hero-next:hover{background:#000d}
.hero-next[hidden]{display:none}
.hero-next .dot{width:10px;height:10px;border-radius:50%;background:var(--k,#fff);flex:none}
.hero-next .lbl{opacity:.75;font-weight:500}
@media (max-width:820px){.hero-title .hero-next{margin-top:.75rem;padding:.35rem .8rem;font-size:.78rem}}

.embed.audio{aspect-ratio:auto;height:450px}
.embed.linktile{text-decoration:none;color:inherit}
.embed.static{cursor:default}
.embed.static:hover{border-color:var(--line)}
.chips a{padding:.45rem 1rem;border:1px solid var(--line);border-radius:999px;font-size:.92rem;color:#fff;background:var(--bg2);text-decoration:none;transition:border-color .2s,background .2s}
.chips a:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,var(--bg2))}