/* ============================================================
   UEBER MICH - Scroll-Geschichte
   ------------------------------------------------------------
   Baut auf style.css auf (Navigation, Footer, Buttons, Farben).
   Eigen sind hier nur die Sektionen der Erzaehlung.

   Grundprinzip: KEINE Kaesten. Inhalt steht frei auf Schwarz,
   Portraits sind freigestellt und schweben ohne Rahmen.

   Die festgehaltenen Buehnen laufen ueber position: sticky -
   nicht ueber GSAP-Pinning. Damit bleibt das Layout auch dann
   richtig, wenn JavaScript ausfaellt oder spaeter laedt.
   ============================================================ */

.scrollstory {
  --st-line: rgba(255, 255, 255, 0.12);
  --st-dim: rgba(255, 255, 255, 0.42);
  background: var(--bg-0);
  overflow-x: clip;
}

/* Lenis uebernimmt das Scrollen; das native Smooth-Scrolling
   aus style.css wuerde dagegen arbeiten. */
.scrollstory-lenis html,
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

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

/* ---------- gemeinsame Bausteine ---------- */
.st-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--st-dim);
  font-weight: 600;
}

.scrollstory h2,
.scrollstory h3 { font-weight: 400; }

/* Grosse Erzaehlzeilen: Serife, eng gesetzt, sehr gross */
.st-display {
  font-family: var(--font-display);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--silver-1);
}

/* ============================================================
   01 HERO
   ============================================================ */
/* Knapp gehalten: nach dem Schrumpfen des Portraits soll nicht
   noch eine halbe Seite Stillstand kommen. */
.st-hero { position: relative; height: 132vh; }

.st-hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Die Gruppe traegt alles, was zusammengehoert - und damit auch
   die gemeinsame Bewegung. */
.st-hero__gruppe {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform;
}

/* Weicher dunkler Grund am unteren Rand: die Rollenzeile steht
   sonst auf dem hellen T-Shirt und ist kaum zu lesen. Liegt
   ueber dem Portrait (2), unter der Schrift (4). */
.st-hero__gruppe::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  height: 30vh;
  background: linear-gradient(180deg, transparent, rgba(7, 7, 9, 0.55) 34%, rgba(7, 7, 9, 0.93) 72%);
  pointer-events: none;
}

.st-hero__name {
  /* KEIN z-index hier: sonst entsteht ein eigener Stapelraum und
     die zweite Zeile kaeme nie vor das Portrait. */
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-size: clamp(4.2rem, 17vw, 15rem);
  color: var(--silver-1);
  text-align: center;
  pointer-events: none;
}

.st-hero__word { display: block; position: relative; will-change: transform; }
/* Beide Zeilen stehen mittig. Die erste liegt hinter dem
   Portrait, die zweite davor - so bleibt der Name lesbar und
   die Schichtung sichtbar. */
.st-hero__word--1 { z-index: 1; }
.st-hero__word--2 {
  z-index: 3;
  position: relative;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #cfcfd8 55%, #8e8e97 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 22px rgba(0, 0, 0, 0.9));
}

.st-hero__portrait {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(19rem, 50vw, 40rem);
  height: auto;
  transform: translate(-50%, -46%);
  transform-origin: 50% 50%;
  /* Unten weich auslaufen lassen: das Foto ist an der Huefte
     angeschnitten, eine harte Kante wuerde das verraten. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 97%);
  filter: drop-shadow(0 40px 90px rgba(0, 0, 0, 0.85));
  will-change: transform;
}

.st-hero__roles {
  position: absolute;
  z-index: 4;
  bottom: 13vh;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  margin: 0;
  text-align: center;
  width: 100%;
}

/* Gross und in Versalien gesetzt - die Rolle ist eine Aussage,
   keine Fusszeile. Alle drei liegen im selben Rasterfeld
   uebereinander, damit die Zeile beim Wechsel nicht springt. */
.st-hero__role {
  grid-area: 1 / 1;
  justify-self: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 3.4vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--silver-1);
  white-space: nowrap;
  text-shadow: 0 3px 24px rgba(7, 7, 9, 0.9);
  opacity: 0;
}

/* Als Pille gesetzt: der Nachweis ist eine Marke, kein Fliesstext.
   Der Rahmen faengt die Zeile ein, damit sie vor dem Portrait
   nicht ausfranst. */
