/* ─────────────────────────────────────────────
   2 Farben – Gestaltung
   Die beiden Bandfarben stehen hier oben und
   lassen sich an einer Stelle austauschen.
   Keine externen Schriften oder Dienste (DSGVO).
   ───────────────────────────────────────────── */
:root {
  /* Die zwei Farben der Band: Schwarz und Weiß – wie im Logo. */
  --farbe-a: #ffffff;
  --farbe-b: #ffffff;

  --grund: #050505;
  --grund-2: #0d0d0d;
  --flaeche: #161616;
  --linie: #2b2b2b;
  --text: #f5f5f5;
  --text-leise: #a0a0a0;

  --schrift: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", Impact, var(--schrift);

  --rand: clamp(16px, 5vw, 48px);
  --kopf-hoehe: 68px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--kopf-hoehe); }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--farbe-b); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--grund); padding: 8px 14px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }

.breite { width: min(1120px, 100% - 2 * var(--rand)); margin-inline: auto; }

/* ───────────── Kopfzeile ───────────── */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--kopf-hoehe);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--rand);
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.kopf.fest { background: rgba(11, 11, 15, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--linie); }

.logo { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; font-family: var(--schrift-titel); font-weight: 800; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; }
.logo-2 { color: var(--text); }
.logo-wort { color: transparent; -webkit-text-stroke: 1px var(--text); }

.menue { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.menue a { text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); transition: color .2s; }
.menue a:hover { color: var(--text); }
.menue .menue-cta { color: var(--grund); background: var(--farbe-b); padding: 8px 16px; border-radius: 999px; }
.menue .menue-cta:hover { color: var(--grund); filter: brightness(1.1); }

.menue-knopf { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 0; position: relative; }
.balken, .balken::before, .balken::after { content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--text); transition: transform .25s, opacity .25s; }
.balken { top: 21px; }
.balken::before { left: 0; right: 0; top: -7px; }
.balken::after { left: 0; right: 0; top: 7px; }
.menue-knopf[aria-expanded="true"] .balken { background: transparent; }
.menue-knopf[aria-expanded="true"] .balken::before { transform: translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .balken::after { transform: translateY(-7px) rotate(-45deg); }

/* ───────────── Start ───────────── */
.held {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(var(--kopf-hoehe) + 24px) var(--rand) 72px;
  overflow: hidden; isolation: isolate;
}
.held-farben { position: absolute; inset: 0; z-index: -1; }
.fleck { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(90px); opacity: .09; }
.fleck-a { background: var(--farbe-a); left: -24vmax; top: -22vmax; animation: treiben-a 18s ease-in-out infinite alternate; }
.fleck-b { background: var(--farbe-b); right: -26vmax; bottom: -26vmax; animation: treiben-b 22s ease-in-out infinite alternate; }
.held::after { /* weicher Übergang in den nächsten Abschnitt */
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--grund));
}
@keyframes treiben-a { to { transform: translate(9vmax, 7vmax) scale(1.12); } }
@keyframes treiben-b { to { transform: translate(-8vmax, -6vmax) scale(1.08); } }

.held-inhalt { text-align: center; max-width: 900px; }
.vorzeile { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--text-leise); }
.titel { margin: 0; line-height: 0; }
.titel img {
  width: min(640px, 100%); height: auto; margin-inline: auto;
}
.unterzeile { margin: 28px auto 0; max-width: 620px; font-size: clamp(17px, 2.2vw, 21px); color: var(--text-leise); }

