/* =========================================================
   Interalpen Holding GmbH – Website-Entwurf v2
   Richtung: seit 13.08.2026 Marineblau statt Night Umber. Auf Wunsch
   von IAH tragen alle Flaechen, die vorher braun waren, ein tiefes
   Dunkelblau; Warm Ivory, Champagne und Weiss sind durch ein kuehles,
   klares Weiss ersetzt. Die Bronze-Familie bleibt als einziger warmer
   Akzent (Marineblau, Weiss, Gold).
   ACHTUNG bei den Token: Die Namen (`--night`, `--walnut`, `--espresso`,
   `--cocoa`, `--ivory`, `--champagne`) stammen aus der braunen Welt und
   beschreiben jetzt nur noch ihre ROLLE, nicht mehr ihren Farbton. Sie
   wurden bewusst nicht umbenannt, solange die neue Farbwelt nicht
   freigegeben ist - das beruehrt knapp 200 Stellen und gehoert in
   denselben Schritt wie die Fortschreibung des Brand Kits.
   Hero: durchgehend vollflaechiger Dubai-Film mit vier Textphasen,
   freier Skyline und scrollgebundenen Champagner-Tueren.
   Typografie: lokale Inter Variable, Kernskala aus dem
   Live-Theme InterAlpen Immobilien 1.4.8.
   ========================================================= */

/* ---------- Font ---------- */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --base: #0D111A;
  --night: #111726;
  --walnut: #151D2E;
  --espresso: #1B2438;
  --cocoa: #4A5670;
  --bronze: #8B6F55;
  --bronze-on-light: #80644C;
  --stone: #C6CEDC;
  --ivory: #F4F7FB;
  --white: #FFFFFF;
  --champagne: #EDF2F8;

  --coal: #080B12;
  /* Seitenränder und Containerbreite exakt wie im Theme
     `23 WORDPRESS THEME - InterAlpen 2026`: dort `--gutter` und
     `.page-grid { width: min(100%, 1600px) }`. */
  --pad: clamp(1rem, 3.2vw, 3.75rem);
  --wide-edge: clamp(1rem, 3.2vw, 3.75rem);
  --radius: 4px;
  --hair: rgba(226, 234, 246, 0.08);
  --hair-strong: rgba(226, 234, 246, 0.16);
  --hair-dark: rgba(21, 29, 46, 0.12);
  --hair-dark-strong: rgba(21, 29, 46, 0.22);

  --display-weight: 500;
  --display-leading: 0.98;
  --display-tracking: -0.038em;
  --body-leading: 1.56;
  --body-tracking: -0.012em;

  --text-body: clamp(1rem, 0.12vw + 0.97rem, 1.06rem);
  --text-display: clamp(2.42rem, 4.85vw, 5.8rem);
  --text-lead: clamp(1rem, 1.35vw, 1.28rem);
  --text-eyebrow: clamp(0.68rem, 0.1vw + 0.66rem, 0.74rem);
  --text-ui: clamp(0.69rem, 0.1vw + 0.67rem, 0.75rem);
  --text-micro: clamp(0.62rem, 0.1vw + 0.6rem, 0.68rem);
  --text-caption: clamp(0.7rem, 0.16vw + 0.66rem, 0.8rem);
  --text-small: clamp(0.8rem, 0.16vw + 0.76rem, 0.9rem);

  /* Zwei getrennte Hoehenquellen mit klar verteilten Rollen:

     `--hero-viewport-height` folgt der tatsaechlich SICHTBAREN Hoehe
     (JavaScript schreibt sie aus `visualViewport`). Sie bestimmt nur
     noch, wie hoch die geklebte Hero-Buehne selbst ist - damit Maske und
     Indexzeile nie hinter einer Browserleiste verschwinden.

     `--hero-strecke` ist die STABILE grosse Viewporthoehe (`100lvh`).
     Aus ihr bestehen alles, was im Dokumentfluss liegt: die Hoehe der
     Hero-Sektion und die Bridge darunter. Faehrt die Adressleiste ein
     oder aus, aendert sich hier deshalb nichts - kein Element unterhalb
     verschiebt sich mehr, und es gibt nichts zu kompensieren. Genau so
     macht es das Immobilien-Theme mit seinem `height: 300vh`-Container.
     Frueher hing beides an der sichtbaren Hoehe; jede Leistenbewegung
     verschob dann die gesamte Seite unter dem Finger - das war der
     Chrome-Sprung. */
  --hero-viewport-height: 100vh;
  --hero-strecke: 100vh;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Sehr leichtes, codiertes Korn als SVG-Turbulenz */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Basis ---------- */

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

html {
  /* Bewusst kein CSS scroll-behavior: smooth. ScrollTrigger scrollt bei
     jedem Refresh intern auf 0 und zurück, sobald smooth aktiv ist.
     Trifft ein Refresh (Font-Load, Preloader-Ende, Resize) eine bereits
     gescrollte Seite, verschieben sich dadurch die Pin-Fenster und der
     Hero springt. Interne Anker scrollen sanft über js/main.js. */
  scroll-padding-top: calc(var(--header-h, 4.5rem) + var(--header-top, 1rem) + 0.8rem);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ivory);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body.menu-open {
  overflow: hidden;
}

/* Chrome verankert die Scrollposition an sichtbarem Inhalt und verschiebt
   sie selbststaendig, sobald sich Layout oberhalb davon aendert - etwa
   wenn die einfahrende Adressleiste die fuenf Viewporthoehen lange
   Hero-Strecke verkuerzt. Zusammen mit der eigenen, praezisen
   Kompensation in `applyHeroViewportRefresh` korrigierte dann zweierlei
   dieselbe Verschiebung, und die Seite sprang sichtbar nach oben.
   Safari kennt dieses Verankern nicht - deshalb trat der Sprung nur in
   Chrome auf. Die eigene Kompensation bleibt die einzige Instanz. */
html {
  overflow-anchor: none;
}

/* Waehrend der gefuehrten Hero-Fahrt steht die Scrollposition still und
   der Hero wird direkt gezeichnet. Damit der Browser nicht doch zu
   scrollen beginnt - etwa durch den Nachlauf einer Wischbewegung oder
   durch Ziehen von oben - wird das senkrechte Scrollen hier bereits im
   Compositor gesperrt. Waagerechtes Wischen und Aufziehen bleiben
   moeglich, damit Zoomen nicht blockiert wird. */
html.hero-fahrt,
html.hero-fahrt body {
  touch-action: pan-x pinch-zoom;
  overscroll-behavior-y: none;
}

@supports (height: 100dvh) {
  :root { --hero-viewport-height: 100dvh; }
}

/* Die grosse Viewporthoehe ist die Hoehe BEI EINGEFAHRENER Browserleiste
   und aendert sich waehrend des Scrollens nie. */
@supports (height: 100lvh) {
  :root { --hero-strecke: 100lvh; }
}


img { max-width: 100%; height: auto; display: block; }

section[id] { scroll-margin-top: calc(var(--header-h, 4.5rem) + var(--header-top, 1rem) + 0.8rem); }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a, button { touch-action: manipulation; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection { background: var(--bronze); color: var(--white); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skiplink {
  position: fixed;
  top: -100%;
  left: var(--pad);
  z-index: 200;
  background: var(--ivory);
  color: var(--walnut);
  padding: 0.7em 1.2em;
  border-radius: var(--radius);
  font-size: var(--text-ui);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: top 0.2s var(--ease-out);
}
.skiplink:focus-visible { top: 12px; }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Ziel des Skip-Links. Der Fokus soll dort landen, aber keinen Rahmen um
   den halben Bildschirm ziehen - die Sprungmarke ist ein Landeplatz,
   kein Bedienelement. */
#main-content:focus,
#main-content:focus-visible { outline: none; }

/* ---------- Sprache ---------- */

[data-lang="de"] .l-en { display: none; }
[data-lang="en"] .l-de { display: none; }

/* ---------- Typo-Bausteine ---------- */

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: clamp(1rem, 1.8vw, 1.6rem);
}

.display {
  font-size: var(--text-display);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  color: var(--white);
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.55;
}

.asset-note {
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cocoa);
  margin-top: 0.6rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.85em 1.7em;
  border-radius: var(--radius);
  font-size: var(--text-ui);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}

.button--ghost {
  border: 1px solid rgba(226, 234, 246, 0.32);
  color: var(--ivory);
}
.button--ghost:hover { border-color: var(--ivory); }

.button--ink {
  background: var(--walnut);
  color: var(--ivory);
  border: 1px solid var(--walnut);
}
.button--ink:hover { background: var(--espresso); border-color: var(--espresso); }

/* =========================================================
   Header
   ========================================================= */

/* Schwebende Leiste wie bei InterAlpen Immobilien,
   farblich auf das Capital-Markenkit angepasst. */

:root {
  --header-h: clamp(4.2rem, 5.5vw, 4.8rem);
  --header-top: clamp(0.65rem, 1.15vw, 1.1rem);
}

.header {
  position: fixed;
  z-index: 100;
  top: var(--header-top);
  left: 50%;
  width: calc(100% - clamp(1.3rem, 2.3vw, 2.2rem));
  max-width: 1530px;
  min-height: var(--header-h);
  color: var(--walnut);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transform: translateX(-50%);
  will-change: transform;
  transition: color 400ms ease, background 400ms ease, border-color 400ms ease,
    box-shadow 400ms ease, transform 700ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Ab den Sektionen wird die Leiste eine helle Flaeche (Wunsch IAH,
   13.08.2026). Ueber dem Hero-Video bleibt sie unveraendert transparent
   mit weisser Schrift - dort gilt `is-over-media`. Weil der
   Grundzustand des Headers ohnehin fuer hellen Untergrund gebaut ist
   (dunkle Schrift, dunkles Logo, dunkle Umrandung), wurde `is-solid`
   unten aus allen Hell-auf-Dunkel-Regeln herausgenommen und erbt jetzt
   einfach diesen Grundzustand. */
.header.is-solid {
  color: var(--night);
  background: rgba(244, 247, 251, 0.92);
  border-color: rgba(21, 29, 46, 0.10);
  box-shadow: 0 0.6rem 2.5rem rgba(8, 11, 18, 0.16);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Ueber dem Hero bleibt der Header bewusst ohne Schattierung; der helle
   Zustand steht bereits im HTML und ist deshalb beim ersten Paint sichtbar. */
.header.is-over-media {
  color: var(--white);
  text-shadow: none;
}

.header.is-hidden { transform: translate(-50%, calc(-100% - 2.5rem)); }

/* Beim Ein- und Ausfahren bleibt ausschließlich der compositorfreundliche
   Transform aktiv. Farbe, Fond und Blur werden nicht parallel tweened. */
.header.is-moving {
  transition: transform 700ms cubic-bezier(0.32, 0.72, 0, 1);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: var(--header-h);
  padding: clamp(0.5rem, 0.7vw, 0.65rem) clamp(0.55rem, 0.85vw, 0.75rem)
    clamp(0.5rem, 0.7vw, 0.65rem) clamp(1rem, 1.6vw, 1.5rem);
}

.header__brand {
  display: grid;
  justify-self: start;
}

/* Das Zeichen trägt drei Zeilen und ist mit 3,39 : 1 deutlich kompakter
   als die frühere zweizeilige Wortmarke mit 5,6 : 1. Bei fester Breite
   zöge es die Kopfzeile auf, deshalb wird jetzt über die HÖHE bemessen:
   Sie bleibt unter dem Innenmaß von `--header-h` abzüglich Polsterung,
   damit die Kopfzeile ihre ursprüngliche Höhe behält. `max-width: none`
   verhindert, dass die globale Bildregel die Breite beschneidet und das
   Zeichen dadurch verzerrt. */
.header__logo {
  grid-area: 1 / 1;
  width: auto;
  max-width: none;
  height: clamp(30px, 2.5vw, 38px);
  transition: opacity 300ms ease;
}

.header__logo--light { opacity: 0; }
.header.is-over-media .header__logo--dark { opacity: 0; }
.header.is-over-media .header__logo--light { opacity: 1; }

.header__nav {
  display: flex;
  justify-self: center;
  gap: clamp(0.95rem, 1.6vw, 1.9rem);
}

.header__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(0.62rem, 0.09vw + 0.6rem, 0.68rem);
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cocoa);
  transition: color 0.25s ease;
  padding: 0.4em 0;
}
.header__nav a:hover { color: var(--walnut); }
.header.is-over-media .header__nav a { color: var(--white); }
.header.is-over-media .header__nav a:hover { color: var(--ivory); }

.header__tools {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
}

.langswitch {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--bronze-on-light);
}
.langswitch button,
.langswitch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--cocoa);
  padding: 0.5em 0.15em;
  transition: color 0.25s ease;
}
.langswitch button[aria-pressed="true"],
.langswitch a[aria-current="page"],
.langswitch button:hover,
.langswitch a:hover { color: var(--walnut); }
.header.is-solid .langswitch { color: var(--cocoa); }
.header.is-over-media .langswitch { color: rgba(255, 255, 255, 0.48); }
.header.is-over-media .langswitch button,
.header.is-over-media .langswitch a { color: var(--stone); }
.header.is-over-media .langswitch button,
.header.is-over-media .langswitch a { color: rgba(255, 255, 255, 0.72); }
.header.is-over-media .langswitch button[aria-pressed="true"],
.header.is-over-media .langswitch a[aria-current="page"],
.header.is-over-media .langswitch button:hover,
.header.is-over-media .langswitch a:hover { color: var(--white); }

/* Maße wie `.header-cta` im Live-Theme: schmale Umrandung, kein Fond. */
.header__cta {
  min-height: clamp(2.85rem, 3.5vw, 3.2rem);
  padding: clamp(0.75rem, 1vw, 0.95rem) clamp(1rem, 1.4vw, 1.35rem);
  font-size: clamp(0.61rem, 0.08vw + 0.59rem, 0.67rem);
  letter-spacing: 0.08em;
  white-space: nowrap;
  border-color: rgba(21, 29, 46, 0.34);
  color: var(--walnut);
}
.header__cta:hover { border-color: var(--walnut); }
.header.is-over-media .header__cta {
  border-color: rgba(226, 234, 246, 0.32);
  color: var(--ivory);
}
.header.is-over-media .header__cta:hover { border-color: var(--ivory); }

.menu-toggle {
  display: none;
  position: relative;
  width: clamp(2.85rem, 4vw, 3.1rem);
  height: clamp(2.85rem, 4vw, 3.1rem);
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: var(--walnut);
}
.header.is-over-media .menu-toggle { color: var(--ivory); }

.menu-toggle span {
  position: absolute;
  width: 1rem;
  height: 1px;
  background: currentColor;
}
.menu-toggle span:first-child { transform: translateY(-3px); }
.menu-toggle span:last-child { transform: translateY(3px); }

.mobile-menu {
  position: fixed;
  z-index: 200;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(23, 31, 49, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: opacity 400ms ease;
}

.mobile-menu.is-open .mobile-menu-backdrop { opacity: 1; }

.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: min(92vw, 34rem);
  height: 100%;
  height: 100dvh;
  flex-direction: column;
  padding: calc(1.4rem + env(safe-area-inset-top)) clamp(1.3rem, 5vw, 3rem)
    calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: rgba(255, 255, 255, 0.36) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  color: var(--white);
  background: var(--walnut);
  transform: translateX(100%);
  transition: transform 600ms var(--ease-out);
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-panel::-webkit-scrollbar { width: 0.45rem; }
.mobile-menu-panel::-webkit-scrollbar-track { background: transparent; }
.mobile-menu-panel::-webkit-scrollbar-thumb {
  border: 0.12rem solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.36);
  background-clip: padding-box;
}

