/* ==========================================================================
   PRODUKTSEITE – gemeinsames Stilblatt aller Marken-Seiten
   Liegt ÜBER assets/style.css. Wird von biolit-neu.html, leonardit-neu.html
   und den folgenden Produktseiten benutzt.
   ==========================================================================

   Der Aufbau ist bei allen gleich und erzählt einen Weg: oben die Herkunft
   (dunkel, Material), unten das Labor und der Hof (das gewohnte warme
   Off-White der übrigen Seiten). Deshalb zwei Register – .ps-dunkel und
   .ps-hell.

   FARBEN JE MARKE: Die Rollen stehen hier als Vorgabe, jede Seite überschreibt
   sie unten in ihrem eigenen Block. Die Farben stammen immer aus dem Material
   selbst – nie ausgedacht.
     --ps-grund        Hintergrund des dunklen Teils
     --ps-grund-2      zweite, etwas hellere Fläche
     --ps-akzent       Leitfarbe, muss auf Dunkel tragen
     --ps-akzent-tief  dieselbe Farbe für hellen Grund
     --ps-zweit        Gegenfarbe für Hervorhebungen

   WICHTIG: Jede Animation muss auch AUS funktionieren. Wer im Betriebssystem
   "Bewegung reduzieren" eingestellt hat, bekommt am Ende der Datei alles
   sofort sichtbar gestellt. Und ohne JavaScript ebenso (siehe .ps-anim).
   ========================================================================== */

:root{
  /* Vorgabe = Biolit: Gestein. Grün vom Grünstein, Rotbraun von den Aschen. */
  --ps-grund:#15181a;         /* fast schwarz, leicht kühl – nasser Fels */
  --ps-grund-2:#1e2326;
  --ps-akzent:#8fb173;        /* Grünstein, aufgehellt bis es auf Dunkel trägt */
  --ps-akzent-tief:#5a7d3c;   /* = --accent der Hauptseite, hält die Marke zusammen */
  --ps-zweit:#b4674a;         /* die rotbraune Aschenschicht */
  --ps-hell-text:#eceadf;
  --ps-hell-grau:#9fa5a2;
  --ps-linie:rgba(236,234,223,.14);
  --ps-kopf-bg:rgba(21,24,26,.92);   /* Kopfzeile, sobald sie fest wird */
  --ps-kopf-ink:#15181a;             /* Schrift auf dem Akzent-Knopf */
}

/* ---------- Leonardit: 65 Mio Jahre alte Weichbraunkohle.
   Schwarzbraun wie das Material, Ocker wie die Sand- und Tonbänder,
   die im Flöz darüber und darunter liegen. ---------- */
body[data-marke="leonardit"]{
  --ps-grund:#0f0d0b;
  --ps-grund-2:#191511;
  --ps-akzent:#d0a56d;        /* Ocker aus den Zwischenschichten */
  --ps-akzent-tief:#8a6d3b;   /* = --earth der Hauptseite */
  --ps-zweit:#7fa653;         /* Moosgrün – gehört dem lebenden Kompost */
  --ps-hell-text:#ece7dd;
  --ps-hell-grau:#a49a8c;
  --ps-linie:rgba(236,231,221,.14);
  --ps-kopf-bg:rgba(15,13,11,.93);
  --ps-kopf-ink:#17130e;
}

/* ---------- Güllebehandlung: der Weg von Fäulnis zu Rotte.
   Dunkles Oliv-Schwarz wie die Grube, frisches Grün für das, was daraus
   werden soll, Bernstein für das Problem (Ammoniak, Fäulnis). ---------- */
body[data-marke="guelle"]{
  --ps-grund:#14150f;
  --ps-grund-2:#1e2016;
  --ps-akzent:#9dbd6a;
  --ps-akzent-tief:#5a7d3c;
  --ps-zweit:#cf9040;         /* Bernstein – gehört immer der Fäulnisseite */
  --ps-hell-text:#eceadf;
  --ps-hell-grau:#a2a493;
  --ps-linie:rgba(236,234,223,.14);
  --ps-kopf-bg:rgba(20,21,15,.93);
  --ps-kopf-ink:#14150f;
}

/* ---------- Der andere Weg: fermentierter Kräuterauszug.
   Warmes Dunkelbraun wie der Ansatz, Kräutergrün und das Sonnenblumengelb
   aus dem Embiosa-Zeichen. ---------- */
body[data-marke="andererweg"]{
  --ps-grund:#16130e;
  --ps-grund-2:#211b13;
  --ps-akzent:#a9c46d;
  --ps-akzent-tief:#5a7d3c;
  --ps-zweit:#d9a441;
  --ps-hell-text:#ece9de;
  --ps-hell-grau:#a59e8c;
  --ps-linie:rgba(236,233,222,.14);
  --ps-kopf-bg:rgba(22,19,14,.93);
  --ps-kopf-ink:#16130e;
}

/* ---------- Startseite: die Summe aus allem.
   Warmes Dunkel wie feuchte Erde, Grün fürs Wachsende, Gold vom reifen
   Getreide. ---------- */
body[data-marke="start"]{
  --ps-grund:#171a13;
  --ps-grund-2:#20241a;
  --ps-akzent:#9dbd6a;
  --ps-akzent-tief:#5a7d3c;
  --ps-zweit:#cfa14e;         /* Gold vom reifen Getreide */
  --ps-hell-text:#eceadf;
  --ps-hell-grau:#a3a695;
  --ps-linie:rgba(236,234,223,.14);
  --ps-kopf-bg:rgba(23,26,19,.93);
  --ps-kopf-ink:#171a13;
}

/* ---------- NaturSinn: die 2000er.
   Kühles Anthrazit statt warmer Erde – die Reihe steht auf Wasser, nicht auf
   Humus. Grün wie das Logo, dazu als Gegenfarbe das Blau der 2000er-Kartons.
   Dieses Blau gehört auf der Seite ausschliesslich dem Wasserbereich; damit
   ist der feinstofflich begründete Teil auch farblich abgesetzt. ---------- */
