/* =============================================================
   FINALER ENTWURF
   -------------------------------------------------------------
   Basis: Richtung „Capital House" (deren styles.css ist vorher
   geladen). Diese Datei ergänzt:

   1. die Koordinaten-Leiste aus Richtung „Network"
   2. die Europe↔Asia-Sektion auf Papier, mit einem
      3D-Drahtmodell (Alpengipfel → Hongkong-Turm) statt der
      abstrakten Rasterlinien
   3. die Montage-Sektion — Parallax + Scroll-Scrub, die am
      Ende in einen einzigen Frame einrastet
   4. das Anfrageformular in der Anmutung des bestehenden
      InterAlpen-Formulars (Anliegen-Auswahl, Pfeilkachel-Knopf)

   Bewusst entfernt gegenüber Capital House: alle Zählnummern
   in Menü und Kacheln.
   ============================================================= */

/* =============================================================
   Koordinaten-Leiste
   ============================================================= */

.route {
  position: fixed;
  z-index: 90;
  left: clamp(0.7rem, 1.6vw, 1.5rem);
  top: 22vh;
  bottom: 22vh;
  width: 1px;
  pointer-events: none;
}
.route__linie { position: absolute; inset: 0; background: rgba(140, 145, 152, 0.35); }
.route__linie i {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: var(--fuellung, 0%);
  display: block;
  background: linear-gradient(180deg, var(--nebel), var(--zinnober));
}
.route__marke {
  position: absolute;
  left: -3.5px;
  top: var(--marke, 0%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--zinnober);
  transform: translateY(-50%);
}
.route__wert {
  position: absolute;
  /* Senkrecht links der Linie — waagerecht ragte das Label auf
     hellen Sektionen in Kacheln und Kartentexte hinein. */
  right: calc(100% + 0.4rem);
  top: var(--marke, 0%);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  white-space: nowrap;
  color: var(--nebel);
}

@media (max-width: 1100px) { .route { display: none; } }

/* =============================================================
   Zinnober-Disziplin (Redesign 19.08.): Rot ist ein Ereignis,
   kein Gewürz. Eyebrows und Kicker sind entfärbt — Rot gehört
   den Instrumenten (Route, Grid-Akzent, Naht, em-Linien,
   Fokusmarken, Hover) und der Hero-Maskenphase.
   ============================================================= */

.eyebrow { color: var(--nebel); }
.auf-papier .eyebrow,
.eyebrow--dunkel { color: var(--nebel-tief); }
.zeilen__kicker { color: var(--nebel-tief); }
.menue__fuss .technisch--akzent { color: var(--nebel); }
.einwilligung em { color: var(--nebel); }

/* =============================================================
   Kopfzeile — Redesign 19.08.: auf allen Breiten reduziert
   (IA CAPITAL · HK/香港·HKT · Sprache · MENU +). Geometrie der
   Leiste (top, Breite, max-width 1530px, Höhe, Padding) liegt
   identisch in chrome.css; die Spaltenaufteilung in basis.css.
   ============================================================= */

/* Der HK-Chip: Ortsmarke und Hongkonger Ortszeit in einem —
   die technische Ebene der Kopfzeile. */
.kopf__koord {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.6rem;
  border-radius: var(--radius);
  transition: color 250ms ease;
}
.kopf__koord:hover,
.kopf__koord:focus-visible { color: var(--papier); }
.kopf__hkt { white-space: pre; color: inherit; }
/* Unter 900px entfällt der Chip. Die Regel steht hier (nach der
   display-Definition oben), weil basis.css' gleichlautende Media-
   Regel in der Kaskade sonst verliert — Media-Blöcke erhöhen die
   Spezifität nicht, es zählt die Reihenfolge. */
@media (max-width: 900px) {
  .kopf__koord { display: none; }
}

/* Sprachumschalter — exakt die Werte des Referenz-Switchers:
   44×44px-Ziele, inaktiv 0.58, aktiv mit currentColor-Rahmen. */
