/* ================= Lokale Schriften (selbst gehostet, kein Google Fonts) ================= */
@font-face{
  font-family:'Cormorant';
  src:url('assets/fonts/cormorant-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Cormorant';
  src:url('assets/fonts/cormorant-latin-wght-italic.woff2') format('woff2-variations');
  font-weight:300 700;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Cinzel';
  src:url('assets/fonts/cinzel-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Hanken Grotesk';
  src:url('assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Hanken Grotesk';
  src:url('assets/fonts/hanken-grotesk-latin-wght-italic.woff2') format('woff2-variations');
  font-weight:100 900;font-style:italic;font-display:swap;
}

  :root{
    --dunkel-grund:#0E1613;
    --dunkel-flaeche:#16211C;
    --dunkel-akzent:#279C72;
    --dunkel-akzent-hell:#6FCBA6;
    --dunkel-text:#ECE7DA;
    --dunkel-muted:#8B958D;
    --hell-grund:#F1EEE5;
    --hell-flaeche:#FBFAF4;
    --hell-akzent:#145C3E;
    --hell-akzent-hell:#3E8A63;
    --hell-text:#17211B;
    --hell-muted:#6B726B;
    --marke:"Cinzel",serif;
    --serif:"Cormorant",Georgia,serif;
    --sans:"Hanken Grotesk",system-ui,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
  body{
    background:var(--dunkel-grund);
    color:var(--dunkel-text);
    font-family:var(--sans);
    font-weight:400;
    line-height:1.7;
    font-size:1.0625rem;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--dunkel-akzent);color:#fff}

  .label{
    font-family:var(--sans);
    font-size:.6875rem;
    font-weight:500;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--dunkel-akzent);
  }
  .hell .label{color:var(--hell-akzent)}
  .label-gross{font-size:.92rem;letter-spacing:.36em}

  /* ---------- Wortmarke (eine Fassung, ueberall gleich) ---------- */
  .wortmarke{
    font-family:var(--marke);
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.34em;
    color:var(--dunkel-text);
  }

  /* ---------- Header ---------- */
  header{
    position:fixed;inset:0 0 auto 0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.3rem clamp(1.25rem,4vw,3.5rem);
    background:transparent;
    transition:background .4s ease, box-shadow .4s ease;
    pointer-events:none;
  }
  header.fest{
    background:rgba(14,22,19,.58);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);
    backdrop-filter:blur(14px) saturate(1.15);
    box-shadow:0 1px 0 rgba(236,231,218,.07);
  }
  header > *{pointer-events:auto}
  .signet{
    display:inline-flex;align-items:center;gap:.9em;
    text-decoration:none;
  }
  .monogramm{
    position:relative;
    font-family:var(--marke);
    font-size:.98rem;font-weight:500;
    letter-spacing:.1em;
    color:var(--dunkel-text);
    padding:.5em .55em .45em .6em;
    line-height:1;
  }
  .monogramm::before{
    content:"";position:absolute;top:0;left:0;
    width:.65em;height:.65em;
    border-top:1px solid var(--dunkel-akzent);
    border-left:1px solid var(--dunkel-akzent);
  }
  .monogramm::after{
    content:"";position:absolute;bottom:0;right:0;
    width:.65em;height:.65em;
    border-bottom:1px solid var(--dunkel-akzent);
    border-right:1px solid var(--dunkel-akzent);
  }
  .signet .wortmarke{font-size:.72rem}
  nav{display:flex;gap:clamp(1rem,2.5vw,2.4rem);align-items:center;flex-wrap:wrap;justify-content:flex-end}
  nav a{
    font-size:.75rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
    color:var(--dunkel-text);text-decoration:none;
    padding-bottom:.25em;border-bottom:1px solid transparent;
    transition:color .25s,border-color .25s;
  }
  nav a:hover{color:var(--dunkel-akzent-hell);border-bottom-color:var(--dunkel-akzent-hell)}
  nav a.extern{color:var(--dunkel-muted);font-weight:400}
  nav a.extern:hover{color:var(--dunkel-akzent-hell)}

  /* ---------- Hero ---------- */
  .hero{
    min-height:100svh;
    position:relative;
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:0;
    align-items:center;
    padding:clamp(6rem,11vh,8.5rem) 0 clamp(3rem,7vh,5rem) clamp(1.25rem,4vw,3.5rem);
    overflow:hidden;
  }
  .hero-text{grid-column:1/8;grid-row:1;position:relative;z-index:3;align-self:center;padding-right:clamp(1rem,3vw,3rem)}
  .hero-bild{
    grid-column:6/13;grid-row:1;
    position:relative;z-index:1;
    align-self:stretch;
  }
  .hero-bild figure{position:relative;height:100%;min-height:80svh;overflow:hidden}
  .hero-bild img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:center 14%;
    filter:saturate(.72) contrast(1.04) brightness(.99);
  }
  /* gruene Tonung */
  .hero-bild figure .ton{
    position:absolute;inset:0;z-index:2;
    background:var(--dunkel-akzent);
    mix-blend-mode:color;opacity:.12;
  }
  /* das warme Licht laeuft ins Dunkel aus — alle Kanten weich */
  .hero-bild figure::after{
    content:"";position:absolute;inset:0;z-index:3;
    background:
      linear-gradient(90deg, var(--dunkel-grund) 0%, rgba(14,22,19,.55) 7%, rgba(14,22,19,0) 24%),
      linear-gradient(to top, var(--dunkel-grund) 0%, rgba(14,22,19,.4) 12%, rgba(14,22,19,0) 34%),
      linear-gradient(to bottom, var(--dunkel-grund) 0%, rgba(14,22,19,.3) 6%, rgba(14,22,19,0) 16%),
      linear-gradient(270deg, rgba(14,22,19,.4) 0%, rgba(14,22,19,0) 10%);
  }
  .hero h1{
    margin:1.4rem 0 0;
    font-size:clamp(1.85rem,3.9vw,3.3rem);
    line-height:1.32;
    font-weight:400;
  }
  .hero h1 span{display:block}
  .rollen{
    font-family:var(--serif);font-style:italic;font-weight:300;
    font-size:clamp(1.05rem,1.9vw,1.35rem);
    color:var(--dunkel-muted);
    margin:1.8rem 0 2rem;
  }
  .hero p.intro{max-width:29em;color:var(--dunkel-text)}
  .hero .weiter{margin-top:2.6rem}

  /* ---------- Textlinks ---------- */
  .pfeillink{
    display:inline-flex;align-items:center;gap:.7em;
    font-size:.78rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
    color:var(--dunkel-akzent);text-decoration:none;
    transition:color .25s;
  }
  .pfeillink .strich{display:inline-block;width:2.6em;height:1px;background:currentColor;transition:width .3s}
  .pfeillink:hover{color:var(--dunkel-akzent-hell)}
  .pfeillink:hover .strich{width:4em}
  .hell .pfeillink{color:var(--hell-akzent)}
  .hell .pfeillink:hover{color:var(--hell-akzent-hell)}

  /* ---------- Sektionskoepfe (ohne Nummern) ---------- */
  .kopf{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:clamp(2rem,5vh,3.2rem)}
  .kopf .linie{flex:1;height:1px;background:currentColor;opacity:.14}

  /* ---------- Saenger-Zwischenzone (dunkel) ---------- */
  .zone{
  /* Inhaltsband: max. 80rem, zentriert — Hintergrund bleibt vollbreit */
  padding-top:clamp(4rem,10vh,7.5rem);
  padding-bottom:clamp(4rem,10vh,7.5rem);
  padding-left:max(clamp(1.25rem,4vw,3.5rem), calc((100% - 80rem)/2 + clamp(1.25rem,4vw,3.5rem)));
  padding-right:max(clamp(1.25rem,4vw,3.5rem), calc((100% - 80rem)/2 + clamp(1.25rem,4vw,3.5rem)));
}
  .saenger .inhalt{
    display:grid;grid-template-columns:repeat(12,1fr);gap:2rem clamp(1rem,2.5vw,2.5rem);
  }
  .saenger .zitat{
    grid-column:2/9;
    font-family:var(--serif);font-weight:400;font-style:italic;
    font-size:clamp(1.3rem,2.5vw,1.8rem);line-height:1.5;
    color:var(--dunkel-text);
  }
  .saenger .zitat .quelle{
    display:block;margin-top:1.1rem;
    font-family:var(--sans);font-style:normal;font-size:.7rem;
    letter-spacing:.28em;text-transform:uppercase;color:var(--dunkel-muted);
  }
  .saenger .verweise{
    grid-column:10/13;align-self:end;
    display:flex;flex-direction:column;gap:1.1rem;
  }
  .saenger .verweise a{
    font-size:.78rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
    color:var(--dunkel-text);text-decoration:none;
    padding:.85em 0;border-bottom:1px solid rgba(236,231,218,.16);
    transition:color .25s,padding-left .3s,border-color .25s;
  }
  .saenger .verweise a:hover{color:var(--dunkel-akzent-hell);border-bottom-color:var(--dunkel-akzent-hell);padding-left:.5em}

  /* ---------- Heller Paedagogen-Bereich ---------- */
  .hell{background:var(--hell-grund);color:var(--hell-text)}
  .paedagoge{padding-top:0;overflow:hidden}
  .paedagoge .kopf{
    padding-top:clamp(4rem,10vh,7.5rem);
    margin-left:calc(52% + clamp(1rem,2.5vw,2.5rem));
  }
  .paedagoge .inhalt{
    display:grid;grid-template-columns:repeat(12,1fr);gap:2.5rem 0;
    align-items:center;
  }
  .paedagoge .bild{grid-column:1/7;grid-row:1;position:relative;z-index:1}
  .paedagoge .bild figure{
    position:relative;
    margin:0 0 0 calc(-1 * clamp(1.25rem,4vw,3.5rem));
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 6%, #000 90%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(90deg, transparent 0, #000 6%, #000 90%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
    mask-composite:intersect;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  .paedagoge .bild img{
    display:block;height:min(74svh, 58rem);width:auto;max-width:100%;object-fit:cover;
    filter:saturate(.8) contrast(1.02);
  }
  .paedagoge .bild figure .ton{
    position:absolute;inset:0;z-index:2;
    background:var(--hell-akzent);
    mix-blend-mode:color;opacity:.1;
  }

  .paedagoge .text{
    grid-column:6/13;grid-row:1;position:relative;z-index:2;
    padding-right:clamp(1.25rem,4vw,3.5rem);
  }
  .paedagoge h2{
    font-family:var(--serif);font-weight:300;
    font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;
    margin:.9rem 0 1.4rem;
    margin-left:calc(-1 * clamp(1.5rem,4vw,4rem));
  }
  .paedagoge h2 em{font-style:italic}
  .paedagoge p{max-width:34em;color:var(--hell-text)}
  .paedagoge .weiter{margin-top:2.2rem}

  .forschungslink{margin-top:1.1rem;font-size:.85rem}
  .forschungslink a{color:var(--hell-muted);text-decoration:none;border-bottom:1px solid rgba(20,92,62,.2);transition:color .25s,border-color .25s}
  .forschungslink a:hover{color:var(--hell-akzent);border-bottom-color:var(--hell-akzent)}
  .termin{
    position:relative;
    margin-top:3rem;
    border:1px solid rgba(20,92,62,.3);
    background:var(--hell-flaeche);
    padding:1.5rem 1.75rem;
    max-width:34em;
  }
  .termin .label{display:block;margin-bottom:.6rem}
  .termin p{font-size:.95rem;color:var(--hell-text);max-width:none}
  .termin a{color:var(--hell-akzent);text-decoration:none;border-bottom:1px solid rgba(20,92,62,.35);transition:color .25s,border-color .25s}
  .termin a:hover{color:var(--hell-akzent-hell);border-bottom-color:var(--hell-akzent-hell)}

  /* ---------- Kontakt (dunkel, neutral) ---------- */
  .kontakt{background:var(--dunkel-grund);color:var(--dunkel-text)}
  .kontakt .inhalt{
    display:grid;grid-template-columns:repeat(12,1fr);gap:2rem clamp(1rem,2.5vw,2.5rem);
    align-items:end;
  }
  .kontakt .gross{grid-column:1/8}
  .kontakt h2{
    font-family:var(--serif);font-weight:300;
    font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.15;margin-top:.9rem;
  }
  .kontakt h2 em{font-style:italic}
  .kontakt .daten{grid-column:9/13;padding-bottom:.4rem}
  .kontakt .mailzeile{margin-top:1.6rem;font-size:.9rem;color:var(--dunkel-muted)}
  .kontakt a.mail{
    color:var(--dunkel-text);text-decoration:none;font-size:.9rem;
    border-bottom:1px solid rgba(39,156,114,.45);padding-bottom:.1em;
    transition:color .25s,border-color .25s;
  }
  .kontakt a.mail:hover{color:var(--dunkel-akzent-hell);border-bottom-color:var(--dunkel-akzent-hell)}

  /* ---------- Footer ---------- */
  footer{
    background:var(--dunkel-grund);color:var(--dunkel-muted);
    padding:2.2rem clamp(1.25rem,4vw,3.5rem) 2.6rem;
    border-top:1px solid rgba(236,231,218,.09);
    display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:baseline;justify-content:space-between;
    font-size:.8rem;
  }
  footer .fnav{display:flex;gap:1.8rem;flex-wrap:wrap}
  footer a{color:var(--dunkel-muted);text-decoration:none;transition:color .25s}
  footer a:hover{color:var(--dunkel-akzent-hell)}

  /* ---------- Einblendung ---------- */
  .blende{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease}
  .blende.sichtbar{opacity:1;transform:none}
  @media (prefers-reduced-motion: no-preference){
    .hero-bild img{animation:herozoom 24s cubic-bezier(.19,.55,.36,1) forwards}
    @keyframes herozoom{from{transform:scale(1.045)}to{transform:scale(1)}}
  }
  @media (prefers-reduced-motion: reduce){
    .blende{opacity:1;transform:none;transition:none}
  }

  /* ---------- Mobil ---------- */
  @media (max-width: 860px){
    header{
      position:static;
      flex-direction:column;align-items:flex-start;gap:1rem;
      padding:1.2rem 1.25rem 1rem;
      background:var(--dunkel-grund);
    }
    nav{gap:.4rem 1.2rem;justify-content:flex-start}
    nav a{font-size:.66rem;letter-spacing:.14em}
    nav a.extern{display:none}
    .hero{
      grid-template-columns:1fr;
      min-height:auto;
      padding:0 1.25rem 3rem;
      gap:0;
    }
    .hero-text{grid-column:1;grid-row:2;padding-right:0;margin-top:-3.4rem}
    .hero-bild{grid-column:1;grid-row:1;margin:0 -1.25rem}
    .hero-bild figure{min-height:0;height:auto}
    .hero-bild img{position:static;width:100%;height:auto;max-height:70svh}
    .hero-bild figure::after{
      background:
        linear-gradient(to bottom, rgba(14,22,19,.4) 0%, rgba(14,22,19,0) 18%, rgba(14,22,19,0) 58%, var(--dunkel-grund) 96%),
        linear-gradient(90deg, rgba(14,22,19,.3) 0%, rgba(14,22,19,0) 16%),
        linear-gradient(270deg, rgba(14,22,19,.3) 0%, rgba(14,22,19,0) 16%);
    }
    .hero h1{font-size:clamp(1.55rem,7vw,2.1rem)}
    .saenger .zitat{grid-column:1/13}
    .saenger .verweise{grid-column:1/13;margin-top:1rem}
    .paedagoge .kopf{margin-left:0}
    .paedagoge .inhalt{grid-template-columns:1fr}
    .paedagoge .bild{grid-column:1;grid-row:1}
    .paedagoge .bild figure{margin:.4rem -1.25rem 0}
    .paedagoge .bild figure::before{top:4.4rem;left:1.6rem}
    .paedagoge .text{grid-column:1;grid-row:2;padding-right:0;margin-top:-2.2rem}
    .paedagoge h2{margin-left:0}
    .kontakt .gross{grid-column:1/13}
    .kontakt .daten{grid-column:1/13}
  }

/* ================= Unterseiten ================= */

/* Seitenkopf (kleinerer Hero) */
.hero--seite{min-height:72svh}
.hero--seite .hero-bild figure{min-height:58svh}
.seitentitel{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.1;
  margin:1rem 0 0;
}
.seitentitel em{font-style:italic}
.hero--seite .rollen{margin:1.4rem 0 0}

/* Seiten-interne Navigation */
.subnav{
  position:sticky;top:4.4rem;z-index:40;
  display:flex;gap:clamp(1.2rem,3vw,2.6rem);flex-wrap:wrap;
  padding:.85rem clamp(1.25rem,4vw,3.5rem);
  background:rgba(14,22,19,.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 1px 0 rgba(236,231,218,.07), 0 -1px 0 rgba(236,231,218,.07);
}
.subnav a{
  font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dunkel-muted);text-decoration:none;
  transition:color .25s;
}
.subnav a:hover{color:var(--dunkel-akzent-hell)}
section[id]{scroll-margin-top:8.6rem}

/* Vita — Lesestrecke */
.lese{
  max-width:65ch;
  background:var(--dunkel-flaeche);
  border:1px solid rgba(236,231,218,.06);
  padding:clamp(1.8rem,4.5vw,3.4rem);
  line-height:1.9;
}
.lese p{margin:0}
.lese p + p{margin-top:1.25em}
.lese a{color:var(--dunkel-akzent-hell);text-decoration:none;border-bottom:1px solid rgba(111,203,166,.35)}
.lese a:hover{border-bottom-color:var(--dunkel-akzent-hell)}

/* Repertoire */
.rep-tabelle{width:100%;max-width:72rem;border-collapse:collapse}
.rep-tabelle th{
  text-align:left;padding:0 .6em 1em 0;
  font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--dunkel-akzent);border-bottom:1px solid rgba(236,231,218,.22);
}
.rep-tabelle td{
  padding:.8em .6em .8em 0;vertical-align:top;
  border-bottom:1px solid rgba(236,231,218,.08);
}
.rep-tabelle td.komponist{width:24%;color:var(--dunkel-muted)}
.rep-tabelle td.werk{width:44%;font-family:var(--serif);font-style:italic;font-size:1.05em}
.rep-tabelle tr:hover td{background:rgba(236,231,218,.025)}

/* Presse */
.produktion{max-width:70ch;margin-bottom:clamp(3rem,7vh,4.5rem)}
.prod-titel{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.4vw,1.7rem);
  margin-bottom:.2rem;
}
.prod-titel em{font-style:italic}
.prod-komponist{
  font-size:.72rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dunkel-muted);
}
.presse-zitat{
  margin:1.7rem 0 0;
  padding-left:1.5rem;
  border-left:1px solid rgba(39,156,114,.5);
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.08rem;line-height:1.75;
  color:var(--dunkel-text);
}
.presse-zitat .quelle{
  display:block;margin-top:.7rem;
  font-family:var(--sans);font-style:normal;font-size:.66rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--dunkel-muted);
}

