/* ============================================================
   COMPONENTS · Wiederverwendbare Bausteine
   Ausgerichtet auf design-system/ueberschall-homepage-final.html
   Header (sticky+blur) / Nav / .label (Solar) / Buttons (Solar-Outline) /
   Hero / Trust-Bar / Verbs / Brüder / .btn-video / Testimonials /
   Referenz-Cards / CTA / Footer
   ============================================================ */

/* === HEADER (sticky + blur backdrop) === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--border);
  /* Full-bleed-Hintergrund kommt via ::before weiter unten — siehe Zeile ~2020 */
}

/* Globaler Signature-Streifen unter dem Header — auf allen Seiten sichtbar */
.site-signature-line {
  position: relative; z-index: 5;
  width: 100vw; height: 3px;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(90deg, var(--solar), var(--coral) 40%, var(--magenta) 65%, var(--cyan));
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-6) var(--gutter);
  /* Header bleibt kompakt, auch wenn Container-Content auf wide Screens mitwächst */
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}

.logo-block {
  display: flex;
  align-items: center;
  gap: 11px;
}

.logo-mark {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

.logo-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.logo-sub {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* === NAV === */
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-soft);
}

.site-nav a:hover {
  color: var(--bone);
}

.site-nav a.is-active {
  color: var(--coral);
}

/* Home-Link nur im Mobile-Menü (auf Desktop reicht das Logo) */
.site-nav__home { display: none; }

/* Close-Button im Mobile-Overlay — nur mobil sichtbar */
.mobile-nav-close {
  display: none;
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  padding: 12px;
  background: none;
  border: 0;
  color: var(--bone);
  cursor: pointer;
  z-index: 210;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-close:hover { color: var(--solar); }

.nav-cta {
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--border-cta);
}

.nav-cta:hover {
  background: var(--surface-hover);
}

/* === LANG-SWITCH (DE/EN) === */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding-left: 14px;
  border-left: 0.5px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
}
.lang-switch__link {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}
.lang-switch__link:hover { color: var(--bone); }
.lang-switch__link.is-active { color: var(--bone); }
.lang-switch__sep { color: var(--border-strong); }

/* === NAV DROPDOWN ===
   Click-Toggle Dropdown im Hauptmenü, sitzt mittig unter dem Trigger.
   JS-Logik in main.js — togglet .is-open auf .nav-dropdown. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  transition: color 0.2s ease;
}

.nav-dropdown-trigger:hover,
.nav-dropdown.is-open .nav-dropdown-trigger {
  color: var(--bone);
}

.nav-dropdown-trigger.is-active {
  color: var(--coral);
}

.nav-dropdown-chev {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-dropdown.is-open .nav-dropdown-chev {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  /* Greife unter die Header-Border durch — exakt 29px Abstand zur Header-Unterkante */
  top: calc(100% + 29px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 6px;
  z-index: 200;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}

.nav-dropdown.is-open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text-soft);
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-menu a:hover {
  background: var(--surface-hover);
  color: var(--bone);
}

.nav-dropdown-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--bone);
  line-height: 1.2;
}

.nav-dropdown-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
}

/* === LABEL (vereinheitlicht: Martian Mono, Solar, uppercase via CSS) === */
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--solar);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Legacy-Label-Variante "// SECTION" — bleibt für Subpages */
.section-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--solar);
  letter-spacing: var(--ls-wide);
  margin-bottom: 10px;
}

/* === BUTTONS (Solar-Outline-System) === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: center;
  background: transparent;
  border: 0.5px solid var(--border-cta);
  color: var(--bone);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-primary {
  border-color: var(--solar);
  color: var(--solar);
  font-weight: 600;
}

.btn-primary:hover {
  background: rgba(242, 160, 61, 0.1);
}

.btn-secondary:hover {
  background: var(--surface-hover);
}

/* === HERO === */
.hero {
  position: relative;
  overflow: visible;
  padding: 9rem var(--gutter) 6rem;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h)); /* dvh = dynamic viewport, korrigiert mobile URL-Bar */
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1; /* Hero über der Verbs-Section, damit die Welle + ihr Schatten den Rainbow-Bloom überschreiben können */
}

/* Welle: fest am unteren .hero-Rand verankert, feste Höhe (350px) —
   damit sie auf jeder Viewport-Breite an derselben vertikalen Position bleibt.
   Plus preserveAspectRatio="none" im SVG, damit die Wellenform nicht
   proportional mitskaliert (= keine vertikale Wanderung beim Resize).
   100vw + max-width: none, damit die Welle bis zum Viewport-Rand reicht. */
.hero-wave {
  position: absolute;
  /* Höhe deutlich vergrößert (600 → 1000), bottom angepasst (-125 → -325)
     damit die Wellen-Linie ungefähr an derselben Y-Position bleibt.
     Resultat: dieselbe vertikale Anker-Position, ~1.67× größere Amplitude. */
  bottom: -325px;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1000px;
  max-width: none;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  /* Harter Drop-Shadow (Blur 0): scharfe schwarze Wellen-Silhouette
     diagonal nach unten-rechts versetzt — Schatten "kommen weiter
     vor" auf der rechten Seite, als würde Licht von oben-links fallen. */
  filter: drop-shadow(18px 14px 0 rgba(0, 0, 0, 0.85));
}

/* Abdunkler links → rechts: linke Hero-Hälfte voll deckend dunkel
   (Welle dort unsichtbar, Schrift auf ruhigem Grund),
   rechts Welle als Farb-Akzent sichtbar.
   Streckt sich nach links bis zum Viewport-Rand, damit auf wide Screens
   der Bereich links neben .hero ebenfalls schwarz bleibt. */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: 0;
  background: linear-gradient(
    to right,
    rgba(10, 10, 15, 1)    0%,
    rgba(10, 10, 15, 0.95) 45%,
    rgba(10, 10, 15, 0)    78%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
}

.hero .label {
  margin-bottom: 2rem;
}

.hero h1 {
  margin-bottom: 2rem;
  /* Glow als text-shadow statt filter:drop-shadow — drastisch billiger
     und animiert nicht permanent durch den wave-flow-Span. */
  text-shadow:
    0  0  35px rgba(242, 160,  61, 0.28),
    0  0  85px rgba(168,  85, 199, 0.26),
    0 20px 40px rgba(  0,   0,   0, 0.40);
}

.gradient-text {
  background: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-lede {
  max-width: 600px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.4;
  color: var(--text-soft);
  margin-bottom: 0;
}

.hero-lede strong {
  color: var(--bone);
  font-weight: 500;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* === TAG (Legacy v2-Hero-Label, Cyan) — bleibt für Kompatibilität === */
.tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--cyan);
  letter-spacing: var(--ls-wide);
  margin-bottom: 1.75rem;
}

/* === VIDEO-PLACEHOLDER (Legacy v2 — auf Final nicht mehr verwendet) === */
.video-section {
  padding: 0 var(--gutter) var(--sp-16);
}

.video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  overflow: hidden;
}

.video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-signature);
  opacity: 0.04;
}

.play-btn {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--r-full);
  background: var(--surface-hover);
  border: 0.5px solid var(--border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn svg {
  margin-left: 4px;
}

.video-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--muted);
  letter-spacing: 0.1em;
}

/* === TRUST BAR === */
.trust-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--gutter);
  background: var(--surface-deep);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tb-label {
  color: var(--solar);
}

/* === SECTION HELFER === */
.section {
  padding: 8rem var(--gutter);
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--band,
.alt-bg {
  background: var(--surface-deep);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: var(--sp-16);
}

.section-head .label {
  margin-bottom: 12px;
}

.section-link {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 8px;
}

.section-link:hover {
  color: var(--solar);
}

/* === VERBS (Homepage „Was wir machen") === */
.verbs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
}

/* Strich über der "Eine Welt, drei Räume."-Überschrift — nur so lang
   wie die Überschrift selbst. Statischer Verlauf: links Solar → rechts Cyan.
   Scope via :has(.verbs-grid), damit andere Section-Head-H2s unbetroffen.

   Plus 3D-Tiefe: das H2 "tritt aus der Seite heraus" durch perspective
   (am Parent) + translateZ (am H2 selbst) + mehrlagiger text-shadow
   (feiner Highlight oben, dunkler Drop unten, farbiger Tiefen-Glow). */
/* Verbs-Sektion bekommt einen großen Backlight-Layer (::before),
   der die ganze Sektion ausleuchtet, plus den Nah-Halo direkt am Text. */
.section:has(.verbs-grid) {
  position: relative;
}

/* Sektion-weiter Bloom: gradient-gefüllt, stark geblurrt, faded via
   Radial-Mask zu transparent an den Rändern → keine sichtbaren Kanten,
   leuchtet wie ein Raum-Spotlight in die ganze Sektion. */
/* Bloom-Layer entfernt — Sektion-Hintergrund ist jetzt purer var(--void)
   wie der Hero. Die Cards bekommen ihren farbigen Glow gegen das Schwarz. */

/* Direkte Section-Kinder über den Bloom heben */
.section:has(.verbs-grid) > * {
  position: relative;
  z-index: 1;
}

/* Darken-Layer + Top-Fade entfernt — nicht mehr nötig, weil die Sektion
   direkt auf var(--void) sitzt, demselben Ton wie der Hero. */

.section:has(.verbs-grid) .section-head h2 {
  position: relative;
  display: inline-block;
}

.verb-block {
  display: block;          /* nötig, weil <a> standardmäßig inline ist */
  text-decoration: none;   /* kein Underline auf dem Link */
  color: inherit;          /* kein Link-Blau */
  position: relative;
  overflow: hidden;
  padding: 1.75rem;
  background: var(--void);  /* Hero-Schwarz — Card schmilzt mit Sektion-Hintergrund */
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-xl);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.verb-block:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

/* Per-Service Glow um die Card — schimmert in den Raum.
   Zwei Layer: kompakter Nah-Shimmer + weiter Fern-Atmosphäre. */
.verb-1 {
  box-shadow:
    0  6px 28px rgba(242, 160,  61, 0.15),    /* Solar nah */
    0 24px 90px rgba(242, 160,  61, 0.08);    /* Solar Atmosphäre */
}

.verb-2 {
  box-shadow:
    0  6px 28px rgba(233,  75, 124, 0.15),    /* Coral nah */
    0 24px 90px rgba(168,  85, 199, 0.08);    /* Magenta Atmosphäre */
}

.verb-3 {
  box-shadow:
    0  6px 28px rgba(168,  85, 199, 0.15),    /* Magenta nah */
    0 24px 90px rgba( 61, 191, 239, 0.08);    /* Cyan Atmosphäre */
}

/* Hover verstärkt den Glow */
.verb-1:hover {
  box-shadow:
    0  8px 36px rgba(242, 160,  61, 0.32),
    0 32px 110px rgba(242, 160, 61, 0.18);
}
.verb-2:hover {
  box-shadow:
    0  8px 36px rgba(233,  75, 124, 0.32),
    0 32px 110px rgba(168, 85, 199, 0.18);
}
.verb-3:hover {
  box-shadow:
    0  8px 36px rgba(168,  85, 199, 0.32),
    0 32px 110px rgba( 61, 191, 239, 0.18);
}

/* Originales .verb-strich Element wird nicht mehr gerendert —
   Strich lebt jetzt auf .label::before und passt sich automatisch der Label-Breite an */
.verb-strich {
  display: none;
}

/* Label als inline-block, damit Box-Breite = Textbreite */
.verb-block .label {
  position: relative;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0.6rem;
}

/* Strich als ::before des Labels: aktuell deaktiviert (content: none).
   Geometrie bleibt für späteres Wiederaktivieren erhalten. */
.verb-block .label::before {
  content: none;
  position: absolute;
  bottom: calc(100% + 1.3rem);
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
}

/* Gradients pro Service (gleiches Farbpaar wie Label-Gradient darunter)
   Aktuell ohne Wirkung, weil die Strichs global deaktiviert sind (content: none).
   Bleibt im Code für späteres Re-Enable. */
.verb-1 .label::before {
  background: linear-gradient(90deg, var(--solar), var(--coral) 55%, transparent);
}

.verb-2 .label::before {
  background: linear-gradient(90deg, var(--coral), var(--magenta) 55%, transparent);
}

.verb-3 .label::before {
  background: linear-gradient(90deg, var(--magenta), var(--cyan) 55%, transparent);
}

/* Verb-Labels als Gradient-Text (gleiche Farbpaare wie Strich)
   Hinweis: keine transparent-Stops auf Text, sonst werden Buchstaben unsichtbar */
/* Verb-Labels: Verteilte Wave — alle drei Labels teilen sich EINEN
   Wellen-Gradient über die volle Breite. Jeder Block zeigt 1/3 davon:
   - Block 1: Solar-Coral-Bereich
   - Block 2: Coral-Magenta-Bereich
   - Block 3: Magenta-Cyan-Bereich
   Eigentliche Setup-Regel ist im wave-flow-distributed-Block weiter
   unten (gemeinsam mit den btn-more). Hier nur background-clip+color. */
.verb-1 .label,
.verb-2 .label,
.verb-3 .label {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Statische Per-Card Gradienten — matchen den jeweiligen card-accent oben. */
.verb-1 .label { background-image: var(--grad-accent-1); }  /* Solar → Coral */
.verb-2 .label { background-image: var(--grad-accent-2); }  /* Coral → Magenta */
.verb-3 .label { background-image: var(--grad-accent-3); }  /* Magenta → Cyan */

.verb-title {
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin-bottom: 1rem;
}

/* Verb-Headlines bleiben weiß — Per-Service-Identität trägt das Label drüber. */
.verb-block .verb-title {
  color: var(--bone);
}

.verb-desc {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--muted);
}