.kopf__sprache {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.kopf__sprache a {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.45rem;
  opacity: 0.58;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.kopf__sprache a:hover,
.kopf__sprache a:focus-visible,
.kopf__sprache a[aria-current="page"] { opacity: 1; }
.kopf__sprache a[aria-current="page"] { border-color: currentColor; }
.kopf__sprache a[aria-disabled="true"] { cursor: default; }
/* 中文 nicht sperren/versalisieren — CJK braucht seinen eigenen
   Satz (Klasse .hk bringt den Systemstapel mit). */
.kopf__sprache a .hk,
.menue__sprache a .hk { letter-spacing: 0.04em; text-transform: none; }

/* Der Wort-Menüschalter: die spezifischeren Strich-Regeln der
   Chrome-Basis (.menue-schalter span:nth-child) schoben „Menu"
   per translate aus der Mitte — hier mit gleicher Spezifität
   zurückgesetzt. */
.menue-schalter--wort span.menue-schalter__wort,
.menue-schalter--wort span.menue-schalter__kreuz {
  position: static;
  width: auto;
  height: auto;
  background: none;
  transform: none;
}
.menue-schalter--wort span.menue-schalter__wort { line-height: 1; }
.menue-schalter--wort span.menue-schalter__kreuz {
  position: relative;
  /* left/top der Chrome-Basis neutralisieren — bei relative
     würden 50 %/50 % das Kreuz aus dem Button schieben. */
  left: auto;
  top: auto;
  width: 0.7rem;
  height: 0.7rem;
}

/* Sprachumschalter im Vollbildmenü — mobil gibt es sonst keinen. */
.menue__sprache {
  display: flex;
  gap: 1.2rem;
  margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
  font-size: var(--text-ui);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.menue__sprache a { color: var(--nebel); transition: color 250ms ease; }
.menue__sprache a:hover,
.menue__sprache a[aria-current="page"] { color: var(--papier); }
.menue__sprache a[aria-disabled="true"] { cursor: default; }

/* Der Menü-Schalter ist auf ALLEN Breiten sichtbar (das
   Vollbildmenü ist das einzige Menü) — hebt chrome.css'
   display:none der Basis auf. */
.menue-schalter--wort { display: flex; }

/* Schmale Viewports: der Sprach-Direktzugang weicht ins Menü
   (dort steht er ohnehin), der HK-Chip entfällt ab 900px
   (Regel in basis.css) — es bleiben Marke und MENU +. */
@media (max-width: 700px) {
  .kopf__sprache { display: none; }
}

/* =============================================================
   EUROPE ↔ ASIA — KONVERGENZ (Redesign 19.08.)
   -------------------------------------------------------------
   Der Zwei-Hälften-Namensmoment: INTERALPEN und CAPITAL fahren
   angeschnitten aufeinander zu, die Naht kollabiert in den
   Hongkong-Punkt, der Name rastet ein. Die Kugel liegt als
   Nacht-Instrument dahinter. Ein rotes Element: die Naht.
   ============================================================= */

.bruecke { position: relative; }
.konvergenz { position: relative; }
html.js .konvergenz:not(.is-ruhig) { height: calc(3 * var(--strecke)); }
html.js .konvergenz:not(.is-ruhig) .konvergenz__pin {
  position: sticky;
  top: 0;
}
.konvergenz__pin {
  position: relative;
  height: var(--buehne);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.konvergenz__kugel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(52vh, 82vw);
  height: min(52vh, 82vw);
}

.konvergenz__marke {
  position: absolute;
  top: clamp(5.5rem, 12vh, 8rem);
  color: var(--nebel);
  line-height: 1.7;
}
.konvergenz__marke--links {
  left: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
}
.konvergenz__marke--rechts {
  right: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  text-align: right;
}

/* Die Namenszeile: eine Zeile, nowrap — die Größe ist so
   gewählt, dass INTERALPEN CAPITAL nach dem Einrasten knapp in
   die Breite passt; während der Fahrt schieben die Transforms
   die Hälften in den Anschnitt. */
.konvergenz__zeile {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.32em;
  white-space: nowrap;
  font-size: clamp(2.6rem, 8vw, 10.2rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 0.92;
  color: var(--papier);
}
.konvergenz__wort { display: block; will-change: transform; }

/* Die Naht: das eine rote Element der Sektion — sie kollabiert
   beim Zusammenstoß in den Hongkong-Punkt. */
.konvergenz__naht {
  display: block;
  width: 3px;
  height: 0.92em;
  background: var(--zinnober);
  transform-origin: center;
  will-change: transform, opacity;
}

.konvergenz__fuss {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(2rem, 6vh, 4rem);
  color: var(--nebel);
  opacity: 0;
}

/* Ruhige Fassung: der Name steht komplett, die Kugel auf
   Ankunft, die Fußzeile sichtbar. */
html:not(.js) .konvergenz,
.konvergenz.is-ruhig { height: auto; }
html:not(.js) .konvergenz__pin,
.konvergenz.is-ruhig .konvergenz__pin {
  position: relative;
  height: auto;
  min-height: 72vh;
  padding-block: var(--sektion);
}
html:not(.js) .konvergenz__wort,
.konvergenz.is-ruhig .konvergenz__wort { transform: none !important; }
html:not(.js) .konvergenz__naht,
.konvergenz.is-ruhig .konvergenz__naht { transform: scale(0.4); opacity: 0.85; }
html:not(.js) .konvergenz__fuss,
.konvergenz.is-ruhig .konvergenz__fuss { opacity: 1; }

@media (max-width: 900px) {
  /* Vertikale Konvergenz: die Hälften stapeln, die Naht liegt
     waagerecht zwischen ihnen, die Kugel darunter. */
  .konvergenz__zeile {
    flex-direction: column;
    gap: 0.4em;
    font-size: clamp(2.6rem, 13.5vw, 5rem);
  }
  .konvergenz__naht { width: 0.92em; height: 3px; }
  .konvergenz__kugel {
    top: auto;
    bottom: clamp(4.5rem, 12vh, 8rem);
    transform: translate(-50%, 0);
    width: min(34vh, 74vw);
    height: min(34vh, 74vw);
  }
  /* Beide Ortsmarken bleiben mobil oben in den Ecken — unten
     kollidierten sie mit CAPITAL und der Kugel. */
  .konvergenz__marke { top: clamp(4.5rem, 9vh, 6rem); }
}

/* =============================================================
   THE HOUSE — das erste Monument (Redesign 19.08.)
   -------------------------------------------------------------
   THE HOUSE steht angeschnitten auf den Vermessungslinien des
   horizont-Zustands; das Statement tritt eine Stufe zurück. Die
   Zinnober-em-Linie wächst exakt auf Glyphenbreite des
   Schlüsselworts — das einzige Rot der Sektion.
   ============================================================= */

.haus { overflow: clip; }

.haus__vermessung {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(16rem, 44vh, 27rem);
  pointer-events: none;
}
.haus__vermessung canvas { width: 100%; height: 100%; }
@media (max-width: 760px) { .haus__vermessung { display: none; } }

.haus__inner { position: relative; }
.haus__kopfgruppe {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.7rem);
  justify-items: start;
  text-align: left;
  width: 100%;
}

/* Voller Anschnitt: der Streifen läuft über die ganze
   Viewportbreite, das Monument beginnt außerhalb der Kante. */
.haus__anschnitt {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  overflow: clip;
}
.haus__monument {
  color: var(--carbon);
  margin-left: -1.5vw;
  padding-block: 0.04em;
  will-change: transform;
}

.haus .haus__satz {
  font-size: clamp(1.7rem, 3vw, 3.4rem);
  max-width: 26ch;
  text-wrap: balance;
}
.haus__satz em {
  position: relative;
  font-style: normal;
  color: inherit;
}
.haus__satz em::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.14em;
  height: 2px;
  background: var(--zinnober-dunkel);
  transform: scaleX(var(--linie, 0));
  transform-origin: left center;
  transition: transform 1.2s var(--ease);
}
.haus__satz em.is-da::after { transform: scaleX(1); }
html:not(.js) .haus__satz em::after { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .haus__satz em::after { transform: none; }
  .haus__monument { transform: none !important; }
}

/* =============================================================
   Mosaik: Bildkachel statt Diagramm
   ============================================================= */

.kachel--bild { position: relative; padding: 0; overflow: hidden; background: var(--carbon); border-color: var(--carbon); }
.kachel--bild img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1100ms var(--ease);
}
.kachel--bild:hover img { transform: scale(1.07); }
.kachel--bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,9,11,0) 46%, rgba(8,9,11,0.62) 100%);
}
.kachel--bild .kachel__bild-text { z-index: 1; color: var(--papier); }

/* =============================================================
   Die Gateway-Montage wurde auf Baris' Wunsch komplett
   entfernt (18.08.) — Sektion, Styles und Video-Scrub.
   ============================================================= */

/* =============================================================
   ENQUIRY — Anmutung des bestehenden InterAlpen-Formulars
   ============================================================= */

.kontakt__titel em {
  font-style: italic;
  color: var(--zinnober-text);
}

.anfrage__intro { gap: 0; }
.anfrage__titel {
  font-size: clamp(1.94rem, 3.49vw, 3.88rem);
  font-weight: var(--display-weight);
  line-height: 1.02;
  letter-spacing: var(--display-tracking);
  max-width: 13ch;
  margin-top: var(--eyebrow-gap);
}
.anfrage__copy {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(242, 239, 233, 0.66);
  max-width: 38ch;
}
.anfrage__adresse {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  padding-top: clamp(1rem, 1.6vw, 1.4rem);
  border-top: 1px solid var(--linie);
  font-style: normal;
  line-height: 1.9;
}
.anfrage__adresse a { border-bottom: 1px solid var(--linie-stark); }
.anfrage__adresse a:hover { border-color: var(--zinnober); }

/* Anliegen-Auswahl — Pfeil aus zwei Gradient-Dreiecken,
   wie im Bestandsformular. */
.feld select {
  width: 100%;
  min-height: 3.35rem;
  padding: 0.8rem 1.6rem 0.8rem 0;
  border: 0;
  border-bottom: 1px solid rgba(242, 239, 233, 0.34);
  border-radius: 0;
  background: transparent;
  color: var(--papier);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--papier-tief) 50%),
    linear-gradient(135deg, var(--papier-tief) 50%, transparent 50%);
  background-position:
    calc(100% - 0.85rem) 50%,
    calc(100% - 0.5rem) 50%;
  background-size: 0.38rem 0.38rem;
  background-repeat: no-repeat;
  transition: border-color 220ms ease, background-color 220ms ease;
}
.feld select:focus {
  outline: 0;
  border-bottom-color: var(--zinnober);
  background-color: rgba(242, 239, 233, 0.035);
}
.feld select:invalid { color: rgba(242, 239, 233, 0.5); }
.feld select option { color: var(--carbon); background: var(--papier); }

