/* =====================================================================
   JB Reitsport · „Noir“ – Philosophie (philosophie.html)
   Nur seitenspezifisch, alle Klassen mit Präfix phi-. Basis/Komponenten: css/site.css (nicht ändern).
   Dramaturgie: Hero F Wort-Fenster (Serif-H1, „WARUM?“ in Bebas) · Schwierige Pferde (Bebas-H2, zweispaltig) ·
   „Denn ein Verhalten entsteht nicht grundlos.“ zentriert auf abgedunkeltem Foto 145956 · Ursachen als Abspann ·
   „Deshalb –“ als Treppe (Serif, asymmetrisch, fünf Stufen) · Mein Umgang (Bebas-H2, Grundlage eingerückt, Fotostrecke) ·
   Grundsatz linksbündig · Reha-Satz riesig unter Lichtkegel · Abschluss Serif.
   Champagner-Kursiv genau zweimal: „grundlos.“ und „erzwingen.“ (em.gold; das Hero-<em> steht seit Review 3 im Textton).
   ===================================================================== */

/* =====================================================================
   HERO F · WORT-FENSTER „WARUM?“
   Grundform (mobil, „Bewegung reduzieren“, ohne GSAP): Foto steht, „WARUM?“ als Champagner-Kontur, das „A“ ist
   mit Licht gefüllt. Desktop mit voller Bewegung setzt js/philosophie.js die Klasse .is-pin: gepinnte Bühne,
   schwarze Platte mit mix-blend-mode: multiply – nur in den Buchstaben lebt das Foto.
   ===================================================================== */
.phi-hero {
  --phi-low: clamp(220px, 32svh, 300px);                /* Raum unter dem Wort für Titel und Aktion (Desktop; js/philosophie.js misst nach) */
  display: block; min-height: 0; padding: 0 0 var(--sec-s);
  overflow: hidden; overflow: clip;                     /* nie nur hidden: der Pin klebt sonst nicht (SYSTEM §8) */
}
.phi-hero__pin { position: relative; display: flex; flex-direction: column; }
.phi-hero__stage {
  position: relative; width: 100%;
  height: clamp(320px, 53svh, 125vw);                    /* höchstens 4 : 5 – Titel und Aktion bleiben im ersten Bild (iPhone 13) */
  overflow: hidden; isolation: isolate;                 /* die Platte mischt sich nur mit dem Foto */
  background: var(--night);
}
.phi-hero__media { transform-origin: 50% 36%; }
.phi-hero .grain { opacity: .06; }                         /* großer Himmel: feineres Korn (Review 3) */
.phi-hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--night-rgb), .66) 0%, rgba(var(--night-rgb), 0) 20%),
    linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .78) 20%, rgba(var(--night-rgb), .3) 40%, rgba(var(--night-rgb), 0) 56%);
}
.phi-hero__plate {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 4%;
  pointer-events: none;
}
.phi-hero__word {
  position: relative; display: block;
  margin: 0; padding-top: .06em;
  font: 400 31vw/.8 var(--f-display);
  text-transform: uppercase; letter-spacing: .004em; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(var(--accent-rgb), .92);
  hyphens: manual; -webkit-hyphens: manual;
}
/* bis Bebas Neue geladen ist (Kopf-Skript der Seite): Wort unsichtbar, Auftritt wartet – kein Sprung beim Schriftwechsel */
.phi-font-wait .phi-hero__word { visibility: hidden; animation-play-state: paused; }
/* das „A“ – der Weg hinein: mit Champagner-Licht gefüllt (mobil füllt es sich beim Scrollen) */
.phi-hero__a {
  background: linear-gradient(170deg, var(--accent-hi) 0%, var(--accent) 48%, var(--accent-lo) 100%) 50% 100% / 100% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.phi-hero__base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }   /* Messpunkt Grundlinie */
.phi-hero__lift { display: none; }   /* nur gepinnte Desktop-Fassung (s. u.) */

