/* ==========================================================================
   Mind on the Moon – Layout und Komponenten
   --------------------------------------------------------------------------
   Werte kommen aus tokens.css, Schriftrollen aus fonts.css.
   Referenz ist der InDesign-Entwurf (260811_motm_web.pdf).
   ========================================================================== */


/* --- Basis ---------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-default);
  font-family: var(--font-s);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3, p, ul, ol, figure, blockquote, figcaption {
  margin: 0;
  padding: 0;
}

h1, h2 {
  font-family: var(--font-xl);
  font-weight: 450;
  line-height: var(--lh-display);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.0625rem;
  transition: text-decoration-underline .2s ease-out;
}

a:hover {
  text-decoration-thickness: 0;
  transition: text-decoration-underline .2s ease-in;
}

:focus-visible {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.1875rem;
}

.skip-link {
  position: absolute;
  left: var(--grid-pad);
  top: var(--space-2xs);
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--surface-page);
}

.skip-link:not(:focus) {
  clip-path: inset(50%);
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  white-space: nowrap;
}

/* Versal-Labels (Überzeilen, Laufband) – Schriftrolle und Zeilenhöhe
   explizit, damit auch Überzeilen als h2 wie Fließtext-Labels laufen */
.label {
  font-family: var(--font-s);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

/* 12-Spalten-Raster, Sektionen ordnen ihre Kinder selbst zu */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--space-2xl) 0;
  max-width: calc(var(--grid-max) + 2 * var(--grid-pad));
  margin-inline: auto;
  padding-inline: var(--grid-pad);
}

/* Mobile first: alles läuft volle Breite, die Spaltenzuordnung
   kommt ab 50 rem (Block „Ab Desktop“ am Dateiende) */
.grid > * {
  grid-column: 1 / -1;
}

section:not(.insights-list):last-child > div {
  padding-block-end: var(--space-3xl);
}

#forschung > div {
  padding-block-end: var(--space-xl);
}


/* --- Seitenkopf ----------------------------------------------------------- */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-m) var(--grid-pad);
  color: var(--text-default);
}

/* Auf Seiten mit Hero-Bild liegt der Kopf auf dem Bild */
.has-hero .site-header {
  color: var(--text-invers);
}

/* Nach unten gescrollt löst sich der Kopf vom Seitenanfang und wartet
   unsichtbar über dem Viewport; beim Aufwärts-Scrollen gleitet er auf
   Sand-Fläche herein. Die Klassen setzt das Script im Footer – beim
   ersten Lösen unterdrückt es die Transition, sonst würde der Kopf
   sichtbar weggleiten statt oben zu starten. */
.header-detached .site-header {
  position: fixed;
  translate: 0 -100%;
  background: var(--surface-sand);
  color: var(--text-default);
  transition: translate var(--duration-base) var(--ease);
}

.header-revealed .site-header {
  translate: 0 0;
}

/* Mobil läuft das zweizeilige Wort-Logo (Mockup Seite 2, 150 pt breit),
   ab Desktop das einzeilige – beide liegen inline im Markup */
.site-header__logo {
  display: block;
}

.site-header__logo svg {
  display: block;
  height: auto;
}

.site-header__logo-wide {
  display: none;
}

.site-header__logo-stacked svg {
  width: 9.375rem;
}

.site-header__toggle {
  display: grid;
  place-items: center;
  padding: var(--space-2xs);
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.site-header__toggle-label {
  clip-path: inset(50%);
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
}

/* Drei Striche, geöffnet ein X (mittlerer Strich ist das Element selbst) */
.site-header__toggle-icon {
  position: relative;
  display: block;
  width: 1.75rem;
  height: 0.125rem;
  background: currentColor;
}

.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease), top var(--duration-base) var(--ease);
}