/* Medien — Galerie */
.galerie{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.2vw,1.8rem);
  max-width:72rem;
}
.kachel{position:relative;overflow:hidden;margin:0}
.kachel img{
  display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.72) contrast(1.03);
  transition:transform 1.6s cubic-bezier(.19,.55,.36,1), filter .8s ease;
}
.kachel .ton{
  position:absolute;inset:0;background:var(--dunkel-akzent);
  mix-blend-mode:color;opacity:.14;transition:opacity .8s ease;
  pointer-events:none;
}
.kachel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 70px 18px rgba(14,22,19,.55);
}
.kachel:hover img{transform:scale(1.025);filter:saturate(.95) contrast(1.02)}
.kachel:hover .ton{opacity:.04}
.kachel figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.2rem 1rem .8rem;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(236,231,218,.85);
  background:linear-gradient(to top, rgba(14,22,19,.75), rgba(14,22,19,0));
}
.galerie--breit .kachel img{aspect-ratio:3/2}

/* Medien — Audio */
.audio-liste{display:grid;gap:1rem;max-width:46rem}
.track{
  border:1px solid rgba(236,231,218,.1);
  background:var(--dunkel-flaeche);
  padding:1.1rem 1.3rem 1.2rem;
}
.track-label{font-size:.95rem;margin-bottom:.7rem;color:var(--dunkel-text)}
.track-label .werk{font-family:var(--serif);font-style:italic}
.track-label .zusatz{color:var(--dunkel-muted);font-size:.85rem}
.track audio{width:100%;height:38px;color-scheme:dark}
.medien-untertitel{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.6vw,1.9rem);
  margin:clamp(3.4rem,8vh,5.5rem) 0 1.6rem;
}
.medien-untertitel em{font-style:italic}

