@font-face{font-family:"Cormorant";src:url(fonts/cormorant.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Albert";src:url(fonts/albert.woff2) format("woff2");font-weight:300 600;font-display:swap}
:root{
  --papier:#ffffff;--tinte:#1f1b1c;--bordeaux:#7a263a;--bordeaux-tief:#5c1a2a;--rastral:#d8d3cf;--grau:#6b6466;--flaeche:#f4f2f0;
  --serif:"Cormorant","Cormorant Garamond",Georgia,serif;--sans:"Albert",system-ui,sans-serif;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--s7:104px;--breite:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font:300 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
p{margin:0 0 var(--s3)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2.6rem,6.2vw,5.4rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
h3{font-size:1.5rem;font-weight:600}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--s4)}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}
.label{font:500 .74rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--grau)}



/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--rastral)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.marke{font:600 1.65rem/1 var(--serif);text-decoration:none;letter-spacing:.01em;display:inline-flex;align-items:center}
.marke .dp{display:inline-flex;flex-direction:column;justify-content:center;gap:.2em;margin:0 .1em;height:.62em;align-self:center;transform:translateY(.06em)}
.marke .dp i{width:.18em;height:.18em;flex:none;border-radius:50%;background:var(--bordeaux);display:block}
.nav{display:flex;gap:var(--s5);align-items:center}
.nav a{text-decoration:none;font-size:.95rem;font-weight:400;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--bordeaux)}
.nav a.nav-anfrage{color:var(--bordeaux);font-weight:500}
.menu-knopf{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer}
.menu-knopf span{display:block;width:24px;height:1.5px;background:var(--tinte);margin:6px 0;transition:transform .25s}
@media (max-width:820px){
  .menu-knopf{display:block}
  .nav{position:fixed;inset:68px 0 auto 0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 24px;border-bottom:1px solid var(--rastral);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
  .nav a{font:500 1.6rem/1.2 var(--serif);padding:12px 0;width:100%;border-bottom:1px solid var(--rastral)}
  body.menu-offen .nav{opacity:1;transform:none;pointer-events:auto}
  body.menu-offen .menu-knopf span:first-child{transform:translateY(3.75px) rotate(45deg)}
  body.menu-offen .menu-knopf span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:10px;background:var(--bordeaux);color:#fff;text-decoration:none;font:500 .95rem/1 var(--sans);padding:15px 22px;border-radius:2px;border:0;cursor:pointer;transition:background .2s}
.knopf:hover{background:var(--bordeaux-tief)}
.knopf.leise{background:transparent;color:var(--bordeaux);padding:12px 0;border-bottom:1px solid var(--bordeaux);border-radius:0}
.knopf.leise:hover{color:var(--bordeaux-tief)}
.pfeil{transition:transform .2s}.knopf:hover .pfeil,a:hover>.pfeil{transform:translateX(3px)}

/* Notensystem mit Wiederholungszeichen */
.system{position:relative;height:52px;margin:0}
.system .linien{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--tinte) 0 1px,transparent 1px 12.75px);height:52px;opacity:.85}
.system .wz{position:absolute;top:-6px;bottom:-6px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;gap:5px;padding:0 12px}
.wz .dick{width:7px;background:var(--bordeaux)}
.wz .duenn{width:1.5px;background:var(--bordeaux)}
.wz .punkte{display:flex;flex-direction:column;justify-content:center;gap:13px;margin-left:4px}
.wz .punkte i{width:8px;height:8px;border-radius:50%;background:var(--bordeaux);display:block}
.system.klein{height:26px}.system.klein .linien{height:26px;background:repeating-linear-gradient(to bottom,var(--tinte) 0 1px,transparent 1px 6.25px);opacity:.6}
.system.klein .wz{top:-3px;bottom:-3px;gap:3px;padding:0 8px}.system.klein .dick{width:4px}.system.klein .duenn{width:1px}.system.klein .punkte{gap:6px;margin-left:2px}.system.klein .punkte i{width:4px;height:4px}