.mobile-menu.is-open .mobile-menu-panel { transform: translateX(0); }

.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-label {
  color: var(--stone);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.menu-close {
  position: relative;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius);
  background: transparent;
}

.menu-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1px;
  background: var(--white);
}
.menu-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-menu nav {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  margin: clamp(2.75rem, 11vh, 6rem) 0 clamp(2rem, 6vh, 3.5rem);
}

.mobile-menu nav a {
  display: block;
  min-height: 3.4rem;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--hair-strong);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1.85rem, 6.7vw, 3.35rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--body-tracking);
}

.mobile-menu__lang {
  display: flex;
  flex: 0 0 auto;
  align-self: flex-start;
  gap: 0.45rem;
  margin: 0 0 1.35rem;
}

.mobile-menu__lang button,
.mobile-menu__lang a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  font-size: var(--text-caption);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

.mobile-menu__lang button[aria-pressed="true"],
.mobile-menu__lang a[aria-current="page"] {
  color: var(--walnut);
  border-color: var(--white);
  background: var(--white);
}

.mobile-menu-panel > p {
  flex: 0 0 auto;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--text-small);
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  z-index: 1;
  background: var(--night);
}

/* Das Kleben des Hero uebernimmt CSS `position: sticky`, wie im
   Live-Theme von InterAlpen Immobilien (`.hero { height: 300vh }` mit
   `.hero-sticky`). Der fruehere GSAP-Pin setzte das Element auf `fixed`
   und fuehrte es bei jedem Scrolltick aus dem Hauptthread nach - in
   Safari die Ursache des Zitterns, auf Chrome-Telefonen die Quelle von
   Spruengen beim Ein- und Ausfahren der Adressleiste. Sticky
   positioniert der Compositor selbst.

   Die Sektion traegt die Gesamthoehe von sechs Viewporthoehen jetzt im
   CSS (frueher: eine Hoehe plus fuenf ueber den Pin-Spacer). Der
   Klebebereich endet damit exakt bei fuenf Viewporthoehen - identisch
   zum bisherigen Triggerende; die negative Bridge-Margin darunter bleibt
   unveraendert. Die Mindesthoehe spiegelt die 580-px-Untergrenze des
   Pins, damit der Klebebereich auch in sehr flachen Fenstern die volle
   Triggerstrecke traegt. */
html.js .hero:not(.is-static) {
  height: calc(6 * var(--hero-strecke));
  min-height: calc(5 * var(--hero-strecke) + 580px);
}

html.js .hero:not(.is-static) .hero__pin {
  position: sticky;
  top: 0;
}

/* Der sichtbare Außenrahmen erhält weiter unten den lokalen Champagne-Ton. */
:root { --hero-frame: clamp(0.7rem, 1.4vw, 1.25rem); }

.hero__pin {
  position: relative;
  height: var(--hero-viewport-height);
  min-height: 580px;
  overflow: hidden;
  background: var(--night);
  padding: var(--hero-frame);
}

.hero__stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
  background: var(--night);
}

/* Das vorhandene codierte Flächen-Grain bleibt aus, weil das Motiv bereits
   eine feine analoge Körnung mitbringt. */
.hero__grain {
  display: none;
}

/* Der Film bleibt ueber die gesamte Scrub-Strecke vollflaechig. */
.hero__media {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0E0B0A;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  will-change: transform, opacity;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.hero__mediacanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}

/* Im Scrub-Modus zeichnet der Canvas, statisch übernimmt das Video */
.hero.is-static .hero__mediacanvas,
html:not(.js) .hero__mediacanvas { display: none; }
html.js .hero:not(.is-static) .hero__video { visibility: visible; }
html.js .hero:not(.is-static) .hero__media[data-frame] .hero__video { visibility: hidden; }

/* Dunkler Schleier über dem Film, sobald die Schlussaussage kommt */
.hero__mediaveil {
  position: absolute;
  inset: 0;
  background: rgba(12, 16, 26, 0.6);
  opacity: 0;
  pointer-events: none;
}

/* Vollflächiger Starttitel über dem Film */
.hero__opening {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--pad);
  color: var(--white);
}

.hero__opening-eyebrow {
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 22px rgba(6, 9, 15, 0.7);
}

.hero__opening-title {
  max-width: 76rem;
  font-size: clamp(2.75rem, 5.65vw, 6.35rem);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  color: var(--white);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(8, 11, 18, 0.55);
}

.hero__opening-cta {
  min-height: 46px;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(15, 21, 33, 0.22);
  color: var(--white);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero__opening-cta:hover { background: rgba(15, 21, 33, 0.5); border-color: var(--white); }

/* Die beiden Leitwoerter leben in der Typo-Maske des Dubai-Blocks weiter
   unten; eigene Wortelemente gibt es nicht mehr. */

.hero__scrollhint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(2.75rem, 6vh, 4.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1.8rem;
  transform: translateX(-50%);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 16px rgba(6, 9, 15, 0.7);
}

.hero__scrollhint::before,
.hero__scrollhint::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
}

.hero__scrollhint::before {
  bottom: 0;
  width: 1px;
  height: 1.35rem;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.42);
}

.hero__scrollhint::after {
  bottom: 0.95rem;
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0.65rem rgba(255, 255, 255, 0.42);
  animation: hero-scroll-dot 1.65s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-scroll-dot {
  0% { opacity: 0; transform: translate3d(-50%, 0, 0); }
  18% { opacity: 1; }
  78% { opacity: 0.88; }
  100% { opacity: 0; transform: translate3d(-50%, 0.78rem, 0); }
}

/* =========================================================
   Editorialer Übergang: scrollt über den gehaltenen Hero
   ========================================================= */

.hero-bridge {
  position: relative;
  z-index: 5;
  min-height: var(--hero-viewport-height);
  padding: clamp(5.25rem, 7vw, 8rem) var(--wide-edge) clamp(2.5rem, 4vw, 4rem);
  overflow: hidden;
  background: var(--night);
  color: var(--ivory);
  box-shadow: none;
}

/* Der Hero bleibt während der zusätzlichen Schlussphase geklebt. Die
   Editorial-Sektion nimmt genau diesen letzten Viewport ein und zieht als
   deckende Ebene über die vollständig aufgebaute Hero-Komposition.
   Höhe und Rückversatz bestehen aus der STABILEN grossen Viewporthöhe:
   Sie liegen im Dokumentfluss und dürfen sich beim Ein- und Ausfahren
   der Browserleiste nicht bewegen. */
html.js .hero:not(.is-static) + .hero-bridge {
  min-height: var(--hero-strecke);
  margin-top: calc(0px - var(--hero-strecke));
}

/* Die obere Linie ist ein Ladebalken, der sich an der Scrollposition auflädt:
   eine sehr schwache Spur, in die eine helle Füllung von links nach rechts
   einläuft, genau so weit, wie gescrollt wurde. Zurückscrollen entlädt sie
   wieder. Umgesetzt über eine CSS-Scroll-Timeline, damit dafür keine eigene
   Scroll-Logik neben der geschützten Hero-Mechanik nötig ist. Browser ohne
   Scroll-Timeline bekommen den einmaligen Einlauf beim Sichtbarwerden. Ohne
   JavaScript und bei reduzierter Bewegung steht die Linie sofort vollständig. */
.hero-bridge__rule {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 1.6vw, 1.5rem);
  right: var(--wide-edge);
  left: var(--wide-edge);
  height: 1px;
  overflow: hidden;
  background: rgba(244, 247, 251, 0.14);
  pointer-events: none;
}

.hero-bridge__rule-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(244, 247, 251, 0.78);
  transform-origin: left center;
}

/* `--charge` setzt js/main.js aus der Scrollposition: 0, solange die Linie
   noch am unteren Viewportrand steht, 1 bei etwa halber Durchquerung.
   Zurückscrollen entlädt die Linie wieder. Die kurze lineare Übergangszeit
   glättet nur die Sprünge einzelner Mausradstufen.

   Eine CSS-Scroll-Timeline (`animation-timeline: view()`) wäre hier die
   naheliegende Lösung, funktioniert aber nicht: `.hero-bridge` ist wegen
   `overflow: hidden` ein Scrollcontainer, und die Sichtbarkeits-Timeline
   bezieht sich dann auf diesen nie scrollenden Kasten statt auf die Seite. */
html.js .hero-bridge__rule-fill {
  transform: scaleX(var(--charge, 0));
  transition: transform 0.18s linear;
}

.hero-bridge__inner {
  display: grid;
  grid-template-rows: auto auto;
  width: 100%;
  max-width: calc(1600px - 2 * var(--wide-edge));
  min-height: calc(var(--hero-viewport-height) - clamp(7.75rem, 11vw, 12rem));
  margin: 0 auto;
  gap: clamp(2.6rem, 5vw, 4.75rem);
}

/* Bewusst ohne `max-width`: Der Satz soll die volle Breite bis zum rechten
   Seitenabstand nutzen und nicht vorzeitig umbrechen. */
.hero-bridge__statement {
  width: 100%;
  font-size: clamp(2.35rem, 4.05vw, 5rem);
  font-weight: var(--display-weight);
  line-height: 1.02;
  letter-spacing: var(--display-tracking);
  color: var(--ivory);
  text-wrap: pretty;
}

/* Ausdrückliche Vorgabe: Wörter werden NICHT mit Trennstrich umbrochen.
   Ein getrenntes Wort wirkt abgehackt; das ganze Wort rückt stattdessen in
   die nächste Zeile. Deshalb steht hier kein `hyphens: auto`.

   `overflow-wrap: break-word` bleibt als reine Notbremse: Es greift erst,
   wenn ein einzelnes Wort allein breiter als die Zeile ist - dann hilft
   auch ein Umbruch davor nicht mehr. Es setzt dabei keinen Trennstrich.
   Ohne diese Notbremse fiele der Überhang hinter die Kante und würde von
   `overflow-x: clip` am Rumpf stillschweigend abgeschnitten. */
.hero-bridge__statement,
.section-heading,
.strategy-slider__title,
.contact-final__title,
.display {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

/* Die Figur haelt nur noch zusammen; Seitenverhaeltnis und Beschnitt
   liegen im Rahmen darin. So kann die Bildunterschrift auf Telefonen
   unter den Rahmen treten, ohne dessen Hoehe zu verandern. */
.hero-bridge__media {
  position: relative;
  width: 100%;
  margin: 0;
}

.hero-bridge__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--espresso);
  isolation: isolate;
}

.hero-bridge__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--espresso);
}

/* Die untersten 25 Prozent tragen die Textzeile: ein einfacher dunkler
   Verlauf, KEIN Milchglas mehr (12.08.2026, Wunsch Thorsten - Bilder
   und Videos ohne Blur, clean). Das Video bleibt darunter sichtbar. */
.hero-bridge__media-blur {
  position: absolute;
  z-index: 1;
  right: -3px;
  bottom: -3px;
  left: -3px;
  height: calc(25% + 3px);
  background: linear-gradient(to top, rgba(17, 23, 38, 0.82) 0%, rgba(17, 23, 38, 0.5) 44%, rgba(17, 23, 38, 0.12) 84%, transparent 100%);
  pointer-events: none;
}

.hero-bridge__media-copy {
  position: absolute;
  z-index: 2;
  right: clamp(1.1rem, 2.2vw, 2.4rem);
  bottom: clamp(1rem, 1.9vw, 2rem);
  left: clamp(1.1rem, 2.2vw, 2.4rem);
  width: min(calc(100% - clamp(2.2rem, 4.4vw, 4.8rem)), 72rem);
  color: rgba(244, 247, 251, 0.94);
  font-size: clamp(0.94rem, 0.38vw + 0.87rem, 1.18rem);
  line-height: 1.42;
  text-shadow: 0 1px 18px rgba(6, 9, 15, 0.76);
}

/* =========================================================
   Bild-Text-Sektionen: Strategische Beratung und Strukturierung
   ========================================================= */

.split-feature {
  position: relative;
  z-index: 2;
  background: var(--night);
  color: var(--ivory);
  padding-block: clamp(3.75rem, 6vw, 6rem);
  padding-inline: var(--wide-edge);
}

/* Zwei aufeinanderfolgende Bild-Text-Sektionen rücken näher zusammen. */
.split-feature + .split-feature { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* Bild und Textblock sitzen zentriert, wirken aber breit: knapper
   Abstand zum Außenrand statt schmaler Mittelspalte. */
.split-feature__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2rem, 3.2vw, 4rem);
  max-width: calc(1600px - 2 * var(--wide-edge));
  margin: 0 auto;
}

/* Lange, nicht getrennte Woerter duerfen die mobile Gridspur nicht ueber
   den Viewport hinaus aufweiten. Der Umbruch bleibt weiterhin ohne
   Trennstrich; nur die automatische Mindestbreite des Grid-Items faellt. */
.split-feature__inner > *,
.split-feature__media,
.split-feature__copy {
  min-width: 0;
}

/* Gespiegelte Variante: Text links, Bild rechts */
.split-feature--flip .split-feature__inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split-feature--flip .split-feature__media { order: 2; justify-self: end; }
.split-feature--flip .split-feature__copy { order: 1; }

/* Die drei Personensektionen unter dem Gruppenbild. Sie verwenden dasselbe
   Bild-Text-Bauteil wie die Geschaeftsfelder, nur mit hochformatigem
   Bildrahmen: Die Portraets liegen im Verhaeltnis 3 : 4, im sonst
   quadratischen Rahmen wuerden Kopf und Schulter beschnitten. Der Name
   steht als Ueberschrift und darf deshalb etwas ruhiger laufen als eine
   Aussage. */
.split-feature--person .split-feature__media {
  aspect-ratio: 3 / 4;
  /* Seit 13.08.2026 (Wunsch IAH) laufen die Portraets ueber die volle
     Spaltenbreite - exakt so breit wie der Textblock daneben. */
  /* Seit 13.08.2026 (Wunsch IAH) exakt so breit wie der Textblock. */
  max-width: 100%;
}

.split-feature--person .display {
  max-width: 16ch;
  text-wrap: balance;
}

.split-feature--person .split-feature__body { max-width: 60ch; }

.split-feature__media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: min(54rem, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--espresso);
  isolation: isolate;
}

