/* =============================================================
   InterAlpen Capital — gemeinsame Grundlage aller drei Varianten

   Die Marken-DNA von InterAlpen wird hier über STRUKTUR getragen,
   nicht über Farbe: Containerbreite, Seitenrand, Spacing-Idiom,
   Radius, Easing, Typo-Konstanten und Eyebrow-Sperrung sind mit
   InterAlpen Immobilien und InterAlpen Holding identisch.

   Neu und nur Capital: Farbwelt (Carbon/Papier/Zinnober) und die
   technische Kleintypografie.
   ============================================================= */

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

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Farbe ------------------------------------------------ */
  /* Carbon: „fast schwarz", nie #000. Neutral-kühl, damit es sich
     von der marineblauen Holding und der warmbraunen Immobilien
     unterscheidet, ohne aus der Familie zu fallen. */
  --carbon:       #0F1114;
  --carbon-tief:  #08090B;   /* tiefster Medienuntergrund */
  --carbon-hoch:  #16191D;   /* Karten, erhobene Flächen */
  --graphit:      #22262B;

  /* Warm Off-White. Erbt die Wärme von InterAlpen Immobilien
     (#f6f3ec) und ist damit der sichtbarste Familienfaden. */
  --papier:       #F2EFE9;
  --papier-tief:  #E7E2D9;

  --nebel:        #8C9198;   /* Sekundärtext auf Carbon   5,96:1 */
  --nebel-tief:   #64676B;   /* Sekundärtext auf Papier   4,95:1 */

  /* Der einzige Akzent. Signal Red / Vermilion, kein Gold. */
  --zinnober:        #E5361F;  /* Linien, Flächen, große Typo    */
  --zinnober-text:   #FF7A63;  /* kleiner Text auf Carbon 7,39:1 */
  --zinnober-dunkel: #C22A14;  /* kleiner Text auf Papier 5,03:1 */

  /* Haarlinien — dieselbe Logik wie in der Holding */
  --linie:            rgba(242, 239, 233, 0.14);
  --linie-stark:      rgba(242, 239, 233, 0.26);
  --linie-hell:       rgba(15, 17, 20, 0.14);
  --linie-hell-stark: rgba(15, 17, 20, 0.24);

  /* ---- Raum (identisch zu Immobilien und Holding) ----------- */
  --rand:    clamp(1rem, 3.2vw, 3.75rem);   /* 16 → 60 px */
  --breite:  1600px;
  --radius:  4px;

  --sektion:       clamp(5.5rem, 10vw, 11rem);
  --sektion-gross: clamp(6.5rem, 11vw, 10.5rem);
  --kopf-gap:      clamp(4rem, 8vw, 8rem);
  --spalten-gap:   clamp(2rem, 3.2vw, 4rem);
  --vorspann-gap:  clamp(2.5rem, 6vw, 7rem);
  --absatz-gap:    clamp(1.35rem, 2.2vw, 2rem);
  --eyebrow-gap:   clamp(1rem, 1.8vw, 1.6rem);

  /* ---- Typografie ------------------------------------------ */
  --schrift:       "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  /* Für 香港 bewusst der Systemstapel — es wird keine externe
     CJK-Schrift geladen. */
  --schrift-cjk:   "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
                   "Microsoft YaHei", "Source Han Sans SC", sans-serif;

  --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-lead:      clamp(1rem, 1.35vw, 1.28rem);
  --text-display:   clamp(2.42rem, 4.85vw, 5.8rem);
  --text-sektion:   clamp(2.65rem, 5.25vw, 6.15rem);
  --text-eyebrow:   clamp(0.68rem, 0.1vw + 0.66rem, 0.74rem);
  --text-ui:        clamp(0.69rem, 0.1vw + 0.67rem, 0.75rem);
  --text-small:     clamp(0.8rem, 0.16vw + 0.76rem, 0.9rem);

  /* Neu für Capital: die technische Ebene. Maxis „sehr kleine
     technische Typografie" — Koordinaten, IA—HK, EUROPE ↔ ASIA. */
  --text-technisch: clamp(0.58rem, 0.06vw + 0.56rem, 0.66rem);
  --sperr-technisch: 0.16em;
  --sperr-eyebrow:   0.18em;

  /* Redesign 19.08.: die monumentale Ebene. Maxis „extreme
     Größenunterschiede" — Monument trägt Sektionsworte, Koloss
     einzelne angeschnittene Worte (CAPITAL, Konvergenz-Hälften).
     Monumente dürfen den Viewport verlassen, Fließtext nie. */
  --text-monument: clamp(4.8rem, 12vw, 12rem);
  --text-koloss:   clamp(9rem, 22vw, 26rem);

  /* ---- Bewegung -------------------------------------------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-tief: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Hero: zwei getrennte Höhenquellen ------------------- */
  /* Hart erkaufte Lehre aus dem Holding-Projekt: die sichtbare
     Viewporthöhe darf nie eine Höhe im Dokumentfluss bestimmen,
     sonst springt Chrome beim Ein- und Ausfahren der Adressleiste. */
  --buehne:  100vh;   /* nur die geklebte Bühne  */
  --strecke: 100vh;   /* alles im Dokumentfluss  */
}