body[data-marke="natursinn"]{
  --ps-grund:#121619;
  --ps-grund-2:#1b2226;
  --ps-akzent:#8cc07a;
  --ps-akzent-tief:#4d8442;
  --ps-zweit:#5fa8d3;         /* Wasserblau – gehört immer dem 2000er-Wasserteil */
  --ps-hell-text:#eceef0;
  --ps-hell-grau:#9aa3a8;
  --ps-linie:rgba(236,238,240,.14);
  --ps-kopf-bg:rgba(18,22,25,.93);
  --ps-kopf-ink:#121619;
}

/* ---------- Grundlage ---------- */

/* WICHTIG, sonst sind alle Bilder verzerrt: Die Attribute width="…" und
   height="…" im HTML stehen dort, damit beim Laden nichts springt. Sie wirken
   im Browser aber wie eine CSS-Regel – und eine feste Höhe schlägt sogar
   aspect-ratio. Ohne dieses height:auto wird jedes Bild auf seine
   Attributhöhe gezwungen (ein 1200×900-Foto erschien 534×900 px hoch).
   Nur für Bilder, denen wir selbst eine Breite geben – NICHT pauschal für
   alle: ein `body.produktseite img` hätte mehr Gewicht als `.ps-hero__marke` und
   würde die Logos auf ihre volle Höhe aufblasen.
   Hero und Schlussbild brauchen wirklich 100 % Höhe – die stehen weiter
   unten mit höherer Spezifität und gewinnen dadurch. */
.ps-bild img,.ps-split__bild img,.ps-weg__karte img{height:auto}

body.produktseite{background:var(--ps-grund);color:var(--ps-hell-text)}
.ps-dunkel{background:var(--ps-grund);color:var(--ps-hell-text);position:relative}
.ps-dunkel h1,.ps-dunkel h2,.ps-dunkel h3{color:var(--ps-hell-text)}
.ps-dunkel .mini,.ps-dunkel .muted{color:var(--ps-hell-grau)}
.ps-dunkel a{color:var(--ps-akzent)}

/* Der helle Teil holt die gewohnte Seitenfarbe zurück. */
.ps-hell{background:var(--bg);color:var(--ink)}
.ps-hell h2,.ps-hell h3{color:var(--ink)}

.ps-weit{max-width:1180px;margin:0 auto;padding:0 24px}
.ps-abschnitt{padding:clamp(64px,9vw,130px) 0}

/* ---------- Kopfzeile: über dem Bild durchsichtig, danach fest ---------- */
body.produktseite header.site{background:transparent;border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
body.produktseite header.site .brand,body.produktseite header.site .navlinks a{color:var(--ps-hell-text)}
body.produktseite header.site .brand span{border-left-color:var(--ps-akzent)}
body.produktseite header.site.fest{background:var(--ps-kopf-bg);backdrop-filter:blur(10px);
  border-bottom-color:var(--ps-linie)}
body.produktseite header.site .navlinks a.active{background:color-mix(in srgb, var(--ps-akzent) 20%, transparent)}
body.produktseite header.site .navlinks a.cta{background:var(--ps-akzent);color:var(--ps-kopf-ink);border-color:transparent}

/* ---------- Das ausgeklappte Menue am Handy ----------
   FEHLER BIS 01.09.2026: Am Handy gibt style.css dem ausgeklappten Menue den
   HELLEN Seitengrund (background:var(--bg)). Die Links darin stehen aber in
   --ps-hell-text - fast weiss, weil die Kopfzeile sonst ueber dem dunklen Hero
   schwebt. Zusammen ergab das weisse Schrift auf cremefarbenem Grund: auf dem
   Telefon war das Menue praktisch nicht zu lesen.

   Die Startseite traegt dieselbe Klasse (body class="produktseite"), es traf
   also nicht nur die Markenseiten.

   Repariert wird die Flaeche, nicht die Schrift: Das Menue bekommt denselben
   dunklen Grund wie die festgestellte Kopfzeile. Damit bleibt der Auftritt der
   Produktseiten heil - haetten wir stattdessen die Schrift dunkel gemacht,
   waere sie beim Zuklappen ueber dem Hero unsichtbar geworden. */
@media(max-width:1080px){
  body.produktseite header.site .navlinks{
    background:var(--ps-kopf-bg);
    backdrop-filter:blur(10px);
    border-bottom-color:var(--ps-linie);
  }
}

/* Dieselbe Falle wie beim Handy-Menue, nur eine Ebene tiefer: Die Links in der
   Navigationsgruppe stehen in --ps-hell-text (fast weiss), das Kaestchen darum
   kaeme aus style.css aber mit hellem Grund (var(--card)). Also bekommt auch
   das Kaestchen den dunklen Grund der Kopfzeile. */
body.produktseite header.site .navdrop__inhalt{
  background:var(--ps-kopf-bg);
  backdrop-filter:blur(10px);
  border-color:var(--ps-linie);
}
@media(max-width:1080px){
  body.produktseite header.site .navdrop__inhalt{
    background:transparent;
    backdrop-filter:none;
    border-left-color:var(--ps-linie);
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.ps-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ps-grund)}
/* Höhere Spezifität als .ps-bild weiter unten – sonst gewinnt dort
   position:relative und das Bild wird zum Flex-Element im Hero. */
.ps-hero .ps-hero__bild{position:absolute;inset:0;z-index:0}
.ps-hero .ps-hero__bild img{width:100%;height:100%;object-fit:cover;
  /* Ken-Burns: sehr langsam, sonst wirkt es unruhig statt teuer */
  transform:scale(1.08);animation:ps-kenburns 26s ease-out forwards}
@keyframes ps-kenburns{to{transform:scale(1)}}
/* Zwei Verläufe: unten Text lesbar machen, oben die Kopfzeile absetzen. */
.ps-hero__schleier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(21,24,26,.72) 0%,rgba(21,24,26,.15) 28%,
             rgba(21,24,26,.55) 68%,rgba(21,24,26,.94) 100%)}