.split-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-feature__copy {
  -webkit-user-select: text;
  user-select: text;
}
.split-feature .eyebrow { color: #B79B80; }
.split-feature__copy .display {
  color: var(--ivory);
  font-size: clamp(2.4rem, 4vw, 5rem);
}

.split-feature__body {
  max-width: 58ch;
  margin-top: clamp(1.35rem, 2.2vw, 2rem);
  color: var(--stone);
  line-height: 1.67;
}

.split-feature__cta {
  margin-top: clamp(1.4rem, 2.4vw, 2.1rem);
  border: 1px solid var(--ivory);
  background: var(--ivory);
  color: var(--walnut);
}
.split-feature__cta:hover { border-color: var(--white); background: var(--white); color: var(--walnut); }
.split-feature__cta--ghost { margin-top: clamp(1.4rem, 2.4vw, 2.1rem); }

/* =========================================================
   Kartenlauf: horizontaler Scrub ohne vertikale Sprünge
   ========================================================= */

.strategy-slider {
  position: relative;
  z-index: 2;
  background: var(--night);
  color: var(--ivory);
  --slider-edge: var(--wide-edge);
}

.strategy-slider__pin {
  position: relative;
  padding: clamp(4.5rem, 9vw, 8rem) var(--slider-edge);
}

.strategy-slider .eyebrow { color: #B79B80; }

.strategy-slider__head {
  max-width: 34rem;
  margin-bottom: clamp(2.8rem, 5vw, 4.5rem);
}

.strategy-slider__title {
  color: var(--ivory);
  font-size: clamp(2.1rem, 4vw, 4.8rem);
  font-weight: var(--display-weight);
  line-height: 1.02;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

.strategy-slider__lead {
  max-width: 46ch;
  margin-top: clamp(1.25rem, 2vw, 1.8rem);
  color: var(--stone);
  line-height: 1.62;
}

.strategy-slider__progress {
  position: relative;
  width: clamp(5.5rem, 8vw, 8.5rem);
  height: 1px;
  margin-top: clamp(1.5rem, 2.4vw, 2.2rem);
  overflow: hidden;
  background: rgba(244, 247, 251, 0.2);
}

.strategy-slider__progress-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #8B6F55, #E4EBF4);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.strategy-slider__viewport { position: relative; overflow: hidden; }

html:not(.js) .strategy-slider__viewport { overflow-x: auto; }

.strategy-slider__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  width: max-content;
}

.strategy-slider .strategy-card {
  flex: 0 0 min(78vw, 25rem);
  width: min(78vw, 25rem);
}
.strategy-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: clamp(28rem, 57vw, 40rem);
  border-radius: var(--radius);
  background: var(--espresso);
  color: var(--ivory);
  isolation: isolate;
  will-change: transform, opacity, filter;
}

.strategy-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.88);
  transition: transform 0.9s var(--ease-out), filter 0.45s ease;
}
.strategy-card:hover .strategy-card__img,
.strategy-card:focus-visible .strategy-card__img,
.strategy-card:focus-within .strategy-card__img { transform: scale(1.03); filter: brightness(0.96); }

/* Untere 35 Prozent tragen den Titel; beim Erkunden erweitert sich
   nur die lokale dunkle Zone der Karte, niemals die ganze Sektion. */
.strategy-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -3px;
  bottom: -3px;
  left: -3px;
  height: calc(35% + 3px);
  pointer-events: none;
}
.strategy-card::after {
  background: linear-gradient(to top, rgba(6, 9, 15, 0.88) 0%, rgba(12, 17, 27, 0.48) 55%, transparent 100%);
  transition: height 0.52s var(--ease-out), background 0.52s var(--ease-out);
}
.strategy-card:hover::after,
.strategy-card:focus-visible::after,
.strategy-card:focus-within::after {
  height: calc(72% + 3px);
  background: linear-gradient(to top, rgba(6, 9, 15, 0.96) 0%, rgba(12, 17, 27, 0.78) 46%, transparent 100%);
}

.strategy-card__body {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-rows: auto 0fr;
  padding: clamp(1.45rem, 2vw, 2.15rem);
  color: var(--ivory);
  text-shadow: 0 1px 18px rgba(6, 9, 15, 0.76);
  transition: grid-template-rows 0.52s var(--ease-out);
  -webkit-user-select: text;
  user-select: text;
}
.strategy-card:hover .strategy-card__body,
.strategy-card:focus-visible .strategy-card__body,
.strategy-card:focus-within .strategy-card__body { grid-template-rows: auto 1fr; }

.strategy-card__title {
  max-width: 26ch;
  font-size: clamp(1.22rem, 1.7vw, 1.7rem);
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* Der Titel bleibt stehen und markierbar; die Detailzeilen entfalten
   sich beim Erkunden darunter und nehmen dann auch Zeigerereignisse
   an, damit sich jeder Text in der Karte auswählen lässt. */
.strategy-card__reveal {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(0.85rem);
  transition: opacity 0.42s var(--ease-out), transform 0.52s var(--ease-out);
  pointer-events: none;
}
.strategy-card:hover .strategy-card__reveal,
.strategy-card:focus-visible .strategy-card__reveal,
.strategy-card:focus-within .strategy-card__reveal { opacity: 1; transform: none; pointer-events: auto; }

.strategy-card__sub {
  margin-top: 0.95rem;
  margin-bottom: 0.75rem;
  color: #E4EBF4;
  font-size: clamp(0.72rem, 0.72vw, 0.84rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.strategy-card__text {
  color: rgba(244, 247, 251, 0.87);
  font-size: clamp(0.78rem, 0.76vw, 0.91rem);
  line-height: 1.55;
}

.strategy-slider__exit-blur { display: none; }

/* Gepinnter Kartenlauf auf Desktop: Die Sektion wird ausschließlich
   für den horizontalen Lauf gehalten. Ein- und Austritt geschehen im
   normalen Seitenfluss ohne vertikale Sprünge. */
html.js .strategy-slider:not(.is-static) .strategy-slider__pin {
  /* CSS-Sticky statt GSAP-Pin (13.08.2026): Auf Safari stand der
     Kartenlauf mit dem JS-Pin still - dieselbe Ursache wie einst beim
     Hero-Zittern. Die Sektion traegt ihre Scrollstrecke als Hoehe
     (setzt js/main.js), diese Buehne klebt waehrenddessen oben. */
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 580px;
  padding: 0;
  overflow: hidden;
}

/* Laufrichtung seit 13.08.2026 (Wunsch IAH): Der Textblock steht LINKS,
   die Karten kommen von rechts herein, laufen nach links und
   verschwinden hinter dem Text. Maße und Weichzeichnung bleiben
   gegenüber der gespiegelten Fassung gleich. */
html.js .strategy-slider:not(.is-static) .strategy-slider__head {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: var(--slider-head-left, var(--slider-edge));
  right: auto;
  width: min(42vw, 48rem);
  max-width: none;
  margin: 0;
  transform: translateY(-50%);
}

html.js .strategy-slider:not(.is-static) .strategy-slider__title {
  max-width: 12ch;
  font-size: clamp(2.5rem, 4.25vw, 5.25rem);
}

html.js .strategy-slider:not(.is-static) .strategy-slider__lead {
  max-width: 42ch;
  font-size: clamp(1rem, 0.28vw + 0.94rem, 1.12rem);
  line-height: 1.58;
}

html.js .strategy-slider:not(.is-static) .strategy-slider__viewport {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  left: 0;
  height: clamp(27rem, 68vh, 41.25rem);
  transform: translateY(-50%);
  overflow: hidden;
}

/* Die Spur hängt an ihrer linken Kante rechts neben dem Textblock; die
   erste Karte steht am Spuranfang und erscheint damit zuerst, die
   übrigen rücken von rechts nach. */
html.js .strategy-slider:not(.is-static) .strategy-slider__track {
  position: absolute;
  top: 0;
  left: var(--slider-card-start, calc(var(--slider-edge) + min(42vw, 48rem) + 2.5rem));
  right: auto;
  flex-direction: row;
  height: 100%;
  will-change: transform;
}

html.js .strategy-slider:not(.is-static) .strategy-card {
  flex: 0 0 clamp(18.75rem, 29vw, 26.875rem);
  width: auto;
  min-height: 0;
  height: 100%;
}

html.js .strategy-slider:not(.is-static) .strategy-slider__exit-blur {
  position: absolute;
  z-index: 4;
  top: -3px;
  left: -3px;
  bottom: -3px;
  right: auto;
  display: block;
  width: min(45vw, 50rem);
  background: linear-gradient(to right, var(--night) 0%, rgba(17, 23, 38, 0.94) 54%, rgba(17, 23, 38, 0) 100%);
  pointer-events: none;
}

/* Auf Touch-Geräten und bei reduzierter Bewegung bleibt der Kartenlauf
   nativ scrollbar. Die Inhalte sind ohne Hover vollständig zugänglich. */
html.js .strategy-slider.is-static .strategy-slider__viewport {
  width: calc(100% + var(--slider-edge));
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

html.js .strategy-slider.is-static .strategy-slider__viewport::-webkit-scrollbar { display: none; }
html.js .strategy-slider.is-static .strategy-slider__track { padding-right: var(--slider-edge); }

html.js .strategy-slider.is-static .strategy-card {
  flex: 0 0 min(78vw, 25rem);
  width: min(78vw, 25rem);
  min-height: clamp(28rem, 68svh, 38rem);
  scroll-snap-align: start;
  filter: none !important;
  opacity: 1 !important;
}

html.js .strategy-slider.is-static .strategy-card::after {
  height: calc(72% + 3px);
  background: linear-gradient(to top, rgba(6, 9, 15, 0.96) 0%, rgba(12, 17, 27, 0.78) 46%, transparent 100%);
}

html.js .strategy-slider.is-static .strategy-card__body { grid-template-rows: auto 1fr; }
html.js .strategy-slider.is-static .strategy-card__reveal { opacity: 1; transform: none; pointer-events: auto; }

/* =========================================================
   Statement
   ========================================================= */

/* Das Statement steht auf einer ruhigen, hellen Bildfläche mit
   Präzisionsmarken – Teil der Warm-Ivory-Strecke zwischen Leitsatz
   und Beratung. */
.statement {
  position: relative;
  z-index: 2;
  min-height: clamp(30rem, 66svh, 48rem);
  display: grid;
  align-items: center;
  background: var(--ivory);
  color: var(--walnut);
  padding: clamp(5rem, 10vw, 9rem) var(--pad);
  overflow: hidden;
  isolation: isolate;
}

.statement .eyebrow { color: var(--bronze-on-light); }

.statement__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.statement__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  opacity: 0.4;
  filter: saturate(0.8) contrast(0.92) brightness(1.04);
}
.statement__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--ivory) 0%, rgba(244, 247, 251, 0.5) 32%, rgba(244, 247, 251, 0.58) 64%, var(--ivory) 100%),
    linear-gradient(to right, rgba(244, 247, 251, 0.92) 0%, rgba(244, 247, 251, 0.3) 55%, rgba(244, 247, 251, 0.72) 100%);
}

.statement__frame {
  position: absolute;
  inset: clamp(1.1rem, 2vw, 2rem);
  z-index: 1;
  pointer-events: none;
}
.statement__corner {
  position: absolute;
  width: clamp(1.05rem, 1.6vw, 1.5rem);
  height: clamp(1.05rem, 1.6vw, 1.5rem);
  opacity: 0.55;
}
.statement__corner::before,
.statement__corner::after {
  content: "";
  position: absolute;
  background: rgba(21, 29, 46, 0.5);
}
.statement__corner::before { width: 100%; height: 1px; }
.statement__corner::after { width: 1px; height: 100%; }
.statement__corner--tl { top: 0; left: 0; }
.statement__corner--tr { top: 0; right: 0; transform: rotate(90deg); }
.statement__corner--bl { bottom: 0; left: 0; transform: rotate(-90deg); }
.statement__corner--br { right: 0; bottom: 0; transform: rotate(180deg); }

.statement__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  width: 100%;
}
.statement__line {
  max-width: 62rem;
  color: var(--walnut);
}
.statement__support {
  max-width: 34ch;
  justify-self: end;
  padding-left: clamp(1.1rem, 2vw, 1.6rem);
  border-left: 1px solid var(--hair-dark-strong);
  color: var(--cocoa);
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  line-height: 1.66;
}

/* =========================================================
   Die Gruppe: Editorial-Duo nach "Unser Ansatz"

   Zwei Sektionen auf gemeinsamer Night-Flaeche mit den Aussenachsen der
   uebrigen Seite. Teil 1 traegt Leitsatz und zwei ruhige Textfelder,
   die scrollgeladene Linie leitet in Teil 2 mit den drei
   Kernbereich-Karten ueber.
   ========================================================= */

.gruppe {
  position: relative;
  z-index: 2;
  background: var(--night);
  color: var(--ivory);
  border-top: 1px solid var(--hair);
  padding: clamp(6.5rem, 11vw, 10.5rem) var(--wide-edge) clamp(2.6rem, 4.5vw, 4rem);
}

.gruppe--felder {
  border-top: 0;
  padding: clamp(2.6rem, 4.5vw, 4rem) var(--wide-edge) clamp(6.5rem, 11vw, 10.5rem);
}

.gruppe__inner {
  width: 100%;
  max-width: calc(1600px - 2 * var(--wide-edge));
  margin-inline: auto;
}

.gruppe__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(3rem, 5.5vw, 5rem);
  border-top: 1px solid var(--hair);
}

.gruppe__duo-item {
  padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.4rem, 2.6vw, 2.6rem) 0 0;
}

.gruppe__duo-item + .gruppe__duo-item {
  border-left: 1px solid var(--hair);
  padding-right: 0;
  padding-left: clamp(1.4rem, 2.6vw, 2.6rem);
}

.gruppe__duo-item h3 {
  color: var(--ivory);
  font-size: clamp(1.2rem, 1.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.gruppe__duo-item p {
  max-width: 56ch;
  margin-top: 0.9rem;
  color: var(--stone);
  font-size: clamp(0.94rem, 0.24vw + 0.9rem, 1.06rem);
  line-height: 1.64;
}

/* Verbindungslinie zwischen den beiden Gruppenteilen; sie laedt sich wie
   die Linie der hero-bridge an der Scrollposition auf. */
.gruppe__rule {
  position: relative;
  display: block;
  height: 1px;
  margin-top: clamp(3rem, 5.5vw, 5rem);
  background: var(--hair);
  overflow: hidden;
}

.gruppe__rule i {
  position: absolute;
  inset: 0;
  background: var(--bronze);
  transform: scaleX(var(--charge, 0));
  transform-origin: left center;
}

.gruppe__kern-line {
  color: #B79B80;
  font-size: var(--text-eyebrow);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gruppe__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.2vw, 2.2rem);
  margin-top: clamp(1.6rem, 2.8vw, 2.6rem);
}

.gruppe-card {
  display: block;
}

.gruppe-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--coal);
  isolation: isolate;
}

.gruppe-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.gruppe-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 14, 22, 0.5) 0%, rgba(10, 14, 22, 0.12) 34%, transparent 55%);
  pointer-events: none;
}

.gruppe-card:hover .gruppe-card__media img,
.gruppe-card:focus-visible .gruppe-card__media img {
  transform: scale(1.045);
}

.gruppe-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: clamp(0.9rem, 1.4vw, 1.2rem);
}

.gruppe-card__head strong {
  color: var(--ivory);
  font-size: clamp(1.3rem, 1.8vw, 1.9rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.gruppe-card__arrow {
  color: #B79B80;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  transition: transform 0.35s var(--ease-out);
}

.gruppe-card:hover .gruppe-card__arrow,
.gruppe-card:focus-visible .gruppe-card__arrow {
  transform: translateX(0.3rem);
}

.gruppe-card__sub {
  display: block;
  margin-top: 0.4rem;
  color: #B79B80;
  font-size: clamp(0.6rem, 0.1vw + 0.58rem, 0.68rem);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.gruppe-card:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 5px;
}

@media (max-width: 900px) {
  .gruppe__duo {
    grid-template-columns: minmax(0, 1fr);
  }

  .gruppe__duo-item {
    padding-right: 0;
  }

  .gruppe__duo-item + .gruppe__duo-item {
    border-left: 0;
    border-top: 1px solid var(--hair);
    margin-top: clamp(1.6rem, 4vw, 2.4rem);
    padding-left: 0;
  }

  .gruppe__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.6rem, 4.5vw, 2.4rem);
  }
}