/* Unterseiten mobil */
@media (max-width: 860px){
  .subnav{top:0;gap:.9rem 1.2rem;padding:.75rem 1.25rem}
  section[id]{scroll-margin-top:3.4rem}
  .hero--seite{min-height:auto}
  .hero--seite .hero-bild figure{min-height:0}
  .rep-tabelle thead{display:none}
  .rep-tabelle tr{display:block;padding:.9em 0;border-bottom:1px solid rgba(236,231,218,.1)}
  .rep-tabelle td{display:block;border:none;padding:.08em 0}
  .rep-tabelle td.komponist{width:auto;font-size:.8rem;letter-spacing:.06em}
  .rep-tabelle td.werk{width:auto}
  .galerie{grid-template-columns:repeat(2,1fr)}
  .galerie--breit{grid-template-columns:1fr}
}


/* ================= Aufgeteilter Opernsaenger-Bereich ================= */

/* Unterseiten: Header statisch, Bereichsnav ist die eine klebende Leiste */
body.unterseite header{position:static;background:var(--dunkel-grund)}

.bereichsnav{
  position:sticky;top:0;z-index:45;
  display:flex;gap:clamp(1.1rem,2.6vw,2.6rem);flex-wrap:wrap;align-items:baseline;
  padding:1.05rem max(clamp(1.25rem,4vw,3.5rem), calc((100% - 80rem)/2 + clamp(1.25rem,4vw,3.5rem)));
  background:rgba(14,22,19,.85);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid rgba(39,156,114,.22);
  border-bottom:1px solid rgba(39,156,114,.22);
}
.bereichsnav a{
  font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dunkel-text);text-decoration:none;
  padding-bottom:.35em;border-bottom:2px solid transparent;
  transition:color .25s,border-color .25s;
}
.bereichsnav a:hover{color:var(--dunkel-akzent-hell);border-bottom-color:rgba(111,203,166,.5)}
.bereichsnav a[aria-current="page"]{color:var(--dunkel-akzent-hell);border-bottom-color:var(--dunkel-akzent)}