/* Dunkler Text-Halo hinter Label, H3-Headline und Beschreibung der drei
   Verb-Blöcke — hebt den Text gegen den Rainbow-Bloom dahinter ab.
   NICHT auf die Section-H2 "Eine Welt, drei Räume." — die bleibt pur. */
.verb-block .label,
.verb-block .verb-title,
.verb-block .verb-desc {
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(0, 0, 0, 0.45);
}


/* Oberbegriff-Label oben im Verb-Block (Audio Engineering / Coaching ...) */
.verb-block .label {
  margin-bottom: 0.6rem;
}

/* Verb-Link: kleiner Apple-Style Text-CTA unter jedem Verb,
   Text als Gradient (gleiche Farbpaare wie Label & Strich oben),
   Pfeil-Rutsch beim Hover */
.verb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.verb-1 .verb-link { background-image: var(--grad-accent-1); }
.verb-2 .verb-link { background-image: var(--grad-accent-2); }
.verb-3 .verb-link { background-image: var(--grad-accent-3); }

.verb-link .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}

.verb-link:hover .arr {
  transform: translateX(3px);
}

/* === SERVICE CARDS (Legacy v2 — bleibt für Kompatibilität / Subpages) === */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.service-card {
  position: relative;
  overflow: hidden;
  padding: 1.75rem;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-xl);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.accent-1 { background: var(--grad-accent-1); }
.accent-2 { background: var(--grad-accent-2); }
.accent-3 { background: var(--grad-accent-3); }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.card-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--ls-mono);
}

/* Card-Num als Gradient-Text per Service (matched zu Homepage Verb-Labels) */
.service-1 .card-num {
  background: var(--grad-accent-1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.service-2 .card-num {
  background: var(--grad-accent-2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.service-3 .card-num {
  background: var(--grad-accent-3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.card-who {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--muted);
  letter-spacing: 0.05em;
  text-align: right;
}

.card-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  margin-bottom: 12px;
}

.card-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.card-list {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 2;
  color: var(--text-soft);
  letter-spacing: 0.03em;
  padding-top: var(--sp-4);
  border-top: 0.5px solid var(--border);
}

.card-list li {
  list-style: none;
}

.card-list li::before {
  content: "·";
  color: var(--muted);
  margin-right: 8px;
}

/* Card-Link (auf leistungen-Cards): gleicher Apple-Style + Gradient wie .verb-link auf der Homepage,
   Pfeil rutscht beim Hover der Card */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.service-1 .card-link { background-image: var(--grad-accent-1); }
.service-2 .card-link { background-image: var(--grad-accent-2); }
.service-3 .card-link { background-image: var(--grad-accent-3); }

.card-link .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}

.service-card:hover .card-link .arr {
  transform: translateX(3px);
}

/* === BRÜDER === */
.brothers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center; /* linke Spalte mittig gegen die Höhe der rechten ausrichten */
}

.brothers-text .label {
  margin-bottom: 12px;
}

.brothers-text h2 {
  margin-bottom: 1.25rem;
}

.brothers-text p {
  font-family: var(--font-body);
  font-size: 19px;       /* gleich wie .hero-lede für konsistenten Fließtext-Rhythmus */
  line-height: 1.4;
  color: var(--text-soft);
}

/* Rechte Spalte: Foto-Tile + die 2 Bio-Karten stapeln */
.brothers-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Großes Foto-Tile über den Bio-Karten (Aspect-Ratio passend zum Foto 4:3).
   Solange noch kein <img> drin liegt, zeigt CSS einen dunklen Platzhalter
   mit dezentem Signatur-Gradient-Schimmer (gleiche Logik wie .ref-img). */
.brothers-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--elevated);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-xl);
  /* Warmer Außen-Glow: das Abendlicht aus dem Foto "spillt" subtil auf
     die umgebende Seite. Plus dunklerer Tiefen-Schatten für Erdung. */
  box-shadow:
    0 30px 80px rgba(242, 160,  61, 0.10),
    0 12px 32px rgba(  0,   0,   0, 0.40);
}

/* Bottom-Fade: das Foto löst sich an der Unterkante in die Seitenfarbe auf,
   damit der harte rechteckige Schnitt verschwindet und das Foto wie aus
   dem Schatten emporzutreten scheint. */
.brothers-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 55%,
    rgba(14, 14, 20, 0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

.brothers-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-signature);
  opacity: 0.05; /* dezenter Schimmer, lässt die Foto-Farben atmen */
  pointer-events: none;
}

/* Wenn ein <img> drin liegt, deckt es die Fläche komplett und der Overlay
   bleibt als sanfter Farbschimmer darüber sichtbar. */
.brothers-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brothers-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.brother-card {
  padding: 1.25rem;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-xl);
}

/* Subtiler 3D-Lift für Cards ohne Gradient-Accent: Top-Highlight (Lichtkante),
   sanftes Top-Gradient ("Licht von oben") und Drop-Shadow für Elevation.
   Greift auf Brother-Cards + Ref-Cards. */
.brother-card,
.ref-card {
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0)   60%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.07),  /* feine Lichtkante oben */
    0 4px 14px rgba(0, 0, 0, 0.30);              /* sanfter Drop-Shadow für Float-Gefühl */
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--void);
  margin-bottom: var(--sp-4);
}

.avatar-j { background: var(--grad-avatar-j); }
.avatar-a { background: var(--grad-avatar-a); }

.brother-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.brother-role {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: 12px;
}

.brother-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 12px;
}

.brother-project {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
}

/* === SHOWREEL-BUTTON (Brüder-Section) === */
.btn-video {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 1.5rem;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 0.5px solid var(--solar);
  color: var(--solar);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-video:hover {
  background: rgba(242, 160, 61, 0.1);
}

.btn-video svg {
  flex-shrink: 0;
}

/* === TESTIMONIALS === */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.testimonial-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-xl);
  min-height: 380px; /* mehr Höhe für Body-Text + sauberen Footer-Abstand */
}

/* Großes typografisches Quote-Zeichen ::before — sitzt ganz oben in der
   Card, rechtsbündig. Gefüllt mit dem per-Card-Service-Gradient via
   background-clip: text. */
.testimonial-card::before {
  content: '\201D'; /* typografisches schließendes Doppel-Anführungszeichen " */
  display: block;
  font-family: var(--font-display);
  font-size: 180px;
  font-weight: 700;
  line-height: 0.6;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.20;
  text-align: right;
  pointer-events: none;
  margin-bottom: 0.5rem;
}

/* Per-Card Gradient auf das Quote-Zeichen — matched die accent-Klasse */
.testimonial-card:has(.accent-1)::before { background-image: var(--grad-accent-1); }
.testimonial-card:has(.accent-2)::before { background-image: var(--grad-accent-2); }
.testimonial-card:has(.accent-3)::before { background-image: var(--grad-accent-3); }

.testimonial-text {
  /* flex: 1 entfernt — Text sitzt direkt unter dem Quote, Footer wird per
     margin-top: auto an den Boden gepushed. */
  font-family: var(--font-body);
  font-size: var(--fs-md); /* gleich wie .verb-desc und andere Section-Fließtexte (17px) */
  line-height: 1.5;
  color: var(--text-soft);
  margin-top: -1rem;      /* Text rückt näher an die Quote-Glyphe (deren line-height: 0.6 lässt viel Luft) */
  margin-bottom: 1.5rem;  /* garantierter Mindestabstand zum Author-Footer drunter */
}

/* Footer mit Avatar + Name: margin-top: auto pusht ihn ans Card-Boden
   in der Flex-Column → alle Footer aller Cards sind bündig auf gleicher
   Y-Position, egal wie lang der Text drüber ist. */
.testimonial-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 600;
  color: var(--void);
  flex-shrink: 0;
}

.ta-1 { background: linear-gradient(135deg, var(--solar), var(--coral)); }
.ta-2 { background: linear-gradient(135deg, var(--coral), var(--magenta)); }
.ta-3 { background: linear-gradient(135deg, var(--magenta), var(--cyan)); }

/* Author-Block (Name + Rolle) komplett im per-Card-Gradient. */
.testimonial-author {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Name etwas bolder für Hierarchie gegen die Rolle. */
.author-name {
  font-weight: 600;
}

/* Per-Card Gradient — beide Zeilen (Name + Rolle) im selben Verlauf. */
.testimonial-card:has(.accent-1) .testimonial-author { background-image: var(--grad-accent-1); }
.testimonial-card:has(.accent-2) .testimonial-author { background-image: var(--grad-accent-2); }
.testimonial-card:has(.accent-3) .testimonial-author { background-image: var(--grad-accent-3); }

/* === REFERENZ-CARDS === */
.refs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 2.5rem;
}

.ref-card {
  overflow: hidden;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-xl);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ref-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.ref-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--elevated);
}

.ref-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-signature);
  opacity: 0.12;
}

/* Legacy inner div fallback (Projekte-Subpage nutzt es noch) */
.ref-img-inner {
  width: 100%;
  height: 100%;
}

.ref-body {
  padding: 1.25rem;
}

.ref-cat {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--solar);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ref-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.ref-desc {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--muted);
}

.ref-link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--solar);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ref-link:hover {
  color: var(--bone);
}

.center-btn {
  text-align: center;
}

/* === CTA === */
.cta-section {
  position: relative;
  /* overflow: hidden ENTFERNT — verhinderte, dass die cta-wave bis zum
     Viewport-Rand reicht. Body hat ohnehin overflow-x: hidden als Safety. */
  padding: 8rem var(--gutter);
  text-align: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-wave {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  max-width: none;
  height: 100%;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

/* Darken-Vignette hinter dem Text — dunkler Spot zentriert, fadet
   zum Rand transparent → Wellen-Gradient bleibt außen sichtbar,
   innen Lesbarkeit für Label + H2 + Button. */
.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: radial-gradient(
    ellipse 50% 60% at 50% 50%,
    rgba(10, 10, 15, 0.7) 0%,
    rgba(10, 10, 15, 0)   75%
  );
  pointer-events: none;
  z-index: 1;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.cta-content .label {
  margin-bottom: 1rem;
}

.cta-content h2 {
  font-size: 80px;
  margin-bottom: 2rem;
}

/* === FOOTER === */
.site-footer {
  padding: 5rem var(--gutter) 2rem;
  background: var(--surface-deep);
  border-top: 0.5px solid var(--border);
  /* Full-bleed-Hintergrund kommt via ::before weiter unten — siehe Zeile ~2020 */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-8);
  align-items: start;
  margin: 0 auto 3rem;
  max-width: 1480px;
}
.footer-grid > *:nth-child(1) { justify-self: start; }
.footer-grid > *:nth-child(2) { justify-self: center; }
.footer-grid > *:nth-child(3) { justify-self: end; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--solar);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.footer-col a,
.footer-col p {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  margin-bottom: 10px;
}

.footer-col a:hover {
  color: var(--bone);
}

.footer-brand-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--solar);
  margin-bottom: 10px;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding-top: 1.5rem;
  border-top: 0.5px solid var(--border);
  max-width: 1480px;
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-bottom a:hover {
  color: var(--solar);
}

/* === SERVICE-PAGE COMPONENTS (Consulting-Section-Template) === */

/* Eyebrow als Gradient-Text — selbes Farbpaar wie Strich + Num pro Service.
   Die ::before-Linie startet mit der jeweiligen Service-Start-Farbe. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-image: linear-gradient(90deg, var(--solar), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--solar), transparent);
}

/* Per-Service Eyebrow-Gradients */
.service-2 .eyebrow {
  background-image: linear-gradient(90deg, var(--coral), var(--magenta));
}

.service-2 .eyebrow::before {
  background: linear-gradient(90deg, var(--coral), transparent);
}

.service-3 .eyebrow {
  background-image: linear-gradient(90deg, var(--magenta), var(--cyan));
}

.service-3 .eyebrow::before {
  background: linear-gradient(90deg, var(--magenta), transparent);
}

/* === FULL GRADIENT-IZATION der Solar-Accents auf Service-Pages === */