/* =========================================================
   Beratung: geordnete Zeilenstruktur auf hellem Grund
   ========================================================= */

/* ---------- Gutachten & Analysen: Dossier ----------
   Die Sektion lag zuvor als einzige helle Fläche zwischen lauter dunklen
   Sektionen und trug ihre Beschriftungen in einer schmalen Randspalte –
   zwei Drittel der Breite blieben leer. Jetzt: gleicher dunkler Grund wie
   die Nachbarn, Beschriftungen über den Blöcken, volle Breite in Gebrauch. */

.dossier {
  position: relative;
  z-index: 2;
  background: var(--champagne);
  color: var(--walnut);
  padding: clamp(5.5rem, 10vw, 9.5rem) var(--wide-edge);
}

.dossier__inner {
  width: 100%;
  max-width: calc(1600px - 2 * var(--wide-edge));
  margin-inline: auto;
}

.dossier .eyebrow { color: var(--bronze-on-light); }

/* Wiederkehrende Beschriftung über jedem Block */
.dossier__label {
  margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
  color: var(--bronze-on-light);
  font-size: var(--text-eyebrow);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Auftakt ----------
   Die Sektion übernimmt durchgehend die Achsen der übrigen Seite: linke
   Spalte wie der Textblock „Organisation & Unternehmensstruktur"
   (`.split-feature`), rechte Spalte wie der Textblock „Kompetenzen"
   (`.strategy-slider__head`, `min(42vw, 48rem)`). */

.dossier__spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 3.2vw, 4rem);
}

/* Rechte Textspalten exakt so breit wie der Kompetenzen-Textblock. */
.dossier__lead,
.dossier__statement-note,
.dossier__anchor-copy {
  max-width: min(42vw, 48rem);
}

.dossier__head {
  align-items: end;
}

.dossier__head .eyebrow {
  grid-column: 1 / -1;
}

.dossier__title {
  max-width: none;
  color: var(--walnut);
  font-size: clamp(2.4rem, 4.5vw, 5.15rem);
  font-weight: var(--display-weight);
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

.dossier__lead {
  margin-top: 0;
  padding-bottom: 0.4rem;
  color: var(--cocoa);
  font-size: clamp(1rem, 0.35vw + 0.94rem, 1.2rem);
  line-height: 1.62;
}

/* ---------- Einordnung ----------
   Ohne die frühere Beschriftung „Entscheidungsgrundlage" entfällt die erste
   Spalte; Aussage und Erläuterung rücken an die linke Sektionskante. */

.dossier__statement {
  align-items: start;
  margin-top: clamp(4rem, 7vw, 7rem);
  padding-top: clamp(2.6rem, 4.5vw, 4rem);
  border-top: 1px solid var(--hair-dark-strong);
}

.dossier__statement-main {
  margin: 0;
  color: var(--walnut);
  font-size: clamp(1.2rem, 1.55vw, 1.72rem);
  font-weight: 450;
  line-height: 1.44;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}

.dossier__statement-note {
  margin: 0;
  color: var(--cocoa);
  font-size: clamp(0.95rem, 0.28vw + 0.9rem, 1.06rem);
  line-height: 1.68;
}

/* ---------- Register der Tätigkeitsfelder ---------- */

.dossier__scope {
  margin-top: clamp(4rem, 7vw, 7rem);
  padding-top: clamp(2.6rem, 4.5vw, 4rem);
  border-top: 1px solid var(--hair-dark-strong);
}

/* Ohne die frühere Beschriftung „Tätigkeitsfelder" steht die Leitzeile
   allein: volle Sektionsbreite, waagerecht zentriert. */
.dossier__scope-head {
  display: block;
}

.dossier__scope-line {
  max-width: none;
  text-align: center;
  margin: 0;
  color: var(--walnut);
  font-size: clamp(1.7rem, 2.9vw, 3.35rem);
  font-weight: var(--display-weight);
  line-height: 1.06;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

/* Register in zwei Spalten: ruhige Zeilen, Haarlinien, keine Kästen. Über
   die volle Breite gesetzt stünde jede Zeile nur im linken Drittel und
   ließe zwei Drittel leer – genau der Fehler der alten Fassung. Beim Zeigen
   läuft eine Bronzelinie ein und die Zeile tritt vor. */
.dossier__register {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 5vw, 6rem);
  margin: clamp(2.8rem, 5vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Die Beschriftungen stehen in beiden Spalten mittig in ihrer Zeile;
   die Zeilen selbst behalten ihre volle Breite. */
.dossier__register li {
  position: relative;
  padding: clamp(1.05rem, 1.7vw, 1.5rem) 0;
  border-top: 1px solid var(--hair-dark);
  color: var(--cocoa);
  font-size: clamp(1rem, 1.1vw, 1.22rem);
  font-weight: 450;
  letter-spacing: -0.018em;
  text-align: center;
  transition: color 0.45s var(--ease-out);
}

.dossier__register li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--hair-dark); }

.dossier__register li::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--bronze-on-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .dossier__register li:hover { color: var(--walnut); }
  .dossier__register li:hover::after { transform: scaleX(1); }
}

/* ---------- Fachlicher Anker ---------- */

.dossier__anchor {
  align-items: center;
  margin-top: clamp(4rem, 7vw, 7rem);
  padding-top: clamp(2.6rem, 4.5vw, 4rem);
  border-top: 1px solid var(--hair-dark-strong);
}

/* Maß und Kanten exakt wie das Bild in „Strategische
   Unternehmensbegleitung" (`.split-feature__media`). */
.dossier__portrait {
  margin: 0;
  width: 100%;
  max-width: min(54rem, 100%);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--stone);
}

.dossier__portrait img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 22%;
}

.dossier__person {
  margin: 0;
  color: var(--walnut);
  font-size: clamp(1.6rem, 2.35vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.032em;
}

.dossier__person-role {
  margin: clamp(0.6rem, 1vw, 0.9rem) 0 0;
  color: var(--bronze-on-light);
  font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.1rem);
  line-height: 1.45;
}

.dossier__person-text {
  max-width: 54ch;
  margin: clamp(1.5rem, 2.4vw, 2.1rem) 0 0;
  color: var(--cocoa);
  font-size: clamp(0.98rem, 0.3vw + 0.92rem, 1.12rem);
  line-height: 1.66;
}

/* =========================================================
   Leistungen
   ========================================================= */

.services {
  position: relative;
  z-index: 2;
  background: var(--night);
  border-top: 1px solid var(--hair);
  padding: clamp(4rem, 9vw, 8rem) var(--pad);
}

.services__head { max-width: 62rem; }

.services__intro {
  max-width: 38rem;
  color: var(--stone);
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
  line-height: 1.72;
}

.services__list {
  margin-top: clamp(2.6rem, 5.5vw, 4.6rem);
  border-top: 1px solid var(--hair-strong);
}

.service { border-bottom: 1px solid var(--hair-strong); }

.service__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(1.2rem, 2.6vh, 1.8rem) 0;
  text-align: left;
}

.service__name {
  font-size: clamp(1.4rem, 2.1vw, 2.3rem);
  font-weight: var(--display-weight);
  line-height: 1.06;
  letter-spacing: var(--display-tracking);
  color: var(--stone);
  transition: color 0.3s ease, transform 0.45s var(--ease-out);
  /* Kein Trennstrich, siehe Hinweis bei den grossen Ueberschriften. */
  hyphens: manual;
  -webkit-hyphens: manual;
}

.service__mark {
  position: relative;
  width: 14px;
  height: 14px;
  align-self: center;
}
.service__mark::before,
.service__mark::after {
  content: "";
  position: absolute;
  background: var(--bronze);
  transition: transform 0.4s var(--ease-out);
}
.service__mark::before { left: 0; right: 0; top: 6.25px; height: 1.5px; }
.service__mark::after { top: 0; bottom: 0; left: 6.25px; width: 1.5px; }

.service:hover .service__name,
.service.is-open .service__name { color: var(--white); }
.service:hover .service__name { transform: translateX(6px); }
.service.is-open .service__mark::after { transform: scaleY(0); }

.service__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-out);
}
.service.is-open .service__detail { grid-template-rows: 1fr; }

.service__detail-inner {
  overflow: hidden;
  min-height: 0;
}

.service__cols {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 3.4vw, 3.4rem);
  padding: 0.4rem 0 clamp(1.6rem, 3.4vh, 2.4rem);
  align-items: start;
}

.service__sub {
  font-size: var(--text-eyebrow);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.1rem;
}

.service__text p:not(.service__sub) {
  color: var(--stone);
  max-width: 40rem;
  margin-bottom: 1.1rem;
  line-height: 1.62;
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
}

.service__media img {
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

/* =========================================================
   Warum
   ========================================================= */

.why {
  position: relative;
  z-index: 2;
  background: var(--base);
  border-top: 1px solid var(--hair);
  padding: clamp(4rem, 9vw, 8rem) var(--pad);
}

.why__head { max-width: 62rem; }

.why__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  margin-top: clamp(2.6rem, 5vw, 4.4rem);
  align-items: center;
}

.why__copy {
  grid-column: 1 / span 6;
  display: grid;
  gap: 1.4rem;
  color: var(--stone);
}

.why__copy .lead {
  color: var(--ivory);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1.46;
  letter-spacing: -0.018em;
}

.why__net {
  grid-column: 8 / span 5;
  position: relative;
}

.why__netcanvas {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
}

.why__values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(3rem, 6.5vw, 5.5rem);
  border-top: 1px solid var(--hair);
}

.why__values li {
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.4rem, 3vw, 3rem) 0 0;
}

.why__values li + li {
  border-left: 1px solid var(--hair);
  padding-left: clamp(1.4rem, 3vw, 3rem);
}

.why__values h3 {
  font-size: clamp(1.35rem, 1.8vw, 1.9rem);
  font-weight: var(--display-weight);
  line-height: 1.06;
  letter-spacing: var(--display-tracking);
  color: var(--white);
  margin-bottom: 0.7rem;
}

.why__values p { color: var(--stone); max-width: 24rem; }

/* =========================================================
   Neue Abschlussdramaturgie nach dem Leistungsspektrum
   ========================================================= */

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(17rem, 4fr);
  align-items: end;
  gap: clamp(2.5rem, 6vw, 7rem);
}

.section-intro__title { min-width: 0; }

.section-heading {
  max-width: 13ch;
  font-size: clamp(2.65rem, 5.25vw, 6.15rem);
  font-weight: var(--display-weight);
  line-height: 0.99;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

.section-intro__lead {
  max-width: 43ch;
  padding-bottom: 0.35rem;
  font-size: clamp(1rem, 0.35vw + 0.94rem, 1.2rem);
  line-height: 1.62;
}

.section-intro--light .eyebrow { color: var(--bronze-on-light); }
.section-intro--light .section-heading { color: var(--walnut); }
.section-intro--light .section-intro__lead { color: var(--cocoa); }
.section-intro--dark .eyebrow { color: #B79B80; }
.section-intro--dark .section-heading { color: var(--ivory); }
.section-intro--dark .section-intro__lead { color: var(--stone); }

/* ---------- Was uns auszeichnet ----------
   Vier Merkmale als Index mit mitlaufender Medienspalte. Die Zeilen sind
   immer vollständig lesbar; aktiv wird die Zeile, die beim Scrollen in die
   Blickzone kommt, oder die Zeile unter dem Mauszeiger. Es gibt dabei keine
   eigene Scroll-, Wheel- oder Snap-Logik: Der Zustand kommt aus einem
   IntersectionObserver, das Stehenbleiben aus CSS `position: sticky`. */

/* Bewusst ohne `overflow`: Ein Overflow-Wert ausser `visible` macht diese
   Sektion zum Scrollcontainer und setzt damit `position: sticky` der
   Medienspalte wirkungslos. Der Lichtabfall unten liegt mit `inset: 0`
   ohnehin innerhalb der Sektion. */
/* "Unser Ansatz" steht auf der Champagne-Flaeche der Marke; alle Texte
   wechseln dafuer auf die dunklen Toene der hellen Sektionen. */
.distinction {
  position: relative;
  z-index: 3;
  background: var(--champagne);
  color: var(--walnut);
  border-top: 1px solid var(--hair-dark);
  padding: clamp(6.5rem, 11vw, 10.5rem) var(--wide-edge);
}

.distinction__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(1600px - 2 * var(--wide-edge));
  margin-inline: auto;
}

/* Der Einleitungsblock steht mittig über den beiden Spalten. Dieselbe
   Fassung verwendet „Unsere Werte": Überschrift und Fließtext stehen dort
   auf einer gemeinsamen Mittelachse statt in der zweispaltigen Aufteilung
   der übrigen Sektionen. */
.distinction .section-intro,
.approach .section-intro,
.gruppe .section-intro {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
}

.distinction .section-intro__title,
.approach .section-intro__title,
.gruppe .section-intro__title { display: contents; }

.distinction .section-heading,
.approach .section-heading,
.gruppe .section-heading {
  width: 100%;
  min-width: 0;
  max-width: 26ch;
  text-wrap: balance;
}

.distinction .section-intro__lead,
.approach .section-intro__lead,
.gruppe .section-intro__lead {
  max-width: 66ch;
  padding-bottom: 0;
}

/* Texte links, Bilder rechts. Die Spalten sind gleich breit und das Bild ist
   quadratisch wie in „Strategische Unternehmensbegleitung". */
.distinction__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin-top: clamp(4.5rem, 8vw, 8rem);
  gap: clamp(2rem, 3.2vw, 4rem);
}

/* ---------- Medienspalte ----------
   Ohne Rahmen, Innenabstand und Anzeigen. Nur das Bild, das ruhig mit dem
   gelesenen Merkmal wechselt. */

.distinction__stage {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--header-h, 4.5rem) + var(--header-top, 1rem) + clamp(1.5rem, 3vw, 3rem));
}

.distinction__list { grid-column: 1; grid-row: 1; }

/* Maß und Radius wie `.split-feature__media`. */
.distinction__frames {
  position: relative;
  width: 100%;
  max-width: min(54rem, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--coal);
  isolation: isolate;
}

.distinction__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1.1s var(--ease-out), transform 2s var(--ease-out);
}

.distinction__slide.is-active { opacity: 1; transform: scale(1); }

.distinction__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Ohne JavaScript bleibt nur das erste Bild stehen. */
html:not(.js) .distinction__slide { opacity: 0; }
html:not(.js) .distinction__slide:first-child { opacity: 1; transform: none; }

/* ---------- Merkmale ---------- */

.distinction__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair-dark);
}

.distinction__row {
  position: relative;
  padding: clamp(2.2rem, 3.8vw, 3.6rem) 0;
  border-bottom: 1px solid var(--hair-dark);
  transition: opacity 0.7s var(--ease-out);
}

/* Einzige Auszeichnung des aktiven Merkmals neben der Helligkeit: eine
   Haarlinie in Bronze, die oben ueber die Zeilenbreite einlaeuft. */
.distinction__row-rule {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--bronze-on-light);
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease-out);
  pointer-events: none;
}

.distinction__row.is-active .distinction__row-rule { transform: scaleX(1); }

html.js .distinction__row:not(.is-active) { opacity: 0.4; }

