/* ==========================================================================
   Munich Souls — Showpiece-Bereiche und Spezialkomponenten
   ========================================================================== */

/* ==========================================================================
   SHOWPIECE 1 — Hero "Klangfeld"
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--paper);
}

/* Canvas-Ebene: reiner Hintergrund, kennt keinen Inhalt */
.hero__canvas {
  position: absolute;
  inset: -10% -5% auto -5%;
  /* gedeckelt: auf schmalen Schirmen wird der Hero sonst so hoch, dass die
     Flaeche pro Bild unnoetig teuer zu zeichnen ist */
  height: min(78%, 820px);
  z-index: 0;
  pointer-events: none;
  opacity: .85;
  transition: opacity .8s var(--ease);
}
.hero__canvas.is-listening { opacity: 1; }
.hero__canvas canvas { display: block; width: 100%; height: 100%; }

/* Kopfbereich: Text links, Einladungskarte rechts daneben */
.hero__inner {
  position: relative; z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.hero__content {
  flex: 1 1 min(500px, 100%);
  max-width: 40rem;
  min-width: 0;
  position: relative;
}
/* Weicher Papierschleier, damit der Text vor dem Farbfeld ruhig steht */
.hero__content::before {
  content: "";
  position: absolute;
  inset: -12% -16% -8% -18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 66% 56% at 36% 46%,
              rgba(251, 247, 240, .92) 0%,
              rgba(251, 247, 240, .72) 40%,
              rgba(251, 247, 240, .34) 64%,
              transparent 80%);
}

.hero-headline {
  font-size: var(--fs-hero);
  line-height: .98;
  letter-spacing: -.035em;
  margin-bottom: 1.1rem;
}
.hero-headline em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  display: block;
  background: linear-gradient(100deg, var(--c-magenta), var(--c-violet) 22%, var(--c-blue) 44%, var(--c-teal) 63%, var(--c-green) 78%, var(--c-orange) 92%, var(--c-red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { max-width: 34rem; margin-bottom: 2rem; }
.hero-actions { margin-top: 1.9rem; }

/* Audioplayer für den Chorsong */
.hero-player {
  display: flex; align-items: center; gap: 1.1rem;
  flex-wrap: wrap;
  max-width: 34rem;
  padding: 1.1rem 1.35rem;
  background: rgba(251,247,240,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: var(--shadow-s);
}
.hero-player__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-magenta), var(--c-orange));
  color: #fff;
}
.hero-player__icon svg { width: 20px; height: 20px; }
.hero-player__meta {
  flex: 1 1 150px; min-width: 0;
  display: flex; flex-direction: column; gap: .1rem;
}
.hero-player__title {
  display: block;
  font-size: .93rem; font-weight: 650; line-height: 1.25;
}
.hero-player__note {
  display: block;
  font-size: .76rem; line-height: 1.35;
  color: var(--ink-faint);
}
.hero-player audio {
  flex: 1 1 230px;
  min-width: 200px;
  height: 38px;
}
@media (max-width: 520px) {
  .hero-player { border-radius: var(--radius); }
  .hero-player audio { flex-basis: 100%; width: 100%; }
}

/* Bühne: das Konzertfoto allein, mittig und in doppelter Größe.
   Der Rahmen darf dafür breiter werden als der übrige Satzspiegel. */
.hero__stage {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.hero__stage.wrap { max-width: 1392px; }
.hero-photo {
  margin: 0 auto;
  max-width: 1296px;
}
/* Der Rahmen trägt Rundung, Schatten und Beschnitt. Beim ersten Erscheinen
   fährt er in zwei Sekunden von einem Drittel auf volle Größe heran. Der
   Platz ist von Anfang an reserviert, weil transform den Umbruch nicht
   beeinflusst — die Seite springt also nicht. */
.hero-photo__rahmen {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-l);
  transform: scale(.3333);
  transform-origin: 50% 50%;
  transition: transform 2s cubic-bezier(.22, .61, .36, 1);
}
.hero-photo.ms-eingezoomt .hero-photo__rahmen { transform: scale(1); }
.hero-photo img { width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .hero-photo__rahmen { transform: none; transition: none; }
}
/* Beschriftung unter dem Foto statt darüber — so bleibt der Chor
   bis zur letzten Reihe unverdeckt. */
.hero-photo figcaption {
  margin-top: .85rem;
  padding-inline: .25rem;
  font-size: 1.68rem;
  color: var(--ink-faint);
}