@supports (height: 100dvh) {
  :root { --buehne: 100dvh; }
}
@supports (height: 100lvh) {
  :root { --strecke: 100lvh; }
}

/* Mobile-Token des Referenzthemes v1.4.15 (@media max-width 800px):
   eigener Gutter und eigenes Sektions-Padding statt der
   Desktop-Formel. */
@media (max-width: 800px) {
  :root {
    --rand: clamp(1rem, 4.6vw, 1.25rem);
    --sektion: clamp(5.25rem, 18vw, 6.5rem);
    --sektion-gross: clamp(5.25rem, 18vw, 6.5rem);
  }
}

/* =============================================================
   Reset und Grundlagen
   ============================================================= */

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

html {
  /* Kein globales scroll-behavior: smooth. ScrollTrigger scrollt
     bei jedem Refresh intern auf 0 und zurück; zusammen mit
     smooth verschieben sich dabei die Trigger-Fenster. Interne
     Anker laufen stattdessen über JavaScript. */
  -webkit-text-size-adjust: 100%;
  overflow-anchor: none;     /* Chrome-Scrollverankerung aus */
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--carbon);
  color: var(--papier);
  font-family: var(--schrift);
  font-size: var(--text-body);
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

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

::selection { background: var(--zinnober); color: var(--papier); }

/* =============================================================
   Typografische Bausteine
   ============================================================= */

.display,
.sektion-titel {
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  hyphens: manual;                 /* nie ein Wort trennen */
  overflow-wrap: break-word;       /* nur als Notbremse */
}
.display       { font-size: var(--text-display); }
.sektion-titel { font-size: var(--text-sektion); max-width: 13ch; }

/* Die monumentale Stufe (Redesign 19.08.): bewusst OHNE die
   13ch-Kappe der Sektionstitel — Monumente werden über ihre
   Setzung beschnitten, nicht über den Container. Versalien,
   dieselbe Familienmetrik, engere Zeile. */
.monument {
  font-size: var(--text-monument);
  font-weight: var(--display-weight);
  line-height: 0.92;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.koloss {
  font-size: var(--text-koloss);
  font-weight: var(--display-weight);
  line-height: 0.86;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.eyebrow {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: var(--sperr-eyebrow);
  text-transform: uppercase;
  /* Redesign 19.08.: Eyebrows sind entfärbt — Rot ist ein
     Ereignis, kein Gewürz (Zinnober-Disziplin: pro Viewport ein
     rotes Elementsystem im Inhalt). Wo ein Eyebrow bewusst DAS
     rote Element der Sektion ist, trägt es .eyebrow--akzent. */
  color: var(--nebel);
}
.auf-papier .eyebrow,
.eyebrow--dunkel { color: var(--nebel-tief); }
.eyebrow--akzent { color: var(--zinnober-text); }
.auf-papier .eyebrow--akzent { color: var(--zinnober-dunkel); }

/* Die technische Ebene: Koordinaten, Kürzel, Richtungsangaben. */
.technisch {
  font-size: var(--text-technisch);
  font-weight: 500;
  letter-spacing: var(--sperr-technisch);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--nebel);
}
.auf-papier .technisch { color: var(--nebel-tief); }
.technisch--akzent { color: var(--zinnober-text); }
.auf-papier .technisch--akzent { color: var(--zinnober-dunkel); }

.hk { font-family: var(--schrift-cjk); letter-spacing: 0.08em; }

/* Für Wortteile, die ausschließlich grafisch dargestellt werden
   (etwa in einer SVG-Maske) und trotzdem vorgelesen werden müssen. */
.nur-vorlesen {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--nebel);
  max-width: 43ch;
}
.auf-papier .lead { color: var(--nebel-tief); }

.fliesstext { max-width: 58ch; line-height: 1.67; color: var(--nebel); }
.auf-papier .fliesstext { color: var(--nebel-tief); }
.fliesstext p + p { margin-top: var(--absatz-gap); }

/* =============================================================
   Layout-Primitive
   ============================================================= */

/* Exakt die Container-Formel des Referenzthemes v1.4.15
   (.page-grid): Außenmaß 1600px INKLUSIVE Gutter, netto 1480px.
   Die frühere Formel zog die Ränder doppelt ab (netto 1360px)
   und war damit schmaler als InterAlpen Immobilien. */