.distinction__name {
  margin: 0;
  color: var(--walnut);
  font-size: clamp(1.45rem, 1.85vw, 2.05rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.distinction__text {
  max-width: 46ch;
  margin: clamp(0.9rem, 1.3vw, 1.15rem) 0 0;
  color: var(--cocoa);
  font-size: clamp(0.98rem, 0.3vw + 0.92rem, 1.12rem);
  line-height: 1.62;
}

.approach__inner,
.principles__inner,
.contact-final__inner {
  width: 100%;
  max-width: calc(1600px - 2 * var(--wide-edge));
  margin-inline: auto;
}

/* Footer-Container auf derselben Achse wie die übrigen Sektionen. */
.footer-top,
.footer-bottom {
  width: 100%;
  max-width: calc(1600px - 2 * var(--wide-edge));
  margin-inline: auto;
}

/* ---------- Beratungsansatz ---------- */

.approach {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--night);
  color: var(--ivory);
  border-top: 1px solid var(--hair);
  padding: clamp(6.5rem, 11vw, 10.5rem) var(--wide-edge);
}

.approach::before {
  content: "";
  position: absolute;
  top: -22rem;
  right: -18rem;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 111, 85, 0.1), transparent 67%);
  pointer-events: none;
}

/* Raster, Spalte und Bildmaß entsprechen exakt den Bild-Text-Sektionen
   („Organisation & Unternehmensstruktur"): gleiche zwei gleich breiten
   Spalten, gleicher Spaltenabstand, gleiches quadratisches Bild an der
   rechten Kante. Dadurch stehen beide Bilder auf derselben Achse. */
.approach__layout {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 3.2vw, 4rem);
  align-items: center;
  margin-top: clamp(4rem, 7vw, 7rem);
}

.approach__steps { border-top: 1px solid var(--hair-strong); }

/* Die vollständigen Profile unter den Personenkarten verwenden dasselbe
   Schrittlisten-Bauteil. Es fehlt dort nur der Abstand, den sonst
   `.approach__layout` beisteuert, und ein breiteres Textmaß: Die Liste
   steht hier über die volle Spaltenbreite, nicht in einer halben. */
.team__profile { margin-top: clamp(3.4rem, 6vw, 5.5rem); }
.team__profile p { max-width: 88ch; }

.approach-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.35rem, 2.4vw, 2rem) 0;
  border-bottom: 1px solid var(--hair);
}

.approach-step h3 {
  color: var(--ivory);
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
  font-weight: 520;
  line-height: 1.12;
  letter-spacing: -0.026em;
}

/* Die linke Spalte ist mit dem angeglichenen Raster breiter geworden; das
   Textmaß wächst mit, damit neben den Absätzen keine leere Rinne steht. */
.approach-step p {
  max-width: 52ch;
  margin-top: 0.55rem;
  color: var(--stone);
  font-size: clamp(0.9rem, 0.14vw + 0.87rem, 0.98rem);
  line-height: 1.58;
}

.approach__visual {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: min(54rem, 100%);
  aspect-ratio: 1;
  justify-self: end;
  margin: 0;
  border-radius: var(--radius);
  background: var(--espresso);
  isolation: isolate;
}

.approach__visual::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 1;
  background: linear-gradient(to top, rgba(11, 15, 24, 0.74), transparent 45%);
  pointer-events: none;
}

.approach__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: brightness(0.82) saturate(0.82);
}

.approach__caption {
  position: absolute;
  z-index: 2;
  right: clamp(1.2rem, 2vw, 2rem);
  bottom: clamp(1.2rem, 2vw, 2rem);
  left: clamp(1.2rem, 2vw, 2rem);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--ivory);
  font-size: var(--text-ui);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Berater & Team ---------- */

.team {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--night);
  color: var(--ivory);
  border-top: 1px solid var(--hair);
  padding: clamp(6.5rem, 11vw, 10.5rem) var(--wide-edge);
  /* Gruppenbild und die Personensektionen darunter gehören zusammen. Der
     volle Sektionsabstand unten plus der volle oben ergab 244 px und riss
     beides auseinander. Zusammen jetzt rund 115 px: deutlich näher, aber
     weiterhin als eigener Abschnitt lesbar. Beide Sektionen liegen auf
     derselben dunklen Fläche, es entsteht also keine sichtbare Kante. */
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.team + .split-feature--person {
  padding-top: clamp(1.6rem, 3vw, 2.8rem);
}

.team__inner {
  width: 100%;
  max-width: calc(1600px - 2 * var(--wide-edge));
  margin-inline: auto;
}

.team__group,
.team-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius);
  background: var(--espresso);
  isolation: isolate;
}

/* Der Rahmen folgt seit 14.08.2026 einem Seitenverhaeltnis statt einer
   festen Hoehe.

   Vorher: `height: clamp(23rem, 37vw, 38rem)`, also hoechstens 608 px.
   Die Aufnahme ist 3:2 und wird bei rund 1480 px Rahmenbreite auf 987 px
   Hoehe skaliert - sichtbar waren damit nur 62 Prozent. Die fehlenden
   38 Prozent lagen unten, also genau auf dem Tisch, und das starke
   Beschneiden liess das Bild herangezoomt wirken.

   16:10 liegt dicht am Bildformat: Es bleiben rund sechs Prozent
   Beschnitt statt achtunddreissig. Der Anteil ist ausserdem auf jeder
   Breite gleich, weil er nur noch am Seitenverhaeltnis haengt und nicht
   mehr an einer Pixelhoehe gegen eine mitwachsende Breite. Unter 560 px
   gilt weiterhin die eigene 4:3-Regel. */
.team__group {
  height: auto;
  aspect-ratio: 16 / 10;
  min-height: 0;
  margin-top: clamp(3.8rem, 7vw, 6.5rem);
}

/* `display: contents` haelt das <picture> aus dem Layout heraus; das Bild
   bezieht seine Hoehe damit weiterhin direkt auf die Karte. */
.team__group picture { display: contents; }

.team__group img,
.team-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der verbliebene Beschnitt liegt bewusst fast vollstaendig unten. Der
   stehende Kopf beginnt rund vier Prozent unter der Bildkante; bei
   mittigem Ausschnitt waere er angeschnitten. Mit 10 Prozent gehen
   oben nur etwa 0,6 Prozent verloren, unten rund 5,7 - der vordere
   Tischrand bleibt damit sichtbar. */
.team__group img { object-position: center 10%; }

/* Sanfter dunkler Verlauf unter der Bildunterschrift, KEIN Milchglas
   mehr (12.08.2026, Wunsch Thorsten). */
.team-card__blur {
  position: absolute;
  z-index: 1;
  right: -3px;
  bottom: -3px;
  left: -3px;
  height: calc(35% + 3px);
  background: linear-gradient(to top, rgba(6, 9, 15, 0.55) 0%, rgba(12, 17, 27, 0.24) 55%, transparent 100%);
  pointer-events: none;
}

.team__group-caption,
.team-card__caption {
  position: absolute;
  z-index: 2;
  right: clamp(1.1rem, 2vw, 2.1rem);
  bottom: clamp(0.75rem, 1vw, 1rem);
  left: clamp(1.1rem, 2vw, 2.1rem);
  color: var(--ivory);
  text-shadow: 0 1px 20px rgba(6, 9, 15, 0.72);
}

.team__group-caption {
  display: grid;
  grid-template-columns: minmax(14rem, 0.72fr) minmax(18rem, 1fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 6rem);
}

.team__group-caption h3 {
  font-size: clamp(1.7rem, 3vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.team__group-caption p {
  max-width: 56ch;
  justify-self: end;
  color: rgba(244, 247, 251, 0.86);
  line-height: 1.55;
}

/* Drei Personen, drei Spalten: Die Karten füllen damit dieselbe Breite
   wie das Gruppenbild darüber. Mit den früheren vier Spalten blieb die
   vierte leer und die Karten standen schmaler als das Bild. */
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.5vw, 1.35rem);
  margin-top: clamp(0.8rem, 1.5vw, 1.35rem);
}

.team__grid:focus-visible {
  outline: 2px solid var(--stone);
  outline-offset: 0.6rem;
}

/* Steuerung des Kartenlaufs: nur in der Slider-Fassung sichtbar. */
.team-carousel-controls { display: none; }

/* Breitere Spalten brauchen ein ruhigeres Format. Mit 3 : 5 würden die
   Karten bei drei Spalten rund 700 px hoch; 4 : 5 bringt sie auf die
   Höhe des Gruppenbildes darüber. */
.team-card {
  min-height: 0;
  aspect-ratio: 4 / 5;
}

/* Alle vier Porträts liegen jetzt im selben Format (1086 × 1448) und sind
   gleich aufgebaut; Einzelfallkorrekturen sind damit hinfällig. */
.team-card > img { object-position: 50% center; }

.team-card__caption h3 {
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  font-weight: 520;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.team-card__role {
  margin-top: 0.55rem;
  color: #E4EBF4;
  font-size: clamp(0.62rem, 0.62vw, 0.72rem);
  font-weight: 680;
  line-height: 1.38;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.team-card__text {
  margin-top: 0.55rem;
  color: rgba(244, 247, 251, 0.82);
  font-size: clamp(0.72rem, 0.68vw, 0.82rem);
  line-height: 1.45;
}

/* ---------- Grundsätze ---------- */

.principles {
  position: relative;
  z-index: 3;
  background: var(--champagne);
  color: var(--walnut);
  border-top: 1px solid var(--hair-dark);
  padding: clamp(6.5rem, 11vw, 10.5rem) var(--wide-edge);
}

.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(3.8rem, 7vw, 6.5rem);
  border-top: 1px solid var(--hair-dark-strong);
  border-bottom: 1px solid var(--hair-dark-strong);
}

.principle {
  min-width: 0;
  padding: clamp(1.7rem, 3vw, 2.8rem) clamp(1.2rem, 2.4vw, 2.4rem) clamp(2rem, 3.8vw, 3.5rem);
}
.principle:nth-child(3n + 1) { padding-left: 0; }
.principle:nth-child(3n) { padding-right: 0; }
.principle + .principle { border-left: 1px solid var(--hair-dark); }
.principle:nth-child(3n + 1) { border-left: 0; }
.principle:nth-child(n + 4) { border-top: 1px solid var(--hair-dark); }

.principle h3 {
  color: var(--walnut);
  font-size: clamp(1.35rem, 1.8vw, 1.9rem);
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.principle p {
  margin-top: 0.9rem;
  color: var(--cocoa);
  font-size: clamp(0.9rem, 0.14vw + 0.87rem, 0.98rem);
  line-height: 1.58;
}

/* ---------- Kontaktabschluss ---------- */

.contact-final {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  background: var(--night);
  color: var(--ivory);
  border-top: 1px solid var(--hair);
  padding-inline: var(--wide-edge);
}

/* Ohne Hintergrundbild: ruhige Fläche in Night Umber wie die
   angrenzenden Sektionen, kein Verlauf und keine Abdunklungsebene. */

.contact-final__inner {
  padding: clamp(5.5rem, 10vw, 9.5rem) 0;
}

.contact-final .eyebrow { color: #D4DCE8; }

/* ---------- Kopf: Überschrift links, Randnotiz rechts ---------- */

.closing-head {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(17rem, 4fr);
  align-items: end;
  gap: clamp(2.5rem, 6vw, 7rem);
}

.contact-final__title {
  max-width: 13.5ch;
  margin: 1.25rem 0 0;
  color: var(--white);
  font-size: clamp(2.9rem, 4.85vw, 5.8rem);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

.contact-final__title em { font-style: normal; }

.closing-note {
  max-width: 34rem;
  margin: 0 0 0.75rem;
  color: rgba(244, 247, 251, 0.72);
  font-size: clamp(0.96rem, 1.15vw, 1.08rem);
  line-height: 1.72;
}

/* ---------- Anfrageformular ----------
   Aufbau, Feldgestaltung und Maße aus dem Live-Theme
   `23 WORDPRESS THEME - InterAlpen 2026` übernommen und auf die Tokens
   dieses Entwurfs abgebildet. Die Texte sind an die Interalpen Holding
   GmbH angepasst. Es ist kein Versandweg hinterlegt. */

.inquiry-panel {
  display: grid;
  grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 9rem);
  scroll-margin-top: 7rem;
  margin-top: clamp(4rem, 8vw, 8rem);
  padding: clamp(2rem, 4vw, 4rem);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.inquiry-intro h3 {
  max-width: 13ch;
  margin: 1.25rem 0 0;
  color: var(--white);
  font-size: clamp(1.94rem, 3.49vw, 3.88rem);
  font-weight: var(--display-weight);
  line-height: 1.02;
  letter-spacing: var(--display-tracking);
}

.inquiry-intro > p:last-child {
  max-width: 30rem;
  margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 0;
  color: rgba(244, 247, 251, 0.66);
  font-size: clamp(0.94rem, 0.18vw + 0.9rem, 1.02rem);
  line-height: 1.62;
}

.inquiry-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 2rem);
}

.inquiry-form-column {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 1.25rem;
}

.form-field {
  display: grid;
  min-width: 0;
  gap: 0.65rem;
}

.form-field > span {
  color: rgba(244, 247, 251, 0.72);
  font-size: var(--text-caption);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.form-field b,
.inquiry-consent b {
  color: var(--stone);
  font-weight: 650;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 3.35rem;
  padding: 0.8rem 0;
  color: var(--white);
  font: inherit;
  border: 0;
  border-bottom: 1px solid rgba(244, 247, 251, 0.34);
  border-radius: 0;
  outline: 0;
  background: transparent;
  transition: border-color 220ms ease, background 220ms ease;
}

.form-field textarea {
  min-height: 8rem;
  resize: none;
}

.form-field select {
  appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--stone) 50%),
    linear-gradient(135deg, var(--stone) 50%, transparent 50%);
  background-position:
    calc(100% - 0.85rem) 50%,
    calc(100% - 0.5rem) 50%;
  background-repeat: no-repeat;
  background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
}

.form-field select option {
  color: var(--walnut);
  background: var(--white);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-bottom-color: var(--stone);
  background: rgba(244, 247, 251, 0.035);
}

.form-field--wide { grid-column: 1 / -1; }

.inquiry-consent {
  display: grid;
  min-height: 2.75rem;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  color: rgba(244, 247, 251, 0.66);
  font-size: var(--text-small);
  line-height: 1.55;
}

.inquiry-consent input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--bronze);
}

.inquiry-consent a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(244, 247, 251, 0.72);
  text-underline-offset: 0.16em;
}

.inquiry-consent a:hover,
.inquiry-consent a:focus-visible {
  text-decoration-color: currentColor;
}

.inquiry-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.inquiry-submit .button {
  justify-content: space-between;
  gap: clamp(1.35rem, 2.5vw, 2.5rem);
  padding: clamp(0.2rem, 0.35vw, 0.3rem) clamp(0.25rem, 0.45vw, 0.4rem) clamp(0.2rem, 0.35vw, 0.3rem) clamp(1.05rem, 1.4vw, 1.4rem);
  border: 0;
  cursor: pointer;
}

.button--light {
  color: var(--walnut);
  background: var(--white);
}

.button--light svg {
  width: clamp(2.55rem, 3.2vw, 2.8rem);
  height: clamp(2.55rem, 3.2vw, 2.8rem);
  padding: clamp(0.72rem, 0.9vw, 0.85rem);
  border-radius: var(--radius);
  color: var(--white);
  background: var(--walnut);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 320ms var(--ease-out);
}