/* Kompakte Einladungskarte neben dem Hero-Text */
.hero-invite {
  flex: 0 1 min(320px, 100%);
  min-width: 0;
  padding: 1.5rem 1.45rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-l);
}
.hero-invite__title {
  color: var(--paper);
  font-size: 1.22rem;
  margin-bottom: .45rem;
}
.hero-invite__text {
  color: rgba(251,247,240,.75);
  font-size: .85rem;
  line-height: 1.55;
  margin-bottom: 1.1rem;
}
.hero-invite__list {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; flex-direction: column; gap: .5rem;
  font-size: .82rem; line-height: 1.4; color: rgba(251,247,240,.85);
}
.hero-invite__list li { display: flex; align-items: flex-start; gap: .55rem; }
.hero-invite__list svg {
  width: 15px; height: 15px; flex: none; color: var(--c-gold);
  margin-top: .18rem;
}
.hero-invite .btn { padding: .78rem 1.35rem; font-size: .88rem; }

/* Unter ~900px rutscht die Karte unter den Text und nimmt die volle Breite */
@media (max-width: 899px) {
  .hero-invite { flex-basis: 100%; }
}

/* ==========================================================================
   SHOWPIECE 2 — Chronik
   ========================================================================== */
.chronik {
  position: relative;
  background: var(--ink);
  color: var(--paper);
}
.chronik__viewport {
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.chronik.is-pinned .chronik__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 0;
}

.chronik__head {
  padding-inline: var(--gutter);
  max-width: var(--wrap);
  margin-inline: auto;
  width: 100%;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.chronik__head h2 { color: var(--paper); margin-bottom: .5rem; }
.chronik__head .lead { color: rgba(251,247,240,.7); }
.chronik__hint {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem;
  font-size: .82rem; color: rgba(251,247,240,.55);
}
.chronik__hint svg { width: 18px; height: 18px; }

.chronik__track {
  display: flex;
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  will-change: transform;
}
/* Im gepinnten Zustand setzt chronik.js das Polster so, dass erste und
   letzte Station die Bildmitte erreichen. */
.chronik.is-pinned .chronik__track {
  padding-inline: var(--chronik-pad, var(--gutter));
}
/* Ohne Pinning: normales waagerechtes Scrollen mit Einrasten */
.chronik:not(.is-pinned) .chronik__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.25rem;
  -webkit-overflow-scrolling: touch;
}
.chronik:not(.is-pinned) .chronik-station { scroll-snap-align: center; }

.chronik-station {
  flex: none;
  width: clamp(280px, 32vw, 400px);
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem 1.7rem;
  background: rgba(251,247,240,.055);
  border: 1px solid rgba(251,247,240,.13);
  border-radius: var(--radius);
  opacity: .38;
  transform: translateY(18px) scale(.965);
  transition: opacity .55s var(--ease), transform .55s var(--ease),
              background .55s var(--ease), border-color .55s var(--ease);
}
.chronik-station.is-near { opacity: .72; transform: translateY(6px) scale(.985); }
.chronik-station.is-active {
  opacity: 1;
  transform: none;
  background: rgba(251,247,240,.1);
  border-color: color-mix(in srgb, var(--station-color, var(--c-gold)) 55%, transparent);
  box-shadow: 0 20px 60px rgba(0,0,0,.34);
}
.chronik:not(.is-pinned) .chronik-station { opacity: 1; transform: none; }

.chronik-station__year {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  color: var(--station-color, var(--c-gold));
  margin-bottom: .2rem;
}
.chronik-station__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--station-color, var(--c-gold));
  margin-bottom: 1rem;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--station-color, var(--c-gold)) 22%, transparent);
}
.chronik-station__title {
  color: var(--paper);
  font-size: 1.2rem;
  margin-bottom: .5rem;
}
.chronik-station__text {
  color: rgba(251,247,240,.68);
  font-size: .89rem;
  margin: 0;
}
.chronik-station__media {
  margin: 0 0 1.15rem;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(251,247,240,.07);
}
.chronik-station__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  opacity: .88;
  transition: opacity .55s var(--ease);
}
.chronik-station.is-active .chronik-station__media img { opacity: 1; }

