/* ==========================================================
   BPRO | Konsolidierte Styles
   01 Grundlagen · 02 Startseite · 03 Navigation
   04 Komponenten · 05–17 Seitenspezifische Bereiche
   Gemeinsame Fixes sind in die jeweiligen Module zurückgeführt.
   ========================================================== */

@font-face {
  font-family: "Nohemi";
  src: url("../font/Nohemi-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Pixel-Schrift für die technische 404-Seite.
   Datei lokal unter /font/GeistPixel-VF.woff2 ablegen. */
@font-face {
  font-family: "Geist Pixel";
  src: url("../font/GeistPixel-VF.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Zusätzliche Display-Schriften für das wechselnde Wort „Idee“. */
@font-face {
  font-family: "Unique";
  src: url("../font/Unique-VF.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../font/Fraunces-Italic-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Merchant";
  src: url("../font/Merchant-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Thunder";
  src: url("../font/Thunder-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --edge: 15px;
  --radius: var(--radius-media);

  /* Desktop / 2-Zeiler: Feintuning für das Wort „Idee“.
     Negativ = nach links, positiv = nach rechts. */
  --idea-x: 0.5em;
  --idea-desktop-x: 0em;
  --idea-desktop-y: 0em;
  --idea-style-1-x: 0em;
  --idea-desktop-style-1-x: -0.27em;
  --idea-desktop-style-1-y: 0em;
  --idea-style-2-x: 0em;
  --idea-desktop-style-2-x: -0.25em;
  --idea-desktop-style-2-y: 0.09em;
  --idea-style-3-x: 0em;
  --idea-desktop-style-3-x: -0.25em;
  --idea-desktop-style-3-y: -0.08em;
  --idea-style-4-x: 0em;
  --idea-desktop-style-4-x: -0.29em;
  --idea-desktop-style-4-y: 0.06em;
  --idea-style-5-x: 0em;
  --idea-desktop-style-5-x: -0.28em;
  --idea-desktop-style-5-y: 0.08em;
  --hero-first-line-gap: 0.02em;
  --hero-first-line-x: 0em;
  --hero-first-word-x: 0em;
  --idea-word-width: 4.5em;
  --idea-layout-width: 2.3em;
  --mobile-menu-bg: var(--color-bg);

  /*
    Vertikale Feinjustierung für „Idee“.
    Kleiner negativer Wert = nach oben, positiver Wert = nach unten.
    Beispiel: --idea-y: -0.04em;
  */
  --idea-y: 0em;
  --idea-style-1-y: 0em;
  --idea-style-2-y: -0.045em;
  --idea-style-3-y: -0.01em;
  --idea-style-4-y: -0.035em;
  --idea-style-5-y: -0.015em;

  /*
    Mobile / gestapelte Ansicht:
    Feintuning nur für die Ansicht, in der alles untereinander steht.
    Negativ = nach links/oben, positiv = nach rechts/unten.
  */
  --hero-stack-gap: 0em;
  --hero-stack-line-height: 1;
  --idea-stack-x: 0em;
  --idea-stack-y: 0em;
  --idea-stack-style-1-x: 0em;
  --idea-stack-style-1-y: 0em;
  --idea-stack-style-2-x: 0em;
  --idea-stack-style-2-y: -0.1em;
  --idea-stack-style-3-x: 0em;
  --idea-stack-style-3-y: 0em;
  --idea-stack-style-4-x: 0em;
  --idea-stack-style-4-y: 0.03em;
  --idea-stack-style-5-x: 0em;
  --idea-stack-style-5-y: -0.01em;

  /* ========================================================
     Zentrale Design-Tokens
     Hier lassen sich Grundfarben, Oberflächen, Konturen,
     Radien und zentrale Abstände projektweit anpassen.
     ======================================================== */

  /* Grundfarben */
  --color-bg: #000000;
  --color-surface-1: #0a0a0a;
  --color-surface-2: #111111;
  --color-surface-3: #171717;
  --color-text: #ffffff;
  --color-text-soft: rgba(255, 255, 255, 0.78);
  --color-text-muted: rgba(255, 255, 255, 0.68);
  --color-text-dim: rgba(255, 255, 255, 0.56);

  /* Transparente Oberflächen */
  --surface-ghost: rgba(255, 255, 255, 0.04);
  --surface-subtle: rgba(255, 255, 255, 0.06);
  --surface-glass: rgba(255, 255, 255, 0.08);
  --surface-hover: rgba(255, 255, 255, 0.12);
  --surface-strong: rgba(255, 255, 255, 0.13);

  /* Konturen */
  --border-faint: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.13);
  --border-soft: rgba(255, 255, 255, 0.18);
  --border-medium: rgba(255, 255, 255, 0.26);
  --border-strong: rgba(255, 255, 255, 0.34);

  /* Radien */
  --radius-ui: 12px;
  --radius-panel: 16px;
  --radius-card: 20px;
  --radius-media: 20px;
  --radius-dialog: 30px;
  --radius-pill: 999px;

  /* Wiederkehrende Abstände */
  --space-kicker-title: 26px;
  --space-copy-top: clamp(18px, 2.2vw, 28px);

  /* Bestehende Alias-Namen – für ältere Module weiterhin gültig. */
  --text: var(--color-text);
  --soft-text: var(--color-text-soft);
  --color-soft: var(--color-text-soft);
  --color-muted: var(--color-text-muted);
  --line-subtle: var(--border-subtle);
  --glass: var(--surface-glass);
  --glass-strong: var(--surface-strong);

  /* Genau zwei Breiten für visuelle Sektionen:
     wide = Videogalerie, compact = CTA. */
  --section-width-wide: 1320px;
  --section-width-compact: 980px;

  --container-wide: var(--section-width-wide);
  --container-text: 900px;
  --container-narrow: 760px;

  --section-y: clamp(72px, 7.6vw, 112px);
  --section-y-tight: clamp(46px, 5.2vw, 72px);
  --section-y-first: clamp(42px, 5vw, 70px);
  --section-x: clamp(20px, 4vw, 70px);

  /* Große Inszenierung: Startseiten-Hero und vergleichbare Display-Texte */
  --font-size-display: clamp(3.5rem, 1.4rem + 8vw, 9.375rem);

  /* Seitentitel: einheitlich für alle Unterseiten-Heroes */
  --font-size-page-title: clamp(2.5rem, 1.7rem + 3.4vw, 5.125rem);

  /* Große Überschriften innerhalb einer Seite */
  --font-size-section-title: clamp(2.25rem, 1.65rem + 2.6vw, 4.25rem);

  /* H3, Kartenüberschriften und kleinere Inhaltsüberschriften */
  --font-size-heading: clamp(1.75rem, 1.35rem + 1.8vw, 3rem);

  /* Große hervorgehobene Texte zwischen Einleitung und Inhaltsüberschrift */
  --font-size-extralarge: clamp(1.375rem, 1.12rem + 1.1vw, 2.125rem);

  /* Große Einleitungen und hervorgehobener Fließtext */
  --font-size-large: clamp(1.125rem, 1.02rem + 0.45vw, 1.5625rem);

  /* Normaler Fließtext */
  --font-size-body: clamp(1rem, 0.96rem + 0.18vw, 1.1875rem);

  /* Kicker, Labels und kleine Zusatztexte */
  --font-size-small: clamp(0.875rem, 0.84rem + 0.14vw, 1rem);

  /* Copyright, Impressum, Datenschutz und Footer-Meta */
  --font-size-meta: 0.8125rem;

  /* Bewusster UI-Sonderfall: große Navigation auf kleinen Displays */
  --font-size-mobile-nav: clamp(2.375rem, 1.35rem + 5vw, 4.625rem);

  /* Zeilenhöhen */
  --line-height-display: 0.96;
  --line-height-heading: 1;
  --line-height-body: 1.48;
  --line-height-compact: 1.25;
  --line-height-ui: 1;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

img[loading="lazy"] {
  content-visibility: auto;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: "Nohemi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--color-bg);
  color: var(--text);
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-top-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  scroll-margin-top: 0;
  pointer-events: none;
}

button {
  font: inherit;
}

a,
button,
summary,
[role="button"],
.nav-toggle,
.primary-nav a,
.button,
.cta-button,
.social-links a,
.portfolio-card,
.showreel-card,
.hero-video-card {
  touch-action: manipulation;
}


.page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg);
}

.hero-media {
  position: fixed;
  inset: var(--edge);
  z-index: -2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-2);

  /* Verhindert Browser-Overlays wie Picture-in-Picture beim Hover über das Hintergrundvideo. */
  pointer-events: none;
}

.hero-video-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.hero-media > .hero-video,
.hero-media > .video-js {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 180ms ease;
}

.hero-media.is-video-ready > .hero-video,
.hero-media.is-video-ready > .video-js {
  opacity: 1;
}

.hero-media.is-video-ready .hero-video-poster {
  opacity: 0;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.36)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent 38%, rgba(0, 0, 0, 0.34));
}

.hero-video,
.hero-media .video-js {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.hero-media .video-js .vjs-tech {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media .vjs-control-bar,
.hero-media .vjs-big-play-button,
.hero-media .vjs-loading-spinner,
.hero-media .vjs-poster {
  display: none !important;
}

.hero-content {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 120px var(--edge);
  text-align: center;
}

.hero-title {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
  max-width: min(1280px, 92vw);
  margin: 0;
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  font-weight: 600;
  letter-spacing: normal;
  text-align: center;
  text-wrap: balance;
}

.hero-title__line {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  line-height: 0.92;
}

.hero-title__line--first {
  gap: var(--hero-first-line-gap, 0.02em);
  transform: translateX(var(--hero-first-line-x, 0em));
}

.hero-title__line--first .hero-title__word {
  transform: translateX(var(--hero-first-word-x, 0em));
}

.hero-title__line--second {
  justify-self: center;
}

.rotating-word {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  width: var(--idea-word-width, 1.85em);
  margin-right: calc((var(--idea-word-width, 4.5em) - var(--idea-layout-width, 1.48em)) * -1);
  white-space: nowrap;
  line-height: 0.9;
  letter-spacing: normal;
  transform: none;
  transition:
    font-family 180ms ease,
    font-weight 180ms ease,
    font-style 180ms ease,
    transform 180ms ease;
}

.rotating-word::before {
  content: "Idee";
  visibility: hidden;
  display: inline-block;
  font-family: "Nohemi", sans-serif;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.rotating-word__text {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  line-height: 0.92;
  text-align: left;
  transform-origin: 0 100%;
  transition:
    font-family 180ms ease,
    font-weight 180ms ease,
    font-style 180ms ease,
    letter-spacing 180ms ease,
    transform 180ms ease;
}

.word-style-1 {
  --idea-current-x: var(--idea-style-1-x, 0em);
  --font-y: var(--idea-style-1-y);
  font-family: "Nohemi", sans-serif;
  font-weight: 800;
  letter-spacing: normal;
  transform: translate(
    calc(var(--idea-x, 0em) + var(--idea-desktop-x, 0em) + var(--idea-style-1-x, 0em) + var(--idea-desktop-style-1-x, 0em)),
    calc(var(--idea-y, 0em) + var(--idea-desktop-y, 0em) + var(--font-y, 0em) + var(--idea-desktop-style-1-y, 0em))
  ) scale(1);
}

.word-style-2 {
  --idea-current-x: var(--idea-style-3-x, 0em);
  --font-y: var(--idea-style-3-y);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 35, "WONK" 1;
  letter-spacing: normal;
  transform: translate(
    calc(var(--idea-x, 0em) + var(--idea-desktop-x, 0em) + var(--idea-style-3-x, 0em) + var(--idea-desktop-style-3-x, 0em)),
    calc(var(--idea-y, 0em) + var(--idea-desktop-y, 0em) + var(--font-y, 0em) + var(--idea-desktop-style-3-y, 0em))
  ) scale(1);
}

.word-style-3 {
  --idea-current-x: var(--idea-style-4-x, 0em);
  --font-y: var(--idea-style-4-y);
  font-family: "Merchant", "Nohemi", sans-serif;
  font-weight: 700;
  font-stretch: 100%;
  font-style: normal;
  letter-spacing: normal;
  transform: translate(
    calc(var(--idea-x, 0em) + var(--idea-desktop-x, 0em) + var(--idea-style-4-x, 0em) + var(--idea-desktop-style-4-x, 0em)),
    calc(var(--idea-y, 0em) + var(--idea-desktop-y, 0em) + var(--font-y, 0em) + var(--idea-desktop-style-4-y, 0em))
  ) scale(1);
}

.word-style-4 {
  --idea-current-x: var(--idea-style-5-x, 0em);
  --font-y: var(--idea-style-5-y);
  font-family: "Thunder", "Nohemi", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "CNTR" 0, "ital" 0;
  letter-spacing: normal;
  transform: translate(
    calc(var(--idea-x, 0em) + var(--idea-desktop-x, 0em) + var(--idea-style-5-x, 0em) + var(--idea-desktop-style-5-x, 0em)),
    calc(var(--idea-y, 0em) + var(--idea-desktop-y, 0em) + var(--font-y, 0em) + var(--idea-desktop-style-5-y, 0em))
  ) scale(1.05);
}

.word-style-5 {
  --idea-current-x: var(--idea-style-2-x, 0em);
  --font-y: var(--idea-style-2-y);
  font-family: "Unique", "Nohemi", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: normal;
  transform: translate(
    calc(var(--idea-x, 0em) + var(--idea-desktop-x, 0em) + var(--idea-style-2-x, 0em) + var(--idea-desktop-style-2-x, 0em)),
    calc(var(--idea-y, 0em) + var(--idea-desktop-y, 0em) + var(--font-y, 0em) + var(--idea-desktop-style-2-y, 0em))
  ) scale(1.1);
}

.hero-copy {
  display: grid;
  justify-items: center;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
}

.hero-intro {
  max-width: min(800px, calc(100vw - 48px));
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--font-size-large);
  line-height: var(--line-height-body);
  font-weight: 400;
  text-wrap: balance;
}


.home-socials {
  position: fixed;
  right: calc(var(--edge) + 28px);
  bottom: calc(var(--edge) + 24px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-socials a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.82);
  transition:
    color 220ms ease,
    transform 220ms ease;
}

.home-socials a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.11);
  opacity: 0;
  transform: scale(0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-socials a:hover,
.home-socials a:focus-visible {
  color: var(--text);
  transform: translateY(-1px);
}

.home-socials a:hover::before,
.home-socials a:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.home-socials svg {
  display: block;
  width: 22px;
  height: 22px;
}


@media (max-width: 760px) {

  .hero-content {
    padding: 110px 26px 120px;
  }

  .hero-title {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: var(--hero-stack-gap);
    max-width: 94vw;
    font-size: var(--font-size-display);
    line-height: var(--hero-stack-line-height);
    letter-spacing: normal;
  }

  .hero-title__line {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
    gap: var(--hero-stack-gap);
    line-height: var(--hero-stack-line-height);
  }

  .hero-title__line--first {
    transform: none;
  }

  .hero-title__line--first .hero-title__word {
    transform: none;
  }

  .hero-title__line--second {
    width: min-content;
    max-width: min-content;
    line-height: var(--hero-stack-line-height);
    text-align: center;
    white-space: normal;
  }

  .rotating-word {
    position: static;
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    flex-basis: auto;
    margin-right: 0;
    line-height: var(--hero-stack-line-height);
    transform: none !important;
    translate: none;
  }

  .rotating-word::before {
    display: none;
    content: none;
  }

  .hero-title .rotating-word__text {
    position: static;
    left: auto;
    bottom: auto;
    display: block;
    line-height: var(--hero-stack-line-height);
    transform: translate(
      calc(var(--idea-stack-x, 0em) + var(--idea-stack-current-x, 0em)),
      calc(var(--idea-stack-y, 0em) + var(--idea-stack-current-y, 0em))
    ) !important;
    translate: none;
  }

  .hero-title .rotating-word__text.word-style-1 {
    --idea-stack-current-x: var(--idea-stack-style-1-x, 0em);
    --idea-stack-current-y: var(--idea-stack-style-1-y, 0em);
  }

  .hero-title .rotating-word__text.word-style-2 {
    --idea-stack-current-x: var(--idea-stack-style-2-x, 0em);
    --idea-stack-current-y: var(--idea-stack-style-2-y, 0em);
  }

  .hero-title .rotating-word__text.word-style-3 {
    --idea-stack-current-x: var(--idea-stack-style-3-x, 0em);
    --idea-stack-current-y: var(--idea-stack-style-3-y, 0em);
  }

  .hero-title .rotating-word__text.word-style-4 {
    --idea-stack-current-x: var(--idea-stack-style-4-x, 0em);
    --idea-stack-current-y: var(--idea-stack-style-4-y, 0em);
  }

  .hero-title .rotating-word__text.word-style-5 {
    --idea-stack-current-x: var(--idea-stack-style-5-x, 0em);
    --idea-stack-current-y: var(--idea-stack-style-5-y, 0em);
  }

  .hero-copy {
    gap: 18px;
  }

  .hero-intro {
    max-width: min(540px, calc(100vw - 52px));
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  .home-socials {
    right: 22px;
    bottom: 78px;
    gap: 6px;
  }

  .home-socials a {
    width: 38px;
    height: 38px;
  }

  .home-socials svg {
    width: 21px;
    height: 21px;
  }


}


/* ==========================================================
   03 | Navigation
   Ein gemeinsames Modul für alle Seiten.
   ========================================================== */

body.menu-open {
  overflow: hidden;
}

.site-header {
  position: fixed;
  top: calc(var(--edge, 15px) + 28px);
  left: calc(var(--edge, 15px) + 28px);
  right: calc(var(--edge, 15px) + 28px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  isolation: isolate;
}


.logo {
  position: relative;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 280px;
  min-width: 280px;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.primary-nav a,
.primary-nav a[aria-current],
.primary-nav a.is-current,
.primary-nav a.is-active {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: var(--line-height-ui);
  letter-spacing: normal;
  color: #ffffff;
  transition:
    color 220ms ease,
    transform 220ms ease;
}

.primary-nav a::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  z-index: -1;
  border: 1px solid var(--border-medium);
  border-radius: inherit;
  background: var(--surface-subtle);
  opacity: 0;
  transform: scale(0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 260ms ease,
    border-color 260ms ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--text, var(--color-text));
  transform: translateY(-1px);
}

.primary-nav a:hover::before,
.primary-nav a:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.nav-toggle {
  display: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* Navigation funktioniert auch ohne JavaScript: der unsichtbare Checkbox-Status
   steuert Hamburger und mobiles Menü vollständig per CSS. */
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  body:has(.nav-toggle-input:checked) {
    overflow: hidden;
  }

  .nav-toggle-input:focus-visible + .nav-toggle {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }
}
@media (max-width: 760px) {
  .site-header {
    top: 28px;
    left: 28px;
    right: 28px;
  }


  .logo {
    width: 220px;
    min-width: 0;
    max-width: calc(100vw - 112px);
  }

  .nav-toggle {
    position: relative;
    z-index: 50;
    display: inline-flex;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--text, var(--color-text));
    background: #000000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
    transition:
      transform 180ms ease,
      opacity 180ms ease;
  }

  .nav-toggle-input:checked + .nav-toggle span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .nav-toggle-input:checked + .nav-toggle span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .primary-nav {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 4.8vh, 40px);
    padding: 110px 28px 54px;
    border-radius: 0;
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 220ms ease,
      visibility 220ms ease,
      transform 220ms ease;
  }

  .nav-toggle-input:checked ~ .primary-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .primary-nav a,
  .primary-nav a[aria-current],
  .primary-nav a.is-current,
  .primary-nav a.is-active {
    min-height: auto;
    padding: 0.22em 0.48em 0.28em;
    font-size: var(--font-size-mobile-nav);
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: normal;
    word-spacing: normal;
    color: var(--text, var(--color-text));
    transform: none;
  }

  .primary-nav a::before {
    inset: -0.08em -0.18em;
    border-radius: 0.28em;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: scale(0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .primary-nav a:hover,
  .primary-nav a:focus-visible,
  .primary-nav a:active {
    color: var(--text, var(--color-text));
    transform: none;
  }

  
}


/* ==========================================================
   04 | Gemeinsame Komponenten
   Header, Footer, Buttons, Unterseiten-Hero, Sektionen,
   Video-Cursor und Video-Modal liegen bewusst zentral.
   ========================================================== */

/* ---------- Globale Typografie ---------- */

:where(h1, h2, h3, p, a, button, span, strong, li, address, dt, dd) {
  letter-spacing: normal;
}

/* ---------- Layout-Container ---------- */

.content-section {
  width: min(var(--container-wide), calc(100% - 30px));
  margin-inline: auto;
}

.section-pad {
  padding-top: var(--section-y);
  padding-right: var(--section-x);
  padding-bottom: 0;
  padding-left: var(--section-x);
}

.section-pad--tight {
  padding-top: var(--section-y-tight);
}

.content-narrow,
.section-heading {
  width: min(var(--container-text), 100%);
  margin-inline: auto;
  text-align: center;
}

.section-heading {
  margin-bottom: clamp(34px, 5vw, 64px);
}

.section-heading--gallery {
  max-width: 940px;
}

.content-narrow h2,
.section-heading h2,
.contact-intro h1,
.contact-card h2,
.contact-cta h2,
.process-note h2,
.process-cta h2,
.studio-cta h2,
.training-apply h2,
.legal-section h2 {
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

.content-narrow p:not(.section-kicker),
.section-heading p:not(.section-kicker),
.contact-intro p:not(.section-kicker),
.contact-card p:not(.section-kicker),
.contact-cta p:not(.section-kicker),
.portfolio-process p:not(.section-kicker),
.process-note p:not(.section-kicker),
.process-cta p:not(.section-kicker),
.studio-cta p:not(.section-kicker),
.training-apply p:not(.section-kicker) {
  max-width: var(--container-narrow);
  margin: var(--space-copy-top) auto 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  color: var(--color-muted);
}

.section-kicker,
.hero-kicker {
  display: inline-flex;
  width: fit-content;
  margin: 0 auto var(--space-kicker-title);
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  color: var(--color-soft);
  font-size: var(--font-size-body);
  line-height: var(--line-height-ui);
  font-weight: 600;
}

/* ---------- Buttons & Pills ---------- */

.button,
.cta-button,
.social-links a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-ghost);
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: var(--line-height-ui);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    color 220ms ease,
    transform 220ms ease;
}

.button::before,
.cta-button::before,
.social-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-hover);
  opacity: 0;
  transform: scale(0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    opacity 240ms ease,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.button:hover,
.button:focus-visible,
.cta-button:hover,
.cta-button:focus-visible,
.social-links a:hover,
.social-links a:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-glass);
  color: var(--color-text);
  transform: translateY(-1px);
}

.button:hover::before,
.button:focus-visible::before,
.cta-button:hover::before,
.cta-button:focus-visible::before,
.social-links a:hover::before,
.social-links a:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.button--primary,
.cta-button--primary {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
}

.button--primary::before,
.cta-button--primary::before {
  background: rgba(5, 5, 5, 0.08);
}

.button--ghost {
  background: var(--surface-subtle);
}


.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

@media (max-width: 760px) {
  .cta-actions {
    display: grid;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  position: fixed;
  left: calc(var(--edge) + 28px);
  bottom: calc(var(--edge) + 24px);
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  max-width: calc(100vw - var(--edge) * 2 - 40px);
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--font-size-meta);
  line-height: 1.2;
  color: var(--color-soft);
}

.site-footer a {
  transition: color 180ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-text);
}

:where(.page--portfolio, .page--team, .page--contact, .page--legal) .site-footer,
:where(.studio-page, .ablauf-page, .ausbildung-page, .praktikum-page) .site-footer {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(var(--container-wide), calc(100% - 30px));
  max-width: none;
  margin: clamp(72px, 10vw, 130px) auto 0;
  padding: 0 0 34px;
  justify-content: center;
  text-align: center;
  background: transparent;
}

/* ---------- Unterseiten-Hero ---------- */

.subpage-hero {
  position: relative;
  display: grid;
  min-height: min(840px, 92svh);
  margin: var(--edge);
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  padding: clamp(150px, 16vw, 220px) 20px clamp(100px, 12vw, 150px);
  text-align: center;
  background: var(--color-bg);
  contain: none;
  transform: none;
}

.subpage-hero--portfolio {
  --subpage-hero-position: center center;
  --subpage-hero-mobile-position: var(--subpage-hero-position);
}

.subpage-hero--team {
  --subpage-hero-position: center center;
  --subpage-hero-mobile-position: var(--subpage-hero-position);
}

.subpage-hero--studio {
  --subpage-hero-position: center center;
  --subpage-hero-mobile-position: var(--subpage-hero-position);
}

.subpage-hero--ausbildung {
  --subpage-hero-position: center center;
  --subpage-hero-mobile-position: var(--subpage-hero-position);
}

.subpage-hero--praktikum {
  --subpage-hero-position: center center;
  --subpage-hero-mobile-position: var(--subpage-hero-position);
}

/* Mobile Bildausschnitte der Headerbilder.
   Erster Wert = horizontal verschieben, zweiter Wert = vertikal.
   Beispiel: 42% center schiebt den Fokus eher nach links,
   58% center eher nach rechts. */
.subpage-hero--portfolio {
  --subpage-hero-mobile-position: center center;
}

.subpage-hero--team {
  --subpage-hero-mobile-position: center center;
}

.subpage-hero--studio {
  --subpage-hero-mobile-position: center center;
}

.subpage-hero--ausbildung {
  --subpage-hero-mobile-position: center center;
}

.subpage-hero--praktikum {
  --subpage-hero-mobile-position: center center;
}

.subpage-hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: var(--subpage-hero-position, center center);
  pointer-events: none;
  user-select: none;
}

.subpage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.32) 42%,
      rgba(0, 0, 0, 0.88) 82%,
      var(--color-bg) 100%
    ),
    radial-gradient(circle at center, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.56));
  pointer-events: none;
}


