/* ==========================================================================
   Sektionen
   ========================================================================== */

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */
.pageloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: var(--color-background);
  transition: opacity .8s var(--ease-opacity), visibility .8s;
}
.pageloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pageloader__mark {
  font-size: var(--font-size-h4);
  letter-spacing: var(--letter-spacing-tight-02);
  opacity: 0;
  animation: loaderIn 1.4s var(--ease-out-gentle) forwards;
}
.pageloader__mark em { font-style: normal; color: var(--color-gray-mid); }
@keyframes loaderIn {
  0%   { opacity: 0; transform: translateY(.4em); }
  100% { opacity: 1; transform: none; }
}
/* Ohne JS darf der Loader die Seite nicht blockieren. */
.no-js .pageloader { display: none; }

/* --------------------------------------------------------------------------
   Custom Cursor - nur auf Zeigergeraeten
   -------------------------------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  width: 1.5em; height: 1.5em;
  margin: -.75em 0 0 -.75em;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: width .3s var(--ease-smooth), height .3s var(--ease-smooth),
              margin .3s var(--ease-smooth), background .3s var(--ease-opacity),
              opacity .3s var(--ease-opacity);
}
.cursor.is-active { opacity: 1; }
.cursor.is-hover {
  width: 3.5em; height: 3.5em; margin: -1.75em 0 0 -1.75em;
  background: rgba(255, 255, 255, .1);
  border-color: transparent;
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding: 1.75em var(--grid-margin);
}
/* Unterseiten haben keinen Hero dahinter - die Navigation bleibt sichtbar
   und legt sich mit Unschaerfe ueber den Inhalt. */
.nav--solid {
  position: fixed;
  background: rgba(14, 13, 13, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-line);
  padding-block: 1.15em;
}
.nav__list a[aria-current="page"] { opacity: 1; }
.nav__inner {
  display: flex;
  align-items: center;
  gap: 3em;
  /* Die fixierte Navigation der Unterseiten haengt am Fenster, nicht an der
     Buehne, ihr Balken laeuft also ueber die volle Breite. Das ist so
     gewollt. Nur ihr Inhalt muss auf Buehnenbreite bleiben, sonst stuende
     das Logo neben der Seite statt darueber. */
  max-width: calc(var(--size-stage) - 2 * var(--grid-margin));
  margin-inline: auto;
  width: 100%;
}
.nav__logo {
  font-size: var(--font-size-h5);
  letter-spacing: var(--letter-spacing-tight-02);
  line-height: 1;
}
.nav__logo span { color: var(--color-gray-light); }
.nav__list { display: flex; gap: 1.25em; }
.nav__list a {
  font-size: var(--font-size-caps);
  letter-spacing: var(--letter-spacing-tight-01);
  opacity: .82;
  transition: opacity var(--duration-fast) var(--ease-opacity);
}
.nav__list a:hover { opacity: 1; }

@media (max-width: 991px) {
  .nav__inner { gap: 1.25em; flex-wrap: wrap; }
  .nav__list  { gap: .9em; }
}

/* --------------------------------------------------------------------------
   1 - Hero
   Das Bild ist querformatig, Ruben laeuft mittig. Deshalb steht die
   Headline nicht mehr in einer Ecke, sondern links und rechts von ihm:
   "Athletik statt" links, "Bodybuilding." rechts, gemeinsame Grundlinie.
   Der Blick liest ueber ihn hinweg - er steht im Satz, nicht daneben.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero__background { position: absolute; inset: 0; z-index: 0; }
.hero__background video,
.hero__background img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Querformat 16:9. Ruben steht waagrecht mittig, sein Kopf auf rund
     16 % Hoehe. Der leichte Versatz nach oben haelt Kopf und Himmel im
     Bild, wenn ein flaches Fenster oben und unten beschneidet. */
  object-position: 50% 44%;
}
/* Verlaeufe, damit Text auf jedem Frame lesbar bleibt. Neu sind die
   seitlichen Vignetten: sie dunkeln genau die Flaechen, in denen die
   Headline steht. Der Korridor zwischen 38 % und 60 % bleibt hell -
   dort laeuft Ruben, und dort steht kein Text. */
