/* ==========================================================================
   Verkaufs-Sektionen - Fuer wen, Problem, Pakete, Warum ich, FAQ, Teaser
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fuer wen - vier Typen. Der Besucher soll sich in unter zehn Sekunden
   selbst erkennen, sonst klickt er weg.
   -------------------------------------------------------------------------- */
.audience__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
}
.audience__item { display: flex; flex-direction: column; }

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

.audience__num {
  position: absolute;
  inset: 1em auto auto 1em;
  color: var(--color);
  mix-blend-mode: difference;
}
.audience__title { margin-top: 1.25em; }

/* Der Schmerzpunkt in Anfuehrungszeichen - die Stimme des Besuchers,
   nicht die des Trainers. Deshalb kursiv und abgesetzt. */
.audience__pain {
  margin-top: .75em;
  font-style: italic;
  color: var(--color-gray-light);
}
.audience__fit {
  margin-top: 1.25em;
  padding-top: 1em;
  border-top: 1px solid var(--color-line);
  color: var(--color-gray-mid);
}
.audience__fit b { color: var(--color); font-weight: var(--font-weight-medium); }

@media (max-width: 991px) {
  .audience__list { grid-template-columns: 1fr 1fr; gap: 2em var(--grid-gutter); }
}
@media (max-width: 560px) {
  .audience__list { grid-template-columns: 1fr; gap: 2.5em; }
}

/* --------------------------------------------------------------------------
   Problem - benennt, warum es sonst nicht klappt, bevor die Loesung kommt
   -------------------------------------------------------------------------- */
.problem__body { align-items: start; }
.problem__media {
  grid-column: 1 / span 5;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface);
}
.problem__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.problem__text { grid-column: 7 / span 6; }

.problem__list { margin-top: 2em; }
.problem__list li {
  display: flex;
  gap: 1.25em;
  padding: 1.15em 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-gray-light);
}
.problem__list li:first-child { border-top: 1px solid var(--color-line); }
.problem__list b {
  flex: 0 0 auto;
  color: var(--color-gray-dark);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-small-mono);
  letter-spacing: var(--letter-spacing-loose-05);
  text-transform: uppercase;
  padding-top: .35em;
  font-weight: var(--font-weight-regular);
}
.problem__turn { margin-top: 2.5em; color: var(--color); }

@media (max-width: 991px) {
  .problem__media, .problem__text { grid-column: 1 / -1; }
  .problem__text { margin-top: 2.5em; }
}

/* --------------------------------------------------------------------------
   Paketliste

   Eine Spalte. Jedes Paket ist selbst ein zweispaltiges Layout mit klebender
   Bildspalte, siehe .pkg weiter unten. Zwei Pakete nebeneinander wuerden das
   halbieren und die Bilder unverhaeltnismaessig gross machen.
   -------------------------------------------------------------------------- */
.packages__list { display: block; }

.packages__note {
  margin-top: 2.5em;
  color: var(--color-gray-mid);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Warum ich - Differenzierung. Hier lebt der Werdegang als Beleg.
   -------------------------------------------------------------------------- */
.why__body { align-items: center; }
.why__text  { grid-column: 1 / span 6; }
.why__media {
  grid-column: 8 / span 5;
  position: relative;
  aspect-ratio: 1.3 / 1;
  overflow: hidden;
  background: var(--color-surface);
}
.why__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.why__points { margin-top: 2.5em; }
.why__points > li { padding: 1.5em 0; border-top: 1px solid var(--color-line); }
.why__points > li:last-child { border-bottom: 1px solid var(--color-line); }
.why__points h3 { margin-bottom: .5em; }
.why__points p { color: var(--color-gray-light); }

@media (max-width: 991px) {
  .why__text, .why__media { grid-column: 1 / -1; }
  .why__media { margin-bottom: 2.5em; }
  .why__body { display: flex; flex-direction: column-reverse; }
}

/* --------------------------------------------------------------------------
   FAQ - raeumt die Einwaende ab, die sonst zum Wegklicken fuehren
   -------------------------------------------------------------------------- */
.faq__list { border-top: 1px solid var(--color-line); }
.faq__item { border-bottom: 1px solid var(--color-line); }

.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5em;
  padding: 1.5em 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-opacity);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--color-gray-light); }