/* Fortschrittsfaden */
.chronik__progress {
  position: relative;
  height: 3px;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  max-width: var(--wrap);
  width: calc(100% - var(--gutter) * 2);
  background: rgba(251,247,240,.14);
  border-radius: 3px;
  overflow: hidden;
}
.chronik__progress-bar {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--c-red), var(--c-orange), var(--c-gold), var(--c-green), var(--c-teal), var(--c-blue), var(--c-violet), var(--c-magenta));
  transform-origin: left;
  transform: scaleX(0);
}
.chronik__counter {
  max-width: var(--wrap);
  width: calc(100% - var(--gutter) * 2);
  margin: .85rem auto 0;
  font-size: .8rem;
  letter-spacing: .12em;
  color: rgba(251,247,240,.5);
  font-variant-numeric: tabular-nums;
}
.chronik:not(.is-pinned) .chronik__progress,
.chronik:not(.is-pinned) .chronik__counter { display: none; }

/* ==========================================================================
   SHOWPIECE 3 — Plakatwand
   ========================================================================== */
.plakatwand {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  perspective: 1400px;
}
.plakat-card {
  flex: 1 1 min(270px, 100%);
  max-width: 360px;
  display: flex; flex-direction: column;
  background: none; border: 0; padding: 0;
  text-align: left;
  cursor: zoom-in;
  transform: translateY(var(--drift, 0px));
  transition: transform .2s linear;
}
.plakat-card__frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow: var(--shadow-m);
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    rotate(var(--tilt-base, 0deg));
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.plakat-card:hover .plakat-card__frame,
.plakat-card:focus-visible .plakat-card__frame {
  box-shadow: 0 30px 70px rgba(30,24,54,.28);
  transition: transform .12s linear, box-shadow .45s var(--ease);
}
/* Kein fester Zuschnitt: ein Plakat gehoert vollstaendig gezeigt.
   Die leicht unterschiedlichen Hoehen lassen die Wand lebendig wirken. */
.plakat-card__frame img {
  width: 100%; display: block;
}
/* Lichtreflex auf dem Papier */
.plakat-card__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%),
              rgba(255,255,255,.38), transparent 62%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.plakat-card:hover .plakat-card__frame::after { opacity: 1; }
/* Nagel an der Wand */
.plakat-card__frame::before {
  content: "";
  position: absolute; top: -9px; left: 50%;
  width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%;
  background: var(--ink-faint);
  box-shadow: 0 2px 4px rgba(30,24,54,.4);
  z-index: 3;
}
.plakat-card__caption {
  display: flex; flex-direction: column;
  padding-top: 1.05rem;
}
.plakat-card__year {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700;
  color: var(--accent);
  letter-spacing: -.01em;
}
.plakat-card__motto {
  display: block;
  font-family: var(--font-display);
  font-size: 1.22rem; font-weight: 600;
  line-height: 1.2;
  margin: .1rem 0 .3rem;
}
.plakat-card__meta { display: block; font-size: .82rem; color: var(--ink-faint); }

/* Jedes Plakat bekommt seine eigene Akzentfarbe */
.plakat-card:nth-child(8n+1) { --accent: var(--c-red); }
.plakat-card:nth-child(8n+2) { --accent: var(--c-orange); }
.plakat-card:nth-child(8n+3) { --accent: var(--c-gold); }
.plakat-card:nth-child(8n+4) { --accent: var(--c-green); }
.plakat-card:nth-child(8n+5) { --accent: var(--c-teal); }
.plakat-card:nth-child(8n+6) { --accent: var(--c-blue); }
.plakat-card:nth-child(8n+7) { --accent: var(--c-violet); }
.plakat-card:nth-child(8n+8) { --accent: var(--c-magenta); }

/* ==========================================================================
   Repertoire
   ========================================================================== */
.filterbar {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filterbar__btn {
  padding: .58rem 1.25rem;
  font-size: .9rem; font-weight: 600;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.filterbar__btn:hover { border-color: var(--accent); color: var(--accent); }
.filterbar__btn.is-active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

.songgrid { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2vw, 1.5rem); }
.song-card {
  flex: 1 1 min(230px, 100%);
  max-width: 300px;
  display: flex; flex-direction: column;
  background: none; border: 0; padding: 0;
  text-align: left; cursor: zoom-in;
}
.song-card__art {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.song-card:hover .song-card__art {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-m);
}
.song-card__art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.song-card__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,24,54,.55), transparent 50%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.song-card:hover .song-card__art::after { opacity: 1; }
.song-card__art { display: block; }
.song-card__body { display: block; padding-top: .95rem; }
.song-card__title {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; margin: 0 0 .2rem; line-height: 1.25;
}
.song-card__meta { display: block; font-size: .81rem; color: var(--ink-faint); }