.hero__background::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(14,13,13,.84) 0%,  rgba(14,13,13,.55) 18%,
      rgba(14,13,13,.10) 36%, rgba(14,13,13,.10) 60%,
      rgba(14,13,13,.55) 80%, rgba(14,13,13,.84) 100%),
    linear-gradient(to bottom, rgba(14,13,13,.62) 0%, rgba(14,13,13,.12) 24%, rgba(14,13,13,0) 40%),
    linear-gradient(to top,    rgba(14,13,13,.90) 0%, rgba(14,13,13,.50) 24%, rgba(14,13,13,0) 56%),
    rgba(14,13,13,.14);
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6.5em var(--grid-margin) 7.5em;
}

/* Drei Spalten: Text, freier Korridor, Text. Die Mittelspalte ist kein
   Inhalt, sondern Platzhalter fuer Ruben. Wird sie schmaler, ruecken die
   Woerter auf ihn zu und die Silhouette kollidiert mit der Schrift. */
.hero__headline {
  display: grid;
  /* Der Korridor ist breiter als Ruben selbst. Er laeuft mit
     ausgestellten Armen - ohne den Zuschlag stiess "statt" in seinen
     Ellbogen. Rechts steht mehr Platz, weil "Bodybuilding." die mit
     Abstand laengste Zeile ist. */
  grid-template-columns: minmax(0, 1fr) 26% minmax(0, 1.24fr);
  align-items: end;
  column-gap: 0;
  /* Zentriert die Zeile zwischen Navigation und Signatur. */
  margin-block: auto;
  /* Die laengste Zeile ist "Bodybuilding." und braucht 5.7 mal die
     Schriftgroesse. Sie steht in der rechten Spalte, die 41 % der
     Breite haelt - passt also bis rund 7.2vw. 6.5vw laesst Luft fuer
     Fallback-Schriften mit anderen Metriken. Wird die Headline
     geaendert oder die Mittelspalte verbreitert, muss dieser Wert
     nachgerechnet werden.

     Wichtig: Die Groesse sitzt hier, nicht erst auf .u-display. Die
     Zeilenmaske (.line, siehe motion.css) rechnet ihren Unterlaengen-
     Puffer in em. Steht die Schriftgroesse erst im Kind, ist das em der
     Maske das Body-em - der Puffer waere winzig und schnitte g, j, p, y ab. */
  font-size: min(var(--font-size-display), 6.5vw);
  /* Muss mit .u-display uebereinstimmen, sonst spannt der unsichtbare
     Zeilenstrut der Maske die Zeilen auseinander. */
  line-height: var(--line-height-90);
}
.hero__headline-side { display: block; }
/* Beide Seiten ruecken an den Korridor heran, nicht an den Bildrand. */
.hero__headline-side--left  { grid-column: 1; text-align: right; }
.hero__headline-side--right { grid-column: 3; text-align: left; }

.hero__headline .u-display {
  display: block;
  color: rgba(255, 255, 255, .94);
  font-size: inherit;
}
/* "statt" ist das Scharnier, nicht die Aussage - es tritt zurueck. */
.hero__headline .hero__word--muted {
  color: rgba(255, 255, 255, .55);
  font-style: italic;
  font-weight: var(--font-weight-regular);
}

.hero__wordmark {
  display: block;
  margin-top: .08em;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-90);
  letter-spacing: var(--letter-spacing-tight-04);
  font-weight: var(--font-weight-medium);
}
.hero__wordmark em {
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-gray-light);
}

/* Signatur unten links - klein, aber der Grund, warum die Seite nach
   Person statt nach Marke aussieht. */
.hero__signature {
  display: flex;
  flex-direction: column;
  gap: .5em;
  max-width: 22em;
}
.hero__signature img { height: auto; }
.hero__signature-name {
  font-size: var(--font-size-caps);
  letter-spacing: var(--letter-spacing-tight-01);
}
.hero__signature-role { color: var(--color-gray-light); }

/* Schmale Fenster tragen kein Flankieren: die Spalten waeren zu eng fuer
   "Bodybuilding.". Dort faellt die Headline in einen linksbuendigen
   Block unten zurueck, und die seitlichen Vignetten weichen einem
   gleichmaessigen Schleier. */