.button--light:hover svg { transform: translateX(3px); }

.inquiry-status {
  min-height: 1.5rem;
  margin: 0;
  color: rgba(244, 247, 251, 0.55);
  font-size: var(--text-small);
  line-height: 1.5;
  text-align: right;
  transition: color 0.3s var(--ease-out);
}

.inquiry-status.is-flagged { color: var(--stone); }

.ia-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

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

.footer {
  position: relative;
  z-index: 3;
  background: #0F0C0B;
  color: var(--stone);
  border-top: 1px solid var(--hair);
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad) clamp(1.4rem, 3vw, 2.2rem);
}

/* Dreispaltiger Kopf wie `.footer-top` im Live-Theme. */
.footer-top {
  display: grid;
  grid-template-columns: minmax(15rem, 1.15fr) minmax(0, 1.6fr) minmax(15rem, 0.85fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 6rem);
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: clamp(1rem, 1.7vw, 1.5rem);
}

.footer-wordmark { display: block; align-self: start; }
.footer-wordmark img { width: clamp(10rem, 12vw, 12rem); height: auto; }

.footer-brand p {
  max-width: 27rem;
  margin: 0;
  /* Deckkraft aus dem Kontrastbedarf abgeleitet: auf dem Fussgrund
     ergaben 0.55 nur 4,33:1. 0.60 liefert 4,95:1 und bleibt optisch
     ruhiger als die Fusslinks (0.72). */
  color: rgba(198, 206, 220, 0.6);
  font-size: clamp(0.78rem, 0.14vw + 0.75rem, 0.86rem);
  line-height: 1.55;
  text-wrap: balance;
}

.footer-brand .footer-regulatory {
  max-width: 24rem;
  padding-top: clamp(0.9rem, 1.4vw, 1.2rem);
  /* Register- und Vertretungsangaben lagen bei 0.46 auf 3,36:1. */
  color: rgba(198, 206, 220, 0.6);
  border-top: 1px solid var(--hair-strong);
  font-size: clamp(0.68rem, 0.1vw + 0.65rem, 0.74rem);
  line-height: 1.58;
  text-wrap: pretty;
}

.footer-top nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 1.8vw, 1.8rem);
  padding-top: clamp(0.2rem, 0.6vw, 0.55rem);
  font-size: clamp(0.72rem, 0.12vw + 0.7rem, 0.8rem);
}

.footer-contact {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.6rem;
  font-size: clamp(0.72rem, 0.12vw + 0.7rem, 0.8rem);
}

.footer-contact__label {
  margin-bottom: 0.45rem;
  color: #B79B80;
  font-size: var(--text-micro);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-contact address {
  margin: 0 0 0.4rem;
  color: rgba(198, 206, 220, 0.62);
  font-style: normal;
  line-height: 1.6;
}

.footer-contact address strong {
  display: block;
  color: rgba(198, 206, 220, 0.84);
  font-weight: 550;
}

/* Noch offene Angaben stehen bewusst als Text, nicht als Verweis. */
.footer-contact__pending { color: rgba(198, 206, 220, 0.5); }

.footer-top nav a,
.footer-contact a,
.footer-bottom a {
  width: max-content;
  color: rgba(198, 206, 220, 0.72);
  transition: color 200ms ease;
}

.footer-top nav a:hover,
.footer-contact a:hover,
.footer-bottom a:hover { color: var(--white); }

.footer-contact__cta {
  margin-top: 0.35rem;
  border-bottom: 1px solid rgba(198, 206, 220, 0.34);
  padding-bottom: 0.2rem;
}

.langswitch--footer {
  gap: 0.25rem;
  margin-top: 0.4rem;
  color: rgba(198, 206, 220, 0.72);
}

.langswitch--footer button,
.langswitch--footer a {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  color: rgba(198, 206, 220, 0.72);
}

.langswitch--footer button[aria-pressed="true"],
.langswitch--footer a[aria-current="page"] {
  color: var(--white);
  border-color: #B79B80;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(4rem, 8vw, 8rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  /* Copyrightzeile lag bei 0.42 auf 2,98:1 - bei Kleinstschrift der
     schwaechste Wert der Seite. 0.60 ergibt 4,95:1. */
  color: rgba(198, 206, 220, 0.6);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-bottom div {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* =========================================================
   Reveals (nur mit JavaScript aktiv)
   ========================================================= */

/* Weg und Dauer folgen seit 12.08.2026 dem Livestand von InterAlpen
   Immobilien (dort 2,5 rem ueber 1,05 s). Vorher waren es 16 px ueber
   0,7 s - das war zu knapp, um als Bewegung gelesen zu werden, und
   liess die Seite trotz laufender Reveals statisch wirken. */
html.js .reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity 1s var(--ease-out), transform 1.05s var(--ease-out);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

/* Ueberschriften seit 13.08.2026 abends (Wunsch IAH): kein Aufklappen
   von oben nach unten mehr - das clip-basierte Aufdecken wirkte zu
   auffaellig. Stattdessen ein ruhiges, weiches Einblenden mit minimalem
   Anheben; bewusst langsamer als der Fliesstext, damit es edel bleibt. */
html.js .reveal-lines {
  opacity: 0;
  transform: translateY(0.9rem);
  transition: opacity 1.15s var(--ease-out), transform 1.15s var(--ease-out);
}
html.js .reveal-lines.is-in { opacity: 1; transform: none; }

html.js .reveal-img img {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.9s var(--ease-out), transform 1.4s var(--ease-out);
}
html.js .reveal-img.is-in img { opacity: 1; transform: scale(1); }

/* Die Staffel laeuft mit demselben laengeren Atem wie `.reveal`; die
   Schritte stehen weiter auseinander, damit die Kaskade sichtbar wird
   statt als ein Block zu erscheinen. Die Kette reicht bis zwoelf, denn
   mehrere Raster tragen mehr als sechs Kinder - die ueberzaehligen
   waeren sonst ohne Verzoegerung gemeinsam gekommen. */
html.js .stagger > * {
  opacity: 0;
  transform: translateY(1.3rem);
  transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
}
html.js .stagger.is-in > * { opacity: 1; transform: none; }
html.js .stagger.is-in > *:nth-child(2) { transition-delay: 85ms; }
html.js .stagger.is-in > *:nth-child(3) { transition-delay: 170ms; }
html.js .stagger.is-in > *:nth-child(4) { transition-delay: 255ms; }
html.js .stagger.is-in > *:nth-child(5) { transition-delay: 340ms; }
html.js .stagger.is-in > *:nth-child(6) { transition-delay: 425ms; }
html.js .stagger.is-in > *:nth-child(7) { transition-delay: 510ms; }
html.js .stagger.is-in > *:nth-child(8) { transition-delay: 595ms; }
html.js .stagger.is-in > *:nth-child(9) { transition-delay: 680ms; }
html.js .stagger.is-in > *:nth-child(10) { transition-delay: 765ms; }
html.js .stagger.is-in > *:nth-child(11) { transition-delay: 850ms; }
html.js .stagger.is-in > *:nth-child(12) { transition-delay: 935ms; }

/* Medien decken sich mit einem Wisch von oben nach unten auf, das Motiv
   setzt sich dabei minimal - uebernommen vom Livestand InterAlpen
   Immobilien (dort per GSAP: clip-path 1,25 s power3.inOut, Bild von
   1,07 auf 1). Die Portraets sind vom Bildmassstab ausgenommen, ihr
   Hover-Zoom behaelt seine eigene, schnellere Übergangszeit. */
html.js .reveal-media {
  clip-path: inset(0 0 102% 0);
  transition: clip-path 1.25s cubic-bezier(0.65, 0, 0.35, 1);
}
html.js .reveal-media.is-in { clip-path: inset(0 0 0 0); }
html.js .reveal-media:not(.split-feature__media--portrait) img,
html.js .reveal-media video {
  transition: transform 1.4s var(--ease-out);
}
html.js .reveal-media:not(.is-in) img,
html.js .reveal-media:not(.is-in) video { transform: scale(1.07); }

/* =========================================================
   Responsiv
   ========================================================= */

/* Umbruch bei 1260px statt 1180px: Mit der zusätzlichen Aktion rechts
   reicht der Platz darunter nicht mehr für Wortmarke, Navigation,
   Sprachumschalter und Knopf nebeneinander. */
@media (max-width: 1260px) {
  .header__nav { display: none; }
  .header__cta { display: none; }
  .header__tools > .langswitch { display: none; }
  .header__inner { grid-template-columns: 1fr auto; }
  .menu-toggle { display: inline-flex; justify-self: end; }
}

@media (max-width: 1180px) {
  .service__cols { grid-template-columns: 1fr; }
  .service__media { max-width: 40rem; }
}

/* Footer zweispaltig – dieselbe Breite wie im Live-Theme. */
@media (max-width: 1100px) {
  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem clamp(2rem, 4vw, 4rem);
  }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1020px) {
  .section-intro { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .section-intro__lead { max-width: 54ch; padding-bottom: 0; }
  .section-heading { max-width: 15ch; }

  /* Ab hier ist die zweispaltige Fassung zu eng: Medienspalte nach oben,
     Merkmale darunter, kein Stehenbleiben mehr. */
  .distinction__body { grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 3.6rem); }
  .distinction__stage { grid-column: auto; grid-row: auto; position: static; top: auto; }
  .distinction__list { grid-column: auto; grid-row: auto; }
  .distinction__frames { max-width: 100%; aspect-ratio: 16 / 9; }

  /* Bei drei Karten bleiben drei Spalten bis zum Kartenlauf: Zwei
     Spalten liessen die dritte Karte allein in einer zweiten Reihe. */
  .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .principles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle,
  .principle:nth-child(3n + 1),
  .principle:nth-child(3n) { border-left: 0; border-top: 0; padding-right: clamp(1.2rem, 2.4vw, 2.4rem); padding-left: clamp(1.2rem, 2.4vw, 2.4rem); }
  .principle:nth-child(even) { border-left: 1px solid var(--hair-dark); padding-right: 0; }
  .principle:nth-child(odd) { padding-left: 0; }
  .principle:nth-child(n + 3) { border-top: 1px solid var(--hair-dark); }

}

@media (max-width: 980px) {
  .split-feature__inner,
  .split-feature--flip .split-feature__inner { grid-template-columns: 1fr; }
  .split-feature--flip .split-feature__media { order: 0; justify-self: start; }
  .split-feature--flip .split-feature__copy { order: 1; }
  .split-feature__media { max-width: 46rem; }
  .split-feature__copy { max-width: 46rem; }
  .split-feature + .split-feature { padding-top: clamp(2.5rem, 6vw, 4rem); }

  /* „Unsere Haltung" bricht an derselben Breite um wie die
     Bild-Text-Sektionen, damit beide Achsen bis zuletzt zusammenlaufen. */
  .approach__layout { grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 3.6rem); }
  .approach__visual {
    order: -1;
    max-width: 46rem;
    justify-self: start;
    aspect-ratio: 16 / 10;
  }

  /* Die Dossier-Spalten folgen derselben Umbruchbreite und nehmen in der
     einspaltigen Fassung dasselbe Maß an wie die Bild-Text-Sektionen. */
  .dossier__spalten {
    grid-template-columns: 1fr;
    row-gap: clamp(1.4rem, 3.4vw, 2.2rem);
  }
  .dossier__head { align-items: start; }
  .dossier__lead { padding-bottom: 0; }
  .dossier__lead,
  .dossier__statement-note,
  .dossier__anchor-copy,
  .dossier__portrait { max-width: 46rem; }
  .dossier__anchor { align-items: start; row-gap: clamp(2rem, 5vw, 3rem); }
}

@media (max-width: 900px) {
  .statement { min-height: min(68svh, 46rem); }
  .statement__inner { grid-template-columns: 1fr; align-items: start; }
  .statement__support { justify-self: start; }

  .dossier__register { grid-template-columns: 1fr; }
  .dossier__register li:nth-last-child(-n + 2) { border-bottom: 0; }
  .dossier__register li:last-child { border-bottom: 1px solid var(--hair-dark); }

  .why__grid { grid-template-columns: 1fr; }
  .why__copy { grid-column: 1 / -1; }
  .why__net { grid-column: 1 / -1; max-width: 30rem; }
  .why__values { grid-template-columns: 1fr; }
  .why__values li { padding-right: 0; }
  .why__values li + li {
    border-left: 0;
    border-top: 1px solid var(--hair);
    padding-left: 0;
  }

  .closing-head { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .closing-note { margin-bottom: 0; }
}

/* ---------- Persönlichkeiten als Kartenlauf ----------
   Aufbau, Maße und Verhalten aus dem Live-Theme
   `23 WORDPRESS THEME - InterAlpen 2026` übernommen (`.closing-team`,
   `.team-carousel-*`), einschließlich derselben Umbruchbreite von 800px:
   natives Scrollen mit Snap, dazu zwei Pfeile über dem Kartenlauf. */
@media (max-width: 800px) {
  .team-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin: 2.25rem 0 1.15rem;
  }

  .team-carousel-button {
    display: grid;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    padding: 0;
    place-items: center;
    color: var(--ivory);
    border: 1px solid rgba(226, 234, 246, 0.5);
    border-radius: var(--radius);
    background: rgba(226, 234, 246, 0.04);
    cursor: pointer;
    transition: color 250ms ease, border-color 250ms ease, background 250ms ease, opacity 250ms ease;
  }

  .team-carousel-button svg {
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.35;
  }

  .team-carousel-button:hover:not(:disabled) {
    color: var(--night);
    border-color: var(--stone);
    background: var(--stone);
  }

  .team-carousel-button:focus-visible {
    outline: 2px solid var(--stone);
    outline-offset: 4px;
  }

  .team-carousel-button:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .team__grid {
    display: flex;
    gap: 1rem;
    margin-top: 0;
    margin-right: calc(var(--wide-edge) * -1);
    padding: 0 var(--wide-edge) 1rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0 var(--wide-edge);
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--stone) rgba(226, 234, 246, 0.14);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .team__grid::-webkit-scrollbar { height: 4px; }
  .team__grid::-webkit-scrollbar-track { border-radius: 999px; background: rgba(226, 234, 246, 0.14); }
  .team__grid::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--stone); }

  .team-card {
    flex: 0 0 min(82vw, 21rem);
    min-height: 0;
    aspect-ratio: 12 / 17;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* Anfrageformular. Das Live-Theme bricht Panel und Felder gemeinsam bei
   800px um. Hier steht das Panel in einer schmaleren Spalte; bei 819px
   blieben die Felder sonst nur 177px breit. Deshalb sind die beiden
   Umbrüche getrennt: erst das Panel, deutlich später die Felder. */
@media (max-width: 900px) {
  .inquiry-panel {
    grid-template-columns: 1fr;
    gap: clamp(3rem, 12vw, 4rem);
    padding: clamp(1.5rem, 7vw, 2.25rem);
  }

  .inquiry-intro h3 {
    max-width: 14ch;
    font-size: clamp(2.2rem, 10vw, 3.3rem);
  }
}

@media (max-width: 620px) {
  .inquiry-form { grid-template-columns: 1fr; }

  .form-field,
  .form-field--wide { grid-column: 1; }

  .inquiry-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .inquiry-submit .button { width: 100%; }

  .inquiry-status { text-align: left; }
}

/* Kompakte statische Fassung für Reduced Motion, Save-Data und fehlendes JS. */
@media (max-width: 1080px), (max-height: 560px) {
  html.js .hero.is-static + .hero-bridge {
    margin-top: 0;
  }

  .hero-bridge {
    min-height: min(82svh, 56rem);
    padding-top: clamp(5rem, 10vw, 7rem);
  }
  .hero-bridge__inner {
    min-height: min(68svh, 46rem);
    gap: clamp(3rem, 8vw, 5rem);
  }
  .hero-bridge__statement {
    font-size: clamp(3rem, 8.8vw, 5.6rem);
  }
  .hero-bridge__frame { aspect-ratio: 4 / 3; }

  /* Auch responsiv bleibt die Hero-Choreografie gepinnt, umkehrbar und
     durchgehend vollflächig. */
  html.js .hero:not(.is-static) .hero__pin {
    height: var(--hero-viewport-height);
    min-height: 0;
  }
  html.js .hero:not(.is-static) .hero__stage {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
  }
  html.js .hero:not(.is-static) .hero__media {
    position: absolute;
    grid-area: auto;
    width: 100%;
    height: 100%;
  }
  html.js .hero:not(.is-static) .hero__opening {
    position: absolute;
    inset: 0;
    grid-area: auto;
    min-height: 0;
    padding: 0 clamp(1.2rem, 5vw, 2.5rem);
  }
  html.js .hero:not(.is-static) .hero__opening-title {
    max-width: 14ch;
    font-size: clamp(2.3rem, 8vw, 5.4rem);
  }
}

/* Niedrige Querformate behalten den vollständigen Opening-Inhalt
   innerhalb des Videos, statt CTA oder Titel unter das Medium zu drücken. */
@media (max-height: 560px) {
  .hero__opening { padding: 1rem; }
  .hero__opening-eyebrow { margin-bottom: 0.65rem; }
  .hero__opening-title,
  html.js .hero:not(.is-static) .hero__opening-title {
    max-width: 22ch;
    font-size: clamp(1.9rem, 4.6vw, 2.55rem);
  }
  .hero__opening-cta { margin-top: 0.8rem; }
}

@media (max-width: 820px) {
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-brand { grid-column: auto; }
  .footer-top nav { gap: 0.9rem clamp(1rem, 5vw, 1.6rem); }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .footer-bottom div { width: 100%; flex-wrap: wrap; gap: 0.75rem 1.1rem; }
}

@media (max-width: 760px) {
  .header {
    top: clamp(0.45rem, 1.8vw, 0.65rem);
    width: calc(100% - clamp(0.9rem, 3.2vw, 1.3rem));
    min-height: clamp(4rem, 12vw, 4.2rem);
  }
  .header__inner {
    min-height: clamp(4rem, 12vw, 4.2rem);
    padding: clamp(0.42rem, 1.5vw, 0.5rem) clamp(0.45rem, 1.8vw, 0.55rem)
      clamp(0.42rem, 1.5vw, 0.5rem) clamp(0.8rem, 3vw, 1rem);
  }

  .statement {
    min-height: auto;
    padding-top: clamp(6rem, 22vw, 8rem);
    padding-bottom: clamp(6rem, 22vw, 8rem);
  }
  .dossier { padding-top: clamp(5rem, 18vw, 7rem); padding-bottom: clamp(5rem, 18vw, 7rem); }
  .dossier__title { max-width: none; font-size: clamp(2.2rem, 9.5vw, 2.4rem); }
  .dossier__scope-line { max-width: none; font-size: clamp(1.5rem, 7vw, 1.7rem); }
  .dossier__register li { font-size: clamp(0.98rem, 4.2vw, 1.06rem); }
  .dossier__portrait { max-width: 100%; }

  .distinction,
  .approach,
  .team,
  .principles { padding-top: clamp(5rem, 18vw, 7rem); padding-bottom: clamp(5rem, 18vw, 7rem); }
  .section-heading { font-size: clamp(2.45rem, 11vw, 2.65rem); }

  /* Auf Mobil steht die Medienspalte oben und bleibt nicht stehen; der
     Index läuft darunter. Der Bildwechsel bleibt an die aktive Zeile
     gekoppelt. */
  .distinction__body { grid-template-columns: 1fr; gap: clamp(2rem, 8vw, 3rem); }
  .distinction__stage { position: static; top: auto; }
  .distinction__frames { aspect-ratio: 3 / 2; }
  .distinction__row { padding: clamp(1.8rem, 7vw, 2.4rem) 0; }
  /* Auf Mobil ist die Medienspalte beim Lesen nicht mehr sichtbar; die
     Merkmale bleiben deshalb annaehernd gleich hell. */
  html.js .distinction__row:not(.is-active) { opacity: 0.72; }

  .principles__grid { grid-template-columns: 1fr; }
  .principle,
  .principle:nth-child(3n + 1),
  .principle:nth-child(3n),
  .principle:nth-child(odd),
  .principle:nth-child(even) { padding: 1.8rem 0 2.2rem; border-left: 0; }
  .principle + .principle { border-top: 1px solid var(--hair-dark); }
  .contact-final__title { font-size: clamp(2.6rem, 12vw, 2.9rem); }

  .hero-bridge {
    min-height: auto;
    padding-top: clamp(5.5rem, 18vw, 7rem);
    padding-bottom: clamp(4rem, 14vw, 6rem);
  }

  .hero-bridge__inner {
    min-height: 0;
    gap: clamp(2.5rem, 10vw, 4rem);
  }
  .hero-bridge__statement {
    font-size: clamp(2.6rem, 11vw, 4.2rem);
    line-height: 1.01;
  }
  .hero-bridge__frame { aspect-ratio: 4 / 5; }

  /* Auf Telefonen steht der Satz UNTER dem Video statt darauf. Im
     Hochformat lag er sonst mitten im Bild und wirkte, als sei er Teil der
     Aufnahme. Der Verlauf am unteren Bildrand bleibt unverändert. */
  .hero-bridge__media-copy {
    position: static;
    inset: auto;
    width: auto;
    margin-top: clamp(1rem, 4vw, 1.5rem);
    color: var(--stone);
    font-size: clamp(0.88rem, 3.9vw, 1.02rem);
    line-height: 1.45;
    text-shadow: none;
  }

}

@media (max-width: 560px) {
  .service__name { font-size: clamp(1.2rem, 5.6vw, 1.4rem); }
  .approach__caption { flex-direction: column; gap: 0.35rem; }
  .approach__visual { aspect-ratio: 4 / 3; }
  .team .section-heading { font-size: clamp(2.35rem, 10.4vw, 2.65rem); }
  /* Für das Gruppenbild gibt es keine eigene Hochformataufnahme mehr; die
     drei Personen stehen nebeneinander in einer Querformataufnahme. Ein
     hochformatiger Rahmen würde die äußeren beiden anschneiden, deshalb
     folgt die Karte hier dem Bildformat statt einer festen Höhe. Bei 4 : 3
     bleiben alle drei vollständig im Bild. */
  .team__group { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .team__group img { object-position: center center; }
  .team__group-caption { grid-template-columns: 1fr; gap: 0.65rem; }
  .team__group-caption h3 { font-size: clamp(1.55rem, 7vw, 1.7rem); }
  .team__group-caption p { justify-self: start; font-size: clamp(0.82rem, 2.5vw, 0.9rem); line-height: 1.42; }
  /* Der Kartenlauf oben behält sein Format; nur die Beschriftung wird
     auf schmalen Telefonen größer gesetzt. */
  .team-card__caption { right: 1.25rem; bottom: 0.85rem; left: 1.25rem; }
  .team-card__caption h3 { font-size: clamp(1.3rem, 6vw, 1.7rem); }
  .team-card__role { font-size: clamp(0.68rem, 2.1vw, 0.76rem); }
  .team-card__text { font-size: clamp(0.8rem, 2.5vw, 0.88rem); }
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

/* =========================================================
   Hero: Dubai-Film als durchgehend vollflaechiger Scroll-Scrub

   Diese Regeln ersetzen ausschliesslich die bisherige Hero-Komposition.
   Das Medium bleibt waehrend des gesamten Pins gleich gross. Die Texte
   werden als vier ruhige Gruppen ueber transform/opacity choreografiert;
   vier leere Champagnerflaechen bilden nach dem letzten Filmframe einen
   offenen Rahmen. Die nachfolgende hero-bridge behaelt ihre Geometrie.
   ========================================================= */

.hero {
  --hero-door-champagne: var(--champagne);
}

.hero__pin {
  background: var(--hero-door-champagne);
}

/* Beim Schrumpfen des Films wird die Buehne selbst zur ruhigen
   Champagne-Schlussflaeche - bewusst einfarbig, damit Rahmen und Flaeche
   als eine durchgehende Ebene erscheinen. */
html.js .hero:not(.is-static) .hero__stage {
  background: var(--hero-door-champagne);
}

.hero__media,
html.js .hero:not(.is-static) .hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  transform: none;
}

.hero__video,
.hero__mediacanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero__mediaveil {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 14, 22, 0.34) 0%, rgba(10, 14, 22, 0.06) 42%, rgba(10, 14, 22, 0.28) 100%),
    linear-gradient(90deg, rgba(10, 14, 22, 0.18) 0%, transparent 30%, transparent 70%, rgba(10, 14, 22, 0.18) 100%);
}