.ps-hero__inhalt{position:relative;z-index:2;width:100%;padding-bottom:clamp(56px,9vh,110px)}
/* Das Logo liegt als weiße Freistellung vor (…-weiss.png) – kein Filter nötig.
   Das Original hat trotz Alphakanal einen deckend weißen Hintergrund, ein
   brightness(0) invert(1) darauf ergäbe nur einen weißen Kasten. */
.ps-hero__marke{height:44px;width:auto;margin-bottom:24px;opacity:.95}
.ps-hero h1{font-size:clamp(2.5rem,7.2vw,5.6rem);line-height:1.02;font-weight:700;
  letter-spacing:-.03em;margin:0 0 .35em;max-width:16ch}
.ps-hero__unter{font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--ps-hell-text);
  opacity:.86;max-width:52ch;margin:0 0 32px}
.ps-hero__ort{position:absolute;right:24px;bottom:clamp(56px,9vh,110px);z-index:2;
  writing-mode:vertical-rl;font-family:var(--kopf);font-size:.78rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ps-hell-grau)}
@media(max-width:900px){.ps-hero__ort{display:none}}

/* Wortweises Aufdecken der Überschrift */
.ps-wort{display:inline-block;overflow:hidden;vertical-align:bottom}
.ps-wort>span{display:inline-block;will-change:transform}

.ps-cue{display:inline-flex;align-items:center;gap:10px;font-family:var(--kopf);
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ps-hell-grau)}
.ps-cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--ps-akzent),transparent);
  animation:ps-cue 2.1s ease-in-out infinite}
@keyframes ps-cue{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ==========================================================================
   GROSSER SATZ – Wörter blenden beim Scrollen auf
   ========================================================================== */
.ps-satz{font-family:var(--kopf);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.6rem,4.1vw,3.1rem);line-height:1.25;max-width:22ch;margin:0}
/* Abgeblendet wird NUR, wenn das Skript läuft – sonst stünde der Satz
   ohne JavaScript dauerhaft auf 16 % Deckkraft und wäre unlesbar. */
.js-an .ps-satz .w{opacity:.16}
.ps-satz em{font-style:normal;color:var(--ps-akzent)}
.ps-satz .asche{color:var(--ps-zweit)}

/* ==========================================================================
   ZAHLEN
   ========================================================================== */
.ps-zahlen{display:grid;gap:1px;background:var(--ps-linie);
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));border:1px solid var(--ps-linie)}
.ps-zahl{background:var(--ps-grund);padding:30px 24px}
.ps-zahl b{display:block;font-family:var(--kopf);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.6vw,2.9rem);color:var(--ps-akzent);line-height:1.05}
/* NUR das direkte Kind! Die hochzählende Zahl steht als <span data-zahl> INNEN
   im <b>. Ein einfaches ".ps-zahl span" trifft sie mit - gleiche Gewichtung,
   aber weiter unten im Stilblatt, also gewinnt es. Ergebnis war: die große
   Zahl wurde auf Beschriftungsgröße geschrumpft und verlor ihre Farbe.
   Betraf alle Seiten mit Zählern. */