.knoepfe { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.knopf {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: transform .2s, filter .2s, background .2s, border-color .2s;
}
.knopf:hover { transform: translateY(-2px); }
.knopf-a { background: var(--farbe-a); color: #14060a; }
.knopf-a:hover { filter: brightness(1.1); }
.knopf-rand { border: 1.5px solid var(--text); color: var(--text); }
.knopf-rand:hover { background: var(--text); color: var(--grund); }

.runter { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; width: 44px; height: 44px; display: grid; place-items: center; text-decoration: none; color: var(--text-leise); font-size: 22px; animation: wippen 2.2s ease-in-out infinite; }
@keyframes wippen { 50% { transform: translateY(6px); } }

/* ───────────── Abschnitte ───────────── */
.abschnitt { padding: clamp(72px, 11vw, 136px) 0; }
.abschnitt-dunkler { background: var(--grund-2); border-block: 1px solid var(--linie); }

h2 {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase;
  font-size: clamp(36px, 6vw, 68px); line-height: 1; letter-spacing: .01em;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.nr { font-family: var(--schrift); font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--text-leise); }

.gross { font-size: clamp(20px, 2.6vw, 27px); line-height: 1.45; margin-top: 0; }
p { margin: 0 0 1em; }
.hinweis { color: var(--text-leise); font-size: 15px; max-width: 640px; }

/* Band */
.band-raster { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
.band-text p:not(.gross) { color: var(--text-leise); }
.besetzung { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.besetzung li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.rolle { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise); }
.name { font-weight: 600; }

/* Musik */
.musik-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.einbettung {
  position: relative; min-height: 232px; border-radius: 14px; overflow: hidden;
  background: var(--flaeche); border: 1px solid var(--linie);
  display: grid; place-items: center; text-align: center; padding: 24px;
}
.einbettung-video { aspect-ratio: 16 / 9; min-height: 0; }
.einbettung.geladen { padding: 0; border: 0; }
.einbettung iframe { width: 100%; height: 100%; border: 0; display: block; position: absolute; inset: 0; }
.einbettung:not(.einbettung-video).geladen { min-height: var(--hoehe, 352px); }
.einbettung-knopf { background: none; border: 1.5px solid var(--text); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 12px 24px; border-radius: 999px; cursor: pointer; transition: border-color .2s, color .2s; }
.einbettung-knopf:hover { border-color: var(--farbe-a); color: var(--farbe-a); }
.einbettung { align-content: center; gap: 18px; }
.einbettung-titel { font-size: 19px; line-height: 1.3; max-width: 22em; }
.foto img { filter: grayscale(1) contrast(1.08); object-position: center 22%; }   /* Fotos passend zum Schwarz-Weiß-Look */
.einbettung-leer { color: var(--text-leise); font-size: 15px; }
.einbettung-leer strong { display: block; color: var(--text); font-size: 18px; margin-bottom: 4px; }

.plattformen, .sozial { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.plattformen a, .sozial a {
  display: inline-block; padding: 10px 20px; border: 1px solid var(--linie); border-radius: 999px;
  text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .08em;
  transition: border-color .2s, color .2s;
}
.plattformen a:hover { border-color: var(--farbe-a); color: var(--farbe-a); }
.sozial a:hover { border-color: var(--farbe-b); color: var(--farbe-b); }

/* Termine */
.termine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.termin { display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linie); }
.termin-datum { font-family: var(--schrift-titel); font-weight: 800; font-size: 28px; line-height: 1.1; }
.termin-datum small { display: block; font-family: var(--schrift); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.termin-ort { font-size: 20px; font-weight: 600; }
.termin-ort small { display: block; font-size: 15px; font-weight: 400; color: var(--text-leise); }
.termin-karten { padding: 10px 22px; border-radius: 999px; background: var(--farbe-b); color: #04201e; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: filter .2s; }
.termin-karten:hover { filter: brightness(1.1); }
.termin-notiz { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); white-space: nowrap; }
.keine-termine { color: var(--text-leise); font-size: 19px; }

/* Fotos */
.fotos { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(120px, 19vw, 240px); gap: 12px; }
.foto {
  border-radius: 12px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, color-mix(in srgb, var(--farbe-a) 34%, var(--flaeche)), var(--flaeche) 55%, color-mix(in srgb, var(--farbe-b) 30%, var(--flaeche)));
  display: grid; place-items: center;
}
.foto:nth-child(even) { background: linear-gradient(315deg, color-mix(in srgb, var(--farbe-a) 30%, var(--flaeche)), var(--flaeche) 55%, color-mix(in srgb, var(--farbe-b) 34%, var(--flaeche))); }
.foto-gross { grid-column: span 2; grid-row: span 2; }
.foto span { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(241, 240, 236, .6); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Kontakt */
.kontakt { text-align: center; }
.kontakt h2 { justify-content: center; }
.kontakt .sozial { justify-content: center; }
.mail {
  display: inline-block; margin-top: 8px; text-decoration: none; overflow-wrap: anywhere;
  font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(26px, 6vw, 60px); line-height: 1.15;
  color: transparent; -webkit-text-stroke: 1.5px var(--text);   /* Umriss wie „FARBEN“ im Logo */
  transition: color .2s;
}
.mail:hover { color: var(--text); }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); padding: 28px 0; font-size: 14px; color: var(--text-leise); }
.fuss-innen { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fuss nav { display: flex; gap: 22px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--text); }

/* Rechtstexte */
.rechtstext { padding: calc(var(--kopf-hoehe) + 56px) 0 96px; }
.rechtstext .breite { max-width: 760px; }
.rechtstext h1 { font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 7vw, 64px); line-height: 1; margin: 0 0 32px; }
.rechtstext h2 { font-family: var(--schrift); font-size: 20px; text-transform: none; letter-spacing: 0; margin: 40px 0 10px; display: block; }
.rechtstext p, .rechtstext li { color: var(--text-leise); }
.rechtstext a { color: var(--farbe-b); }
.rechtstext mark { background: color-mix(in srgb, var(--farbe-a) 28%, transparent); color: var(--text); padding: 1px 5px; border-radius: 4px; }
.kopf-statisch { background: rgba(11, 11, 15, .86); border-bottom-color: var(--linie); }

/* Einblenden beim Scrollen */
.einblenden { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.einblenden.sichtbar { opacity: 1; transform: none; }

/* ───────────── Schmale Bildschirme ───────────── */
@media (max-width: 820px) {
  .menue-knopf { display: block; }
  .menue {
    position: fixed; inset: var(--kopf-hoehe) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(11, 11, 15, .97); border-bottom: 1px solid var(--linie);
    padding: 8px var(--rand) 20px;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .menue.offen { visibility: visible; opacity: 1; transform: none; }
  .menue a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--linie); }
  .menue .menue-cta { margin-top: 16px; text-align: center; border-bottom: 0; }
  .band-raster, .musik-raster { grid-template-columns: 1fr; }
  .einbettung { padding: 12px; gap: 10px; }
  .einbettung-titel { font-size: 16px; }
  .einbettung-knopf { padding: 9px 18px; font-size: 12px; }
  .fotos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; }
  .termin { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .termin-datum { grid-column: 1 / -1; font-size: 22px; }
  .termin-datum small { display: inline; margin-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fleck, .runter { animation: none; }
  .einblenden { opacity: 1; transform: none; transition: none; }
}

/* ═════════════════════════════════════════════
   AUSBAU: Kopfbilder, Korn, Weiß-Abschnitte mit
   Risskante, Laufband, Galerie mit Großansicht
   ═════════════════════════════════════════════ */

/* Feines Filmkorn über der ganzen Seite */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ── Kopfbereich mit wechselnden Fotos ── */
.held { background: #000; }
.held-bilder { position: absolute; inset: 0; z-index: -3; }
.held-bild {
  position: absolute; inset: -3%; background-size: cover; background-position: center 35%;
  opacity: 0; transition: opacity 1.8s ease; animation: kopf-zoom 22s ease-in-out infinite alternate;
}
.held-bild.an { opacity: .62; }
@keyframes kopf-zoom { from { transform: scale(1); } to { transform: scale(1.09) translateY(-1.5%); } }
.held::before {   /* Abdunkelung, damit Logo und Text lesbar bleiben */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 75% 60% at 50% 45%, rgba(0,0,0,.72), rgba(0,0,0,.25) 70%, rgba(0,0,0,.6)),
    linear-gradient(to bottom, rgba(0,0,0,.75), transparent 22%);
}
.held::after { height: 26%; background: linear-gradient(to bottom, transparent, #050505); }
.titel img { filter: drop-shadow(0 6px 28px rgba(0,0,0,.85)); }
.vorzeile { color: #d6d6d6; text-shadow: 0 1px 12px #000; }
.unterzeile { color: #e2e2e2; text-shadow: 0 1px 14px #000; }
.knopf-rand { background: rgba(0,0,0,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ── Laufband ── */
.laufband {
  position: relative; z-index: 3; overflow: hidden; width: 104%; margin: -14px 0 -14px -2%;
  transform: rotate(-1.2deg); background: #050505; border-block: 2px solid var(--text); padding: 12px 0;
}
.laufband-spur { display: flex; width: max-content; animation: laufen 36s linear infinite; }
.laufband span {
  flex: none; white-space: nowrap; padding-right: .5em;
  font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px, 4.6vw, 54px); line-height: 1.1; letter-spacing: .02em; color: var(--text);
}
.laufband b { font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px var(--text); }
.laufband i { font-style: normal; font-size: .55em; vertical-align: .22em; margin: 0 .5em; opacity: .7; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ── Weiße Abschnitte: die zweite Farbe ── */
.abschnitt { position: relative; }
.abschnitt-hell {
  --grund: #f1efe9; --grund-2: #e7e4dc; --flaeche: #e2dfd6; --linie: #c9c5ba;
  --text: #0a0a0a; --text-leise: #4d4b47; --farbe-a: #0a0a0a; --farbe-b: #0a0a0a;
  background: var(--grund); color: var(--text); z-index: 2;
}
/* Risskanten oben und unten */
.abschnitt-hell::before, .abschnitt-hell::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26px; background: var(--grund); pointer-events: none;
}
.abschnitt-hell::before {
  top: -25px;
  clip-path: polygon(0 100%, 0 60%, 2.5% 20%, 5% 45%, 7.5% 10%, 10% 55%, 12.5% 30%, 15% 70%, 17.5% 15%, 20% 40%, 22.5% 5%, 25% 50%, 27.5% 25%, 30% 65%, 32.5% 35%, 35% 10%, 37.5% 45%, 40% 20%, 42.5% 60%, 45% 30%, 47.5% 75%, 50% 15%, 52.5% 50%, 55% 5%, 57.5% 40%, 60% 25%, 62.5% 65%, 65% 35%, 67.5% 55%, 70% 10%, 72.5% 45%, 75% 20%, 77.5% 70%, 80% 30%, 82.5% 50%, 85% 15%, 87.5% 60%, 90% 25%, 92.5% 40%, 95% 5%, 97.5% 55%, 100% 35%, 100% 100%);
}
.abschnitt-hell::after {
  bottom: -25px;
  clip-path: polygon(0 0, 0 45%, 2.5% 80%, 5% 50%, 7.5% 95%, 10% 60%, 12.5% 85%, 15% 40%, 17.5% 75%, 20% 55%, 22.5% 90%, 25% 45%, 27.5% 70%, 30% 35%, 32.5% 85%, 35% 60%, 37.5% 95%, 40% 50%, 42.5% 75%, 45% 40%, 47.5% 90%, 50% 55%, 52.5% 80%, 55% 35%, 57.5% 70%, 60% 95%, 62.5% 50%, 65% 85%, 67.5% 40%, 70% 75%, 72.5% 55%, 75% 90%, 77.5% 45%, 80% 80%, 82.5% 60%, 85% 95%, 87.5% 35%, 90% 70%, 92.5% 50%, 95% 85%, 97.5% 40%, 100% 65%, 100% 0);
}
.abschnitt-hell .nr { color: var(--text-leise); }
.termin-karten { color: var(--grund); }
.abschnitt-hell h2 { text-shadow: 3px 3px 0 var(--linie); }

/* ── Dunkle Abschnitte: Rasterpunkte als Akzent ── */
.abschnitt-dunkler { overflow: hidden; border: 0; }
.abschnitt-dunkler::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.2) 1.3px, transparent 1.8px); background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 100% 0%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 75% at 100% 0%, #000, transparent 70%);
}
#fotos.abschnitt-dunkler::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 0% 100%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 75% at 0% 100%, #000, transparent 70%);
}
.abschnitt-dunkler > .breite { position: relative; }

/* ── Galerie ── */
.fotos { grid-auto-rows: clamp(130px, 17vw, 215px); grid-auto-flow: dense; margin-top: 26px; }
.foto { display: block; cursor: zoom-in; text-decoration: none; background: var(--flaeche); border: 1px solid var(--linie); }
.foto-breit { grid-column: span 2; }
.foto img { transition: filter .45s ease, transform .6s ease; }
.foto:hover img, .foto:focus-visible img { filter: none; transform: scale(1.05); }   /* Farbe erst beim Hinsehen */
.foto::after {
  content: attr(data-titel); position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent); opacity: 0; transition: opacity .3s;
}
.foto:hover::after, .foto:focus-visible::after { opacity: 1; }

/* Großansicht */
.gross-ansicht {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.94); padding: 56px 12px 20px;
}
.gross-ansicht.offen { display: flex; }
.gross-ansicht figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.gross-ansicht img { max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; border: 1px solid #333; }
.gross-ansicht figcaption { display: flex; gap: 18px; justify-content: space-between; width: 100%; padding-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f5f5f5; }
.ga-zaehler { color: #a0a0a0; white-space: nowrap; }
.gross-ansicht button {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #f5f5f5; cursor: pointer;
  background: rgba(0,0,0,.6); color: #f5f5f5; font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.gross-ansicht button:hover { background: #f5f5f5; color: #000; }
.ga-zu { top: 12px; right: 12px; }
.ga-pfeil { top: 50%; translate: 0 -50%; font-size: 30px; padding-bottom: 4px; }
.ga-zurueck { left: 12px; }
.ga-weiter { right: 12px; }

/* ── Kontakt mit Foto im Hintergrund ── */
.kontakt { isolation: isolate; overflow: hidden; }
.kontakt::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(bilder/kopf-2.jpg) center 40% / cover; opacity: .3; }
.kontakt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(5,5,5,.55), #050505 78%), linear-gradient(to bottom, #050505, transparent 30%); }
.mail { text-shadow: none; }

@media (max-width: 820px) {
  .fotos { grid-auto-rows: 40vw; }
  .foto::after { opacity: 1; font-size: 10px; padding: 20px 8px 7px; }   /* ohne Maus: Titel immer zeigen */
  .ga-pfeil { top: auto; bottom: 14px; translate: none; }
  .gross-ansicht { padding-bottom: 76px; }
  .gross-ansicht img { max-height: calc(100svh - 200px); }
  .laufband { margin-block: -8px; padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .held-bild, .laufband-spur { animation: none; }
  .held-bild { transition: none; }
  .foto img { transition: none; }
}

/* Kopfbereich: ein festes Bühnenfoto, heller und ruhiger als die frühere Bilderfolge */
.held-bild { background-position: center 30%; animation-duration: 30s; }
.held-bild.an { opacity: .72; }
@media (max-width: 820px) {
  .held-bild { background-position: 66% 30%; }   /* im Hochformat Sänger und Schlagzeug im Bild halten */
}

/* Schräges Laufband darf die Seite nicht seitlich verschiebbar machen (auch auf iPhones) */
html { overflow-x: clip; }
main { overflow-x: clip; }

/* ═════════════════════════════════════════════
   INTERAKTIVER KOPFBEREICH
   Das Foto ist schwarz-weiß. Ein Lichtkegel folgt
   Maus oder Finger und zeigt es dort in Farbe;
   Logo und Foto verschieben sich leicht gegeneinander.
   ═════════════════════════════════════════════ */
.held { min-height: 90svh; --mx: 68%; --my: 42%; --px: 0; --py: 0; --kegel: clamp(130px, 19vw, 290px); cursor: crosshair; }
.held a, .held button { cursor: pointer; }
.held-bild { translate: calc(var(--px) * 14px) calc(var(--py) * 9px); }
.held-licht {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--kegel) at var(--mx) var(--my), #000 0, #000 42%, transparent 100%);
          mask-image: radial-gradient(circle var(--kegel) at var(--mx) var(--my), #000 0, #000 42%, transparent 100%);
}
.held-farbbild {
  position: absolute; inset: -3%; background-size: cover; background-position: center 30%;
  animation: kopf-zoom 30s ease-in-out infinite alternate;
  translate: calc(var(--px) * 14px) calc(var(--py) * 9px);
}
.titel img { translate: calc(var(--px) * -20px) calc(var(--py) * -13px); }
.held-inhalt { pointer-events: none; }
.held-inhalt a { pointer-events: auto; }
.held-tipp {
  position: absolute; left: 0; right: 0; bottom: 64px; margin: 0; text-align: center; pointer-events: none;
  font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: #cfcfcf; text-shadow: 0 1px 8px #000;
}

/* ── Riesige Umriss-Wörter am Rand der Abschnitte ── */
.rand { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rand span {
  position: absolute; right: -.08em; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; line-height: .8; white-space: nowrap;
  font-size: clamp(110px, 15vw, 230px); color: transparent; -webkit-text-stroke: 2px var(--linie);
}
.abschnitt > .breite { position: relative; z-index: 1; }

/* ── Kopfleiste kippt beim Scrollen von Schwarz auf Weiß ── */
.kopf.fest:not(.kopf-statisch) { background: rgba(241, 239, 233, .95); border-bottom-color: #0a0a0a; }
.kopf.fest:not(.kopf-statisch) .logo-2 { color: #0a0a0a; }
.kopf.fest:not(.kopf-statisch) .logo-wort { -webkit-text-stroke-color: #0a0a0a; }
.kopf.fest:not(.kopf-statisch) .menue a { color: #3a3835; }
.kopf.fest:not(.kopf-statisch) .menue a:hover { color: #000; }
.kopf.fest:not(.kopf-statisch) .menue .menue-cta { background: #0a0a0a; color: #f1efe9; }
.kopf.fest:not(.kopf-statisch) .balken,
.kopf.fest:not(.kopf-statisch) .balken::before,
.kopf.fest:not(.kopf-statisch) .balken::after { background: #0a0a0a; }
.kopf.fest:not(.kopf-statisch) .menue-knopf[aria-expanded="true"] .balken { background: transparent; }

@media (max-width: 820px) {
  .held { min-height: 92svh; }
  .held-farbbild { background-position: 66% 30%; }
  .rand span { font-size: 30vw; -webkit-text-stroke-width: 1.5px; opacity: .6; }
  .kopf.fest:not(.kopf-statisch) .menue { background: rgba(241, 239, 233, .98); border-bottom-color: #0a0a0a; }
  .kopf.fest:not(.kopf-statisch) .menue a { border-bottom-color: #c9c5ba; }
}
@media (prefers-reduced-motion: reduce) {
  .held-farbbild { animation: none; }
}

/* Hinweis steht jetzt unter den Knöpfen statt frei am unteren Rand */
.held-tipp { position: static; margin: 26px 0 0; }

/* Randwörter etwas schmaler, damit sie auf mittelgroßen Bildschirmen nicht in den Text ragen */
.rand span { font-size: clamp(90px, 11vw, 180px); }
@media (max-width: 820px) { .rand span { font-size: 26vw; } }
/* Auf dem Handy liegen die Randwörter hinter dem Fließtext und stören beim Lesen */
@media (max-width: 820px) { .rand { display: none; } }

/* ── Kopfbereich dunkler, Text klar lesbar – auch wenn der Farbkegel genau darüber steht ── */
.held-bild.an { opacity: .5; }
.held::before {
  background:
    radial-gradient(ellipse 80% 65% at 50% 52%, rgba(0,0,0,.8), rgba(0,0,0,.38) 72%, rgba(0,0,0,.66)),
    linear-gradient(to bottom, rgba(0,0,0,.8), transparent 24%);
}
.held-licht { opacity: .82; }
.held-farbbild { filter: brightness(.78); }
.held-inhalt { position: relative; isolation: isolate; }
.held-inhalt::before {      /* dunkles Polster hinter Unterzeile, Knöpfen und Hinweis */
  content: ""; position: absolute; inset: 44% -14% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 58% 60% at 50% 46%, rgba(0,0,0,.86), rgba(0,0,0,.6) 50%, transparent 76%);
}
.vorzeile { color: #f2f2f2; text-shadow: 0 0 5px #000, 0 1px 14px #000; }
.unterzeile { color: #fff; font-weight: 500; text-shadow: 0 0 5px #000, 0 0 12px #000, 0 2px 22px #000; }
.held-tipp { color: #e8e8e8; text-shadow: 0 0 5px #000, 0 1px 10px #000; }

/* Neues Kopfbild (alle vier auf der Bühne): Ausschnitt und Helligkeit darauf abgestimmt */
.held-bild, .held-farbbild { background-position: center 42%; }
.held-bild.an { opacity: .66; }
.held-farbbild { filter: brightness(.95) saturate(1.1); }
@media (max-width: 820px) {
  .held-bild, .held-farbbild { background-position: 55% 42%; }   /* Sänger in der Mitte halten */
}

/* Das neue Foto ist von Haus aus dunkel: Bild voll zeigen, Abdunkelung in der Mitte zurücknehmen.
   Die Lesbarkeit sichert das dunkle Polster direkt hinter dem Text. */
.held-bild.an { opacity: .92; }
.held::before {
  background:
    radial-gradient(ellipse 80% 65% at 50% 52%, rgba(0,0,0,.42), rgba(0,0,0,.12) 72%, rgba(0,0,0,.45)),
    linear-gradient(to bottom, rgba(0,0,0,.7), transparent 22%);
}
.held-licht { opacity: .95; }
.held-farbbild { filter: none; }

/* Kopfbild dunkler: tiefes Schwarz statt Grauschleier, Bühne bleibt erkennbar */
.held-bild.an { opacity: .8; }
.held::before {
  background:
    radial-gradient(ellipse 80% 65% at 50% 52%, rgba(0,0,0,.5), rgba(0,0,0,.22) 72%, rgba(0,0,0,.6)),
    linear-gradient(to bottom, rgba(0,0,0,.78), transparent 24%);
}

/* ── Galerie mit Gruppen: Filterknöpfe, gleichmäßiges Raster, „Mehr Fotos“ ── */
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.filter-knopf {
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--linie); background: transparent; color: var(--text-leise);
  transition: border-color .2s, color .2s, background .2s;
}
.filter-knopf span { opacity: .6; margin-left: 4px; font-weight: 600; }
.filter-knopf:hover { border-color: var(--text); color: var(--text); }
.filter-knopf.aktiv { background: var(--text); border-color: var(--text); color: var(--grund); }
.fotos { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 19vw, 250px); grid-auto-flow: dense; }
.foto[hidden] { display: none; }
.foto img { object-position: center 28%; }
.mehr-zeile { margin: 28px 0 0; text-align: center; }
.mehr-zeile .knopf { cursor: pointer; font-family: inherit; background: transparent; }
.mehr-zeile .knopf[hidden] { display: none; }
@media (max-width: 820px) {
  .fotos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; }
  .filter-knopf { padding: 9px 14px; font-size: 12px; }
}

/* ── Videos mit Vorschaubild: schwarz-weiß, beim Darüberfahren in Farbe ── */
.einbettung-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer;
  filter: grayscale(1) brightness(.5); transition: filter .45s ease, transform .6s ease;
}
.einbettung.mit-bild:hover .einbettung-bild { filter: brightness(.62); transform: scale(1.03); }
.einbettung.mit-bild > :not(.einbettung-bild) { position: relative; }
.einbettung.mit-bild .einbettung-titel { color: #fff; text-shadow: 0 0 6px #000, 0 2px 16px #000; }
.einbettung.mit-bild .einbettung-knopf { background: rgba(0,0,0,.6); border-color: #fff; color: #fff; }
.einbettung.mit-bild .einbettung-knopf:hover { background: #fff; color: #000; border-color: #fff; }

/* ═════════════════════════════════════════════
   2F-LOGO IN DER KOPFLEISTE
   ═════════════════════════════════════════════ */
.logo { align-items: center; gap: 10px; }
.logo-bild { height: 46px; width: auto; margin-right: 2px; transition: transform .25s ease, filter .25s ease; filter: drop-shadow(0 2px 8px rgba(0,0,0,.7)); }
.logo:hover .logo-bild { transform: rotate(-6deg) scale(1.08); filter: drop-shadow(0 0 10px var(--lila)); }
.kopf.fest:not(.kopf-statisch) .logo-bild { filter: invert(1); }                 /* auf heller Leiste: schwarze Fassung */
.kopf.fest:not(.kopf-statisch) .logo:hover .logo-bild { filter: invert(1) drop-shadow(0 0 8px rgba(106,43,217,.6)); }
@media (max-width: 820px) { .logo-bild { height: 40px; } .logo { font-size: 22px; gap: 8px; } }

/* ═════════════════════════════════════════════
   DEZENTE FARBE: Lila und Neongrün
   Beide Töne stehen hier und lassen sich an einer Stelle ändern.
   Auf dunklem Grund führt Neongrün, auf hellem Grund ein dunkleres Lila
   (Neongrün wäre auf Weiß kaum lesbar).
   ═════════════════════════════════════════════ */
:root { --lila: #a45cff; --gruen: #39ff14; --akzent: var(--gruen); --akzent-2: var(--lila); }
.abschnitt-hell { --akzent: #6a2bd9; --akzent-2: #6a2bd9; }

::selection { background: var(--gruen); color: #000; }
:focus-visible { outline-color: var(--akzent); }

/* Abschnittsnummern und Überschriften */
.nr, .abschnitt-hell .nr { color: var(--akzent); }
h2 { text-shadow: 3px 3px 0 rgba(164, 92, 255, .55); }
.abschnitt-hell h2 { text-shadow: 3px 3px 0 rgba(106, 43, 217, .22); }

/* Kopfbereich: zwei schwache Lichtflecken, farbiger Hinweis */
.held::before {
  background:
    radial-gradient(ellipse 46% 52% at 4% 8%, rgba(164, 92, 255, .30), transparent 70%),
    radial-gradient(ellipse 42% 46% at 98% 96%, rgba(57, 255, 20, .16), transparent 70%),
    radial-gradient(ellipse 80% 65% at 50% 52%, rgba(0,0,0,.5), rgba(0,0,0,.22) 72%, rgba(0,0,0,.6)),
    linear-gradient(to bottom, rgba(0,0,0,.78), transparent 24%);
}
.held-tipp { color: var(--gruen); }
.knopf-a:hover { box-shadow: 0 0 0 2px var(--lila), 0 0 26px rgba(164, 92, 255, .55); filter: none; }
.knopf-rand:hover { background: var(--gruen); border-color: var(--gruen); color: #050505; }
.abschnitt-hell .knopf-rand:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Kopfleiste */
.menue a:hover { color: var(--gruen); }
.menue .menue-cta:hover { color: var(--grund); box-shadow: 0 0 0 2px var(--lila); }
.kopf.fest:not(.kopf-statisch) .menue a:hover { color: #6a2bd9; }
.kopf.fest:not(.kopf-statisch) .menue .menue-cta:hover { color: #f1efe9; background: #6a2bd9; box-shadow: none; }
.kopf.fest:not(.kopf-statisch) { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #6a2bd9, var(--gruen)) 1; }

/* Laufband */
.laufband { border-block: 2px solid; border-image: linear-gradient(90deg, var(--lila), var(--gruen) 50%, var(--lila)) 1; }
.laufband i { color: var(--gruen); opacity: 1; }

/* Dunkle Abschnitte: Rasterpunkte und Randwörter mit Lila-Stich */
.abschnitt-dunkler::before { background-image: radial-gradient(circle, rgba(164, 92, 255, .42) 1.3px, transparent 1.8px); }
.abschnitt-dunkler .rand span, .kontakt .rand span { -webkit-text-stroke-color: rgba(164, 92, 255, .32); }

/* Musik, Termine, Galerie */
.einbettung.mit-bild .einbettung-knopf:hover, .einbettung-knopf:hover { background: var(--gruen); border-color: var(--gruen); color: #050505; }
.einbettung.mit-bild:hover { border-color: var(--lila); }
.plattformen a:hover, .sozial a:hover { border-color: var(--akzent); color: var(--akzent); }
.termin-notiz { color: var(--akzent); }
.termin-karten:hover { box-shadow: 0 0 0 2px var(--akzent-2); }
.filter-knopf:hover { border-color: var(--lila); color: var(--text); }
.filter-knopf.aktiv { background: var(--gruen); border-color: var(--gruen); color: #050505; }
.foto:hover, .foto:focus-visible { border-color: var(--lila); box-shadow: 0 0 0 1px var(--lila), 0 0 22px rgba(164, 92, 255, .35); }
.gross-ansicht button:hover { background: var(--gruen); border-color: var(--gruen); color: #000; }
.ga-zaehler { color: var(--gruen); }

/* Kontakt und Fuß */
.kontakt::after {
  background:
    radial-gradient(ellipse 40% 50% at 12% 90%, rgba(164, 92, 255, .22), transparent 70%),
    radial-gradient(ellipse 36% 46% at 90% 12%, rgba(57, 255, 20, .10), transparent 70%),
    radial-gradient(ellipse at center, rgba(5,5,5,.55), #050505 78%),
    linear-gradient(to bottom, #050505, transparent 30%);
}
.mail:hover {
  -webkit-text-stroke-color: transparent; color: transparent;
  background: linear-gradient(90deg, var(--lila), var(--gruen)); -webkit-background-clip: text; background-clip: text;
}
.fuss { border-top: 2px solid; border-image: linear-gradient(90deg, var(--lila), var(--gruen)) 1; }
.fuss a:hover { color: var(--gruen); }
.rechtstext a { color: var(--gruen); }
.rechtstext h1 { text-shadow: 3px 3px 0 rgba(164, 92, 255, .55); }

/* Kopfleiste: nur noch das 2F-Logo, etwas größer */
.logo-bild { height: 54px; margin-right: 0; }
@media (max-width: 820px) { .logo-bild { height: 46px; } }

/* Termin mit Flyer */
.termin.mit-flyer { grid-template-columns: 150px 1fr auto auto; }
.termin-flyer {
  display: block; width: 62px; border-radius: 6px; overflow: hidden; cursor: zoom-in; line-height: 0;
  border: 1px solid var(--linie); transform: rotate(-3deg); box-shadow: 0 6px 18px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.termin-flyer img { width: 100%; height: auto; }
.termin-flyer:hover, .termin-flyer:focus-visible { transform: rotate(0) scale(1.9); box-shadow: 0 0 0 2px var(--akzent), 0 14px 34px rgba(0,0,0,.4); z-index: 3; position: relative; }
@media (max-width: 820px) {
  .termin.mit-flyer { grid-template-columns: 1fr auto; }
  .termin.mit-flyer .termin-flyer { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 70px; }
  .termin.mit-flyer .termin-datum { grid-column: 1; }
  .termin.mit-flyer .termin-notiz { grid-column: 1; }
  .termin-flyer:hover, .termin-flyer:focus-visible { transform: rotate(0) scale(1.08); }
}

/* Termin: Hinweis und Knopf stehen rechts nebeneinander */
.termin-ende { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.termin-karten { background: var(--akzent); color: #fff; }
.abschnitt-dunkler .termin-karten, .kontakt .termin-karten { color: #050505; }
@media (max-width: 820px) {
  .termin-ende { grid-column: 1 / -1; justify-content: flex-start; gap: 12px; margin-top: 6px; }
  .termin.mit-flyer .termin-ende { grid-column: 1; }
  .termin-ort { grid-column: 1 / -1; }
  .termin.mit-flyer .termin-ort { grid-column: 1; }
}

/* Geladenes Video füllt immer das ganze Feld (die Vorschau-Regel hatte den Rahmen auf einen Streifen geschrumpft) */
.einbettung iframe { position: absolute !important; inset: 0; width: 100%; height: 100%; }
.einbettung.geladen { background: #000; }

/* ═════════════════════════════════════════════
   KOPFBILD: die Band Arm in Arm
   Die Gesichter liegen in der oberen Bildhälfte. Deshalb rücken Logo und Text
   nach unten, und nur der untere Teil wird abgedunkelt.
   ═════════════════════════════════════════════ */
.held { place-items: end center; padding-bottom: 54px; }
.held-bild, .held-farbbild { background-position: center 58%; }
.held-bild.an { opacity: .95; }
.held::before {
  background:
    radial-gradient(ellipse 46% 52% at 4% 8%, rgba(164, 92, 255, .22), transparent 70%),
    radial-gradient(ellipse 42% 46% at 98% 96%, rgba(57, 255, 20, .14), transparent 70%),
    linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.8) 34%, rgba(0,0,0,.28) 58%, transparent 74%),
    linear-gradient(to bottom, rgba(0,0,0,.6), transparent 16%);
}
.titel img { width: min(390px, 74%); }
.unterzeile { margin-top: 18px; }
.knoepfe { margin-top: 24px; }
.held-tipp { margin-top: 18px; }
.held-inhalt::before { inset: 30% -14% -10%; }
.runter { bottom: 10px; }
@media (max-width: 820px) {
  .held { padding-bottom: 50px; }
  .held-bild, .held-farbbild { background-size: auto 122%; background-position: 44% 100%; }   /* die zwei in der Mitte, Köpfe über dem Logo */
  .titel img { width: min(250px, 70%); }
  .vorzeile { margin-bottom: 6px; }
}
@media (max-width: 820px) {
  .held-bild, .held-farbbild { background-size: auto 112%; background-position: 41% 100%; }   /* etwas weniger Zoom: Kappe und Brille ganz im Bild */
}

/* ═════════════════════════════════════════════
   DREI KOPFBILDER IM WECHSEL
   Jedes Foto hat seinen eigenen Ausschnitt, damit das Wichtige über dem Logo bleibt.
   ═════════════════════════════════════════════ */
.held-farbbild { opacity: 0; transition: opacity 1.8s ease; }
.held-farbbild.an { opacity: 1; }
.kopf-gruppe   { background-position: center 58%; }
.kopf-publikum { background-position: center 38%; }
.kopf-element  { background-position: center 30%; }
@media (max-width: 820px) {
  .held-bild.kopf-gruppe,   .held-farbbild.kopf-gruppe   { background-size: auto 112%; background-position: 41% 100%; }
  .held-bild.kopf-publikum, .held-farbbild.kopf-publikum { background-size: cover; background-position: 24% center; }   /* Sänger und Publikum */
  .held-bild.kopf-element,  .held-farbbild.kopf-element  { background-size: auto 118%; background-position: center 0%; } /* Gesicht oben, Schriftzug des Covers unten aus dem Bild */
}
@media (prefers-reduced-motion: reduce) { .held-farbbild { transition: none; } }

/* Das quadratische Element-Cover würde auf breiten Bildschirmen riesig aufgezogen.
   Dort steht es deshalb in voller Höhe rechts und läuft nach links weich ins Schwarz aus. */
@media (min-width: 821px) {
  .held-bild.kopf-element, .held-farbbild.kopf-element {
    background-size: auto 100%; background-position: 100% 0; background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 34%);
            mask-image: linear-gradient(to right, transparent 4%, #000 34%);
  }
}
@media (max-width: 820px) {
  /* Element-Cover auf dem Handy: ganzes Gesicht oben im Bild statt stark vergrößert */
  .held-bild.kopf-element, .held-farbbild.kopf-element { background-size: 114% auto; background-position: center 34px; background-repeat: no-repeat; }
}
@media (max-width: 820px) {
  /* Der Schriftzug des Covers läge genau hinter dem Bandlogo: unten weich ausblenden */
  .held-bild.kopf-element, .held-farbbild.kopf-element {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 36%, transparent 47%);
            mask-image: linear-gradient(to bottom, #000 0, #000 36%, transparent 47%);
  }
}

/* Element-Cover auf breiten Bildschirmen: mittig statt rechts.
   Etwas kleiner und nach oben gerückt, damit Kappe und Augen über dem Logo liegen;
   unten weich ausgeblendet, damit der Cover-Schriftzug nicht hinter dem Text steht. */
@media (min-width: 821px) {
  .held-bild.kopf-element, .held-farbbild.kopf-element {
    background-size: auto 80%; background-position: center 40px; background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 63%);
            mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 63%);
  }
}
@media (min-width: 821px) {
  /* Weicher Rand rundum statt sichtbarer Bildkanten links und rechts */
  .held-bild.kopf-element, .held-farbbild.kopf-element {
    -webkit-mask-image: radial-gradient(ellipse 38vh 41vh at 50% 31%, #000 0, #000 60%, transparent 100%);
            mask-image: radial-gradient(ellipse 38vh 41vh at 50% 31%, #000 0, #000 60%, transparent 100%);
  }
}

/* Zeile über dem Logo: auf großen Bildschirmen deutlich größer */
.vorzeile { font-size: clamp(14px, 1.55vw, 24px); letter-spacing: .24em; margin-bottom: 16px; }
@media (max-width: 820px) { .vorzeile { font-size: 14px; letter-spacing: .22em; margin-bottom: 8px; } }

/* ═════════════════════════════════════════════
   KOPFLEISTE BEIM SCROLLEN: Schwarz statt Weiß
   (überschreibt die frühere helle Fassung)
   ═════════════════════════════════════════════ */
.kopf.fest:not(.kopf-statisch) { background: rgba(5, 5, 5, .93); border-image: linear-gradient(90deg, var(--lila), var(--gruen)) 1; }
.kopf.fest:not(.kopf-statisch) .logo-bild { filter: drop-shadow(0 2px 8px rgba(0,0,0,.7)); }
.kopf.fest:not(.kopf-statisch) .logo:hover .logo-bild { filter: drop-shadow(0 0 10px var(--lila)); }
.kopf.fest:not(.kopf-statisch) .menue a { color: #b9b9b9; }
.kopf.fest:not(.kopf-statisch) .menue a:hover { color: var(--gruen); }
.kopf.fest:not(.kopf-statisch) .menue .menue-cta { background: #fff; color: #050505; }
.kopf.fest:not(.kopf-statisch) .menue .menue-cta:hover { background: #fff; color: #050505; box-shadow: 0 0 0 2px var(--lila); }
.kopf.fest:not(.kopf-statisch) .balken,
.kopf.fest:not(.kopf-statisch) .balken::before,
.kopf.fest:not(.kopf-statisch) .balken::after { background: #f5f5f5; }
.kopf.fest:not(.kopf-statisch) .menue-knopf[aria-expanded="true"] .balken { background: transparent; }
@media (max-width: 820px) {
  .kopf.fest:not(.kopf-statisch) .menue { background: rgba(5, 5, 5, .98); border-bottom-color: #2b2b2b; }
  .kopf.fest:not(.kopf-statisch) .menue a { border-bottom-color: #2b2b2b; color: #d0d0d0; }
  .kopf.fest:not(.kopf-statisch) .menue .menue-cta { color: #050505; }
}

/* Element-Cover größer: füllt auf breiten Bildschirmen die ganze Höhe des Kopfbereichs.
   Etwas nach oben geschoben, damit die Augen über dem Logo bleiben. */
@media (min-width: 821px) {
  .held-bild.kopf-element, .held-farbbild.kopf-element {
    background-size: auto 104%; background-position: center -56px;
    -webkit-mask-image: radial-gradient(ellipse 50vh 50vh at 50% 30%, #000 0, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 50vh 50vh at 50% 30%, #000 0, #000 62%, transparent 100%);
  }
}
@media (max-width: 820px) {
  .held-bild.kopf-element, .held-farbbild.kopf-element {
    background-size: 132% auto; background-position: center 14px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 40%, transparent 52%);
            mask-image: linear-gradient(to bottom, #000 0, #000 40%, transparent 52%);
  }
}
@media (min-width: 821px) {
  /* etwas weiter nach oben, damit die Augen frei über der Textzeile liegen */
  .held-bild.kopf-element, .held-farbbild.kopf-element { background-position: center -12vh; }
}