/* Motive ohne gesicherte Zuordnung etwas zurücknehmen */
.song-card--open .song-card__art { opacity: .88; }
.song-card--open:hover .song-card__art { opacity: 1; }

/* ==========================================================================
   Jubiläumsbild über den Zahlen
   ========================================================================== */
.jubilee {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  width: clamp(150px, 20vw, 210px);
  text-align: center;
}
.jubilee img {
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 14px 40px rgba(30,24,54,.18);
  border: 5px solid var(--paper);
}
.jubilee figcaption {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600;
  color: var(--ink-soft);
}

/* ==========================================================================
   Songliste
   ========================================================================== */
.songlist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.songlist__item {
  flex: 1 1 min(330px, 100%);
  display: flex; flex-direction: column;
  padding: .72rem 0 .72rem .95rem;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: border-left-color .25s var(--ease), background .25s var(--ease), padding-left .25s var(--ease);
}
.songlist__item:hover {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding-left: 1.25rem;
}
/* Jeder Eintrag bekommt reihum eine Farbe */
.songlist__item:nth-child(8n+1) { --accent: var(--c-red); }
.songlist__item:nth-child(8n+2) { --accent: var(--c-orange); }
.songlist__item:nth-child(8n+3) { --accent: var(--c-gold); }
.songlist__item:nth-child(8n+4) { --accent: var(--c-green); }
.songlist__item:nth-child(8n+5) { --accent: var(--c-teal); }
.songlist__item:nth-child(8n+6) { --accent: var(--c-blue); }
.songlist__item:nth-child(8n+7) { --accent: var(--c-violet); }
.songlist__item:nth-child(8n+8) { --accent: var(--c-magenta); }
.songlist__title {
  font-family: var(--font-display);
  font-size: 1.04rem; font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.songlist__by {
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: .15rem;
}

/* ==========================================================================
   Auftrittsliste
   ========================================================================== */
.giglist { list-style: none; margin: 0; padding: 0; }
.gig {
  display: flex; align-items: flex-start; gap: clamp(1rem, 2.5vw, 2rem);
  padding: .95rem .95rem .95rem 0;
  border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.gig:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.gig__date {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 72px; padding: .45rem .3rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  line-height: 1.1;
}
.gig__day {
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700;
  color: color-mix(in srgb, var(--accent) 82%, var(--ink));
  font-variant-numeric: tabular-nums;
}
.gig__year {
  font-size: .72rem; font-weight: 650;
  letter-spacing: .06em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.gig__body { display: flex; flex-direction: column; padding-top: .15rem; min-width: 0; }
.gig__title {
  font-family: var(--font-display);
  font-size: 1.08rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -.01em;
}
.gig__place { font-size: .86rem; color: var(--ink-faint); margin-top: .1rem; }

/* Jeder Auftritt reihum eingefärbt */
.gig:nth-child(8n+1) { --accent: var(--c-red); }
.gig:nth-child(8n+2) { --accent: var(--c-orange); }
.gig:nth-child(8n+3) { --accent: var(--c-gold); }
.gig:nth-child(8n+4) { --accent: var(--c-green); }
.gig:nth-child(8n+5) { --accent: var(--c-teal); }
.gig:nth-child(8n+6) { --accent: var(--c-blue); }
.gig:nth-child(8n+7) { --accent: var(--c-violet); }
.gig:nth-child(8n+8) { --accent: var(--c-magenta); }

/* ==========================================================================
   Videos
   ========================================================================== */
.videoplayer {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-l);
}
.videoplayer video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.videoplayer__cover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.1rem;
  border: 0; width: 100%;
  background: none;
  cursor: pointer;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.videoplayer__cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.videoplayer__cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,24,54,.6), rgba(30,24,54,.15));
}
.videoplayer__play {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(251,247,240,.94);
  color: var(--ink);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.videoplayer__play svg { width: 28px; height: 28px; margin-left: 4px; }
.videoplayer__cover:hover .videoplayer__play {
  transform: scale(1.08);
  background: #fff;
}
.videoplayer__label {
  position: relative; z-index: 2;
  color: #fff; font-weight: 600; font-size: .95rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.videoplayer.is-playing .videoplayer__cover { opacity: 0; visibility: hidden; }

.videoplayer--portrait video,
.videoplayer--portrait .videoplayer__cover img { aspect-ratio: 3 / 4; }

/* ==========================================================================
   News
   ========================================================================== */
.news-item {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: 0; }
.news-item__media {
  flex: 1 1 min(340px, 100%);
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-deep);
}
.news-item__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .7s var(--ease);
}
.news-item:hover .news-item__media img { transform: scale(1.04); }
.news-item__body { flex: 1 1 min(360px, 100%); }
.news-item:nth-child(even) .news-item__media { order: 2; }
.news-item__date {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .7rem;
}
.news-item__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .6rem; }