/* Hero */
.hero{padding:var(--s6) 0 var(--s6);border-bottom:1px solid var(--rastral)}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s6);align-items:end}
.hero h1{margin-bottom:var(--s3)}
.hero .unter{font-size:1.15rem;color:var(--grau);margin:0 0 var(--s6);max-width:40ch}
.fassung-wechsel .kopfzeile{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s3)}
.fassung-wechsel .zaehler{display:flex;align-items:center;gap:6px}
.zaehler button{background:none;border:1px solid var(--rastral);width:38px;height:38px;border-radius:2px;cursor:pointer;color:var(--tinte);font-size:1rem;display:grid;place-items:center;transition:border-color .2s}
.zaehler button:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.zaehler .nr{font:500 .85rem var(--sans);color:var(--grau);min-width:52px;text-align:center;font-variant-numeric:tabular-nums}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s4)}
.paar .seite{transition:opacity .45s ease,transform .45s ease}
.paar .rechts{text-align:left}
.paar .label{display:block;margin-bottom:6px}
.paar .rechts .label{color:var(--bordeaux)}
.paar .was{font:500 1.45rem/1.2 var(--serif);margin:0 0 4px}
.paar .wer{font-size:.95rem;color:var(--grau);margin:0}
.paar .zum-werk{display:inline-block;margin-top:var(--s3);font-weight:500;color:var(--bordeaux);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.wechselt .links{opacity:0;transform:translateX(-14px)}
.wechselt .rechts{opacity:0;transform:translateX(14px)}
.wechselt .wz .punkte i{transform:scale(.4)}
.wz .punkte i{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.hero-bild{position:relative;margin:0}
.hero-bild .rahmen{aspect-ratio:4/5;overflow:hidden;background:var(--flaeche)}
.hero-bild img{width:100%;height:100%;object-fit:cover;transition:opacity .5s ease}
.hero-bild figcaption{display:flex;justify-content:space-between;margin-top:10px;font-size:.85rem;color:var(--grau)}
.wechselt .hero-bild img{opacity:0}

/* Abschnitte */
.abschnitt{padding:var(--s7) 0}
.abschnitt.grau{background:var(--flaeche)}
.kopf-zeile{display:flex;justify-content:space-between;align-items:end;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.kopf-zeile p{margin:0;color:var(--grau)}

/* Termine */
.termin{display:grid;grid-template-columns:250px minmax(0,1fr) auto;gap:var(--s5);padding:var(--s4) 0;border-top:1px solid var(--rastral);align-items:baseline}
.termin:last-child{border-bottom:1px solid var(--rastral)}
.termin .datum{font:500 1.9rem/1 var(--serif)}
.termin .datum small{display:block;font:400 .85rem/1.4 var(--sans);color:var(--grau);margin-top:6px}
.termin h3{font-size:1.55rem;margin-bottom:4px}
.termin h3 a{text-decoration:none}.termin h3 a:hover{color:var(--bordeaux)}
.termin .ort{margin:0}
.termin .mit{margin:4px 0 0;color:var(--grau);font-size:.95rem}
.termin .kat{font:500 .74rem var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--bordeaux);white-space:nowrap}
.termin.klein{grid-template-columns:180px minmax(0,1fr) auto;padding:var(--s3) 0}
.termin.klein .datum{font-size:1.25rem}
.termin.klein h3{font-size:1.2rem}

/* Besetzungs-Einstieg */
.gruppen{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--tinte)}
.gruppen a{display:block;padding:var(--s4) var(--s3) var(--s4) 0;text-decoration:none;border-bottom:1px solid var(--rastral);transition:color .2s}
.gruppen a:hover{color:var(--bordeaux)}
.gruppen .zahl{font:500 3rem/1 var(--serif);display:block;margin-bottom:8px;font-variant-numeric:lining-nums}
.gruppen .name{font-size:.95rem}

/* Werk-Kacheln Auswahl */
.auswahl{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s6)}
.auswahl a{text-decoration:none;display:block}
.auswahl .bild{aspect-ratio:4/5;overflow:hidden;background:var(--flaeche);margin-bottom:var(--s3)}
.auswahl img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.auswahl a:hover img{transform:scale(1.03)}
.auswahl .komp{font-size:.85rem;color:var(--grau);margin:0 0 4px}
.auswahl h3{font-size:1.35rem;margin-bottom:6px}
.auswahl a:hover h3{color:var(--bordeaux)}
.auswahl .fas{font-size:.92rem;margin:0;color:var(--tinte)}