.site-header__toggle-icon::before { top: -0.5rem; }
.site-header__toggle-icon::after  { top: 0.5rem; }

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon {
  background: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Bei offenem Menü bleibt der Kopf sichtbar; Logo und X liegen dunkel
   auf der Sand-Fläche des Panels (translate schlägt header-detached) */
.menu-open .site-header {
  position: fixed;
  translate: 0 0;
  color: var(--text-default);
}

/* Ein- und Ausblenden: Fade + leichtes Gleiten von oben.
   `allow-discrete` schaltet display erst am Ende der Transition;
   Browser ohne @starting-style zeigen das Menü schlicht sofort. */
.site-menu[hidden] {
  display: none;
  opacity: 0;
  translate: 0 -2rem;
}

@starting-style {
  .site-menu:not([hidden]) {
    opacity: 0;
    translate: 0 -2rem;
  }
}

/* Panel rechts oben auf Sand-Fläche (PDF Seite 2) */
.site-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  width: 100vw;
  padding-inline: var(--space-s);
  padding-block: calc(var(--space-2xl) * 2) var(--space-2xl);
  background: var(--surface-sand);
  color: var(--text-default);
  transition:
    opacity var(--duration-base) var(--ease),
    translate var(--duration-base) var(--ease),
    display var(--duration-base) allow-discrete;
}

.site-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu a {
  text-decoration: none;
}

.site-menu ul a {
  display: inline-block;
  padding-block: var(--space-3xs);
  font-family: var(--font-xl);
  font-size: var(--fs-menu);
  line-height: var(--lh-tight);
}

.site-menu a[aria-current="page"],
.site-menu a:hover {
  text-decoration: underline;
}

.site-menu__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
}

.site-menu__actions a {
  padding: 0.25em 0.9em;
  background: #fff;
  border-radius: 62.4375rem;
  font-size: var(--fs-button);
}


/* --- Hero (Startseite) ---------------------------------------------------- */

/* Der Text ist im Entwurf nicht zentriert, sondern von oben verankert
   (Headline auf allen Seiten bei y = 289 pt, siehe --hero-top); unter der
   Tagline bleiben auf der Startseite 101 pt ≈ --space-2xl. */
.hero {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 75vh;
  padding: var(--hero-top) var(--grid-pad) var(--space-2xl);
  color: var(--text-invers);
  background: var(--surface-green);
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__copy {
  position: relative;
  max-width: var(--grid-max);
  margin-inline: auto;
  width: 100%;
}

/* Zeilenfall des Entwurfs ohne <br>: längste Zeile „es einen einfachen“
   (493 pt im PDF, im Browser läuft die XL 533 px breit) muss passen,
   „Was wäre, wenn es“ (539 px) nicht mehr — 9,1 em = 535 px */
.hero__headline {
  font-size: var(--fs-hero);
  max-width: 9.1em;
}

/* Abstand zur Headline: 114,5 pt im Entwurf (em-Box zu em-Box),
   --space-2xl kommt dem mit den Halbzeilen am nächsten */
.hero__tagline {
  margin-top: var(--space-2xl);
  max-width: 22em;
}


/* --- Einleitung ----------------------------------------------------------- */

.intro {
  padding-block: var(--space-2xl);
  align-items: center;
}

.intro__text p + p {
  margin-top: var(--space-s);
}


/* --- Teaser Methode ------------------------------------------------------- */

.method {
  padding-block: var(--space-2xl);
  align-items: center;
}

.method__stack {
  position: relative;
  /* Platz für die nach rechts unten versetzte Bildfläche */
  padding: 0 14% 14% 0;
}

.method__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
  aspect-ratio: 5 / 4;
  padding: var(--space-l);
  background: var(--surface-sand);
}

.method__title {
  font-size: var(--fs-h2);
  max-width: 8em;
}

.method__link {
  text-decoration: none;
}

.method__media {
  position: absolute;
  inset: 0;
  background: var(--surface-green);
  overflow: hidden;
}

.method__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.method__text p + p,
.method__text ul {
  margin-top: var(--space-s);
}

/* Listen laufen kleiner als der Fließtext: 14 pt bei 25 pt Zeilenabstand
   im Entwurf (Token-Kommentar „Versal-Labels, Auszug, Listen“) */
.method__text ul {
  padding-left: 1.2em;
  font-size: var(--fs-label);
  line-height: 1.8;
}


/* --- Teaser Insights ------------------------------------------------------ */

.insight {
  padding-block: var(--space-2xl);
  align-items: center;
}

.insight__title {
  font-family: var(--font-m);
  font-size: var(--fs-card);
  line-height: var(--lh-tight);
}

.insight__teaser {
  margin-top: var(--space-s);
  font-size: var(--fs-label);
  color: var(--text-muted);
}

.insight__media {
  opacity: .9;
}

.insight__link {
  display: inline-block;
  margin-top: var(--space-s);
}


/* --- Teaser Über mich ----------------------------------------------------- */

/* Weiße Fläche läuft im Entwurf über die volle Browserbreite,
   der Inhalt bleibt im Raster (Wrapper wie bei FAQ/Insights) */