/* Kopfbereich Uebersicht: Portraet vollstaendig, Titel auf dunklem Grund */
.werkkopf{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:2rem clamp(1rem,2.5vw,2.5rem);
  align-items:center;
  padding:clamp(2.5rem,6vh,4.5rem) clamp(1.25rem,4vw,3.5rem);
}
.werkkopf .text{grid-column:1/7}
.werkkopf .bild{grid-column:7/13;display:flex;justify-content:center}
.werkkopf .bild figure{position:relative;margin:0}
.werkkopf .bild img{
  display:block;max-height:76svh;width:auto;max-width:100%;
  filter:saturate(.78) contrast(1.03);
}
.werkkopf .bild .ton{
  position:absolute;inset:0;background:var(--dunkel-akzent);
  mix-blend-mode:color;opacity:.1;pointer-events:none;
}
/* Federkante — weiches Auslaufen NUR in den leeren Randzonen
   (rechts minimal, da die Figur bis an den Bildrand reicht) */
.werkkopf .bild figure{
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,.25) 12%, rgba(0,0,0,.7) 24%, #000 38%, #000 99.2%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 91%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,.25) 12%, rgba(0,0,0,.7) 24%, #000 38%, #000 99.2%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 91%, transparent 100%);
  mask-composite:intersect;
}