/* Der Absendeknopf mit invertierter Pfeilkachel — das
   Signaturmuster der bestehenden InterAlpen-Buttons. */
.knopf-kachel {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.35rem, 2.5vw, 2.5rem);
  min-height: clamp(3rem, 4vw, 3.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;
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--carbon);
  font-size: var(--text-ui);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 320ms var(--ease), background 320ms var(--ease);
}
.knopf-kachel i {
  display: grid;
  place-items: center;
  width: clamp(2.55rem, 3.2vw, 2.8rem);
  height: clamp(2.55rem, 3.2vw, 2.8rem);
  border-radius: var(--radius);
  background: var(--carbon);
  color: var(--papier);
}
.knopf-kachel svg { width: 1.1rem; height: 1.1rem; transition: transform 320ms var(--ease); }
.knopf-kachel:hover { transform: translateY(-2px); background: #fff; }
.knopf-kachel:hover svg { transform: translateX(3px); }

@media (max-width: 620px) {
  .anfrage__absenden .knopf-kachel { width: 100%; }
}

/* =============================================================
   Hero-Maske — drei chinesische Begriffe statt „Capital"
   ============================================================= */

.hero__maske .hero__zeichen {
  /* Hongkong schreibt Langzeichen: TC-Stapel vor dem SC-Stapel.
     Kein letter-spacing: Chrome wendet es im Maskenklon des <use>
     nicht an, und rote Ebene und Ausstanzung lägen versetzt. */
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
               var(--schrift-cjk);
  font-weight: 600;
  letter-spacing: 0;
}
#maskenwort .hero__zeichen { fill: #000; }
.hero__rotwort .hero__zeichen { fill: #C22A14; }
.hero__begriffe text {
  fill: #C22A14;
  font-family: var(--schrift);
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* CAPITAL-Portal (EN-Fassung, Redesign 19.08.): das Wort in
   Inter 550 OHNE Sperrung — Canvas-Stanze und rote SVG-Ebene
   müssen glyphengenau übereinanderliegen, und letter-spacing
   rechnet in SVG und Canvas unterschiedlich. Darüber INTERALPEN
   klein mit weiter technischer Sperrung, nur auf der roten
   Ebene: der Name vollendet sich zu INTERALPEN CAPITAL. */
.hero__portal-wort {
  font-family: var(--schrift);
  /* 500, nicht 550: die Canvas-Stanze rendert Zwischengewichte
     der Variable-Font je Engine unterschiedlich — bei 300px
     Wortgröße läge die rote Ebene sonst sichtbar neben der
     Ausstanzung. 500 ist ohnehin das Display-Gewicht der DNA. */
  font-weight: 500;
  letter-spacing: 0;
  fill: #C22A14;
}
.hero__portal-vor {
  font-family: var(--schrift);
  font-weight: 500;
  letter-spacing: 0.34em;
  fill: rgba(242, 239, 233, 0.92);
}

/* =============================================================
   Hero-Außenabstände — an die Containerkante des Referenzthemes
   gebunden: auf Viewports über 1600px rückt der Inhalt nicht
   weiter an den Rand, sondern bleibt auf der Rasterkante.
   ============================================================= */

.hero__typo,
.hero__leiste { left: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); }
.hero__hk,
.hero__hinweis { right: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); }

/* Vollbildmenü folgt derselben Containerformel wie .raster. */
.menue__inner { max-width: var(--breite); }

/* Auf schmalen Viewports muss auch „Internationalization" in
   eine Zeile passen — die Basisgröße schnitt das Wort an. */
@media (max-width: 700px) {
  .menue--vollbild .menue__liste a { font-size: clamp(1.8rem, 7.5vw, 8.5rem); }
}

/* =============================================================
   Hero-Tagline — die echte Positionierung in einer Zeile
   ============================================================= */

.hero__tagline {
  margin-top: clamp(0.8rem, 1.8vh, 1.4rem);
  font-size: clamp(0.9rem, 1.15vw, 1.15rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--nebel);
  max-width: 34ch;
  will-change: opacity, transform;
}
/* „Nur INTERALPEN": Tagline und Zeichenzeile erscheinen erst mit
   den Koordinaten (scrollgetrieben, final/script.js) — nicht als
   Ladeanimation. Ruhige Fassung: alles steht. */
html.js .hero__tagline,
html.js .hero__zeichenzeile { opacity: 0; }
.hero.is-statisch .hero__tagline,
.hero.is-statisch .hero__zeichenzeile { opacity: 1 !important; transform: none !important; }

.hero__zeichenzeile {
  margin-top: clamp(0.3rem, 0.8vh, 0.6rem);
  color: var(--nebel);
}

/* =============================================================
   FROM EUROPE TO ASIA — gespiegeltes Gateway-Muster:
   breite Text-Karte, darunter drei Bild-Cards, die auf der
   Karte liegen (Umkehrung der Hongkong-Sektion).
   ============================================================= */

/* Das Manifest (Redesign 19.08.): Ruhepol nach der Konvergenz —
   carbon-hoch-Fläche mit Systemkante, die drei Absätze als
   Logbuch: über jeder Spalte zeichnet sich eine Haarlinie
   zeilenweise auf (85-ms-Staffel der Familie). */
.nachsatz { padding-block: clamp(4.5rem, 8vw, 8rem); }

.ea-buehne {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--linie);
  background: var(--carbon-hoch);
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.3);
}
.ea-buehne__kopf {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  justify-items: center;
  text-align: center;
}
.ea-buehne__kopf .sektion-titel { max-width: 22ch; margin-inline: auto; }
.ea-buehne__kopf .lead { max-width: 48ch; margin-inline: auto; }
.ea-buehne__texte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.ea-buehne__texte p {
  position: relative;
  padding-top: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--nebel);
  font-size: 0.94rem;
  line-height: 1.62;
}
.ea-buehne__texte p::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--linie-stark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
}
.ea-buehne.is-da .ea-buehne__texte p::before { transform: scaleX(1); }
.ea-buehne.is-da .ea-buehne__texte p:nth-child(2)::before { transition-delay: 85ms; }
.ea-buehne.is-da .ea-buehne__texte p:nth-child(3)::before { transition-delay: 170ms; }
html:not(.js) .ea-buehne__texte p::before { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ea-buehne__texte p::before { transform: none; }
}

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

/* =============================================================
   OUR APPROACH — die Strategie-Bühne (Sektion 3)
   -------------------------------------------------------------
   Titel und Lead stehen exakt in der Viewport-Mitte; fünf
   gleich große Bild-Cards (ohne Umrandung) kreisen darum,
   von Beginn an sichtbar und unscharf, mit dem Scroll werden
   sie scharf und schweben leicht (Parallax-Drift). Danach
   verschwimmt alles, während die Implementation-Card unter dem
   Titel auf volle Breite wächst und zum gebauten Ergebnis wird.
   Die Bewegung schreibt final/script.js; hier stehen nur
   Geometrie, Zustände und die ruhigen Fassungen.
   ============================================================= */