.about {
  background-color: var(--clr-white);
  padding-block: var(--space-2xl);
}

.about__inner {
  align-items: center;
}

.about__text p + p {
  margin-top: var(--space-s);
}

/* JPG mit weißem Grund – Multiplizieren lässt ihn auf der Fläche verschwinden */
.about__signature {
  margin-top: var(--space-m);
  width: clamp(8.75rem, 14vw, 11.875rem);
  mix-blend-mode: multiply;
}

.about__link {
  display: inline-block;
  margin-top: var(--space-l);
}


/* --- Häufige Fragen ------------------------------------------------------- */

.faq {
  padding-block: var(--space-2xl);
}

.faq[data-theme="blush"] { background: var(--surface-blush); }
.faq[data-theme="sand"]  { background: var(--surface-sand); }

.faq__inner {
  max-width: calc(var(--grid-max) + 2 * var(--grid-pad));
  margin-inline: auto;
  padding-inline: var(--grid-pad);
}

.faq__label {
  margin-bottom: var(--space-l);
}

.faq__item {
  border-bottom: 0.0625rem solid var(--line-default);
}

.faq__item:is(:first-of-type) {
  border-top: 0.0625rem solid var(--line-default);
}

/* Im Layout-Feld setzt .blocks Absatzabstand – zwischen Fragen trennt
   nur die Linie, kein zusätzlicher Abstand */
.blocks .faq__item + .faq__item {
  margin-top: 0;
}

/* Zeilenhöhe 49 pt im Entwurf: Text 23.76 × 1.3 ≈ 31, Rest ≈ 9 je Seite */
.faq__question {
  padding-block: var(--space-2xs);
  font-family: var(--font-m);
  font-size: var(--fs-faq);
  line-height: var(--lh-tight);
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__answer {
  padding-bottom: var(--space-m);
  max-width: 40em;
}


/* --- CTA-Band ------------------------------------------------------------- */

/* Verlaufsbild liegt als Ebene über der grünen Fläche –
   Deckkraft über --cta-image-opacity regelbar (1 = voll) */
.cta-band {
  position: relative;
  display: block;
  padding: var(--space-2xl) var(--grid-pad);
  color: var(--text-invers);
  text-decoration: none;
  --cta-image-opacity: .85;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/background-cta.jpeg") center / cover no-repeat;
  opacity: var(--cta-image-opacity);
}

.cta-band__text,
.cta-band__mail {
  position: relative;
}

.cta-band__text {
  display: block;
  max-width: var(--grid-max);
  margin-inline: auto;
  font-family: var(--font-xl);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
}

.cta-band__mail {
  display: block;
  max-width: var(--grid-max);
  margin-inline: auto;
  margin-top: var(--space-xl);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* --- Laufband ------------------------------------------------------------- */

.marquee {
  display: flex;
  overflow: hidden;
  padding-block: var(--space-s);
  background: var(--surface-page);
  font-size: var(--fs-marquee);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  white-space: nowrap;
}

.marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-l);
  padding-right: var(--space-l);
  animation: marquee var(--marquee-duration) linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-100%); }
}

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


/* --- Footer --------------------------------------------------------------- */

.site-footer {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--space-xl) 0;
  padding: var(--space-2xl) var(--grid-pad);
  background: var(--surface-green);
  color: var(--text-invers);
  font-size: var(--fs-footer);
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Mobile first – Spaltenzuordnung ab 50 rem (eigenes Raster, kein .grid) */
.site-footer > * {
  grid-column: 1 / -1;
}

.site-footer__monogram svg {
  width: 1.75rem;
  height: auto;
}

.site-footer__contact p + p,
.site-footer__links p + p {
  margin-top: var(--space-m);
}

/* Social-Link mit Icon (assets/icons), läuft in der Textfarbe mit */
.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.site-footer__social svg {
  width: 1.25em;
  height: 1.25em;
}

.site-footer__moons {
  justify-self: end;
  align-self: end;
  width: min(14.375rem, 100%);
  margin-top: var(--space-l);
}


/* --- Hero-Variante der Unterseiten ----------------------------------------- */

.hero--page {
  min-height: 55vh;
}