html.js .hero:not(.is-static) [data-hero-copy] {
  opacity: 0;
  will-change: transform, opacity;
}

/* Der Opening-Inhalt ist schon vor dem ersten Scrollschritt sichtbar. */
html.js .hero:not(.is-static) .hero__opening {
  opacity: 1;
}

.hero__actions {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 var(--pad);
  color: var(--white);
  pointer-events: none;
  text-align: center;
}

.hero__action {
  grid-area: 1 / 1;
  max-width: min(92vw, 13ch);
  font-size: clamp(2.8rem, 7.2vw, 7.6rem);
  font-weight: var(--display-weight);
  line-height: 0.96;
  letter-spacing: var(--display-tracking);
  text-shadow: 0 2px 30px rgba(6, 9, 15, 0.52);
}

html.js .hero:not(.is-static) .hero__action {
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* Typo-Maske: Champagne-Flaeche mit ausgestanzten Leitwoertern ueber dem
   vollflaechigen Film. Geometrie, Wortgroessen und Stanz-Skalierung setzt
   JavaScript; die Flaeche selbst bleibt bewusst einfarbig. */
.hero__mask,
html.js .hero:not(.is-static) .hero__mask {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.hero__mask-fill {
  fill: var(--hero-door-champagne);
}

.hero__mask-word {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 640;
  letter-spacing: -0.028em;
  text-transform: uppercase;
}

.hero.is-static .hero__mask,
html:not(.js) .hero__mask {
  display: none;
}

/* Die vier Geschaeftsbereiche stehen als feine Indexzeile auf der
   Champagne-Flaeche unterhalb der Stanzwoerter. Echte Links, durch
   Mittelpunkte getrennt. */
.hero__services {
  position: absolute;
  z-index: 7;
  right: var(--pad);
  bottom: clamp(3.4rem, 9vh, 5.5rem);
  left: var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: clamp(0.9rem, 1.6vw, 1.6rem);
  row-gap: 0.55rem;
  pointer-events: none;
}

.hero__service-link {
  position: relative;
  display: inline-block;
  padding: 0.2rem 0.05rem;
  color: var(--espresso);
  font-size: clamp(0.66rem, 0.72vw, 0.82rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: auto;
}

.hero__service-link + .hero__service-link::before {
  content: "·";
  position: absolute;
  top: 50%;
  left: calc(-0.5 * clamp(0.9rem, 1.6vw, 1.6rem));
  transform: translate(-50%, -50%);
  opacity: 0.55;
  pointer-events: none;
}

.hero__service-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.12rem;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out), opacity 0.35s ease;
}

.hero__service-link:hover::after,
.hero__service-link:focus-visible::after {
  opacity: 0.85;
  transform: scaleX(1);
}

.hero__service-link:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: 4px;
}

html.js .hero:not(.is-static) .hero__services {
  opacity: 0;
  will-change: opacity;
}

/* Statischer Rueckweg fuer Reduced Motion, Save-Data und fehlendes JS:
   Poster statt Animation, alle Texte sichtbar und alle Links bedienbar. */
.hero.is-static .hero__pin,
html:not(.js) .hero__pin {
  height: auto;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: visible;
}

.hero.is-static .hero__stage,
html:not(.js) .hero__stage {
  display: grid;
  grid-template-areas:
    "media"
    "actions"
    "services"
    "scroll";
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: clamp(1.1rem, 2.5vw, 2rem);
  height: auto;
  min-height: calc(100svh - 2 * var(--hero-frame));
  min-height: calc(100dvh - 2 * var(--hero-frame));
  padding: calc(var(--header-top) + var(--header-h) + 1.2rem) calc(var(--pad) - var(--hero-frame)) 2.4rem;
  overflow: hidden;
}

.hero.is-static .hero__media,
html:not(.js) .hero__media {
  position: relative;
  grid-area: media;
  inset: auto;
  width: 100%;
  height: min(72vh, 42rem);
  height: min(72dvh, 42rem);
}

.hero.is-static .hero__opening,
html:not(.js) .hero__opening {
  position: relative;
  grid-area: media;
  inset: auto;
  min-height: min(72vh, 42rem);
  min-height: min(72dvh, 42rem);
  padding: clamp(1.4rem, 5vw, 3rem);
}

.hero.is-static .hero__actions,
html:not(.js) .hero__actions {
  position: static;
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0;
  color: var(--white);
}

.hero.is-static .hero__action,
html:not(.js) .hero__action {
  grid-area: auto;
  max-width: none;
  opacity: 1;
  transform: none;
  font-size: clamp(1rem, 2.5vw, 1.55rem);
}

.hero.is-static .hero__services,
html:not(.js) .hero__services {
  position: static;
  grid-area: services;
  inset: auto;
  width: 100%;
  margin: 0;
  opacity: 1;
  justify-content: center;
  pointer-events: auto;
}

.hero.is-static .hero__service-link,
html:not(.js) .hero__service-link {
  color: var(--ivory);
  opacity: 1;
  transform: none;
}

.hero.is-static .hero__service-link:focus-visible,
html:not(.js) .hero__service-link:focus-visible {
  outline-color: var(--ivory);
}

.hero.is-static .hero__scrollhint,
html:not(.js) .hero__scrollhint {
  position: static;
  grid-area: scroll;
  display: block;
  padding-bottom: 1.8rem;
  transform: none;
}

.hero.is-static .hero__scrollhint::after,
html:not(.js) .hero__scrollhint::after {
  animation: none;
  opacity: 0.9;
  transform: translate3d(-50%, 0.42rem, 0);
}