.ansatz { padding-block: 0; }
html.js .ansatz:not(.is-ruhig) { height: calc(3.6 * var(--strecke)); }

/* Übergang von Sektion 2: die Bühne schiebt sich über den leeren
   Auslauf von „The House" — gleiche Papierfläche, unsichtbare
   Naht, deutlich weniger Weißraum zwischen den Sektionen.
   Wie weit, misst final/script.js am echten Inhalt (fester
   Wert schnitt auf manchen Größen die letzte Textzeile ab).
   z-index über dem Portal-z der Haus-Sektion (10). */
html.js .ansatz:not(.is-ruhig) {
  position: relative;
  z-index: 11;
}

.strategie__pin {
  position: sticky;
  top: 0;
  height: var(--buehne);
  overflow: hidden;
}

/* Der zentrierte Titelblock — horizontal und vertikal mittig. */
.strategie__mitte {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: clamp(1.1rem, 2vw, 1.7rem);
  padding-inline: var(--rand);
  pointer-events: none;
  will-change: opacity, filter;
}
.strategie__mitte .sektion-titel {
  max-width: 16ch;
  margin-inline: auto;
  text-wrap: balance;
}
.strategie__mitte .lead { max-width: 46ch; margin-inline: auto; }

/* Umbau 19.08.: Der Titel erscheint erst, wenn die Implementation-
   Card die Bühne gefüllt hat — dann zentriert IM Bild, Papierweiß
   auf dunkler Fläche, ÜBER der Card (deren z-index ist 7). Die
   ruhige Fassung und No-JS zeigen ihn normal dunkel auf Papier. */
html.js .ansatz:not(.is-ruhig) .strategie__mitte {
  opacity: 0;
  z-index: 8;
  color: var(--papier);
}
html.js .ansatz:not(.is-ruhig) .strategie__mitte .lead {
  color: rgba(242, 239, 233, 0.78);
}

/* Buchstabenweises Scharfstellen des Titels beim Hineinscrollen.
   Wörter bleiben unteilbar, jeder Buchstabe trägt seinen eigenen
   Blur-Zustand (geschrieben von final/script.js). */
.strategie__wort { display: inline-block; white-space: nowrap; }
.strategie__buchstabe { display: inline-block; will-change: filter, opacity; }

.strategie__buehne {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Dunkle Körnung + Vignette über dem gefüllten Implementation-
   Bild (unter dem Titel, z 4 > 2 > 1). Deckkraft setzt das
   Skript, sobald das Bild die Bühne gefüllt hat. */
.strategie__korn {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(180deg,
      rgba(8, 9, 11, 0.34) 0%,
      rgba(8, 9, 11, 0) 28%,
      rgba(8, 9, 11, 0) 64%,
      rgba(8, 9, 11, 0.42) 100%),
    radial-gradient(ellipse 130% 96% at 50% 46%,
      rgba(8, 9, 11, 0) 36%,
      rgba(8, 9, 11, 0.5) 100%);
}
.strategie__korn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.65 0.65 0.65 0 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 240px;
  opacity: 0.5;
}

/* Alle fünf Cards gleich groß, querformatig, ohne Umrandung.
   Seit 19.08. eine Stufe größer (vorher 16vw/14.5rem). */
.skarte {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(19vw, 17rem);
  margin: 0;
  display: grid;
  gap: 0.7rem;
  will-change: transform, filter, opacity;
}

/* Der Anker unter dem Titel liegt über seinen Nachbarn. */
.skarte--mitte { z-index: 2; }

.skarte__bild {
  /* width explizit: sobald das Skript im Finale eine Höhe setzt,
     würde aspect-ratio die Breite sonst aus der Höhe ableiten
     und die Card bliebe schmaler als der Viewport. */
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--papier-tief);
  aspect-ratio: 4 / 3;
}
.skarte__bild img { width: 100%; height: 100%; object-fit: cover; }

.skarte__text { display: grid; gap: 0.35rem; }
.skarte__text .technisch { color: var(--nebel-tief); }
.skarte__satz {
  font-size: clamp(0.98rem, 1.15vw, 1.3rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--carbon);
}

/* Das Finale braucht keine eigene Ebene mehr: die Implementation-
   Card selbst wächst (final/script.js animiert ihre Breite, das
   Bild folgt über sein Seitenverhältnis — es wird wirklich nur
   die Card größer, nichts erscheint zusätzlich). */

@media (max-width: 900px) {
  html.js .ansatz:not(.is-ruhig) { height: calc(3.2 * var(--strecke)); }
  .skarte { width: min(38vw, 11.5rem); }
  /* Mobil tragen nur die Implementation-Card und der Titel Text —
     fünf Captions wären auf dieser Breite Rauschen. display:none
     statt visibility, damit die Bildmitten exakt auf den
     Soll-Positionen liegen (die Caption layoutet sonst mit).
     Die ruhige Fassung (Raster) zeigt weiterhin alle Texte. */
  html.js .ansatz:not(.is-ruhig) .skarte:not(.skarte--mitte) .skarte__text {
    display: none;
  }
}

/* Ruhige Fassung: statisches Raster, alles scharf und sichtbar. */
html:not(.js) .ansatz,
.ansatz.is-ruhig { height: auto; }
html:not(.js) .strategie__pin,
.ansatz.is-ruhig .strategie__pin { position: static; height: auto; overflow: visible; }
html:not(.js) .strategie__mitte,
.ansatz.is-ruhig .strategie__mitte {
  position: static;
  padding-top: var(--sektion);
  opacity: 1 !important;
  filter: none !important;
}
html:not(.js) .strategie__buehne,
.ansatz.is-ruhig .strategie__buehne {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--rand) var(--sektion);
}
html:not(.js) .skarte,
.ansatz.is-ruhig .skarte {
  position: static;
  width: auto;
  opacity: 1;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js .ansatz:not(.is-ruhig) { height: auto; }
  .strategie__pin { position: static; height: auto; overflow: visible; }
  .strategie__mitte { position: static; padding-top: var(--sektion); opacity: 1 !important; filter: none !important; }
  .strategie__buehne {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding: clamp(2rem, 4vw, 3.5rem) var(--rand) var(--sektion);
  }
  .skarte {
    position: static;
    width: auto;
    opacity: 1;
    transform: none !important;
    filter: none !important;
  }
}

/* =============================================================
   Leistungslisten in den Mosaikkacheln
   ============================================================= */

.kachel__liste { display: grid; gap: 0; margin-top: 0.4rem; }
.kachel__liste li {
  padding-block: 0.55rem;
  border-top: 1px solid var(--linie-hell);
  font-size: 0.92rem;
  color: var(--nebel-tief);
}
.kachel__liste li:first-child { border-top: 0; }

/* Der Profil-Satz des Grids unter dem Mosaik: die abstrakte
   Linienkomposition (keine Achsen, keine Zahlen) schließt die
   Sektion als Instrument ab. */