/* Die enge Home-Breite (9,1 em) gilt nur dort – mit 12 em bricht die
   Insights-Headline wie im Entwurf („Aktuelle Studien und / Anwendungen
   der / SleepTalk Methode“). Der Methode-/Angebot-Zeilenfall des Entwurfs
   bräuchte < 9 em und damit vier Insights-Zeilen; wenn gewünscht, steuert
   ihn das Headline-Feld über manuelle Zeilenumbrüche. */
.hero--page .hero__headline {
  max-width: 12em;
}

.hero--page .hero__tagline {
  margin-top: var(--space-l);
  max-width: 18em;
}


/* --- Insights-Übersicht ----------------------------------------------------- */

/* Sand-Fläche mit Karten-Raster (Entwurf Seite „Insights“): Karten auf
   den Spalten 1/5/9, je 4 Spalten; unter der letzten Reihe läuft die
   Fläche im Entwurf ~270 pt weiter. */
.insights-list {
  padding-block: var(--space-xl) calc(2 * var(--space-3xl));
}

/* Label → Karten: 52 pt im Entwurf = Raster-Gap plus Rest */
.insights-list__label {
  margin-bottom: calc(var(--grid-gap) + var(--space-2xs));
}

.insights-list__grid {
  row-gap: var(--space-3xl);
}

.insight-card__media img {
  width: 100%;
  aspect-ratio: 331.5 / 227;   /* Bildformat aus dem Entwurf */
  object-fit: cover;
}

.insight-card__title {
  margin-top: var(--space-m);
  font-family: var(--font-m);
  font-size: var(--fs-card);
  line-height: var(--lh-tight);
}

.insight-card__teaser {
  margin-top: var(--space-2xs);
  font-size: var(--fs-label);
}

.insight-card__link {
  display: inline-block;
  margin-top: var(--space-s);
  font-size: var(--fs-label);
}


/* --- Insight-Beitrag -------------------------------------------------------- */

/* Kein eigener Entwurf: Titelbild als Seitenkopf, danach der Text in
   den mittleren 8 Spalten (ab Desktop); die Block-Stile kommen aus .blocks. */
.article {
  padding-block: var(--space-2xl) var(--space-3xl);
}


/* --- Layout-Zeilen (Methode, Angebot, Insights-Beitrag) --------------------
   Markup siehe snippets/layout.php: Zeilen-Einstellungen steuern
   Überzeile, Fläche, Hintergrundbild (mit Deckkraft) und Randabfall. */

.row__surface {
  position: relative;
}

.row:not(.row--bleed) .row__surface {
  max-width: calc(var(--grid-max) + 2 * var(--grid-pad));
  margin-inline: auto;
}

.row__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.row__grid {
  position: relative;
  padding-block: var(--space-2xl);
}

/* Überzeile sitzt in der ersten Spalte (wandert beim Zentrieren mit);
   Abstand zum Text: 47 pt im Entwurf = Raster-Gap (40) plus Rest */
.row__eyebrow {
  margin-bottom: calc(var(--grid-gap) + var(--space-3xs));
}

/* Spalten mittig zueinander (Zeilen-Einstellung „Vertikal zentrieren“) */
.row--center .row__grid {
  align-items: center;
}

.row[data-theme="sand"]  .row__surface { background: var(--surface-sand); }
.row[data-theme="blush"] .row__surface { background: var(--surface-blush); }
.row[data-theme="green"] .row__surface { background: var(--surface-green); color: var(--text-invers); }

/* Bildband ohne Randabfall bleibt im Rahmen der Zeile; der Zitat-Look
   mit eigenem Band kommt aus dem Zitat-Block selbst (.quote-band). */


/* --- Blöcke ---------------------------------------------------------------- */

/* Absatzabstand = eine Leerzeile (31 pt bei 20 pt Text im Entwurf) */
.blocks > * + * {
  margin-top: calc(1em * var(--lh-body));
}

/* Lesbare Zeilenlänge, auch wenn die Zeile volle Breite hat */
.blocks p {
  max-width: 44em;
}

.blocks h2 {
  font-size: var(--fs-h2);
}

.blocks h3 {
  font-family: var(--font-m);
  font-size: var(--fs-faq);
  line-height: var(--lh-tight);
}

.blocks * + h2,
.blocks * + h3 {
  margin-top: var(--space-xl);
}

/* Listen laufen kleiner: 14 pt bei 25 pt Zeilenabstand im Entwurf */
.blocks ul,
.blocks ol {
  padding-left: 1.2em;
  font-size: var(--fs-label);
  line-height: 1.8;
}