/* Über */
.ueber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s6);align-items:start}
.zitat{font:500 clamp(1.4rem,2.2vw,1.85rem)/1.35 var(--serif);margin:0 0 var(--s3);padding-left:var(--s4);border-left:2px solid var(--bordeaux)}
.zitat-quelle{font-size:.9rem;color:var(--grau);padding-left:var(--s4)}

/* Verlage */
.verlage{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s5);align-items:center;margin-top:var(--s5)}
.verlage img{max-height:64px;width:auto;margin:0 auto;filter:grayscale(1);opacity:.8;transition:filter .3s,opacity .3s;mix-blend-mode:multiply}
.verlage img:hover{filter:none;opacity:1}

/* Anfrage */
.anfrage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s6)}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}
.formular .ganz{grid-column:1/-1}
.formular label{display:block;font-size:.85rem;font-weight:500;margin-bottom:6px}
.formular input,.formular select,.formular textarea{width:100%;font:400 1rem var(--sans);color:var(--tinte);border:1px solid #bdb6b2;border-radius:2px;padding:13px 14px;background:#fff}
.formular textarea{min-height:130px;resize:vertical}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:var(--bordeaux);box-shadow:0 0 0 1px var(--bordeaux)}
.danke{display:none;padding:var(--s4);border-left:2px solid var(--bordeaux);background:#fff}
.gesendet .formular{display:none}.gesendet .danke{display:block}
.kontaktzeilen p{margin:0 0 6px}

/* Werkverzeichnis */
.seitenkopf{padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--rastral)}
.seitenkopf p{color:var(--grau);max-width:60ch;margin:var(--s3) 0 0;font-size:1.1rem}
.brot{font-size:.85rem;color:var(--grau);margin-bottom:var(--s4)}
.brot a{text-decoration:none}.brot a:hover{color:var(--bordeaux)}
.filter{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s3) var(--s4);padding:var(--s5) 0 var(--s4)}
.filter .such{position:relative}
.filter input[type=search],.filter select{width:100%;font:400 1.05rem var(--sans);border:1px solid #bdb6b2;border-radius:2px;padding:14px 16px;background:#fff;color:var(--tinte)}
.filter input[type=search]{padding-left:44px}
.filter .such svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--grau)}
.besetzungen{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 var(--s4);border-bottom:1px solid var(--rastral)}
.besetzungen button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 0 12px;font:400 .97rem var(--sans);color:var(--grau);cursor:pointer}
.besetzungen button[aria-pressed=true]{color:var(--tinte);border-bottom-color:var(--bordeaux);font-weight:500}
.besetzungen button:hover{color:var(--tinte)}
.besetzungen sup{font-size:.72rem;margin-left:3px;color:var(--grau)}
.ergebnis-zeile{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) 0;color:var(--grau);font-size:.92rem}
.ergebnis-zeile button{background:none;border:0;color:var(--bordeaux);cursor:pointer;font:500 .92rem var(--sans);text-decoration:underline;text-underline-offset:3px}
.liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--tinte)}
.liste li a{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr) 110px;gap:var(--s4);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--rastral);text-decoration:none;transition:background .2s}
.liste li a:hover{background:linear-gradient(90deg,var(--flaeche),transparent)}
.liste .mini{width:64px;height:80px;overflow:hidden;background:var(--flaeche)}
.liste .mini img{width:100%;height:100%;object-fit:cover}
.liste .komp{font-size:.85rem;color:var(--grau);display:block;margin-bottom:2px}
.liste .tit{font:500 1.35rem/1.15 var(--serif)}
.liste li a:hover .tit{color:var(--bordeaux)}
.liste .fas{font-size:.93rem}
.liste .meta{font-size:.85rem;color:var(--grau);text-align:right;font-variant-numeric:tabular-nums}
.leer{padding:var(--s6) 0;text-align:center;color:var(--grau);display:none}
.platzhalter{width:100%;height:100%;display:grid;place-items:center;font:600 1.6rem var(--serif);color:var(--grau);background:var(--flaeche)}