.haltung__profil {
  height: clamp(6rem, 16vh, 10rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  pointer-events: none;
}
.haltung__profil canvas { width: 100%; height: 100%; }
@media (max-width: 760px) { .haltung__profil { display: none; } }

/* =============================================================
   INTERNATIONALIZATION — fünf Beratungsfelder als Zeilen
   ============================================================= */

/* Nach dem Umzug des Intro-Textes rückt die Zeilenliste direkt
   unter den Vorspann; die Sektion nutzt ihre Rasterbreite
   großzügiger aus (breitere Beschreibungsspalte, längere Zeilen),
   bleibt aber innerhalb der globalen Außenabstände. */
.international .lead { max-width: 48ch; }

.zeilen { display: grid; margin-top: var(--kopf-gap); }
.zeilen__zeile {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 2.4vw, 2.2rem);
  border-top: 1px solid var(--linie-hell);
}
.zeilen__zeile:last-child { border-bottom: 1px solid var(--linie-hell); }
.zeilen__zeile .technisch { color: var(--nebel-tief); }
.zeilen__zeile h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  font-weight: var(--display-weight);
  line-height: 1.06;
  letter-spacing: var(--display-tracking);
}
.zeilen__zeile p { color: var(--nebel-tief); max-width: 56ch; }

/* --- Scroll-Showcase der fünf Beratungsfelder ----------------
   Die Texte links scrollen GANZ NORMAL mit der Seite; rechts
   klebt der Bildrahmen (sticky) und das nächste Bild kommt von
   unten nach oben zum Vorschein, sobald sein Text die Zone
   erreicht (Trigger in final/script.js). Kein Pin — Vorspann,
   Showcase und Zielsatz bleiben eine zusammenhängende Sektion. */

html.js #international:not(.is-ruhig) .intl {
  height: calc(3.4 * var(--strecke));
}
.intl__pin {
  position: sticky;
  top: 0;
  height: var(--buehne);
  overflow: hidden;
}
.intl__inhalt {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: clamp(5rem, 9vh, 6.5rem);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}
#international .vorspann { margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem); }

.intl__buehne {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: stretch;
}

/* Die Fokuszone: die Schritte liegen übereinander und werden vom
   Skript vertikal durchgefahren — Höhe voll, Überstände werden
   beschnitten. */
.intl__texte {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: grid;
  align-content: center;
}
.intl__schritt {
  grid-area: 1 / 1;
  display: grid;
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
  opacity: 0;
  will-change: transform, filter, opacity;
}
/* Das Label trägt Rot nur im Fokus — das Echo des
   Leitsatz-Index-Vokabulars (Rot ist ein Ereignis). */
.intl__schritt .technisch { color: var(--nebel-tief); transition: color 300ms ease; }
.intl__schritt.is-fokus .technisch { color: var(--zinnober-dunkel); }
.intl__schritt h3 {
  font-size: clamp(1.9rem, 3vw, 3.2rem);
  font-weight: var(--display-weight);
  line-height: 1.04;
  letter-spacing: var(--display-tracking);
}
.intl__schritt p {
  color: var(--nebel-tief);
  max-width: 44ch;
  line-height: 1.62;
}

.intl__medien {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intl__geraet {
  display: grid;
  gap: clamp(0.5rem, 1vh, 0.8rem);
  max-width: 100%;
  justify-items: end;
}
/* Die Rahmenhöhe setzt final/script.js aus der echt gemessenen
   Bühne (min aus Bühnenhöhe und Spaltenbreite × 3/4) — er passt
   dadurch immer vollständig hinein, nie verzerrt. */
.intl__rahmen {
  position: relative;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--papier-tief);
}

/* Der Rahmen als Instrument: die Gradskala wächst am linken
   Rahmenrand mit dem Fortschritt, darunter tickt der echte
   Längengrad — die Expansion als Messung. */
.intl__skala {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--zinnober);
  transform: scaleY(var(--skala, 0));
  transform-origin: top center;
  z-index: 3;
}
.intl__grad { color: var(--nebel-tief); }
.intl__grad [data-intl-lon] { color: var(--zinnober-dunkel); }

/* Die Systemkante: eine Haarlinie mit weichem Schatten läuft
   auf der Reveal-Kante jedes Bildes mit. */
.intl__kante {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--zinnober);
  box-shadow: 0 1px 10px rgba(15, 17, 20, 0.35);
  opacity: 0;
  will-change: transform, opacity;
  z-index: 2;
}
.intl__bild {
  position: absolute;
  inset: 0;
}
.intl__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intl__bild:not(:first-child) {
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

@media (max-width: 900px) {
  html.js #international:not(.is-ruhig) .intl { height: calc(3 * var(--strecke)); }
  .intl__inhalt { padding-top: clamp(4.6rem, 9vh, 6rem); }
  .intl__buehne {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 3vh, 1.6rem);
  }
  .intl__medien { order: -1; height: auto; }
  .intl__rahmen {
    height: auto;
    width: min(100%, calc(38vh * 4 / 3));
    margin-inline: auto;
  }
  .intl__texte { min-height: 9rem; height: auto; }
}

/* Ruhige Fassung: kein Pin, Bühne aus, Vorspann bleibt stehen,
   die klassische Zeilenliste übernimmt. */
html:not(.js) .intl,
#international.is-ruhig .intl { height: auto; }
html:not(.js) .intl__pin,
#international.is-ruhig .intl__pin { position: static; height: auto; overflow: visible; }
html:not(.js) .intl__inhalt,
#international.is-ruhig .intl__inhalt { height: auto; padding-bottom: 0; }
html:not(.js) .intl__buehne,
#international.is-ruhig .intl__buehne { display: none; }
html.js #international:not(.is-ruhig) .zeilen { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.js #international:not(.is-ruhig) .intl { height: auto; }
  .intl__pin { position: static; height: auto; overflow: visible; }
  .intl__inhalt { height: auto; padding-bottom: 0; }
  .intl__buehne { display: none; }
  html.js #international:not(.is-ruhig) .zeilen { display: grid; }
}

/* Zielsatz und umgezogener Intro-Text als eine Inhaltsgruppe:
   durchgehend sichtbar, zentriert über die volle Breite —
   der Kicker führt, der Fließtext erklärt direkt darunter. */
.zeilen__ziel {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  max-width: none;
  width: 100%;
  justify-items: center;
  text-align: center;
}
.zeilen__ziel-text { max-width: 64ch; margin-inline: auto; }

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

/* =============================================================
   Die Wortspur-Sektion „The Work" wurde auf Baris' Wunsch
   komplett entfernt (18.08.). Verblieben ist der verdichtete
   Anschluss der Internationalization-Sektion an das Mosaik und
   deren zentrierter Vorspann.
   ============================================================= */

#international.sektion-pad-gross {
  padding-top: clamp(3.5rem, 6vw, 6rem);
}

/* Vorspann der Internationalization-Sektion: Eyebrow, Titel und
   Lead UNTEREINANDER, zentriert ausgerichtet, volle Breite. */
#international .vorspann {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(1.2rem, 2.4vw, 2rem);
}
#international .vorspann__kopf { justify-items: center; }
/* Titel einzeilig, Lead zweizeilig (Desktop) — bewusst breiter
   gefasst als die 13ch/43ch-Standards. */
#international .vorspann .sektion-titel { max-width: none; margin-inline: auto; }
#international .vorspann .lead { max-width: 74ch; margin-inline: auto; }