.st-hero__cert {
  position: absolute;
  z-index: 4;
  bottom: 7.5vh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  padding: 0.5em 1.35em 0.58em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.78rem, 1.35vw, 1.1rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--silver-2);
  white-space: nowrap;
}
/* Eine Schrift fuer die ganze Pille: das Kuerzel laeuft nur
   etwas weiter und heller als das Wort dahinter. */
.st-hero__cert span {
  letter-spacing: 0.14em;
  color: var(--silver-1);
}

/* ============================================================
   LAUFBAND zwischen Hero und 02
   ============================================================ */
.st-band {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 2.6rem) 0;
  border-top: 1px solid var(--st-line);
  border-bottom: 1px solid var(--st-line);
  background: var(--bg-0);
  /* An den Raendern weich auslaufen, damit die Woerter nicht an
     einer harten Kante abgeschnitten werden. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.st-band__lauf {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 3.4vw, 3rem);
  width: max-content;
  white-space: nowrap;
  /* Vier Durchlaeufe, Weg -50 %: nach dem Sprung steht exakt
     dasselbe Bild, und zwei Durchlaeufe fuellen jeden Schirm. */
  animation: st-band 42s linear infinite;
  will-change: transform;
}

@keyframes st-band {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.st-band__lauf span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: 0.015em;
  color: var(--silver-1);
}
.st-band__lauf em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(0.9rem, 1.5vw, 1.3rem);
  color: var(--silver-3);
  opacity: 0.55;
}

.st-hero__sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

/* ============================================================
   01B AUS EINER IDEE
   ============================================================ */
/* Laenger als vorher: die letzte Phase fuehrt die vier Bahnen
   weiter in die Karten. */
.st-bloom { position: relative; height: 345vh; }

.st-bloom__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Buehne, Linien und Karten als ein Block. Er wird spaeter als
   Ganzes nach oben gefahren, damit die Karten ins Bild kommen. */
.st-bloom__gruppe {
  position: absolute;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 84vh * 1232 / 945, 1160px);
  will-change: transform;
}

/* Seitenverhaeltnis der Bildsequenz (1232:945) - nur so sitzen
   die Beschriftungen zuverlaessig unter den Endpunkten. */
.st-bloom__buehne {
  position: relative;
  width: 100%;
  aspect-ratio: 1232 / 945;
}

.st-bloom__canvas {
  width: 100%;
  height: 100%;
  display: block;
  /* Kein Blendmodus noetig: die Einzelbilder haben einen echten
     Alphakanal (der schwarze Grund wurde beim Aufbereiten in
     Transparenz umgerechnet). Blendmodi waeren hier fragil - jeder
     z-index oder transform im Elternpfad macht einen Stapelraum
     auf und setzt sie ausser Kraft. */
}

/* ---------- Die vier Bereiche ---------- */
.st-bloom__karten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.8vw, 1.8rem);
  list-style: none;
  margin: 3.2vh 0 0;
  padding: 0;
}
.st-bloom__karten li { opacity: 0; }

/* ---------- Die vier Bereiche als Zeichnung ----------
   Nachgebaut statt gerendert: nur so lassen sich einzelne Teile
   bewegen - eine Kurve, die sich zeichnet, Impulse, die durch ein
   Netz laufen. Ein fertiges Bild kann das nicht.               */
.st-svg { width: 100%; height: auto; display: block; overflow: visible; }

.st-svg__linien {
  fill: none;
  stroke: rgba(198, 224, 255, 0.5);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(120, 180, 255, 0.35));
}

.st-svg__rahmen { stroke: rgba(214, 234, 255, 0.75); stroke-width: 1.4; }
.st-svg__leiste { stroke: rgba(198, 224, 255, 0.4); }
.st-svg__punkt { fill: rgba(198, 224, 255, 0.55); stroke: none; }
.st-svg__flaeche,
.st-svg__kachel { stroke: rgba(198, 224, 255, 0.35); }
.st-svg__raster { stroke: rgba(160, 195, 235, 0.16); stroke-width: 0.8; }
.st-svg__ecken { stroke: rgba(214, 234, 255, 0.7); stroke-width: 1.3; }

/* Die grosse Fassung in den Services: mehr Details, kraeftigere
   Linien - sie wird deutlich groesser dargestellt. */