@media (max-width: 991px) {
  .hero__background video,
  .hero__background img { object-position: 48% 42%; }
  .hero__background::after {
    background:
      linear-gradient(to bottom, rgba(14,13,13,.66) 0%, rgba(14,13,13,.14) 26%, rgba(14,13,13,0) 44%),
      linear-gradient(to top,    rgba(14,13,13,.94) 0%, rgba(14,13,13,.62) 30%, rgba(14,13,13,0) 62%),
      rgba(14,13,13,.24);
  }
  .hero__inner { justify-content: flex-end; padding: 7em var(--grid-margin) 8em; gap: 2em; }
  .hero__headline {
    display: block;
    margin-block: 0 auto;
    margin-top: auto;
    text-align: left;
    font-size: min(var(--font-size-display), 15vw);
  }
  .hero__headline-side--left,
  .hero__headline-side--right { text-align: left; }
}

/* Fixierte Statusleiste unten - Pendant zum "NEXT RUN" der Referenz */
.statusbar {
  position: fixed;
  inset: auto var(--grid-margin) 1.25em auto;
  /* Jenseits der Buehnenbreite bleibt die Pille an deren rechter Kante
     stehen, nicht am Fensterrand. Der max()-Teil greift erst, wenn das
     Fenster breiter als die Buehne ist. */
  right: max(var(--grid-margin), calc((100vw - var(--size-stage)) / 2 + var(--grid-margin)));
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: 1.25em;
  padding: .5em .5em .5em 1.5em;
  background: rgba(20, 19, 19, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-line);
  border-radius: 100px;
  transform: translateY(150%);
  transition: transform var(--duration-slow) var(--ease-smooth);
}
.statusbar.is-visible { transform: none; }
.statusbar.is-done   { transform: translateY(150%); }
.statusbar__label { color: var(--color-gray-light); }
.statusbar__value { font-size: var(--font-size-caps); }
.statusbar .u-button { padding: .7em 1.3em; }

@media (max-width: 991px) {
  .statusbar {
    inset: auto var(--grid-margin) .9em var(--grid-margin);
    justify-content: space-between;
    gap: .75em;
    padding: .35em .35em .35em 1.1em;
  }
  .statusbar__value { display: none; }
  .statusbar .u-button { padding: .6em 1.1em; font-size: var(--font-size-small-mono); }
}

/* --------------------------------------------------------------------------
   Sektions-Kopf (wiederverwendet)
   -------------------------------------------------------------------------- */
.section-head { margin-bottom: var(--space-block); }
.section-head__label {
  display: block;
  margin-bottom: 2.5em;
  color: var(--color-gray-light);
}
.section-head__title { grid-column: 1 / span 7; }
.section-head__intro {
  grid-column: 9 / span 4;
  align-self: end;
  color: var(--color-gray-light);
}
@media (max-width: 991px) {
  .section-head__title,
  .section-head__intro { grid-column: 1 / -1; }
  .section-head__intro { margin-top: 1.5em; }
}

/* --------------------------------------------------------------------------
   2 - Werdegang (Beweis)
   Bild absolut im Item, Metadaten in Mono darunter. Uebernimmt die
   runs_cms_item-Anatomie der Referenz.
   -------------------------------------------------------------------------- */
.milestones__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.milestone { display: flex; flex-direction: column; }

.milestone__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface);
}
.milestone__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-gentle);
}
.milestone:hover .milestone__media img { transform: scale(1.04); }

/* Datum zerlegt gerendert - wirkt wie ein Messgeraet, nicht wie Deko.
   Genau das gibt der Referenz ihre sportliche Nuechternheit. */
.milestone__date {
  position: absolute;
  inset: auto auto 1.25em 1.25em;
  display: flex;
  align-items: baseline;
  font-size: var(--font-size-h4);
  letter-spacing: var(--letter-spacing-tight-02);
  line-height: 1;
}
.milestone__date span { display: block; }
.milestone__date .sep { color: var(--color-gray-light); padding: 0 .06em; }

.milestone__title { margin-top: 1.5em; }

.milestone__meta {
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin-top: 1.25em;
  padding-top: 1.25em;
  border-top: 1px solid var(--color-line);
}
.milestone__meta div { display: flex; justify-content: space-between; gap: 1em; }
.milestone__meta dt { color: var(--color-gray-light); }
.milestone__meta dd { margin: 0; text-align: right; }

.milestone__text { margin-top: 1.25em; }

@media (max-width: 991px) {
  .milestones__list { grid-template-columns: 1fr; gap: 3.5em; }
}