.subpage-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 56%;
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0), var(--color-bg) 78%);
  pointer-events: none;
}

.subpage-hero__content {
  position: relative;
  z-index: 2;
  width: min(1100px, 100%);
  margin-inline: auto;
  transform: translate3d(0, var(--subhero-content-y, 0px), 0);
  opacity: var(--subhero-content-opacity, 1);
}

.subpage-hero h1,
.legal-content h1 {
  max-width: 1100px;
  margin: 0 auto;
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-heading);
  font-weight: 700;
  text-wrap: balance;
}

.subpage-hero p {
  max-width: var(--container-narrow);
  margin: clamp(22px, 2.5vw, 34px) auto 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  color: var(--color-soft);
}

/* ---------- Video-Hover-Cursor ---------- */

.video-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  width: 190px;
  height: 190px;
  pointer-events: none;
  visibility: hidden;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  /* Kein opacity/will-change: opacity auf dem äußeren Cursor.
     Sonst entsteht ein eigener Backdrop-Kontext und der Glas-Kreis
     kann den Seiteninhalt hinter sich nicht zuverlässig weichzeichnen. */
  will-change: left, top;
}

.video-cursor.is-ready,
.video-cursor.is-visible,
.video-cursor.is-leaving {
  visibility: visible;
}

.video-cursor__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  /* Backdrop-Filter liegt direkt auf dem Element, das sichtbar wird.
     Dadurch gibt es keine isolierende Zwischenebene mehr. */
  background: rgba(5, 5, 5, 0.20);
  backdrop-filter: blur(28px) saturate(1.14);
  -webkit-backdrop-filter: blur(28px) saturate(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 38px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: scale(0.78) rotate(-4deg);
  transform-origin: center;
  transition:
    opacity 160ms ease,
    transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.video-cursor.is-visible .video-cursor__inner {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.video-cursor.is-leaving .video-cursor__inner {
  opacity: 0;
  transform: scale(0.84) rotate(3deg);
  transition-duration: 170ms, 190ms;
  transition-timing-function: ease, cubic-bezier(0.4, 0, 0.2, 1);
}

.video-cursor__text {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center;
  animation: cursorTextSpin 8.75s linear infinite;
  animation-play-state: paused;
}

.video-cursor.is-visible .video-cursor__text,
.video-cursor.is-leaving .video-cursor__text {
  animation-play-state: running;
}

.video-cursor__text text {
  fill: var(--color-text);
  font-size: var(--font-size-meta);
  font-weight: 700;
}

.video-cursor__play {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.video-cursor__play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid var(--color-bg);
  transform: translate(-38%, -50%);
}

@keyframes cursorTextSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (hover: hover) and (pointer: fine) {
  .video-hover-target,
  .video-hover-target *,
  html.has-video-cursor,
  html.has-video-cursor * {
    cursor: none !important;
  }
}

/* ---------- Video-Karten-Titel ---------- */

.showreel-card__content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 54px);
  pointer-events: none;
  text-align: center;
}

.showreel-card__content strong {
  display: block;
  max-width: min(90%, 760px);
  margin: 0 auto;
  font-size: var(--font-size-page-title);
  line-height: 1;
  text-align: center;
  text-shadow: 0 20px 70px rgba(0, 0, 0, 0.44);
}

.hero-video-card__overlay {
  pointer-events: none;
}


.hero-video-card__text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(90%, 760px);
  color: var(--color-text);
  font-size: var(--font-size-page-title);
  line-height: 1;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
}

/* ---------- Mobile gemeinsame Komponenten ---------- */

@media (max-width: 760px) {
  :root {
    --section-y: 68px;
    --section-y-tight: 50px;
    --section-y-first: 38px;
  }

  .content-section {
    width: calc(100% - 44px);
  }

  .section-pad {
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 20px;
  }

  .content-narrow,
  .section-heading {
    margin-bottom: 30px;
  }

  .button,
  .cta-button,
  .social-links a {
    width: 100%;
  }

  .site-footer {
    left: 22px;
    right: 22px;
    bottom: 26px;
    justify-content: center;
    text-align: center;
  }

  :where(.page--portfolio, .page--team, .page--contact, .page--legal) .site-footer,
  :where(.studio-page, .ablauf-page, .ausbildung-page, .praktikum-page) .site-footer {
    width: calc(100% - 44px);
    padding-bottom: 26px;
  }

  .subpage-hero {
    min-height: min(840px, calc(100svh - (var(--edge) * 2)));
    padding: clamp(150px, 16vw, 220px) 20px clamp(100px, 12vw, 150px);
  }

  .subpage-hero-image {
    object-position: var(--subpage-hero-mobile-position, var(--subpage-hero-position, center center));
  }

  .subpage-hero h1,
  .legal-content h1 {
    font-size: var(--font-size-page-title);
    line-height: var(--line-height-heading);
  }

  .subpage-hero p {
    font-size: var(--font-size-large);
  }

  .showreel-card__content strong {
    font-size: var(--font-size-page-title);
  }

  .hero-video-card__text {
    font-size: var(--font-size-section-title);
  }
}

@media (max-width: 760px) and (hover: none) and (pointer: coarse) {
  .video-cursor {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .cta-button,
  .social-links a,
  .video-cursor,
  .video-modal,
  .video-modal__dialog,
  .video-modal__close,
  .custom-player,
  .custom-player__button {
    transition: none;
  }

  .video-cursor {
    filter: none;
  }

  .video-cursor__inner {
    transition: none;
  }

  .video-cursor__text {
    animation: none;
  }
}


/* ==========================================================
   06 | Portfolio
   ========================================================== */

.page--portfolio {
  --portfolio-radius: 20px;
  min-height: 100svh;
  overflow: visible;
  background: var(--color-bg);
  color: var(--text);
}


.portfolio-main {
  width: 100%;
}


.showreel-section {
  /* Showreel bewusst in CTA-Breite; die Videogalerie bleibt wide. */
  width: min(var(--section-width-compact), calc(100% - 30px));
  padding-top: var(--section-y-first);
}

.showreel-card,
.portfolio-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--portfolio-radius);
  overflow: hidden;
  background: #121212;
  color: var(--text);
  text-align: center;
  cursor: pointer;
}


/* ---------- Video-Karten | permanenter Play-Hinweis ---------- */
.video-card-play {
  position: absolute;
  top: clamp(14px, 1.6vw, 20px);
  right: clamp(14px, 1.6vw, 20px);
  z-index: 4;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(7, 7, 7, 0.58);
  color: rgba(255, 255, 255, 0.92);
  pointer-events: none;
  /* Kein backdrop-filter: So wird der Kreis zusammen mit der
     Reveal-Animation der Karte gerendert und ploppt nicht nachträglich ein. */
  backface-visibility: hidden;
  transform: translateZ(0);
  transition:
    color 260ms ease,
    background-color 260ms ease,
    border-color 260ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.video-card-play__icon {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .showreel-card:hover .video-card-play,
  .showreel-card:focus-visible .video-card-play,
  .portfolio-card:hover .video-card-play,
  .portfolio-card:focus-visible .video-card-play,
  .hero-video-card:hover .video-card-play,
  .hero-video-card:focus-visible .video-card-play {
    border-color: var(--color-text);
    background: var(--color-text);
    color: var(--color-bg);
    transform: translate3d(3px, 0, 0);
  }
}


.showreel-card__media,
.portfolio-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #151515;
}

.showreel-card__media {
  aspect-ratio: 16 / 8.4;
}

.portfolio-card__media {
  aspect-ratio: 16 / 10;
}

.showreel-card__media::after,
.portfolio-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 46%, rgba(0, 0, 0, 0.58)),
    rgba(0, 0, 0, 0.04);
}

.showreel-card video,
.portfolio-card video,
.portfolio-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(1.01);
  transition:
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 520ms ease;
}

.showreel-card:hover video,
.showreel-card:focus-visible video,
.portfolio-card:hover video,
.portfolio-card:focus-visible video,
.portfolio-card:hover img,
.portfolio-card:focus-visible img {
  transform: scale(1.045);
  filter: brightness(1.08);
}


.portfolio-card__content span {
  font-size: var(--font-size-small);
  line-height: 1.2;
}


.gallery-section {
  margin-top: var(--section-y);
}


.portfolio-filters {
  /* Aktuell nicht benötigt: Filter bleiben im HTML/JS erhalten und können später wieder aktiviert werden. */
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 clamp(24px, 3vw, 42px);
}

.portfolio-filters button {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-size-small);
  line-height: var(--line-height-ui);
  font-weight: 500;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    transform 220ms ease;
}

.portfolio-filters button:hover,
.portfolio-filters button:focus-visible,
.portfolio-filters button.is-active {
  border-color: rgba(255, 255, 255, 0.44);
  background: var(--surface-hover);
  color: var(--text);
  transform: translateY(-1px);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.portfolio-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

.portfolio-card.is-hidden {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  pointer-events: none;
}

.portfolio-card[hidden] {
  display: none;
}

.portfolio-card__content strong {
  max-width: 100%;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}


.portfolio-process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--section-y);
  padding: clamp(44px, 6vw, 82px) clamp(20px, 5vw, 70px);
  border: 0;
  border-radius: var(--portfolio-radius);
  background: var(--color-surface-2) url("../img/portfolio/ablauf.jpg") center / cover no-repeat;
  box-shadow: none;
  text-align: center;
}

.portfolio-process h2 {
  max-width: 920px;
  margin: 0 auto;
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-heading);
  font-weight: 600;
}

.portfolio-process h2,
.portfolio-process > p {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.78);
}


.portfolio-cta {
  margin-top: var(--section-y);
  padding: clamp(54px, 7vw, 96px) clamp(20px, 5vw, 70px);
  border-radius: var(--portfolio-radius);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 42%, var(--surface-subtle));
  text-align: center;
}

.portfolio-cta h2 {
  max-width: 880px;
  margin-inline: auto;
  font-size: var(--font-size-page-title);
}

.portfolio-cta__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(26px, 3.2vw, 42px);
}


