/* ════ Szene – gemeinsames Stylesheet aller Seiten im Look der Bühne ════════════════
   Wird auf jeder Seite nach styles.css geladen. Enthält:
   1. Farben, Schrift- und Bewegungsregeln der Welt „Schwarzes Wasser“ (siehe DESIGN.md)
   2. Bausteine (sz-*): Etikett, Textlink, Kapsel, Lichtlinien
   3. Seitenkopf mit Szenenbild für die Unterseiten (.kopf)
   4. Die alten Bausteine aus styles.css, neu gekleidet (Tafeln statt Glaskarten, 2 px statt 30 px,
      ein Licht statt Verläufen, Etiketten statt Mono-Schrift)
   5. Abschluss-Szene und Footer
   Die Startseite lädt zusätzlich startseite.css (Struktur-Baum, Firmenkarten, Zusammenspiel, Werte). */

body {
  --sz-tinte-2: rgba(255, 255, 255, .74);     /* Fließtext, wie .buehne__text */
  --sz-tinte-3: rgba(255, 255, 255, .62);     /* Nebenzeilen; kleinster zulässiger Wert auf Schwarz */
  --sz-licht: #0aa686;                        /* das eine Licht: Akzentwörter, Linien */
  --sz-licht-hell: #16d0ab;                   /* Scheitel der Lichtlinien, Fokus */
  --sz-petrol: #05806a;                       /* nur für Flächen */
  --sz-linie: rgba(255, 255, 255, .12);
  --sz-linie-leise: rgba(255, 255, 255, .08);
  --sz-tafel: #0a0c0c;
  --sz-ecke: 2px;
  --sz-aus: cubic-bezier(.16, 1, .3, 1);
}

/* ── Regeln der Welt, seitenweit ─────────────────────── */
.fx-aurora { display: none; }                                   /* das Licht kommt aus den Szenen, nicht aus Nebelflecken */
html { scrollbar-color: rgba(255, 255, 255, .26) #080808; }
.display-l em, .display-xl em, .display-m em,
.invest-tile__title em, .bigstat__num em, .legal-body h1 em {   /* Akzentwörter flach in Petrol, kein wandernder Verlauf */
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--sz-licht); -webkit-text-fill-color: var(--sz-licht);
  animation: none; font-style: normal; font-weight: 500;
}
.reveal {                                                       /* Erscheinen wie die Texte der Bühne: ruhig von unten */
  transform: translate3d(0, 26px, 0);
  transition-property: opacity, transform;
  transition-duration: 1.1s;
  transition-timing-function: var(--sz-aus);
}
.reveal.is-in { transform: none; }
:focus-visible { outline: 2px solid var(--sz-licht-hell); outline-offset: 4px; border-radius: 2px; }

/* ── Bausteine ───────────────────────────────────────── */
.sz-zeichen { position: absolute; width: 0; height: 0; overflow: hidden; }
.sz-nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sz-pfeil { width: 18px; height: 18px; flex: none; transition: transform .6s var(--sz-aus); }
.sz-extern { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; color: var(--sz-tinte-3); }

/* Etikett wie .buehne__eyebrow: kurze Lichtlinie, dann gesperrte Versalien */
.sz-eyebrow, .eyebrow {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 13px; line-height: 1.4; letter-spacing: .42em; text-transform: uppercase; font-weight: 400;
  color: var(--sz-tinte-2);
}
.sz-eyebrow::before, .eyebrow::before { content: ''; width: 34px; height: 1px; margin-top: calc(.7em - .5px); background: var(--sz-licht); flex: none; }   /* .7em = halbe Zeilenhöhe */