/* Inhalt mobil: unter dem Bild auf Schwarz */
.phi-hero__content { position: relative; z-index: 4; order: 2; margin: -4px var(--gutter) 0; }
.phi-hero .hero__eyebrow { margin-bottom: 14px; }
@media (max-width: 767.98px) { .phi-hero .hero__eyebrow { display: none; } .phi-hero .hero__sub { margin-bottom: 20px; } }
.phi-hero .hero__title {
  margin: 0 0 18px;
  font-family: var(--f-serif); font-weight: 400; text-transform: none;
  font-size: clamp(34px, 10.2vw, 56px); line-height: 1.02; letter-spacing: -.014em;
}
.phi-hero .hero__title .line { padding-bottom: .2em; margin-bottom: -.2em; }   /* Unterlängen („Symptome“) */
.phi-hero .hero__title em { font-size: 1em; padding-left: 0; }
.phi-hero .hero__sub { max-width: 40ch; }
.phi-hero .hero__bar { position: relative; order: 3; left: auto; right: auto; bottom: auto; margin: 26px var(--gutter) 0; }
/* Mobil/Tablet (Endnote 8,4): Schalter „Bewegung pausieren“ rechts am Ende der Aktionszeile – oben rechts unter dem
   runden Menüknopf wirkte er wie ein zweites Navigationselement. Scroll-Hinweis entfällt (wie der geteilte Hero). */
@media (max-width: 1023.98px) {
  .phi-hero .hero__bar { z-index: 5; align-self: flex-end; margin: -51px var(--gutter) 0 0; }
  .phi-hero .scroll-hint { display: none; }
}

/* Leitfragen mobil: eigener Absatz unter dem Hero-Text */
.phi-hero__qs { position: relative; z-index: 4; order: 4; margin: clamp(52px, 13vw, 80px) var(--gutter) 0; padding-top: 28px; border-top: 1px solid var(--line); }
.phi-hero__label { margin: 0 0 20px; }
.phi-hero__list { display: grid; gap: 24px; }
.phi-hero__q p {
  margin: 0;
  font: italic 400 clamp(28px, 7.8vw, 40px)/1.12 var(--f-serif); letter-spacing: -.004em;
  color: var(--bone); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual;
}

/* Auftritt: das Wort öffnet sich aus dem Lichtspalt (Marken-Motiv), nach dem Intro */
.js .phi-hero__word { animation: phi-slit 1.6s var(--ease-inout) both; animation-delay: calc(var(--hd) + .05s); }
@keyframes phi-slit { from { clip-path: inset(49% -2% 49% -2%); } to { clip-path: inset(-10% -2% -10% -2%); } }