@media (max-width: 1080px) and (min-width: 761px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {


  .showreel-section {
    width: min(var(--section-width-compact), calc(100% - 44px));
    padding-top: var(--section-y-first);
  }

  .showreel-card__media {
    aspect-ratio: 4 / 5;
  }


  .gallery-section {
    margin-top: var(--section-y);
  }

  .portfolio-filters {
    gap: 7px;
  }

  .portfolio-filters button {
    min-height: 38px;
    padding: 9px 13px;
    font-size: var(--font-size-small);
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .portfolio-card__media {
    aspect-ratio: 4 / 5;
  }

  .portfolio-card__content strong {
    font-size: var(--font-size-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  

  .portfolio-process {
    margin-top: var(--section-y);
    padding: 40px 20px;
  }

  .portfolio-process h2 {
    font-size: var(--font-size-page-title);
  }


  .portfolio-cta {
    margin-top: var(--section-y);
    padding: 44px 20px;
  }

  .portfolio-cta__links {
    display: grid;
    grid-template-columns: 1fr;
  }


}


/* ==========================================================
   07 | Team
   ========================================================== */

.page--team {
  --team-radius: 20px;
  min-height: 100svh;
  overflow: visible;
  background: var(--color-bg);
  color: var(--text);
}


.team-main {
  width: 100%;
}


.team-section {
  padding-top: var(--section-y-first);
}

.team-grid {
  width: min(var(--section-width-compact), 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.team-card {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--team-radius);
  background: transparent;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

.team-card__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
}

.team-card__media::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 36%, rgba(0, 0, 0, 0.86));
  pointer-events: none;
}

.team-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  transition:
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 520ms ease;
}

.team-card:hover .team-card__media img,
.team-card:focus-within .team-card__media img {
  transform: scale(1.045);
  filter: brightness(1.08);
}

.team-card__content {
  position: absolute;
  left: clamp(18px, 2vw, 30px);
  right: clamp(18px, 2vw, 30px);
  bottom: clamp(18px, 2vw, 28px);
  z-index: 2;
  display: grid;
  gap: 6px;
  text-align: left;
}

.team-card__content h3 {
  margin: 0;
  font-size: var(--font-size-extralarge);
  line-height: var(--line-height-heading);
  font-weight: 600;
}

.team-card__content p {
  margin: 0;
  max-width: none;
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
  color: var(--color-text);
}

.bts-section {
  margin-top: var(--section-y);
  overflow: hidden;
}

.bts-marquees {
  --bts-tile-margin: 8px;
  display: grid;
  gap: 16px;
  width: 100%;
  margin-top: clamp(30px, 4vw, 56px);
  overflow: hidden;
}

.bts-marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/*
  Die BTS-Laufbänder werden als eigener Compositing-Layer verschoben.
  Dadurch werden die Video-Flächen nicht frameweise durch scrollLeft bewegt,
  was Browser-Artefakte bei Hardware-Video-Layern vermeiden kann.
*/
.bts-marquee {
  --bts-speed: 49;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bts-marquee::-webkit-scrollbar {
  display: none;
}

.bts-marquee--right {
  --bts-speed: 45;
}

.bts-marquee__track {
  display: inline-flex;
  width: max-content;
  flex-wrap: nowrap;
  align-items: center;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.bts-tile {
  display: block;
  flex: 0 0 416px;
  width: 416px;
  height: 234px;
  max-width: none;
  margin: 0 var(--bts-tile-margin);
  border-radius: var(--team-radius);
  background: #161616;
  object-fit: cover;
  object-position: center;
  transition: none !important;
  pointer-events: none;
  user-select: none;
}

img.bts-tile {
  contain: paint;
}

.bts-video-tile {
  position: relative;
  overflow: hidden;
  contain: none;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.bts-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0) scale(1.002);
  backface-visibility: hidden;
  will-change: transform;
  pointer-events: none;
}


.career-section {
  margin-top: clamp(54px, 6vw, 82px);
  margin-bottom: clamp(54px, 6vw, 82px);
}

.career-section__intro {
  margin-bottom: clamp(26px, 3vw, 38px);
}

.career-section__intro > p:not(.section-kicker) {
  max-width: 720px;
}

.career-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(var(--section-width-compact), 100%);
  margin-inline: auto;
}

.career-option {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 178px;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(22px, 2.5vw, 30px);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(15, 15, 15, 1);
  color: var(--color-text);
  transition:
    background-color 280ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.career-option__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.career-option__heading {
  min-width: 0;
}

.career-option h3 {
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: 0.96;
  font-weight: 700;
  text-wrap: balance;
}

.career-option__status {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  gap: 0;
  margin-top: 12px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  color: #000000;
  font-size: var(--font-size-small);
  line-height: 1;
  font-weight: 650;
}

.career-option--open .career-option__status {
  background: #22c55e;
}

.career-option--closed .career-option__status {
  background: #ef4444;
}

.career-option__status-label {
  display: block;
  transform: translateY(1px);
}

.career-option > p {
  max-width: 46ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

.career-option__arrow {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.74);
  transition:
    color 260ms ease,
    background-color 260ms ease,
    border-color 260ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.career-option__arrow svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .career-option:hover {
    background: rgba(255, 255, 255, 0.085);
    transform: translateY(-2px);
  }

  .career-option:hover .career-option__arrow {
    border-color: var(--color-text);
    color: var(--color-bg);
    background: var(--color-text);
    transform: translateX(3px);
  }
}

.career-option:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 4px;
}

@media (max-width: 1020px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .team-section {
    padding-top: var(--section-y-first);
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .team-card__content {
    text-align: center;
  }

  .bts-section {
    margin-top: var(--section-y);
  }

  .bts-marquees {
    --bts-gap: 10px;
    gap: var(--bts-gap);
  }

  .bts-tile {
    flex-basis: 304px;
    width: 304px;
    height: 171px;
    aspect-ratio: 16 / 9;
  }

  .career-section {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .career-section__intro {
    margin-bottom: 24px;
  }

  .career-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .career-option {
    min-height: 0;
    gap: 18px;
    padding: 20px;
  }

  .career-option h3 {
    font-size: var(--font-size-heading);
  }

  .career-option__status {
    margin-top: 9px;
  }

  .career-option > p {
    font-size: var(--font-size-body);
  }

  .career-option__arrow {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .career-option,
  .career-option__arrow {
    transition: none !important;
  }
}

@media (max-width: 430px) {
  .bts-tile {
    flex-basis: 256px;
    width: 256px;
    height: 144px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bts-marquee {
    scroll-behavior: auto;
  }
}


/* ==========================================================
   08 | Studio
   ========================================================== */

body.studio-page {
  min-height: 100%;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
}


.studio-data {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--section-y);
  padding: clamp(44px, 4.8vw, 62px) clamp(20px, 5vw, 70px);
  border-radius: var(--radius-media);
  background: var(--color-surface-2) url("../img/studio/fact.jpg") center / cover no-repeat;
}

/* Gleichmäßige Abdunklung – bewusst kein Verlauf. */
.studio-data::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.studio-data__inner {
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  margin: 0 auto;
}

.studio-data__intro {
  width: min(820px, 100%);
  margin: 0 auto clamp(24px, 3vw, 36px);
  text-align: center;
}

.studio-data__intro .section-kicker {
  margin: 0 auto var(--space-kicker-title);
}

.studio-data__intro h2 {
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: 1;
  font-weight: 700;
  text-wrap: balance;
}

.studio-data__intro > p:last-child {
  max-width: 650px;
  margin: var(--space-copy-top) auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  text-wrap: balance;
}

/* Drei ruhige Gruppen statt sechs einzelner Kacheln. */
.studio-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.studio-fact-group {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(7, 7, 7, 0.72);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.studio-fact-group__eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: clamp(20px, 2vw, 28px);
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--font-size-small);
  line-height: 1;
  font-weight: 600;
}

.studio-fact-group__metrics {
  display: grid;
  gap: clamp(16px, 1.7vw, 22px);
}

.studio-metric {
  min-width: 0;
}

.studio-metric > span {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.52);
  font-size: var(--font-size-small);
  line-height: 1;
  font-weight: 600;
}

.studio-metric strong {
  display: block;
  color: var(--color-text);
  font-size: var(--font-size-large);
  font-weight: 700;
  line-height: 1;
  text-wrap: balance;
}

.studio-fact-group > p {
  max-width: 34ch;
  margin: clamp(20px, 2vw, 26px) 0 0;
  padding-top: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

@media (max-width: 980px) {
  .studio-facts {
    grid-template-columns: 1fr;
    width: min(760px, 100%);
    margin-inline: auto;
  }

  .studio-fact-group {
    min-height: 0;
  }

  .studio-fact-group__eyebrow {
    margin-bottom: 22px;
  }

  .studio-fact-group__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-fact-group > p {
    margin-top: 20px;
    padding-top: 0;
  }
}

.option-card,
.studio-cta__box {
  border: 1px solid var(--border-subtle);
  background: rgba(15, 15, 15, 1);
  border-radius: var(--radius-card);
}

.option-grid {
  width: min(var(--section-width-wide), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.option-card {
  padding: clamp(26px, 3.4vw, 48px);
  border: 0;
}

.option-card--featured {
  background:
    radial-gradient(circle at top left, rgba(50, 50, 50, 1), transparent 42%),
    rgba(15, 15, 15, 1);
}

.option-card__tag {
  display: flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  margin: 0 0 20px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-hover);
  color: var(--color-text-soft);
  font-size: var(--font-size-small);
  line-height: 1;
  font-weight: 600;
}

.option-card h3 {
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-heading);
}

.option-card p {
  margin: 20px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
}

.option-card ul {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-body);
}

.option-card li {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.8);
}

.option-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  transform: translateY(-50%);
}

.studio-slider {
  width: calc(100% + var(--section-x) + var(--section-x));
  max-width: none;
  margin-left: calc(0px - var(--section-x));
  margin-right: calc(0px - var(--section-x));
}

.studio-slider__top {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
  padding: 0 clamp(20px, 4vw, 70px);
}

.studio-slider__buttons {
  display: flex;
  gap: 10px;
}

.slider-btn {
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}

.slider-btn:hover,
.slider-btn:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.32);
}

.studio-slider__viewport {
  width: 100%;
  overflow: hidden;
  overflow-y: hidden;
}

.studio-slider__track {
  --slide-gap: 16px;
  --slides-visible: 2.35;
  --slider-edge: clamp(20px, 4vw, 70px);
  display: flex;
  gap: var(--slide-gap);
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 var(--slider-edge) 8px;
  scrollbar-width: none;
  scroll-padding-left: var(--slider-edge);
  scroll-padding-right: var(--slider-edge);
}

.studio-slider__track::-webkit-scrollbar {
  display: none;
}

.studio-slide {
  flex: 0 0 calc((100% - (var(--slide-gap) * (var(--slides-visible) - 1))) / var(--slides-visible));
  aspect-ratio: 6 / 5;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.studio-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-cta {
  padding-top: var(--section-y-tight);
}

.studio-cta__box {
  width: min(var(--section-width-compact), 100%);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 70px);
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.14), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
}


@media (max-width: 900px) {
  .option-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {


  .studio-data {
    width: min(var(--section-width-compact), calc(100% - 44px));
    padding: 30px 10px 10px;
    background-position: center;
  }

  .studio-data__intro {
    padding-inline: 8px;
    margin-bottom: 22px;
  }

  .studio-data__intro h2 {
    font-size: var(--font-size-page-title);
  }

  .studio-data__intro > p:last-child {
    margin-top: 18px;
    font-size: var(--font-size-small);
  }

  .studio-facts {
    gap: 10px;
  }

  .studio-fact-group {
    padding: 20px;
    border-radius: 17px;
  }

  .studio-fact-group__metrics {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .studio-metric strong {
    font-size: var(--font-size-heading);
  }

  .studio-fact-group > p {
    margin-top: 18px;
    font-size: var(--font-size-meta);
  }

  .option-card {
    padding: 22px;
    border-radius: var(--radius-card);
  }

  .studio-slider__top {
    justify-content: center;
    padding: 0 20px;
  }

  .studio-slider__track {
    --slide-gap: 12px;
    --slides-visible: 1.18;
    --slider-edge: 20px;
    padding: 0 var(--slider-edge) 8px;
  }

  .studio-slide {
    aspect-ratio: 6 / 5;
    border-radius: var(--radius-card);
  }

  .studio-cta__box {
    padding: 28px 20px;
    border-radius: var(--radius-card);
  }

}

@media (prefers-reduced-motion: reduce) {
  .studio-slider__track {
    scroll-behavior: auto;
  }
}


/* ==========================================================
   09 | Kontakt
   ========================================================== */

.page--contact {
  min-height: 100svh;
  overflow: visible;
  background: var(--color-bg);
  color: var(--text);
}


.contact-main {
  width: min(var(--section-width-wide), calc(100% - 30px));
  margin-inline: auto;
  padding: clamp(112px, 10vw, 146px) 0 0;
}

.contact-intro {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.contact-intro h1,
.contact-card h2,
.contact-cta h2 {
  margin: 0;
  line-height: var(--line-height-heading);
  font-weight: 600;
}

.contact-intro h1 {
  max-width: var(--section-width-compact);
  margin-inline: auto;
  font-size: var(--font-size-page-title) !important;
}

.contact-intro p {
  max-width: 760px;
  margin: clamp(10px, 1.5vw, 18px) auto 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.74);
}

.contact-content {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: 10px;
  align-items: stretch;
  margin-top: var(--section-y-tight);
}

.contact-card {
  padding: clamp(18px, 1.8vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.contact-card--info {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  background:
    linear-gradient(to bottom, var(--surface-strong), rgba(255, 255, 255, 0.03)),
    radial-gradient(circle at 24% 16%, var(--surface-strong), transparent 34vw),
    var(--surface-ghost);
}

.contact-card--hint {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background:
    linear-gradient(135deg, var(--surface-hover), rgba(255, 255, 255, 0.035)),
    var(--surface-ghost);
}

.contact-card h2 {
  max-width: 720px;
  font-size: var(--font-size-heading);
}

.contact-card--info .contact-card__head h2 {
  font-size: var(--font-size-section-title);
}

.contact-card p,
.contact-card address,
.contact-card li,
.contact-info-copy {
  max-width: 680px;
  margin: 8px 0 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-body);
  font-style: normal;
  font-weight: 400;
  color: var(--color-text);
}

.contact-info-list {
  display: grid;
  gap: 0;
}

.contact-info-item {
  display: grid;
  grid-template-columns: minmax(112px, 0.24fr) minmax(0, 0.76fr);
  grid-template-areas:
    "label value"
    "label copy";
  column-gap: clamp(16px, 2vw, 30px);
  padding: clamp(10px, 1.35vw, 16px) 0;
  border-top: 1px solid var(--border-faint);
}

.contact-info-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.contact-info-item:last-child {
  padding-bottom: 0;
}

.contact-info-label {
  grid-area: label;
  margin: 0;
  padding-top: 0.36em;
}

.contact-info-item .contact-link,
.contact-info-item address,
.contact-info-item .social-links {
  grid-area: value;
}

.contact-info-copy {
  grid-area: copy;
  margin-top: 5px;
}

.contact-card ul {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.contact-card li {
  position: relative;
  margin: 0;
  padding-left: 18px;
}

.contact-card li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.75;
}

.contact-link {
  display: inline-flex;
  width: fit-content;
  margin-top: 0;
  font-size: var(--font-size-large);
  line-height: 1.08;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.contact-link--big {
  font-size: var(--font-size-large);
}

.contact-link:hover,
.contact-link:focus-visible {
  opacity: 0.72;
  transform: translateY(-1px);
}

.social-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
}


.contact-faq {
  max-width: var(--section-width-compact);
  margin: var(--section-y-tight) auto 0;
  text-align: left;
}

.contact-faq h2 {
  max-width: 760px;
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: 600;
}

.contact-faq__intro {
  max-width: 760px;
  margin: 10px 0 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  color: var(--color-text);
}

.contact-faq__list {
  display: grid;
  gap: 0;
  margin-top: clamp(22px, 2.8vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-faq details {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-faq summary {
  position: relative;
  display: block;
  padding: 18px 42px 18px 0;
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  font-weight: 600;
  list-style: none;
}

.contact-faq summary::-webkit-details-marker {
  display: none;
}

.contact-faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: var(--color-bg);
  background: var(--color-text);
  transform: translateY(-50%);
  transition: transform 180ms ease;
}

.contact-faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.contact-faq details p {
  max-width: 760px;
  margin: 0;
  padding: 0 42px 18px 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

.contact-cta {
  max-width: var(--section-width-compact);
  margin: var(--section-y-tight) auto 0;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--radius-card);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    var(--surface-ghost);
}

.contact-cta h2 {
  font-size: var(--font-size-large);
}

.contact-cta p {
  max-width: 680px;
  margin: 10px auto 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.contact-cta__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}


@media (max-width: 1100px) {
  .contact-content {
    grid-template-columns: 1fr;
  }

  .contact-card--hint {
    min-height: auto;
  }
}

@media (max-width: 760px) {

  .contact-main {
    width: calc(100% - 20px);
    padding-top: 112px;
  }

  .contact-intro {
    text-align: left;
  }

  .contact-intro h1 {
    font-size: var(--font-size-page-title);
  }

  .contact-intro p {
    margin-inline: 0;
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
  }

  .contact-content {
    gap: 8px;
    margin-top: 34px;
  }

  .contact-card {
    padding: 18px 15px;
    border-radius: var(--radius-card);
  }

  .contact-card--info {
    gap: 20px;
  }

  .contact-card h2,
  .contact-card--info .contact-card__head h2 {
    font-size: var(--font-size-heading);
  }

  .contact-info-item {
    display: block;
    padding: 13px 0;
  }

  .contact-info-label {
    margin-bottom: 6px;
    padding-top: 0;
  }

  .contact-card p,
  .contact-card address,
  .contact-card li,
  .contact-info-copy {
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
  }

  .contact-info-copy {
    margin-top: 8px;
  }

  .contact-link,
  .contact-link--big {
    font-size: var(--font-size-heading);
    word-break: break-word;
  }

  .social-links {
    align-items: stretch;
  }

  .contact-faq {
    margin-top: 34px;
  }

  .contact-faq h2 {
    font-size: var(--font-size-heading);
  }

  .contact-faq summary {
    padding: 16px 38px 16px 0;
  }

  .contact-faq details p {
    padding: 0 0 16px 0;
  }

  .contact-cta {
    margin-top: 32px;
    padding: 22px 16px;
    text-align: left;
  }

  .contact-cta h2 {
    font-size: var(--font-size-heading);
  }

  .contact-cta p {
    margin-inline: 0;
    font-size: var(--font-size-small);
  }

  .contact-cta__links {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

}


/* ==========================================================
   10 | Ablauf
   ========================================================== */

body.ablauf-page {
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
}


.process-video-hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 150px clamp(20px, 4vw, 70px) 80px;
  background: transparent;
}

.process-video-hero__inner {
  width: min(var(--section-width-wide), 100%);
  margin: 0 auto;
  text-align: center;
}


.process-video-hero h1 {
  max-width: 1050px;
  margin: 0 auto;
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-heading);
  font-weight: 800;
}

.process-video-hero__inner > p:not(.section-kicker) {
  max-width: 760px;
  margin: 26px auto 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  color: var(--color-soft);
}

.hero-video-card {
  position: relative;
  display: block;
  width: min(var(--section-width-compact), 100%);
  aspect-ratio: 16 / 9;
  margin: clamp(34px, 5vw, 66px) auto 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  color: var(--color-text);
  background: var(--color-surface-2);
  cursor: pointer;
}

.hero-video-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.42)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42));
  pointer-events: none;
}


.process-journey {
  padding-bottom: 0;
}

.process-journey__layout {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.35fr);
  gap: clamp(56px, 8vw, 118px);
  align-items: start;
}

.process-journey__intro {
  position: sticky;
  top: 150px;
  align-self: start;
  max-width: 470px;
}

.process-journey__intro .section-kicker {
  color: rgba(255, 255, 255, 0.58);
}

.process-journey__intro h2 {
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-heading);
  font-weight: 700;
  text-wrap: balance;
}

.process-journey__intro > p:not(.section-kicker) {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--font-size-large);
  line-height: var(--line-height-body);
}

/* Der separate Schrittzähler wurde bewusst entfernt. */