/* Audience "Für"-Key als Gradient-Text */
.audience .key {
  background-image: linear-gradient(90deg, var(--solar), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.service-2 .audience .key {
  background-image: linear-gradient(90deg, var(--coral), var(--magenta));
}

.service-3 .audience .key {
  background-image: linear-gradient(90deg, var(--magenta), var(--cyan));
}

/* Flagship-Label als Gradient-Text */
.flagship-label {
  background-image: linear-gradient(90deg, var(--solar), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.service-2 .flagship-label {
  background-image: linear-gradient(90deg, var(--coral), var(--magenta));
}

.service-3 .flagship-label {
  background-image: linear-gradient(90deg, var(--magenta), var(--cyan));
}

/* Flagship border-left → Gradient-Bar via ::before */
.flagship {
  position: relative;
  border-left: none;
}

.flagship::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--solar), var(--coral));
}

.service-2 .flagship::before {
  background: linear-gradient(180deg, var(--coral), var(--magenta));
}

.service-3 .flagship::before {
  background: linear-gradient(180deg, var(--magenta), var(--cyan));
}

/* ============================================================
   BUTTON-TEMPLATES — 3 Varianten:
   1. .btn-primary  — Solid Solar Outline (Standard, schon definiert oben)
   2. .btn-brand    — Überschall-Gradient als Outline + Text
   3. .btn-brand-fill — Überschall-Gradient als Solid Fill + dunkler Text
   ============================================================ */

/* === BUTTON 2: .btn-brand
   Default zeigt den vollen Signature-Gradient (Solar→Coral→Magenta→Cyan).
   Gradient ist als Palindrom definiert + auf 200% gestreckt, sodass die linke
   Hälfte den Signature-Verlauf zeigt und beim Hover smooth zur rechten
   Hälfte wandert (umgekehrte Reihenfolge) — gleiche Ping-Pong-Logik wie Service-Buttons. */
.btn-brand {
  border: 1px solid transparent;
  background-image:
    linear-gradient(90deg, var(--solar), var(--coral), var(--magenta), var(--cyan), var(--magenta), var(--coral), var(--solar)),
    linear-gradient(var(--void), var(--void)),
    linear-gradient(90deg, var(--solar), var(--coral), var(--magenta), var(--cyan), var(--magenta), var(--coral), var(--solar));
  background-size: 200% 100%, auto, 200% 100%;
  background-position: 0% 0%, 0 0, 0% 0%;
  background-origin: padding-box, padding-box, border-box;
  background-clip: text, padding-box, border-box;
  -webkit-background-clip: text, padding-box, border-box;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  transition: background-position 0.4s ease-in-out, transform 0.15s ease;
}

.btn-brand:hover {
  background-position: 100% 0%, 0 0, 100% 0%;
  transform: translateY(-1px);
}

/* === BUTTON 3: .btn-brand-fill
   Voll gefüllter Überschall-Gradient + dunkler Text, Slide-on-Hover */
.btn-brand-fill {
  background-image: var(--gradient-signature);
  background-size: 300% 100%;
  background-position: 0% 0%;
  color: var(--void);
  border: none;
  font-weight: 600;
  transition: background-position 0.4s ease-in-out, transform 0.15s ease;
}

.btn-brand-fill:hover {
  background-position: 100% 0%;
  transform: translateY(-1px);
}

/* === BUTTON-VARIANTEN 4/5/6: .btn-service-1/2/3
   Gradient-Fill per Service + Bone-Text — nur für Service-Detail-Seiten.
   Slide-on-Hover-Effekt: Gradient wandert beim Hover von 0% → 100%. */
.btn-service-1,
.btn-service-2,
.btn-service-3 {
  border: 0.5px solid transparent;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 300% 100%;
  background-position: 0 0, 0% 0%;
  color: var(--bone);
  font-weight: 600;
  transition: background-position 0.4s ease-in-out, transform 0.15s ease;
}

.btn-service-1 {
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(90deg, var(--solar), var(--coral), var(--solar));
}

.btn-service-2 {
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(90deg, var(--coral), var(--magenta), var(--coral));
}

.btn-service-3 {
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(90deg, var(--magenta), var(--cyan), var(--magenta));
}

.btn-service-1:hover,
.btn-service-2:hover,
.btn-service-3:hover {
  background-position: 0 0, 100% 0%;
  transform: translateY(-1px);
}

/* === BUTTON 7: .btn-yellow
   Kompakter Solar-Outline-Button — Default-Style für sekundäre Aktionen.
   Gleicher Look wie der Showreel-Button (.btn-video). */
.btn-yellow {
  padding: 12px 22px;
  border: 0.5px solid var(--solar);
  color: var(--solar);
  font-weight: 600;
}

.btn-yellow:hover {
  background: rgba(242, 160, 61, 0.1);
}

.btn-yellow svg {
  flex-shrink: 0;
}

/* === BUTTON 8: .btn-more
   Inline Text-CTA-Stil ("Mehr erfahren →" Pattern).
   Default-Farbe Muted (grau), kein Border, kein Background.
   Pfeil rutscht beim Hover, Text wird heller (bone). */
.btn-more {
  padding: 0;
  border: none;
  background: transparent;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  transition: color 0.2s ease;
}

.btn-more:hover {
  color: var(--bone);
}

.btn-more .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}

.btn-more:hover .arr {
  transform: translateX(3px);
}

/* Spacing wenn der .btn-more innerhalb eines Verb-Blocks sitzt */
.verb-block .btn-more {
  margin-top: 1.25rem;
}

/* Per-Verb Override: im Verb-Block-Kontext bekommt .btn-more den jeweiligen
   Service-Gradient als Text (statt der Default-Muted-Farbe) */
.verb-1 .btn-more,
.verb-2 .btn-more,
.verb-3 .btn-more {
  background-image: var(--grad-accent-1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.verb-2 .btn-more { background-image: var(--grad-accent-2); }
.verb-3 .btn-more { background-image: var(--grad-accent-3); }

/* === "Was wir machen" Section: Verlauf über alle 3 Blöcke verteilt =======
   Konzept: EIN Wellen-Gradient spannt sich über die volle Breite der
   3 Verb-Blöcke. Jeder Block zeigt ein Drittel davon:
   - Block 1: Solar → Coral-Bereich
   - Block 2: Coral → Magenta-Bereich
   - Block 3: Magenta → Cyan → Solar-Bereich
   Technik: background-size: 300% (= 3× Element-Breite) + per-Block-Offset
   via background-position. Animation läuft synchron mit Versatz pro Block
   (animation-delay je 1/3), sodass die Verteilung über die Zeit erhalten
   bleibt — der Verlauf scheint durch alle drei Blöcke gemeinsam zu fließen.
   ======================================================================== */
.verb-block .btn-more,
.verb-block .label::before {
  background-image: linear-gradient(90deg,
    var(--solar)   0%,
    var(--coral)  25%,
    var(--magenta) 50%,
    var(--cyan)   75%,
    var(--solar) 100%);
  background-size: 300% 100%;
  background-repeat: repeat;
  animation: wave-flow-distributed 14s linear infinite;
}

/* Block 2: mittleres Drittel des Verlaufs (Versatz 1/3) */
.verb-2 .btn-more,
.verb-2 .label::before {
  animation-delay: calc(-14s / 3);
}

/* Block 3: rechtes Drittel des Verlaufs (Versatz 2/3) */
.verb-3 .btn-more,
.verb-3 .label::before {
  animation-delay: calc(-28s / 3);
}

@keyframes wave-flow-distributed {
  from { background-position: 0% 0%; }
  to   { background-position: 150% 0%; }
}

/* === UTILITY: .wave-flow ============================================
   Animierter Wellen-Gradient als Text-Fill (Solar → Coral → Magenta → Cyan).
   Gleiche Color-Stops und Loop-Dauer wie die vordere Sinus-Welle im Hero.
   Anwendbar auf beliebige Text-Elemente:
     <h1 class="wave-flow">…</h1>  ·  <span class="wave-flow">01</span>
   ==================================================================== */
.wave-flow {
  background-image: linear-gradient(90deg,
    var(--solar)   0%,
    var(--coral)  25%,
    var(--magenta) 50%,
    var(--cyan)   75%,
    var(--solar) 100%);
  background-size: 200% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wave-flow 14s linear infinite;
  /* Keine Eltern-Schatten unter dem Gradient — sonst mischen sich die
     Halo-Farben mit den Wave-Flow-Stops und der Verlauf wirkt matschig. */
  text-shadow: none;
}

@keyframes wave-flow {
  from { background-position: 0% 0%; }
  to   { background-position: 200% 0%; }
}

/* Reduced-Motion: Loop pausieren, Gradient bleibt sichtbar */
@media (prefers-reduced-motion: reduce) {
  .wave-flow { animation: none; }
}

/* Hero-Kontext: Mehr-erfahren-Button sitzt mit etwas Luft unter der Lede.
   Gradient kommt via .wave-flow. */
/* Hero-Button-Spacing: gilt für jeden Button im Hero (btn-brand, btn-more, etc.) */
.hero .btn {
  margin-top: 1.5rem;
}


/* Große Service-Headline (clamp = fluide), .accent für Gradient-Wort */
.head {
  max-width: 18ch;
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.head .accent {
  background: var(--grad-accent-1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.service-2 .head .accent {
  background: var(--grad-accent-2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service-3 .head .accent {
  background: var(--grad-accent-3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Lede für Service-Pages (Inter, fluide) */
.service-lede {
  max-width: 60ch;
  margin-top: 1.6rem;
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.65;
  color: var(--muted);
}

.service-lede strong {
  color: var(--bone);
  font-weight: 500;
}

/* Caps-Grid (Capabilities-Matrix mit 1px-Trennern) */
.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}


.cap .num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  background-image: linear-gradient(90deg, var(--solar), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.service-2 .cap .num {
  background-image: linear-gradient(90deg, var(--coral), var(--magenta));
}

.service-3 .cap .num {
  background-image: linear-gradient(90deg, var(--magenta), var(--cyan));
}

.cap h3 {
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  color: var(--bone);
}

.cap p {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Audience-Liste (Für · X · Y · Z) */
.audience {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.audience .key {
  color: var(--solar);
}

.audience .dot {
  color: var(--coral);
  opacity: 0.7;
}

/* Flagship-Referenz-Card mit linkem Solar-Border */
.flagship {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  padding: 1.6rem 1.8rem;
  background: var(--surface);
  border-left: 2px solid var(--solar);
}

.flagship-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--solar);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.flagship h4 {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

.flagship p {
  max-width: 52ch;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--muted);
}

.flagship-link {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--bone);
  letter-spacing: 0.06em;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-cta);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.flagship-link:hover {
  color: var(--solar);
  border-color: var(--solar);
}

/* CTA-Row Margin auf Service-Pages (scoped, damit Hero unberührt bleibt) */
.service-page .cta-row {
  margin-top: clamp(2.6rem, 5vw, 3.4rem);
  display: flex;
  justify-content: center;
}

/* Pfeil-Animation für Buttons mit <span class="arr"> */
.btn .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}

.btn:hover .arr {
  transform: translateX(3px);
}

/* === REVEAL Animation (fade-up beim Page-Load, gestaffelt) === */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes reveal-up {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Stagger-Delay über nth-child statt Inline-Styles */
.service-page > .reveal:nth-child(1) { animation-delay: 0.05s; }
.service-page > .reveal:nth-child(2) { animation-delay: 0.12s; }
.service-page > .reveal:nth-child(3) { animation-delay: 0.20s; }
.service-page > .reveal:nth-child(4) { animation-delay: 0.28s; }
.service-page > .reveal:nth-child(5) { animation-delay: 0.36s; }
.service-page > .reveal:nth-child(6) { animation-delay: 0.44s; }
.service-page > .reveal:nth-child(7) { animation-delay: 0.52s; }
.service-page > .reveal:nth-child(8) { animation-delay: 0.60s; }

/* === SERVICE-NAV: 3-spaltige Footer-Navigation auf den Service-Detail-Seiten === */
.service-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--border);
}

.service-nav__item {
  display: block;
}

.service-nav__prev { text-align: left; }
.service-nav__overview { text-align: center; }
.service-nav__next { text-align: right; }

.service-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.service-nav__title {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  transition: color 0.2s ease;
}

.service-nav__item:hover .service-nav__title {
  color: var(--bone);
}

.service-nav__item .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}

.service-nav__prev:hover .arr {
  transform: translateX(-3px);
}

.service-nav__next:hover .arr {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .service-nav { gap: 1rem; }
}

/* === FULL-BLEED BACKGROUNDS ========================================
   Elemente bleiben im 1280px-Container (Content-Layout stabil),
   aber ihre Hintergründe + Borders strecken sich per ::before bis
   zum Viewport-Rand. Verhindert das "Karten-Edge"-Bild auf wide
   Screens, ohne die HTML-Struktur umzuwerfen.
   =================================================================== */

body {
  overflow-x: hidden; /* Safety-Netz gegen Horizontal-Scroll durch ::before */
}

.site-header,
.trust-bar,
.section--band,
.alt-bg,
.site-footer {
  position: relative;
  isolation: isolate;
  /* Originale Borders entfernen — werden vom ::before übernommen,
     sonst doppeln sie sich im 1280px-Bereich (0.5px + 0.5px ≈ 1px) */
  border-top: none;
  border-bottom: none;
}

.site-header::before,
.trust-bar::before,
.section--band::before,
.alt-bg::before,
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
}

/* Sticky-Header: rgba-Void mit Blur, Border unten */
.site-header::before {
  background: rgba(10, 10, 15, 0.85);
  border-bottom: 0.5px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Trust-Bar + Band-Sections + Footer: alle surface-deep mit Top/Bottom-Border */
.trust-bar::before,
.section--band::before,
.alt-bg::before {
  background: var(--surface-deep);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}

.site-footer::before {
  background: var(--surface-deep);
  border-top: 0.5px solid var(--border);
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  h1 { font-size: 54px; }
  h2 { font-size: 44px; }
  .cta-content h2 { font-size: 48px; }

  .header-inner,
  .trust-bar,
  .site-footer {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }

  .hero,
  .video-section,
  .section,
  .cta-section {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }

  .section-head {
    flex-direction: column;
    align-items: start;
    gap: var(--sp-4);
  }

  .verbs-grid,
  .services-grid,
  .testimonials-grid,
  .refs-grid {
    grid-template-columns: 1fr;
  }

  .brothers-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

@media (max-width: 600px) {
  h1 { font-size: 42px; }

  .hero {
    padding-top: 5rem;
  }

  .trust-bar {
    gap: 0.5rem;
  }

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

  .footer-bottom {
    flex-direction: column;
    align-items: start;
    gap: 8px;
  }
}

/* ============================================================
   TEAM-OVERVIEW + VITA (Persönliche Detailseiten)
   ============================================================ */

/* === STATS STRIP === */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
  padding: 3rem 0;
}
.stat-card {
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 10px;
  line-height: 1.4;
}

/* === TEAM-OVERVIEW CARDS (Übersicht /team/) === */
.team-overview-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 768px) {
  .team-overview-cards { grid-template-columns: 1fr; }
}
.team-overview-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  background: var(--void);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-xl);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.team-overview-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.team-overview-card--josua {
  box-shadow: 0 6px 28px rgba(242, 160, 61, 0.15), 0 24px 90px rgba(242, 160, 61, 0.08);
}
.team-overview-card--josua:hover {
  box-shadow: 0 8px 36px rgba(242, 160, 61, 0.25), 0 32px 110px rgba(242, 160, 61, 0.14);
}
.team-overview-card--aaron {
  box-shadow: 0 6px 28px rgba(61, 191, 239, 0.15), 0 24px 90px rgba(61, 191, 239, 0.08);
}
.team-overview-card--aaron:hover {
  box-shadow: 0 8px 36px rgba(61, 191, 239, 0.25), 0 32px 110px rgba(61, 191, 239, 0.14);
}
.team-overview-card__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--elevated);
  overflow: hidden;
}
.team-overview-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-signature);
  opacity: 0.06;
  pointer-events: none;
}
.team-overview-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-overview-card__body {
  padding: 1.5rem 1.75rem 1.75rem;
}
.team-overview-card__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.team-overview-card--josua .team-overview-card__role { color: var(--solar); }
.team-overview-card--aaron .team-overview-card__role { color: var(--cyan); }
.team-overview-card__name {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}
.team-overview-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text-soft);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.team-overview-card__link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.team-overview-card--josua .team-overview-card__link { color: var(--solar); }
.team-overview-card--aaron .team-overview-card__link { color: var(--cyan); }
.team-overview-card:hover .team-overview-card__link span { transform: translateX(3px); }
.team-overview-card__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