.st-svg--gross .st-svg__linien { stroke-width: 1.3; }
.st-svg--gross .st-svg__rahmen { stroke-width: 1.7; }
.st-svg__innen { stroke: rgba(198, 224, 255, 0.4); }
.st-svg__notch { stroke: rgba(198, 224, 255, 0.5); stroke-width: 2.4; }
.st-svg__ring { stroke: rgba(198, 224, 255, 0.55); }
.st-svg__kacheln rect { stroke: rgba(198, 224, 255, 0.38); }
.st-svg__minikurve { stroke: rgba(160, 205, 255, 0.7); stroke-width: 1.1; }
.st-svg__zeilen--klein path { stroke-width: 1.2; animation-delay: 2.1s; }
.st-svg__marke rect { stroke: rgba(198, 224, 255, 0.45); }
.st-svg__marke path { stroke: rgba(198, 224, 255, 0.3); stroke-width: 0.9; }
.st-svg__neben path { stroke: rgba(180, 210, 245, 0.28); stroke-dasharray: 3 5; }
.st-svg__neben ellipse { stroke: rgba(180, 210, 245, 0.35); }
.st-svg__ring2 { stroke: rgba(150, 200, 255, 0.3); stroke-width: 1; }

/* Das Personensymbol erbt die Linienfarbe der Gruppe. */
.st-svg__knoten g circle,
.st-svg__nabe circle { fill: none; }
.st-svg__knoten use,
.st-svg__nabe use { stroke: rgba(214, 234, 255, 0.75); stroke-width: 1.2; fill: none; }
.st-svg--gross .st-svg__knoten use { stroke-width: 1.1; }

/* --- Webdesign: die Kurve zeichnet sich, dann kommen die Zeilen --- */
.st-svg__kurve {
  stroke: rgba(150, 205, 255, 0.9);
  stroke-width: 1.4;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: st-zeichnen260 7s ease-in-out infinite;
}
.st-svg__zeilen path {
  stroke: rgba(198, 224, 255, 0.55);
  stroke-width: 1.6;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: st-zeichnen60 7s ease-in-out infinite;
}
.st-svg__zeilen path:nth-child(1) { animation-delay: 1.2s; }
.st-svg__zeilen path:nth-child(2) { animation-delay: 1.5s; }
.st-svg__zeilen path:nth-child(3) { animation-delay: 1.8s; }
.st-svg__knopf {
  stroke: rgba(160, 210, 255, 0.85);
  animation: st-glimmen 7s ease-in-out infinite 2.4s;
}

/* --- Social: Impulse laufen vom Zentrum nach aussen ---
   Die ruhenden Linien liegen darunter, sonst sieht man nur die
   wandernden Striche und das Netz fehlt. */
.st-svg__ruhe path { stroke: rgba(198, 224, 255, 0.22); }
.st-svg__nabe { stroke: rgba(214, 234, 255, 0.85); stroke-width: 1.3; }
.st-svg__aeste path {
  stroke: rgba(190, 225, 255, 0.95);
  stroke-width: 1.5;
  stroke-dasharray: 5 35;
  animation: st-impuls 3.6s linear infinite;
}
.st-svg__aeste path:nth-child(2) { animation-delay: 0.3s; }
.st-svg__aeste path:nth-child(3) { animation-delay: 0.6s; }
.st-svg__aeste path:nth-child(4) { animation-delay: 0.9s; }
.st-svg__aeste path:nth-child(5) { animation-delay: 1.2s; }
.st-svg__aeste path:nth-child(6) { animation-delay: 1.5s; }
.st-svg__knoten circle {
  stroke: rgba(198, 224, 255, 0.6);
  animation: st-glimmen 3.6s ease-in-out infinite;
}
.st-svg__knoten circle:nth-child(2) { animation-delay: 0.3s; }
.st-svg__knoten circle:nth-child(3) { animation-delay: 0.6s; }
.st-svg__knoten circle:nth-child(4) { animation-delay: 0.9s; }
.st-svg__knoten circle:nth-child(5) { animation-delay: 1.2s; }
.st-svg__knoten circle:nth-child(6) { animation-delay: 1.5s; }