.raster {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sektion-pad       { padding-block: var(--sektion); }
.sektion-pad-gross { padding-block: var(--sektion-gross); }

.auf-papier { background: var(--papier); color: var(--carbon); }
.auf-carbon { background: var(--carbon); color: var(--papier); }

/* Der eine Sektionsvorspann — direkt aus der Holding übernommen:
   Überschrift links (8fr), Lead rechts (4fr), unten bündig. */
.vorspann {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(17rem, 4fr);
  gap: var(--vorspann-gap);
  align-items: end;
}
.vorspann__kopf { display: grid; gap: var(--eyebrow-gap); }

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

/* Haarlinie mit scrollgeladener Füllung */
.linie-laden {
  position: relative;
  height: 1px;
  background: var(--linie);
  overflow: hidden;
}
.linie-laden i {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--zinnober);
  transform-origin: left center;
  transform: scaleX(var(--ladung, 0));
  transition: transform 0.18s linear;
}

/* =============================================================
   Schaltflächen
   ============================================================= */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  min-height: 44px;
  padding: 0.85em 1.7em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-ui);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  transition: background-color 0.3s var(--ease),
              color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.knopf svg { width: 1.1em; height: 1.1em; transition: transform 0.32s var(--ease); }
.knopf:hover svg { transform: translateX(3px); }

.knopf--kontur { border-color: var(--linie-stark); color: var(--papier); }
.knopf--kontur:hover { border-color: var(--papier); }
.auf-papier .knopf--kontur { border-color: var(--linie-hell-stark); color: var(--carbon); }
.auf-papier .knopf--kontur:hover { border-color: var(--carbon); }

.knopf--voll { background: var(--papier); color: var(--carbon); }
.knopf--voll:hover { background: #fff; }
.auf-papier .knopf--voll { background: var(--carbon); color: var(--papier); }
.auf-papier .knopf--voll:hover { background: #000; }

.knopf--signal { background: var(--zinnober); color: var(--papier); }
.knopf--signal:hover { background: var(--zinnober-dunkel); }

/* =============================================================
   Reveal-System — Auslöser ist ScrollTrigger je Element,
   nicht IntersectionObserver (Lehre aus dem Holding-Projekt:
   bei clip-path-Reveals feuerte der Observer nicht zuverlässig).
   ============================================================= */

.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity 1s var(--ease), transform 1.05s var(--ease);
}
.reveal.is-da { opacity: 1; transform: none; }

.reveal-zeilen {
  opacity: 0;
  transform: translateY(0.9rem);
  transition: opacity 1.15s var(--ease), transform 1.15s var(--ease);
}
.reveal-zeilen.is-da { opacity: 1; transform: none; }

.reveal-medium { clip-path: inset(0 0 102% 0); transition: clip-path 1.25s var(--ease-tief); }
.reveal-medium > * { transform: scale(1.07); transition: transform 1.4s var(--ease); }
.reveal-medium.is-da { clip-path: inset(0 0 0 0); }
.reveal-medium.is-da > * { transform: none; }

.staffel > * {
  opacity: 0;
  transform: translateY(1.3rem);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
}
.staffel.is-da > * { opacity: 1; transform: none; }
.staffel.is-da > *:nth-child(1)  { transition-delay: 0ms; }
.staffel.is-da > *:nth-child(2)  { transition-delay: 85ms; }
.staffel.is-da > *:nth-child(3)  { transition-delay: 170ms; }
.staffel.is-da > *:nth-child(4)  { transition-delay: 255ms; }
.staffel.is-da > *:nth-child(5)  { transition-delay: 340ms; }
.staffel.is-da > *:nth-child(6)  { transition-delay: 425ms; }
.staffel.is-da > *:nth-child(7)  { transition-delay: 510ms; }
.staffel.is-da > *:nth-child(8)  { transition-delay: 595ms; }
.staffel.is-da > *:nth-child(9)  { transition-delay: 680ms; }
.staffel.is-da > *:nth-child(10) { transition-delay: 765ms; }

/* Ohne JavaScript ist alles sofort sichtbar. */
html:not(.js) .reveal,
html:not(.js) .reveal-zeilen,
html:not(.js) .staffel > * { opacity: 1; transform: none; }
html:not(.js) .reveal-medium { clip-path: none; }

/* =============================================================
   Sprungmarke für Tastatur
   ============================================================= */

.sprung {
  position: absolute;
  left: var(--rand);
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.15rem;
  background: var(--papier);
  color: var(--carbon);
  font-size: var(--text-ui);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease);
}
.sprung:focus-visible { transform: translateY(0.75rem); }

/* =============================================================
   Korn — eine sehr feine Materialschicht, damit die großen
   Carbonflächen nicht digital-flach wirken.
   ============================================================= */

.korn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../assets/bilder/korn.webp");
  background-size: 320px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-zeilen, .staffel > * { opacity: 1; transform: none; }
  .reveal-medium { clip-path: none; }
  .reveal-medium > * { transform: none; }
}