/* === VITA (Persönliche Seite /team/josua/, /team/aaron/) === */
.vita-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .vita-hero { grid-template-columns: 1fr; gap: 32px; }
}
.vita-hero__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--elevated);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.vita-hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-signature);
  opacity: 0.05;
  pointer-events: none;
}
.vita-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vita-hero__intro .label {
  margin-bottom: 1rem;
}
.vita-hero__intro h1 {
  font-size: clamp(56px, 7vw, 88px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0 0 1rem;
}
.vita-hero__subtitle {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.vita-hero__location {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 1.5rem;
}

/* === VITA: Quote / Manifesto === */
.vita-quote {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--bone);
}
.vita-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 1.5rem;
}

/* === VITA: Pills (Genres) === */
.vita-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vita-pill {
  display: inline-block;
  padding: 8px 16px;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* === VITA: Timeline === */
.vita-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.75rem;
  border-left: 0.5px solid var(--border-strong);
  padding-left: 2rem;
  max-width: 720px;
}
.vita-timeline li {
  position: relative;
}
.vita-timeline li::before {
  content: '';
  position: absolute;
  left: -2.4rem;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--solar);
  box-shadow: 0 0 0 4px var(--void);
}
.timeline-year {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.timeline-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  line-height: 1.2;
}
.timeline-role {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}

/* === VITA: Tech-Stack === */
.vita-techstack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.tech-group h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--solar);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.tech-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tech-group li {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text-soft);
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
}

/* === VITA: Project-Cards (Künstler-Aliase) === */
.vita-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.vita-project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1.75rem;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-xl);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.vita-project-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.vita-project-card__genre {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.vita-project-card__name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
.vita-project-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.vita-project-card__link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--solar);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* === VITA: Links-Liste === */
.vita-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.vita-links-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-soft);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.vita-links-list a:hover {
  border-color: var(--border-hover);
  color: var(--bone);
}

/* === GRAUER PLATZHALTER für Foto-Tiles (wenn noch kein <img> drin) === */
.brothers-photo--placeholder,
.vita-hero__photo:empty,
.team-overview-card__photo:empty {
  background: #3A3A42;  /* mittleres Grau — klar als Platzhalter erkennbar */
  position: relative;
}
.brothers-photo--placeholder::after,
.vita-hero__photo:empty::after,
.team-overview-card__photo:empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;       /* Gradient-Overlay deaktiviert beim Platzhalter */
  opacity: 0;
}

/* Brother-Card als Link: kein Underline, Color erben, klickbar */
.brother-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.brother-card--link:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

/* ============================================================
   TEAM TILES — Nike-Style Portrait Tiles
   ============================================================ */

.team-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0;
  width: 100vw;
  position: relative;
  left: calc(50% - 50vw);  /* Full-Bleed bis Viewport-Rand */
}
@media (max-width: 768px) {
  .team-tiles {
    grid-template-columns: 1fr;
  }
}

.team-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #3A3A42;  /* graue Platzhalter-Farbe */
  cursor: pointer;
}

.team-tile__photo {
  position: absolute;
  inset: 0;
  background: #3A3A42;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-tile__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-tile:hover .team-tile__photo {
  transform: scale(1.05);
}

/* Gradient-Overlay unten für Lesbarkeit der Name-Schrift */
.team-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0)    0%,
    rgba(0, 0, 0, 0)   45%,
    rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

.team-tile__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem 2.5rem;
  z-index: 2;
}
@media (max-width: 768px) {
  .team-tile__content {
    padding: 2rem 1.5rem;
  }
}

.team-tile__name {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--bone);
  margin: 0 0 12px;
}

.team-tile__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.85;
  margin-bottom: 1.25rem;
}

.team-tile__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 0.5px solid rgba(244, 244, 245, 0.4);
  padding-bottom: 4px;
  transition: border-color 0.2s ease, gap 0.2s ease;
}
.team-tile:hover .team-tile__cta {
  border-color: var(--bone);
  gap: 12px;
}

/* Top-eyebrow (für „01 JOSUA" Stil) */
.team-tile__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.6;
  margin-bottom: 8px;
}

/* ============================================================
   V2 CINEMATIC HOMEPAGE — Neue Designs
   ============================================================ */

/* --- @property + Keyframes für Rotating Conic Border, Pulse, Drift --- */
@property --ga {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes v2-gaSpin { to { --ga: 360deg; } }
@keyframes v2-glowPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes v2-livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(61,191,239,0.4); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 5px rgba(61,191,239,0); }
}
@keyframes v2-scrollNudge {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(7px); opacity: 1; }
}
@keyframes v2-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- V2 HERO --- */
.v2-hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.v2-hero__signature-line {
  /* Full-bleed-Streifen zwischen Header und Hero — bricht aus dem .container-Cap aus */
  position: relative; z-index: 5;
  width: 100vw; height: 3px;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(90deg, var(--solar), var(--coral) 40%, var(--magenta) 65%, var(--cyan));
}

/* --- V2 HERO Cosmos: drifting nebulae, star dust, sound-wave rings --- */
.v2-hero__cosmos {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.v2-hero__nebula {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.35;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.v2-hero__nebula--1 {
  width: 560px; height: 560px;
  top: -6%; right: 8%;
  background: radial-gradient(circle, rgba(242,160,61,0.55), rgba(233,75,124,0.20) 45%, transparent 70%);
  animation: v2-nebulaDriftA 42s ease-in-out infinite alternate;
}
.v2-hero__nebula--2 {
  width: 620px; height: 620px;
  bottom: -8%; left: -4%;
  background: radial-gradient(circle, rgba(168,85,199,0.50), rgba(61,191,239,0.20) 48%, transparent 72%);
  animation: v2-nebulaDriftB 58s ease-in-out infinite alternate;
}
.v2-hero__nebula--3 {
  width: 480px; height: 480px;
  top: 38%; left: 42%;
  background: radial-gradient(circle, rgba(61,191,239,0.35), transparent 65%);
  animation: v2-nebulaDriftC 72s ease-in-out infinite alternate;
  opacity: 0.28;
}
@keyframes v2-nebulaDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-40px, 30px, 0) scale(1.08); }
}
@keyframes v2-nebulaDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(50px, -35px, 0) scale(1.10); }
}
@keyframes v2-nebulaDriftC {
  0%   { transform: translate3d(0, 0, 0) scale(0.98); opacity: 0.22; }
  100% { transform: translate3d(-30px, -20px, 0) scale(1.06); opacity: 0.32; }
}

.v2-hero__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 12%,  rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px at 17% 34%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(1px 1px at 23% 68%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1px 1px at 31% 22%, rgba(255,255,255,0.45), transparent 55%),
    radial-gradient(1px 1px at 38% 82%, rgba(255,255,255,0.65), transparent 55%),
    radial-gradient(1.5px 1.5px at 44% 14%, rgba(255,255,255,0.90), transparent 55%),
    radial-gradient(1px 1px at 52% 58%, rgba(255,255,255,0.50), transparent 55%),
    radial-gradient(1px 1px at 59% 28%, rgba(255,255,255,0.60), transparent 55%),
    radial-gradient(1px 1px at 65% 76%, rgba(255,255,255,0.70), transparent 55%),
    radial-gradient(1.5px 1.5px at 72% 42%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px at 78% 18%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(1px 1px at 84% 62%, rgba(255,255,255,0.65), transparent 55%),
    radial-gradient(1px 1px at 89% 32%, rgba(255,255,255,0.45), transparent 55%),
    radial-gradient(1px 1px at 94% 78%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1.5px 1.5px at 15% 88%, rgba(255,255,255,0.90), transparent 55%),
    radial-gradient(1px 1px at 68% 8%,  rgba(255,255,255,0.55), transparent 55%);
  animation: v2-starsTwinkle 7s ease-in-out infinite alternate;
  opacity: 0.55;
}
@keyframes v2-starsTwinkle {
  0%   { opacity: 0.42; filter: brightness(0.9); }
  50%  { opacity: 0.60; filter: brightness(1.15); }
  100% { opacity: 0.48; filter: brightness(1.0); }
}

/* Sound waves — konzentrische Ringe, expandierend, gestaffelt */
.v2-hero__wave {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  border: 1px solid rgba(61,191,239,0.35);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.v2-hero__wave--1 { animation: v2-soundwave 9s ease-out infinite; animation-delay: 0s; }
.v2-hero__wave--2 { animation: v2-soundwave 9s ease-out infinite; animation-delay: 3s;  border-color: rgba(168,85,199,0.30); }
.v2-hero__wave--3 { animation: v2-soundwave 9s ease-out infinite; animation-delay: 6s;  border-color: rgba(242,160,61,0.28); }
@keyframes v2-soundwave {
  0%   { transform: scale(0.3); opacity: 0; }
  10%  { opacity: 0.55; }
  100% { transform: scale(6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-hero__nebula,
  .v2-hero__stars,
  .v2-hero__wave { animation: none !important; }
  .v2-hero__wave { opacity: 0; }
}

.v2-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,244,245,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,244,245,0.045) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(ellipse 82% 74% at 42% 40%, #000 24%, transparent 82%);
  mask-image: radial-gradient(ellipse 82% 74% at 42% 40%, #000 24%, transparent 82%);
}
.v2-hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 66% at 34% 48%,
    rgba(10,10,15,0) 0%,
    rgba(10,10,15,0.42) 66%,
    rgba(10,10,15,0.78) 100%);
}
.v2-hero__fade-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,15,0) 0%, rgba(10,10,15,0.7) 62%, var(--void) 100%);
}
.v2-hero__content {
  position: relative; z-index: 4; width: 100%;
  max-width: var(--container-max); margin: 0 auto;
  padding: 6rem var(--gutter);
  animation: v2-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.v2-hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 12px;
  border: 0.5px solid rgba(244,244,245,0.16);
  border-radius: 100px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 2rem;
}
.v2-hero__badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  animation: v2-livePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Hero-CTA-Row: zwei Buttons nebeneinander (Desktop) / untereinander gleicher Breite (Mobile) */
.v2-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 2.5rem;
}
.v2-hero__cta-row--start {
  justify-content: flex-start;
  margin-top: 2rem;
}
.v2-hero__cta-reel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 15px 26px;
  border-radius: 6px;
  border: 0.5px solid var(--border-cta);
  background: rgba(255,255,255,0.02);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
.v2-hero__cta-reel:hover { background: rgba(255,255,255,0.06); }

/* === SHOWREEL MODAL ================================================
   Vollflächiges Overlay mit Video-Player. Toggle via .is-open,
   Body-Scroll-Lock über body.showreel-open.
   =================================================================== */