/* --- Content: die Blende dreht sich, die Welle schlaegt aus --- */
.st-svg__blende {
  transform-origin: 94px 85px;
  animation: st-drehen 14s linear infinite;
}
.st-svg__kern {
  fill: rgba(190, 225, 255, 0.9);
  stroke: none;
  transform-origin: 94px 85px;
  animation: st-atmen 3s ease-in-out infinite;
}
.st-svg__welle path {
  stroke: rgba(170, 212, 255, 0.75);
  stroke-width: 1.5;
  animation: st-schlagen 1.5s ease-in-out infinite;
}
.st-svg__welle path:nth-child(1) { transform-origin: 114px 85px; }
.st-svg__welle path:nth-child(2) { transform-origin: 119px 85px; animation-delay: 0.18s; }
.st-svg__welle path:nth-child(3) { transform-origin: 124px 85px; animation-delay: 0.36s; }
.st-svg__welle path:nth-child(4) { transform-origin: 129px 85px; animation-delay: 0.54s; }
.st-svg__welle path:nth-child(5) { transform-origin: 134px 85px; animation-delay: 0.72s; }

/* Die Drehachsen gelten je Fassung: im grossen SVG liegen die
   Mittelpunkte anders als im kleinen. Ohne diese Angabe dreht
   die Blende um einen Punkt ausserhalb des Motivs. */
.st-svg--gross .st-svg__blende { transform-origin: 140px 121px; }
.st-svg--gross .st-svg__kern { transform-origin: 140px 121px; }
.st-svg--gross .st-svg__ziel { transform-origin: 222px 78px; }
.st-svg--gross .st-svg__welle path:nth-child(1) { transform-origin: 162px 121px; }
.st-svg--gross .st-svg__welle path:nth-child(2) { transform-origin: 167px 121px; }
.st-svg--gross .st-svg__welle path:nth-child(3) { transform-origin: 172px 121px; }
.st-svg--gross .st-svg__welle path:nth-child(4) { transform-origin: 177px 121px; }
.st-svg--gross .st-svg__welle path:nth-child(5) { transform-origin: 182px 121px; }

/* --- Strategie: die Route zeichnet sich bis zum Ziel --- */
.st-svg__route {
  stroke: rgba(150, 205, 255, 0.9);
  stroke-width: 1.5;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: st-zeichnen220 8s ease-in-out infinite;
}
.st-svg__stationen circle {
  stroke: rgba(214, 234, 255, 0.8);
  animation: st-glimmen 8s ease-in-out infinite;
}
.st-svg__stationen circle:nth-child(1) { animation-delay: 1.4s; }
.st-svg__stationen circle:nth-child(2) { animation-delay: 2.4s; }
.st-svg__stationen circle:nth-child(3) { animation-delay: 3.4s; }
.st-svg__ziel {
  stroke: rgba(170, 215, 255, 0.95);
  stroke-width: 1.5;
  transform-origin: 162px 48px;
  animation: st-ziel 8s ease-in-out infinite 4.2s;
}

/* Je Laenge eine eigene Kurve: stroke-dashoffset laesst sich
   nicht ueber eine Variable animieren. */
@keyframes st-zeichnen260 {
  0% { stroke-dashoffset: 260; } 35%, 100% { stroke-dashoffset: 0; }
}
@keyframes st-zeichnen220 {
  0% { stroke-dashoffset: 220; } 35%, 100% { stroke-dashoffset: 0; }
}
@keyframes st-zeichnen60 {
  0% { stroke-dashoffset: 60; } 22%, 100% { stroke-dashoffset: 0; }
}
@keyframes st-impuls {
  from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; }
}
@keyframes st-glimmen {
  0%, 100% { stroke-opacity: 0.35; } 50% { stroke-opacity: 1; }
}
@keyframes st-atmen {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.35); opacity: 1; }
}
@keyframes st-drehen {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@keyframes st-schlagen {
  0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1.25); }
}
@keyframes st-ziel {
  0%, 40% { stroke-opacity: 0.25; transform: scale(0.85); }
  60%, 100% { stroke-opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .st-svg * { animation: none !important; stroke-dashoffset: 0 !important; }
}

.st-bloom__karten h3 {
  margin: 0.4rem 0 0.3rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-1);
}
.st-bloom__karten p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-2);
}