/* =============================================================
   HONG KONG — NIGHTFALL (Redesign 19.08.)
   -------------------------------------------------------------
   Der eine Licht-Umschlag der Seite: die gepinnte Bühne dunkelt
   die blaue Stunde ab, die Markenzeichnung übernimmt als
   Lichtquelle. Danach die Nachthälfte auf Carbon — Fotografie
   nur noch in gezeichneten Fensteröffnungen.
   ============================================================= */

.hongkong { background: var(--papier); }

.nightfall { position: relative; }
html.js .nightfall:not(.is-ruhig) { height: calc(2.8 * var(--strecke)); }
html.js .nightfall:not(.is-ruhig) .nightfall__pin {
  position: sticky;
  top: 0;
}
.nightfall__pin {
  position: relative;
  height: var(--buehne);
  overflow: hidden;
  background: var(--papier);
  isolation: isolate;
}
.nightfall__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Die Carbondecke: das Verlöschen des Tages. Endwert 0.92 —
   das Restglimmen des Wassers ist Abnahme-Kriterium. */
.nightfall__decke {
  position: absolute;
  inset: 0;
  background: var(--carbon-tief);
  opacity: 0;
}
.nightfall__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.nightfall__typo {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  justify-items: center;
  text-align: center;
  padding: clamp(6rem, 16vh, 9rem) var(--rand) 0;
  color: var(--papier);
  text-shadow: 0 1px 24px rgba(8, 9, 11, 0.35);
}
.nightfall__typo .eyebrow { color: var(--papier); opacity: 0.8; }
.nightfall__typo .sektion-titel { max-width: 14ch; margin-inline: auto; }
.nightfall__typo .lead {
  color: rgba(242, 239, 233, 0.85);
  max-width: 48ch;
  margin-inline: auto;
}
/* Das Labelkreuz: PRECISION BY DAY → ENERGY BY NIGHT. */
.nightfall__label {
  position: absolute;
  z-index: 2;
  left: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  bottom: clamp(1.5rem, 4vh, 3rem);
  display: flex;
  gap: 0.9em;
  color: var(--papier);
}
.nightfall__label [data-label-nacht] { opacity: 0.25; }
.nightfall__pfeil { opacity: 0.5; }

/* Ruhige Fassung: statisch zweigeteilt, Label steht auf
   Day → Night, die Decke liegt halb — vollständig lesbar. */
html:not(.js) .nightfall,
.nightfall.is-ruhig { height: auto; }
html:not(.js) .nightfall__pin,
.nightfall.is-ruhig .nightfall__pin { position: relative; height: auto; min-height: 60vh; }
html:not(.js) .nightfall__decke,
.nightfall.is-ruhig .nightfall__decke { opacity: 0.45; }
html:not(.js) .nightfall__typo,
.nightfall.is-ruhig .nightfall__typo { padding-bottom: clamp(8rem, 18vh, 11rem); }

/* --- Die Nachthälfte: Grid-Fenster ------------------------- */

.hk-nacht {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem) var(--sektion);
  /* Die Kante zum Bühnenende: eine Haarlinie mit weichem
     Schatten — das eine Übergangs-Vokabular. */
  border-top: 1px solid var(--linie);
  box-shadow: inset 0 1.2rem 2.4rem rgba(0, 0, 0, 0.28);
}

.fenster-reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.fenster {
  display: grid;
  gap: clamp(0.8rem, 1.3vw, 1.1rem);
  align-content: start;
}
/* Die gezeichnete Öffnung: Haarlinien-Rahmen mit Eckmarken —
   das Fenster des Grids, nicht eine Karte. */
.fenster__rahmen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--linie-stark);
  background: var(--carbon-hoch);
}
.fenster__rahmen::before,
.fenster__rahmen::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 0.85rem;
  height: 0.85rem;
  border: 0 solid var(--papier);
}
.fenster__rahmen::before {
  left: -1px; top: -1px;
  border-left-width: 2px;
  border-top-width: 2px;
}
.fenster__rahmen::after {
  right: -1px; bottom: -1px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}
.fenster__rahmen img,
.fenster__rahmen canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fenster__rahmen--zeichnung { background: var(--carbon); }
.fenster__mark { color: var(--nebel); }
.fenster__text {
  color: var(--nebel);
  font-size: 0.94rem;
  line-height: 1.62;
  max-width: 40ch;
}

/* Die Leistungsliste — Haarlinien auf Carbon, zentriert. */
.hk-leistung {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.5rem, 2.4vw, 2.4rem);
  border-top: 1px solid var(--linie);
  justify-items: center;
  text-align: center;
}
.hk-leistung > .technisch { color: var(--nebel); }
.hk-leistung .hk-liste { width: 100%; }
.hk-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4.5rem);
}
.hk-liste li {
  padding-block: clamp(0.75rem, 1.2vw, 1rem);
  border-top: 1px solid var(--linie);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--papier);
  text-align: center;
}
.hk-liste li:first-child,
.hk-liste li:nth-child(2) { border-top: 0; }
.hk-liste li:last-child,
.hk-liste li:nth-last-child(2) { border-bottom: 1px solid var(--linie); }

@media (max-width: 900px) {
  .fenster-reihe { grid-template-columns: 1fr; }
  .fenster__text { max-width: none; }
  .hk-liste { grid-template-columns: 1fr; }
  .hk-liste li:nth-child(2) { border-top: 1px solid var(--linie); }
  .hk-liste li:nth-last-child(2) { border-bottom: 0; }
  .hk-liste li:last-child { border-bottom: 1px solid var(--linie); }
}

/* =============================================================
   HERO — der Hafenfilm als Bühnengrund
   -------------------------------------------------------------
   Eine Frame-Sequenz (Yacht → Victoria Harbour), gezeichnet auf
   Canvas und über die volle Hero-Strecke gescrubbt. Die Sektion
   BEGINNT mit dem Startframe — die Materialtextur entfällt im
   JS-Pfad (auf Baris' Wunsch, 19.08.); ohne JavaScript bleibt
   sie als Rückfall stehen.
   ============================================================= */

.hero__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
html.js .hero__material { display: none; }

/* Der fast schwarze Einstieg (Briefing §4): der Film ist beim
   Laden unsichtbar — nur INTERALPEN steht im Dunkel — und blendet
   erst mit dem ersten Scroll auf (Fenster in final/script.js).
   Die ruhige Fassung zeigt das stehende Startbild sofort. */
html.js .hero__film { opacity: 0; }
.hero.is-statisch .hero__film { opacity: 1 !important; }

/* Die Koordinaten-Linien liegen ÜBER dem Film — die Grid-Animation
   bleibt damit sichtbar (vorher lag der opake Film darüber). */
html.js .hero__grid { z-index: 2; }

/* Die Carbondecke mit den ausgestanzten Zeichen als Canvas —
   Ebene 2, unter der roten SVG-Zeichenebene (gleiches z, spätere
   DOM-Ordnung). Deckkraft steuert das Skript. */