/* Bildunterschrift des Bild-Blocks */
.image__caption {
  margin-top: var(--space-2xs);
  font-size: var(--fs-label);
}


/* --- Zitat ------------------------------------------------------------------ */

/* Bildband hinter der Zitatkarte – kommt aus dem Zitat-Block selbst
   (Feld „Hintergrundbild“), unabhängig von Zeilen-Einstellungen.
   Entwurf Methode: Band 10/12 des Rasters, Karte sitzt vorn auf,
   das Band bleibt rechts und ~166 pt unten sichtbar. */
.quote-band {
  position: relative;
  max-width: calc(var(--grid-max) * 10 / 12);
  padding-bottom: var(--space-3xl);
}

/* Deckkraft kommt aus dem Block-Regler (Inline-Style aus quote.php) –
   hier kein opacity setzen, das Panel gewänne ohnehin */
.quote-band__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-band .quote {
  position: relative;
}

.quote--l {
  max-width: var(--quote-card-max);
  padding: var(--space-xl) var(--space-m);
  background: var(--surface-sand);
  color: var(--text-default);
}

.quote__text {
  font-family: var(--font-xl);
  font-size: var(--fs-quote-l);
  line-height: var(--lh-quote);
}

.quote--s .quote__text {
  font-family: var(--font-m);
  font-size: var(--fs-quote-s);
}

/* Kleine Zitatkarte: erst auf dem Bildband wird sie zur Sand-Karte
   (Entwurf Angebot: Karte 543,5 pt breit, Band füllt die halbe Spalte) */
.quote-band .quote--s {
  max-width: var(--quote-card-max-s);
  padding: var(--space-xl) var(--space-m);
  background: var(--surface-sand);
  color: var(--text-default);
}

.quote__citation {
  margin-top: var(--space-xl);
  font-size: var(--fs-author);
}

.quote--l .quote__citation {
  margin-top: var(--space-2xl);
}


/* --- Kontakt-Karte ---------------------------------------------------------
   Sand-Karte mit Link auf kleinem Bildband, mittig in ihrer Spalte
   (Entwurf Angebot: Band 447 × 347, Karte 329 × 284, Text 17,5 pt;
   Band bleibt rechts und unten sichtbar). Neben einer Textspalte steht
   die Kachel ab Desktop diagonal versetzt – Regel im Desktop-Block. */

.cta-card {
  position: relative;
  max-width: 27.9375rem;   /* 447 / 16 */
  margin-inline: auto;
  padding-bottom: var(--space-xl);
}

.cta-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-card__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-width: 20.5625rem;   /* 329 / 16 */
  padding: var(--space-m);
  background: var(--surface-sand);
  font-size: var(--fs-cta);
}

.cta-card__link {
  text-decoration: none;
}

.cta-card__link:hover {
  text-decoration: underline;
}


/* --- Unterseiten ohne eigenes Layout -------------------------------------- */

.page {
  padding-block: var(--space-3xl);
}

/* Ohne Hero übernimmt der Seitentitel dessen Rolle */
.page__title {
  font-size: var(--fs-hero);
}

.page__body {
  margin-top: var(--space-xl);
}

/* Rechtstexte (Impressum/Datenschutz): fertiges Generator-HTML, eigene
   Typo-Hierarchie – die .blocks-Größen sind Display-groß und zu wuchtig
   für einen langen, kleinteilig gegliederten Rechtstext. */
.legal-text > * + * {
  margin-top: calc(1em * var(--lh-body));
}

.legal-text h2 {
  font-family: var(--font-xl);
  font-size: var(--fs-faq);
  line-height: var(--lh-tight);
}

.legal-text h3 {
  font-family: var(--font-m);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
}

.legal-text h4 {
  font-family: var(--font-m);
  font-size: var(--fs-author);
  line-height: var(--lh-tight);
}

.legal-text * + h2 {
  margin-top: var(--space-xl);
}

.legal-text * + h3 {
  margin-top: var(--space-l);
}

.legal-text * + h4 {
  margin-top: var(--space-m);
}

.legal-text p,
.legal-text li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 44em;
}

.legal-text ul,
.legal-text ol {
  padding-left: 1.2em;
}

.legal-text li + li {
  margin-top: var(--space-3xs);
}

.legal-text a {
  color: inherit;
}

/* Statischer Kopf braucht auf Seiten ohne Hero-Bild Platz nach oben */
body:not(.has-hero) main {
  padding-top: var(--space-3xl);
}