/* Haltungs-Marker - die kleinen Mono-Zeilen, die die Botschaft
   ueber die Seite tätowieren */
.markers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2em;
  margin-top: var(--space-block);
  padding-top: 2em;
  border-top: 1px solid var(--color-line);
  color: var(--color-gray-mid);
}

/* --------------------------------------------------------------------------
   3 - Training (Angebot)

   Vorher eine Zeilenliste mit schwebender Hover-Vorschau. Das trug vier
   Angebote, bei zweien blieb die halbe Sektion leer und die Vorschau ging
   ins Leere. Jetzt zwei Kacheln: das Foto ist sofort da, der Preis steht
   gross darunter, die ganze Kachel ist der Link.
   -------------------------------------------------------------------------- */
.offer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.tile {
  display: block;
  color: inherit;
  text-decoration: none;
}
.tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface);
}
.tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Der Zoom sitzt auf dem Bild, nicht auf der Kachel: sonst wandern
     Ueberschrift und Preis mit und die Zeile wirkt unruhig. */
  transition: transform var(--duration-slow) var(--ease-smooth);
}
.tile:hover .tile__media img { transform: scale(1.04); }

.tile__body { padding-top: 1.75em; }
.tile__num { display: block; margin-bottom: 1em; color: var(--color-gray-mid); }
.tile__name { margin-bottom: .35em; }
.tile__text { color: var(--color-gray-light); margin-bottom: 1.75em; }

.tile__foot {
  display: flex;
  align-items: baseline;
  gap: 1em;
  padding-top: 1.25em;
  border-top: 1px solid var(--color-line);
}
.tile__price {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-tight-01);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.tile__unit { font-style: normal; color: var(--color-gray-mid); }
/* Der Pfeil sitzt ganz rechts und ruecht beim Ueberfahren nach - dasselbe
   Signal wie beim Teaser am Seitenende, damit die Seite eine Sprache spricht. */
.tile__arrow {
  margin-left: auto;
  font-style: normal;
  transition: transform var(--duration-base) var(--ease-smooth);
}
.tile:hover .tile__arrow { transform: translateX(.4em); }

@media (max-width: 991px) {
  .offer__grid { grid-template-columns: 1fr; gap: 3em; }
  .tile__media { aspect-ratio: 16 / 10; }
}

.offer__note { margin-top: 2.5em; color: var(--color-gray-light); }

/* --------------------------------------------------------------------------
   4 - Haltung (Mission) - die Schluesselsektion
   -------------------------------------------------------------------------- */
.stance__statement { max-width: 20ch; line-height: var(--line-height-100); }
.stance__statement p + p { margin-top: .55em; }
.stance__statement .lead { color: var(--color); }
.stance__statement .muted { color: var(--color-gray-dark); }
.stance__statement .question { color: var(--color); }

/* Asymmetrisches Raster - kein gleichfoermiges Grid, das schafft Rhythmus */
.stance__gallery {
  margin-top: var(--space-block);
  display: grid;
  grid-template-columns: var(--grid);
  grid-auto-rows: 6em;
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
}
.stance__item { position: relative; overflow: hidden; background: var(--color-surface); }
.stance__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.stance__item--a { grid-column: 1 / span 4;  grid-row: span 5; }
.stance__item--b { grid-column: 5 / span 3;  grid-row: span 3; }
.stance__item--c { grid-column: 8 / span 5;  grid-row: span 4; }
.stance__item--d { grid-column: 5 / span 3;  grid-row: span 2; }

.stance__cta {
  grid-column: 8 / span 5;
  grid-row: span 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
}
.stance__cta span { color: var(--color-gray-light); }