@media (min-width: 768px) and (max-width: 1023.98px) {
  .phi-hero__stage { height: clamp(420px, 58svh, 640px); }
  .phi-hero__word { font-size: min(27vw, 300px); }
  .phi-hero__list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

@media (min-width: 1024px) {
  /* gemeinsame Desktop-Bühne (gepinnt wie ruhig): eine Rasterzelle, Bild füllt den Schirm, Titel unten.
     --phi-low schon in CSS so gerechnet, wie js/philosophie.js es misst (Überzeile 32 px + Titel ≈ 3,315 × Schriftgröße
     + Abstand unten + 28 px) – sonst änderte sich die Wortgröße nach dem ersten Bild (Layoutsprung) */
  .phi-hero {
    padding-bottom: 0;
    --phi-tfs: clamp(44px, min(4.3vw, 8.4svh), 78px);
    --phi-low: calc(var(--phi-tfs) * 3.315 + 32px + clamp(96px, 12svh, 140px) + 28px);
  }
  @media (max-height: 760px) { .phi-hero { --phi-low: calc(var(--phi-tfs) * 3.315 + clamp(96px, 12svh, 140px) + 28px); } }
  .phi-hero__pin {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: max(100svh, 640px) auto;
  }
  .phi-hero__stage, .phi-hero__content, .phi-hero .hero__bar { grid-area: 1 / 1; }
  .phi-hero__stage { height: auto; }
  .phi-hero__veil {
    background:
      linear-gradient(180deg, rgba(var(--night-rgb), .72) 0%, rgba(var(--night-rgb), 0) 18%),
      radial-gradient(ellipse 70% 46% at 50% 44%, rgba(var(--night-rgb), .34), rgba(var(--night-rgb), 0) 100%),
      linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .86) 22%, rgba(var(--night-rgb), .36) 42%, rgba(var(--night-rgb), 0) 60%);
  }
  .phi-hero__plate { align-items: center; padding: var(--header-h) var(--gutter) var(--phi-low); }
  /* Wortgröße hängt an Breite und an der freien Höhe zwischen Header und Titelzeile – nie über dem Titel */
  .phi-hero__word { font-size: min(31vw, 52svh, calc((100svh - var(--header-h) - var(--phi-low)) * 1.02)); -webkit-text-stroke-width: 1.5px; }
  .phi-hero__content {
    align-self: end; z-index: 4;
    margin: 0 var(--gutter) clamp(96px, 12svh, 140px);
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: end;
  }
  .phi-hero .hero__title { margin: 0; font-size: var(--phi-tfs); }
  .phi-hero__aside { padding-bottom: .3em; }
  .phi-hero .hero__sub { font-size: 18px; margin-bottom: 22px; }
  .phi-hero .hero__bar { align-self: end; z-index: 4; margin: 0 var(--gutter) 28px; }
  /* sehr flache Fenster (1024 × 600): Unterzeile weg, damit das Wort groß bleiben kann */
  @media (max-height: 640px) { .phi-hero .hero__sub { display: none; } }

  /* ruhige Fassung Desktop: Leitfragen als Band unter der Bühne */
  .phi-hero__qs {
    grid-area: 2 / 1;
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 48px; align-items: start;
    margin: var(--sec-s) var(--gutter) 0; padding-top: 36px;
  }
  .phi-hero__label { padding-top: .9em; }
  .phi-hero__list { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 88px); }
  .phi-hero__q p { font-size: clamp(32px, 2.9vw, 48px); }

  /* ---- gepinnt (js/philosophie.js, nur ohne „Bewegung reduzieren“) ----
     Dieselbe Fassung gilt schon vor GSAP, sobald das Kopf-Skript der Seite html.phi-pin-early gesetzt hat (Desktop,
     volle Bewegung) – so steht beim kalten Laden sofort die gepinnte Bühne da, kein Umspringen (CLS, Review 3).
     Fällt GSAP bzw. js/site.js aus (.no-gsap / .no-anim), greift wieder die ruhige Fassung. */
  /* Abnahme 24.10.: Pin-Strecke ~40 % kürzer (240 → 180svh), die Leitfragen stehen nach gut einem Drittel */
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) { height: 180vh; height: 180svh; }
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__pin {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }
  /* Platte: überall Nacht, nur in den Buchstaben scheint das Foto durch (multiply) */
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__plate { background: var(--night); mix-blend-mode: multiply; }
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__word { color: var(--bone); -webkit-text-stroke: 0 transparent; }
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__a { background: none; -webkit-background-clip: border-box; background-clip: border-box; }
  /* Abnahme 24.10.: warmes Licht hinter dem Wort (screen) – nur in den Buchstaben sichtbar, weil die Platte darüber
     multipliziert. „WARUM?“ leuchtet so im Startbild statt grau und matt; js/philosophie.js blendet es beim Flug aus. */
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__lift {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
    background:
      radial-gradient(ellipse 58% 44% at 50% 36%, rgba(var(--light-rgb), .58), rgba(var(--light-rgb), .26) 62%, rgba(var(--light-rgb), .12) 100%);
  }
  /* Schleier für die Leitfragen: links dunkel, Pferdekopf und Jenny rechts frei */
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__veil {
    opacity: 0;
    background:
      linear-gradient(180deg, rgba(var(--night-rgb), .6) 0%, rgba(var(--night-rgb), 0) 20%),
      linear-gradient(90deg, rgba(var(--night-rgb), .9) 0%, rgba(var(--night-rgb), .72) 26%, rgba(var(--night-rgb), .28) 44%, rgba(var(--night-rgb), 0) 60%),
      linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), 0) 26%);
  }
  /* Leitfragen mittig über transform statt align-self: center – die Oberkante hängt so nicht an der Blockhöhe, die
     sich beim Schriftwechsel ändert (sonst Layoutsprung beim kalten Laden) */
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__qs {
    grid-area: 1 / 1; align-self: start; justify-self: start; z-index: 4;
    display: block; width: min(600px, 40vw); pointer-events: none;
    margin: calc(50vh + var(--header-h) * .3) 0 0 var(--gutter); margin-top: calc(50svh + var(--header-h) * .3);
    padding: 0; border: 0;
    transform: translateY(-50%);
  }
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__label { padding-top: 0; margin-bottom: clamp(18px, 3svh, 28px); }
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__list { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4svh, 44px); }
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__q p { font-size: clamp(32px, min(3.1vw, 5.8svh), 56px); line-height: 1.1; }
  :is(.phi-hero.is-pin, .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero) .phi-hero__q + .phi-hero__q { padding-top: clamp(22px, 4svh, 44px); border-top: 1px solid rgba(var(--bone-rgb), .18); }
  /* Startbild der Szene, bis GSAP übernimmt (dieselben Werte wie der Anfang der Timeline in js/philosophie.js) */
  .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero:not(.is-pin) .phi-hero__media { transform: scale(1.16); }
  .phi-pin-early:not(.no-gsap):not(.no-anim) .phi-hero:not(.is-pin) .phi-hero__qs { opacity: 0; }
}

