/* ============================================================
   Zollenkopf Capital — Startseite
   Die Bühne: gepinnter Hero, Durchflug durch die Wortmarke,
   Düsseldorfer Skyline waechst, Positionierung tritt hervor.
   ============================================================ */

/* ---------- Scrollraum ---------- */
.stage {
  position: relative;
  height: 340vh;            /* Laufweg des Effekts */
  background: var(--ink);
}

/* ---------- Gepinnte Sicht ---------- */
.stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* ---------- Hintergrundbild ----------
   Das picture-Element ist selbst ein Rasterfeld der gepinnten Sicht. Ohne
   eigene absolute Lage nimmt es Platz ein und schiebt die Wortmarke aus der
   Mitte nach unten. Deshalb liegt es flaechendeckend hinter allem. */
.stage__shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.stage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Das Dreischeibenhaus steht links im Bild, der Koe-Bogen rechts.
     Der Ausschnitt haelt beide Bauten im Bild und laesst den leeren
     Himmel oben herausfallen. */
  object-position: 41% 54%;
  transform: scale(1.02);   /* deckt Subpixel-Kanten beim Skalieren ab */
  transform-origin: 42% 52%;
  will-change: transform;
  /* Tagmotiv im klaren Sommerlicht: deutlich abgedunkelt und entsaettigt,
     damit die weisse Schrift auf dem hellen Himmel Kontrast behaelt. */
  filter: saturate(0.70) contrast(1.06) brightness(0.74);
}

/* ---------- Schleier ---------- */
.stage__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Faengt den hellen Himmel oben zusaetzlich ab. */
    radial-gradient(115% 74% at 56% 2%, rgba(7, 9, 12, 0.78) 0%, rgba(7, 9, 12, 0.30) 56%, rgba(7, 9, 12, 0) 100%),
    radial-gradient(125% 88% at 50% 46%, rgba(7, 9, 12, 0.12) 0%, rgba(7, 9, 12, 0.58) 66%, rgba(7, 9, 12, 0.90) 100%),
    linear-gradient(to bottom, rgba(7, 9, 12, 0.72) 0%, rgba(7, 9, 12, 0.32) 40%, rgba(7, 9, 12, 0.48) 78%, rgba(7, 9, 12, 0.66) 100%);
  will-change: opacity;
}

/* ---------- Verlauf am Fuss ----------
   Das Bild endet nicht an einer Kante, sondern laeuft nach unten in den
   Grund der folgenden Sektion aus. Bewusst eine eigene Ebene: der Schleier
   darueber wird beim Scrollen in seiner Deckkraft bewegt, dieser Verlauf
   muss dagegen in jedem Scrollzustand gleich bleiben. */
.stage__fade {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: -1px;
  height: 46vh;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(7, 9, 12, 0) 0%,
    rgba(7, 9, 12, 0.22) 26%,
    rgba(7, 9, 12, 0.58) 52%,
    rgba(7, 9, 12, 0.86) 74%,
    rgba(7, 9, 12, 0.98) 90%,
    #07090C 100%
  );
}

/* ---------- Wortmarke, durch die geflogen wird ---------- */
.stage__title {
  position: relative;
  z-index: 3;
  margin: 0;
  padding-inline: var(--gutter);
  text-align: center;
  font-weight: 600;
  /* Versalien tragen keine Unterlaengen, die Zeilen duerfen enger stehen.
     Die Laufweite geht dagegen ins Positive, sonst wirkt der Satz gedraengt. */
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  text-wrap: balance;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  text-shadow: 0 2px 60px rgba(0, 0, 0, 0.55);
  font-size: clamp(2.125rem, 8.6vw, 7.25rem);
}

.stage__title span { display: block; }