.showreel-modal {
  position: fixed; inset: 0;
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.showreel-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.showreel-modal[hidden] { display: none; }
.showreel-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.showreel-modal__inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  animation: showreel-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes showreel-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.showreel-modal__close {
  position: absolute;
  top: -44px; right: 0;
  width: 40px; height: 40px;
  padding: 8px;
  background: none;
  border: 0;
  color: var(--bone);
  cursor: pointer;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.showreel-modal__close:hover { color: var(--solar); }
.showreel-modal__video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.showreel-modal__video {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
body.showreel-open { overflow: hidden; }
@media (max-width: 600px) {
  .showreel-modal__close {
    top: -40px;
    right: -4px;
  }
}

@media (max-width: 600px) {
  .v2-hero__cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .v2-hero__cta-row > .v2-cta__btn,
  .v2-hero__cta-row > .v2-hero__cta-reel {
    width: 100%;
    justify-content: center;
  }

  /* Hero-Content: weniger padding oben, damit's näher am Header sitzt */
  .v2-hero__content {
    padding-top: 2.5rem;
  }

  /* Badge auf Mobile: einzeilig — font-size + letter-spacing knapper */
  .v2-hero__badge {
    padding: 8px 14px;
    font-size: 9px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    max-width: 100%;
  }

}

.v2-hero__title {
  font-size: clamp(48px, 9vw, 124px);
  font-weight: 700; letter-spacing: -0.045em; line-height: 0.9;
  max-width: 15ch; margin-left: auto; margin-right: auto;
  text-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.v2-hero__title-gradient {
  background: linear-gradient(90deg, var(--solar), var(--coral) 40%, var(--magenta) 65%, var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.v2-hero__lede {
  margin-top: 1.9rem; max-width: 600px;
  margin-left: auto; margin-right: auto;
  font-family: var(--font-body);
  font-size: 19px; line-height: 1.62; color: var(--text-soft);
}
.v2-hero__stats {
  display: flex; flex-wrap: wrap; gap: 3rem;
  justify-content: center;
  margin-top: 3.4rem; padding-top: 1.9rem;
  border-top: 0.5px solid var(--border);
  max-width: 640px;
}
.v2-hero__stat-num {
  font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
}
.v2-hero__stat-plus { color: var(--solar); }
.v2-hero__stat-label {
  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px;
}
.v2-hero__scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.v2-hero__scroll-cue-label {
  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.v2-hero__scroll-cue-svg {
  animation: v2-scrollNudge 1.8s ease-in-out infinite;
}

/* --- V2 SERVICE ROOMS --- */
.v2-rooms {
  max-width: var(--container-max); margin: 0 auto;
  padding: 7rem var(--gutter);
}
.v2-rooms__head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1.5rem; margin-bottom: 3.5rem;
}
.v2-rooms__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 0.9rem;
}
.v2-rooms__title {
  font-size: clamp(34px, 4.4vw, 64px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
}
.v2-rooms__intro {
  max-width: 400px; font-family: var(--font-body);
  font-size: 16px; line-height: 1.6; color: var(--muted);
}
.v2-rooms__grid {
  display: flex; flex-direction: column; gap: 20px;
}
.v2-room {
  position: relative; display: grid; min-height: 400px;
  background: #121218;
  border: 0.5px solid rgba(244,244,245,0.10);
  border-radius: 20px; overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.35s, box-shadow 0.35s,
              filter 0.4s ease, opacity 0.4s ease;
  text-decoration: none; color: inherit;
}
.v2-room--left { grid-template-columns: 0.9fr 1.1fr; }
.v2-room--right { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 900px) {
  .v2-room, .v2-room--left, .v2-room--right { grid-template-columns: 1fr; }
}
/* Focus-Blur: wenn irgendein Room gehovered wird, sind die anderen blurred */
.v2-rooms__grid:has(.v2-room:hover) .v2-room:not(:hover) {
  filter: blur(4px); opacity: 0.45;
}
.v2-room:hover {
  transform: translateY(-5px);
  border-color: rgba(242,160,61,0.55);
}
/* Rotating Conic Border on Hover */
.v2-room__ring {
  position: absolute; inset: 0; border-radius: 20px; padding: 1.6px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 6;
  visibility: hidden; opacity: 0;
  animation: v2-gaSpin 10s linear infinite, v2-glowPulse 4.5s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.v2-room:hover .v2-room__ring { visibility: visible; opacity: 1; }
.v2-room__ring { background: conic-gradient(from var(--ga), transparent 0deg, var(--solar) 70deg, transparent 150deg, transparent 210deg, var(--solar) 290deg, transparent 360deg); }
.v2-room__visual {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-deep);
}
.v2-room__visual img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.v2-room__visual-tag {
  position: absolute; bottom: 20px;
  pointer-events: none;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.v2-room__visual-tag { color: var(--solar); }
.v2-room--1 .v2-room__visual-tag { left: 24px; }
.v2-room--2 .v2-room__visual-tag { right: 24px; }
.v2-room--3 .v2-room__visual-tag { left: 24px; }
.v2-room__overlay-1 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,24,0.42), rgba(18,18,24,0.74)), radial-gradient(120% 120% at 20% 20%, rgba(242,160,61,0.40), rgba(233,75,124,0.12) 55%, rgba(18,18,24,0) 80%); }
.v2-room__overlay-2 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,24,0.50), rgba(18,18,24,0.80)), radial-gradient(120% 120% at 80% 20%, rgba(242,160,61,0.40), rgba(233,75,124,0.12) 55%, rgba(18,18,24,0) 80%); }
.v2-room__overlay-3 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,24,0.50), rgba(18,18,24,0.80)), radial-gradient(120% 120% at 20% 80%, rgba(242,160,61,0.40), rgba(233,75,124,0.12) 55%, rgba(18,18,24,0) 80%); }
.v2-room__body {
  padding: 3rem 3.2rem;
  display: flex; flex-direction: column; justify-content: center;
}
.v2-room--left .v2-room__body { border-left: 0.5px solid var(--border); }
.v2-room--right .v2-room__body { border-right: 0.5px solid var(--border); }
.v2-room__num {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.14em; margin-bottom: 1rem;
}
.v2-room__title {
  font-size: clamp(30px, 3vw, 42px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 1rem;
}
.v2-room__hook {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: 0.9rem;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Pro Room ein eigener Gradient — zusammen ergeben sie den warm-zu-kalten Bogen */
.v2-room--1 .v2-room__hook { background-image: linear-gradient(90deg, var(--solar), var(--coral)); }
.v2-room--2 .v2-room__hook { background-image: linear-gradient(90deg, var(--coral), var(--magenta)); }
.v2-room--3 .v2-room__hook { background-image: linear-gradient(90deg, var(--magenta), var(--cyan)); }
.v2-room__desc {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--text-soft); margin-bottom: 1.6rem; max-width: 44ch;
}
.v2-room__tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.8rem;
}
.v2-room__tag {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-soft);
  letter-spacing: 0.06em; padding: 6px 11px;
  border: 0.5px solid rgba(244,244,245,0.16); border-radius: 100px;
}
.v2-room__link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
}
.v2-room__link { color: var(--solar); }

/* --- V2 BRÜDER --- */
.v2-brothers {
  background: var(--surface-deep);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  /* Full-bleed: Hintergrund bis Viewport-Rand, Content bleibt im __inner gecapped */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.v2-brothers__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 7rem var(--gutter);
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center;
}
@media (max-width: 900px) {
  .v2-brothers__inner { grid-template-columns: 1fr; }
}
.v2-brothers__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 1rem;
}
.v2-brothers__title {
  font-size: clamp(34px, 4.4vw, 60px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
}
.v2-brothers__desc {
  margin-top: 1.5rem; font-family: var(--font-body);
  font-size: 18px; line-height: 1.7; color: var(--text-soft);
}
.v2-brothers__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 2rem; padding: 13px 26px;
  border-radius: 6px; border: 0.5px solid var(--border-cta);
  color: var(--bone); font-size: 15px; font-weight: 600;
  text-decoration: none;
}
.v2-brothers__photo {
  border-radius: 16px; overflow: hidden;
  border: 0.5px solid var(--border-strong);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.v2-brothers__photo img {
  width: 100%; height: 340px; object-fit: cover; object-position: center 28%;
  display: block;
}
.v2-brothers__cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;
}
.v2-brothers__card {
  padding: 1.4rem; background: var(--surface);
  border: 0.5px solid var(--border-strong); border-radius: 12px;
  text-decoration: none; color: inherit; display: block;
}
.v2-brothers__card-name {
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
}
.v2-brothers__card-role {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: 0.06em; margin-top: 6px; line-height: 1.5;
}
.v2-brothers__card-desc {
  font-family: var(--font-body); font-size: 13px;
  color: var(--text-soft); margin-top: 10px;
}
.v2-brothers__card-project {
  font-family: var(--font-mono); font-size: 10px; color: var(--solar);
  letter-spacing: 0.06em; margin-top: 10px;
}

/* --- V2 TESTIMONIALS --- */
.v2-testimonials {
  max-width: var(--container-max); margin: 0 auto;
  padding: 7rem var(--gutter);
}
.v2-testimonials__head {
  margin-bottom: 3.5rem;
}
.v2-testimonials__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 0.8rem;
}
.v2-testimonials__title {
  font-size: clamp(32px, 3.4vw, 48px); font-weight: 600;
  letter-spacing: -0.035em;
}
.v2-testimonials__grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
}
@media (max-width: 900px) {
  .v2-testimonials__grid { grid-template-columns: 1fr; }
}
.v2-testimonial {
  position: relative; padding: 2.5rem 2.25rem;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
.v2-testimonial:hover { transform: translateY(-4px); }
.v2-testimonial__stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.v2-testimonial--1 .v2-testimonial__stripe { background: var(--solar); }
.v2-testimonial--2 .v2-testimonial__stripe { background: var(--coral); }
.v2-testimonial--3 .v2-testimonial__stripe { background: var(--cyan); }
.v2-testimonial--1:hover {
  border-color: rgba(242,160,61,0.5);
  box-shadow: 0 0 22px rgba(242,160,61,0.18);
}
.v2-testimonial--2:hover {
  border-color: rgba(233,75,124,0.5);
  box-shadow: 0 0 22px rgba(233,75,124,0.18);
}
.v2-testimonial--3:hover {
  border-color: rgba(61,191,239,0.5);
  box-shadow: 0 0 22px rgba(61,191,239,0.18);
}
/* Rotating Conic Border on Hover — Farbe pro Variante */
.v2-testimonial__ring {
  position: absolute; inset: 0; border-radius: 14px; padding: 1.6px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 6;
  visibility: hidden; opacity: 0;
  animation: v2-gaSpin 10s linear infinite, v2-glowPulse 4.5s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.v2-testimonial:hover .v2-testimonial__ring { visibility: visible; opacity: 1; }
.v2-testimonial--1 .v2-testimonial__ring { background: conic-gradient(from var(--ga), transparent 0deg, var(--solar) 70deg, transparent 150deg, transparent 210deg, var(--solar) 290deg, transparent 360deg); }
.v2-testimonial--2 .v2-testimonial__ring { background: conic-gradient(from var(--ga), transparent 0deg, var(--coral) 70deg, transparent 150deg, transparent 210deg, var(--coral) 290deg, transparent 360deg); }
.v2-testimonial--3 .v2-testimonial__ring { background: conic-gradient(from var(--ga), transparent 0deg, var(--cyan) 70deg, transparent 150deg, transparent 210deg, var(--cyan) 290deg, transparent 360deg); }
.v2-testimonial__quote-mark {
  position: absolute; top: 2px; right: 22px;
  font-family: Georgia, serif; font-size: 78px; line-height: 1;
  opacity: 0.15; user-select: none; pointer-events: none;
}
.v2-testimonial--1 .v2-testimonial__quote-mark { color: var(--solar); }
.v2-testimonial--2 .v2-testimonial__quote-mark { color: var(--coral); }
.v2-testimonial--3 .v2-testimonial__quote-mark { color: var(--cyan); }
.v2-testimonial__text {
  position: relative; z-index: 1;
  font-family: var(--font-body); font-size: 15px; line-height: 1.75; color: var(--text-soft);
}
.v2-testimonial__foot {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto; padding-top: 2rem;
}
.v2-testimonial__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--void); font-weight: 600;
}
.v2-testimonial--1 .v2-testimonial__avatar { background: linear-gradient(135deg, var(--solar), var(--coral)); }
.v2-testimonial--2 .v2-testimonial__avatar { background: linear-gradient(135deg, var(--coral), var(--magenta)); }
.v2-testimonial--3 .v2-testimonial__avatar { background: linear-gradient(135deg, var(--magenta), var(--cyan)); }
.v2-testimonial__meta {
  font-family: var(--font-body); font-size: 13px; color: var(--muted);
}
.v2-testimonial__author {
  color: var(--bone); font-weight: 600;
}