/* Anrisse auf der Uebersicht */
.anrisse{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.5vw,2rem);
  max-width:72rem;
}
.anriss{
  display:block;text-decoration:none;
  border:1px solid rgba(236,231,218,.12);
  background:var(--dunkel-flaeche);
  padding:1.7rem 1.8rem 1.5rem;
  transition:border-color .3s, background .3s, transform .5s cubic-bezier(.19,.55,.36,1);
}
.anriss:hover{border-color:rgba(39,156,114,.55);transform:translateY(-2px)}
.anriss .label{display:block;margin-bottom:.7rem}
.anriss p{color:var(--dunkel-muted);font-size:.98rem;margin-bottom:1.2rem}
.anriss .pfeillink{pointer-events:none}

/* Vita — eingebettete Lesespalte, mittig */
.lesespalte{
  max-width:66ch;margin:0 auto;
  font-size:1.09rem;line-height:1.9;
}
.lesespalte p{margin:0}
.lesespalte p + p{margin-top:1.35em}
.lesespalte a{color:var(--dunkel-akzent-hell);text-decoration:none;border-bottom:1px solid rgba(111,203,166,.35)}
.lesespalte a:hover{border-bottom-color:var(--dunkel-akzent-hell)}

/* Presse — zweispaltig, Breite nutzen */
.presse-grid{
  columns:2;column-gap:clamp(3rem,6vw,6rem);
  max-width:84rem;
}
.presse-grid .produktion{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:clamp(2.5rem,5vh,4rem);max-width:none;
}

/* Fotos — Masonry, Seitenverhaeltnisse respektieren */
.masonry{columns:3;column-gap:clamp(1rem,2.2vw,1.8rem);max-width:80rem}
.masonry .kachel{
  display:inline-block;width:100%;margin:0 0 clamp(1rem,2.2vw,1.8rem);
  break-inside:avoid;cursor:zoom-in;border:0;background:none;padding:0;text-align:left;
}
.masonry .kachel img{
  aspect-ratio:auto;height:auto;
}
.masonry .kachel::after{content:none}
.masonry .kachel figcaption{
  position:static;background:none;
  padding:.4rem .2rem 0;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dunkel-muted);
}