.hero.is-static [data-hero-copy],
html:not(.js) [data-hero-copy] {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

@media (max-width: 760px) {
  .hero__opening-title,
  html.js .hero:not(.is-static) .hero__opening-title {
    max-width: 14ch;
    font-size: clamp(2.25rem, 9.2vw, 3.8rem);
  }

  .hero__action {
    max-width: 11ch;
    font-size: clamp(2.45rem, 11vw, 3.45rem);
  }

  html.js .hero:not(.is-static) .hero__action {
    will-change: transform, opacity;
  }

  .hero__services {
    bottom: clamp(2.6rem, 7vh, 4rem);
    column-gap: 0.9rem;
  }

  .hero__service-link {
    font-size: clamp(0.56rem, 2.6vw, 0.68rem);
    letter-spacing: 0.09em;
  }

  .hero__service-link + .hero__service-link::before {
    left: -0.45rem;
  }

  .hero.is-static .hero__actions,
  html:not(.js) .hero__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-height: 560px) {
  .hero__action {
    font-size: clamp(2rem, 6vw, 3.3rem);
  }

  .hero__services {
    bottom: 2rem;
  }

  .hero__scrollhint {
    bottom: 1rem;
  }
}

/* =========================================================
   Reduzierte Bewegung
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html.js .reveal,
  html.js .reveal-lines,
  html.js .reveal-img img {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  html.js .reveal-media { clip-path: none; }
  html.js .reveal-media img,
  html.js .reveal-media video { transform: none; }
  html.js .stagger > * {
    opacity: 1;
    transform: none;
    transition-delay: 0ms !important;
  }
  /* Der Ladebalken steht sofort vollständig, der Bildwechsel schaltet hart
     um, die Zeilen bleiben alle voll lesbar. */
  html.js .hero-bridge__rule-fill { transform: scaleX(1); }
  html.js .gruppe__rule i { transform: scaleX(1); }
  html.js .distinction__row:not(.is-active) { opacity: 1; }
  .distinction__slide { transition: none; transform: none; }
  .distinction__slide.is-active { transform: none; }
  .distinction__row-rule { transition: none; }

  .hero.is-static .hero__mediaveil { opacity: 0.34; }
  .hero__scrollhint::after {
    animation: none !important;
    opacity: 0.9;
    transform: translate3d(-50%, 0.42rem, 0);
  }
}

/* =========================================================
   Textrunde 12.08.2026

   Neue Bauteile fuer die ueberarbeiteten Texte: Mehrabsatz-Fliesstext,
   rechtliche Hinweiszeilen, die Investments-Sektion samt Fokusleiste,
   der Holding-Block in „Die Gruppe", die vierte Kernbereich-Karte,
   die Claim-Zeilen der Personen und der Footer-Rechtsrahmen.
   Alle verwenden vorhandene Mechaniken (`reveal`, `stagger`,
   `data-rule`) und fuehren keine neue Technik ein.
   ========================================================= */

/* ---------- Mehrabsatz-Fliesstext in den Bild-Text-Sektionen ----------
   Zwischen Ueberschrift und erstem Absatz bleibt der grosse Abstand
   stehen. Folgeabsaetze desselben Gedankengangs ruecken enger. */
.split-feature__body + .split-feature__body {
  margin-top: clamp(0.8rem, 1.15vw, 1.1rem);
}

/* Erlaubnis- und Zulassungshinweis am Ende einer Feldsektion. Leiser
   als der Fliesstext, abgesetzt durch eine Haarlinie statt durch einen
   Kasten. */
/* Erlaubnis- und Zulassungshinweis am Ende einer Feldsektion. Er darf
   deutlich leiser stehen als der Fliesstext, muss aber lesbar bleiben:
   `--cocoa` auf `--night` war praktisch dunkel auf dunkel. Gedaempftes
   Stone traegt genug Kontrast und bleibt trotzdem klar nachgeordnet. */
.split-feature__note {
  max-width: 62ch;
  margin-top: clamp(1.4rem, 2.2vw, 2rem);
  padding-top: clamp(0.9rem, 1.4vw, 1.3rem);
  border-top: 1px solid var(--hair);
  color: rgba(198, 206, 220, 0.6);
  font-size: clamp(0.76rem, 0.14vw + 0.73rem, 0.84rem);
  line-height: 1.62;
}

/* Der Management-Vorspann traegt zwei Saetze statt eines Halbsatzes. Im
   Regelmass von 8 zu 4 wirkte die Textspalte gequetscht. */
.section-intro--breit {
  grid-template-columns: minmax(0, 5.5fr) minmax(20rem, 4.5fr);
}

.section-intro--breit .section-intro__lead {
  max-width: 54ch;
}

/* ---------- Investments: Fokusleiste ----------
   Die Branchen stehen im Textdokument als Aufzaehlung im Fliesstext.
   Als ruhige Leiste bekommen sie eine eigene Ebene: eine Bronze-Marke,
   darunter die Begriffe als Zeilen mit feinen Trennstrichen. Kein
   Kasten, keine Nummerierung. */
.investment__fokus {
  margin-top: clamp(1.6rem, 2.6vw, 2.3rem);
}

.investment__fokus-label {
  color: #B79B80;
  font-size: var(--text-eyebrow);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.investment__fokus-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1rem, 1.8vw, 1.7rem);
  margin-top: clamp(0.7rem, 1.1vw, 1rem);
  padding: 0;
  list-style: none;
}

.investment__fokus-list li {
  position: relative;
  padding: clamp(0.42rem, 0.7vw, 0.6rem) 0;
  color: var(--ivory);
  font-size: clamp(0.95rem, 0.3vw + 0.89rem, 1.12rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Der Trennstrich liegt zwischen den Begriffen, nicht vor dem ersten. */
.investment__fokus-list li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * clamp(0.5rem, 0.9vw, 0.85rem));
  width: 1px;
  height: 0.92em;
  background: var(--hair-strong);
  transform: translateY(-50%);
}

/* ---------- Investments: Linie und Claim ----------
   Dieselbe scrollgeladene Bronze-Linie wie in „Die Gruppe", hier auf
   hellem Grund und als Fuehrung zum Claim. */
.investment__rule {
  position: relative;
  display: block;
  height: 1px;
  margin-top: clamp(2rem, 3.4vw, 3rem);
  background: var(--hair);
  overflow: hidden;
}

.investment__rule i {
  position: absolute;
  inset: 0;
  background: var(--bronze);
  transform: scaleX(var(--charge, 0));
  transform-origin: left center;
}

.investment__claim {
  max-width: 34ch;
  margin-top: clamp(1.1rem, 1.8vw, 1.6rem);
  color: var(--ivory);
  font-size: clamp(1.12rem, 0.75vw + 0.98rem, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

/* ---------- Claim-Zeile der Personensektionen ----------
   Schliesst jede Biografie mit dem Satz aus dem Textdokument ab.
   Bronze-Marke links, damit sie nicht als weiterer Absatz gelesen
   wird. */
.person__claim {
  position: relative;
  max-width: 42ch;
  margin-top: clamp(1.5rem, 2.4vw, 2.2rem);
  padding-left: clamp(0.9rem, 1.4vw, 1.25rem);
  color: var(--ivory);
  font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.24rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.person__claim::before {
  content: "";
  position: absolute;
  top: 0.28em;
  bottom: 0.28em;
  left: 0;
  width: 2px;
  background: var(--bronze);
}

/* ---------- Personenkopf ueber dem Textblock ----------
   Rolle und Name standen bis zum 13.08.2026 als Namenskarte IM Bild,
   samt dunkler Lesezone am unteren Rand. Auf Wunsch von IAH stehen sie
   jetzt als Kopf UEBER dem jeweiligen Textblock; das Portraet bleibt
   frei von Text, die Lesezone entfaellt ersatzlos. */
.person-head {
  margin-bottom: clamp(1.3rem, 2.4vw, 2rem);
}

.person-head__rolle {
  color: #B79B80;
  font-size: clamp(0.64rem, 0.1vw + 0.62rem, 0.72rem);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.person-head__name {
  margin-top: clamp(0.45rem, 0.8vw, 0.7rem);
  color: var(--ivory);
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  font-weight: var(--display-weight);
  line-height: 1.02;
  letter-spacing: var(--display-tracking);
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

/* Der erste Absatz schliesst direkt an den Personenkopf an. */
.split-feature--person .split-feature__copy > .split-feature__body:first-child,
.split-feature--person .split-feature__copy > .person-head + .split-feature__body {
  margin-top: 0;
}

/* ---------- Die Gruppe: Holding, Beteiligungen und Management ----------
   Der Block traegt viel Text, der wortwoertlich stehen bleiben muss. Als
   fortlaufende Spalte las er sich wie ein Blogbeitrag und stand zudem
   linksbuendig unter einem zentrierten Vorspann.

   Deshalb die Anmutung einer Berichtsseite: zentrierter Kapitelkopf auf
   derselben Mittelachse wie der Vorspann darueber, darunter die drei
   Aussagen als gleichwertige Spalten mit Haarlinie ueber jeder Spalte.
   Der Blick springt von Spalte zu Spalte, statt einen langen Absatz
   hinunterzulaufen. Die rechtliche Aussage steht als leise Fussnote quer
   darunter. */
.gruppe__holding {
  margin-top: clamp(3rem, 5.5vw, 5rem);
  padding-top: clamp(2.4rem, 4vw, 3.6rem);
  border-top: 1px solid var(--hair);
}

.gruppe__holding-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Kurze Bronze-Linie ueber der Ueberschrift, mittig wie der Vorspann. */
.gruppe__holding-mark {
  width: clamp(2.4rem, 4vw, 3.4rem);
  height: 1px;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
  background: var(--bronze);
}

.gruppe__holding-head h3 {
  max-width: 24ch;
  color: var(--ivory);
  font-size: clamp(1.32rem, 1.9vw, 2.05rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.gruppe__holding-spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 3.2rem);
  margin-top: clamp(2.4rem, 4.4vw, 4rem);
}

.gruppe__holding-spalte {
  min-width: 0;
  padding-top: clamp(0.95rem, 1.6vw, 1.35rem);
  border-top: 1px solid var(--hair-strong);
}

.gruppe__holding-spalte p {
  color: var(--stone);
  font-size: clamp(0.92rem, 0.22vw + 0.88rem, 1.02rem);
  line-height: 1.62;
}

.gruppe__holding-note {
  max-width: 84ch;
  margin: clamp(2.2rem, 3.6vw, 3.2rem) auto 0;
  padding-top: clamp(0.95rem, 1.6vw, 1.35rem);
  border-top: 1px solid var(--hair);
  color: rgba(198, 206, 220, 0.6);
  font-size: clamp(0.76rem, 0.14vw + 0.73rem, 0.84rem);
  line-height: 1.62;
  text-align: center;
}

/* ---------- Vier Kernbereiche ----------
   Aus drei Karten sind vier geworden. Auf breiten Flaechen laufen sie
   in einer Reihe, dazwischen im Zweierraster, auf Telefonen einspaltig
   wie bisher. */
.gruppe__cards--vier {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.8rem);
}

/* Vier Subzeilen unterschiedlicher Laenge sollen die Karten nicht
   gegeneinander verschieben. */
.gruppe__cards--vier .gruppe-card {
  display: flex;
  flex-direction: column;
}

/* ---------- Personen- und Teambilder: eigene Farbe ----------
   Bis 12.08.2026 standen Portraets und Gruppenbild schwarzweiss und
   abgedunkelt, mit Farbe erst unter dem Zeiger - uebernommen aus der
   Team-Sektion von InterAlpen Immobilien. Auf Baris' Wunsch faellt
   dieser Ueberzug weg: Die neuen Blue-Hour-Aufnahmen leben von Licht,
   Walnuss und Skyline, und genau das soll man sehen. Geblieben ist das
   leichte Anziehen unter dem Zeiger. Die Lesezonen unter Namensplatte
   und Bildunterschrift bleiben als reine Verlaeufe erhalten - ohne sie
   waeren die Namen auf dem Bild nicht lesbar. */
.split-feature__media--portrait img {
  transition: transform 900ms var(--ease-out);
}

.split-feature__media--portrait:hover img {
  transform: scale(1.03);
}

/* Das Gruppenbild traegt zusaetzlich die Einblendung `reveal-img`. Deren
   Regeln stehen unter `html.js` und sind damit spezifischer; Uebergang
   und Hover werden hier auf derselben Ebene nachgezogen. Der
   Einblend-Uebergang bleibt dabei vollstaendig erhalten. */
html.js .team__group.reveal-img img,
.team__group img {
  transition: opacity 0.9s var(--ease-out), transform 1.4s var(--ease-out);
}

html.js .team__group.reveal-img.is-in:hover img,
.team__group:hover img {
  transform: scale(1.03);
}

/* Auf Geraeten ohne Zeiger gibt es keinen Hover. Dort bleibt das Bild
   ruhig stehen, statt im Zwischenzustand zu haengen. */
@media (hover: none) {
  .split-feature__media--portrait:hover img,
  html.js .team__group.reveal-img.is-in:hover img,
  .team__group:hover img {
    transform: none;
  }
}

/* ---------- Footer: Hinweis zum Leistungsangebot ----------
   Ruhiger Rechtsrahmen ueber die volle Breite, oberhalb der Marken-
   und Kontaktzeile. Er schliesst die Seite ab, ohne wie eine weitere
   Inhaltssektion zu wirken. */
.footer-disclosure {
  width: 100%;
  max-width: calc(1600px - 2 * var(--wide-edge));
  margin-inline: auto;
  margin-bottom: clamp(2.6rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.4rem, 4.5vw, 4rem);
  border-bottom: 1px solid var(--hair);
}

.footer-disclosure__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 3rem);
}

.footer-disclosure .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: clamp(0.6rem, 1.2vw, 1.1rem);
  color: #B79B80;
}

.footer-disclosure p:not(.eyebrow) {
  max-width: 62ch;
  color: var(--stone);
  font-size: var(--text-small);
  line-height: 1.64;
  opacity: 0.86;
}

@media (max-width: 1100px) {
  .gruppe__cards--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-intro--breit { grid-template-columns: minmax(0, 1fr); }
  .section-intro--breit .section-intro__lead { max-width: 62ch; }
}

@media (max-width: 900px) {
  /* Drei Spalten waeren hier zu schmal fuer ruhigen Fliesstext. Die
     Aussagen stehen dann untereinander, jede weiterhin mit ihrer
     Haarlinie - der Berichtscharakter bleibt erhalten. */
  .gruppe__holding-spalten { grid-template-columns: minmax(0, 1fr); }
  .gruppe__holding-note { text-align: left; }
}

@media (max-width: 860px) {
  .footer-disclosure__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .gruppe__cards--vier { grid-template-columns: minmax(0, 1fr); }
  .investment__fokus-list {
    flex-direction: column;
    gap: 0;
  }
  .investment__fokus-list li + li {
    padding-top: clamp(0.5rem, 1.4vw, 0.7rem);
  }
  .investment__fokus-list li + li::before {
    top: 0;
    left: 0;
    width: 2.2rem;
    height: 1px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .investment__rule i { transform: scaleX(1); }
  .split-feature__media--portrait img,
  html.js .team__group.reveal-img img,
  .team__group img { transition: none; }
  .split-feature__media--portrait:hover img,
  html.js .team__group.reveal-img.is-in:hover img,
  .team__group:hover img { transform: none; }
}

/* Dezente Pfeiltasten des Kartenlaufs: nur im gepinnten Desktop-Lauf
   sichtbar (Wunsch IAH, 13.08.2026). Auf Touch scrollt die Reihe nativ. */
.strategy-slider__nav { display: none; }
html.js .strategy-slider:not(.is-static) .strategy-slider__nav {
  display: flex;
  gap: 0.6rem;
  margin-top: clamp(1.1rem, 1.8vw, 1.6rem);
}
.strategy-slider__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(244, 247, 251, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--stone);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.strategy-slider__nav-btn:hover {
  color: var(--white);
  border-color: rgba(244, 247, 251, 0.6);
}