/* Plus, das sich beim Oeffnen zum Minus dreht */
.faq__icon {
  flex: 0 0 auto;
  position: relative;
  width: 1em; height: 1em;
  margin-top: .35em;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-smooth);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }

.faq__answer {
  padding-bottom: 1.75em;
  max-width: 62ch;
  color: var(--color-gray-light);
}
.faq__answer p + p { margin-top: 1em; }

/* --------------------------------------------------------------------------
   Teaser - verbindet die drei Seiten miteinander
   -------------------------------------------------------------------------- */
.teaser {
  position: relative;
  display: block;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
}
.teaser__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  flex-wrap: wrap;
  padding: 4.5em var(--grid-margin);
}
.teaser__label { display: block; margin-bottom: .75em; color: var(--color-gray-light); }
.teaser__bg { position: absolute; inset: 0; opacity: .22; }
.teaser__bg img { width: 100%; height: 100%; object-fit: cover; }
.teaser:hover .teaser__bg { opacity: .32; }
.teaser__bg { transition: opacity var(--duration-slow) var(--ease-opacity); }

.teaser__arrow {
  flex: 0 0 auto;
  font-size: var(--font-size-h3);
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-smooth);
}
.teaser:hover .teaser__arrow { transform: translateX(.35em); }

@media (max-width: 991px) {
  .teaser__inner { padding: 3em var(--grid-margin); }
}

/* --------------------------------------------------------------------------
   CTA-Band
   Ein einziger, riesiger Handlungsaufruf, der endlos durchlaeuft. Er ersetzt
   den kleinen Button am Seitenende: was so gross ist, kann man nicht
   uebersehen, und die Bewegung zieht das Auge dorthin.
   -------------------------------------------------------------------------- */
.cta-band {
  display: block;
  overflow: hidden;
  padding: 1em 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-background);
  transition: background var(--duration-base) var(--ease-opacity),
              color var(--duration-base) var(--ease-opacity);
}
.cta-band:hover { background: var(--color); color: var(--color-background); }

.cta-band__track { display: flex; width: max-content; will-change: transform; }
.cta-band__set {
  display: flex;
  align-items: center;
  gap: .5em;
  padding-right: .5em;
  white-space: nowrap;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-120);
  letter-spacing: var(--letter-spacing-tight-02);
  font-weight: var(--font-weight-medium);
}
.cta-band__set i { font-style: normal; opacity: .35; }
.no-js .cta-band__track,
.no-gsap .cta-band__track { animation: tickerSlide 22s linear infinite; }

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

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
  padding-bottom: var(--space-block);
}
.footer__brand em {
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-gray-light);
}
.footer__brand p { margin-top: 1.5em; color: var(--color-gray-light); }

.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: .65em; }
.footer__colhead { color: var(--color-gray-mid); margin-bottom: .5em; }
.footer__col a { color: var(--color-gray-light); transition: color var(--duration-fast) var(--ease-opacity); }
.footer__col a:hover { color: var(--color); }

.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5em;
  flex-wrap: wrap;
  padding-top: 2em;
  border-top: 1px solid var(--color-line);
  color: var(--color-gray-mid);
}
.footer__base a { color: var(--color-gray-light); }
.footer__base a:hover { color: var(--color); }

/* Die Ortszeit ist ein kleines Detail, das die Seite lebendig macht:
   sie zeigt, dass hinter der Marke jemand an einem echten Ort sitzt. */
.footer__clock { font-variant-numeric: tabular-nums; }