/* Lightbox */
.lightbox{
  border:none;padding:0;margin:auto;
  background:rgba(14,22,19,.96);
  max-width:min(94vw,1400px);max-height:94vh;
  outline:none;
}
.lightbox::backdrop{background:rgba(14,22,19,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox img{display:block;max-width:min(92vw,1360px);max-height:82vh;width:auto;height:auto;margin:0 auto}
.lightbox .lb-leiste{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.8rem 1rem;
}
.lightbox .lb-titel{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dunkel-muted)}
.lightbox button{
  background:none;border:1px solid rgba(236,231,218,.25);color:var(--dunkel-text);
  font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;
  padding:.45em .9em;cursor:pointer;transition:border-color .25s,color .25s;
}
.lightbox button:hover{border-color:var(--dunkel-akzent-hell);color:var(--dunkel-akzent-hell)}

@media (max-width: 980px){
  .presse-grid{columns:1}
  .masonry{columns:2}
}
@media (max-width: 860px){
  body.unterseite header{position:static}
  .bereichsnav{gap:.8rem 1.1rem;padding:.8rem 1.25rem}
  .bereichsnav a{font-size:.66rem;letter-spacing:.14em}
  .werkkopf{grid-template-columns:1fr;padding-top:1rem}
  .werkkopf .text{grid-column:1;order:2}
  .werkkopf .bild{grid-column:1;order:1}
  .werkkopf .bild img{max-height:70svh}
  .anrisse{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .masonry{columns:1}
}


/* ================= Vitakopf — ruhig, eine Lesespalte ================= */
.vitakopf{
  position:relative;
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:0 clamp(1rem,2.5vw,2.5rem);
  padding:clamp(.5rem,1.5vh,1rem) 0 0 clamp(1.25rem,4vw,3.5rem);
  overflow:hidden;
}
.vitakopf .titel{
  grid-column:1/6;grid-row:1;align-self:start;z-index:2;
  padding-top:clamp(1.5rem,4vh,3rem);
  padding-bottom:0;
}
.vitakopf .titel .rollen{margin:1.6rem 0 0;max-width:26em}
.vitakopf .bild{grid-column:6/13;grid-row:1;justify-self:end;position:relative;z-index:1;min-width:0}
.vitakopf .bild figure{position:relative;margin:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  /* Federkante an allen Kanten — links breit, unten besonders weich, rechts fast scharf */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,.16) 11%, rgba(0,0,0,.55) 24%, #000 42%, #000 99.3%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 82%, rgba(0,0,0,.45) 93%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0,0,0,.16) 11%, rgba(0,0,0,.55) 24%, #000 42%, #000 99.3%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 82%, rgba(0,0,0,.45) 93%, transparent 100%);
  mask-composite:intersect;
}
.vitakopf .bild img{
  display:block;height:min(74svh, 58rem);width:auto;max-width:100%;
  filter:saturate(.78) contrast(1.03);
}
.vitakopf .bild .ton{
  position:absolute;inset:0;background:var(--dunkel-akzent);
  mix-blend-mode:color;opacity:.1;pointer-events:none;
}
/* Lesespalte ueberlappt den zerfliessenden unteren Bildrand */
.vita-lese{
  position:relative;z-index:2;
  padding-top:0;
  margin-top:calc(-1 * clamp(8rem,30svh,21rem));
}
.vita-lese .lesespalte{position:relative}
/* dezenter Scrim unter den ueberlappenden Zeilen */
.vita-lese .lesespalte::before{
  content:"";position:absolute;z-index:-1;
  top:-5rem;left:-9rem;right:-9rem;height:24rem;
  background:radial-gradient(ellipse closest-side at 50% 52%, rgba(14,22,19,.92) 0%, rgba(14,22,19,.78) 42%, rgba(14,22,19,.4) 70%, rgba(14,22,19,0) 100%);
  pointer-events:none;
}

@media (max-width: 860px){
  .vitakopf{grid-template-columns:1fr;padding:1rem 1.25rem 0}
  .vitakopf .titel{grid-column:1;grid-row:1;align-self:start;padding:0 0 .5rem}
  .vitakopf .bild{grid-column:1;grid-row:2;justify-self:center;margin:.8rem -1.25rem 0}
  .vitakopf .bild img{height:auto;width:100%;max-height:74svh;object-fit:cover}
  .vitakopf .bild figure{
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 9%, #000 100%),
      linear-gradient(180deg, transparent 0, #000 6%, #000 80%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(90deg, transparent 0, #000 9%, #000 100%),
      linear-gradient(180deg, transparent 0, #000 6%, #000 80%, transparent 100%);
    mask-composite:intersect;
  }
  .vita-lese{margin-top:0;padding-top:0}
  .vita-lese .lesespalte::before{content:none}
}


/* ================= Heller Seitenmodus (Der Gesangspaedagoge) ================= */
body.hell{background:var(--hell-grund);color:var(--hell-text)}
body.hell ::selection{background:var(--hell-akzent);color:#fff}
body.hell header{background:var(--hell-grund)}
body.hell .monogramm,body.hell .signet .wortmarke{color:var(--hell-text)}
body.hell .monogramm::before,body.hell .monogramm::after{border-color:var(--hell-akzent)}
body.hell header nav a{color:var(--hell-text)}
body.hell header nav a:hover{color:var(--hell-akzent-hell);border-bottom-color:var(--hell-akzent-hell)}
body.hell .bereichsnav{
  background:rgba(241,238,229,.9);
  border-top-color:rgba(20,92,62,.25);border-bottom-color:rgba(20,92,62,.25);
}
body.hell .bereichsnav a{color:var(--hell-muted)}
body.hell .bereichsnav a:hover{color:var(--hell-akzent-hell);border-bottom-color:rgba(62,138,99,.5)}
body.hell footer{background:var(--hell-grund);color:var(--hell-muted);border-top:1px solid rgba(23,33,27,.12)}
body.hell footer a{color:var(--hell-muted)}
body.hell footer a:hover{color:var(--hell-akzent)}
body.hell .seitentitel{color:var(--hell-text)}
body.hell .rollen{color:var(--hell-muted)}
body.hell .lesespalte a{color:var(--hell-akzent);border-bottom:1px solid rgba(20,92,62,.3);text-decoration:none}
body.hell .lesespalte a:hover{border-bottom-color:var(--hell-akzent)}
body.hell .vitakopf .ton{background:var(--hell-akzent);opacity:.07}
body.hell .vita-lese .lesespalte::before{
  background:radial-gradient(ellipse closest-side at 50% 52%, rgba(241,238,229,.94) 0%, rgba(241,238,229,.8) 42%, rgba(241,238,229,.4) 70%, rgba(241,238,229,0) 100%);
}

/* Angebot (Unterricht) */
.angebot{max-width:70ch;margin:0;padding:0}
.angebot > div{
  display:grid;grid-template-columns:minmax(11rem,15rem) 1fr;gap:1rem 2rem;
  padding:1.35rem 0;border-bottom:1px solid rgba(23,33,27,.1);
}
.angebot dt{
  font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hell-akzent);padding-top:.2em;
}
.angebot dd{margin:0;color:var(--hell-text)}
.konditionen{margin-top:1.8rem;color:var(--hell-muted);font-size:.95rem}

/* Stimmbildungs-Foto im Unterricht */
.stimmbild{position:relative;max-width:44rem;margin:clamp(2rem,5vh,3rem) 0 0}
.stimmbild img{display:block;width:100%;height:auto;filter:saturate(.9)}


/* Publikationen */
.pubs{list-style:none;max-width:70ch;margin:0;padding:0}
.pubs li{
  padding:.2rem 0 .2rem 1.5rem;margin:1.2rem 0;
  border-left:1px solid rgba(20,92,62,.45);
  color:var(--hell-text);
}
.pubs li em{font-family:var(--serif)}

/* Forschungs-Verweiskarte */
.forschungskarte{
  position:relative;
  margin-top:2.5rem;max-width:70ch;
  border:1px solid rgba(20,92,62,.3);background:var(--hell-flaeche);
  padding:1.6rem 1.8rem;
}
.forschungskarte::before{content:"";position:absolute;top:-1px;left:-1px;width:1.2rem;height:1.2rem;border-top:2px solid var(--hell-akzent);border-left:2px solid var(--hell-akzent)}
.forschungskarte::after{content:"";position:absolute;bottom:-1px;right:-1px;width:1.2rem;height:1.2rem;border-bottom:2px solid var(--hell-akzent);border-right:2px solid var(--hell-akzent)}
.forschungskarte p{margin:0 0 1.1rem;color:var(--hell-text)}

@media (max-width: 700px){
  .angebot > div{grid-template-columns:1fr;gap:.35rem}
}


/* ================= Cormorant-Variante & Paedagogen-Feinbau ================= */
.seitentitel{font-weight:500;letter-spacing:.005em}
.medien-untertitel{font-weight:500}
body.links-buendig .lesespalte{margin-left:0;margin-right:auto}

/* Masterclass-Plakat */
.plakat{
  position:relative;
  max-width:70ch;
  background:var(--hell-flaeche);
  border:1px solid rgba(20,92,62,.4);
  padding:clamp(2rem,4.5vw,3.2rem);
  margin-top:0;
}
.plakat::before,.plakat::after{
  content:"";position:absolute;width:1.6rem;height:1.6rem;
}
.plakat::before{top:-1px;left:-1px;border-top:3px solid var(--hell-akzent);border-left:3px solid var(--hell-akzent)}
.plakat::after{bottom:-1px;right:-1px;border-bottom:3px solid var(--hell-akzent);border-right:3px solid var(--hell-akzent)}
.plakat .p-ueber{display:block;margin-bottom:1rem}
.plakat .p-titel{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.12;
  margin:0 0 .4rem;color:var(--hell-text);
}
.plakat .p-untertitel{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.05rem,1.9vw,1.3rem);color:var(--hell-muted);
  margin:0 0 1.4rem;
}
.plakat .p-daten{
  font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hell-akzent);line-height:2;
  margin:0 0 1.4rem;
}
.plakat p{color:var(--hell-text);margin:0}
.plakat p + p{margin-top:.9rem}
.plakat a{color:var(--hell-akzent);text-decoration:none;border-bottom:1px solid rgba(20,92,62,.35)}
.plakat a:hover{color:var(--hell-akzent-hell);border-bottom-color:var(--hell-akzent-hell)}

/* Rebay-Vorstellung, sekundaer */
.nebentext{
  max-width:70ch;margin-top:1.6rem;
  font-size:.92rem;line-height:1.75;color:var(--hell-muted);
}
.nebentext a{color:var(--hell-akzent);text-decoration:none;border-bottom:1px solid rgba(20,92,62,.3)}
.nebentext a:hover{border-bottom-color:var(--hell-akzent)}

/* Buch mit Cover */
.buch-grid{
  display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;
  gap:clamp(1.5rem,3vw,2.5rem);align-items:start;
  max-width:76ch;
}
.buch-grid img{display:block;width:100%;height:auto;box-shadow:0 10px 30px rgba(23,33,27,.18)}
.buch-grid p{margin:0;color:var(--hell-text)}

/* Foto mit Bildunterschrift (Maske nur auf dem Bild) */
.stimmbild img{
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-composite:intersect;
}
.stimmbild figcaption{
  margin-top:.4rem;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hell-muted);
}