.process-timeline {
  --process-step-gap: clamp(24px, 3.5vw, 44px);
  --process-marker-left: -84px;
  --process-marker-size: 64px;
  --process-connector-x: -52px;
  --process-connector-start: 60px;
  position: relative;
  min-width: 0;
  padding-left: 84px;
}

.process-timeline__track,
.process-timeline__progress {
  display: none;
}

.process-step {
  --process-connector-progress: 0;
  position: relative;
  margin-bottom: var(--process-step-gap);
  padding: 2px 0 clamp(30px, 4vw, 48px);
  background: transparent;
}

.process-step:not(:last-child)::before,
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--process-connector-start);
  bottom: calc(4px - var(--process-step-gap));
  left: var(--process-connector-x);
  z-index: 0;
  width: 1px;
  pointer-events: none;
}

.process-step:not(:last-child)::before {
  background: var(--surface-strong);
}

.process-step:not(:last-child)::after {
  background: var(--color-text-soft);
  transform: scaleY(var(--process-connector-progress));
  transform-origin: 50% 0%;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.process-step:last-child {
  margin-bottom: 0;
}

.process-step__content {
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js .process-step__content {
  opacity: 0.38;
}

.js .process-step.is-past .process-step__content {
  opacity: 0.7;
}

.js .process-step.is-active .process-step__content {
  opacity: 1;
}

.process-step__marker {
  position: absolute;
  top: -4px;
  left: var(--process-marker-left);
  z-index: 2;
  display: grid;
  width: var(--process-marker-size);
  height: var(--process-marker-size);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: #090909;
  color: rgba(255, 255, 255, 0.48);
  opacity: 1;
  transition:
    color 380ms ease,
    background-color 380ms ease,
    border-color 380ms ease,
    box-shadow 380ms ease;
}

.process-step.is-past .process-step__marker {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

.process-step.is-active .process-step__marker {
  color: var(--color-bg);
  border-color: var(--color-text);
  background: var(--color-text);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.055);
}

.process-step__number {
  font-size: var(--font-size-large);
  line-height: var(--line-height-ui);
  padding-top: 5px;
  font-weight: 800;
}

.process-step h3 {
  max-width: 720px;
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: 700;
  text-wrap: balance;
}

.process-step p {
  max-width: 720px;
  margin: 15px 0 0;
  color: rgba(255, 255, 255, 0.67);
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
}

.process-step ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.process-step li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.process-note {
  padding-top: var(--section-y-tight);
  text-align: center;
}

.process-cta__box {
  width: min(var(--section-width-compact), 100%);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 68px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  text-align: center;
}

.process-cta {
  padding-top: var(--section-y-tight);
}

.process-cta__box {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.14), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
}


@media (max-width: 760px) {

  .process-video-hero {
    min-height: auto;
    padding: 128px 20px 58px;
  }

  .process-video-hero h1 {
    font-size: var(--font-size-page-title);
  }

  .hero-video-card {
    border-radius: var(--radius-card);
  }


  .process-journey__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .process-journey__intro {
    position: static;
    max-width: 760px;
    text-align: center;
  }

  .process-journey__intro .section-kicker {
    text-align: center;
  }

  .process-journey__intro > p:not(.section-kicker) {
    margin-inline: auto;
  }

  .process-timeline {
    --process-step-gap: 28px;
    --process-marker-left: -66px;
    --process-marker-size: 52px;
    --process-connector-x: -40px;
    --process-connector-start: 48px;
    padding-left: 66px;
  }

  .process-step {
    padding-bottom: 30px;
  }

  .process-step__number {
    font-size: var(--font-size-body);
    padding-top: 1px;
  }

  .process-step ul {
    display: grid;
    grid-template-columns: 1fr;
  }

  .process-step li {
    justify-content: flex-start;
    border-radius: var(--radius-ui);
    line-height: var(--line-height-compact);
  }

  .process-cta__box {
    padding: 28px 20px;
  }


}


@media (prefers-reduced-motion: reduce) {
  .process-step::before,
  .process-step::after,
  .process-step__content,
  .process-step__marker {
    transition: none !important;
  }

  .js .process-step__content {
    opacity: 1;
  }
}

/* ==========================================================
   11 | Ausbildung
   ========================================================== */

body.ausbildung-page {
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
}


.status-card,
.fact-card,
.learn-grid article,
.timeline-item,
.school-box,
.apply-grid article,
.training-cta__box {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.055);
}

.status-card {
  width: min(var(--section-width-compact), 100%);
  margin: clamp(30px, 5vw, 56px) auto 0;
  padding: clamp(26px, 4vw, 48px);
  text-align: center;
  background:
    radial-gradient(circle at top, var(--surface-strong), transparent 44%),
    rgba(255, 255, 255, 0.055);
}

.status-card__badge {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  color: var(--color-bg);
  background: var(--color-text);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-ui);
  font-weight: 800;
}

.status-card h3 {
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-ui);
}

.status-card p {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.facts-grid {
  width: min(var(--section-width-wide), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.fact-card {
  padding: clamp(20px, 2.6vw, 34px);
}


.fact-card span,
.school-box span {
  display: block;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.fact-card strong,
.school-box strong {
  display: block;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
}

.fact-card p,
.school-box p {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.62);
  line-height: var(--line-height-body);
  font-size: var(--font-size-small);
}

.learn-grid,
.apply-grid {
  width: min(var(--section-width-wide), 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.learn-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.learn-grid article,
.apply-grid article {
  padding: clamp(22px, 3vw, 38px);
}

.learn-grid h3,
.apply-grid h3 {
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
}

.learn-grid p {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.64);
  line-height: var(--line-height-body);
}

.training-timeline {
  width: min(var(--section-width-compact), 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  padding: clamp(24px, 3.4vw, 46px);
}

.timeline-item__number {
  color: rgba(255, 255, 255, 0.32);
  font-size: var(--font-size-page-title);
  line-height: 0.9;
  font-weight: 800;
}

.timeline-item h3 {
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-ui);
}

.timeline-item p {
  margin: 16px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.split-layout {
  width: min(var(--section-width-wide), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
  gap: clamp(18px, 4vw, 54px);
  align-items: center;
}

.school-box {
  padding: clamp(24px, 3.4vw, 44px);
}

.school-box__note {
  padding-top: 16px;
  border-top: 1px solid var(--border-faint);
}

.apply-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.apply-grid ul {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.apply-grid li {
  position: relative;
  padding-left: 18px;
  color: var(--color-text);
  line-height: var(--line-height-body);
}

.apply-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.training-cta {
  padding-top: var(--section-y-tight);
}

.training-cta__box {
  width: min(var(--section-width-compact), 100%);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 70px);
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.14), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
}


@media (max-width: 1060px) {
  .facts-grid,
  .learn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {


  .status-card,
  .fact-card,
  .learn-grid article,
  .timeline-item,
  .school-box,
  .apply-grid article,
  .training-cta__box {
    border-radius: var(--radius-card);
  }

  .facts-grid,
  .learn-grid,
  .apply-grid,
  .split-layout {
    grid-template-columns: 1fr;
  }

  

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
  }

  .timeline-item__number {
    font-size: var(--font-size-heading);
  }

  .training-cta__box {
    padding: 28px 20px;
  }

}


/* ==========================================================
   12 | Rechtliches
   ========================================================== */

.page--legal {
  min-height: 100svh;
  overflow: visible;
  color: var(--text);
}


.legal-main {
  width: min(var(--section-width-compact), calc(100% - 30px));
  margin-inline: auto;
  padding: clamp(150px, 16vw, 210px) 0 clamp(72px, 9vw, 130px);
}

.legal-content {
  text-align: left;
}

.legal-content h1 {
  max-width: var(--container-text);
  margin: 0 0 clamp(28px, 4vw, 54px);
  font-size: var(--font-size-display);
  line-height: var(--line-height-heading);
  font-weight: 600;
}

.legal-section {
  padding: clamp(28px, 4vw, 54px) 0;
  border-top: 1px solid var(--border-subtle);
}

.legal-section:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.legal-section h2 {
  max-width: 780px;
  margin: 0 0 18px;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: 600;
}

.legal-content p,
.legal-content dd,
.legal-content li {
  max-width: 760px;
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.74);
}

.legal-content p + p {
  margin-top: 16px;
}

.legal-content a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.legal-content a:hover,
.legal-content a:focus-visible {
  color: var(--color-text);
}


.legal-data-list {
  display: grid;
  gap: 18px;
  max-width: 760px;
  margin: 0;
}

.legal-data-list div {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) 1fr;
  gap: 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-data-list div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.legal-data-list dt {
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.52);
}

.legal-data-list dd {
  margin: 0;
}


@media (max-width: 760px) {

  .legal-main {
    width: min(100% - 44px, var(--section-width-compact));
    padding-top: 136px;
  }

  .legal-data-list div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

}


/* ==========================================================
   13 | Typografie
   ========================================================== */

.subpage-hero h1,
.legal-content h1 {
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-heading);
  font-weight: 800;
}

.section-heading h2,
.content-narrow h2,
.contact-intro h1,
.contact-card h2,
.contact-cta h2,
.process-note h2,
.process-cta h2,
.studio-cta h2,
.training-apply h2,
.legal-section h2 {
  font-size: var(--font-size-section-title);
}

.section-heading p:not(.section-kicker),
.content-narrow p:not(.section-kicker),
.contact-intro p:not(.section-kicker),
.contact-card p:not(.section-kicker),
.contact-cta p:not(.section-kicker),
.portfolio-process p:not(.section-kicker),
.process-note p:not(.section-kicker),
.process-cta p:not(.section-kicker),
.studio-cta p:not(.section-kicker),
.training-apply p:not(.section-kicker) {
  font-size: var(--font-size-large);
}



/* ==========================================================
   14 | Animationen und gemeinsame Zustände
   ========================================================== */

.page--portfolio,
.page--team,
.page--contact,
.page--legal {
  overflow: visible;
}


@media (max-width: 760px) {
}

.primary-nav a[aria-current],
.primary-nav a.is-current,
.primary-nav a.is-active {
  color: #ffffff;
}

.primary-nav a[aria-current]:hover,
.primary-nav a.is-current:hover,
.primary-nav a.is-active:hover,
.primary-nav a[aria-current]:focus-visible,
.primary-nav a.is-current:focus-visible,
.primary-nav a.is-active:focus-visible {
  color: var(--text, var(--color-text));
}

/* ==========================================================
   Scroll- und FAQ-Animationen
   Kleine, ruhige Animationen im Apple-Stil: weich, dezent,
   ohne dass die Seite nach PowerPoint aussieht.
   ========================================================== */

:root {
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-slow: 900ms;
  --motion-medium: 520ms;
  --reveal-y: 34px;
  --reveal-blur: 10px;

  /* Diese Werte werden per JS beim Scrollen aktualisiert. */
  --home-video-scale: 1;
  --home-title-y: 0px;
  --home-title-opacity: 1;
  --subhero-y: 0px;
  --subhero-scale: 1.022;
  --subhero-brightness: 1;
  --subhero-content-y: 0px;
  --subhero-content-opacity: 1;
}

/* Nur aktiv, wenn JS läuft. Ohne JS bleibt alles normal sichtbar. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0) scale(0.985);
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease),
    filter var(--motion-slow) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* Startseite: leichte Scroll-Reaktion auf Video und Headline. */
.js .hero-media {
  transform: scale(var(--home-video-scale));
  transform-origin: center;
  will-change: transform;
}

.js .hero-title {
  transform: translate3d(0, var(--home-title-y), 0);
  opacity: var(--home-title-opacity);
  will-change: transform, opacity;
}


/* Kleine Karten bekommen minimal andere Bewegung, dadurch wirkt es organischer. */
.js .portfolio-card.reveal,
.js .team-card.reveal,
.js .data-card.reveal,
.js .fact-card.reveal,
.js .job-card.reveal,
.js .contact-card.reveal {
  --reveal-y: 26px;
  --reveal-blur: 8px;
}

/* FAQ: smooth auf/zu. Das JS animiert die Höhe. */
.contact-faq details,
.faq-list details {
  overflow: hidden;
}

.contact-faq details.is-animating,
.faq-list details.is-animating {
  transition: height 360ms var(--motion-ease);
}

.contact-faq summary,
.faq-list summary {
  -webkit-tap-highlight-color: transparent;
}

.contact-faq summary::after,
.faq-list summary::after {
  transition:
    transform 260ms var(--motion-ease),
    background-color 260ms var(--motion-ease),
    color 260ms var(--motion-ease);
}

/* Falls deine FAQ ein Plus-Symbol über ::after nutzt, rotiert es beim Öffnen weich. */
.contact-faq details[open] summary::after,
.faq-list details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Tastatur-Fokus etwas sauberer sichtbar machen. */
.contact-faq summary:focus-visible,
.faq-list summary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 4px;
  border-radius: 8px;
}


.js .process-video-hero .hero-video-card,
.js .showreel-card,
.js .portfolio-card,
.js .team-card,
.js .contact-card,
.js .data-card,
.js .fact-card,
.js .option-card,
.js .timeline-item {
  will-change: opacity, transform, filter;
}

body.menu-open .reveal {
  transition-delay: 0ms;
}


/* ==========================================================
   15 | Gemeinsame Feinschliffe
   ========================================================== */

.subpage-hero h1,
.process-video-hero h1 {
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

.section-kicker,
.hero-kicker {
  display: block;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-soft);
  line-height: var(--line-height-ui);
  font-weight: 600;
}

.section-kicker,
.hero-kicker {
  margin: 0 0 var(--space-kicker-title);
  font-size: var(--font-size-body);
  line-height: var(--line-height-ui);
}

/* Einheitlicher Abstand zwischen Kicker und direkt folgender Überschrift.
   So beeinflussen seitenspezifische Heading-Margins diesen Abstand nicht. */
.section-kicker + :is(h1, h2, h3) {
  margin-top: 0;
}

.subpage-hero .hero-kicker,
.process-video-hero .section-kicker {
  margin-inline: auto;
  text-align: center;
}


.hero-video-card {
  isolation: isolate;
}

.hero-video-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 54px);
  pointer-events: none;
  text-align: center;
}

.hero-video-card__text {
  display: block;
  max-width: min(90%, 760px);
  margin: 0 auto;
}

.portfolio-card {
  position: relative;
  isolation: isolate;
  background: #121212;
}

.portfolio-card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(18px, 3vw, 34px);
  pointer-events: none;
  text-align: center;
  color: var(--color-text);
  background: transparent;
}

.portfolio-card__content span {
  max-width: 100%;
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-card__content strong {
  display: block;
  max-width: 100%;
  color: var(--color-text);
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: 700;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.portfolio-card__media::after {
  z-index: 1;
}

.contact-card__label,
.contact-info-label {
  font-size: var(--font-size-small);
}

@media (max-width: 760px) {
  .subpage-hero h1,
  .process-video-hero h1 {
    font-size: var(--font-size-page-title);
  }

  .portfolio-card__content strong {
    font-size: var(--font-size-heading);
  }

  .portfolio-card__content span {
    font-size: var(--font-size-meta);
  }
}


/* ==========================================================
   Unterseiten-Hero | Scrollpfeil
   ========================================================== */

.subpage-hero--portfolio .subpage-hero__content,
.subpage-hero--team .subpage-hero__content,
.subpage-hero--studio .subpage-hero__content,
.subpage-hero--ausbildung .subpage-hero__content,
.subpage-hero--praktikum .subpage-hero__content {
  position: relative;
}

.subpage-hero--portfolio .subpage-hero__content::after,
.subpage-hero--team .subpage-hero__content::after,
.subpage-hero--studio .subpage-hero__content::after,
.subpage-hero--ausbildung .subpage-hero__content::after,
.subpage-hero--praktikum .subpage-hero__content::after {
  content: "";
  display: block;
  width: clamp(18px, 1.8vw, 26px);
  height: clamp(18px, 1.8vw, 26px);
  margin: clamp(34px, 4vw, 56px) auto 0;
  border-right: 2px solid rgba(255, 255, 255, 0.82);
  border-bottom: 2px solid rgba(255, 255, 255, 0.82);
  transform: rotate(45deg);
  opacity: 0.86;
  animation: subpageScrollArrow 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes subpageScrollArrow {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(45deg);
    opacity: 0.42;
  }

  45% {
    transform: translate3d(0, 10px, 0) rotate(45deg);
    opacity: 0.95;
  }
}

@media (max-width: 760px) {
  .subpage-hero--portfolio .subpage-hero__content::after,
  .subpage-hero--team .subpage-hero__content::after,
  .subpage-hero--studio .subpage-hero__content::after,
  .subpage-hero--ausbildung .subpage-hero__content::after,
  .subpage-hero--praktikum .subpage-hero__content::after {
    width: 18px;
    height: 18px;
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subpage-hero--portfolio .subpage-hero__content::after,
  .subpage-hero--team .subpage-hero__content::after,
  .subpage-hero--studio .subpage-hero__content::after,
  .subpage-hero--ausbildung .subpage-hero__content::after,
  .subpage-hero--praktikum .subpage-hero__content::after {
    animation: none;
  }
}


/* ==========================================================
   Studio | Slider-Icons
   ========================================================== */

.slider-btn {
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: var(--line-height-ui);
}

.slider-btn__icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Das Pfeil-Icon bleibt beim Hover bewusst statisch.
   Der Button selbst darf weiterhin Farbe/Hintergrund ändern. */
.slider-btn__icon {
  transform: none;
  transition: none;
}


/* ==========================================================
   Kontakt | FAQ-Icons
   ========================================================== */

.contact-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
}

.contact-faq summary::after,
.faq-list summary::after {
  display: none;
  content: none;
}

.contact-faq__question-text {
  min-width: 0;
}

.contact-faq__icon {
  flex: 0 0 auto;
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.07);
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.faq-icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.contact-faq summary:hover .contact-faq__icon,
.contact-faq summary:focus-visible .contact-faq__icon {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.15);
}

.contact-faq details[open] .faq-icon {
  transform: rotate(45deg);
}

.contact-faq details p {
  padding-right: 60px;
}

@media (max-width: 760px) {
  .contact-faq summary {
    gap: 14px;
  }

  .contact-faq__icon {
    width: 38px;
    height: 38px;
  }

  .faq-icon {
    width: 20px;
    height: 20px;
  }

  .contact-faq details p {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-faq__icon,
  .faq-icon {
    transition: none;
  }
}

/* ==========================================================
   Team | Leistungen
   Offene Leistungszeilen mit ruhiger Scroll-Inszenierung
   ========================================================== */

.services-section {
  margin-top: var(--section-y);
  padding-top: 0;
}

.services-section__header {
  width: min(840px, 100%);
  margin-bottom: clamp(30px, 3.6vw, 48px);
  text-align: center;
}

.services-section__header h2 {
  margin: 0;
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-heading);
  font-weight: 700;
  text-wrap: balance;
}

.services-section__header > p:last-child {
  max-width: 760px;
  margin: clamp(16px, 2vw, 22px) auto 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  text-wrap: balance;
}

.services-list {
  position: relative;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.services-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 112px;
}

.services-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  transform-origin: left center;
}

