/* ==========================================================================
   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}

/* ==========================================================================
   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
   ========================================================================== */
.ps-weg{position:relative;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}

/* ==========================================================================
   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}