.hero__deckung {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

/* Dunkle Körnung als Vignette: abgedunkelte Ränder oben/unten plus
   radialer Verlauf, darüber das Korn — beruhigt den roten Himmel
   und trägt Wortmarke, Tagline und die technische Ebene. */
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8, 9, 11, 0.34) 0%,
      rgba(8, 9, 11, 0) 26%,
      rgba(8, 9, 11, 0) 66%,
      rgba(8, 9, 11, 0.44) 100%),
    radial-gradient(ellipse 130% 96% at 50% 44%,
      rgba(8, 9, 11, 0) 38%,
      rgba(8, 9, 11, 0.55) 100%);
}
.hero__schleier::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Echtes, nahtloses Filmkorn als dunkles SVG-Rauschen — das
     korn.webp kachelte auf dem hellen Rot sichtbar. feTurbulence
     mit stitchTiles wiederholt sich fugenlos; die Körner sind
     schwarz mit Luminanz-Alpha und dunkeln damit zugleich ab. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.65 0.65 0.65 0 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 240px;
  opacity: 0.5;
}

/* =============================================================
   WHY INTERALPEN CAPITAL — der Auftakt des Schlussakts
   ============================================================= */

/* Der Kopf steht zentriert — gleiches Muster wie der
   Internationalization-Vorspann. Der Dreisatz-Titel braucht
   Breite: bei 13ch bricht er auf fünf Zeilen — die Regel aus
   den Design-Skills ist ausdrücklich „Container weiten, nicht
   Schrift verkleinern". */
.warum .vorspann {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.warum .vorspann__kopf { justify-items: center; }
/* Der Titel steigt zurück auf die volle Sektionsgröße — die
   Verkleinerung des Bestands ist zurückgenommen (Briefing:
   extreme Größenunterschiede, nicht kleiner werden). */
.warum .sektion-titel {
  max-width: 22ch;
  margin-inline: auto;
}

/* Der Leitsatz-Index: die fünf Werte als Verzeichnis des
   Kapitels, durch Haarlinien getrennt — alle sichtbar, keine
   Interaktion. --fokus (0→1) setzt das Skript aus der Nähe der
   Zeile zur Viewport-Mitte: die fokussierte Zeile trägt die
   Zinnober-Marke, vollen Kontrast und ihren Text, die übrigen
   treten zurück. Standardwert 1: ohne JavaScript und bei
   reduzierter Bewegung ist alles voll sichtbar. */
.warum-index {
  display: grid;
  margin-top: var(--kopf-gap);
}
.warum-index__zeile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(1.7rem, 3.2vw, 2.9rem);
  padding-inline: clamp(0.6rem, 1.2vw, 1.2rem);
  border-top: 1px solid var(--linie);
}
.warum-index__zeile:last-child { border-bottom: 1px solid var(--linie); }
/* Die fokussierte Zeile hebt sich leise über carbon-hoch — der
   Lichtkegel des Index (nur Opacity, kein Blur). */
.warum-index__zeile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--carbon-hoch);
  opacity: calc(var(--fokus, 0) * 0.55);
  pointer-events: none;
}

.warum-index__titel {
  position: relative;
  padding-left: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: var(--display-weight);
  font-size: clamp(1.9rem, 3.4vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  color: var(--papier);
  opacity: calc(0.38 + 0.62 * var(--fokus, 1));
}
/* Die Marke ist nachts ein Fensterlicht: ein kleines gefülltes
   Rechteck (Echo der Nightfall-Lichter) statt eines Strichs. */
.warum-index__titel::before {
  content: "";
  position: absolute;
  left: clamp(0.4rem, 0.9vw, 0.8rem);
  top: 0.22em;
  width: clamp(0.7rem, 1.2vw, 1rem);
  height: clamp(1rem, 1.7vw, 1.45rem);
  background: var(--zinnober);
  transform: scaleY(var(--fokus, 1));
  transform-origin: bottom center;
}
.warum-index__text {
  color: var(--nebel);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.65;
  max-width: 46ch;
  opacity: var(--fokus, 1);
}

@media (max-width: 900px) {
  .warum-index__zeile {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    align-items: start;
  }
  .warum-index__titel { font-size: clamp(1.7rem, 6.4vw, 2.4rem); padding-left: 2rem; }
  /* Mobil bleibt der Text immer angelesen — nur der Fokus hebt
     ihn ganz an. */
  .warum-index__text { opacity: calc(0.3 + 0.7 * var(--fokus, 1)); }
}

/* =============================================================
   OUR MISSION — das Statement
   ============================================================= */

/* Ohne Trennlinie zum Vorgänger — Warum und Mission lesen als
   ein durchgehendes Kapitel. */
.mission {
  padding-block: clamp(4rem, 8vw, 7rem);
}

/* Das Statement auf dem vollflächigen Nachtwasser (Redesign
   19.08.): volle Rasterbreite, deutlich höher, mit der leisen
   Zeichnungsebene der Zwei-Welten-Regel (Haarlinien-Rahmung +
   Signet-Zeile). Der Satz taucht aus der oberen Bildkante auf. */
.mission-karte {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(24rem, 68vh, 40rem);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--carbon-tief);
}
.mission__rahmen {
  position: absolute;
  inset: clamp(0.8rem, 1.6vw, 1.4rem);
  border: 1px solid var(--linie);
  pointer-events: none;
  z-index: 1;
}
.mission__mark {
  position: absolute;
  left: clamp(1.6rem, 3vw, 2.6rem);
  bottom: clamp(1.5rem, 2.8vw, 2.4rem);
  z-index: 2;
  color: var(--nebel);
}
.mission-karte__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mission-karte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(8, 9, 11, 0.5) 0%,
    rgba(8, 9, 11, 0.62) 60%,
    rgba(8, 9, 11, 0.78) 100%);
}
.mission-karte__typo {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
  padding: clamp(3rem, 6vw, 5rem) var(--rand);
}
.mission__satz {
  font-family: var(--schrift-serif);
  font-size: clamp(2.6rem, 6vw, 6.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  /* Breit gefasst: der Satz bricht in zwei Zeilen statt drei,
     die Absätze laufen breiter — die Card baut dadurch weniger
     Höhe auf. */
  max-width: 20ch;
  text-wrap: balance;
}
/* Das Akzentwort trägt keine Doppelmarkierung mehr: die Kursive
   der Serifenstimme bleibt, das Rot wandert in die em-Linie. */
.mission__satz { will-change: transform; }
.mission__satz em {
  position: relative;
  font-style: italic;
  color: inherit;
}
.mission__satz em::after {
  content: "";
  position: absolute;
  left: 0.04em; right: 0.1em;
  bottom: -0.1em;
  height: 2px;
  background: var(--zinnober);
  transform: scaleX(var(--linie, 0));
  transform-origin: left center;
  transition: transform 1.2s var(--ease) 0.25s;
}
.mission__satz em.is-da::after { transform: scaleX(1); }
html:not(.js) .mission__satz em::after { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mission__satz em::after { transform: none; }
  .mission__satz { transform: none !important; }
}
.mission__text { display: grid; gap: var(--absatz-gap); max-width: 68ch; }
.mission__text p { color: var(--nebel); line-height: 1.67; }

/* =============================================================
   PRINCIPALS — aus der Silhouette ins Licht (Redesign 19.08.)
   -------------------------------------------------------------
   Keine Border-Karten: große, leicht versetzte Materialflächen
   mit Haarlinien-Rahmen und technischer Beschriftung. Die
   Porträts treten als Fast-Silhouetten ein und werden mit dem
   Familien-Staffel-Reveal freigestellt; Hover zeigt die
   Originalfarben (Bestand).
   ============================================================= */

.team .person {
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.team .person__bild {
  border: 1px solid var(--linie-stark);
  aspect-ratio: 3 / 4;
}
.team .person__text { padding-inline: 0; }
.team .person__bild img {
  filter: grayscale(1) contrast(1.16) brightness(0.32);
  transition: filter 1.3s var(--ease), transform 900ms var(--ease);
}
.team .staffel.is-da .person__bild img {
  filter: grayscale(1) contrast(1.16) brightness(0.86);
}
.team .staffel.is-da .person:nth-child(2) .person__bild img { transition-delay: 85ms; }
.team .staffel.is-da .person:nth-child(3) .person__bild img { transition-delay: 170ms; }
.team .person:hover .person__bild img,
.team .person:focus-within .person__bild img {
  filter: none;
  transition-delay: 0ms;
}
html:not(.js) .team .person__bild img {
  filter: grayscale(1) contrast(1.16) brightness(0.86);
}
@media (prefers-reduced-motion: reduce) {
  .team .person__bild img { filter: grayscale(1) contrast(1.16) brightness(0.86); }
}
/* Der leichte Versatz der Mittelfläche — Materialflächen, kein
   Karten-Trio. */
@media (min-width: 801px) {
  .team .person:nth-child(2) { transform: translateY(clamp(2rem, 4vw, 3.5rem)); }
  .team .team__raster { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
}

/* =============================================================
   ENQUIRY — die letzte Koordinate (Redesign 19.08.)
   -------------------------------------------------------------
   Das Formular verliert den Kartenrahmen: Haarlinien auf
   Carbon. Der Bogen der Reise zeichnet sich flachgelegt bis zum
   Send-Knopf, dort füllt sich der Hongkong-Punkt.
   ============================================================= */

.anfrage {
  border: 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid var(--linie);
  padding: clamp(2.5rem, 4.5vw, 4.5rem) 0 0;
}

/* Der Knopf wandert nach rechts — die Ankunftslinie endet mit
   ihrem Punkt exakt über dem Send-Knopf. */
.anfrage__absenden { flex-direction: row-reverse; }
.anfrage__status { text-align: left; }

.kontakt__ankunft {
  position: relative;
  height: 3px;
  margin-top: clamp(0.6rem, 1.2vw, 1rem);
}
.kontakt__ankunft i {
  position: absolute;
  left: 0; right: 1rem; top: 1px;
  height: 1px;
  display: block;
  background: var(--zinnober);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease);
}
.kontakt__ankunft b {
  position: absolute;
  right: 0; top: -2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--zinnober);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s var(--ease) 1.25s, transform 0.5s var(--ease) 1.25s;
}
.kontakt__ankunft.is-da i { transform: scaleX(1); }
.kontakt__ankunft.is-da b { opacity: 1; transform: none; }
html:not(.js) .kontakt__ankunft i { transform: none; }
html:not(.js) .kontakt__ankunft b { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kontakt__ankunft i { transform: none; transition: none; }
  .kontakt__ankunft b { opacity: 1; transform: none; transition: none; }
}

/* Das Akzentwort im Titel ohne Doppelmarkierung: aufrecht (die
   Variable-Font führt keine echte Kursive), die em-Linie trägt
   das Rot. */
.kontakt__titel em {
  font-style: normal;
  color: inherit;
  position: relative;
}
.kontakt__titel em::after {
  content: "";
  position: absolute;
  left: 0.02em; right: 0.06em;
  bottom: -0.08em;
  height: 2px;
  background: var(--zinnober);
}

/* =============================================================
   Footer — Claim in der Familienstimme, Signet
   ============================================================= */

.fuss__claim {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--nebel);
  margin-bottom: 0.8rem;
  max-width: 30ch;
}
.fuss__marke .technisch { line-height: 1.7; }