@media (max-width: 700px){
  .buch-grid{grid-template-columns:minmax(7rem,9rem) 1fr;gap:1.2rem}
}


/* ================= Mittige Spaltenlogik (Paedagogen-Unterseiten) ================= */
.mittig{max-width:66ch;margin-left:auto;margin-right:auto}
.mittig .plakat,.mittig .nebentext,.mittig .pubs,.mittig .buch-grid,.mittig .forschungskarte{max-width:none}
.plakat{margin-top:0;margin-bottom:clamp(2rem,5vh,3rem)}


/* ================= Kontaktformular ================= */
.formular{max-width:66ch;margin:0 auto}
.einladung{max-width:66ch;margin:0 auto clamp(2rem,5vh,3rem)}
.feld{margin-bottom:1.5rem}
.feld label{
  display:block;margin-bottom:.5rem;
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hell-akzent);
}
.feld .optional{color:var(--hell-muted);font-weight:400;letter-spacing:.12em;text-transform:none}
.feld input,.feld textarea{
  width:100%;
  font-family:var(--sans);font-size:1.02rem;color:var(--hell-text);
  background:var(--hell-flaeche);
  border:1px solid rgba(23,33,27,.28);
  padding:.85em 1em;
  border-radius:0;
  transition:border-color .25s;
}
.feld input:hover,.feld textarea:hover{border-color:rgba(23,33,27,.45)}
.feld input:focus-visible,.feld textarea:focus-visible{
  outline:2px solid var(--hell-akzent);outline-offset:1px;
  border-color:var(--hell-akzent);
}
.feld textarea{min-height:11rem;resize:vertical}
/* Honigtopf — fuer Menschen unsichtbar */
.hp-feld{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.senden{
  display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:#fff;background:var(--hell-akzent);
  border:1px solid var(--hell-akzent);
  padding:1em 2.2em;cursor:pointer;
  transition:background .25s,border-color .25s;
}
.senden:hover{background:var(--hell-akzent-hell);border-color:var(--hell-akzent-hell)}
.senden:focus-visible{outline:2px solid var(--hell-text);outline-offset:2px}
.ds-hinweis{
  margin-top:1.2rem;font-size:.85rem;color:var(--hell-muted);max-width:60ch;
}
.ds-hinweis a{color:var(--hell-akzent);text-decoration:none;border-bottom:1px solid rgba(20,92,62,.3)}
.ds-hinweis a:hover{border-bottom-color:var(--hell-akzent)}
.mail-klein{
  margin-top:clamp(2.5rem,6vh,4rem);
  font-size:.9rem;color:var(--hell-muted);
}
.mail-klein a{color:var(--hell-text);text-decoration:none;border-bottom:1px solid rgba(20,92,62,.4);transition:color .25s,border-color .25s}
.mail-klein a:hover{color:var(--hell-akzent);border-bottom-color:var(--hell-akzent)}


/* Formular-Meldungen */
.form-meldung{
  margin:0 0 1.6rem;padding:1rem 1.3rem;
  font-size:.95rem;
  border:1px solid rgba(20,92,62,.4);
  background:var(--hell-flaeche);color:var(--hell-text);
}
.form-fehler{border-color:rgba(160,60,40,.5)}


/* ================= Grosse Bildschirme: proportionale Skalierung =================
   Das gesamte Layout basiert auf rem — eine groessere Wurzelschriftgroesse
   skaliert Band, Typografie und Abstaende gemeinsam, statt Leerraum zu erzeugen. */
@media (min-width: 1700px){
  html{font-size:18px}
}
@media (min-width: 2100px){
  html{font-size:20px}
}
@media (min-width: 2600px){
  html{font-size:23px}
}


/* ================= Nach-oben-Pfeil ================= */
.nach-oben{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:60;
  width:2.9rem;height:2.9rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:1.15rem;line-height:1;
  background:rgba(14,22,19,.72);color:var(--dunkel-akzent-hell);
  border:1px solid rgba(39,156,114,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s,border-color .25s,color .25s;
}
.nach-oben.da{opacity:1;visibility:visible;transform:none}
.nach-oben:hover{color:#fff;border-color:var(--dunkel-akzent-hell)}
.nach-oben:focus-visible{outline:2px solid var(--dunkel-akzent-hell);outline-offset:2px}
body.hell .nach-oben{
  background:rgba(241,238,229,.85);color:var(--hell-akzent);
  border-color:rgba(20,92,62,.45);
}
body.hell .nach-oben:hover{color:var(--hell-akzent-hell);border-color:var(--hell-akzent-hell)}
@media (prefers-reduced-motion: reduce){
  .nach-oben{transition:none;transform:none}
}


/* ================= Dezente Parallaxe im Seitenkopf ================= */
.vitakopf .bild img.parallax{
  transform:scale(1.16);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .vitakopf .bild img.parallax{transform:none;will-change:auto}
}


/* Paedagogen-Kopf: sanfterer Textzug (mehr Luft unter dem Untertitel) */
.vita-lese.sanfter-zug{margin-top:calc(-1 * clamp(4rem,12svh,8rem))}


/* Bildpaar (z. B. Seoul) */
.foto-paar{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1rem,2.5vw,2rem);
  margin-top:clamp(2rem,5vh,3rem);
}
.foto-paar figure{margin:0;cursor:zoom-in}
.foto-paar img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.88);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
  mask-composite:intersect;
}
.foto-paar figcaption{
  margin-top:.2rem;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hell-muted);
}
@media (max-width: 700px){
  .foto-paar{grid-template-columns:1fr}
}