/* Werkseite */
.werk{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:var(--s6);padding:var(--s5) 0 var(--s7)}
.werk-bild{position:sticky;top:96px;align-self:start}
.werk-bild .rahmen{aspect-ratio:4/5;overflow:hidden;background:var(--flaeche)}
.werk-bild img{width:100%;height:100%;object-fit:cover}
.werk-bild figcaption{font-size:.85rem;color:var(--grau);margin-top:10px}
.werk .komp{font-size:1.05rem;margin:0 0 var(--s2);color:var(--grau)}
.werk h1{font-size:clamp(2.3rem,4.6vw,4rem);margin-bottom:var(--s3)}
.werk .art{margin:0 0 var(--s5);font-size:1.05rem}
.werk .art b{font-weight:500;color:var(--bordeaux)}
.werk .paar{margin-bottom:var(--s5)}
.daten{display:grid;grid-template-columns:200px minmax(0,1fr);margin:0 0 var(--s5);border-top:1px solid var(--tinte)}
.daten dt,.daten dd{padding:14px 0;border-bottom:1px solid var(--rastral);margin:0}
.daten dt{font:500 .74rem/1.9 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--grau);padding-right:var(--s3)}
.daten dd p{margin:0 0 4px}.daten dd p:last-child{margin:0}
.daten ol{margin:0;padding-left:1.3em}.daten li{margin:2px 0}
.daten a{color:var(--bordeaux);text-underline-offset:3px}
.werk-zitat{margin:0 0 var(--s5)}
.werk-anm{color:var(--tinte);max-width:64ch}
.werk-knoepfe{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;margin:var(--s5) 0}
.blaettern{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rastral);margin-top:var(--s6)}
.blaettern a{padding:var(--s4) 0;text-decoration:none;display:block}
.blaettern a:last-child{text-align:right}
.blaettern span{display:block;font-size:.85rem;color:var(--grau)}
.blaettern b{font:500 1.25rem var(--serif)}
.blaettern a:hover b{color:var(--bordeaux)}
.werk-termine{margin:0 0 var(--s5)}
.werk-termine h2{font-size:1.6rem;margin-bottom:var(--s3)}

/* Termine Seite */
.kat-filter{display:flex;flex-wrap:wrap;gap:0 var(--s4);border-bottom:1px solid var(--rastral);margin:var(--s5) 0 var(--s4)}
.kat-filter button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 0 12px;font:400 .97rem var(--sans);color:var(--grau);cursor:pointer}
.kat-filter button[aria-pressed=true]{color:var(--tinte);border-bottom-color:var(--bordeaux);font-weight:500}
.jahr{font:500 1.6rem var(--serif);margin:var(--s5) 0 var(--s2)}
.hinweis-klein{font-size:.9rem;color:var(--grau)}

/* Text-Seiten */
.text{max-width:64ch;padding:var(--s5) 0 var(--s7)}
.text h2{font-size:1.7rem;margin:var(--s5) 0 var(--s2)}