.service-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(18px, 2vw, 32px);
  padding: clamp(22px, 2.3vw, 30px) clamp(22px, 2.6vw, 36px);
  transition:
    background-color 260ms ease,
    color 260ms ease;
}

.service-item + .service-item {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.service-item h3 {
  margin: 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  font-weight: 700;
  text-wrap: balance;
}

.service-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.61);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

/* Scroll-Animation nur bei aktivem JavaScript. */
.js .services-row::before {
  transform: scaleX(0);
  opacity: 0.55;
  transition:
    transform 780ms var(--motion-ease),
    opacity 520ms ease;
}

.js .services-row .service-item {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity 680ms var(--motion-ease),
    transform 680ms var(--motion-ease),
    background-color 260ms ease,
    color 260ms ease;
}

.js .services-row .service-item:nth-child(2) {
  transform: translateX(18px);
}

.js .services-row.is-visible::before {
  transform: scaleX(1);
  opacity: 1;
}

.js .services-row.is-visible .service-item {
  opacity: 1;
  transform: translateX(0);
}

.js .services-row.is-visible .service-item:nth-child(2) {
  transition-delay: 90ms, 90ms, 0ms, 0ms;
}

@media (hover: hover) {
  .service-item:hover {
    background: rgba(255, 255, 255, 0.045);
  }

  .service-item:hover p {
    color: rgba(255, 255, 255, 0.76);
  }
}

.team-section {
  margin-top: 0;
}

.bts-section {
  margin-top: var(--section-y);
}

/* Mehr Luft zwischen Behind the Scenes und dem abschließenden CTA. */
.team-cta {
  margin-top: var(--section-y);
}

@media (max-width: 1080px) {
  .service-item {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}

@media (max-width: 760px) {
  .services-section__header {
    margin-bottom: 26px;
  }

  .services-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .service-item {
    padding: 21px 2px 22px;
  }

  .service-item + .service-item {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
  }

  .js .services-row .service-item,
  .js .services-row .service-item:nth-child(2) {
    transform: translateY(14px);
  }

  .js .services-row.is-visible .service-item,
  .js .services-row.is-visible .service-item:nth-child(2) {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-item,
  .service-item p,
  .services-row::before {
    transition: none !important;
  }

  .js .services-row::before {
    transform: scaleX(1);
    opacity: 1;
  }

  .js .services-row .service-item,
  .js .services-row .service-item:nth-child(2) {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================
   Rechtliches | Typografie
   ========================================================== */

.legal-content h1 {
  max-width: 1100px;
  margin: 0 0 clamp(28px, 4vw, 54px);
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-heading);
  font-weight: 700;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.legal-section h2 {
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: 600;
}

@media (max-width: 760px) {
  .legal-content h1 {
    font-size: var(--font-size-page-title);
    line-height: var(--line-height-ui);
  }

  .legal-section h2 {
    font-size: var(--font-size-heading);
  }
}


/* ==========================================================
   Ausbildung | Kachel-Layout
   ========================================================== */

.facts-grid {
  align-items: stretch;
}

.fact-card--wide {
  grid-column: span 2;
}

.fact-card strong,
.school-box strong {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.fact-card strong {
  font-size: var(--font-size-heading);
}

.learn-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.learn-grid h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 760px) {
  .fact-card--wide {
    grid-column: auto;
  }

  .learn-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   Navigation | Mobile Kontrast
   ========================================================== */

@media (max-width: 760px) {


  .logo {
    filter:
      drop-shadow(0 18px 38px rgba(0, 0, 0, 0.78))
      drop-shadow(0 5px 14px rgba(0, 0, 0, 0.62));
  }

  .nav-toggle {
    background: #000000;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-toggle span {
    filter: none;
  }

  .primary-nav {
    gap: clamp(10px, 2.2vh, 18px);
  }

  .primary-nav a,
  .primary-nav a[aria-current],
  .primary-nav a.is-current,
  .primary-nav a.is-active {
    padding: 0.12em 0.38em 0.18em;
    border-radius: var(--radius-pill);
  }

  .primary-nav a::before {
    inset: -0.06em -0.22em;
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    transform: scale(0.88);
  }

  .primary-nav a:hover::before,
  .primary-nav a:focus-visible::before,
  .primary-nav a:active::before {
    opacity: 1;
    transform: scale(1);
  }
}


/* ==========================================================
   Studio | Full-Bleed 3D-Bild
   ========================================================== */

.studio-3d-section {
  width: 100vw;
  margin-top: clamp(18px, 3vw, 42px);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--section-y);
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.studio-3d-image {
  width: 100%;
  height: clamp(360px, 56vw, 760px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
}

.studio-3d-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 760px) {
  .studio-3d-section {
    margin-top: 18px;
    margin-bottom: var(--section-y);
  }

  .studio-3d-image {
    height: clamp(360px, 88vw, 560px);
  }

  .studio-3d-image img {
    width: 122vw;
    max-width: none;
    margin-left: -11vw;
  }
}


/* ==========================================================
   Studio | Slider-Bildkanten
   ========================================================== */

.studio-slider__track {
  padding-top: 3px;
  padding-bottom: 10px;
}

.studio-slide {
  border-radius: 22px;
  overflow: hidden;
  clip-path: inset(0 round 22px);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.studio-slide img {
  border-radius: inherit;
  object-position: center top;
  transform: translateZ(0);
}

@media (max-width: 760px) {
  .studio-slider__track {
    padding-top: 3px;
    padding-bottom: 10px;
  }

  .studio-slide {
    border-radius: var(--radius-card);
    clip-path: inset(0 round 20px);
  }
}

/* ==========================================================
   Gemeinsame CTAs
   ========================================================== */


.cta-section {
  text-align: center;
}

.portfolio-cta.cta-section,
.contact-cta.cta-section {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.cta-box {
  width: min(var(--section-width-compact), 100%);
  margin-inline: auto;
  padding: clamp(34px, 5vw, 70px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.14), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
}

.cta-box h2 {
  max-width: 880px;
  margin: 0 auto;
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

.cta-box p:not(.section-kicker) {
  max-width: var(--container-narrow);
  margin: clamp(16px, 2vw, 26px) auto 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  color: var(--color-muted);
}

.cta-box .section-kicker {
  margin-inline: auto;
}

.cta-actions,
.portfolio-cta__links.cta-actions,
.contact-cta__links.cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
}

@media (max-width: 760px) {
  .cta-box {
    padding: 28px 20px;
    border-radius: var(--radius-card);
  }

  .cta-box h2 {
    font-size: var(--font-size-heading);
  }

  .cta-actions,
  .portfolio-cta__links.cta-actions,
  .contact-cta__links.cta-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}



/* ==========================================================
   16 | Praktikum
   ========================================================== */

body.praktikum-page {
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
}

.internship-status,
.internship-card,
.internship-list-box,
.internship-apply .apply-grid article {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.055);
}

.internship-status {
  width: min(var(--section-width-compact), 100%);
  margin: clamp(30px, 5vw, 56px) auto 0;
  padding: clamp(26px, 4vw, 48px);
  text-align: center;
  background:
    radial-gradient(circle at top, var(--surface-strong), transparent 44%),
    rgba(255, 255, 255, 0.055);
}

.internship-status__badge {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  color: var(--color-bg);
  background: var(--color-text);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-ui);
  font-weight: 800;
}

.internship-status h3 {
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-ui);
}

.internship-status p {
  max-width: 680px;
  margin: 18px auto 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.internship-grid {
  width: min(var(--section-width-wide), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.internship-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 2.8vw, 34px);
}

.internship-card span {
  color: rgba(255, 255, 255, 0.48);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.internship-card h3 {
  margin: clamp(32px, 4vw, 58px) 0 0;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

.internship-card p {
  max-width: none;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.internship-fit .split-layout {
  align-items: center;
}

.internship-list-box {
  padding: clamp(24px, 3.4vw, 44px);
}

.internship-list-box h3 {
  margin: 0 0 20px;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
}

.internship-list-box ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.internship-list-box li {
  position: relative;
  padding-left: 22px;
  color: var(--color-text);
  line-height: var(--line-height-body);
}

.internship-list-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
}

.internship-cta {
  padding-top: var(--section-y-tight);
}

@media (max-width: 1060px) {
  .internship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .internship-status,
  .internship-card,
  .internship-list-box,
  .internship-apply .apply-grid article {
    border-radius: var(--radius-card);
  }

  .internship-grid,
  .internship-fit .split-layout,
  .internship-apply .apply-grid {
    grid-template-columns: 1fr;
  }

  .internship-card {
    min-height: auto;
  }

  .internship-card h3 {
    margin-top: 30px;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .subpage-hero {
    min-height: min(840px, calc(100svh - (var(--edge) * 2)));
    padding-top: 118px;
    padding-bottom: 82px;
  }
}


/* ==========================================================
   Footer | Rebalanced Layout
   ========================================================== */

.site-footer.page-footer {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  width: auto;
  max-width: none;
  margin: clamp(78px, 9vw, 132px) var(--edge, 15px) var(--edge, 15px);
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius, 10px);
  background: var(--color-bg);
  color: var(--color-text, var(--color-text));
  text-align: left;
  isolation: isolate;
}

.site-footer.page-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/verlauf.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.76;
}

.site-footer.page-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.76) 34%,
    rgba(0, 0, 0, 0.36) 68%,
    rgba(0, 0, 0, 0) 100%
  );
}

.page-footer-inner {
  width: min(var(--container-wide, 1320px), calc(100% - 30px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(30px, 4vw, 58px) clamp(24px, 4vw, 64px);
  padding: clamp(36px, 5vw, 76px) 0 clamp(24px, 3vw, 38px);
}

.page-footer-top {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  display: flex;
  justify-content: flex-end;
}

.page-footer-backtop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: var(--line-height-ui);
  font-weight: 600;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.page-footer-backtop:hover,
.page-footer-backtop:focus-visible {
  color: var(--color-text);
  transform: translateY(-2px);
}

.page-footer-backtop svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-footer-statement {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  min-width: 0;
  max-width: 760px;
}

.page-footer-statement p {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-section-title);
  line-height: 0.98;
  font-weight: 600;
  text-wrap: balance;
}


.page-footer-columns {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(170px, 0.42fr) minmax(170px, 0.42fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
  padding-top: clamp(8px, 1.6vw, 22px);
}

.page-footer-label {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.48);
  font-size: var(--font-size-small);
  line-height: var(--line-height-ui);
  font-weight: 700;
}

.page-footer-contact address {
  margin: 0;
  max-width: 520px;
  color: var(--color-text);
  font-style: normal;
  font-size: var(--font-size-large);
  line-height: 1.18;
  font-weight: 600;
}

.page-footer-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: clamp(18px, 2.2vw, 28px);
}

.page-footer-contact-links a {
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
  font-weight: 600;
}

.page-footer-contact-links a,
.page-footer-pages a,
.page-footer-social a,
.page-footer-meta a {
  color: var(--color-text);
  transition:
    color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.page-footer-contact-links a:hover,
.page-footer-contact-links a:focus-visible,
.page-footer-pages a:hover,
.page-footer-pages a:focus-visible,
.page-footer-social a:hover,
.page-footer-social a:focus-visible,
.page-footer-meta a:hover,
.page-footer-meta a:focus-visible {
  color: var(--color-text);
}

.page-footer-pages,
.page-footer-social {
  display: grid;
  gap: 11px;
}

.page-footer-pages {
  justify-items: end;
  text-align: right;
}

.page-footer-social {
  justify-items: start;
  text-align: left;
}

.page-footer-pages .page-footer-label,
.page-footer-social .page-footer-label {
  margin-bottom: 4px;
}

.page-footer-pages a,
.page-footer-social a {
  max-width: 100%;
  font-size: var(--font-size-large);
  line-height: var(--line-height-ui);
  font-weight: 600;
}

.page-footer-social a {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
}

.page-footer-social a span[aria-hidden="true"] {
  display: inline-block;
  font-size: 0.72em;
  line-height: var(--line-height-ui);
  transform: translateY(-0.12em);
  opacity: 0.74;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.page-footer-social a:hover span[aria-hidden="true"],
.page-footer-social a:focus-visible span[aria-hidden="true"] {
  transform: translate(2px, -0.24em);
  opacity: 1;
}

.page-footer-bottom {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  margin-top: clamp(8px, 2.6vw, 38px);
  text-align: center;
}


.page-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  color: var(--color-text);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-compact);
  text-align: center;
}

@media (max-width: 1020px) {
  .page-footer-columns {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 0.45fr) minmax(170px, 0.45fr);
    gap: 42px clamp(28px, 5vw, 58px);
  }
}

@media (max-width: 840px) {
  .page-footer-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "contact contact"
      "social pages";
    gap: 36px 26px;
  }

  .page-footer-contact {
    grid-area: contact;
  }

  .page-footer-social {
    grid-area: social;
  }

  .page-footer-pages {
    grid-area: pages;
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .site-footer.page-footer {
    margin-top: 78px;
    margin-right: var(--edge, 15px);
    margin-left: var(--edge, 15px);
  }

  .page-footer-inner {
    width: min(100% - 34px, var(--container-wide, 1320px));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 34px 14px;
    padding: 44px 0 30px;
  }

  .page-footer-backtop {
    width: 44px;
    height: 44px;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .page-footer-backtop span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .page-footer-statement {
    max-width: 100%;
  }

  .page-footer-statement p {
    font-size: var(--font-size-section-title);
    line-height: 0.98;
    letter-spacing: -0.032em;
  }

  .page-footer-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "contact contact"
      "social pages";
    gap: 34px 22px;
    padding-top: 0;
  }

  .page-footer-contact address {
    font-size: var(--font-size-large);
  }

  .page-footer-contact-links {
    display: grid;
    justify-items: start;
    gap: 11px;
    text-align: left;
  }

  .page-footer-pages,
  .page-footer-social {
    min-width: 0;
    width: 100%;
    justify-items: start;
    gap: 11px;
    text-align: left;
  }

  .page-footer-pages a,
  .page-footer-social a {
    max-width: 100%;
    justify-content: flex-start;
    overflow-wrap: anywhere;
    font-size: var(--font-size-large);
    line-height: 1.02;
  }

  .page-footer-bottom {
    margin-top: 6px;
  }

  .page-footer-meta {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: center;
    gap: 10px 18px;
    width: 100%;
    text-align: center;
  }

  .page-footer-meta span {
    grid-column: 1 / -1;
  }
}

@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
  .page-footer-columns {
    grid-template-columns: 1fr;
    grid-template-areas:
      "contact"
      "social"
      "pages";
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .page-footer-backtop,
  .page-footer-social a span[aria-hidden="true"] {
    transition: none;
  }
}


@media (max-width: 340px) {
  .page-footer-meta {
    grid-template-columns: 1fr;
  }

  .page-footer-meta span {
    grid-column: auto;
  }
}

/* ==========================================================
   Mobile/Tablet: permanenter Play-Hinweis oben rechts
   ========================================================== */

@media (hover: none) and (pointer: coarse) {
  .video-card-play {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(7, 7, 7, 0.38);
  }
}


/* ==========================================================
   Mobile-Fix | Startseitenvideo bildschirmfüllend
   ========================================================== */

/* Das native <video> wird auf Mobilgeräten ohne Video.js genutzt.
   Deshalb braucht auch das Video selbst object-fit: cover. */
.hero-video {
  display: block;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 760px) {
  /* Der eingerückte, abgerundete Videorahmen bleibt auch mobil erhalten. */
  .hero-media {
    inset: var(--edge);
    border-radius: var(--radius);
  }

  .hero-video,
  .hero-media .video-js,
  .hero-media .video-js .vjs-tech {
    width: 100% !important;
    height: 100% !important;
  }

  .hero-content {
    min-height: 100dvh;
  }
}

/* ==========================================================
   Kontakt | Offenes Kontaktverzeichnis
   Keine Kacheln, keine Hover-Effekte, keine Deko-Kreise.
   ========================================================== */

.page--contact .contact-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(var(--container-wide), calc(100% - 30px));
  margin: clamp(48px, 6vw, 82px) auto 0;
  gap: 0;
}

.page--contact .contact-directory {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding: 0;
}

.page--contact .contact-directory__head {
  position: sticky;
  top: 150px;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.page--contact .contact-directory__head h2 {
  max-width: 560px;
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-heading);
  font-weight: 700;
  text-wrap: balance;
}

.page--contact .contact-directory__head > p {
  max-width: 500px;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
}

.page--contact .contact-directory__list {
  min-width: 0;
}

.page--contact .contact-directory__row {
  display: grid;
  grid-template-columns: minmax(118px, 0.34fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px);
  padding: clamp(20px, 2.5vw, 32px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.page--contact .contact-directory__row--primary {
  padding-top: clamp(20px, 2.5vw, 32px);
  padding-bottom: clamp(20px, 2.5vw, 32px);
}

.page--contact .contact-directory__row:last-child {
  border-bottom: 0;
}

.page--contact .contact-directory__label {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
  font-weight: 600;
}

.page--contact .contact-directory__value {
  min-width: 0;
}

.page--contact .contact-directory__link,
.page--contact .contact-directory__value address,
.page--contact .contact-socials a {
  color: var(--color-text);
  text-decoration: none;
}

.page--contact .contact-directory__link {
  display: inline-block;
  font-size: var(--font-size-large);
  line-height: 1.2;
  font-weight: 600;
}

.page--contact .contact-directory__link--big {
  max-width: 100%;
  font-size: var(--font-size-large);
  line-height: 1.2;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

.page--contact .contact-directory__value > p {
  max-width: 660px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

.page--contact .contact-directory__value address {
  margin: 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  font-style: normal;
  font-weight: 600;
}

.page--contact .contact-socials {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.page--contact .contact-socials a {
  position: relative;
  display: inline-flex;
  min-height: 0;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--font-size-large);
  line-height: 1.2;
  font-weight: 600;
  transform: none;
}

.page--contact .contact-socials a::before,
.page--contact .contact-socials a::after {
  display: none;
  content: none;
}

.page--contact .contact-socials a span[aria-hidden="true"] {
  display: inline-block;
  font-size: 0.72em;
  line-height: var(--line-height-ui);
  transform: translateY(-0.12em);
  opacity: 0.74;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.page--contact .contact-socials a:hover span[aria-hidden="true"],
.page--contact .contact-socials a:focus-visible span[aria-hidden="true"] {
  transform: translate(2px, -0.24em);
  opacity: 1;
}

.page--contact .contact-socials a:hover,
.page--contact .contact-socials a:focus-visible,
.page--contact .contact-directory__link:hover,
.page--contact .contact-directory__link:focus-visible {
  color: var(--color-text);
  opacity: 1;
  transform: none;
}

/* FAQ-Überschrift und Einleitung mittig, Fragen bewusst linksbündig. */
.page--contact .contact-faq {
  text-align: center;
}

.page--contact .contact-faq h2 {
  margin-inline: auto;
  text-align: center;
}

.page--contact .contact-faq__intro {
  margin: 12px auto 0;
  color: var(--color-text-muted);
  text-align: center;
}

.page--contact .contact-faq__list {
  text-align: left;
}

/* Ruhige Hover- und Tastatur-Fokus-Effekte für direkte Kontaktlinks. */
.page--contact .contact-directory__link,
.page--contact .contact-socials a {
  position: relative;
  transition: color 200ms ease, opacity 200ms ease;
}

.page--contact .contact-directory__link::after,
.page--contact .contact-socials a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.18em;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.9;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page--contact .contact-directory__link:hover::after,
.page--contact .contact-directory__link:focus-visible::after,
.page--contact .contact-socials a:hover::after,
.page--contact .contact-socials a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.page--contact .contact-directory__link:hover,
.page--contact .contact-directory__link:focus-visible,
.page--contact .contact-socials a:hover,
.page--contact .contact-socials a:focus-visible {
  opacity: 0.76;
}

.page--contact .contact-directory__link:focus-visible,
.page--contact .contact-socials a:focus-visible {
  border-radius: 2px;
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 5px;
}

@media (max-width: 960px) {
  .page--contact .contact-directory {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 52px);
  }

  .page--contact .contact-directory__head {
    position: static;
  }
}

@media (max-width: 760px) {
  .page--contact .contact-main {
    width: 100%;
  }

  .page--contact .contact-intro,
  .page--contact .contact-content,
  .page--contact .contact-faq,
  .page--contact .contact-cta {
    width: min(calc(100% - 30px), var(--container-wide));
    margin-right: auto;
    margin-left: auto;
  }

  .page--contact .contact-content {
    width: min(100% - 30px, var(--container-wide));
    gap: 0;
  }

  .page--contact .contact-directory {
    padding-top: 0;
  }

  .page--contact .contact-directory__row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
  }

  .page--contact .contact-directory__row--primary {
    padding: 20px 0;
  }

  .page--contact .contact-socials {
    gap: 9px;
  }

}


/* ==========================================================
   18 | Interaktionen & Browser-Kompatibilität
   ========================================================== */

/* Die Inhalte der interaktiven Elemente bleiben beim Hover an ihrer Position. */
@media (hover: hover) and (pointer: fine) {
  .home-socials a:hover,
  .home-socials a:focus-visible,
  .primary-nav a:hover,
  .primary-nav a:focus-visible,
  .button:hover,
  .button:focus-visible,
  .cta-button:hover,
  .cta-button:focus-visible,
  .social-links a:hover,
  .social-links a:focus-visible,
  .portfolio-filters button:hover,
  .portfolio-filters button:focus-visible,
  .slider-btn:hover,
  .slider-btn:focus-visible,
  .custom-player__button:hover,
  .custom-player__button:focus-visible {
    transform: none;
  }
}

/* Größere Pfeile bei den Social-Links. */
.page--contact .contact-socials a span[aria-hidden="true"],
.page-footer-social a span[aria-hidden="true"] {
  font-size: 0.9em;
}

/*
  Footer-Dimmung wird per JavaScript erst beim direkten Betreten eines Links
  gesetzt. Der umgebende Bereich allein löst keine Veränderung aus.
*/
.page-footer-contact-links > a,
.page-footer-pages > a,
.page-footer-social > a,
.page-footer-meta > a {
  opacity: 1;
  transform: none;
  transition:
    color 220ms ease,
    opacity 260ms ease;
}

.page-footer-contact-links.is-link-hovered > a,
.page-footer-pages.is-link-hovered > a,
.page-footer-social.is-link-hovered > a,
.page-footer-meta.is-link-hovered > a {
  opacity: 0.38;
}

.page-footer-contact-links.is-link-hovered > a.is-hovered,
.page-footer-pages.is-link-hovered > a.is-hovered,
.page-footer-social.is-link-hovered > a.is-hovered,
.page-footer-meta.is-link-hovered > a.is-hovered {
  opacity: 1;
}

/* Der Text bleibt stehen; nur der Pfeil bewegt sich weich nach oben. */
.page-footer-backtop,
.page-footer-backtop:hover,
.page-footer-backtop:focus-visible {
  transform: none;
}

.page-footer-backtop svg {
  transform: translateX(0);
  transition:
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease;
}

.page-footer-backtop:hover svg,
.page-footer-backtop:focus-visible svg {
  transform: translate3d(0, -5px, 0);
}

@media (prefers-reduced-motion: reduce) {
  .page-footer-backtop svg,
  .page-footer-contact-links > a,
  .page-footer-pages > a,
  .page-footer-social > a,
  .page-footer-meta > a {
    transition: none;
  }
}

/* ==========================================================
   17 | Findet Amy – Team-Kachel
   Nur der CTA auf team.html. Die Spielseite liegt in amy.css.
   ========================================================== */

.team-card--amy .team-card__content {
  z-index: 4;
  align-content: initial;
}

.team-card__amy-action {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(24px, 4vw, 48px);
  color: var(--color-text);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.team-card__amy-action::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(5, 5, 5, 0.24);
  opacity: 0;
  transition: opacity 240ms ease;
}

.team-card__amy-icon {
  display: block;
  width: clamp(72px, 8vw, 116px);
  height: clamp(72px, 8vw, 116px);
  color: var(--color-text);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

.team-card__amy-link.button {
  width: auto;
  min-width: 132px;
  min-height: 44px;
  margin: 0;
  padding: 12px 20px;
  pointer-events: auto;
}

.team-card--amy:hover .team-card__amy-action,
.team-card--amy:focus-within .team-card__amy-action {
  opacity: 1;
  pointer-events: auto;
}

.team-card--amy:hover .team-card__amy-action::before,
.team-card--amy:focus-within .team-card__amy-action::before {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .team-card--amy.is-amy-hover-suppressed .team-card__amy-action {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .team-card--amy.is-amy-hover-suppressed .team-card__amy-action::before {
    opacity: 0 !important;
  }
}

@media (hover: none), (pointer: coarse) {
  /* Auf Touch-Geräten dient die Pfote als sichtbarer Hinweis. Der erste Tap
     blendet den eigentlichen Button ein, der zweite Tap öffnet das Spiel. */
  .team-card__amy-action {
    opacity: 1;
    pointer-events: none;
  }

  .team-card__amy-action::before {
    opacity: 0.08;
  }

  .team-card__amy-icon {
    width: clamp(58px, 14vw, 82px);
    height: clamp(58px, 14vw, 82px);
    opacity: 0.78;
  }

  .team-card__amy-link.button {
    display: none;
  }

  .team-card--amy.is-amy-revealed .team-card__amy-action {
    pointer-events: auto;
  }

  .team-card--amy.is-amy-revealed .team-card__amy-action::before {
    opacity: 1;
  }

  .team-card--amy.is-amy-revealed .team-card__amy-icon {
    width: clamp(72px, 18vw, 100px);
    height: clamp(72px, 18vw, 100px);
    opacity: 1;
  }

  .team-card--amy.is-amy-revealed .team-card__amy-link.button {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-card__amy-action,
  .team-card__amy-action::before {
    transition: none;
  }
}

/* Zielposition für Rücksprünge aus dem Findet-Amy-Spiel. */
#team-photos {
  scroll-margin-top: clamp(112px, 12vw, 156px);
}

/* ==========================================================
   18 | Ausbildung kompakt – Redesign 2026-08
   ========================================================== */

/* Alle großen CTA-Panels projektweit ohne Kontur. */
.cta-box,
.training-cta__box,
.process-cta__box,
.studio-cta__box,
.portfolio-cta__box,
.contact-cta__box,
.internship-cta__box {
  border: 0 !important;
}

/* Ausbildung: generell kompaktere vertikale Rhythmik. */
.ausbildung-page {
  --training-gap: clamp(12px, 1.35vw, 18px);
}

.ausbildung-page .subpage-hero {
  min-height: min(760px, 86svh);
  padding-top: clamp(140px, 13vw, 190px);
  padding-bottom: clamp(82px, 8vw, 112px);
}

.ausbildung-page .subpage-hero__content {
  max-width: 1080px;
}

.ausbildung-page .subpage-hero__content h1 {
  max-width: 1050px;
  margin-inline: auto;
  font-size: var(--font-size-page-title);
  line-height: 0.9;
  text-wrap: balance;
}

.ausbildung-page .subpage-hero__content p {
  max-width: 760px;
}

.ausbildung-page .section-pad,
.ausbildung-page .section-pad--tight {
  padding-top: clamp(44px, 5vw, 70px);
}

.ausbildung-page .training-section-heading {
  margin-bottom: clamp(24px, 3vw, 38px);
}

/* Status direkt unter dem Hero – kompakt und horizontal. */
.training-overview {
  padding-top: clamp(28px, 3.5vw, 46px) !important;
}

.training-status-strip {
  display: flex;
  width: min(var(--section-width-wide), 100%);
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 58px);
  padding: clamp(22px, 2.7vw, 34px);
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.065);
}

.training-status-strip__copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.training-status-strip .status-card__badge {
  flex: 0 0 auto;
  margin: 0;
}

.training-status-strip h2 {
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: 1;
}

.training-status-strip p {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: 1.45;
}

.training-status-strip > .button {
  flex: 0 0 auto;
}

/* Drei gebündelte Fakten statt fünf Einzelkarten. */
.training-facts-compact {
  display: grid;
  width: min(var(--section-width-wide), 100%);
  margin-inline: auto;
  grid-template-columns: 1.25fr 0.8fr 0.95fr;
  gap: var(--training-gap);
}

.training-fact {
  min-height: 250px;
  padding: clamp(24px, 2.7vw, 38px);
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(15, 15, 15, 1);
}

.training-fact--primary {
  background: rgba(30, 30, 30, 1);
}

.training-fact > span,
.training-card-number {
  display: block;
  margin-bottom: 18px;
  color: var(--color-text-dim);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1;
}

.training-fact strong {
  display: block;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

.training-fact p {
  max-width: 520px;
  margin: 16px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

.training-fact small {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--color-text-soft);
  font-size: var(--font-size-meta);
  line-height: 1;
}

/* Lernbereiche: zwei breite Reihen statt vier schmaler Spalten. */
.training-learn-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--training-gap);
}

.training-learn-grid article {
  min-height: 210px;
  padding: clamp(24px, 2.8vw, 36px);
  border: 0;
  background: rgba(15, 15, 15, 1);
}

.training-learn-grid h3 {
  font-size: var(--font-size-heading);
}

.training-learn-grid p {
  max-width: 560px;
  margin-top: 14px;
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

/* Drei Jahre in einer einzigen horizontalen Reihe. */
.training-path-grid {
  display: grid;
  width: min(var(--section-width-wide), 100%);
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--training-gap);
}

.training-path-card {
  display: grid;
  min-height: 210px;
  align-content: space-between;
  gap: 26px;
  padding: clamp(24px, 2.6vw, 34px);
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.055);
}

.training-path-card > span {
  color: rgba(255, 255, 255, 0.28);
  font-size: var(--font-size-page-title);
  font-weight: 700;
  line-height: 0.9;
}

.training-path-card h3 {
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: 1;
}

.training-path-card p {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: 1.45;
}

/* Bewerbung als ein gemeinsames Panel statt eigener großer Section. */
.training-application-panel {
  display: grid;
  width: min(var(--section-width-wide), 100%);
  margin: clamp(18px, 2vw, 28px) auto 0;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding: clamp(28px, 3.5vw, 48px);
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(15, 15, 15, 1);
}

.training-application-panel__intro .section-kicker {
  margin-left: 0;
  margin-right: 0;
}

.training-application-panel__intro h2 {
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: 0.96;
}

.training-application-panel__intro > p:not(.section-kicker) {
  margin: 18px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
}

.training-application-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--training-gap);
}