/* ================= Eigener Audio-Player ================= */
.track audio{display:none}
.player{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.2rem)}
.p-knopf{
  flex:0 0 2.7rem;width:2.7rem;height:2.7rem;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(39,156,114,.55);
  color:var(--dunkel-text);cursor:pointer;
  transition:border-color .25s,color .25s;
}
.p-knopf:hover{border-color:var(--dunkel-akzent-hell);color:var(--dunkel-akzent-hell)}
.p-knopf:focus-visible{outline:2px solid var(--dunkel-akzent-hell);outline-offset:2px}
.p-knopf svg{width:.95rem;height:.95rem;fill:currentColor}
.p-balken{position:relative;flex:1;height:16px;cursor:pointer}
.p-balken::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:rgba(236,231,218,.16)}
.p-fortschritt{position:absolute;left:0;top:7px;height:2px;width:0;background:var(--dunkel-akzent);pointer-events:none}
.p-zeit{
  flex:0 0 auto;font-family:var(--serif);font-size:.98rem;
  color:var(--dunkel-muted);font-variant-numeric:tabular-nums;
}
.welle{flex:0 0 4.6rem;height:20px;overflow:hidden;opacity:.3;transition:opacity .5s}
.welle svg{display:block;width:200%;height:100%}
.track.laeuft .welle{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .welle svg{animation:wellenzug 3s linear infinite;animation-play-state:paused}
  .track.laeuft .welle svg{animation-play-state:running}
  @keyframes wellenzug{to{transform:translateX(-50%)}}
}
@media (max-width: 700px){ .welle{display:none} }

/* ================= Auftritt & Aufgluehen & Akzente ================= */
@media (prefers-reduced-motion: no-preference){
  .hero h1.wortmarke{animation:auftritt 2.4s cubic-bezier(.19,.6,.28,1) both}
  @keyframes auftritt{
    0%{opacity:0;letter-spacing:.16em}
    35%{opacity:1}
    100%{opacity:1;letter-spacing:.34em}
  }
  .hero-bild.blende img,.vitakopf .bild.blende img{transition:filter 1.5s ease, transform .1s linear}
  .hero-bild.blende:not(.sichtbar) img{filter:saturate(.25) brightness(.45)}
  .vitakopf .bild.blende:not(.sichtbar) img{filter:saturate(.25) brightness(.55)}
  .buch-grid img{transition:transform .5s ease}
  .buch-grid img:hover{transform:perspective(900px) rotateY(-5deg) translateY(-2px)}
}
.saenger .zitat{transition:opacity .8s ease;min-height:7.5em}


/* Dunkler Abschnitt innerhalb heller Seiten (english.html Biography) */
.abschnitt-dunkel{background:var(--dunkel-grund);color:var(--dunkel-text)}
.abschnitt-dunkel .label{color:var(--dunkel-akzent)}
.abschnitt-dunkel .lesespalte{color:var(--dunkel-text)}
.abschnitt-dunkel .lesespalte a{color:var(--dunkel-akzent-hell);border-bottom:1px solid rgba(111,203,166,.35)}


/* Terminkarte: Eckwinkel wie Plakat/Forschungskarte */
.termin::before{content:"";position:absolute;top:-1px;left:-1px;width:1.2rem;height:1.2rem;border-top:2px solid var(--hell-akzent);border-left:2px solid var(--hell-akzent)}
.termin::after{content:"";position:absolute;bottom:-1px;right:-1px;width:1.2rem;height:1.2rem;border-bottom:2px solid var(--hell-akzent);border-right:2px solid var(--hell-akzent)}

/* Kontakt: E-Mail-Zeile buendig zur Formularkante */
.mail-klein{max-width:66ch;margin-left:auto;margin-right:auto;text-align:left}


/* Buehnenfotos: harte Kanten, volles Theaterlicht (Portraits behalten die Feder) */
.masonry--buehne .kachel img{
  -webkit-mask-image:none;mask-image:none;
  filter:none;
}
.masonry--buehne .kachel:hover img{filter:none}

/* Vita: Zwischentitel + eingebettetes Bild */
.lese-zh{
  font-family:var(--serif);font-weight:500;
  font-size:1.5rem;line-height:1.2;
  margin:2.4em 0 .9em;
  color:var(--dunkel-text);
}
.lese-zh em{font-style:italic}
.lesespalte .lese-zh + p{margin-top:0}
.vita-bild{margin:2.8em 0;position:relative}
.vita-bild img{
  display:block;width:100%;height:auto;
  filter:saturate(.8);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* Initiale (Buchseiten-Moment im hellen Bereich) */
.initiale::first-letter{
  font-family:var(--serif);font-weight:500;
  font-size:3.6em;line-height:.8;
  float:left;padding:.06em .14em 0 0;
  color:var(--hell-akzent);
}
body:not(.hell) .initiale::first-letter{color:var(--dunkel-akzent)}

/* Tagline-Kontrast auf dunklem Grund anheben */
.rollen{color:#A3ADA5}
body.hell .rollen{color:var(--hell-muted)}