.fuss__signet {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
  color: var(--nebel);
}
.fuss__signet svg { width: clamp(4.5rem, 6vw, 6rem); height: auto; }
.signet__bogen {
  stroke: var(--papier);
  stroke-width: 1.2;
  opacity: 0.75;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.signet__start { stroke: var(--papier); stroke-width: 1.2; opacity: 0.75; }
.signet__ziel {
  fill: var(--zinnober);
  opacity: 0;
  transition: opacity 0.4s var(--ease) 1.4s;
}
.fuss__signet.is-da .signet__bogen { stroke-dashoffset: 0; }
.fuss__signet.is-da .signet__ziel { opacity: 1; }
html:not(.js) .signet__bogen { stroke-dashoffset: 0; }
html:not(.js) .signet__ziel { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .signet__bogen { stroke-dashoffset: 0; transition: none; }
  .signet__ziel { opacity: 1; transition: none; }
}

/* =============================================================
   Formular-Zustände — Muster aus der HeroUI-Auswertung
   ============================================================= */

/* Tastaturfokus sichtbar über die Linienfärbung hinaus:
   ein weicher Unterglow, Mausklicks bleiben ruhig. */
.feld input:focus-visible,
.feld textarea:focus-visible,
.feld select:focus-visible {
  box-shadow: 0 2px 0 0 var(--zinnober);
}

/* Beim Fokus färbt das Kleinversalien-Label mit. */
.feld:focus-within > span { color: var(--papier); }

/* Fehlerzustand am Feld-Wrapper: färbt Label, Linie und
   Meldung in einem Selektor. Gesetzt von script.js. */
.feld[data-invalid] > span { color: var(--zinnober-text); }
.feld[data-invalid] input,
.feld[data-invalid] textarea,
.feld[data-invalid] select { border-bottom-color: var(--zinnober); }

/* Reservierte Meldungszeile — erscheint an fester Stelle,
   kein Layout-Sprung. */
.feld__meldung {
  min-height: 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--zinnober-text);
  opacity: 0;
  transition: opacity 200ms ease;
}
.feld[data-invalid] .feld__meldung,
.einwilligung[data-invalid] .feld__meldung { opacity: 1; }
.einwilligung[data-invalid] > span { color: var(--zinnober-text); }
.einwilligung .feld__meldung { grid-column: 1 / -1; }

/* Lange Adressen und E-Mail-Adressen dürfen brechen. */
.anfrage__adresse a, .fuss__kontakt a { overflow-wrap: anywhere; }

/* Gedrücktes Feedback am Absendeknopf. */
.knopf-kachel:active { transform: translateY(-1px) scale(0.97); }

/* =============================================================
   Die Cursor-Ebene (cursor.js) — nur feiner Zeiger, nie ohne
   JavaScript, nie bei reduzierter Bewegung.
   ============================================================= */

/* Buchstaben-Spans des Dynamic-Weight-Menüs: reine Dekoration,
   der Lesetext liegt daneben als .nur-vorlesen. */
.menue__wortlauf { display: inline-flex; white-space: pre; }
.menue__buchstabe { display: inline-block; }

/* Fadenkreuz-Echo der dunklen Bühnen: eine 1-px-Haarlinie folgt
   dem Zeiger mit Nachlauf — Vermessung, kein Cursor-Ersatz. */
.zeiger-kreuz {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.zeiger-kreuz i,
.zeiger-kreuz b {
  position: absolute;
  display: block;
  background: rgba(242, 239, 233, 0.13);
}
.zeiger-kreuz i { top: 0; bottom: 0; left: 0; width: 1px; }
.zeiger-kreuz b { left: 0; right: 0; top: 0; height: 1px; }