@media (max-width: 991px) {
  .stance__statement { max-width: 100%; }
  .stance__gallery { grid-auto-rows: 5em; }
  .stance__item--a { grid-column: 1 / span 4; grid-row: span 4; }
  .stance__item--b { grid-column: 1 / span 2; grid-row: span 3; }
  .stance__item--c { grid-column: 3 / span 2; grid-row: span 3; }
  .stance__item--d { display: none; }
  .stance__cta { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   5 - Ablauf

   Vorher drifteten die vier Woerter beim Scrollen seitlich. Das war Bewegung
   ohne Aussage und hat das Lesen gestoert. Jetzt traegt eine Schiene die
   Sektion: sie zeichnet sich beim Scrollen von oben nach unten und macht
   sichtbar, dass die vier Schritte aufeinander folgen.
   -------------------------------------------------------------------------- */
.steps { position: relative; padding-left: 4.5em; }

.steps__rail {
  display: block;
  position: absolute;
  top: 2.6em;
  bottom: 4em;
  left: 1.15em;
  width: 1px;
  background: var(--color-line);
}
.steps__rail i {
  display: block;
  height: 100%;
  background: var(--color);
  transform: scaleY(0);
  transform-origin: top;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid-gutter);
  align-items: start;
  padding: 2em 0 3em;
}

/* Der Punkt sitzt auf der Schiene und markiert den erreichten Schritt. */
.step__dot {
  position: absolute;
  left: -3.35em;
  top: 2.5em;
  width: .55em; height: .55em;
  border-radius: 50%;
  background: var(--color-background);
  box-shadow: 0 0 0 1px var(--color-gray-mid);
  transition: background var(--duration-base) var(--ease-opacity),
              box-shadow var(--duration-base) var(--ease-opacity);
}
.step.is-passed .step__dot { background: var(--color); box-shadow: 0 0 0 1px var(--color); }

.step__num { position: absolute; left: -3.6em; top: 4.2em; color: var(--color-gray-mid); }

.step__word {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-90);
  letter-spacing: var(--letter-spacing-tight-04);
  font-weight: var(--font-weight-medium);
  margin-bottom: .5em;
}
.step__text { color: var(--color-gray-light); max-width: 38ch; }

.step__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface);
}
.step__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991px) {
  .steps { padding-left: 2.75em; }
  .steps__rail { left: .55em; }
  .step { grid-template-columns: 1fr; gap: 1.5em; padding: 1.5em 0 2.5em; }
  .step__dot { left: -2.5em; top: 1.9em; }
  .step__num { left: -2.5em; top: 3.4em; }
  .step__media { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   6 - Footer / CTA
   -------------------------------------------------------------------------- */
.footer { padding-block: var(--space-section) 6em; }

.footer__ready {
  font-size: var(--font-size-display);
  line-height: var(--line-height-90);
  letter-spacing: var(--letter-spacing-tight-04);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-block);
}

.footer__body { align-items: start; }
.footer__intro { grid-column: 1 / span 4; }
.footer__intro p { margin-top: 1em; color: var(--color-gray-light); }
.footer__form  { grid-column: 6 / span 7; }

@media (max-width: 991px) {
  .footer__intro, .footer__form { grid-column: 1 / -1; }
  .footer__form { margin-top: 3em; }
}

/* Formular */
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; }
.field { display: flex; flex-direction: column; gap: .6em; }
.field--full { grid-column: 1 / -1; }
.field label { color: var(--color-gray-light); }
.field input,
.field select,
.field textarea {
  padding: .85em 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color);
  transition: border-color var(--duration-fast) var(--ease-opacity);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-gray-mid); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color);
}
.field textarea { resize: vertical; min-height: 4em; }
.field select option { background: var(--color-background); color: var(--color); }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--color-accent-light); }
.field__error {
  color: var(--color-accent-light);
  min-height: 1.2em;
}

.form__actions {
  display: flex;
  align-items: center;
  gap: 1.5em;
  margin-top: 2.5em;
  flex-wrap: wrap;
}
.form__status { color: var(--color-gray-light); }
.form__status.is-error   { color: var(--color-accent-light); }
.form__status.is-success { color: var(--color); }

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

/* Footer-Fuss */
.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5em;
  flex-wrap: wrap;
  margin-top: var(--space-section);
  padding-top: 2em;
  border-top: 1px solid var(--color-line);
  color: var(--color-gray-light);
}
.footer__base nav { display: flex; gap: 1.5em; flex-wrap: wrap; }
/* Die Signatur springt beim Hover in die Hausfarbe von getyoursite. Der
   Unterstrich von .u-link erbt sie ueber currentColor mit. */
.footer__gys { transition: color var(--duration-base) var(--ease-smooth); }
.footer__gys:hover,
.footer__gys:focus-visible { color: var(--color-gys); }

/* --------------------------------------------------------------------------
   Ueber mich (eigene Seite)
   -------------------------------------------------------------------------- */