.training-application-columns article {
  padding: clamp(20px, 2vw, 28px);
  border: 0;
  border-radius: var(--radius-panel);
  background: rgba(30, 30, 30, 1);
}

.training-application-columns h3 {
  margin: 0;
  font-size: var(--font-size-large);
}

.training-application-columns ul {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.training-application-columns li {
  position: relative;
  padding-left: 17px;
  color: var(--color-text-soft);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

.training-application-columns li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ausbildung-page .training-cta {
  padding-top: clamp(34px, 4vw, 54px);
}

.ausbildung-page .training-cta__box {
  padding: clamp(30px, 4vw, 52px);
}

/* Ausbildung: jede Kartenfläche explizit ohne Kontur. */
.ausbildung-page :is(
  .status-card,
  .fact-card,
  .learn-grid article,
  .timeline-item,
  .school-box,
  .apply-grid article,
  .training-cta__box,
  .training-status-strip,
  .training-fact,
  .training-path-card,
  .training-application-panel,
  .training-application-columns article
) {
  border: 0 !important;
}

@media (max-width: 980px) {
  .training-status-strip,
  .training-status-strip__copy {
    align-items: flex-start;
  }

  .training-status-strip {
    flex-direction: column;
  }

  .training-status-strip__copy {
    flex-direction: column;
    gap: 16px;
  }

  .training-facts-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-fact--primary {
    grid-column: 1 / -1;
  }

  .training-path-grid {
    grid-template-columns: 1fr;
  }

  .training-path-card {
    min-height: 0;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: start;
  }

  .training-application-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ausbildung-page .subpage-hero {
    min-height: 78svh;
    padding-top: 132px;
    padding-bottom: 76px;
  }

  .ausbildung-page .subpage-hero__content h1 {
    font-size: var(--font-size-page-title);
  }

  .ausbildung-page .section-pad,
  .ausbildung-page .section-pad--tight {
    padding-top: 38px;
  }

  .training-status-strip {
    padding: 22px;
  }

  .training-status-strip > .button {
    width: 100%;
  }

  .training-facts-compact,
  .training-learn-grid,
  .training-application-columns {
    grid-template-columns: 1fr;
  }

  .training-fact--primary {
    grid-column: auto;
  }

  .training-fact,
  .training-learn-grid article,
  .training-path-card {
    min-height: 0;
    padding: 22px;
  }

  .training-path-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
  }

  .training-path-card > span {
    font-size: var(--font-size-heading);
  }

  .training-application-panel {
    padding: 24px 20px;
  }

  .training-application-panel__intro .section-kicker {
    margin-bottom: 18px;
  }
}

/* ==========================================================
   Ausbildung v2 | Status, Fakten und kompaktere Struktur
   ========================================================== */

/* Status: nur noch eine klare, farblich erkennbare Meldung. */
.ausbildung-page .training-status-strip {
  display: grid;
  width: min(var(--section-width-wide), 100%);
  min-height: 0;
  margin-inline: auto;
  place-items: center;
  padding: clamp(24px, 3vw, 38px) clamp(22px, 4vw, 54px);
  border: 0 !important;
  border-radius: var(--radius-card);
  background: rgba(116, 42, 42, 0.34);
  text-align: center;
}

.ausbildung-page .training-status-strip h2 {
  max-width: 920px;
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: 0.98;
  text-wrap: balance;
}

/* Fünf Fakten: oben Beruf + Schule, darunter Dauer / Art / Beginn. */
.ausbildung-page .training-facts-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.ausbildung-page .training-fact {
  min-height: 0;
  padding: clamp(24px, 2.5vw, 34px);
}

.ausbildung-page .training-fact--primary {
  grid-column: span 2;
}

.ausbildung-page .training-fact--school {
  grid-column: span 1;
}

.ausbildung-page .training-fact small {
  display: none;
}

/* Lernkarten ohne Nummern: Titel beginnt direkt oben. */
.ausbildung-page .training-learn-grid article {
  min-height: 190px;
}

.ausbildung-page .training-learn-grid h3 {
  margin-top: 0;
}

/* Bewerbungsbereich steht nun eigenständig, die 3-Jahres-Timeline entfällt. */
.ausbildung-page .training-application-section {
  padding-top: clamp(40px, 4.5vw, 62px);
}

.ausbildung-page .training-application-panel {
  margin-top: 0;
}

@media (max-width: 980px) {
  .ausbildung-page .training-facts-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ausbildung-page .training-fact--primary {
    grid-column: 1 / -1;
  }

  .ausbildung-page .training-fact--school {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .ausbildung-page .training-status-strip {
    padding: 24px 20px;
  }

  .ausbildung-page .training-facts-compact {
    grid-template-columns: 1fr;
  }

  .ausbildung-page .training-fact--primary,
  .ausbildung-page .training-fact--school {
    grid-column: auto;
  }
}


/* ==========================================================
   Ausbildung v3 | Status zentriert + Fakten neu angeordnet
   ========================================================== */

/* Status wie die übrigen grauen Karten, aber mit roter Kontur. */
.ausbildung-page .training-status-strip {
  width: min(var(--section-width-wide), 100%);
  justify-items: stretch;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid #ef4444 !important;
}

.ausbildung-page .training-status-strip h2 {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
}

/* Desktop: 3 Karten in Reihe 1, 2 Karten in Reihe 2. */
.ausbildung-page .training-facts-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ausbildung-page .training-fact--primary {
  grid-column: span 1;
}

.ausbildung-page .training-fact--school {
  grid-column: span 2;
}

.ausbildung-page .training-fact--start {
  grid-column: span 1;
}

@media (max-width: 980px) {
  .ausbildung-page .training-facts-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ausbildung-page .training-fact--primary,
  .ausbildung-page .training-fact--school,
  .ausbildung-page .training-fact--start {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .ausbildung-page .training-facts-compact {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   Ausbildung v4 | Status exakt zentriert + Facts proportional
   ========================================================== */

/* Die Statusmeldung sitzt geometrisch exakt in der Mitte der Karte. */
.ausbildung-page .training-status-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: initial;
  text-align: center;
}

.ausbildung-page .training-status-strip h2 {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/*
  Desktop-Raster auf 12 Spalten:
  Reihe 1: Ausbildungsberuf 6 / Dauer 3 / Ausbildungsart 3
  Reihe 2: Berufsschule 7 / Ausbildungsbeginn 5
*/
.ausbildung-page .training-facts-compact {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.ausbildung-page .training-fact--primary {
  grid-column: span 6;
}

.ausbildung-page .training-facts-compact > .training-fact:nth-child(2),
.ausbildung-page .training-facts-compact > .training-fact:nth-child(3) {
  grid-column: span 3;
}

.ausbildung-page .training-fact--school {
  grid-column: span 7;
}

.ausbildung-page .training-fact--start {
  grid-column: span 5;
}

/* Der lange Berufsname bleibt groß, bekommt aber etwas mehr Reserve. */
.ausbildung-page .training-fact--primary strong {
  font-size: var(--font-size-heading);
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 980px) {
  .ausbildung-page .training-facts-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ausbildung-page .training-fact--primary,
  .ausbildung-page .training-facts-compact > .training-fact:nth-child(2),
  .ausbildung-page .training-facts-compact > .training-fact:nth-child(3),
  .ausbildung-page .training-fact--school,
  .ausbildung-page .training-fact--start {
    grid-column: auto;
  }

  .ausbildung-page .training-fact--primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .ausbildung-page .training-facts-compact {
    grid-template-columns: 1fr;
  }

  .ausbildung-page .training-fact--primary {
    grid-column: auto;
  }
}


/* ==========================================================
   Ausbildung v5 | Status-Kontur eindeutig sichtbar
   ========================================================== */
.ausbildung-page .training-status-strip {
  border: 2px solid #ef4444 !important;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.08);
}

/* ==========================================================
   Praktikum kompakt | Redesign 2026-08
   Hero und Footer bleiben unverändert.
   ========================================================== */

.praktikum-page .section-pad,
.praktikum-page .section-pad--tight {
  padding-top: clamp(44px, 5vw, 70px);
}

.praktikum-page .internship-section-heading {
  margin-bottom: clamp(24px, 3vw, 38px);
}

/* ---------- Kompakter Einstieg ---------- */
.praktikum-page .internship-overview-compact__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  width: min(var(--section-width-wide), 100%);
  margin-inline: auto;
  align-items: center;
}

.praktikum-page .internship-overview-compact__copy {
  min-width: 0;
}

.praktikum-page .internship-overview-compact__copy .section-kicker {
  margin-left: 0;
}

.praktikum-page .internship-overview-compact__copy h2 {
  max-width: 720px;
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: 0.96;
  font-weight: 700;
  text-wrap: balance;
}

.praktikum-page .internship-overview-compact__copy > p:not(.section-kicker) {
  max-width: 680px;
  margin: clamp(18px, 2vw, 26px) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
}

.praktikum-page .internship-quickfacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.praktikum-page .internship-quickfact {
  min-width: 0;
  min-height: 0;
  padding: clamp(22px, 2.5vw, 32px);
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(15, 15, 15, 1);
}

.praktikum-page .internship-quickfact--status {
  background: rgba(30, 30, 30, 1);
}

.praktikum-page .internship-quickfact > span {
  display: block;
  margin-bottom: 12px;
  color: var(--color-text-dim);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.praktikum-page .internship-quickfact strong {
  display: block;
  max-width: 100%;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: 700;
  text-wrap: balance;
}

.praktikum-page .internship-quickfact p {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

/* ---------- Was du machst ---------- */
.praktikum-page .internship-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(var(--section-width-wide), 100%);
  margin-inline: auto;
}

.praktikum-page .internship-work-grid article {
  min-height: 0;
  padding: clamp(24px, 2.8vw, 36px);
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(15, 15, 15, 1);
}

.praktikum-page .internship-work-grid h3 {
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

.praktikum-page .internship-work-grid p {
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

/* ---------- Passt das zu dir? ---------- */
.praktikum-page .internship-fit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 72px);
  width: min(var(--section-width-wide), 100%);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 54px);
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(15, 15, 15, 1);
  align-items: center;
}

.praktikum-page .internship-fit-panel__copy .section-kicker {
  margin-left: 0;
}

.praktikum-page .internship-fit-panel__copy h2 {
  max-width: 720px;
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: 0.96;
  font-weight: 700;
  text-wrap: balance;
}

.praktikum-page .internship-fit-panel__copy > p:not(.section-kicker) {
  max-width: 680px;
  margin: clamp(18px, 2vw, 26px) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
}

.praktikum-page .internship-fit-panel__list {
  min-width: 0;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius-panel);
  background: rgba(30, 30, 30, 1);
}

.praktikum-page .internship-fit-panel__list h3 {
  margin: 0 0 18px;
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
}

.praktikum-page .internship-fit-panel__list ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.praktikum-page .internship-fit-panel__list li {
  position: relative;
  padding-left: 20px;
  color: var(--color-text-soft);
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

.praktikum-page .internship-fit-panel__list li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.72;
}

.praktikum-page .internship-cta {
  padding-top: clamp(44px, 5vw, 70px);
}

/* Alte Praktikums-Kartenregeln dürfen das neue Layout nicht konturieren. */
.praktikum-page :is(
  .internship-quickfact,
  .internship-work-grid article,
  .internship-fit-panel,
  .internship-cta__box
) {
  border-width: 0;
  border-style: solid;
}

@media (max-width: 980px) {
  .praktikum-page .internship-overview-compact__layout,
  .praktikum-page .internship-fit-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .praktikum-page .internship-overview-compact__copy,
  .praktikum-page .internship-fit-panel__copy {
    text-align: center;
  }

  .praktikum-page .internship-overview-compact__copy .section-kicker,
  .praktikum-page .internship-fit-panel__copy .section-kicker {
    margin-left: auto;
  }

  .praktikum-page .internship-overview-compact__copy > p:not(.section-kicker),
  .praktikum-page .internship-fit-panel__copy > p:not(.section-kicker) {
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  .praktikum-page .section-pad,
  .praktikum-page .section-pad--tight {
    padding-top: 42px;
  }

  .praktikum-page .internship-work-grid {
    grid-template-columns: 1fr;
  }

  .praktikum-page .internship-fit-panel {
    padding: 24px 20px;
  }

  .praktikum-page .internship-quickfact,
  .praktikum-page .internship-work-grid article {
    padding: 22px 20px;
  }

}

/* ==========================================================
   Ausbildung v6 | Status-Kontur innenliegend
   ========================================================== */
.ausbildung-page .training-status-strip {
  border: 0 !important;
  box-shadow: inset 0 0 0 3px #ef4444 !important;
}


/* ==========================================================
   Team | KI-Section
   Hintergrund-Section zwischen Leistungen und BTS
   ========================================================== */

.team-ai-section {
  margin-top: var(--section-y);
}

.team-ai-section__inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(42px, 5.5vw, 76px) clamp(22px, 4vw, 56px);
  border-radius: var(--radius-card);
  background: url("../img/team/ki.jpg") center / cover no-repeat;
  text-align: center;
}

.team-ai-section__inner > * {
  position: relative;
  z-index: 1;
}

.team-ai-section .section-kicker {
  margin-bottom: 22px;
}

.team-ai-section h2 {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-heading);
  font-weight: 700;
  text-wrap: balance;
  text-shadow: 0 10px 38px rgba(0, 0, 0, 0.45);
}

.team-ai-section p:not(.section-kicker) {
  max-width: 860px;
  margin: 16px auto 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}


@media (max-width: 760px) {
  .team-ai-section__inner {
    padding: 34px 20px 32px;
  }

  .team-ai-section .section-kicker {
    margin-bottom: 18px;
  }

}

/* ==========================================================
   BPRO | Vimeo Consent + Datenschutz-Einstellungen
   Vimeo bleibt bis zur ausdrücklichen Zustimmung vollständig blockiert.
   ========================================================== */

html.privacy-modal-open,
body.privacy-modal-open {
  overflow: hidden;
}

/* ---------- Zustimmung direkt im Video-Modal ---------- */

.video-modal__frame.is-awaiting-vimeo-consent {
  /* Exakt dieselbe Geometrie wie der eigentliche Videoplayer.
     Dadurch ändert das Modal beim Zustimmen nicht mehr seine Höhe. */
  display: block;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.video-modal__frame.is-awaiting-vimeo-consent .bpro-vimeo-player,
.video-modal__frame.is-awaiting-vimeo-consent .bpro-video-surface,
.video-modal__frame.is-awaiting-vimeo-consent .bpro-video-center-play,
.video-modal__frame.is-awaiting-vimeo-consent .bpro-video-status,
.video-modal__frame.is-awaiting-vimeo-consent .custom-player {
  visibility: hidden;
  pointer-events: none;
}

.vimeo-consent[hidden] {
  display: none !important;
}

.vimeo-consent {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.4vw, 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #030303;
}

.vimeo-consent__card {
  width: min(540px, 100%);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.055);
  text-align: left;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.vimeo-consent__eyebrow,
.privacy-settings-modal__eyebrow {
  margin: 0 0 12px;
  color: var(--color-text-dim);
  font-size: var(--font-size-meta);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

.vimeo-consent h3 {
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: 1;
  font-weight: 700;
}

.vimeo-consent__card > p:not(.vimeo-consent__eyebrow) {
  margin: 14px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.vimeo-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 22px;
}

.vimeo-consent__allow,
.privacy-settings-modal__revoke {
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--font-size-small);
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 180ms ease;
}

.vimeo-consent__allow:hover,
.vimeo-consent__allow:focus-visible,
.privacy-settings-modal__revoke:hover,
.privacy-settings-modal__revoke:focus-visible {
  opacity: 0.82;
}

.vimeo-consent__actions a,
.privacy-settings-modal__privacy-link {
  color: var(--color-text-soft);
  font-size: var(--font-size-small);
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ---------- Kleines globales Einstellungsmodal ---------- */

.privacy-settings-modal[hidden] {
  display: none !important;
}

.privacy-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.privacy-settings-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.privacy-settings-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
}

.privacy-settings-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: clamp(24px, 4vw, 34px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: #0b0b0b;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58);
  transform: translateY(8px) scale(0.98);
  transition: transform 180ms ease;
}

.privacy-settings-modal.is-open .privacy-settings-modal__dialog {
  transform: translateY(0) scale(1);
}

.privacy-settings-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  cursor: pointer;
}

.privacy-settings-modal__close svg {
  width: 19px;
  height: 19px;
}

.privacy-settings-modal__dialog h2 {
  max-width: calc(100% - 42px);
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: 1;
  font-weight: 700;
}

.privacy-settings-modal__service {
  margin-top: 24px;
  padding: 18px;
  border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.055);
}

.privacy-settings-modal__service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.privacy-settings-modal__service-head strong {
  font-size: var(--font-size-body);
  line-height: 1.1;
}

.privacy-settings-modal__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 27px;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
  font-size: var(--font-size-meta);
  line-height: 1;
  font-weight: 700;
}

.privacy-settings-modal__status.is-granted {
  background: rgba(34, 197, 94, 0.16);
  color: #b7f7c8;
}

.privacy-settings-modal__service > p {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.privacy-settings-modal__revoke {
  margin-top: 16px;
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
}

.privacy-settings-modal__privacy-link {
  display: inline-flex;
  margin-top: 18px;
}

@media (max-width: 760px) {
  .video-modal__frame.is-awaiting-vimeo-consent {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .vimeo-consent {
    padding: 10px;
  }

  .vimeo-consent__card {
    padding: 16px;
  }

  .vimeo-consent__eyebrow {
    margin-bottom: 7px;
    font-size: var(--font-size-meta);
  }

  .vimeo-consent h3 {
    font-size: var(--font-size-heading);
  }

  .vimeo-consent__card > p:not(.vimeo-consent__eyebrow) {
    margin-top: 8px;
    font-size: var(--font-size-small);
    line-height: 1.35;
  }

  .vimeo-consent__actions {
    gap: 8px 12px;
    margin-top: 12px;
  }

  .vimeo-consent__allow {
    min-height: 38px;
    padding: 9px 14px;
    font-size: var(--font-size-meta);
  }

  .privacy-settings-modal {
    align-items: end;
    padding: 12px;
  }

  @media (max-width: 430px) {
    .vimeo-consent {
      place-items: start center;
      padding: 7px;
    }

    .vimeo-consent__card {
      padding: 11px 12px;
      border-radius: 12px;
    }

    .vimeo-consent__eyebrow {
      margin-bottom: 4px;
      font-size: var(--font-size-meta);
    }

    .vimeo-consent h3 {
      font-size: var(--font-size-body);
    }

    .vimeo-consent__card > p:not(.vimeo-consent__eyebrow) {
      margin-top: 5px;
      font-size: var(--font-size-meta);
      line-height: 1.25;
    }

    .vimeo-consent__actions {
      flex-wrap: nowrap;
      gap: 8px;
      margin-top: 7px;
    }

    .vimeo-consent__allow {
      min-height: 32px;
      padding: 7px 10px;
      font-size: var(--font-size-meta);
    }

    .vimeo-consent__actions a {
      font-size: var(--font-size-meta);
      white-space: nowrap;
    }
  }

  .privacy-settings-modal__dialog {
    width: 100%;
    padding: 24px 20px 20px;
    border-radius: var(--radius-card);
  }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-settings-modal,
  .privacy-settings-modal__dialog,
  .vimeo-consent__allow,
  .privacy-settings-modal__revoke {
    transition: none !important;
  }
}


/* ==========================================================
   BPRO | Vimeo Modal Player
   Sauberer Player für Portfolio + Ablauf.
   Vimeo liefert den Stream, BPRO die sichtbare Bedienoberfläche.
   ========================================================== */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 42px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.video-modal[hidden] {
  display: none;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
}

.video-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.video-modal__dialog {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(1280px, 100%, calc(170svh - 72px));
  max-height: calc(100svh - clamp(28px, 6vw, 84px));
  overflow: visible;
  background: transparent;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition:
    opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.video-modal.is-open .video-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.video-modal__head {
  width: calc(100% - 68px);
  min-height: 64px;
  padding: 0 0 12px;
  text-align: left;
}

.video-modal__head h2 {
  max-width: min(820px, 100%);
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: 600;
}

.video-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 12;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(20, 20, 20, 0.82);
  color: var(--color-text);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: background-color 180ms ease;
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
  background: rgba(42, 42, 42, 0.94);
}

.video-modal__close-icon {
  display: block;
  width: 25px;
  height: 25px;
}

/* Der Schließen-Button bleibt unabhängig von der Player-Steuerung sichtbar. */
.video-modal__dialog.is-controls-hidden .video-modal__close {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.video-modal__frame {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #030303;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.58);
}

.bpro-vimeo-player,
.bpro-vimeo-player > div,
.bpro-vimeo-player iframe {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.bpro-vimeo-player {
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  background: #000;
}

.bpro-vimeo-player iframe {
  display: block;
  pointer-events: none;
}

.bpro-video-surface {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.bpro-video-center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  display: grid;
  width: clamp(68px, 7vw, 92px);
  height: clamp(68px, 7vw, 92px);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(5, 5, 5, 0.82);
  color: var(--color-text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 220ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms ease;
}

.bpro-video-center-play:hover,
.bpro-video-center-play:focus-visible {
  background: rgba(28, 28, 28, 0.94);
}

.bpro-video-center-play__icon {
  display: block;
  width: clamp(28px, 3vw, 38px);
  height: clamp(28px, 3vw, 38px);
  transform: translateX(2px);
}

.video-modal__frame.is-playing .bpro-video-center-play,
.video-modal__frame.is-buffering .bpro-video-center-play,
.video-modal__frame.is-video-error .bpro-video-center-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  pointer-events: none;
}

.bpro-video-status[hidden] {
  display: none !important;
}

.bpro-video-status {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  max-width: min(440px, calc(100% - 40px));
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  background: rgba(5, 5, 5, 0.84);
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--font-size-small);
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translate(-50%, -50%);
}

.bpro-video-status__spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: bpro-vimeo-spinner 720ms linear infinite;
}

.bpro-video-status.is-error {
  border-radius: var(--radius-panel);
  color: var(--color-text);
}

.bpro-video-status.is-error .bpro-video-status__spinner {
  display: none;
}

@keyframes bpro-vimeo-spinner {
  to { transform: rotate(360deg); }
}

.custom-player {
  position: absolute;
  left: clamp(12px, 1.5vw, 18px);
  right: clamp(12px, 1.5vw, 18px);
  bottom: clamp(12px, 1.5vw, 18px);
  z-index: 9;
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  gap: clamp(7px, 0.85vw, 11px);
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(7, 7, 7, 0.84);
  color: var(--color-text);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
}

.video-modal__frame.is-controls-hidden .custom-player {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.custom-player__button {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: currentColor;
  line-height: 0;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.custom-player__button:hover,
.custom-player__button:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.custom-player__icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  pointer-events: none;
}

.custom-player__icon--pause,
.custom-player__icon--volume-off,
.custom-player__icon--minimize {
  display: none;
}

.custom-player.is-playing .custom-player__icon--play,
.custom-player.is-muted .custom-player__icon--volume,
.custom-player.is-fullscreen .custom-player__icon--maximize {
  display: none;
}

.custom-player.is-playing .custom-player__icon--pause,
.custom-player.is-muted .custom-player__icon--volume-off,
.custom-player.is-fullscreen .custom-player__icon--minimize {
  display: block;
}

.custom-player__progress,
.custom-player__volume-slider {
  --progress: 0%;
  --volume-progress: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.custom-player__progress {
  flex: 1 1 auto;
  min-width: 120px;
}

.custom-player__time {
  display: inline-flex;
  min-width: 82px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-meta);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.custom-player__volume {
  display: flex;
  min-width: 36px;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.custom-player__volume-slider {
  width: 68px;
}

.custom-player__progress::-webkit-slider-runnable-track,
.custom-player__volume-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(
      to right,
      var(--color-text) 0%,
      var(--color-text) var(--progress),
      rgba(255, 255, 255, 0.24) var(--progress),
      rgba(255, 255, 255, 0.24) 100%
    );
}

.custom-player__volume-slider::-webkit-slider-runnable-track {
  background:
    linear-gradient(
      to right,
      var(--color-text) 0%,
      var(--color-text) var(--volume-progress),
      rgba(255, 255, 255, 0.24) var(--volume-progress),
      rgba(255, 255, 255, 0.24) 100%
    );
}

.custom-player__progress::-moz-range-track,
.custom-player__volume-slider::-moz-range-track {
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.24);
}

.custom-player__progress::-moz-range-progress,
.custom-player__volume-slider::-moz-range-progress {
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
}

.custom-player__progress::-webkit-slider-thumb,
.custom-player__volume-slider::-webkit-slider-thumb {
  border: 0;
  border-radius: var(--radius-pill);
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-text);
}

.custom-player__progress::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: -4px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.custom-player__volume-slider::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
}

.custom-player__progress::-moz-range-thumb,
.custom-player__volume-slider::-moz-range-thumb {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-text);
}

.custom-player__progress::-moz-range-thumb {
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.custom-player__volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
}

.video-modal__frame.is-buffering .custom-player {
  opacity: 0.62;
  pointer-events: none;
}

.video-modal__frame.is-video-error .custom-player,
.video-modal__frame.is-video-error .bpro-video-surface {
  opacity: 0;
  pointer-events: none;
}

/* Fallback: SDK nicht verfügbar -> normaler Vimeo-Player. */
.video-modal.is-vimeo-fallback .custom-player,
.video-modal.is-vimeo-fallback .bpro-video-surface,
.video-modal.is-vimeo-fallback .bpro-video-center-play,
.video-modal.is-vimeo-fallback .bpro-video-status {
  display: none !important;
}

.video-modal.is-vimeo-fallback .bpro-vimeo-player iframe {
  pointer-events: auto;
}

/* Fullscreen: echtes Video-Vollbild mit UI als Overlay.
   Titel, Schließen-Button und Player-Steuerung erscheinen bei Interaktion
   und werden über die vorhandene is-controls-hidden-Logik gemeinsam ausgeblendet. */
.video-modal__dialog.is-browser-fullscreen,
.video-modal__dialog:fullscreen {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  transform: none;
}

.video-modal__dialog:fullscreen::backdrop {
  background: #000;
}

/* Das Video belegt im Vollbild die komplette Fläche – ohne runde Ecken. */
.video-modal__dialog.is-browser-fullscreen .video-modal__frame,
.video-modal__dialog:fullscreen .video-modal__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 0 !important;
  box-shadow: none;
}