.sz-text, .body-dim {
  max-width: 58ch;
  color: var(--sz-tinte-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6;
  text-wrap: pretty;
}
.body-dim strong { color: #fff; font-weight: 500; }

/* „coming soon“: gestrichelte Kapsel wie .buehne__chip */
.sz-hinweis, .soon-pill, .footer__soon small {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px dashed rgba(255, 255, 255, .3); border-radius: 99px;
  font-size: 13px; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: var(--sz-tinte-2); cursor: default;
}
.sz-hinweis b { font-weight: 500; color: #fff; }
.sz-hinweis--klein, .footer__soon small { padding: 5px 10px; font-size: 12px; letter-spacing: .03em; }
.soon-pill .ms { font-size: 16px; color: var(--sz-licht); }
.soon-pill img { width: 16px; height: 16px; object-fit: contain; opacity: .8; }

/* Textlink: Lichtlinie darunter läuft beim Zeigen ganz durch, Pfeil rückt nach */
.sz-link, .btn--text {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 0 7px; font-weight: 500; color: #fff; background: none;
}
.sz-link::after, .btn--text::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; width: auto;
  background: var(--sz-licht);
  transform: scaleX(.34); transform-origin: left; transition: transform .7s var(--sz-aus);
}
.sz-link:hover, .btn--text:hover { color: #fff; }
.sz-link:hover::after, .sz-link:focus-visible::after, .btn--text:hover::after, .btn--text:focus-visible::after { transform: scaleX(1); }
.sz-link:hover .sz-pfeil, .sz-link:focus-visible .sz-pfeil, .btn--text:hover .sz-pfeil { transform: translateX(4px); }
.sz-link--leise { font-weight: 400; color: var(--sz-tinte-2); transition: color .3s ease; }
.sz-link--leise:hover, .sz-link--leise:focus-visible { color: #fff; }
.btn .sz-pfeil { margin-left: 2px; }
.btn:hover .sz-pfeil { transform: translateX(4px); }
.btn--primary { box-shadow: none; }
.btn--primary:hover { box-shadow: none; background: #067a65; }

/* Lichtlinien: Abschnittsgrenze (leise, mittig) und Wasserlinie (mit Widerschein, wo die Bühne endet) */
.sz-horizont {
  position: absolute; top: 0; left: 50%; width: min(1136px, 78vw); height: 1px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 166, 134, 0), rgba(10, 166, 134, .5) 30%, rgba(22, 208, 171, .72) 50%, rgba(10, 166, 134, .5) 70%, rgba(10, 166, 134, 0));
}
.sz-wasserlinie { position: absolute; top: 0; left: 0; right: 0; height: clamp(120px, 14vw, 220px); pointer-events: none; }
.sz-wasserlinie.reveal { opacity: 1; transform: none; }
.sz-wasserlinie::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(10, 166, 134, 0) 3%, rgba(10, 166, 134, .8) 30%, var(--sz-licht-hell) 50%, rgba(10, 166, 134, .8) 70%, rgba(10, 166, 134, 0) 97%);
  opacity: 0; transform: scaleX(.16);
  transition: opacity .9s ease, transform 2s var(--sz-aus);
}
.sz-wasserlinie::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 1px; bottom: 0;
  background: linear-gradient(180deg, rgba(10, 166, 134, .12), rgba(10, 166, 134, 0));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36%, #000 64%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 36%, #000 64%, transparent);
  opacity: 0; transition: opacity 1.8s ease .25s;
}
.sz-wasserlinie.is-in::before { opacity: 1; transform: none; }
.sz-wasserlinie.is-in::after { opacity: 1; }