.page-head {
  padding: 11em var(--grid-margin) var(--space-block);
}
.page-head__title { grid-column: 1 / span 7; }
.page-head__label { display: block; margin-bottom: 2em; color: var(--color-gray-light); }
.page-head__meta  { grid-column: 9 / span 4; align-self: end; color: var(--color-gray-light); }

.about__body { align-items: start; }
/* Das Portraet sitzt jetzt zuoberst im Aufmacher, hier bleibt reiner Text.
   Damit die Textspalte nicht allein im Raster haengt, steht das Label links
   in der frueheren Bildspalte. */
.about__aside { grid-column: 1 / span 5; }
.about__text { grid-column: 7 / span 5; }
.about__text p { margin-bottom: 1.5em; color: var(--color-gray-light); }
.about__text p.lead {
  color: var(--color);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-120);
  letter-spacing: var(--letter-spacing-tight-01);
  margin-bottom: 2em;
}
.about__cta { margin-top: 2.5em; }

.about__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
  margin-top: var(--space-section);
  /* Die Parallaxe verschiebt die Bilder um einige Prozent ihrer Hoehe.
     Ohne Abstand nach unten schoeben sie sich in den Teaser hinein. */
  margin-bottom: var(--space-section);
}
.about__strip figure { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-surface); }
.about__strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991px) {
  .page-head { padding-top: 8em; }
  .page-head__title, .page-head__meta { grid-column: 1 / -1; }
  /* Gestapelt sitzt die Zeile direkt unter der Ueberschrift. Bei 1.5em
     stiess sie in deren Unterlaengen, die Zeilenhoehe 0.9 laesst kaum
     Luft. */
  .page-head__meta { margin-top: 2.5em; }
  .about__aside, .about__text { grid-column: 1 / -1; }
  .about__text { margin-top: 2.5em; }
  .about__body--text .about__text { margin-top: 1.5em; }
  .about__strip { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Rechtsseiten
   -------------------------------------------------------------------------- */
.legal { max-width: 60ch; }
.legal h2 { margin: 2.5em 0 .75em; font-size: var(--font-size-h4); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--color-gray-light); margin-bottom: 1em; }
.legal ul { list-style: disc; padding-left: 1.25em; }
/* Datumszeile ueber dem Text, so leise wie die Labels im Rest der Seite. */
.legal__stand { color: var(--color-gray-mid); margin-bottom: 2.5em; }

/* --------------------------------------------------------------------------
   Mobile Navigation

   Auf schmalen Viewports quetschten sich Logo und drei Links in eine Zeile.
   Stattdessen ein Burger, der ein Vollbild-Menue oeffnet: grosse Links in der
   Mitte, unten der naechste Schritt. Das ist auf dem Handy mit dem Daumen
   bedienbar und gibt den Links das Gewicht, das sie auf dem Desktop haben.
   -------------------------------------------------------------------------- */
.nav__burger {
  display: none;
  position: relative;
  z-index: calc(var(--z-nav) + 2);
  width: 2.5em;
  height: 2.5em;
  margin-left: auto;
  margin-right: -.5em;
  /* Der Button dreht beim Wechsel selbst mit. Eine grosse, langsame Bewegung
     traegt die kleine schnelle der Striche, dadurch wirkt der Wechsel weich
     statt gefaltet. Am Ende steht wieder ein X, denn ein X sieht um 90 Grad
     gedreht gleich aus. Sichtbar ist nur der Schwung dorthin. */
  transition: rotate .5s var(--ease-smooth);
}
.nav__burger i {
  position: absolute;
  left: .5em;
  right: .5em;
  height: 1px;
  background: var(--color);
  /* Drehung und Verschiebung liegen als eigene Eigenschaften vor, nicht in
     einem gemeinsamen transform. Nur so laesst sich beides getrennt takten.

     Die zwei Schritte ueberlappen: der zweite startet, waehrend der erste
     noch laeuft. Warten sie aufeinander, stockt die Bewegung in der Mitte.

     Schliessen: der Balken dreht in die Waagrechte zurueck und faehrt kurz
     darauf auf seine Hoehe. */
  transition: rotate .42s var(--ease-smooth),
              translate .42s .12s var(--ease-smooth),
              opacity .25s var(--ease-opacity);
}
.nav__burger i:nth-child(1) { top: .95em; }
.nav__burger i:nth-child(2) { top: 1.5em; }

.menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) + 1);
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  /* Das Menue faehrt von oben ein statt einzublenden. Eine Flaeche, die
     sich bewegt, wirkt wie eine Ebene, nicht wie ein Overlay. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-smooth), visibility .7s;
  visibility: hidden;
}
.menu__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .1em;
  padding: 6em var(--grid-margin) 2em;
}
.menu__link {
  font-size: var(--font-size-h1);
  line-height: 1.12;
  letter-spacing: var(--letter-spacing-tight-02);
  font-weight: var(--font-weight-medium);
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .5s var(--ease-opacity), transform .6s var(--ease-smooth);
}
.menu__link[aria-current="page"] { color: var(--color-gray-mid); }

.menu__foot {
  padding: 0 var(--grid-margin) 2.5em;
  text-align: center;
  opacity: 0;
  transition: opacity .5s var(--ease-opacity) .2s;
}
.menu__rule {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1.5em;
  color: var(--color-gray-mid);
}
.menu__rule::before,
.menu__rule::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.menu__where { display: block; margin-bottom: .3em; }
.menu__city  { display: block; color: var(--color-gray-mid); margin-bottom: 1.5em; }
.menu__foot .u-button { display: flex; justify-content: center; width: 100%; }

/* Geoeffnet */
.is-menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.is-menu-open .menu__link { opacity: 1; transform: none; }
.is-menu-open .menu__foot { opacity: 1; }
/* Oeffnen: umgekehrte Reihenfolge. Die zwei Striche fahren erst zusammen,
   dann kreuzen sie sich. Man sieht dem Zeichen an, dass es aus dem Burger
   entsteht, statt dass es ihn ersetzt. */