.stage__title .is-light {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  /* Optischer Blocksatz: die zweite Zeile traegt vier Zeichen weniger und
     einen leichteren Schnitt. Die Laufweite ist so bemessen, dass beide
     Zeilen aehnlich breit enden. Der negative Aussenabstand nimmt die
     nachlaufende Laufweite hinter dem letzten Buchstaben wieder heraus. */
  letter-spacing: 0.42em;
  margin-right: -0.42em;
}

@media (max-width: 560px) {
  /* Auf schmalen Geraeten bleibt zu wenig Raum fuer die Sperrung */
  .stage__title .is-light { letter-spacing: 0.16em; margin-right: -0.16em; }
}

/* ---------- Positionierung, die hervortritt ---------- */
.stage__claim {
  position: absolute;
  z-index: 4;
  inset-inline: 0;
  max-width: 1180px;
  margin-inline: auto;
  top: 50%;
  translate: 0 -50%;
  padding-inline: var(--gutter);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.stage__claim::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 128%;
  height: 320%;
  background: radial-gradient(58% 50% at 50% 50%, rgba(7, 9, 12, 0.72) 0%, rgba(7, 9, 12, 0.42) 46%, rgba(7, 9, 12, 0) 74%);
  pointer-events: none;
}

.stage__claim-line {
  display: block;
  font-size: clamp(1.125rem, 3.1vw, 2.5rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
}

.stage__claim-sep {
  display: inline-block;
  margin-inline: 0.42em;
  translate: 0 -0.14em;
  font-size: 0.72em;
  color: var(--silver);
  font-weight: 500;
  text-shadow: 0 0 20px var(--silver-glow);
}

.stage__claim-sub {
  display: block;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--mono);
  font-size: clamp(0.625rem, 1.1vw, 0.8125rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(243, 244, 246, 0.82);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.85);
}

/* ---------- Scroll-Hinweis ---------- */
.stage__hint {
  position: absolute;
  z-index: 5;
  bottom: clamp(1.75rem, 4vh, 3rem);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(243, 244, 246, 0.5);
  will-change: opacity;
}

.stage__hint-rail {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(243, 244, 246, 0.45), rgba(243, 244, 246, 0));
  overflow: hidden;
  position: relative;
}

.stage__hint-rail::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -46px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(195, 201, 210, 0), var(--silver));
  animation: rail 2.6s var(--ease-io) infinite;
}

@keyframes rail {
  0%   { transform: translateY(0); }
  100% { transform: translateY(92px); }
}

/* ---------- Positionierung ---------- */
.coda {
  position: relative;
  z-index: 3;
  background: var(--ink);
  padding-block: clamp(6rem, 20vh, 14rem) clamp(5rem, 12vh, 8rem);
  overflow: hidden;   /* keine Trennlinie: das Bild laeuft nahtlos in diese Flaeche */
}

/* Die grosse Aussage, bewusst ohne Konkurrenz auf der Zeile */
.coda__head {
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.875rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 24ch;
}

.coda__intro {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  margin-inline: auto;
  text-align: center;
  /* Bewusst breit gesetzt und im leichtesten Schnitt. Der Satz soll als
     ruhige Zeile unter der Aussage liegen, nicht als zweiter Block. */
  max-width: min(84ch, 100%);
  color: var(--paper-dim);
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.8;
  letter-spacing: 0.002em;
  text-wrap: pretty;
}

/* ============================================================
   Die drei Geschäftsfelder
   Kein Kartenraster: jedes Feld bekommt eine volle Bahn mit
   Kennziffer, Titel und Fliesstext. Ab Tablettbreite steht die
   Ordnung links, der Text rechts.
   ============================================================ */
.fields {
  position: relative;
  z-index: 3;
  background: var(--ink);
  padding-block: clamp(4rem, 10vh, 7rem) clamp(5rem, 12vh, 9rem);
}

.fields__lead {
  max-width: 62ch;
  margin-bottom: clamp(3rem, 8vh, 6rem);
}