.ps-zahl>span{display:block;margin-top:8px;font-size:.92rem;color:var(--ps-hell-grau)}
.ps-zahl b>span{font-size:inherit;color:inherit;display:inline;margin:0}
.ps-zahl small{display:block;margin-top:6px;font-size:.78rem;color:#6f7673}

/* ==========================================================================
   DER WEG – waagrechte Strecke, die am Scrollrad läuft
   ========================================================================== */
/* overflow:hidden ist Pflicht, kein Zierat: Die Buehne ist eine Flex-Reihe
   aus fuenf Stationen zu je min(86vw,720px) - zusammen rund 3.600 px. Ohne
   Deckel ragt sie aus dem Fenster und die GANZE Seite laesst sich waagerecht
   schieben (gemessen 4.060 px Dokumentbreite bei 1.440 px Fenster). Der
   Fehler steckte seit dem Bau drin und war auch live. Am Handy fiel er nicht
   auf, weil die Strecke dort zu einer Liste untereinander wird.
   Auf .ps-weg selbst stoert es das Feststellen durch ScrollTrigger nicht -
   gepinnt wird dieses Element, und der Deckel gilt seinen Kindern. */
.ps-weg{position:relative;overflow:hidden;background:var(--ps-grund-2)}
.ps-weg__buehne{display:flex;align-items:center;height:100svh;will-change:transform}
.ps-weg__station{flex:0 0 min(86vw,720px);padding:0 clamp(16px,3vw,40px)}
.ps-weg__karte{position:relative;border-radius:14px;overflow:hidden;background:var(--ps-grund);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
/* Die ganze Karte – Bild UND Text – muss in die Bildschirmhöhe passen,
   sonst schneidet die waagrechte Strecke die Überschriften ab. */
.ps-weg__karte img{width:100%;aspect-ratio:4/3;max-height:min(52svh,480px);
  object-fit:cover;display:block}
.ps-weg__text{padding:24px 26px 28px}
.ps-weg__nr{font-family:var(--kopf);font-size:.78rem;letter-spacing:.24em;color:var(--ps-akzent);
  text-transform:uppercase}
.ps-weg__text h3{margin:10px 0 8px;font-size:1.45rem}
.ps-weg__text p{margin:0;color:var(--ps-hell-grau);font-size:.98rem}
.ps-weg__kopf{flex:0 0 min(80vw,460px);padding:0 clamp(16px,3vw,40px)}
/* Fällt die waagrechte Strecke aus (kein JS, schmales Gerät), wird daraus
   einfach eine Liste untereinander – nichts geht verloren. */
@media(max-width:720px){
  .ps-weg__buehne{display:block;height:auto;padding:0 20px 40px}
  .ps-weg__station,.ps-weg__kopf{padding:0;margin-bottom:26px;max-width:none}
}

/* ==========================================================================
   BILD + TEXT nebeneinander, Bild bleibt stehen
   ========================================================================== */
.ps-split{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr 1fr;align-items:start}
.ps-split--umgekehrt .ps-split__bild{order:2}
/* .ps-split__bild trägt meist auch .ps-bild – und die Regel dort steht später
   im Stilblatt bei gleicher Gewichtung. Ohne diesen doppelten Klassenselektor
   gewinnt dort position:relative und das Bild bleibt beim Scrollen nicht stehen. */
.ps-split__bild.ps-split__bild{position:sticky;top:96px;border-radius:12px;overflow:hidden;margin:0}
.ps-split__bild img{width:100%;display:block}
.ps-split__bild figcaption{padding:12px 14px;font-size:.85rem;color:var(--ps-hell-grau);
  background:var(--ps-grund-2)}
.ps-hell .ps-split__bild figcaption{background:#efeade;color:var(--muted)}
@media(max-width:820px){
  .ps-split{grid-template-columns:1fr}
  .ps-split--umgekehrt .ps-split__bild{order:0}
  /* Gleiche Gewichtung wie die sticky-Regel noetig, sonst klebt das Bild
     hier weiter und schiebt sich ueber den Text. */
  .ps-split__bild.ps-split__bild{position:static}
}

/* ==========================================================================
   PRODUKTKARTEN
   ========================================================================== */
.ps-produkte{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:34px}
.ps-produkt{background:var(--ps-grund-2);border:1px solid var(--ps-linie);border-radius:12px;
  padding:26px 24px;transition:transform .3s ease,border-color .3s ease,background .3s ease}
.ps-produkt:hover{transform:translateY(-4px);border-color:rgba(143,177,115,.45);background:#232a2d}
.ps-produkt__tag{display:inline-block;font-family:var(--kopf);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ps-akzent);border:1px solid rgba(143,177,115,.35);
  border-radius:999px;padding:4px 11px;margin-bottom:14px}
.ps-produkt h3{margin:0 0 10px;font-size:1.28rem}
.ps-produkt p{margin:0 0 10px;color:var(--ps-hell-grau);font-size:.96rem}
.ps-produkt strong{color:var(--ps-hell-text)}
.ps-produkt__logo{height:26px;width:auto;margin-bottom:10px;opacity:.9}

/* ==========================================================================
   KÖRNUNGSLINIEN – die Kurven zeichnen sich beim Scrollen
   ========================================================================== */
.ps-diagramm{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:clamp(20px,3vw,34px);margin:0}
.ps-diagramm h3{margin:0 0 4px;font-size:1.2rem}
.ps-diagramm svg{width:100%;height:auto;display:block;margin-top:14px}
.ps-diagramm svg text{font-size:13px;fill:#6f6857;font-family:"Segoe UI",system-ui,sans-serif}
.ps-diagramm figcaption{margin-top:14px;font-size:.92rem;color:var(--muted);line-height:1.6}
/* --len setzt das Skript aus der echten Pfadlänge. Ohne Skript greift die
   Regel nicht und die Kurven stehen einfach fertig da. */
.js-an .ps-linie-zeichnen{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.ps-balken{transform-origin:left center}
.ps-saeule{transform-origin:bottom center}
.ps-legende{display:inline-block;width:26px;height:4px;border-radius:2px;vertical-align:middle}

/* ==========================================================================
   KASKADE – eine Wirkungskette von oben nach unten
   Die senkrechte Linie zeichnet sich beim Scrollen mit (siehe produktseite.js).
   Ohne Skript steht sie einfach ganz da.
   ========================================================================== */
.ps-kaskade{position:relative;margin-top:44px;padding-left:64px}
.ps-kaskade__schiene{position:absolute;left:23px;top:8px;bottom:8px;width:2px;
  background:var(--ps-linie)}
.ps-kaskade__fortschritt{position:absolute;left:0;top:0;width:2px;height:100%;
  transform-origin:top center;background:linear-gradient(180deg,var(--ps-akzent),var(--ps-zweit))}
.ps-stufe{position:relative;margin-bottom:clamp(34px,5vw,64px)}
.ps-stufe:last-child{margin-bottom:0}
.ps-stufe__nr{position:absolute;left:-64px;top:-2px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--ps-grund);border:2px solid var(--ps-akzent);
  font-family:var(--kopf);font-weight:700;color:var(--ps-akzent);font-size:1.05rem}
.ps-stufe__kopf{font-family:var(--kopf);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ps-akzent);margin-bottom:6px}
.ps-stufe h3{font-size:clamp(1.25rem,2.3vw,1.7rem);margin:0 0 10px}
.ps-stufe__raster{display:grid;gap:clamp(18px,3vw,34px);grid-template-columns:1.15fr .85fr;
  align-items:start;margin-top:14px}
.ps-stufe__bild{margin:0;border-radius:12px;overflow:hidden}
.ps-stufe__bild img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.ps-stufe__bild figcaption{padding:9px 12px;font-size:.82rem;color:var(--ps-hell-grau);
  background:var(--ps-grund-2)}
/* Die Dosierung ist das, was der Bauer wirklich sucht – deshalb hervorgehoben. */
.ps-dosis{border:1px solid var(--ps-linie);border-left:3px solid var(--ps-akzent);
  border-radius:8px;padding:16px 18px;background:rgba(255,255,255,.03)}
.ps-dosis b{display:block;font-family:var(--kopf);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ps-akzent);margin-bottom:8px}
.ps-dosis p{margin:0 0 8px;font-size:.98rem}
.ps-dosis p:last-child{margin-bottom:0}
.ps-dosis .wert{font-family:var(--kopf);font-weight:700;color:var(--ps-hell-text);font-size:1.12rem}
@media(max-width:760px){
  .ps-kaskade{padding-left:44px}
  .ps-kaskade__schiene{left:15px}
  .ps-stufe__nr{left:-44px;width:32px;height:32px;font-size:.9rem}
  .ps-stufe__raster{grid-template-columns:1fr}
}

/* ==========================================================================
   VERGLEICH – zwei Sachen nebeneinanderstellen, ohne die andere schlechtzureden
   ========================================================================== */
.ps-vergleich{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:28px}
.ps-vergleich__karte{border:1px solid var(--ps-linie);border-radius:12px;padding:24px 22px;
  background:var(--ps-grund-2)}
.ps-vergleich__karte.betont{border-color:rgba(208,165,109,.5);background:rgba(208,165,109,.07)}
.ps-vergleich__karte h3{margin:0 0 4px;font-size:1.25rem}
.ps-vergleich__karte .mini{margin-bottom:14px}
.ps-vergleich ul{list-style:none;padding:0;margin:0}
.ps-vergleich li{padding:9px 0 9px 26px;position:relative;border-top:1px solid var(--ps-linie);
  font-size:.96rem}
.ps-vergleich li:first-child{border-top:0}
.ps-vergleich li::before{content:'';position:absolute;left:4px;top:17px;width:8px;height:8px;
  border-radius:50%;background:var(--ps-hell-grau)}
.ps-vergleich__karte.betont li::before{background:var(--ps-akzent)}
@media(max-width:760px){.ps-vergleich{grid-template-columns:1fr}}

/* ==========================================================================
   KREISLAUF – der Abschnitt bleibt stehen, Bild und Text wechseln beim
   Scrollen durch die Stationen.

   OHNE JavaScript stehen alle Stationen einfach untereinander als lesbare
   Liste. Erst .js-an baut daraus die uebereinanderliegende Buehne - so ist
   die Seite auch ohne Skript vollstaendig.
   ========================================================================== */
.ps-kreis{background:var(--ps-grund)}
.ps-kreis__station{padding:0 0 44px}
.ps-kreis__station figure{margin:0 0 18px;border-radius:14px;overflow:hidden}
.ps-kreis__station img{width:100%;height:auto;display:block}
.ps-kreis__nr{font-family:var(--kopf);font-size:.78rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ps-akzent)}
.ps-kreis__station h3{font-size:clamp(1.5rem,3.4vw,2.5rem);letter-spacing:-.02em;margin:.3em 0}
.ps-kreis__station p{color:var(--ps-hell-grau);max-width:46ch;margin:0}

/* --- ab hier nur mit Skript: die Buehne --- */
.js-an .ps-kreis__buehne{position:relative;min-height:100svh;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(60px,8vh,100px) 0}
.js-an .ps-kreis__station{position:absolute;inset:0;padding:0;display:grid;
  grid-template-columns:.88fr 1.12fr;gap:clamp(24px,4vw,56px);align-items:center;
  opacity:0;pointer-events:none}
.js-an .ps-kreis__station.aktiv{opacity:1;pointer-events:auto}
.js-an .ps-kreis__station figure{margin:0;order:2}
.js-an .ps-kreis__station .ps-kreis__wort{order:1}
.js-an .ps-kreis__station img{aspect-ratio:4/3;object-fit:cover;
  max-height:min(74svh,680px);width:100%}

/* Fortschrittspunkte am Rand */
.ps-kreis__punkte{position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;z-index:3}
.js-an .ps-kreis__punkte{display:flex}
.ps-kreis__punkte:not(.js-sichtbar){display:none}
.ps-kreis__punkt{width:10px;height:10px;border-radius:50%;border:1px solid var(--ps-linie);
  background:transparent;transition:background .3s ease,transform .3s ease}
.ps-kreis__punkt.aktiv{background:var(--ps-akzent);transform:scale(1.5)}
@media(max-width:820px){
  .js-an .ps-kreis__buehne,.js-an .ps-kreis__station{grid-template-columns:1fr}
  .js-an .ps-kreis__station figure{order:1}
  .js-an .ps-kreis__station .ps-kreis__wort{order:2}
  .js-an .ps-kreis__station img{max-height:38svh}
  .ps-kreis__punkte{right:8px}
}

/* ==========================================================================
   MARKENKACHELN – vier Wege ins Sortiment
   ========================================================================== */
.ps-marken{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:34px}
.ps-marke{position:relative;display:block;text-decoration:none;border-radius:14px;
  overflow:hidden;min-height:290px;background:var(--ps-grund-2);
  transition:transform .35s ease}
.ps-marke:hover{transform:translateY(-6px)}
.ps-marke img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;opacity:.62}
.ps-marke:hover img{transform:scale(1.06)}
.ps-marke__inhalt{position:relative;z-index:2;padding:24px;height:100%;display:flex;
  flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(23,26,19,.15) 30%,rgba(23,26,19,.92) 100%)}