/* --- V2 REFERENCES --- */
.v2-refs {
  background: var(--surface-deep);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  /* Full-bleed: Hintergrund bis Viewport-Rand, Content bleibt im __inner gecapped */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.v2-refs__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 7rem var(--gutter);
}
.v2-refs__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 3.5rem; gap: 1rem; flex-wrap: wrap;
}
.v2-refs__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 0.8rem;
}
.v2-refs__title {
  font-size: clamp(32px, 3.4vw, 48px); font-weight: 600;
  letter-spacing: -0.035em;
}
.v2-refs__all {
  font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--solar);
  text-decoration: none;
}
.v2-refs__grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
}
@media (max-width: 900px) { .v2-refs__grid { grid-template-columns: 1fr; } }
.v2-ref-card {
  position: relative;
  background: #121218; border: 0.5px solid rgba(244,244,245,0.10);
  border-radius: 20px; overflow: hidden;
  color: inherit; text-decoration: none; display: block;
  transition: transform .25s ease, border-color .25s ease;
}
.v2-ref-card:hover {
  transform: translateY(-5px);
  border-color: rgba(242,160,61,0.55);
}
/* Rotating Conic Border on Hover — identisch zu .v2-room__ring */
.v2-ref-card__ring {
  position: absolute; inset: 0; border-radius: 20px; padding: 1.6px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 6;
  visibility: hidden; opacity: 0;
  animation: v2-gaSpin 10s linear infinite, v2-glowPulse 4.5s ease-in-out infinite;
  transition: opacity 0.4s ease;
  background: conic-gradient(from var(--ga), transparent 0deg, var(--solar) 70deg, transparent 150deg, transparent 210deg, var(--solar) 290deg, transparent 360deg);
}
.v2-ref-card:hover .v2-ref-card__ring { visibility: visible; opacity: 1; }
.v2-ref-card__img {
  position: relative; height: 190px; overflow: hidden;
}
.v2-ref-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.v2-ref-card--1 .v2-ref-card__img:not(:has(img)),
.v2-ref-card--2 .v2-ref-card__img:not(:has(img)),
.v2-ref-card--3 .v2-ref-card__img:not(:has(img)) { opacity: 0.85; }
.v2-ref-card--1 .v2-ref-card__img { background: linear-gradient(135deg, var(--solar) 0%, var(--coral) 100%); }
.v2-ref-card--2 .v2-ref-card__img { background: linear-gradient(135deg, var(--coral) 0%, var(--magenta) 100%); }
.v2-ref-card--3 .v2-ref-card__img { background: linear-gradient(135deg, var(--magenta) 0%, var(--cyan) 100%); }
.v2-ref-card__body { padding: 1.6rem; }
.v2-ref-card__cat {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.v2-ref-card__title {
  margin-top: 0.6rem; font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
}
.v2-ref-card__desc {
  margin-top: 0.5rem; font-family: var(--font-body);
  font-size: 14px; line-height: 1.55; color: var(--muted);
}

/* --- V2 TRUST BAR --- */
.v2-trust {
  display: flex; align-items: center; gap: 2.5rem;
  padding: 1.6rem var(--gutter);
  background: var(--void);
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.v2-trust__label { color: var(--solar); flex-shrink: 0; }
.v2-trust__viewport {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.v2-trust__track {
  display: flex; gap: 2.5rem; width: max-content;
  animation: v2-trust-scroll 55s linear infinite;
  will-change: transform;
}
.v2-trust__track > span { white-space: nowrap; }
.v2-trust:hover .v2-trust__track { animation-play-state: paused; }
@keyframes v2-trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-trust__track { animation: none; }
  .v2-trust__viewport { overflow-x: auto; }
}

/* --- V2 CTA --- */
.v2-cta {
  position: relative; text-align: center;
  padding: 8rem var(--gutter); overflow: hidden;
  border-top: 0.5px solid var(--border);
}
.v2-cta__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(233,75,124,0.10) 0%, rgba(10,10,15,0) 70%);
}
.v2-cta__inner {
  position: relative; z-index: 2; max-width: 900px; margin: 0 auto;
}
.v2-cta__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1rem;
}
.v2-cta__title {
  font-size: clamp(40px, 5.5vw, 80px); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 2.2rem;
}
.v2-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 6px;
  background: var(--solar); color: var(--void);
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.v2-cta__btn:hover { transform: translateY(-1px); background: #ffb350; }

/* --- V2 UEBER-UNS Hero --- */
.v2-uu-hero {
  position: relative; min-height: 86vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  /* Full-bleed: Bild spannt viewport-breit, Content bleibt im __content gecapped */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.v2-uu-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.v2-uu-hero__overlay-v {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,15,0.55) 0%, rgba(10,10,15,0) 28%, rgba(10,10,15,0.15) 55%, rgba(10,10,15,0.92) 100%);
}
.v2-uu-hero__overlay-h {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,15,0.78) 0%, rgba(10,10,15,0.30) 42%, rgba(10,10,15,0) 72%);
}
.v2-uu-hero__stripe {
  /* Full-bleed-Streifen zwischen Header und Hero — bricht aus dem .container-Cap aus */
  position: relative; z-index: 5;
  width: 100vw; height: 3px;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(90deg, var(--solar), var(--coral) 40%, var(--magenta) 65%, var(--cyan));
}
.v2-uu-hero__content {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--gutter) 5.5rem;
  display: flex; flex-direction: column;
  animation: v2-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.v2-uu-hero__eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--solar);
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.6rem;
}
.v2-uu-hero__title {
  font-size: clamp(46px, 8.5vw, 108px); font-weight: 700;
  letter-spacing: -0.045em; line-height: 0.92; max-width: 15ch;
  text-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.v2-uu-hero__lede {
  margin-top: 1.8rem; max-width: 600px;
  font-family: var(--font-body); font-size: 19px; line-height: 1.55; color: var(--text-soft);
}

/* --- V2 UEBER-UNS Story --- */
.v2-uu-story {
  max-width: var(--container-max); margin: 0 auto;
  padding: 7rem var(--gutter) 3.5rem;
}
.v2-uu-story__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 1.4rem;
}
.v2-uu-story__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 64px; align-items: start;
}
@media (max-width: 900px) { .v2-uu-story__grid { grid-template-columns: 1fr; } }
.v2-uu-story__title {
  font-size: clamp(34px, 4vw, 56px); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.04;
}
.v2-uu-story__body {
  max-width: 640px;
}
.v2-uu-story__body p {
  font-family: var(--font-body); font-size: 18px; line-height: 1.75;
  color: var(--text-soft); margin-bottom: 1.2rem;
}
.v2-uu-story__body p:last-child { margin-bottom: 0; }

.v2-uu-story__stats {
  display: flex; flex-wrap: wrap; gap: 2.4rem;
  margin-top: 2.4rem; padding-top: 1.8rem;
  border-top: 0.5px solid var(--border);
}
.v2-uu-story__stat-num {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
}
.v2-uu-story__stat-num .accent { color: var(--solar); }
.v2-uu-story__stat-label {
  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 9px;
}

/* --- V2 UEBER-UNS Werte --- */
.v2-uu-values {
  background: var(--surface-deep);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  /* Full-bleed: Hintergrund bis Viewport-Rand, Content bleibt im __inner gecapped */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.v2-uu-values__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 7rem var(--gutter);
}
.v2-uu-values__head { margin-bottom: 3.5rem; }
.v2-uu-values__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 0.8rem;
}
.v2-uu-values__title {
  font-size: clamp(32px, 3.4vw, 48px); font-weight: 600;
  letter-spacing: -0.035em;
}
.v2-uu-values__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 700px) { .v2-uu-values__grid { grid-template-columns: 1fr; } }
.v2-uu-value {
  position: relative;
  padding: 2.4rem; min-height: 212px;
  background: #16161D;
  border: 0.5px solid rgba(244,244,245,0.10);
  border-radius: 16px;
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    border-color .35s,
    box-shadow .35s;
}
.v2-uu-value::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 16px; padding: 1.5px;
  background: conic-gradient(from var(--ga), transparent 0deg, var(--solar) 70deg, transparent 150deg, transparent 210deg, var(--solar) 290deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  visibility: hidden;
  z-index: 5;
}
.v2-uu-value.is-active {
  transform: translateY(-5px);
  border-color: rgba(242,160,61,0.5);
}
.v2-uu-value.is-active::before {
  visibility: visible;
  animation:
    v2-gaSpin 10s linear infinite,
    v2-glowPulse 4.5s ease-in-out infinite;
}
.v2-uu-value__num {
  font-family: var(--font-mono); font-size: 42px; font-weight: 400;
  color: var(--solar);
  letter-spacing: 0.02em; line-height: 1; margin-bottom: 1.4rem;
}
.v2-uu-value__title {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.7rem;
}
.v2-uu-value__desc {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--muted);
}

/* --- V2 UEBER-UNS Team --- */
.v2-uu-team {
  max-width: var(--container-max); margin: 0 auto;
  padding: 4rem var(--gutter) 7rem;
}
.v2-uu-team__head { margin-bottom: 3.5rem; }
.v2-uu-team__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 0.8rem;
}
.v2-uu-team__title {
  font-size: clamp(32px, 3.4vw, 48px); font-weight: 600;
  letter-spacing: -0.035em;
}
.v2-uu-team__intro {
  margin-top: 1.3rem; font-family: var(--font-body);
  font-size: 18px; line-height: 1.65; color: var(--text-soft);
  max-width: 720px;
}
.v2-uu-team__grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
@media (max-width: 900px) { .v2-uu-team__grid { grid-template-columns: 1fr; } }

.v2-uu-person {
  position: relative;
  min-height: 540px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #121218;
  border: 0.5px solid var(--border-strong);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s;
}
.v2-uu-person::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 18px; padding: 1.5px;
  background: conic-gradient(from var(--ga), transparent 0deg, var(--solar) 70deg, transparent 150deg, transparent 210deg, var(--solar) 290deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  visibility: hidden;
  z-index: 6;
}
.v2-uu-person:hover {
  transform: translateY(-5px);
  border-color: rgba(242,160,61,0.5);
}
.v2-uu-person:hover::before {
  visibility: visible;
  animation:
    v2-gaSpin 10s linear infinite,
    v2-glowPulse 4.5s ease-in-out infinite;
}
.v2-uu-person__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.v2-uu-person--aaron .v2-uu-person__img { object-position: center 22%; }
.v2-uu-person--josua .v2-uu-person__img { object-position: center 24%; }
.v2-uu-person__scrim {
  position: absolute; inset: 0;
  pointer-events: none;
}
.v2-uu-person--aaron .v2-uu-person__scrim {
  background:
    linear-gradient(180deg, rgba(10,10,15,0) 0%, rgba(10,10,15,0.30) 40%, rgba(10,10,15,0.86) 76%, rgba(10,10,15,0.97) 100%),
    radial-gradient(120% 80% at 12% 100%, rgba(61,191,239,0.20), rgba(10,10,15,0) 68%);
}
.v2-uu-person--josua .v2-uu-person__scrim {
  background:
    linear-gradient(180deg, rgba(10,10,15,0) 0%, rgba(10,10,15,0.30) 40%, rgba(10,10,15,0.86) 76%, rgba(10,10,15,0.97) 100%),
    radial-gradient(120% 80% at 88% 100%, rgba(233,75,124,0.20), rgba(10,10,15,0) 68%);
}
.v2-uu-person__body {
  position: relative; z-index: 3;
  padding: 2.2rem 2.3rem;
}
.v2-uu-person__name {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem;
}
.v2-uu-person__role {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.1em; margin-bottom: 5px;
}
.v2-uu-person__anchors {
  font-family: var(--font-mono); font-size: 10px; color: #B8BCC4;
  letter-spacing: 0.06em; margin-bottom: 1.2rem;
}
.v2-uu-person__bio {
  font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: #E4E4E7;
}
.v2-uu-person__link {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--solar);
  letter-spacing: -0.005em;
  transition: transform .2s ease;
}
.v2-uu-person:hover .v2-uu-person__link {
  transform: translateX(3px);
}

/* ==== V2 VITA (Aaron + Josua Vita-Seiten) =================================== */

/* HERO — Foto-Cover, unten linksbündig */
.v2-vita-hero {
  position: relative; min-height: 88vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  /* Full-bleed: Bild spannt viewport-breit, Content bleibt im __content gecapped */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.v2-vita-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 24%;
}
.v2-vita-hero__overlay-v {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,15,0.35) 0%, rgba(10,10,15,0) 32%, rgba(10,10,15,0.30) 58%, rgba(10,10,15,0.94) 100%);
}
.v2-vita-hero__overlay-h {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,15,0.72) 0%, rgba(10,10,15,0.20) 45%, rgba(10,10,15,0) 75%);
}
.v2-vita-hero__stripe {
  /* Full-bleed-Streifen zwischen Header und Hero — bricht aus dem .container-Cap aus */
  position: relative; z-index: 5;
  width: 100vw; height: 3px;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(90deg, var(--solar), var(--coral) 40%, var(--magenta) 65%, var(--cyan));
}
.v2-vita-hero__content {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--gutter) 5rem;
  animation: v2-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.v2-vita-hero__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-soft);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 1.6rem; text-decoration: none;
  transition: color .2s ease;
}
.v2-vita-hero__back:hover { color: var(--bone); }
.v2-vita-hero__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.2rem;
}
.v2-vita-hero__title {
  font-size: clamp(48px, 9vw, 116px);
  font-weight: 700; letter-spacing: -0.045em; line-height: 0.9;
  text-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.v2-vita-hero__tags {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.8rem;
}
.v2-vita-hero__tag {
  font-family: var(--font-mono); font-size: 11px; color: var(--bone);
  letter-spacing: 0.08em;
  padding: 7px 14px; border-radius: 100px;
  border: 0.5px solid rgba(244,244,245,0.22);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* BIO / INTRO — 2-col grid mit Meta-Row */
.v2-vita-bio {
  max-width: var(--container-max); margin: 0 auto;
  padding: 7rem var(--gutter);
}
.v2-vita-bio__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 1.4rem;
}
.v2-vita-bio__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 64px; align-items: start;
}
@media (max-width: 900px) { .v2-vita-bio__grid { grid-template-columns: 1fr; } }
.v2-vita-bio__title {
  font-size: clamp(34px, 4vw, 56px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.02;
}
.v2-vita-bio__body { max-width: 640px; }
.v2-vita-bio__body p {
  font-family: var(--font-body); font-size: 18px; line-height: 1.75;
  color: var(--text-soft); margin-bottom: 1.2rem;
}
.v2-vita-bio__body p:last-of-type { margin-bottom: 0; }
.v2-vita-bio__meta {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin-top: 2.6rem; padding-top: 1.9rem;
  border-top: 0.5px solid var(--border);
}
.v2-vita-bio__meta-num {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
}
.v2-vita-bio__meta-label {
  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px;
}

/* ROLLEN — 3- oder 4-col Grid mit Hover-Ring */
.v2-vita-roles {
  background: var(--surface-deep);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  /* Full-bleed: Hintergrund bis Viewport-Rand, Content bleibt im __inner gecapped */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.v2-vita-roles__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 7rem var(--gutter);
}
.v2-vita-roles__head { margin-bottom: 3.5rem; }
.v2-vita-roles__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 0.8rem;
}
.v2-vita-roles__title {
  font-size: clamp(32px, 3.6vw, 50px); font-weight: 700; letter-spacing: -0.04em;
}
.v2-vita-roles__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.v2-vita-roles__grid--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .v2-vita-roles__grid,
  .v2-vita-roles__grid--2col { grid-template-columns: 1fr; }
}
.v2-vita-role {
  position: relative;
  padding: 2.4rem; min-height: 230px;
  background: #121218;
  border: 0.5px solid rgba(244,244,245,0.10);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s, box-shadow .35s;
}
.v2-vita-role::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 20px; padding: 1.6px;
  background: conic-gradient(from var(--ga), transparent 0deg, var(--solar) 70deg, transparent 150deg, transparent 210deg, var(--solar) 290deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  visibility: hidden;
  z-index: 5;
}
.v2-vita-role.is-active,
.v2-vita-role:hover {
  transform: translateY(-5px);
  border-color: rgba(242,160,61,0.55);
}
.v2-vita-role.is-active::before,
.v2-vita-role:hover::before {
  visibility: visible;
  animation: v2-gaSpin 10s linear infinite, v2-glowPulse 4.5s ease-in-out infinite;
}
.v2-vita-role__num {
  font-family: var(--font-mono); font-size: 42px; font-weight: 400;
  color: var(--solar); letter-spacing: 0.02em; line-height: 1;
  margin-bottom: 1.4rem;
}
.v2-vita-role__title {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.7rem;
}
.v2-vita-role__desc {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--muted);
}