/* ── Seitenkopf der Unterseiten: Szene oben, Text unten links wie eine Station der Bühne ── */
.kopf {
  position: relative; display: flex; align-items: flex-end;
  min-height: clamp(520px, 68vh, 800px);
  padding-top: clamp(150px, 16vw, 220px); padding-bottom: clamp(48px, 5vw, 84px);
  overflow: hidden; isolation: isolate;
}
.kopf .container { width: 100%; }
.kopf__szene { position: absolute; inset: 0; z-index: -1; }
.kopf__szene img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  animation: kopfRuhe 3.6s var(--sz-aus) both;                       /* die Kamera kommt einmal zur Ruhe */
}
@keyframes kopfRuhe { from { transform: scale(1.06); } to { transform: none; } }
.kopf__szene::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 8, 8, .7) 0%, rgba(8, 8, 8, .18) 32%, rgba(8, 8, 8, 0) 50%),
    linear-gradient(90deg, rgba(8, 8, 8, .74) 0%, rgba(8, 8, 8, .34) 42%, rgba(8, 8, 8, 0) 74%),
    linear-gradient(0deg, #080808 0%, rgba(8, 8, 8, .88) 18%, rgba(8, 8, 8, 0) 64%);
}
.kopf .breadcrumb { font-size: 13px; letter-spacing: .04em; color: var(--sz-tinte-3); }
.kopf .breadcrumb a { color: var(--sz-tinte-2); }
.kopf .breadcrumb a:hover { color: #fff; }
.kopf .display-xl { font-size: clamp(42px, 5.6vw, 96px); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.kopf .eyebrow { margin-top: 28px; }
.kopf .body-dim { color: rgba(255, 255, 255, .8); }
.kopf--leise { min-height: clamp(380px, 48vh, 560px); }
.kopf--leise .legal-meta {
  display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sz-tinte-3);
}
.kopf--leise h1 { font-size: clamp(42px, 5.6vw, 96px); font-weight: 300; line-height: 1; letter-spacing: -.015em; margin-top: 26px; }
.kopf--leise h1 em { font-style: normal; font-weight: 500; color: var(--sz-licht); }
.kopf--person { min-height: 0; padding-bottom: clamp(60px, 6vw, 100px); }
.kopf--person .kopf__szene img { object-position: 50% 30%; }
.kopf--person .kopf__szene::after {
  background:
    linear-gradient(180deg, rgba(8, 8, 8, .74) 0%, rgba(8, 8, 8, .5) 30%, rgba(8, 8, 8, .9) 56%, #080808 78%);
}
.kopf + .container .legal-shell { padding-top: clamp(40px, 5vw, 80px); }

/* ── Alte Bausteine, neu gekleidet ───────────────────── */
.breadcrumb { font-size: 13px; letter-spacing: .08em; color: var(--sz-tinte-3); }
.breadcrumb a { color: var(--sz-tinte-2); }
.section-head__lede { color: var(--sz-tinte-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; max-width: 46ch; }

/* Tafeln (ersetzen Glaskarten): scharf, Haarlinie, keine Unschärfe, kein Abheben */
.pillar, .team-card, .invest-tile, .reason, .job, .company-intro, .legal-data, .apply__dialog {
  background: var(--sz-tafel); border: 1px solid var(--sz-linie); border-radius: var(--sz-ecke);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  transition: border-color .5s ease;
}
.pillar:hover, .team-card:hover, .invest-tile:hover, .reason:hover, .job:hover { transform: none; background: var(--sz-tafel); border-color: rgba(10, 166, 134, .5); }
.invest-tile--accent {
  background: linear-gradient(180deg, rgba(10, 166, 134, .09), rgba(10, 166, 134, 0) 56%), var(--sz-tafel);
  border-color: rgba(10, 166, 134, .4);
}
.invest-tile--accent:hover { background: linear-gradient(180deg, rgba(10, 166, 134, .09), rgba(10, 166, 134, 0) 56%), var(--sz-tafel); }

/* Symbole ohne Kreis-Kachel: dünn, in Petrol */
.pillar__icon, .reason__icon, .invest-tile__icon, .careers-group__icon, .legal-icon-row .ms {
  width: auto; height: auto; border-radius: 0; background: none; color: var(--sz-licht);
  display: inline-grid; place-items: center; margin-bottom: 0;
}
.pillar:hover .pillar__icon, .reason:hover .reason__icon { background: none; color: var(--sz-licht-hell); transform: none; }
.pillar__icon .ms, .reason__icon .ms, .invest-tile__icon .ms, .careers-group__icon .ms { font-size: 34px; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48; }
.careers-group__icon { width: 48px; height: 48px; background: var(--sz-petrol); border-radius: var(--sz-ecke); display: grid; }
.careers-group__icon img { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.invest-tile__icon { position: absolute; bottom: 32px; right: 32px; }
.pillar h3, .reason h3 { font-size: clamp(22px, 1.7vw, 26px); font-weight: 500; letter-spacing: -.01em; }
.pillar p, .reason p { color: var(--sz-tinte-2); font-size: 16px; line-height: 1.6; }

/* Etiketten statt Mono-Schrift */
.sub-block__num, .invest-tile__eyebrow, .roadmap__phase, .legal-meta, .legal-data dt, .company-intro__focus-label,
.team-card__role, .field label, .contact-info__row .label, .legal-toc__label, .apply__eyebrow {
  font-family: inherit; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sz-tinte-3);
}
.sub-block__num { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--sz-tinte-2); margin-bottom: 22px; }
.sub-block__num::before { content: ''; width: 34px; height: 1px; background: var(--sz-licht); flex: none; }
.roadmap__phase strong, .apply__eyebrow { color: var(--sz-licht); }
.legal-toc a::before { font-family: inherit; font-size: 11px; letter-spacing: .1em; color: var(--sz-licht); font-variant-numeric: tabular-nums; }

/* Team */
.team-card { overflow: hidden; }
.team-card__media { background: #050606; }
.team-card__media[data-label]::after { display: none; }
.team-card__photo { transition: transform 2.6s var(--sz-aus), filter .8s ease; filter: brightness(.92); }
.team-card:hover .team-card__photo { transform: scale(1.04); filter: brightness(1); }
.team-card__body { padding: 22px 26px 26px; }
.team-card__name { font-size: clamp(22px, 1.8vw, 26px); }
.team-card__name a:hover { color: var(--sz-licht-hell); }

/* Sprungmarken und Reihen von Links: Bedienelemente, 8 px wie die Buttons der Bühne */
.subsidiary-anchors a, .careers-jump a, .orbit-item, .company-tag, .job-tag {
  border-radius: 8px; background: none; border: 1px solid var(--sz-linie); color: var(--sz-tinte-2);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; animation: none;
}
.subsidiary-anchors a:hover, .careers-jump a:hover, .orbit-item:hover { color: #fff; background: rgba(10, 166, 134, .14); border-color: rgba(10, 166, 134, .6); box-shadow: none; transform: none; }
.company-tag--accent, .job-tag--accent { background: rgba(10, 166, 134, .12); border-color: rgba(10, 166, 134, .45); color: #fff; }
.job-tag .ms { color: var(--sz-licht); }

/* Unsere Firmen: Szene statt Logo-Kachel */
.sub-block { border-top: 0; position: relative; }
.sub-block::before {
  content: ''; position: absolute; top: 0; left: 50%; width: min(1136px, 78vw); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(10, 166, 134, 0), rgba(10, 166, 134, .5) 30%, rgba(22, 208, 171, .72) 50%, rgba(10, 166, 134, .5) 70%, rgba(10, 166, 134, 0));
}
.sub-block:nth-child(even) .sub-block__szene { order: 1; }
.sub-block__copy p { color: var(--sz-tinte-2); line-height: 1.6; font-size: clamp(16px, 1.25vw, 19px); }
.sub-block__features li { color: var(--sz-tinte-2); font-size: 15px; }
.sub-block__features li::before { box-shadow: none; background: var(--sz-licht-hell); width: 5px; height: 5px; }
.sub-block__szene {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: center; padding: clamp(26px, 3.5vw, 52px);
  border-radius: var(--sz-ecke); background: #050606 center / cover no-repeat;
}
.sub-block__szene::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 8, .3) 0%, rgba(8, 8, 8, 0) 30%), linear-gradient(0deg, rgba(8, 8, 8, .9) 0%, rgba(8, 8, 8, .5) 30%, rgba(8, 8, 8, 0) 60%);
}
.sub-block__szene::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--sz-linie); border-radius: inherit; pointer-events: none; }
.sub-block__szene .sub-block__logo { position: relative; z-index: 1; max-width: min(70%, 320px); max-height: clamp(48px, 9vh, 110px); filter: brightness(0) invert(1); opacity: .96; }
#alphabulle .sub-block__szene { filter: saturate(.75); }
#alphabulle .sub-block__szene::before { background: linear-gradient(0deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, .66) 36%, rgba(8, 8, 8, .36) 100%); }