.ps-marke__kopf{font-family:var(--kopf);font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ps-akzent);margin-bottom:6px}
.ps-marke h3{margin:0 0 6px;font-size:1.35rem;color:var(--ps-hell-text)}
.ps-marke p{margin:0;font-size:.93rem;color:var(--ps-hell-grau)}

/* ==========================================================================
   KETTE – nummerierte Schritte nebeneinander, die eine Abfolge zeigen.
   .schlecht = so läuft es schief · .gut = so drehen wir es um
   ========================================================================== */
.ps-kette{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:28px}
.ps-kette__schritt{position:relative;border:1px solid var(--ps-linie);border-radius:10px;
  padding:44px 18px 20px;background:var(--ps-grund-2)}
.ps-kette__nr{position:absolute;top:16px;left:18px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--kopf);font-weight:700;font-size:.85rem}
.ps-kette__schritt.schlecht .ps-kette__nr{background:var(--ps-zweit);color:var(--ps-grund)}
.ps-kette__schritt.gut .ps-kette__nr{background:var(--ps-akzent);color:var(--ps-grund)}
.ps-kette__schritt.schlecht{border-color:rgba(207,144,64,.3)}
.ps-kette__schritt.gut{border-color:rgba(157,189,106,.32)}
.ps-kette__schritt h4{margin:0 0 8px;font-family:var(--kopf);font-size:1.02rem;
  color:var(--ps-hell-text)}
.ps-kette__schritt p{margin:0;font-size:.92rem;color:var(--ps-hell-grau)}