@media (max-width: 991px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5em var(--grid-gutter); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__base { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Kontaktseite

   Vorher war unklar, was wozu gehoert: kleine graue Beschriftungen, alles
   gleich gewichtet. Jetzt tragen drei nummerierte Bloecke die linke Spalte,
   jeder mit echter Ueberschrift, und das Formular sitzt rechts in einer
   abgesetzten Karte. Links steht, was passiert. Rechts, was du tust.
   -------------------------------------------------------------------------- */
.contact { align-items: start; padding-bottom: var(--space-section); }
.contact__aside { grid-column: 1 / span 5; }
.contact__form  { grid-column: 7 / span 6; position: sticky; top: 7em; }

.contact__block + .contact__block {
  margin-top: 3em;
  padding-top: 3em;
  border-top: 1px solid var(--color-line);
}
.contact__head {
  display: flex;
  align-items: baseline;
  gap: 1em;
  margin-bottom: 1.5em;
}
.contact__head span { color: var(--color-gray-dark); }

.contact__steps li { display: flex; flex-direction: column; gap: .4em; }
.contact__steps li + li { margin-top: 1.5em; }
.contact__steps b { color: var(--color-gray-mid); font-weight: var(--font-weight-regular); }
.contact__steps p { color: var(--color-gray-light); }

.contact__direct li {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: 1.5em;
  padding: .8em 0;
  border-top: 1px solid var(--color-line);
  color: var(--color-gray-light);
}
.contact__direct li:last-child { border-bottom: 1px solid var(--color-line); }
.contact__key { color: var(--color-gray-mid); }

/* Die Karte macht auf einen Blick klar: hier wird etwas ausgefuellt. */
.formcard {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: 2em;
}
.formcard__head {
  margin-bottom: 2em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--color-line);
}
.formcard__head p { margin-top: .6em; color: var(--color-gray-mid); }

@media (max-width: 991px) {
  .contact__aside, .contact__form { grid-column: 1 / -1; }
  .contact__form { margin-top: 3em; position: static; }
  .contact__direct li { grid-template-columns: 1fr; gap: .3em; }
  .formcard { padding: 1.5em; }
}


/* --------------------------------------------------------------------------
   Pakete, zweite Fassung

   Aufzaehlungen mit Punkten lesen sich wie eine Packungsbeilage. Stattdessen:
   ein Datenblatt in Mono, wie die Referenz es fuer START und DISTANCE nutzt,
   plus die vollstaendige Preisstaffel. Beides ist konkret statt beschreibend.
   Die Bildspalte klebt, waehrend der Inhalt daran vorbeilaeuft.
   -------------------------------------------------------------------------- */
.pkg {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--grid-gutter);
  padding: var(--space-block) 0;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: 6em;
}
.pkg:last-of-type { border-bottom: 1px solid var(--color-line); }

/* Das empfohlene Paket bekommt einen eigenen Grund, nicht nur ein Schildchen.
   Die Flaeche hebt es aus der Liste, ohne dass ein zweiter Farbton noetig
   waere - der Kontrast kommt aus dem Untergrund, nicht aus Buntheit. */
.pkg--lead {
  background: var(--color-surface);
  padding-inline: var(--grid-gutter);
  margin-inline: calc(var(--grid-gutter) * -1);
}

.pkg__sticky { position: sticky; top: 7em; align-self: start; }
.pkg__num {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
  color: var(--color-gray-mid);
}
.pkg__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-surface); }
.pkg__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pkg__title { margin-bottom: .35em; }
/* Eine Zeile Klartext, an wen sich das Paket richtet. Steht vor allem
   anderen, weil die meisten Besucher zuerst aussortieren und erst dann
   vergleichen. */
.pkg__for {
  display: block;
  margin-bottom: 1.6em;
  color: var(--color-gray-mid);
}
/* Der Ergebnissatz steht gross und allein. Er ist das Einzige, was der
   Besucher wirklich kauft. */