.video-modal__dialog.is-browser-fullscreen .bpro-vimeo-player,
.video-modal__dialog.is-browser-fullscreen .bpro-vimeo-player > div,
.video-modal__dialog.is-browser-fullscreen .bpro-vimeo-player iframe,
.video-modal__dialog:fullscreen .bpro-vimeo-player,
.video-modal__dialog:fullscreen .bpro-vimeo-player > div,
.video-modal__dialog:fullscreen .bpro-vimeo-player iframe {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

/* Videotitel als Overlay oben links. */
.video-modal__dialog.is-browser-fullscreen .video-modal__head,
.video-modal__dialog:fullscreen .video-modal__head {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  left: max(28px, env(safe-area-inset-left));
  z-index: 20;
  display: block;
  width: min(820px, calc(100% - 140px));
  min-height: 0;
  padding: 0;
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
}

.video-modal__dialog.is-browser-fullscreen .video-modal__head h2,
.video-modal__dialog:fullscreen .video-modal__head h2 {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

/* Schließen-Button oben rechts als Overlay. */
.video-modal__dialog.is-browser-fullscreen .video-modal__close,
.video-modal__dialog:fullscreen .video-modal__close {
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 21;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    background-color 180ms ease;
}

/* Player-Steuerung unten vollständig innerhalb des Vollbilds. */
.video-modal__dialog.is-browser-fullscreen .custom-player,
.video-modal__dialog:fullscreen .custom-player {
  left: max(24px, env(safe-area-inset-left));
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 30;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

/* Im Vollbild verschwinden Titel und Schließen-Button zusammen mit den Controls.
   Außerhalb des Vollbilds bleibt der Schließen-Button weiterhin dauerhaft sichtbar. */
.video-modal__dialog.is-browser-fullscreen.is-controls-hidden .video-modal__head,
.video-modal__dialog:fullscreen.is-controls-hidden .video-modal__head {
  opacity: 0;
  transform: translateY(-8px);
}

.video-modal__dialog.is-browser-fullscreen.is-controls-hidden .video-modal__close,
.video-modal__dialog:fullscreen.is-controls-hidden .video-modal__close {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
}

@media (max-width: 760px) {
  .video-modal {
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .video-modal__dialog {
    max-height: calc(100dvh - 20px);
  }

  .video-modal__head {
    width: calc(100% - 62px);
    min-height: 56px;
    padding-bottom: 8px;
  }

  .video-modal__head h2 {
    max-width: 100%;
    font-size: var(--font-size-heading);
  }

  .video-modal__close {
    width: 48px;
    height: 48px;
  }

  .video-modal__close-icon {
    width: 23px;
    height: 23px;
  }

  .custom-player {
    left: 8px;
    right: 8px;
    bottom: 8px;
    min-height: 48px;
    gap: 4px;
    padding: 6px 7px;
  }

  .custom-player__button {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .custom-player__icon {
    width: 19px;
    height: 19px;
  }

  .custom-player__progress {
    min-width: 54px;
  }

  .custom-player__time {
    min-width: 39px;
    font-size: var(--font-size-meta);
  }

  .custom-player__time span:nth-child(2),
  .custom-player__time span:nth-child(3),
  .custom-player__volume-slider {
    display: none;
  }

  .custom-player__volume {
    min-width: 34px;
  }

  .bpro-video-status {
    font-size: var(--font-size-meta);
  }

  .video-modal__dialog.is-browser-fullscreen .custom-player,
  .video-modal__dialog:fullscreen .custom-player {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .video-modal__dialog.is-browser-fullscreen .video-modal__head,
  .video-modal__dialog:fullscreen .video-modal__head {
    top: max(14px, env(safe-area-inset-top));
    left: 12px;
    width: calc(100% - 70px);
  }

  .video-modal__dialog.is-browser-fullscreen .video-modal__close,
  .video-modal__dialog:fullscreen .video-modal__close {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-modal,
  .video-modal__dialog,
  .video-modal__close,
  .custom-player,
  .bpro-video-center-play,
  .bpro-video-status__spinner {
    transition: none !important;
    animation: none !important;
  }
}


/* ==========================================================
   Portfolio | Galerie v3
   Lange Titel + schrittweises Nachladen
   ========================================================== */

.portfolio-card__content strong {
  width: min(100%, 94%);
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  text-wrap: balance;
  line-height: 1.02;
}

.portfolio-load-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.5vw, 46px);
}

.portfolio-load-more[hidden] {
  display: none !important;
}

.portfolio-load-more__button {
  min-width: 190px;
}

@media (max-width: 760px) {
  .portfolio-card__content strong {
    width: min(100%, 96%);
    line-height: 1.04;
  }

  .portfolio-load-more {
    margin-top: 26px;
  }
}


/* ==========================================================
   Bild-Sections | Einstellbare Abdunklung

   Im HTML pro Section steuerbar:
   style="--image-overlay-opacity: 0;"    = keine Abdunklung
   style="--image-overlay-opacity: 0.25;" = leicht
   style="--image-overlay-opacity: 0.50;" = mittel
   style="--image-overlay-opacity: 0.70;" = stark

   Die Klasse .image-overlay nur an Sections/Boxen verwenden,
   deren Hintergrundbild abgedunkelt werden soll.
   ========================================================== */

.image-overlay {
  --image-overlay-opacity: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.image-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(5, 5, 5, var(--image-overlay-opacity));
  pointer-events: none;
}

.image-overlay > * {
  position: relative;
  z-index: 1;
}
/* ==========================================================
   Studio | Scroll-Sequenz
   Fullscreen 3D-Sequenz mit Text hinter dem transparenten Canvas.
   ========================================================== */

/* V3 iOS Safari: Hintergrund liegt bewusst auf dem nicht-sticky Parent.
   Der Sticky-Layer bleibt transparent, damit Safari ihn nicht als Quelle
   für die Einfärbung der oberen/unteren Browserbereiche verwendet. */
.studio-sequence {
  display: none;
  position: relative;
  width: 100%;
  height: 500dvh;
  margin-bottom: var(--section-y);
background: var(--color-bg);
}

.js .studio-sequence {
  display: block;
}

.studio-sequence__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

/* Ab Frame 120 wird dieser 200px hohe Verlauf per JS weich eingeblendet.
   Er verbindet das Ende der Scroll-Sequenz mit dem schwarzen Seitenhintergrund. */
.studio-sequence__sticky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 200px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-bg));
  opacity: var(--studio-sequence-bottom-gradient-opacity, 0);
  pointer-events: none;
  will-change: opacity;
}

.studio-sequence__copy {
  --studio-sequence-copy-scale: 1;

  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(var(--container-text), calc(100% - 40px));
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%) scale(var(--studio-sequence-copy-scale));
  transform-origin: center center;
  will-change: transform;
}

.studio-sequence__copy h2 {
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-heading);
  font-weight: 700;
  text-wrap: balance;
}