/* Warnvariante der Vergleichskarte – für die Seite, auf der eine Spalte
   ausdrücklich das Problem zeigt und nicht die schlechtere Alternative. */
.ps-vergleich__karte.warnung{border-color:rgba(207,144,64,.42);background:rgba(207,144,64,.07)}
.ps-vergleich__karte.warnung li::before{background:var(--ps-zweit)}

/* ==========================================================================
   KRÄUTERLISTE – eine lange Zutatenliste als gesetztes Element statt als
   Bleiwüste. Funktioniert für jede Aufzählung gleichartiger Begriffe.
   ========================================================================== */
.ps-kraeuter{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0;list-style:none}
.ps-kraeuter li{border:1px solid var(--ps-linie);border-radius:999px;padding:7px 15px;
  font-size:.92rem;color:var(--ps-hell-text);background:rgba(255,255,255,.03);
  transition:border-color .2s ease,color .2s ease}
.ps-kraeuter li:hover{border-color:var(--ps-akzent);color:var(--ps-akzent)}

/* Zeichnung statt Foto – klar als Illustration erkennbar, nie als Produktfoto
   missverständlich. Steht dort, wo noch kein echtes Bild vorliegt. */
.ps-zeichnung{border:1px dashed var(--ps-linie);border-radius:12px;padding:26px;
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,
    rgba(255,255,255,.018) 9px,rgba(255,255,255,.018) 18px);text-align:center}
.ps-zeichnung svg{width:100%;max-width:280px;height:auto}
.ps-zeichnung figcaption{margin-top:16px;font-size:.84rem;color:var(--ps-hell-grau)}

/* Merksatz-Kasten für eine einzelne, wichtige Aussage */
.ps-merk{border-left:3px solid var(--ps-akzent);background:rgba(255,255,255,.04);
  border-radius:0 10px 10px 0;padding:20px 22px;margin-top:26px}
.ps-merk b{font-family:var(--kopf)}
.ps-hell .ps-merk{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent)}

/* ==========================================================================
   TABELLEN
   ========================================================================== */
/* color ist Pflicht: der Rahmen ist IMMER weiß, steht aber auch in dunklen
   Abschnitten. Ohne die eigene Textfarbe erbt die Tabelle dort das helle
   .ps-dunkel-Weiß und wird unlesbar (weiß auf weiß). */
.ps-tabellenrahmen{overflow-x:auto;margin-top:22px;border:1px solid var(--line);
  border-radius:12px;background:#fff;color:var(--ink)}
.ps-tabellenrahmen a{color:var(--accent-dark)}
.ps-tabellenrahmen .mini{color:var(--muted)}
table.ps-tabelle{width:100%;border-collapse:collapse;min-width:640px}
table.ps-tabelle th{text-align:left;font-family:var(--kopf);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:14px 16px;border-bottom:1px solid var(--line);
  background:#faf7f0;position:sticky;top:0}
table.ps-tabelle td{padding:13px 16px;border-bottom:1px solid #f0ece1;vertical-align:top;font-size:.95rem}
table.ps-tabelle tr:last-child td{border-bottom:0}
table.ps-tabelle tbody tr:hover{background:#faf8f2}

/* ==========================================================================
   ABSCHLUSS
   ========================================================================== */
.ps-schluss{position:relative;min-height:88svh;display:flex;align-items:center;
  overflow:hidden;padding:clamp(80px,12vh,140px) 0}
.ps-schluss .ps-schluss__bild{position:absolute;inset:0;z-index:0}
.ps-schluss .ps-schluss__bild img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.ps-schluss__schleier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(21,24,26,.94) 0%,rgba(21,24,26,.75) 45%,rgba(21,24,26,.3) 100%)}
.ps-schluss__inhalt{position:relative;z-index:2;max-width:34ch}
.ps-schluss h2{font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.1;letter-spacing:-.02em}
@media(max-width:760px){.ps-schluss__schleier{background:linear-gradient(180deg,rgba(21,24,26,.55),rgba(21,24,26,.93))}}

/* Knöpfe auf Dunkel */
.ps-dunkel .btn.primary{background:var(--ps-akzent);border-color:var(--ps-akzent);color:var(--ps-kopf-ink)}
.ps-dunkel .btn.primary:hover{background:#a2c186;border-color:#a2c186}
/* background ist Pflicht: der helle Grundstil gibt .btn.ghost ein weißes
   Feld – auf Dunkel stünde sonst heller Text auf weißem Knopf. */
.ps-dunkel .btn.ghost{background:transparent;border-color:rgba(236,234,223,.4);color:var(--ps-hell-text)}
.ps-dunkel .btn.ghost:hover{background:rgba(236,234,223,.08);border-color:var(--ps-akzent);color:var(--ps-akzent)}

/* Quellenzeile */
.ps-quelle{font-size:.84rem;color:var(--muted);border-left:2px solid var(--accent);
  padding-left:14px;margin-top:26px;max-width:76ch}
.ps-dunkel .ps-quelle{color:var(--ps-hell-grau);border-left-color:var(--ps-akzent)}

/* Bild lädt: solange nichts da ist, steht die zweite Grundfläche der Marke
   dahinter – nicht Schwarz, sonst sieht die Lücke aus wie ein Fehler. */
.ps-bild{position:relative;overflow:hidden;background:var(--ps-grund-2)}
.ps-bild img{display:block;width:100%}
.ps-bild img[data-geladen="nein"]{filter:blur(14px);transform:scale(1.04)}
.ps-bild img{transition:filter .6s ease,transform .6s ease}

/* ==========================================================================
   HOHES BILD, DURCH DAS MAN SCROLLT  (.ps-hochlauf)
   Der Abschnitt ist genau so hoch, wie das Bild bei voller Breite wird.
   Dadurch ist NICHTS beschnitten - man wandert beim Scrollen einmal durch
   das ganze Bild, die Textbloecke liegen an festen Stellen darauf.
   Reines CSS, kein Skript.

   AM HANDY GEHT DAS NICHT, und das ist Geometrie, kein Fehler: Ein
   2:3-Bild ist bei 390 px Breite nur 585 px hoch, also kuerzer als ein
   Handy-Bildschirm. Die Textbloecke haetten dort keinen Platz und liefen
   unten heraus. Deshalb steht das Bild dort als ganzer Block und der Text
   darunter - man sieht das Bild trotzdem vollstaendig.
   ========================================================================== */
.ps-hochlauf{position:relative;overflow:hidden;background:var(--ps-grund-2)}
.ps-hochlauf__bild{margin:0}
.ps-hochlauf__bild img{width:100%;height:auto;display:block}
.ps-hochlauf__schleier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(9,17,22,.74) 0%,rgba(9,17,22,.34) 46%,
             rgba(9,17,22,0) 74%)}
.ps-hochlauf__texte{position:absolute;inset:0;z-index:2}
.ps-hochlauf__halt{position:absolute;left:clamp(20px,5vw,72px);max-width:34ch;
  background:rgba(9,20,26,.8);backdrop-filter:blur(3px);
  border-left:3px solid var(--ps-akzent);padding:24px 26px;border-radius:0 12px 12px 0}
.ps-hochlauf__halt h2,.ps-hochlauf__halt h3{margin:0 0 10px;
  font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.12}
.ps-hochlauf__halt p{margin:0 0 10px;color:var(--ps-hell-text);opacity:.9;font-size:.98rem}
.ps-hochlauf__halt p:last-child{margin-bottom:0}
@media(max-width:900px){
  .ps-hochlauf__schleier{display:none}
  .ps-hochlauf__texte{position:static;padding:clamp(26px,6vw,44px) clamp(20px,5vw,24px)}
  /* top aus dem HTML wirkt auf ein statisches Element nicht mehr - genau so
     ist es gewollt, die Bloecke stehen dann einfach untereinander. */
  .ps-hochlauf__halt{position:static;max-width:none;margin:0 0 16px;
    border-radius:0 10px 10px 0;background:rgba(255,255,255,.05);backdrop-filter:none}
  .ps-hochlauf__halt:last-child{margin-bottom:0}
}

/* ==========================================================================
   BILD BLEIBT STEHEN, TEXT ZIEHT DARUEBER  (.ps-fest)
   position:sticky haelt das Bild am Fensterrand fest, waehrend die
   Textbloecke darueber hinwegwandern. Reines CSS - ohne JavaScript sieht
   man exakt dasselbe.

   Der negative Abstand an __lauf zieht die Textspalte wieder ueber das
   Bild; ohne ihn stuende sie darunter.
   ========================================================================== */
/* HIER KEIN overflow:hidden. Das war der Fehler beim ersten Bau am
   02.09.2026: Ein overflow:hidden macht aus dem Eltern-Element einen eigenen
   Scroll-Bereich, und position:sticky klebt dann an DEM statt am Fenster -
   also gar nicht mehr. Sichtbar wurde es erst beim zweiten Textblock: Das
   Bild war weg und der Text stand auf Schwarz.
   Runde Ecken und Deckel gehoeren deshalb an das Bild selbst; auf dem
   klebenden Element stoeren sie nicht, sie gelten nur seinen Kindern. */
.ps-fest{position:relative;background:var(--ps-grund-2)}
.ps-fest__bild{position:sticky;top:0;height:100svh;overflow:hidden;margin:0;
  border-radius:16px}
.ps-fest__bild img{width:100%;height:100%;object-fit:cover;display:block}
.ps-fest__schleier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(9,17,22,.72) 0%,rgba(9,17,22,.3) 50%,
             rgba(9,17,22,0) 78%)}