/* Zusammenspiel-Diagramm auf „Unsere Firmen“ */
.constellation > div:first-child {
  background: var(--sz-tafel) !important; border: 1px solid rgba(10, 166, 134, .45) !important; box-shadow: none !important; border-radius: 2px !important;
}
.constellation > div:first-child > div > div:last-child { color: var(--sz-licht) !important; }
.constellation svg g { stroke: rgba(10, 166, 134, .55); }
.orbit-item { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 15px; font-weight: 500; color: #fff; }
.orbit-item img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }
@media (max-width: 900px) {
  .constellation { aspect-ratio: auto !important; display: flex !important; flex-direction: column; align-items: center; gap: 12px; }
  .constellation > div:first-child { position: static !important; transform: none !important; margin-bottom: 18px; }
  .orbit-item { position: static !important; transform: none !important; }
  .constellation svg { display: none; }
}

/* Investoren */
.invest-tile { padding: clamp(28px, 3.2vw, 44px); }
.invest-tile__title { letter-spacing: -.015em; }
.invest-tile__body { color: var(--sz-tinte-2); line-height: 1.6; max-width: 52ch; }
.bigstats { border-color: var(--sz-linie-leise); }
.bigstat__num { font-variant-numeric: tabular-nums; }
.bigstat__label { color: var(--sz-tinte-2); }
.alloc__label { color: #fff; }
.alloc__bar { height: 2px; border-radius: 0; background: var(--sz-linie); overflow: visible; }
.alloc__fill { border-radius: 0; background: var(--sz-licht); box-shadow: none; position: relative; }
.alloc__fill::after { content: ''; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--sz-licht-hell); }
.alloc__pct { color: var(--sz-licht); font-variant-numeric: tabular-nums; }
.roadmap::before { background: linear-gradient(var(--sz-licht), rgba(10, 166, 134, .08)); }
.roadmap__item { border-color: var(--sz-linie-leise); }
.roadmap__item:last-child { border-bottom-color: var(--sz-linie-leise); }
.roadmap__item::before { border-color: var(--sz-licht); background: #080808; }
.roadmap__item.is-current::before { background: var(--sz-licht-hell); box-shadow: none; outline: 1px solid rgba(10, 166, 134, .55); outline-offset: 5px; }
.roadmap__copy { color: var(--sz-tinte-2); line-height: 1.6; }

/* Karriere */
.careers-group + .careers-group { border-top-color: var(--sz-linie-leise); }
.careers-group__lede { max-width: 56ch; }
.company-intro { padding: clamp(24px, 3vw, 40px); }
.company-intro__desc { color: var(--sz-tinte-2); line-height: 1.6; }
.company-intro__aside { border-left-color: var(--sz-linie-leise); }
.company-intro__logo { filter: brightness(0) invert(1); opacity: .9; }
.company-fact b { font-weight: 400; letter-spacing: -.015em; }
.company-fact span { color: var(--sz-tinte-2); }
.company-intro__note { border-left: 1px solid var(--sz-licht); color: var(--sz-tinte-2); font-style: normal; }
.company-intro__link .ms { color: var(--sz-licht); }
.company-intro__link:hover { color: var(--sz-licht-hell); }
.company-intro__link--soon, .company-intro__link--soon .ms, .company-intro__link--soon:hover { color: var(--sz-tinte-3); }
.job[open] { border-color: rgba(10, 166, 134, .55); background: var(--sz-tafel); }
.job__summary { gap: 18px; }
.job__mwd { color: var(--sz-tinte-3); }
.job__chev { color: var(--sz-tinte-3); }
.job[open] .job__chev { color: var(--sz-licht); }
.job__body { border-top-color: var(--sz-linie-leise); }
.job__lede { color: var(--sz-tinte-2); line-height: 1.6; }
.job__block h4 { color: var(--sz-licht); letter-spacing: .2em; font-weight: 400; }
.job__title { margin: 0; }   /* ist jetzt eine h3 (Gliederung: Gruppe h2 → Stelle h3 → Bloecke h4) */
.job__block li { color: var(--sz-tinte-2); }
.job__block li::before { background: var(--sz-licht-hell); width: 5px; height: 5px; }
.apply__overlay { background: rgba(5, 6, 6, .72); }
.apply__dialog { background: #0a0c0c; animation: applyIn .5s var(--sz-aus) both; }
.apply__close { border-radius: 8px; background: none; border-color: var(--sz-linie); }
.apply__close:hover { background: var(--sz-petrol); transform: none; }
.apply__intro { color: var(--sz-tinte-2); }
.apply__fields input[type="file"]::file-selector-button { border-radius: 8px; background: none; border-color: var(--sz-linie); }
.apply__consent, .contact-consent { color: var(--sz-tinte-2); }
.apply__consent a, .contact-consent a, .legal-body a, .legal-data dd a { color: #fff; border-bottom: 1px solid rgba(10, 166, 134, .5); }
.apply__consent a:hover, .contact-consent a:hover, .legal-body a:hover, .legal-data dd a:hover { border-bottom-color: var(--sz-licht-hell); }
.apply__consent input, .contact-consent input { accent-color: var(--sz-petrol); }
.apply__success .ms { color: var(--sz-licht); }
.apply__success p, .apply__status { color: var(--sz-tinte-2); }
.apply__status.is-ok, .contact-status.is-ok { color: var(--sz-licht-hell); }

/* Formulare: Felder mit Haarlinie, Fokus als Lichtkante */
.field input, .field textarea, .field select {
  background: rgba(255, 255, 255, .03); border: 1px solid var(--sz-linie); border-radius: 8px;
  transition: border-color .3s ease, background-color .3s ease;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .42); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--sz-licht); background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px var(--sz-licht);
}
.field select option { background-color: #0a0c0c; }
.contact-status { color: var(--sz-tinte-2); }
.contact-info { gap: 0; padding-top: 0; }
.contact-info__row { padding: 22px 0; border: 0; border-top: 1px solid var(--sz-linie-leise); border-radius: 0; background: none; }
.contact-info__row:first-child { border-top: 0; }
.contact-info__row:hover { background: none; }
.contact-info__row .ms { color: var(--sz-licht); font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48; }
.contact-info__row .value { color: #fff; }
.contact-info__row a.value:hover { color: var(--sz-licht-hell); }

/* Rechtliches */
.legal-toc { background: none; border: 0; border-left: 1px solid var(--sz-linie-leise); border-radius: 0; padding: 4px 0 4px 24px; }
.legal-toc a { color: var(--sz-tinte-2); }
.legal-toc a:hover, .legal-toc a.is-active { color: #fff; transform: none; }
.legal-body h2 { border-top-color: var(--sz-linie-leise); font-weight: 300; }
.legal-body p { color: var(--sz-tinte-2); line-height: 1.7; }
.legal-body strong { color: #fff; }
.legal-data dd { color: #fff; }
.legal-icon-row .ms { font-size: 22px; }

/* Personenseiten */
.person__bild img { border-radius: var(--sz-ecke); }
.person__h2 { color: var(--sz-tinte-3); letter-spacing: .2em; font-weight: 400; font-size: 12px; }
.person__rollen li { border-bottom-color: var(--sz-linie-leise); }
.person__rollen li span { color: var(--sz-tinte-2); }
.person a { text-decoration-color: rgba(10, 166, 134, .55); }
.person a:hover { text-decoration-color: var(--sz-licht-hell); }
.team-card__name a:hover { text-decoration: none; }

/* Abschluss-Kasten der Unterseiten: eine ruhige Szene (Dächer der Stadt in der Nacht) hinter dem Text */
.cta-frame {
  background: #050606 url("buehne/medien/s4-ende-1600.webp?v=508e2abc") center 60% / cover no-repeat;
  border: 1px solid var(--sz-linie); border-radius: var(--sz-ecke);
}
.cta-frame::before {
  background:
    linear-gradient(90deg, rgba(8, 8, 8, .9) 0%, rgba(8, 8, 8, .66) 48%, rgba(8, 8, 8, .36) 100%),
    linear-gradient(0deg, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .2) 56%);
}
.cta-frame .eyebrow { color: var(--sz-tinte-2); }
.cta-frame__copy { color: rgba(255, 255, 255, .8); line-height: 1.6; max-width: 46ch; }
.cta-frame p { color: var(--sz-tinte-3); }
.cta-frame p a { color: #fff; }

/* ── Abschluss-Szene der Startseite ──────────────────── */
.abschluss {
  position: relative; display: flex; align-items: flex-end;
  min-height: clamp(460px, 44vw, 660px);
  padding: clamp(28px, 4.4vw, 76px);
  overflow: hidden; isolation: isolate;
  border-radius: var(--sz-ecke); background: #050606;
}
.abschluss::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 1px solid var(--sz-linie); border-radius: inherit;
}
.abschluss__szene { position: absolute; inset: 0; z-index: -1; }
.abschluss__szene img {
  position: absolute; left: 0; top: 0; width: 138%; max-width: none; height: 100%;   /* breiter als der Kasten: rückt den Kopf in die rechte Hälfte */
  object-fit: cover; object-position: 50% 44%;
  transform: scale(1.07); transform-origin: 66% 50%; transition: transform 3.4s var(--sz-aus);
}
.abschluss.is-in .abschluss__szene img { transform: none; }      /* die Kamera kommt einmal zur Ruhe */
.abschluss__szene::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, .9) 0%, rgba(8, 8, 8, .74) 34%, rgba(8, 8, 8, .26) 54%, rgba(8, 8, 8, 0) 70%),
    linear-gradient(0deg, rgba(8, 8, 8, .82) 0%, rgba(8, 8, 8, 0) 46%);
}
/* Text bleibt in der linken Hälfte, der Kopf des Nilpferds steht frei daneben */
.abschluss__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: min(540px, 46%); }
.abschluss__titel { font-size: clamp(40px, 4.8vw, 82px); line-height: 1; letter-spacing: -.015em; }
.abschluss__inhalt .sz-text { max-width: 42ch; color: rgba(255, 255, 255, .8); }
/* Die eine Hauptaktion der Seite: gefüllt in tiefem Petrol, kein Schein */
.abschluss .abschluss__haupt { background: var(--sz-petrol); border-color: var(--sz-petrol); -webkit-backdrop-filter: none; backdrop-filter: none; }
.abschluss .abschluss__haupt:hover, .abschluss .abschluss__haupt:focus-visible {
  background: #067a65; border-color: rgba(255, 255, 255, .55); box-shadow: none; transform: translateY(-2px);
}
.abschluss__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 10px; }
.abschluss__wege { display: flex; flex-wrap: wrap; gap: 12px 32px; align-self: stretch; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--sz-linie); }