/* ACTS (Aaron) — Link-Liste in Rundum-Rahmen */
.v2-vita-acts {
  max-width: var(--container-max); margin: 0 auto;
  padding: 7rem var(--gutter);
}
.v2-vita-acts__head { margin-bottom: 3.5rem; }
.v2-vita-acts__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 0.8rem;
}
.v2-vita-acts__title {
  font-size: clamp(32px, 3.6vw, 50px); font-weight: 700; letter-spacing: -0.04em;
}
.v2-vita-acts__list {
  display: flex; flex-direction: column; gap: 2px;
  border: 0.5px solid var(--border-strong);
  border-radius: 16px; overflow: hidden;
}
.v2-vita-act {
  display: block;
  padding: 2rem 2.2rem;
  background: #16161D;
  color: inherit;
}
.v2-vita-act__head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.v2-vita-act__name {
  font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
}
.v2-vita-act__tag {
  font-family: var(--font-mono); font-size: 10px; color: var(--solar);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.v2-vita-act__desc {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: var(--muted); margin-top: 8px; max-width: 60ch;
}
/* Link-Zeile pro Karte: Instagram · Website · Spotify */
.v2-vita-act__links {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.v2-vita-act__links a {
  color: var(--solar); text-decoration: none;
  border-bottom: 0.5px solid rgba(242,160,61,0.35);
  padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}
.v2-vita-act__links a:hover {
  color: var(--bone);
  border-bottom-color: var(--bone);
}

/* DIARY (Josua) — 3-col Grid mit Gradient-Bannern */
.v2-vita-diary {
  max-width: var(--container-max); margin: 0 auto;
  padding: 7rem var(--gutter);
}
.v2-vita-diary__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem;
}
.v2-vita-diary__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; margin-bottom: 0.8rem;
}
.v2-vita-diary__title {
  font-size: clamp(32px, 3.6vw, 50px); font-weight: 700; letter-spacing: -0.04em;
}
.v2-vita-diary__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 900px) { .v2-vita-diary__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .v2-vita-diary__grid { grid-template-columns: 1fr; } }
.v2-vita-diary-card {
  position: relative;
  background: #121218;
  border: 0.5px solid rgba(244,244,245,0.10);
  border-radius: 20px;
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform .25s ease, border-color .25s ease;
}
.v2-vita-diary-card:hover {
  transform: translateY(-5px);
  border-color: rgba(242,160,61,0.55);
}
/* Rotating Conic Border on Hover — identisch zu .v2-room__ring */
.v2-vita-diary-card__ring {
  position: absolute; inset: 0; border-radius: 20px; padding: 1.6px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 6;
  visibility: hidden; opacity: 0;
  animation: v2-gaSpin 10s linear infinite, v2-glowPulse 4.5s ease-in-out infinite;
  transition: opacity 0.4s ease;
  background: conic-gradient(from var(--ga), transparent 0deg, var(--solar) 70deg, transparent 150deg, transparent 210deg, var(--solar) 290deg, transparent 360deg);
}
.v2-vita-diary-card:hover .v2-vita-diary-card__ring { visibility: visible; opacity: 1; }
.v2-vita-diary-card__banner {
  position: relative;
  height: 170px;
  overflow: hidden;
}
/* Gradient-Fallbacks bleiben etwas gedämpft, damit sie nicht zu poppig wirken */
.v2-vita-diary-card__banner--1,
.v2-vita-diary-card__banner--2,
.v2-vita-diary-card__banner--3,
.v2-vita-diary-card__banner--4,
.v2-vita-diary-card__banner--5,
.v2-vita-diary-card__banner--6 { opacity: 0.85; }
.v2-vita-diary-card__banner--1 { background: linear-gradient(135deg, var(--solar), var(--coral)); }
.v2-vita-diary-card__banner--2 { background: linear-gradient(135deg, var(--coral), var(--magenta)); }
.v2-vita-diary-card__banner--3 { background: linear-gradient(135deg, var(--magenta), var(--cyan)); }
.v2-vita-diary-card__banner--4 { background: linear-gradient(135deg, var(--cyan), var(--solar)); }
.v2-vita-diary-card__banner--5 { background: linear-gradient(135deg, var(--solar), var(--magenta)); }
.v2-vita-diary-card__banner--6 { background: linear-gradient(135deg, var(--coral), var(--cyan)); }
.v2-vita-diary-card__body {
  padding: 1.5rem 1.6rem;
}
.v2-vita-diary-card__meta {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.v2-vita-diary-card__author { color: var(--solar); font-size: 9px; }
.v2-vita-diary-card__title {
  margin-top: 0.6rem;
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
}
.v2-vita-diary-card__desc {
  margin-top: 0.5rem;
  font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--muted);
}
.v2-vita-diary-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 0.9rem;
  font-family: var(--font-mono); font-size: 10px; color: var(--solar);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* STATEMENT — Blockquote */
.v2-vita-statement {
  max-width: 1100px; margin: 0 auto;
  padding: 4rem var(--gutter) 7rem;
}
.v2-vita-statement__mark {
  font-family: Georgia, serif;
  font-size: 90px; line-height: 0.6;
  color: var(--solar); opacity: 0.35;
}
.v2-vita-statement__text {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.15;
  margin-top: 0.6rem;
}
.v2-vita-statement__text .muted { color: var(--muted); }
.v2-vita-statement__author {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1.8rem;
}

/* VITA-CTA — zentriert, radial glow */
.v2-vita-cta {
  position: relative; text-align: center;
  padding: 8rem var(--gutter);
  overflow: hidden;
  border-top: 0.5px solid var(--border);
  background: var(--surface-deep);
  /* Full-bleed: Hintergrund bis Viewport-Rand, Content bleibt im __inner gecapped */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.v2-vita-cta__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(242,160,61,0.10) 0%, rgba(10,10,15,0) 70%);
  pointer-events: none;
}
.v2-vita-cta__inner {
  position: relative; z-index: 2;
  max-width: 900px; margin: 0 auto;
}
.v2-vita-cta__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1rem;
}
.v2-vita-cta__title {
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.02;
  margin-bottom: 2.2rem;
}
.v2-vita-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 6px;
  background: var(--solar); color: var(--void);
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  text-decoration: none;
}
.v2-vita-cta__btn:hover { opacity: 0.9; }

/* ==== V2 PROJEKT — Einzelansicht (single-projekt.php) ======================= */

/* Artikel-Kopf */
.v2-projekt-head {
  max-width: 820px; margin: 0 auto;
  padding: 5rem var(--gutter) 2.5rem;
  animation: v2-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.v2-projekt-head__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 2rem; text-decoration: none;
  transition: color .2s ease;
}
.v2-projekt-head__back:hover { color: var(--bone); }
.v2-projekt-head__meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
/* Kategorie-Pill (global) — genutzt auf Projekt-Detail + Karten-Übersicht */
.v2-cat-pill {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; color: var(--solar);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border: 0.5px solid rgba(242,160,61,0.4);
  border-radius: 100px; text-decoration: none;
  white-space: nowrap;
}
.v2-cat-pill:hover { border-color: rgba(242,160,61,0.7); }

/* Overlay-Variante — sitzt oben links im Banner-Bild */
.v2-cat-pill--overlay {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(10,10,15,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-color: rgba(242,160,61,0.55);
}
.v2-projekt-head__date {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.v2-projekt-head__title {
  font-size: clamp(34px, 5.2vw, 64px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.04;
}
.v2-projekt-head__lede {
  margin-top: 1.6rem;
  font-family: var(--font-body); font-size: 20px; line-height: 1.6;
  color: var(--text-soft);
}
.v2-projekt-head__author {
  display: flex; align-items: center; gap: 12px;
  margin-top: 2rem; padding-top: 1.6rem;
  border-top: 0.5px solid var(--border);
}
.v2-projekt-head__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--void); font-size: 15px; font-weight: 700;
}
.v2-projekt-head__author-info {
  font-family: var(--font-body); font-size: 13px; color: var(--muted); line-height: 1.4;
}
.v2-projekt-head__author-name {
  color: var(--bone); font-weight: 600;
}

/* Banner (Featured Image oder Gradient) */
.v2-projekt-banner {
  max-width: 1180px; margin: 0 auto;
  padding: 0 var(--gutter) 3.5rem;
}
.v2-projekt-banner__frame {
  position: relative;
  height: min(56vw, 560px);
  border-radius: 18px; overflow: hidden;
  border: 0.5px solid rgba(242,160,61,0.5);
  box-shadow: 0 0 24px rgba(242,160,61,0.10);
}
.v2-projekt-banner__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.v2-projekt-banner__gradient--1 { background: linear-gradient(135deg, var(--solar), var(--coral)); }
.v2-projekt-banner__gradient--2 { background: linear-gradient(135deg, var(--coral), var(--magenta)); }
.v2-projekt-banner__gradient--3 { background: linear-gradient(135deg, var(--magenta), var(--cyan)); }
.v2-projekt-banner__gradient--4 { background: linear-gradient(135deg, var(--cyan), var(--solar)); }
.v2-projekt-banner__gradient--5 { background: linear-gradient(135deg, var(--solar), var(--magenta)); }
.v2-projekt-banner__gradient--6 { background: linear-gradient(135deg, var(--coral), var(--cyan)); }

/* Fließtext (Content) */
.v2-projekt-body {
  max-width: 720px; margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
  font-family: var(--font-body); font-size: 18px; line-height: 1.8;
  color: var(--text-soft);
}
.v2-projekt-body p { margin-bottom: 1.5rem; }
.v2-projekt-body p:last-child { margin-bottom: 0; }
.v2-projekt-body strong { color: var(--bone); font-weight: 600; }
.v2-projekt-body a { color: var(--solar); border-bottom: 0.5px solid rgba(242,160,61,0.3); }
.v2-projekt-body a:hover { border-bottom-color: var(--solar); }
.v2-projekt-body h2, .v2-projekt-body h3 {
  color: var(--bone); font-weight: 600; letter-spacing: -0.02em;
  margin: 2.4rem 0 0.9rem;
}
.v2-projekt-body h2 { font-size: 28px; line-height: 1.2; }
.v2-projekt-body h3 { font-size: 22px; line-height: 1.25; }
.v2-projekt-body blockquote {
  margin: 2.5rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--solar);
}
.v2-projekt-body blockquote p {
  font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.3; color: var(--bone); margin-bottom: 0;
}
.v2-projekt-body ul, .v2-projekt-body ol { padding-left: 1.4rem; margin-bottom: 1.5rem; }
.v2-projekt-body li { margin-bottom: 0.4rem; }
.v2-projekt-body img { border-radius: 12px; margin: 1.5rem 0; }

/* Meta-Leiste unten (Ort, Rolle, Partner, Jahr) */
.v2-projekt-meta {
  max-width: 720px; margin: 0 auto;
  padding: 0 var(--gutter) 5rem;
}
.v2-projekt-meta__grid {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  padding-top: 1.9rem;
  border-top: 0.5px solid var(--border);
}
.v2-projekt-meta__label {
  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px;
}
.v2-projekt-meta__value {
  font-size: 16px; font-weight: 600;
}