.ps-fest__lauf{position:relative;z-index:2;margin-top:-100svh}
.ps-fest__halt{min-height:100svh;display:flex;align-items:center;
  padding:0 clamp(20px,5vw,64px)}
.ps-fest__halt>div{max-width:36ch;background:rgba(9,20,26,.78);backdrop-filter:blur(3px);
  border-left:3px solid var(--ps-akzent);padding:26px 28px;border-radius:0 12px 12px 0}
.ps-fest__halt h2,.ps-fest__halt h3{margin:0 0 10px;
  font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.12}
.ps-fest__halt p{margin:0 0 10px;color:var(--ps-hell-text);opacity:.9}
.ps-fest__halt p:last-child{margin-bottom:0}
/* Wenn viele Bloecke ueber DASSELBE Bild laufen, wird ein voller Bildschirm
   je Block zu lang - fuenf Bloecke waeren fuenf Bildschirme auf einem Foto.
   --dicht rueckt sie enger zusammen, der erste bekommt etwas mehr Luft,
   damit das Bild erst einmal fuer sich steht. */
.ps-fest--dicht .ps-fest__halt{min-height:74svh}
.ps-fest--dicht .ps-fest__halt:first-child{min-height:92svh}

/* Etwas breitere Kaesten fuer Bloecke mit mehr Text. */
.ps-fest--breit .ps-fest__halt>div{max-width:44ch}