/* Beschriftungen der vier Endpunkte */
.st-bloom__terms {
  position: absolute;
  inset: 0;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.st-bloom__terms li {
  position: absolute;
  left: var(--x);
  /* Die Leuchtpunkte der Sequenz sitzen bei 97,8 % der Hoehe
     (nachgemessen im letzten Bild) - die Schrift steht knapp
     darunter. */
  top: 100.5%;
  transform: translateX(-50%);
  font-size: clamp(0.62rem, 0.95vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-1);
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 2px 14px rgba(7, 7, 9, 0.95);
}

/* ============================================================
   SERVICES
   Blockweise Vorstellung der vier Bereiche. Jeder Block klebt
   und weicht zurueck, sobald der naechste ihn einholt.
   ============================================================ */
/* Direkt im Anschluss an die Bildsequenz, ohne Luftpolster. */
.st-services {
  padding: 0 clamp(1.2rem, 5vw, 4rem);
}

/* Mittig gesetzt, kursive Serife, grosszuegig - die Ueberschrift
   traegt den ganzen Abschnitt. */
.st-services__kopf { text-align: center; }

.st-services__titel {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 8.5vw, 7rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--silver-1);
}
.st-services__unter {
  margin: 1rem 0 0;
  font-size: clamp(0.72rem, 1.05vw, 0.85rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--st-dim);
}

.st-services__stapel { margin-top: clamp(3rem, 8vw, 7rem); }

.st-services__block {
  position: sticky;
  /* Feste Hoehe plus gleicher Abstand oben und unten: dadurch
     bleibt der Block in der Mitte des Fensters stehen und nicht
     am oberen Rand. */
  top: 14vh;
  min-height: 72vh;
  margin: 0 auto 62vh;
  width: min(100%, 74rem);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  will-change: transform, opacity, filter;
}
/* Auch der letzte Block bleibt eine Weile in der Mitte stehen,
   bevor der naechste Abschnitt uebernimmt - aber nur so lange,
   dass keine leere Strecke entsteht. */
.st-services__block:last-child { margin-bottom: 12vh; }

.st-services__bild .st-svg {
  width: 100%;
  height: auto;
  display: block;
}

.st-services__text h3 {
  margin: 0.8rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--silver-1);
}
.st-services__text p {
  margin: 0;
  max-width: 34rem;
  color: var(--text-2);
  line-height: 1.75;
}

.st-services__punkte {
  list-style: none;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.st-services__punkte li {
  position: relative;
  padding-left: 2.1rem;
  font-size: 0.95rem;
  color: var(--text-1);
}
/* Zwei Striche als Marke - dasselbe Zeichen wie im Vorbild, aber
   aus Text statt Grafik, damit es mitskaliert. */
.st-services__punkte li::before {
  content: "//";
  position: absolute;
  left: 0;
  color: var(--silver-3);
  letter-spacing: -0.05em;
}

@media (max-width: 900px) {
  .st-services__block {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    top: 10vh;
    min-height: 78vh;
    margin-bottom: 38vh;
  }
  .st-services__bild .st-svg { width: min(100%, 26rem); margin-inline: auto; }
}

@media (max-width: 700px) {
  /* Der Block klebt oben fest. Ist er hoeher als das sichtbare
     Fenster, kommt man an sein unteres Ende nie heran - genau da
     standen die letzten beiden Punkte und der Knopf. Also alles
     etwas enger, bis die Karte auf einen Bildschirm passt. svh
     rechnet dabei mit der Flaeche, die neben den Browserleisten
     wirklich bleibt. */
  .st-services__block {
    top: 5svh;
    min-height: 0;
    gap: 1rem;
    margin-bottom: 34vh;
  }
  .st-services__bild .st-svg { width: min(100%, 14rem); }
  .st-services__text p { font-size: 0.97rem; line-height: 1.6; }
  .st-services__punkte {
    margin: 1rem 0 1.2rem;
    gap: 0.55rem;
  }
  .st-services__punkte li { font-size: 0.92rem; line-height: 1.45; padding-left: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .st-services__block { position: static; min-height: 0; margin-bottom: clamp(3rem, 9vw, 7rem); }
}

/* ============================================================
   ABOUT ME
   Ueberschrift, Portraitsequenz und Text in einer Buehne.
   ============================================================ */
/* 122 Bilder auf diesen Weg: rund 16 px pro Bildwechsel -
   darunter sieht man die Drehung springen. */
.st-about2 { position: relative; height: 300vh; }

.st-about2__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  gap: clamp(1rem, 2.5vh, 2.5rem);
  padding: 9vh clamp(1.2rem, 5vw, 4rem) 5vh;
  overflow: hidden;
}

.st-about2__kopf { text-align: center; }

.st-about2__titel {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--silver-1);
}