/* Jede Meldung bekommt ihre eigene Akzentfarbe */
.news-item:nth-child(6n+1) { --accent: var(--c-green); }
.news-item:nth-child(6n+2) { --accent: var(--c-blue); }
.news-item:nth-child(6n+3) { --accent: var(--c-magenta); }
.news-item:nth-child(6n+4) { --accent: var(--c-orange); }
.news-item:nth-child(6n+5) { --accent: var(--c-teal); }
.news-item:nth-child(6n+6) { --accent: var(--c-violet); }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.contact-card {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s);
}
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
}
.contact-list__icon svg { width: 21px; height: 21px; }
.contact-list__label {
  font-size: .78rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .15rem;
}
.contact-list__value { font-weight: 550; }
.contact-list__value a { text-decoration: none; color: var(--accent); }
.contact-list__value a:hover { text-decoration: underline; }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-s);
  background: var(--paper-deep);
}
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }

/* ==========================================================================
   Chorleiter
   ========================================================================== */
.leader-portrait {
  position: relative;
  margin: 0;
}
.leader-portrait img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-l);
}
.leader-portrait figcaption {
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--ink-faint);
}
/* Aquarellfleck hinter dem Porträt */
.leader-portrait::before {
  content: "";
  position: absolute;
  inset: -8% -6% 12% -10%;
  border-radius: 50% 42% 55% 48%;
  background: linear-gradient(135deg, var(--c-violet), var(--c-blue));
  opacity: .16;
  filter: blur(34px);
  z-index: -1;
}

.leader-quote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-style: italic;
  line-height: 1.34;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--accent);
}
.leader-quote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: .88rem; font-style: normal; font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

/* ==========================================================================
   Aufruf-Banner
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
}
.cta-band__blobs { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.cta-band__blobs span {
  position: absolute; border-radius: 50%; filter: blur(60px);
}
.cta-band__blobs span:nth-child(1) { width: 300px; height: 300px; top: -110px; right: -60px;  background: var(--c-magenta); }
.cta-band__blobs span:nth-child(2) { width: 260px; height: 260px; bottom: -120px; left: 10%;  background: var(--c-teal); }
.cta-band__blobs span:nth-child(3) { width: 220px; height: 220px; top: 20%; left: -80px;      background: var(--c-orange); }
.cta-band__inner { position: relative; z-index: 1; }
.cta-band h2 { color: var(--paper); }
.cta-band .lead { color: rgba(251,247,240,.76); }

/* ==========================================================================
   Nächster Termin
   ========================================================================== */
.next-event {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.next-event__poster {
  flex: 0 1 min(300px, 100%);
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-l);
  transform: rotate(-1.8deg);
  transition: transform .5s var(--ease);
}
.next-event__poster:hover { transform: rotate(0deg) scale(1.02); }
.next-event__poster img { width: 100%; }
.next-event__body { flex: 1 1 min(340px, 100%); }
.event-facts { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.event-facts li { display: flex; align-items: center; gap: .8rem; font-size: .96rem; }
.event-facts svg { width: 19px; height: 19px; color: var(--accent); flex: none; }

/* ==========================================================================
   Meisterkurse — halbe Bauhöhe
   Abstände und Schriftgrößen sind gegenüber einer normalen Sektion
   durchgehend halbiert, damit der Streifen kompakt bleibt.
   ========================================================================== */
.meisterkurse { padding-block: calc(var(--sp-section) / 2); }
.meisterkurse .section-head { margin-bottom: clamp(1.1rem, 2vw, 1.75rem); }
.meisterkurse .section-head h2 {
  font-size: clamp(.95rem, 2vw, 1.5rem);
  margin-bottom: 0;
}
.meisterkurse .eyebrow {
  font-size: .66rem;
  padding: .3rem .8rem .3rem .62rem;
  margin-bottom: .7rem;
}
.meisterkurse .eyebrow::before { width: .4rem; height: .4rem; }
.meisterkurse .row { gap: clamp(.75rem, 1.5vw, 1.4rem); }
.meisterkurse .stat { padding: .25rem; }
.meisterkurse .stat__num {
  font-size: clamp(.85rem, 1.7vw, 1.1rem);
  line-height: 1.25;
}