/* =====================================================================
   SCHWIERIGE PFERDE – zweispaltig (Bebas-Titel links, Text rechts)
   ===================================================================== */
.phi-difficult__grid { display: grid; gap: 30px; }
.phi-difficult__title { font-size: clamp(54px, 15vw, 96px); line-height: .9; }
.phi-difficult__lead {
  margin: 0 0 22px; max-width: 22ch;
  font: 400 clamp(29px, 7.6vw, 40px)/1.14 var(--f-serif); letter-spacing: -.01em;
  color: var(--bone); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual;
}
.phi-difficult__copy { margin: 0 0 22px; max-width: 44ch; color: var(--grey); }
@media (max-width: 767.98px) { .phi-difficult__copy { hyphens: manual; -webkit-hyphens: manual; } }
@media (min-width: 1024px) {
  .phi-difficult__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 112px); align-items: end; }
  .phi-difficult__title { font-size: clamp(88px, 8.2vw, 128px); }   /* höchstens 128 px: bei 1920 brach „Schema passen.“ sonst in zwei Einwortzeilen */
  .phi-difficult__text { padding-bottom: .5em; }
  .phi-difficult__lead { font-size: clamp(36px, 3vw, 50px); }
  .phi-difficult__copy { font-size: 19px; }
}

/* =====================================================================
   „DENN EIN VERHALTEN ENTSTEHT NICHT GRUNDLOS.“ – globale Zitat-Bühne, der zentrierte Moment
   ===================================================================== */
/* Review 3: als .quote-stage--photo auf stark abgedunkeltem Foto 145956 (der Fuchs schaut dich an) – das erste Bild nach
   dem Hero; Mitte dunkler als im globalen Muster, weil die weiße Blesse hinter dem Satz liegt (Kontrast ≥ 4,5 : 1) */
.phi-reason .quote p { max-width: 15ch; }
.phi-reason .quote em { padding-right: .03em; }
.phi-reason.quote-stage--photo::before {
  background:
    radial-gradient(ellipse 62% 58% at 50% 54%, rgba(var(--night-rgb), .74), rgba(var(--night-rgb), .62) 52%, rgba(var(--night-rgb), .9) 100%),
    linear-gradient(180deg, var(--night), rgba(var(--night-rgb), 0) 20%, rgba(var(--night-rgb), 0) 78%, var(--night));
}
.phi-reason .quote-stage__label { color: var(--bone); }
/* Endnote 8,4: mobil lag der Satz stellenweise auf unruhigen, hellen Bildstellen – weicher dunkler Hof hinter den
   Wörtern statt das ganze Foto weiter abzudunkeln */
@media (max-width: 767.98px) {
  .phi-reason .quote p { text-shadow: 0 2px 22px rgba(var(--night-rgb), .9), 0 0 8px rgba(var(--night-rgb), .55); }
  .phi-reason.quote-stage--photo::before {
    background:
      radial-gradient(ellipse 90% 46% at 50% 50%, rgba(var(--night-rgb), .8), rgba(var(--night-rgb), .6) 60%, rgba(var(--night-rgb), .88) 100%),
      linear-gradient(180deg, var(--night), rgba(var(--night-rgb), 0) 20%, rgba(var(--night-rgb), 0) 78%, var(--night));
  }
}

/* =====================================================================
   MÖGLICHE URSACHEN – Abspann: Zeile auf Lesehöhe = Champagner, gelesene Zeilen hell, 1-px-Linie zeichnet sich
   ===================================================================== */