.st-about2__unter {
  margin: 0.7rem 0 0;
  font-size: clamp(0.68rem, 1vw, 0.8rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--st-dim);
}

.st-about2__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  width: min(100%, 80rem);
  margin-inline: auto;
  min-height: 0;
}

.st-about2__buehne {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
}

.st-about2__canvas {
  /* Die Breite ist die fuehrende Groesse, die Hoehe folgt ueber
     das Seitenverhaeltnis. Umgekehrt (height: 100 %) entsteht ein
     Zirkelbezug: das Raster braucht die Hoehe des Canvas, der
     Canvas die Hoehe des Rasters - der Browser faellt dann auf
     die Standardgroesse 300x150 zurueck und quetscht das Bild. */
  width: min(100%, 64vh * 1000 / 1038);
  height: auto;
  aspect-ratio: 1000 / 1038;
  display: block;
  /* Die Aufnahme hat einen fast schwarzen Grund, der Seitengrund
     ist minimal heller. Ohne weiche Kanten zeichnet das Bild ein
     sichtbares Rechteck. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(180deg, transparent, #000 6%, #000 84%, transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(180deg, transparent, #000 6%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---------- Text, der beim Scrollen aufhellt ---------- */
.st-about2__text {
  display: grid;
  gap: clamp(0.9rem, 2vh, 1.6rem);
  max-width: 34rem;
}
/* Text und Symbole stehen in derselben Spalte untereinander. */
.st-about2__spalte { min-width: 0; }
/* Serife statt Grotesk: die Aussage soll wie ein Zitat wirken,
   nicht wie Fliesstext. Serifen tragen bei gleicher Punktzahl
   optisch kleiner, deshalb etwas groesser gesetzt. */
.st-about2__text p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.3vw, 2.2rem);
  line-height: 1.45;
  letter-spacing: 0.005em;
}
/* Jedes Wort startet fast unsichtbar und leuchtet beim Lesen auf:
   nicht nur heller, sondern mit einem feinen Schein - dadurch
   wirkt der Unterschied deutlich staerker als reine Aufhellung. */
.st-about2__text .wort {
  color: rgba(244, 244, 246, 0.09);
  text-shadow: 0 0 0 rgba(180, 214, 255, 0);
}

@media (max-width: 900px) {
  .st-about2 { height: 260vh; }
  .st-about2__pin { padding-top: 9vh; }
  .st-about2__raster {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    align-content: center;
  }
  .st-about2__canvas { height: auto; width: min(58%, 15rem); margin-inline: auto; }
  .st-about2__text p { font-size: 1.25rem; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .st-about2 { height: auto; }
  .st-about2__pin { position: static; height: auto; padding-block: 10vh; }
  .st-about2__text .wort { color: var(--text-1); }
}

/* ============================================================
   08 ZAHLEN
   ============================================================ */
/* Ohne Label darf das Zahlenband hoeher stehen. */
/* Wenig Luft nach unten: der Abschluss soll direkt anschliessen. */
.st-zahlen { padding: clamp(2.5rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem); }

.st-zahlen__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.st-zahlen__grid li { border-top: 1px solid var(--st-line); padding-top: 1.2rem; }

.st-zahlen__wert {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
  color: var(--silver-1);
  font-variant-numeric: tabular-nums;
}
.st-zahlen__grid h3 {
  margin: 0.6rem 0 0.2rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-2);
  font-weight: 600;
}
.st-zahlen__grid p { margin: 0; color: var(--text-2); font-size: 0.92rem; }

.st-zert {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid;
  gap: 0;
}
.st-zert__item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--st-line);
  transition: padding-left 0.4s var(--ease);
}
.st-zert__item:last-child { border-bottom: 1px solid var(--st-line); }
.st-zert__item:hover { padding-left: 0.8rem; }
.st-zert__item img { width: 48px; height: 48px; object-fit: contain; opacity: 0.9; }
.st-zert__mark {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--st-line);
  border-radius: 50%;
  font-family: var(--font-display);
  color: var(--silver-2);
}
.st-zert__item span:last-child { display: grid; gap: 0.15rem; font-size: 0.92rem; color: var(--text-2); }
.st-zert__item strong { color: var(--silver-1); font-weight: 500; font-size: 1rem; }