.pkg__result {
  color: var(--color-gray-light);
  max-width: 26ch;
  margin-bottom: 2.5em;
}
.pkg__label { display: block; margin-bottom: 1em; color: var(--color-gray-mid); }

/* Datenblatt - Mono nur fuer die Bezeichner. Werte in Versalmono liest man
   Zeichen fuer Zeichen; als normaler Satz liest man sie als Wort. */
.pkg__specs { margin-bottom: 2.5em; }
.pkg__specs > div {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: 1.5em;
  align-items: baseline;
  padding: .9em 0;
  border-top: 1px solid var(--color-line);
}
.pkg__specs > div:last-child { border-bottom: 1px solid var(--color-line); }
.pkg__specs dt { color: var(--color-gray-mid); }
.pkg__specs dd { margin: 0; color: var(--color); }

/* Bereiche - was inhaltlich drin steckt, als Liste statt als Satz. Ein
   Fliesstext mit neun Schlagworten liest niemand zu Ende; als Marken
   scannt man sie und bleibt an dem haengen, das einen betrifft. */
.pkg__areas { margin-bottom: 2.5em; }
.tags { display: flex; flex-wrap: wrap; gap: .5em; }
.tags li {
  padding: .5em .85em .45em;
  border: 1px solid var(--color-line);
  border-radius: 2em;
  color: var(--color-gray-light);
}

/* Preisstaffel - der Grund, warum die Seite zwei Spalten und nicht vier
   hat: die Abstufung steckt jetzt im Paket, nicht in vier Paketnamen.
   Drei Spalten je Zeile - Bezeichnung, Zusatz, Betrag -, damit die
   Betraege eine gemeinsame Kante haben und man von oben nach unten
   vergleichen kann. */
.pkg__rates { margin-bottom: 2.5em; }
.rates { border-top: 1px solid var(--color-line); }
.rates li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name preis" "note preis";
  column-gap: 1.5em;
  align-items: baseline;
  padding: .9em 0;
  border-bottom: 1px solid var(--color-line);
}
.rates__name  { grid-area: name; color: var(--color); }
.rates__note  { grid-area: note; margin-top: .3em; color: var(--color-gray-mid); }
.rates__price {
  grid-area: preis;
  align-self: center;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.rates__foot { margin-top: 1em; color: var(--color-gray-mid); }

.pkg__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5em;
  flex-wrap: wrap;
  padding-top: 1.75em;
  border-top: 1px solid var(--color-line);
}
.pkg__price { display: flex; flex-direction: column; gap: .35em; }
.pkg__price span { color: var(--color-gray-mid); }
/* Der Preis in Satoshi statt Versalmono. Als Mono-Versalie las er sich wie
   eine Artikelnummer - ausgerechnet die Zahl, auf die alles zulaeuft. */
.pkg__price b {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-tight-02);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.pkg__price em { font-style: normal; color: var(--color-gray-light); }

.pkg__flag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1em;
  padding: .45em .9em;
  background: var(--color);
  color: var(--color-background);
  border-radius: 100px;
}

@media (max-width: 991px) {
  .pkg { grid-template-columns: 1fr; gap: 2.5em; }
  .pkg--lead { padding-inline: var(--grid-margin); margin-inline: calc(var(--grid-margin) * -1); }
  .pkg__sticky { position: static; }
  .pkg__media { aspect-ratio: 4 / 3; }
  .pkg__specs > div { grid-template-columns: 1fr; gap: .3em; }
}


/* --------------------------------------------------------------------------
   Auswahl - zwei Karten

   Vorher stand hier eine Vergleichstafel. Bei vier Paketen war das richtig,
   bei zweien wiederholt sie nur, was direkt darunter ausfuehrlich steht -
   und auf dem Handy zwingt eine Tabelle mit drei Spalten zum
   Seitwaertsscrollen. Zwei Karten stapeln sich dort einfach.

   Jede Karte beantwortet drei Fragen in dieser Reihenfolge: fuer wen, was
   kostet es, was steckt drin. Der Sprunglink darunter fuehrt zur vollen
   Preisstaffel, die Karte selbst bleibt kurz.
   -------------------------------------------------------------------------- */
.choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gutter);
}
.choice__card {
  display: flex;
  flex-direction: column;
  padding: var(--space-block) var(--grid-gutter);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.choice__num { display: block; margin-bottom: 1.5em; color: var(--color-gray-mid); }
.choice__name { margin-bottom: .5em; }
.choice__for {
  color: var(--color-gray-light);
  max-width: 30ch;
  margin-bottom: 2em;
}

/* Der Preis ist der Grund, warum jemand die Karte ueberhaupt liest. Er
   bekommt eine eigene Zone mit Linie darueber, damit er nicht als weiterer
   Absatz durchrutscht. */
.choice__price {
  padding-top: 1.5em;
  border-top: 1px solid var(--color-line);
  margin-bottom: 2em;
}
.choice__price b {
  display: block;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-tight-02);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.choice__price span { display: block; margin-top: .8em; color: var(--color-gray-light); }

/* Nur drei Bereiche als Vorgeschmack. Alle neun waeren eine Wand und die
   Karte verlaere ihren Zweck - die vollstaendige Liste steht unten. */
.choice__areas {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin-bottom: 2em;
}
.choice__areas li {
  padding: .5em .85em .45em;
  border: 1px solid var(--color-line);
  border-radius: 2em;
  color: var(--color-gray-light);
}
.choice__more { border-style: dashed; color: var(--color-gray-mid); }

.choice__meta { margin-bottom: 2.5em; }
.choice__meta > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 1.25em;
  align-items: baseline;
  padding: .75em 0;
  border-top: 1px solid var(--color-line);
}
.choice__meta > div:last-child { border-bottom: 1px solid var(--color-line); }
.choice__meta dt { color: var(--color-gray-mid); }
.choice__meta dd { margin: 0; color: var(--color); }

/* Der Knopf sitzt unten buendig, auch wenn die eine Karte kuerzer ist als
   die andere - sonst stehen die beiden Aufforderungen auf verschiedenen
   Hoehen und die Karten wirken unfertig. */
.choice__actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25em;
}
.choice__jump { color: var(--color-gray-light); }
.choice__hint { margin-top: 1.5em; color: var(--color-gray-mid); }

@media (max-width: 991px) {
  .choice { grid-template-columns: 1fr; gap: 1.5em; }
  .choice__card { padding: var(--space-block) var(--grid-margin); }
  .choice__meta > div { grid-template-columns: 1fr; gap: .3em; }
}


/* --------------------------------------------------------------------------
   Versprechen - telefonische Erreichbarkeit im Abo

   Das stand vorher als graue Kleinschrift unter der Tafel, also genau dort,
   wo niemand hinschaut. Es ist aber das eine, was Rubén anbietet und die
   meisten nicht. Deshalb ein eigener Block ueber die volle Breite: helle
   Flaeche, viel Luft, Ueberschrift in Grad der Sektionstitel.
   -------------------------------------------------------------------------- */
.promise {
  /* Der Block steht zwischen zwei Sektionen, die ihren Abstand selbst
     mitbringen. Nach unten hat er keine - ohne diesen Rand klebte die
     Beschriftung "Preisliste" direkt am Rahmen. */
  margin-bottom: var(--space-section);
  padding: var(--space-block) var(--grid-gutter);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  text-align: center;
}
.promise__label {
  display: inline-block;
  margin-bottom: 1.75em;
  padding: .45em .9em .4em;
  border-radius: 2em;
  background: var(--color);
  color: var(--color-background);
  letter-spacing: var(--letter-spacing-loose-05);
}
.promise__title { margin-bottom: .6em; }
.promise__text {
  color: var(--color-gray-light);
  max-width: 46ch;
  margin-inline: auto;
}
/* Statt der Telefonnummer steht hier, was die Erreichbarkeit dem Kunden
   bringt. Eine Nummer ist eine Angabe, kein Argument - und der naechste
   Schritt bleibt ueberall auf der Seite derselbe: das Erstgespraech. */