.studio-sequence__copy p {
  max-width: var(--container-narrow);
  margin: var(--space-copy-top) auto 0;
  font-size: var(--font-size-large);
  line-height: var(--line-height-compact);
  color: var(--color-muted);
  text-wrap: balance;
}

.studio-sequence__canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  max-width: none;
  max-height: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* 16:9-Sequenz: immer bildfüllend wie object-fit: cover. */
.studio-sequence__canvas.sequence--landscape {
  width: max(100vw, calc(100dvh * 16 / 9));
  height: max(100dvh, calc(100vw * 9 / 16));
}

/* 9:16-Sequenz: ebenfalls immer bildfüllend. */
.studio-sequence__canvas.sequence--portrait {
  width: max(100vw, calc(100dvh * 9 / 16));
  height: max(100dvh, calc(100vw * 16 / 9));
}

@media (max-width: 760px) {
  .studio-sequence__copy {
    width: min(100% - 44px, var(--container-text));
  }

  .studio-sequence__copy h2 {
    font-size: var(--font-size-page-title);
  }

  .studio-sequence__copy p {
    margin-top: 18px;
    font-size: var(--font-size-small);
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-sequence {
    height: 180dvh;
  }

  .studio-sequence__copy {
    --studio-sequence-copy-scale: 1 !important;
  }

}

/* ==========================================================
   JavaScript-Hinweis | Fallback; Haupt-Styles stehen inline im <noscript>
   ========================================================== */

.noscript-notice {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 2147483647;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 14px 18px;
  border-radius: 12px;
  background: #d71920;
  color: #ffffff;
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .noscript-notice {
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  .noscript-notice {
    width: calc(100vw - 28px);
    max-width: none;
    font-size: var(--font-size-small);
  }
}

/* Datenschutz-Einstellungen im mobilen Footer sauber zentrieren. */
@media (max-width: 760px) {
  .page-footer-meta > [data-privacy-settings-open] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 340px) {
  .page-footer-meta > [data-privacy-settings-open] {
    grid-column: auto;
  }
}


/* Findet Amy: auf Touch-Geräten direkt sichtbar und unten bei den Namensinfos. */
@media (hover: none), (pointer: coarse) {
  .team-card--amy .team-card__content {
    padding-right: clamp(132px, 35vw, 164px);
  }

  .team-card--amy .team-card__amy-action {
    inset: auto clamp(18px, 2vw, 30px) clamp(18px, 2vw, 28px) auto;
    z-index: 4;
    display: block;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
  }

  .team-card--amy .team-card__amy-action::before,
  .team-card--amy .team-card__amy-icon {
    display: none;
  }

  .team-card--amy .team-card__amy-link.button,
  .team-card--amy.is-amy-revealed .team-card__amy-link.button {
    display: inline-flex;
    min-width: 0;
    min-height: 42px;
    padding: 10px 16px;
  }
}


/* ==========================================================
   18 | 404 / SMPTE Signal Lost
   Fullscreen-Testbild mit lokalem 30-FPS-Timecode.
   ========================================================== */

.error404-page {
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.error404-main {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding:
    max(clamp(84px, 10vw, 130px), calc(env(safe-area-inset-top) + 72px))
    clamp(16px, 3vw, 42px)
    max(clamp(22px, 4vw, 48px), env(safe-area-inset-bottom));
  background: #000;
}

.error404-logo {
  position: absolute;
  top: max(clamp(24px, 3.2vw, 42px), calc(env(safe-area-inset-top) + 18px));
  left: 50%;
  z-index: 3;
  display: block;
  width: clamp(360px, 40.5vw, 585px);
  transform: translateX(-50%);
}

.error404-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(108px, 13.5vh, 162px);
  object-fit: contain;
  object-position: center;
}

.error404-smpte {
  position: absolute;
  inset: var(--edge, 15px);
  z-index: -2;
  display: grid;
  grid-template-rows: 67fr 8fr 25fr;
  overflow: hidden;
  border-radius: var(--radius, var(--radius-media, 20px));
  background: #000;
}

.error404-smpte__row {
  min-width: 0;
}

.error404-smpte__row--main,
.error404-smpte__row--middle {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.error404-smpte__row--main span:nth-child(1) { background: #b4b4b4; }
.error404-smpte__row--main span:nth-child(2) { background: #b4b400; }
.error404-smpte__row--main span:nth-child(3) { background: #00b4b4; }
.error404-smpte__row--main span:nth-child(4) { background: #00b400; }
.error404-smpte__row--main span:nth-child(5) { background: #b400b4; }
.error404-smpte__row--main span:nth-child(6) { background: #b40000; }
.error404-smpte__row--main span:nth-child(7) { background: #0000b4; }

.error404-smpte__row--middle span:nth-child(1) { background: #0000b4; }
.error404-smpte__row--middle span:nth-child(2) { background: #0b0b0b; }
.error404-smpte__row--middle span:nth-child(3) { background: #b400b4; }
.error404-smpte__row--middle span:nth-child(4) { background: #0b0b0b; }
.error404-smpte__row--middle span:nth-child(5) { background: #00b4b4; }
.error404-smpte__row--middle span:nth-child(6) { background: #0b0b0b; }
.error404-smpte__row--middle span:nth-child(7) { background: #b4b4b4; }

.error404-smpte__row--bottom {
  display: grid;
  grid-template-columns: 1.25fr 1.25fr 1.25fr 1.9fr 0.34fr 0.34fr 0.34fr 1.58fr;
}

.error404-smpte__row--bottom span:nth-child(1) { background: #001a42; }
.error404-smpte__row--bottom span:nth-child(2) { background: #f2f2f2; }
.error404-smpte__row--bottom span:nth-child(3) { background: #32103f; }
.error404-smpte__row--bottom span:nth-child(4) { background: #080808; }
.error404-smpte__row--bottom span:nth-child(5) { background: #050505; }
.error404-smpte__row--bottom span:nth-child(6) { background: #111; }
.error404-smpte__row--bottom span:nth-child(7) { background: #1d1d1d; }
.error404-smpte__row--bottom span:nth-child(8) { background: #080808; }

.error404-panel {
  display: grid;
  justify-items: center;
  width: min(760px, calc(100vw - 36px));
  gap: 8px;
  text-align: center;
  transform: translateY(clamp(-72px, -6vh, -42px));
}

.error404-block {
  background: #000;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.error404-block--error {
  width: fit-content;
  padding: 9px 16px 10px;
  font-family: "Geist Pixel", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #fff;
  font-size: clamp(1.05rem, 0.96rem + 0.4vw, 1.35rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.error404-block--timecode {
  width: fit-content;
  max-width: 100%;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.8vw, 28px);
}

.error404-timecode,
.error404-panel h1,
.error404-panel__copy {
  font-family: "Geist Pixel", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.error404-timecode {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.28em;
  margin: 0;
  color: #fff;
  font-size: clamp(2.15rem, 1.12rem + 4.6vw, 5.45rem);
  line-height: 0.86;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.error404-timecode__prefix {
  display: inline-block;
  flex: 0 0 auto;
  color: #fff;
  font: inherit;
  letter-spacing: inherit;
}

/* Feste Zeichen-Slots verhindern jede Breitenänderung des laufenden Timecodes. */
.error404-timecode__value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.error404-timecode__char {
  display: inline-block;
  flex: 0 0 0.64em;
  width: 0.64em;
  text-align: center;
}

.error404-timecode__char--separator {
  flex-basis: 0.30em;
  width: 0.30em;
}

.error404-block--message {
  width: min(650px, 100%);
  padding: clamp(18px, 2.5vw, 28px) clamp(18px, 3vw, 34px);
}

.error404-panel h1 {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(1.85rem, 1.28rem + 2vw, 3.2rem);
  line-height: 0.96;
  font-weight: 600;
  white-space: nowrap;
}

.error404-panel__copy {
  max-width: 560px;
  margin: 12px auto 0;
  color: #c8c8c8;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
  line-height: 1.32;
  font-weight: 400;
  text-wrap: balance;
}

/* Der CTA bleibt bewusst in Nohemi und sitzt mit im Textblock. */
.error404-home-button {
  width: auto;
  min-width: 170px;
  margin-top: 18px;
  font-family: "Nohemi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Footer-Meta exakt im Stil der Unterseiten: Copyright + Rechtliches. */
.error404-footer {
  position: absolute;
  left: 50%;
  bottom: calc(var(--edge, 15px) + 24px);
  z-index: 3;
  width: min(calc(100% - 32px), 760px);
  transform: translateX(-50%);
}

.error404-footer .page-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  color: var(--color-text);
  font-family: "Nohemi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-meta);
  line-height: var(--line-height-compact);
  text-align: center;
}

.error404-footer .page-footer-meta a {
  color: var(--color-text);
  text-decoration: none;
  opacity: 1;
  transition: color 220ms ease, opacity 260ms ease;
}

.error404-footer .page-footer-meta a:hover,
.error404-footer .page-footer-meta a:focus-visible {
  color: var(--color-text);
  opacity: 0.72;
}

.error404-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .error404-main {
    padding:
      max(86px, calc(env(safe-area-inset-top) + 72px))
      12px
      max(66px, calc(env(safe-area-inset-bottom) + 54px));
  }

  .error404-logo {
    top: max(28px, calc(env(safe-area-inset-top) + 18px));
    width: min(405px, 86vw);
  }

  .error404-logo img {
    max-height: 123px;
  }

  .error404-footer {
    bottom: 26px;
    width: min(calc(100% - 24px), 620px);
  }

  .error404-footer .page-footer-meta {
    gap: 6px 12px;
  }

  .error404-smpte {
    grid-template-rows: 62fr 9fr 29fr;
  }

  .error404-panel {
    width: min(100%, 610px);
    gap: 7px;
    transform: translateY(-28px);
  }

  .error404-block--error {
    padding: 8px 13px 9px;
  }

  .error404-block--timecode {
    padding: 14px 14px 15px;
  }

  .error404-timecode {
    gap: 0.21em;
    font-size: clamp(1.65rem, 8.2vw, 3.2rem);
  }

  .error404-block--message {
    padding: 18px 16px 20px;
  }

  .error404-panel h1 {
    font-size: clamp(1.8rem, 8vw, 2.7rem);
    white-space: normal;
  }

  .error404-panel__copy {
    margin-top: 10px;
    font-size: clamp(0.92rem, 4vw, 1.03rem);
  }

  .error404-home-button {
    width: 100%;
    margin-top: 16px;
  }
}

@media (max-width: 430px) {
  .error404-timecode {
    gap: 0.16em;
    font-size: clamp(1.4rem, 7.4vw, 2.05rem);
  }

  .error404-timecode__char {
    flex-basis: 0.62em;
    width: 0.62em;
  }

  .error404-timecode__char--separator {
    flex-basis: 0.28em;
    width: 0.28em;
  }
}