/* Fuß */
.fuss{background:var(--tinte);color:#d9d3cf;padding:var(--s6) 0 var(--s5);font-size:.95rem}
.fuss a{color:#fff;text-decoration:none}.fuss a:hover{text-decoration:underline}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s5)}
.fuss .marke{color:#fff;font-size:1.9rem;margin-bottom:var(--s3)}
.fuss p{margin:0 0 6px}
.fuss .klein{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid #3a3335;font-size:.82rem;color:#a39b97}

/* Einblenden */
.ein{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.ein.da{opacity:1;transform:none}

@media (max-width:1020px){
  .gruppen{grid-template-columns:repeat(3,1fr)}
  .auswahl{grid-template-columns:repeat(2,1fr)}
  .verlage{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .wrap{padding:0 var(--s3)}
  .hero{padding:var(--s5) 0}
  .hero-raster{grid-template-columns:1fr;gap:var(--s5)}
  .hero .unter{margin-bottom:var(--s5)}
  .hero-bild{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);align-items:end;margin-top:calc(-1 * var(--s3))}
  .hero h1{font-size:2.75rem}
  .hero .unter{font-size:1.02rem}
  .hero-bild figcaption{margin:0;flex-direction:column;gap:2px}
  .paar{gap:var(--s3)}
  .paar .was{font-size:1.2rem}
  .abschnitt{padding:var(--s6) 0}
  .termin,.termin.klein{grid-template-columns:1fr;gap:6px}
  .termin .kat{order:-1}
  .gruppen{grid-template-columns:1fr 1fr}
  .gruppen a{padding:var(--s3) var(--s2) var(--s3) 0}
  .gruppen .zahl{font-size:2.3rem}
  .auswahl{gap:var(--s3)}
  .auswahl h3{font-size:1.15rem}
  .ueber,.anfrage{grid-template-columns:1fr;gap:var(--s5)}
  .formular{grid-template-columns:1fr}
  .filter{grid-template-columns:1fr}
  .besetzungen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .besetzungen button{white-space:nowrap}
  .liste li a{grid-template-columns:52px minmax(0,1fr);gap:var(--s3)}
  .liste .mini{width:52px;height:65px}
  .liste .fas{grid-column:2;font-size:.88rem;margin-top:-8px}
  .liste .meta{display:none}
  .werk{grid-template-columns:1fr;gap:var(--s4);padding-top:var(--s3)}
  .werk-bild{position:static;display:grid;grid-template-columns:110px 1fr;gap:var(--s3);align-items:end}
  .werk-bild figcaption{margin:0}
  .daten{grid-template-columns:1fr}
  .daten dt{border-bottom:0;padding-bottom:0}
  .daten dd{padding-top:4px}
  .verlage{grid-template-columns:repeat(2,1fr);gap:var(--s4)}
  .fuss-raster{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .ein{opacity:1;transform:none}
}
/* Ergänzungen fertige Seite (Smith & Victory, 29.10.2026) */
.hero-bild .rahmen img,.werk-bild .rahmen img{width:100%;height:100%;object-fit:cover;display:block}
.komp-klein{font-family:var(--sans);font-size:.9rem;font-weight:400;color:var(--grau)}
.formular .hk{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular .haken label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.9rem;line-height:1.5}
.formular .haken input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--bordeaux)}
.formular .haken a{color:var(--bordeaux)}
.formular .feld.ungueltig input,.formular .feld.ungueltig textarea{border-color:#b3261e}
.form-status{margin:12px 0 0;font-size:.9rem;color:var(--grau)}
.form-status.fehler{color:#b3261e}
.formular-erfolg{padding:var(--s4);border-left:2px solid var(--bordeaux);background:#fff;grid-column:1/-1}
.formular-erfolg p{margin:0 0 8px}
.formular-erfolg a{color:var(--bordeaux)}
.seitenkopf .komp{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bordeaux);margin:0 0 var(--s2)}
.termin-seite{max-width:860px}
.termin-seite .daten{margin-top:var(--s5)}
.verlage a{display:contents}