/* ---------- Kanaele als Symbole ---------- */
.st-kanaele {
  list-style: none;
  margin: clamp(1.6rem, 4vh, 2.6rem) 0 0;
  padding: 0;
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
.st-kanaele a {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--st-line);
  border-radius: 50%;
  color: var(--silver-3);
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease),
              transform 0.45s var(--ease);
}
.st-kanaele a:hover {
  color: var(--silver-1);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

/* ============================================================
   09 CTA
   ============================================================ */
/* Ohne Bild und Riesenzeile reicht ein kurzer Abschnitt. */
.st-cta { position: relative; height: auto; }

.st-cta__pin {
  position: static;
  display: grid;
  place-items: center;
  padding: 14vh clamp(1.2rem, 5vw, 4rem) 18vh;
}

.st-cta__action {
  position: absolute;
  z-index: 3;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  text-align: center;
  opacity: 0;
}

/* ---------- Die beiden Wege ---------- */
.st-cta__wege {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  /* Ohne feste Breite schrumpft das Raster auf Inhaltsbreite -
     die Spalten werden dann so schmal, dass die Zeilen umbrechen
     und untereinander stehen. */
  width: min(100%, 58rem);
  margin-inline: auto;
}
/* Die Felder fest zuweisen: sonst legt das automatische Verteilen
   die Trennlinie in die erste Spalte. */
.st-cta__weg:first-of-type { grid-column: 1; }
.st-cta__weg:last-of-type { grid-column: 3; }
.st-cta__wege::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--st-line) 20%, var(--st-line) 80%, transparent);
}
.st-cta__weg {
  display: grid;
  justify-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
}

.st-cta__frage {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--silver-1);
  text-align: center;
}

/* ---------- Knopf mit durchlaufendem Schimmer ---------- */
.st-knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95em 1.9em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-1);
  isolation: isolate;
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease);
}
.st-knopf:hover { border-color: rgba(255, 255, 255, 0.45); }

/* Der Schimmer laeuft von selbst durch - langsam und selten,
   damit er auffaellt, ohne zu zappeln. */
.st-knopf::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 65%);
  transform: translateX(-120%);
  animation: st-schimmer 5.5s ease-in-out infinite;
}
.st-knopf:hover::before { animation-duration: 1.8s; }