.phi-causes { padding-top: clamp(72px, 9vw, 140px); }
.phi-causes .credits__head { margin-bottom: clamp(18px, 2.4vw, 30px); }
.phi-causes__intro {
  margin: 0 auto clamp(20px, 3vw, 40px); max-width: 26ch;
  font: italic 400 clamp(24px, 6.4vw, 30px)/1.25 var(--f-serif); color: var(--grey);
  text-wrap: balance; hyphens: manual; -webkit-hyphens: manual;
}
@media (min-width: 1024px) { .phi-causes__intro { max-width: none; font-size: clamp(28px, 2.3vw, 38px); } }
.phi-causes .credits__list li {
  padding: 18px 0 22px; max-width: 19ch;
  font-size: clamp(30px, 8vw, 40px); line-height: 1.12;
  color: rgba(var(--bone-rgb), .42);                    /* ≈ 3,6 : 1 für große Schrift, bevor die Zeile dran ist */
  transition: color .9s var(--ease-std);
}
.phi-causes .credits__list li + li::before { content: none; }
.phi-cause::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 4px; height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), var(--accent) 22%, var(--accent-hi) 50%, var(--accent) 78%, rgba(var(--accent-rgb), 0));
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 1.2s var(--ease-inout);
}
.phi-causes .credits__list li.is-lit { color: var(--bone); }
.phi-causes .credits__list li.is-current { color: var(--accent-hi); }
.phi-cause.is-lit::after { transform: scaleX(1); }
html:not(.js) .phi-causes .credits__list li, .no-anim .phi-causes .credits__list li { color: var(--bone); }
html:not(.js) .phi-cause::after, .no-anim .phi-cause::after { transform: scaleX(1); }
@media (min-width: 1024px) {
  .phi-causes .credits__list li { font-size: clamp(42px, 3.7vw, 62px); padding: 22px 0 26px; max-width: 22ch; }
}

/* =====================================================================
   DESHALB – versetzte Treppe; an jeder Stufe zeichnet sich ein kurzes Champagner-Stück auf der Haarlinie
   ===================================================================== */
.phi-therefore__title {
  margin: 0 0 clamp(26px, 4vw, 52px);
  font: italic 400 clamp(34px, 9vw, 46px)/1 var(--f-serif); letter-spacing: -.01em; color: var(--grey);
}
.phi-therefore { padding-bottom: clamp(72px, 8vw, 120px); }
.phi-therefore__list { display: grid; }
.phi-step {
  position: relative;
  margin-left: calc(var(--i, 0) * 5%);
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
  font: 400 clamp(34px, 9.2vw, 46px)/1.06 var(--f-serif); letter-spacing: -.016em;
  color: var(--bone); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual;
}
.phi-step:last-child { border-bottom: 1px solid var(--line); }
.phi-step::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 1px; background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 1.3s var(--ease-inout) calc(var(--d, 0s) + .25s);
}
.phi-step.is-in::before, .no-anim .phi-step::before { transform: scaleX(1); }
html:not(.js) .phi-step::before { transform: scaleX(1); }
@media (min-width: 768px) { .phi-step { margin-left: calc(var(--i, 0) * 7%); } }
@media (min-width: 1024px) {
  .phi-therefore__title { font-size: clamp(44px, 3.6vw, 60px); }
  .phi-step { margin-left: calc(var(--i, 0) * 8%); padding: 30px 0 34px; font-size: clamp(50px, 4.4vw, 78px); }
  .phi-step::before { width: 64px; }
}

/* =====================================================================
   MEIN UMGANG MIT PFERDEN – Fotostrecke mit Untertiteln (Wort + Satz wie ein Filmuntertitel)
   ===================================================================== */
.phi-ways { padding-bottom: 0; }
.phi-ways .sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.phi-ways__lead { color: var(--bone); font-size: clamp(19px, 4.8vw, 21px); line-height: 1.5; hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; }
/* Grundlage + Haltung: eingerückt unter der rechten Spalte des Kopfes (asymmetrisch), vor der Fotostrecke */
.phi-ways__text { display: grid; gap: 18px; margin-bottom: clamp(48px, 7vw, 104px); }
.phi-ways__base {
  margin: 0; max-width: 24ch;
  font: 400 clamp(28px, 7.4vw, 38px)/1.14 var(--f-serif); letter-spacing: -.01em; color: var(--bone);
  text-wrap: balance; hyphens: manual; -webkit-hyphens: manual;
}
.phi-ways__copy { margin: 0; max-width: 54ch; color: var(--grey); text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 1024px) {
  .phi-ways__lead { font-size: 21px; }
  .phi-ways__text {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: 26px;
  }
  .phi-ways__base { grid-column: 4 / span 7; max-width: 26ch; font-size: clamp(40px, 3.3vw, 58px); }
  .phi-ways__copy { grid-column: 4 / span 6; font-size: 19px; }
}
/* flache Mittagsaufnahmen an den Noir-Look angleichen (keine Cinemagraphs, Filter erlaubt) */
.phi-reel img { filter: saturate(.86) contrast(1.06) brightness(.96); }
.phi-reel .reel__item::after {
  background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 42%, rgba(var(--night-rgb), .52) 66%, rgba(var(--night-rgb), .9) 100%);
}
.phi-reel__cap { display: grid; justify-items: center; gap: 10px; bottom: clamp(22px, 5vw, 44px); font-style: normal; }
.phi-reel__word { font: 400 clamp(32px, 8.6vw, 42px)/1 var(--f-serif); letter-spacing: -.012em; color: var(--bone); }
.phi-reel__sub {
  max-width: 30ch;
  font: italic 400 clamp(17px, 4.6vw, 20px)/1.38 var(--f-serif);
  color: rgba(var(--bone-rgb), .88); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual;
}
@media (min-width: 768px) {
  .phi-reel__word { font-size: clamp(32px, 2.9vw, 48px); }
  .phi-reel__sub { font-size: clamp(17px, 1.35vw, 21px); }
  .phi-reel .reel__item:hover img { transform: scale(1.03); }
}