/* Weiterlesen / Zurück */
.v2-projekt-more {
  text-align: center;
  padding: 5rem var(--gutter) 7rem;
  border-top: 0.5px solid var(--border);
  background: var(--surface-deep);
  /* Full-bleed: Hintergrund bis Viewport-Rand */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.v2-projekt-more__eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--solar);
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1rem;
}
.v2-projekt-more__title {
  font-size: clamp(30px, 4vw, 52px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 2rem;
}
.v2-projekt-more__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 6px;
  border: 0.5px solid var(--border-cta);
  color: var(--bone);
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
.v2-projekt-more__btn:hover { background: var(--surface-hover); }

/* ==========================================================================
   MOBILE NAV — Hamburger + Slide-in Overlay (≤900px)
   Toggle-Logik in main.js; togglet `body.mobile-nav-open`.
   ========================================================================== */

.mobile-nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  width: 44px; height: 44px;
  cursor: pointer;
  z-index: 200;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Backdrop hinter dem Slide-in-Menü (klickbar zum Schließen) */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 140;
}
body.mobile-nav-open .mobile-nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-toggle__bar {
  display: block;
  width: 24px; height: 2px;
  background: var(--bone);
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
body.mobile-nav-open .mobile-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mobile-nav-open .mobile-nav-toggle__bar:nth-child(2) { opacity: 0; }
body.mobile-nav-open .mobile-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .mobile-nav-toggle { display: flex; }
  .site-nav__home { display: block; }
  .mobile-nav-close { display: block; }

  /* Site-Nav wird zu Fullscreen-Overlay von rechts */
  .site-nav {
    position: fixed;
    top: 0; right: 0;
    width: 100%; max-width: 380px;
    height: 100dvh;
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 88px 24px 32px 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 150;
    box-shadow: -20px 0 40px rgba(0,0,0,0.4);
    border-left: 0.5px solid var(--border);
  }
  /* WP-Admin-Bar (nur eingeloggt): Menü + Backdrop respektieren die Toolbar */
  body.admin-bar .site-nav,
  body.admin-bar .mobile-nav-backdrop {
    top: 46px;
    height: calc(100dvh - 46px);
  }
  @media (min-width: 783px) {
    body.admin-bar .site-nav,
    body.admin-bar .mobile-nav-backdrop {
      top: 32px;
      height: calc(100dvh - 32px);
    }
  }
  body.mobile-nav-open .site-nav { transform: translateX(0); }
  body.mobile-nav-open { overflow: hidden; }

  /* Nav-Items untereinander, größer für Touch */
  .site-nav > a {
    display: block;
    padding: 16px 4px;
    font-size: 18px;
    border-bottom: 1px solid var(--border-strong);
  }
  .site-nav > .nav-cta {
    display: block;
    margin-top: 24px;
    padding: 15px 30px;
    border-radius: 6px;
    border: 0;
    background: var(--solar);
    color: var(--void);
    text-align: center;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    transition: background 0.15s ease;
  }
  .site-nav > .nav-cta:hover { background: #ffb350; }

  /* Dropdowns auf Mobile: immer aufgeklappt, keine Positionierung */
  .nav-dropdown {
    position: static;
    display: block;
    padding: 16px 4px;
    border-bottom: 1px solid var(--border-strong);
  }
  .nav-dropdown-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 0;
    font-size: 18px;
    cursor: default;
    pointer-events: none;
    user-select: none;
  }
  .nav-dropdown-chev { display: none; }
  .nav-dropdown-menu {
    display: block !important;
    position: static;
    transform: none;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 12px 0 0 8px;
    margin-top: 4px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-dropdown-menu a { padding: 10px 8px; }
  .nav-dropdown-name { font-size: 15px; }
  .nav-dropdown-sub { font-size: 11px; }

  /* Lang-Switch oben links, neben dem X-Button */
  .lang-switch {
    position: absolute;
    top: 28px;
    left: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12px;
    z-index: 210;
  }
}

/* ==========================================================================
   ROOMS-CARDS Mobile-Kompaktierung — muss NACH allen base .v2-room*-Rules
   stehen, damit sie in der Cascade gewinnt.
   ========================================================================== */
@media (max-width: 900px) {
  .v2-rooms { padding: 4rem var(--gutter); }
  .v2-rooms__head { margin-bottom: 2rem; }
  .v2-rooms__grid { gap: 12px; }
  .v2-room { min-height: auto; }
  .v2-room__body { padding: 1.75rem; }
  .v2-room__num { margin-bottom: 0.75rem; font-size: 9px; letter-spacing: 0.16em; }
  .v2-room__title { margin-bottom: 0.6rem; font-size: clamp(32px, 8vw, 42px); }
  .v2-room__hook { margin-bottom: 0.6rem; font-size: 16px; }
  .v2-room__desc { margin-bottom: 0.9rem; font-size: 15px; }
  .v2-room__tags { margin-bottom: 1rem; }
}

/* ==========================================================================
   BROTHERS-SECTION Mobile — Cards untereinander, CTA ans Ende
   ========================================================================== */
@media (max-width: 900px) {
  .v2-brothers__inner {
    display: flex;
    flex-direction: column;
    padding: 4rem var(--gutter);
    gap: 0;
  }
  .v2-brothers__inner > div { display: contents; }
  .v2-brothers__eyebrow {
    margin-bottom: 0.8rem;
  }
  .v2-brothers__desc {
    margin-top: 1.2rem;
  }
  .v2-brothers__photo {
    margin-top: 2rem;
  }
  .v2-brothers__cards {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 1rem;
  }
  .v2-brothers__cta {
    order: 10;
    margin-top: 1.5rem;
  }
  .v2-brothers__eyebrow,
  .v2-brothers__title,
  .v2-brothers__desc {
    text-align: left;
    align-self: flex-start;
    width: 100%;
  }
}

/* ==========================================================================
   Alle CTA-Buttons auf Mobile: volle Breite, zentriert
   ========================================================================== */
@media (max-width: 900px) {
  .v2-cta__btn,
  .v2-vita-cta__btn,
  .v2-brothers__cta,
  .flagship-link {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px 26px;
    box-sizing: border-box;
  }
}

/* Trust-Bar auf Mobile: Label zentriert oben, Marquee zentriert darunter, gleiche Schriftgröße */
@media (max-width: 900px) {
  .v2-trust {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem var(--gutter);
    font-size: 12px;
  }
  .v2-trust__label {
    font-size: 12px;
    text-align: center;
  }
  .v2-trust__viewport {
    width: 100%;
  }
  .v2-trust__track > span {
    font-size: 12px;
  }
}

/* ==========================================================================
   ÜBER-UNS HERO auf Mobile — Content am Viewport-Boden, Titel einzeilig
   ========================================================================== */
@media (max-width: 640px) {
  .v2-uu-hero {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .v2-uu-hero__content {
    /* iOS Safari URL-Leiste einrechnen, damit Text nicht dahinter verschwindet */
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }
  .v2-uu-hero__title {
    font-size: clamp(36px, 9vw, 46px);
    max-width: none;
  }
  .v2-uu-hero__eyebrow {
    margin-bottom: 1.2rem;
  }
  .v2-uu-hero__lede {
    margin-top: 1.4rem;
    font-size: 17px;
  }
}

/* ==========================================================================
   TEAM-Cards (Aaron/Josua) auf Mobile — Bild landscape oben, Text darunter
   ========================================================================== */
@media (max-width: 900px) {
  .v2-uu-person {
    min-height: auto;
    display: block;
  }
  .v2-uu-person__img {
    position: relative;
    width: 100%; height: auto;
    aspect-ratio: 16 / 10;
    display: block;
  }
  .v2-uu-person--aaron .v2-uu-person__img,
  .v2-uu-person--josua .v2-uu-person__img {
    object-position: center 20%;
  }
  .v2-uu-person__scrim { display: none; }
  .v2-uu-person__body { padding: 1.75rem; }
  .v2-uu-person__name { font-size: 24px; margin-bottom: 0.6rem; }
  .v2-uu-person__role {
    font-size: 10px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
  .v2-uu-person__anchors { margin-bottom: 1rem; }
}

/* ==========================================================================
   VITA-Bio (Aaron + Josua Unterseiten) Mobile-Kompaktierung
   ========================================================================== */
@media (max-width: 900px) {
  .v2-vita-bio { padding: 4rem var(--gutter); }
  .v2-vita-bio__grid { gap: 1.5rem; }
  .v2-vita-bio__title { font-size: clamp(32px, 8vw, 40px); margin-bottom: 0.5rem; }
  .v2-vita-bio__body p { font-size: 16px; line-height: 1.65; margin-bottom: 1rem; }
  .v2-vita-bio__meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
    margin-top: 1.75rem; padding-top: 1.5rem;
  }
  .v2-vita-bio__meta-num { font-size: 18px; }
  .v2-vita-bio__meta-label { margin-top: 4px; }
}

/* Footer auf Mobile: alles linksbündig (überschreibt Desktop justify-self: end) */
@media (max-width: 900px) {
  .footer-grid > *:nth-child(1),
  .footer-grid > *:nth-child(2),
  .footer-grid > *:nth-child(3) {
    justify-self: start;
    text-align: left;
    width: 100%;
  }
}

/* Mobile: Room-Card mit .is-active bekommt den Ring — wird per JS
   IntersectionObserver an die zentrale Card im Viewport vergeben (Scroll-Follow). */
@media (max-width: 900px) {
  .v2-rooms__grid > .v2-room.is-active {
    border-color: rgba(242,160,61,0.55);
  }
  .v2-rooms__grid > .v2-room.is-active .v2-room__ring {
    visibility: visible;
    opacity: 1;
  }
}

/* ==========================================================================
   Room-Cards: Ring + Border-Farbe pro Card (thematischer Bogen warm → cool)
   ========================================================================== */
.v2-room--1 .v2-room__ring {
  background: conic-gradient(from var(--ga),
    transparent 0deg, var(--solar) 70deg, transparent 150deg,
    transparent 210deg, var(--coral) 290deg, transparent 360deg);
}
.v2-room--2 .v2-room__ring {
  background: conic-gradient(from var(--ga),
    transparent 0deg, var(--coral) 70deg, transparent 150deg,
    transparent 210deg, var(--magenta) 290deg, transparent 360deg);
}
.v2-room--3 .v2-room__ring {
  background: conic-gradient(from var(--ga),
    transparent 0deg, var(--magenta) 70deg, transparent 150deg,
    transparent 210deg, var(--cyan) 290deg, transparent 360deg);
}
.v2-room--1:hover,
.v2-rooms__grid > .v2-room--1.is-active { border-color: rgba(242,160,61,0.55); }  /* solar */
.v2-room--2:hover,
.v2-rooms__grid > .v2-room--2.is-active { border-color: rgba(233,75,124,0.55); }  /* coral */
.v2-room--3:hover,
.v2-rooms__grid > .v2-room--3.is-active { border-color: rgba(168,85,199,0.55); }  /* magenta */

/* "Mehr erfahren →" pro Card im Gradient — passend zum Hook */
.v2-room__link {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.v2-room--1 .v2-room__link { background-image: linear-gradient(90deg, var(--solar), var(--coral)); }
.v2-room--2 .v2-room__link { background-image: linear-gradient(90deg, var(--coral), var(--magenta)); }
.v2-room--3 .v2-room__link { background-image: linear-gradient(90deg, var(--magenta), var(--cyan)); }

/* Rooms-Section-Titel Accent im vollen Regenbogen-Gradient */
.v2-rooms__title-accent {
  background: linear-gradient(90deg, var(--solar), var(--coral) 40%, var(--magenta) 65%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ==========================================================================
   is-active für alle Card-Typen (Ring + Border) — pendant zu :hover
   damit JS scroll-follow auf Mobile auch bei diesen Cards greift.
   ========================================================================== */
.v2-ref-card.is-active {
  transform: translateY(-5px);
  border-color: rgba(242,160,61,0.55);
}
.v2-ref-card.is-active .v2-ref-card__ring { visibility: visible; opacity: 1; }

.v2-testimonial.is-active { transform: translateY(-4px); }
.v2-testimonial--1.is-active { border-color: rgba(242,160,61,0.5); box-shadow: 0 0 22px rgba(242,160,61,0.18); }
.v2-testimonial--2.is-active { border-color: rgba(233,75,124,0.5); box-shadow: 0 0 22px rgba(233,75,124,0.18); }
.v2-testimonial--3.is-active { border-color: rgba(61,191,239,0.5); box-shadow: 0 0 22px rgba(61,191,239,0.18); }
.v2-testimonial.is-active .v2-testimonial__ring { visibility: visible; opacity: 1; }

.v2-vita-diary-card.is-active {
  transform: translateY(-5px);
  border-color: rgba(242,160,61,0.55);
}
.v2-vita-diary-card.is-active .v2-vita-diary-card__ring { visibility: visible; opacity: 1; }

.v2-uu-person.is-active {
  transform: translateY(-5px);
  border-color: rgba(242,160,61,0.5);
}
.v2-uu-person.is-active::before {
  visibility: visible;
  animation: v2-gaSpin 10s linear infinite, v2-glowPulse 4.5s ease-in-out infinite;
}

/* ==========================================================================
   Service-Detail-Seiten: Hero-Banner-Bild unter der Lede
   ========================================================================== */
.service-hero-img {
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 5vw, 4rem);
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 20px;
  border: 0.5px solid rgba(244,244,245,0.10);
  background: #121218;
}
.service-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .service-hero-img { aspect-ratio: 16 / 10; border-radius: 16px; }
}

/* ==========================================================================
   Kontakt-Formular: Honeypot (versteckt) + Status-Meldungen
   ========================================================================== */
.contact-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.contact-msg {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
.contact-msg--ok {
  background: rgba(61,191,239,0.08);
  border: 0.5px solid rgba(61,191,239,0.4);
  color: var(--bone);
}
.contact-msg--err {
  background: rgba(233,75,124,0.08);
  border: 0.5px solid rgba(233,75,124,0.4);
  color: var(--bone);
}