@keyframes st-schimmer {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

.st-knopf__pfeil {
  display: inline-flex;
  color: var(--silver-2);
  transition: transform 0.45s var(--ease), color 0.45s var(--ease);
}
.st-knopf:hover .st-knopf__pfeil {
  transform: translateX(5px);
  color: var(--silver-1);
}

.st-cta__hinweis {
  margin: 0;
  font-size: 0.85rem;
  color: var(--st-dim);
}

@media (max-width: 700px) {
  .st-cta__wege { grid-template-columns: 1fr; gap: 2.4rem; }
  .st-cta__weg:first-of-type,
  .st-cta__weg:last-of-type { grid-column: 1; }
  .st-cta__wege::before {
    grid-column: 1;
    grid-row: auto;
    width: auto;
    height: 1px;
    align-self: center;
    background: linear-gradient(90deg, transparent, var(--st-line) 25%, var(--st-line) 75%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-knopf::before { animation: none; }
}

/* ============================================================
   Mobil - eigene Bewegungslogik, kuerzere Buehnen
   ============================================================ */
@media (max-width: 900px) {
  /* Tablet: dieselbe Ursache wie auf dem Handy, nur schwaecher -
     am Ende der Buehne stand unter den vier Bereichen ein halber
     Bildschirm schwarze Flaeche. */
  .st-bloom { height: 240vh; }
}

@media (max-width: 700px) {
  /* svh statt vh: auf dem iPhone ist 100vh groesser als das, was
     man wirklich sieht - die Rollenzeile und die Zertifikatspille
     verschwanden hinter der Browserleiste. svh rechnet mit der
     kleinen, immer sichtbaren Flaeche. vh bleibt als Rueckfall
     fuer aeltere Browser stehen. */
  .st-hero { height: 128vh; }
  .st-hero { height: 118svh; }
  .st-hero__stage { height: 100svh; }
  /* Schmaler und etwas hoeher: darueber stand sonst ein Drittel
     Bildschirm leer. Tiefer als am Rechner bleibt es trotzdem,
     sonst deckt der Oberkoerper die zweite Namenszeile zu. */
  .st-hero__portrait { width: 60vw; transform: translate(-50%, -42%); }
  /* Der Name wandert mit nach oben, sonst rutscht das Portrait
     unter ihm weg. */
  /* Nicht per transform verschieben: das erzeugt einen eigenen
     Stapelraum, und die zweite Namenszeile (z-index 3) kaeme dann
     nie mehr vor das Portrait. "top" tut dasselbe ohne Nebenwirkung. */
  .st-hero__name { top: -4vh; }
  .st-hero__roles { bottom: 13vh; bottom: 16svh; }
  .st-hero__cert { bottom: 8vh; bottom: 10svh; }
  .st-hero__gruppe::after { height: 26vh; }

  /* Kuerzere Buehne: auf dem Handy passiert im oberen Drittel
     nichts mehr, sobald die Gruppe hochgefahren ist - der Rest
     der Strecke war schwarze Flaeche. */
  .st-bloom { height: 170vh; }
  /* Vier Spalten sind auf 390 px zu eng - die Beschriftungen
     stehen dann in Ein-Wort-Zeilen. Zwei mal zwei liest sich
     deutlich ruhiger. */
  .st-bloom__karten { grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; }
  .st-bloom__line[data-bloom-line="2"] { bottom: 20vh; text-align: left; }

  /* Der Abschluss stand absolut und wurde am Sektionsboden
     verankert. Weil die Sektion auf dem Handy nur so hoch ist
     wie ihre Innenabstaende, ragte der Block nach oben in die
     Zertifikate hinein. Im Fluss steht er dort, wo er hingehoert. */
  .st-cta__action {
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
  }
  .st-cta__pin { padding-block: 8vh 12vh; }
  .st-zert__item { align-items: flex-start; }
}

/* ============================================================
   Reduzierte Bewegung: keine langen Buehnen, alles sofort da
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .st-hero,
  .st-bloom,
  .st-cta { height: auto; }

  .st-hero__stage,
  .st-bloom__pin,
  .st-cta__pin {
    position: static;
    height: auto;
    min-height: auto;
    padding: 12vh clamp(1.2rem, 5vw, 4rem);
  }
  /* Ohne Buehne gibt es keinen Verlauf mehr abzudunkeln. */
  .st-cta__pin::after { display: none; }

  .st-hero__stage { display: grid; gap: 2rem; }
  .st-hero__gruppe { position: static; display: grid; gap: 2rem; }
  .st-hero__gruppe::after { display: none; }
  .st-hero__portrait { position: static; transform: none; margin-inline: auto; }
  .st-hero__roles { position: static; transform: none; display: flex; gap: 1.2rem 2rem; flex-wrap: wrap; justify-content: center; width: auto; }
  .st-hero__role { opacity: 1; font-size: clamp(1.2rem, 3vw, 2.2rem); }
  .st-hero__cert { position: static; transform: none; text-align: center; }
  .st-band { -webkit-mask-image: none; mask-image: none; }
  .st-band__lauf { animation: none; width: auto; flex-wrap: wrap; justify-content: center; white-space: normal; padding-inline: clamp(1.2rem, 5vw, 4rem); }

  .st-bloom__canvas { display: none; }
  .st-bloom__line,
  .st-bloom__terms li,
  .st-cta__action { opacity: 1 !important; }

  .st-bloom__pin { display: grid; gap: 1.5rem; }
  .st-bloom__label { position: static; transform: none; }
  .st-bloom__buehne { position: static; transform: none; width: 100%; margin-inline: auto; }
  .st-bloom__karten li { opacity: 1; }
  .st-bloom__terms { position: static; display: flex; flex-wrap: wrap; gap: 1.2rem; }
  .st-bloom__terms li { position: static; transform: none; opacity: 1; }


  .st-cta__img { position: static; transform: none; margin-inline: auto; }
  .st-cta__action { position: static; transform: none; margin-top: 2rem; }
}