/* Ein Foto oder eine Quellenzeile in einem der Kaesten. */
.ps-fest__halt figure{margin:0}
.ps-fest__halt figure img{width:100%;height:auto;display:block;border-radius:8px;
  background:#f7f4ec}
.ps-fest__halt figcaption{margin-top:12px;font-size:.86rem;color:var(--ps-hell-grau);
  line-height:1.6}
.ps-fest__halt .quelle{margin-top:16px;padding-top:14px;font-size:.82rem;line-height:1.6;
  color:var(--ps-hell-grau);border-top:1px solid var(--ps-linie)}

/* Randlos ueber die volle Fensterbreite: keine abgerundeten Ecken. Der
   Abschnitt muss dafuer ausserhalb von .ps-weit liegen. */
.ps-fest--randlos .ps-fest__bild{border-radius:0}

/* Text auf der rechten Seite statt links. Fuer Bilder, deren Motiv links
   sitzt - beim Halm mit dem Tautropfen zum Beispiel. */
.ps-fest--rechts .ps-fest__halt{justify-content:flex-end}
.ps-fest--rechts .ps-fest__halt>div{border-left:0;
  border-right:3px solid var(--ps-akzent);border-radius:12px 0 0 12px}
.ps-fest--rechts .ps-fest__schleier{background:linear-gradient(270deg,
  rgba(9,17,22,.62) 0%,rgba(9,17,22,.24) 50%,rgba(9,17,22,0) 78%)}

@media(max-width:760px){
  /* Am Handy waere ein festgehaltenes Bild mit Text darauf zu eng - der
     Textblock deckt es fast ganz zu. Also ein Halt je Bildschirm, aber das
     Bild laeuft normal mit. */
  .ps-fest__bild{position:static;height:56svh}
  .ps-fest__lauf{margin-top:0}
  .ps-fest__halt{min-height:0;padding:0 clamp(20px,5vw,24px);margin-top:18px}
  /* Die Mindesthoehen von --dicht muessen hier ausdruecklich mit zurueck:
     Ein Media Query erhoeht die Gewichtung NICHT, und ".ps-fest--dicht
     .ps-fest__halt" hat zwei Klassen gegen eine. Ohne diese Zeile bleiben am
     Handy 74 svh je Block stehen - also fingerbreite Luecken zwischen den
     Kaesten, obwohl das Bild dort gar nicht mehr klebt. */
  .ps-fest--dicht .ps-fest__halt,
  .ps-fest--dicht .ps-fest__halt:first-child{min-height:0}
  .ps-fest__halt>div{max-width:none;background:rgba(255,255,255,.05);backdrop-filter:none}
  .ps-fest__schleier{background:linear-gradient(180deg,rgba(9,17,22,.1) 40%,
    rgba(9,17,22,.55) 100%)}
  .ps-fest{padding-bottom:24px}
}

/* ==========================================================================
   DER HERO-EFFEKT FUER ANDERE BILDER  (.ps-parallaxrahmen / .ps-parallax)
   Derselbe langsame Versatz wie oben im Hero: Das Bild schiebt sich beim
   Scrollen etwas langsamer weg als der Text davor. Knapp wollte diesen
   Eindruck ausdruecklich an mehr Stellen.

   Das Bild ist absichtlich HOEHER als sein Rahmen (118 %, oben und unten je
   9 % darueber hinaus). Sonst kaeme beim Verschieben ein Streifen Hintergrund
   zum Vorschein. Bewegt wird per Skript in produktseite.js; laeuft keines,
   steht das Bild einfach still - der Rahmen zeigt dann die Mitte.
   ========================================================================== */
.ps-parallaxrahmen{position:relative;overflow:hidden;background:var(--ps-grund-2)}
.ps-parallaxrahmen .ps-parallax{position:absolute;left:0;right:0;top:-9%;height:118%;
  will-change:transform}
.ps-parallaxrahmen .ps-parallax img{width:100%;height:100%;object-fit:cover;display:block}

/* Der Schlussabschnitt jeder Seite traegt ohnehin ein randloses Foto - der
   naheliegendste Platz fuer denselben Effekt, und er wirkt mit dieser einen
   Regel auf allen fuenf Seiten, die ihn haben (index, biolit, leonardit,
   der-andere-weg, guellebehandlung).
   Derselbe Selektor wie oben bei .ps-schluss, steht aber spaeter im Stilblatt
   und gewinnt deshalb - das ersetzt das inset:0 von dort durch den noetigen
   Ueberhang oben und unten. */
.ps-schluss .ps-schluss__bild{top:-9%;bottom:-9%;left:0;right:0;will-change:transform}

/* ==========================================================================
   ANIMATIONS-GRUNDZUSTAND
   Ohne JavaScript darf nichts unsichtbar bleiben – deshalb setzt erst das
   Skript die Klasse .js-an auf <html> und blendet damit überhaupt erst aus.
   ========================================================================== */
.js-an .ps-anim{opacity:0;transform:translateY(26px)}
.js-an .ps-hero h1 .ps-wort>span{transform:translateY(105%)}

@media(prefers-reduced-motion:reduce){
  .js-an .ps-anim{opacity:1!important;transform:none!important}
  .js-an .ps-hero h1 .ps-wort>span{transform:none!important}
  .ps-hero__bild img{animation:none;transform:none}
  .ps-cue i{animation:none}
  .ps-satz .w{opacity:1!important}
  .ps-linie-zeichnen{stroke-dashoffset:0!important}
  /* Gleiche Gewichtung wie die sticky-Regel noetig, sonst klebt das Bild
     hier weiter und schiebt sich ueber den Text. */
  .ps-split__bild.ps-split__bild{position:static}
  html{scroll-behavior:auto}
}

/* ============================================================ Haeufige Fragen
   Der Abschnitt, den seo-metadaten.js erzeugt. Zwei Spalten am Desktop, eine
   am Handy.

   Bewusst OHNE Aufklappen und ohne ps-anim: Was zugeklappt oder ausgeblendet
   ist, liest ein Besucher nicht - und wird von Suchmaschinen und
   KI-Assistenten seltener aufgegriffen. Der Text steht wortgleich in den
   strukturierten Daten im Kopf der Seite; beides erzeugt dasselbe Skript. */
/* 420px als Untergrenze ergibt am Desktop zwei Spalten, nicht drei. Bei drei
   Spalten werden die Antworten zu schmalen Saeulen und lesen sich schlecht.

   Das min(420px,100%) ist noetig und kein Zierat: minmax(420px,1fr) allein
   macht die Spalte auch dann 420px breit, wenn der Bildschirm schmaler ist -
   dann schiebt sich die ganze Seite waagerecht. Auf einem 375px-Handy war das
   sofort zu sehen. */
.ps-fragen{display:grid;gap:30px 48px;margin-top:38px;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.ps-frage{max-width:62ch}
.ps-frage h3{margin:0 0 .4em;font-size:1.08rem}
.ps-frage p{margin:0;line-height:1.62}