/* ── Footer ──────────────────────────────────────────── */
.footer--szene { border-top: 0; padding-top: clamp(64px, 6.4vw, 104px); }
.footer--szene::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(10, 166, 134, 0) 3%, rgba(10, 166, 134, .7) 30%, var(--sz-licht-hell) 50%, rgba(10, 166, 134, .7) 70%, rgba(10, 166, 134, 0) 97%);
}
.footer--szene .footer__brand p { max-width: 40ch; color: var(--sz-tinte-2); line-height: 1.6; }
.footer--szene .footer__col h3 {
  margin-bottom: 22px;
  font-size: 13px; line-height: 1.4; letter-spacing: .32em; text-transform: uppercase; font-weight: 400;
  color: var(--sz-tinte-3);
}
.footer--szene .footer__col a { color: var(--sz-tinte-2); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.footer--szene .footer__col a:hover, .footer--szene .footer__col a:focus-visible { color: #fff; text-decoration: underline; text-decoration-color: var(--sz-licht); }
.footer--szene .footer__ort { color: var(--sz-tinte-3); }
.footer--szene .footer__soon { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--sz-tinte-3); }
.footer--szene .footer__soon small { text-transform: none; color: var(--sz-tinte-2); opacity: 1; }
.footer--szene .footer__bottom { border-top-color: var(--sz-linie-leise); color: var(--sz-tinte-3); gap: 20px; }
.footer--szene .footer__social a { border-radius: 8px; background: none; border-color: var(--sz-linie); transition: background-color .3s ease, border-color .3s ease; }
.footer--szene .footer__social a:hover, .footer--szene .footer__social a:focus-visible { background: var(--sz-petrol); border-color: var(--sz-petrol); transform: none; box-shadow: none; }

/* ── Schmaler ────────────────────────────────────────── */
@media (max-width: 720px) {
  .sz-eyebrow, .eyebrow { letter-spacing: .3em; }
  .display-l { font-size: clamp(34px, 9.4vw, 52px); -webkit-hyphens: auto; hyphens: auto; }
  .kopf { min-height: clamp(460px, 74vh, 640px); padding-top: 130px; padding-bottom: 40px; }
  .kopf .display-xl, .kopf--leise h1 { font-size: clamp(34px, 9.8vw, 54px); -webkit-hyphens: auto; hyphens: auto; }
  .kopf__szene { height: 62%; }                                      /* Szene oben, Text läuft darunter weiter wie im Abschluss */
  .kopf__szene img { object-position: 58% 40%; }
  .kopf__szene::after {
    background:
      linear-gradient(180deg, rgba(8, 8, 8, .6) 0%, rgba(8, 8, 8, 0) 22%),
      linear-gradient(0deg, #080808 0%, rgba(8, 8, 8, .9) 22%, rgba(8, 8, 8, .4) 46%, rgba(8, 8, 8, 0) 66%);
  }
  .kopf--person .kopf__szene { height: 46%; }
  .abschluss { min-height: 740px; padding: 22px 20px 26px; }
  .abschluss__inhalt { max-width: none; }
  .abschluss__szene img { width: 100%; height: 52%; object-position: 58% 50%; transform-origin: 50% 50%; }   /* Szene oben, Text darunter */
  .abschluss__szene::after {
    background: linear-gradient(0deg, #050606 0%, #050606 52%, rgba(5, 6, 6, .7) 60%, rgba(5, 6, 6, 0) 74%);
  }
  .abschluss__titel { font-size: clamp(32px, 9vw, 52px); }
  .abschluss .btn { padding: 16px 20px; font-size: 15px; white-space: nowrap; }
  .footer--szene .footer__bottom { align-items: flex-start; }
  .sub-block__szene { aspect-ratio: 16 / 10; }
}