/* --- Ab Desktop (50 rem) ---------------------------------------------------
   Mobile first: oben steht die einspaltige Basis, hier kommen
   Spaltenzuordnung und Desktop-Maße dazu. */

@media (min-width: 50rem) {

  /* Raster: volle Rinne (mobil nur Zeilenabstand, Spalten laufen 1/-1) */
  .grid {
    gap: var(--grid-gap);
  }

  /* Seitenkopf: einzeiliges Logo */
  .site-header__logo-wide {
    display: block;
  }

  .site-header__logo-wide svg {
    width: clamp(9.375rem, 16vw, 12.8125rem);
  }

  .site-header__logo-stacked {
    display: none;
  }

  /* Menü-Panel rechts oben statt voller Breite */
  .site-menu {
    width: min(24.375rem, 100%);
    padding-inline: var(--space-l);
    padding-block: var(--space-3xl) var(--space-2xl);
  }

  /* Heroes */
  .hero {
    min-height: min(92vh, 51.25rem);
  }

  /* 750 pt hoch im Entwurf (Seite 4) */
  .hero--page {
    min-height: min(75vh, 46.875rem);
  }

  /* Einleitung */
  .intro {
    padding-block: var(--space-3xl);
  }

  .intro__text  { grid-column: 1 / span 6; }
  .intro__image { grid-column: 8 / span 4; }

  /* Teaser Methode / Insights / Über mich */
  .method__stack { grid-column: 1 / span 6; }
  .method__text  { grid-column: 8 / span 5; }

  .insight__media { grid-column: 3 / span 4; }
  .insight__copy  { grid-column: 8 / span 5; }

  .about__copy  { grid-column: 1 / span 5; }
  .about__image { grid-column: 7 / span 6; }

  /* Footer */
  .site-footer {
    gap: var(--grid-gap);
  }

  .site-footer__monogram { grid-column: 1 / span 2; }
  .site-footer__contact  { grid-column: 3 / span 4; }
  .site-footer__links    { grid-column: 8 / span 4; }
  .site-footer__moons    { grid-column: 8 / -1; }

  /* Insights-Übersicht: zwei Karten pro Reihe (drei ab 64 rem);
     Bild und Text enden im Entwurf ~45 pt (--space-l) vor der Kante */
  .insight-card {
    grid-column: span 6;
    padding-inline-end: var(--space-l);
  }

  /* Insight-Beitrag und Unterseiten ohne Layout */
  .article__body {
    grid-column: 3 / span 8;
  }

  .page > * {
    grid-column: 1 / span 8;
  }

  /* Layout-Zeilen: Spaltenzuordnung aus den Zeilen-Einstellungen */
  .row__column {
    grid-column: span var(--span, 12);
  }

  /* Fließtext ist im Entwurf ~1 rem vom Raster eingerückt (x 51.7 statt 35,
     auf Methode wie Angebot); Überzeilen von Textspalten rücken mit,
     FAQ- und Zitat-Spalten bleiben am Raster */
  .blocks > p {
    margin-inline-start: 1rem;
  }

  .row__eyebrow:has(+ .blocks > p:first-child) {
    margin-inline-start: 1rem;
  }

  /* Zweispaltige Zeilen: Textspalten (Absatz direkt in .blocks, wie bei
     der Einrück-Regel) bekommen Luft zur Nachbarspalte bzw. zum Rand.
     :first-child:nth-last-child(2) = erste von genau zwei Spalten. */
  .row__grid > .row__column:where(:first-child:nth-last-child(2)):where(:has(> .blocks > p)) {
    padding-inline-end: var(--space-xl);
  }

  .row__grid > .row__column:where(:nth-child(2):last-child):where(:has(> .blocks > p)) {
    padding-inline: var(--space-xl) var(--space-m);
  }

  /* Kontakt-Kachel neben einer Nachbarspalte steht diagonal versetzt:
     im Entwurf (Angebot) beginnt das Band 175 pt unter dem Zeilenanfang,
     auf Höhe des Textspalten-Endes */
  .row__column:not(:only-child) .cta-card {
    margin-top: calc(var(--space-2xl) + var(--space-xl));
  }
}

/* Drei Karten pro Reihe erst, wenn die Titel (--fs-card) Platz haben */
@media (min-width: 64rem) {
  .insight-card {
    grid-column: span 4;
  }
}