.is-menu-open .nav__burger { rotate: 90deg; }
.is-menu-open .nav__burger i {
  transition: translate .42s var(--ease-smooth),
              rotate .42s .12s var(--ease-smooth);
}
/* Die Striche liegen auf .95em und 1.5em, die Mitte des Buttons auf 1.25em.
   Jeder faehrt genau dorthin, nicht nur auf die Mitte zwischen beiden. Sonst
   sitzt der Kreuzungspunkt neben dem Drehpunkt des Buttons und das X eiert,
   waehrend der Button dreht. */
.is-menu-open .nav__burger i:nth-child(1) { translate: 0 .3em;  rotate: 45deg; }
.is-menu-open .nav__burger i:nth-child(2) { translate: 0 -.25em; rotate: -45deg; }
.is-menu-open { overflow: hidden; }

@media (max-width: 991px) {
  .nav__burger { display: block; }
  .nav__list   { display: none; }
  .nav__inner  { flex-wrap: nowrap; gap: 1em; }
  /* Auf dem Handy bleibt die Navigation immer erreichbar. Waere sie wie auf
     dem Desktop absolut positioniert, waere der Burger nach dem Scrollen weg.
     Sie muss ausserdem ueber dem Menue liegen, damit er klickbar bleibt. */
  .nav {
    position: fixed;
    z-index: calc(var(--z-nav) + 2);
    padding-block: 1.15em;
    transition: background var(--duration-base) var(--ease-opacity),
                border-color var(--duration-base) var(--ease-opacity);
    border-bottom: 1px solid transparent;
  }
  /* Erst wenn Inhalt darunter liegt, bekommt sie einen Grund. */
  .is-scrolled .nav {
    background: rgba(14, 13, 13, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--color-line);
  }
  .is-menu-open .nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
}

/* Solange das Menue offen ist, muss die Navigation sichtbar sein, auch wenn
   die Intro sie noch nicht eingeblendet hat. */
.is-menu-open [data-nav] { opacity: 1 !important; }
@media (min-width: 992px) {
  .menu { display: none; }
}

/* Die Links laufen gestaffelt ein, damit das Menue nicht als Block erscheint. */
.menu__link:nth-child(1) { transition-delay: .18s; }
.menu__link:nth-child(2) { transition-delay: .25s; }
.menu__link:nth-child(3) { transition-delay: .32s; }
.menu__link:nth-child(4) { transition-delay: .39s; }

@media (prefers-reduced-motion: reduce) {
  .menu, .menu__link, .menu__foot, .nav__burger, .nav__burger i { transition: none; }
  /* Ohne diese Zeile bliebe der Zweitakt an, die Regel darueber ist
     schwaecher als die des geoeffneten Zustands. */
  .is-menu-open .nav__burger i { transition: none; }
}