.fields__lead h2 {
  margin-top: 1.5rem;
  font-size: clamp(1.625rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.field {
  position: relative;
  padding-block: clamp(3rem, 8vh, 5.5rem);
  border-top: 1px solid var(--line);
}

.field:last-of-type { border-bottom: 1px solid var(--line); }

@media (min-width: 900px) {
  .field {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }
}

.field__index {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

@media (min-width: 900px) {
  .field__index {
    position: sticky;
    top: clamp(3rem, 12vh, 7rem);
    flex-direction: column;
    gap: 1.25rem;
  }
}

.field__num {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: var(--paper-mute);
}

.field__name {
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.field__de {
  display: block;
  /* Der Zusatz erbt sonst die enge Zeilenhoehe der Ueberschrift und
     die beiden Zeilen laufen ineinander. */
  line-height: 1.5;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  opacity: 0.78;
}

.field__body {
  margin-top: 1.75rem;
  max-width: 68ch;
}

@media (min-width: 900px) {
  .field__body { margin-top: 0; }
}

.field__body p {
  color: var(--paper-dim);
  font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
  line-height: 1.78;
}

.field__body p + p { margin-top: 1.1rem; }

.field__marks {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.field__marks li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* ============================================================
   Der Weg in eine Beteiligung
   Drei Schritte auf einer durchlaufenden Achse. Auf breiten
   Schirmen liegt die Achse waagerecht, auf schmalen senkrecht.
   ============================================================ */
.path {
  position: relative;
  z-index: 3;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(5rem, 12vh, 9rem);
}

.path__head {
  max-width: 56ch;
  margin-bottom: clamp(3.5rem, 9vh, 6.5rem);
}

.path__head h2 {
  margin-top: 1.5rem;
  font-size: clamp(1.625rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.path__head p {
  margin-top: 1.5rem;
  color: var(--paper-dim);
  font-weight: 300;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.75;
}

.path__track {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3rem);
}

/* Die Achse liegt hinter den Schritten und traegt sie optisch */
.path__track::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, var(--line-hard), var(--line), transparent);
}

@media (min-width: 860px) {
  .path__track { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .path__track::before {
    left: 0;
    right: 0;
    top: 11px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(to right, var(--line-hard), var(--line) 60%, transparent);
  }
}

.step {
  position: relative;
  z-index: 1;
  padding-left: 3rem;
}

@media (min-width: 860px) {
  .step { padding-left: 0; padding-top: 3.25rem; }
}

/* Der Knoten auf der Achse */
.step__node {
  position: absolute;
  left: 0;
  top: 5px;
  width: 23px;
  height: 23px;
  border: 1px solid var(--line-hard);
  border-radius: 50%;
  background: var(--ink-2);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--silver);
  transition: border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

@media (min-width: 860px) {
  .step__node { top: 0; }
}

.step.is-in .step__node {
  border-color: var(--silver);
  box-shadow: 0 0 0 4px var(--silver-soft);
}

.step__name {
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.step__phase {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

.step__note {
  margin-top: 0.9rem;
  color: var(--paper-dim);
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.75;
  max-width: 42ch;
}

/* ============================================================
   Über mich
   ============================================================ */
.profile {
  position: relative;
  z-index: 3;
  background: var(--ink);
  padding-block: clamp(5rem, 13vh, 9rem);
}

.profile__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 900px) {
  /* Das Bild traegt die Zeilenhoehe, der Text sitzt mittig daneben.
     Dadurch schliesst das Portrait oben und unten buendig mit der
     Zeile ab, ohne dass der Ausschnitt beschnitten werden muss. */
  .profile__grid { grid-template-columns: 1fr 1.1fr; }
}

.profile__figure {
  position: relative;
  margin: 0;
  max-width: 26rem;
}

@media (min-width: 900px) {
  .profile__figure { max-width: 34rem; }
}

.profile__figure img {
  width: 100%;
  border-radius: 2px;
  /* Das Bild traegt einen warmen Mantel. Leicht entsaettigt fuegt es sich
     in die kuehle Flaeche ein, ohne blass zu wirken. */
  filter: saturate(0.94) contrast(1.02);
}

/* Feine Kante statt Rahmen: der Rand soll das Bild fassen, nicht umranden */
.profile__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
}

.profile__name {
  margin-top: 1.5rem;
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.profile__role {
  margin-top: 0.65rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  opacity: 0.82;
}

.profile__text {
  margin-top: 1.75rem;
  max-width: 60ch;
}

.profile__text p {
  color: var(--paper-dim);
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  line-height: 1.78;
}

.profile__text p + p { margin-top: 1.1rem; }

.profile__links {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
}

.profile__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--line-hard);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.profile__links a:hover {
  border-color: var(--silver);
  background: var(--silver-soft);
  transform: translateY(-2px);
}

.profile__links svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- Abbinder ---------- */
.coda__outro {
  margin-top: clamp(4rem, 10vh, 7rem);
  margin-inline: auto;
  max-width: 58ch;
  text-align: center;
}

.coda__outro p {
  color: var(--paper-dim);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.72;
}

.coda__outro p + p { margin-top: 1.25rem; }

.coda__outro a {
  color: var(--paper);
  border-bottom: 1px solid var(--line-hard);
  transition: border-color 0.25s var(--ease-out);
}

.coda__outro a:hover { border-color: var(--silver); }

.outro {
  position: relative;
  z-index: 3;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(5rem, 13vh, 9rem);
  text-align: center;
}

.outro h2 {
  margin-inline: auto;
  max-width: 20ch;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.outro p {
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  max-width: 54ch;
  color: var(--paper-dim);
  font-weight: 300;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.75;
}

.outro__mail {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-hard);
  font-size: clamp(1.0625rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.outro__mail:hover { border-color: var(--silver); color: #FFFFFF; }

/* ---------- Anflug beim Scrollen ----------
   Der Anflug laeuft ueber einen Klassenwechsel statt ueber Inline-Werte
   einer Bibliothek. Bleibt ein Beobachter einmal stumm, ist der Inhalt
   im schlimmsten Fall sofort sichtbar statt dauerhaft unsichtbar. */
.rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

.rise.is-in {
  opacity: 1;
  transform: none;
}

.no-js .rise,
.is-static .rise {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Die Schritte laufen versetzt ein, damit die Achse von links nach
   rechts entsteht statt alles gleichzeitig aufzublenden. */
.step:nth-child(2) { transition-delay: 0.12s; }
.step:nth-child(3) { transition-delay: 0.24s; }

/* ---------- Ohne JavaScript und ohne Bewegung ---------- */
.no-js .stage,
.is-static .stage { height: auto; }

.no-js .stage__pin,
.is-static .stage__pin {
  position: relative;
  height: 100svh;
}

.no-js .stage__claim,
.is-static .stage__claim {
  position: relative;
  top: auto;
  translate: none;
  opacity: 1;
  margin-top: clamp(2rem, 5vh, 4rem);
}

.no-js .stage__hint,
.is-static .stage__hint { display: none; }

.no-js .step__node,
.is-static .step__node { border-color: var(--silver); }

@media (prefers-reduced-motion: reduce) {
  .stage { height: auto; }
  .stage__pin { position: relative; height: 100svh; }
  .stage__hint-rail::after { animation: none; }
}

/* ---------- Feinschliff kleine Viewports ---------- */
@media (max-width: 640px) {
  .stage { height: 300vh; }
  /* Im Hochformat beschneidet cover die Breite stark. Der Ausschnitt
     wandert deshalb nach links, sonst faellt das Dreischeibenhaus heraus. */
  .stage__bg { object-position: 12% 56%; }
  .stage__claim-sep { display: block; margin: 0.15em 0; }
  .profile__figure { max-width: 20rem; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .stage__title { font-size: clamp(2rem, 8vh, 4rem); }
  .stage__hint { display: none; }
}