.promise__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
  margin: var(--space-block) auto 0;
  max-width: 68em;
  text-align: left;
}
.promise__points li { padding-top: 1.25em; border-top: 1px solid var(--color-line); }
.promise__idx { display: block; margin-bottom: .75em; color: var(--color-gray-dark); }
.promise__points h3 { margin-bottom: .5em; }
.promise__points p  { color: var(--color-gray-light); }
.promise__cta { margin-top: var(--space-block); }

@media (max-width: 991px) {
  .promise { padding: var(--space-block) var(--grid-margin); text-align: left; }
  .promise__text { margin-inline: 0; }
  .promise__points { grid-template-columns: 1fr; gap: 1.75em; margin-inline: 0; }
  .promise__cta { display: flex; justify-content: center; }
}


/* --------------------------------------------------------------------------
   Über mich: Aufmacher ueber die volle Breite

   Vorher stapelte sich der Text in einer 22 Zeichen schmalen Spalte, waehrend
   daneben die halbe Seite leer blieb. Jetzt steht die Ueberschrift links, die
   Aussage rechts daneben auf gleicher Grundlinie. Man erfasst beides zugleich.
   -------------------------------------------------------------------------- */
.about-head { padding: 11em var(--grid-margin) var(--space-block); }
.about-head__top { align-items: start; }
.about-head__title { grid-column: 1 / span 6; }
.about-head__claim {
  grid-column: 1 / span 5;
  padding-bottom: .4em;
}
.about-head__sub  { margin-top: 1.5em; color: var(--color-gray-light); }
.about-head__meta { margin-top: 2.5em; color: var(--color-gray-mid); }

/* Portraet rechts neben der Ueberschrift, Text zur Person darunter. */
.about-head__intro {
  margin-top: var(--space-block);
  align-items: start;
}
.about-head__portrait {
  grid-column: 8 / span 5;
  position: relative;
  aspect-ratio: 4 / 4.4;
  overflow: hidden;
  background: var(--color-surface);
  margin: 0;
}
.about-head__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Der Rahmen ist breiter als das Hochformat, cover schneidet oben und unten
     ab. Mittig zentriert faellt der Kopf halb aus dem Bild, deshalb sitzt der
     Ausschnitt weit oben. */
  object-position: 50% 12%;
}
.about-head__who { grid-column: 7 / span 5; }
.about-head__who p { margin-bottom: 1.5em; color: var(--color-gray-light); }
.about-head__who 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-head__who .about-head__meta { margin-bottom: 0; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
  margin-top: var(--space-block);
  padding-inline: 0;
}
.facts li {
  display: flex;
  flex-direction: column;
  gap: .75em;
  padding-top: 1.25em;
  border-top: 1px solid var(--color-line);
}
.facts__num {
  font-size: var(--font-size-h2);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight-04);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}
.facts li span { color: var(--color-gray-light); }

@media (max-width: 991px) {
  .about-head { padding-top: 8.5em; }
  .about-head__title, .about-head__claim { grid-column: 1 / -1; }
  .about-head__claim { padding-bottom: 0; }
  .about-head__portrait, .about-head__who { grid-column: 1 / -1; }
  .about-head__portrait { margin-top: 2.5em; aspect-ratio: 4 / 4.6; }
  .about-head__who { margin-top: 2.5em; }
  .facts { grid-template-columns: 1fr; gap: 1.5em; }
}

.why__idx { display: block; margin-bottom: .75em; color: var(--color-gray-dark); }

@media (max-width: 991px) {
  .claim { max-width: none; }
  .facts { grid-template-columns: 1fr; gap: 1.5em; }
}