/* =====================================================================
   DESHALB auf Elfenbein (.lumen, Endnote 8,4) + GRUNDSATZ leise als Schlusszeile (groß nur auf der Startseite)
   ===================================================================== */
.lumen.phi-therefore { padding-block: clamp(88px, 10vw, 160px); }
.lumen .phi-therefore__title { color: var(--ink-2); }
.lumen .phi-step { color: var(--ink); border-top-color: rgba(23, 20, 15, .16); }
.lumen .phi-step:last-child { border-bottom-color: rgba(23, 20, 15, .16); }
.lumen .phi-step::before { background: var(--bronze); }
.phi-credo { display: grid; gap: 12px; margin: clamp(56px, 7vw, 104px) 0 0; }
.phi-credo__label { margin: 0; }
.phi-credo__quote { margin: 0; }
.phi-credo__quote p { margin: 0; max-width: 30ch; font: italic 400 clamp(23px, 6vw, 30px)/1.3 var(--f-serif); color: var(--ink); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 1024px) {
  .phi-credo { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 48px; align-items: baseline; margin-left: 40%; }
  .phi-credo__quote p { font-size: clamp(26px, 2vw, 32px); }
}

/* =====================================================================
   REHA – Teaser-Zeile (Zusatzrunde: der Satz „Fortschritte lassen sich nicht erzwingen.“ wohnt auf leistungen.html)
   ===================================================================== */
.phi-next { padding-block: clamp(72px, 8vw, 128px); }
.phi-next__row { display: grid; gap: 14px; justify-items: start; padding-top: 24px; border-top: 1px solid var(--line); }
.phi-next__label { margin: 0; }
.phi-next__line { margin: 0; max-width: 40ch; font: italic 400 clamp(22px, 5.6vw, 28px)/1.3 var(--f-serif); color: var(--bone); text-wrap: balance; }
@media (min-width: 1024px) {
  .phi-next__row { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) auto; column-gap: 48px; align-items: baseline; }
  .phi-next__line { font-size: clamp(24px, 1.9vw, 30px); }
}

/* =====================================================================
   ABSCHLUSS (150554, eigene Noir-Fassung; blass-lila Halfter links oben – CTA liegt rechts bzw. darunter)
   ===================================================================== */
.phi-finale .cta-band__media img { object-position: 40% 18%; }
.phi-finale__title.title-serif { font-size: clamp(33px, 8.6vw, 54px); }
@media (min-width: 1024px) {
  .phi-finale .cta-band__media img { object-position: 36% 24%; }
  .phi-finale__title.title-serif { font-size: clamp(44px, 3.9vw, 70px); }
}

/* =====================================================================
   „BEWEGUNG REDUZIEREN“ – ruhige Fassung: Überblenden statt Öffnen/Zeichnen
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .phi-hero__word { animation: hero-fade 1s ease both; animation-delay: var(--hd); }
  .phi-cause::after { transform: none; opacity: 0; transition: opacity 1s ease; }
  .phi-cause.is-lit::after { opacity: 1; }
  .phi-step::before { transform: none; opacity: 0; transition: opacity 1s ease calc(var(--d, 0s) + .2s); }
  .phi-step.is-in::before { opacity: 1; }
  .phi-reel .reel__item:hover img { transform: none; }
}