/* ==========================================================================
   HELL – die Gestaltung der Startseite für alle übrigen Seiten (seit 07.10.2026)

   Wird NACH style.css, produktseite.css, shop2.css usw. eingebunden und legt
   sich darüber. Die alten Stilblätter bleiben unverändert; wer hell.css
   herausnimmt, hat die alte Seite zurück.

   Farben nur aus dem Logo (Konzept 04_Website\KONZEPT_Website_hell_2026-10.md):
   Weiß und Salbei hell als Flächen, Waldgrün für Schrift, Blattgrün als Akzent,
   Erdbraun für Hervorhebungen. Kein Beige, kein Creme. Schrift wie die
   Startseite: Cormorant Garamond für Überschriften, Inter für Text, beide lokal.
   ========================================================================== */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("start/fonts/cormorant-garamond.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url("start/fonts/cormorant-garamond-italic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("start/fonts/inter.woff2") format("woff2")}

:root{
  --weiss:#fff; --salbei-hell:#F4F6EC; --salbei:#C2CDA3; --wald:#1F301B; --blatt:#476131;
  --erde:#7A5233; --sand:#DAB487; --leise:#5d6656;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:Inter,"Segoe UI",system-ui,sans-serif;
  /* Die Namen aus style.css, auf die hellen Farben gelegt */
  --bg:#fff; --card:#fff; --ink:#1F301B; --muted:#5d6656;
  --accent:#476131; --accent-dark:#1F301B; --earth:#7A5233; --line:#dfe5d2;
  --kopf:Inter,"Segoe UI",system-ui,sans-serif;
  --schatten:0 1px 2px rgba(31,48,27,.04),0 10px 26px -16px rgba(31,48,27,.28);
  --schatten-hover:0 2px 4px rgba(31,48,27,.05),0 20px 40px -20px rgba(31,48,27,.4);
}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--wald)}
h1{font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.04}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08}
h3{font-size:1.45rem;line-height:1.18}
h4{font-family:var(--sans);font-weight:600}
a{color:var(--blatt)}
.lead,.hero p{color:var(--muted)}

/* ---------- Kopf wie auf der Startseite ---------- */
header.site{background:rgba(255,255,255,.92);border-bottom:1px solid transparent;backdrop-filter:blur(10px)}
/* Rechts KEIN Abstand von hier: shop.css hält dort auf den Shop-Seiten 196px für den festen
   Warenkorb-Knopf frei. Ein padding von hier überschrieb das, der Burger lag unter dem Warenkorb. */
header.site .nav{max-width:none;padding-top:12px;padding-bottom:12px;padding-left:clamp(16px,3vw,40px)}
header.site .brand{gap:12px;color:var(--wald);font-family:var(--sans)}
header.site .brand img{width:44px;height:44px}
header.site .brand span{border:0;padding:0;font-size:inherit}
header.site .brand b{display:block;font:600 1.3rem/1 var(--serif);color:var(--wald)}
/* "KNAPP" wie im Logo: gesperrte Serifen-Großbuchstaben in Erdbraun */
header.site .brand small{display:block;font:500 .74rem/1 var(--serif);letter-spacing:.42em;color:var(--erde);margin-top:4px}
header.site .navlinks{gap:clamp(4px,1vw,14px)}
header.site .navlinks a{color:var(--wald);font-size:.86rem;padding:8px 6px;border-radius:8px}
header.site .navlinks a:hover{background:var(--salbei-hell);color:var(--blatt)}
header.site .navlinks a.active{color:var(--blatt);font-weight:600;background:none}
header.site .navdrop>summary{background:none;color:var(--wald);font-weight:400;font-size:.86rem;padding:8px 6px}
header.site .navdrop>summary:hover,header.site .navdrop--aktiv>summary{background:var(--salbei-hell);color:var(--blatt)}
header.site .navdrop>summary::after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
header.site .navdrop[open]>summary::after{content:"";transform:translateY(1px) rotate(225deg)}
header.site .navdrop__inhalt{background:#fff;border:0;border-radius:14px;padding:8px;box-shadow:0 18px 40px -18px rgba(31,48,27,.45)}
header.site .navdrop__inhalt a:hover{background:var(--salbei-hell)}
header.site .burger{color:var(--wald);background:rgba(255,255,255,.85);width:44px;height:44px;border-radius:12px;font-size:1.4rem}
@media(max-width:1080px){
  /* Ausgeklapptes Menü: eigener heller Grund, dunkle Schrift, in jedem Zustand */
  header.site .navlinks{top:100%;left:12px;right:12px;background:#fff;border:0;border-radius:16px;padding:10px;box-shadow:0 18px 40px -18px rgba(31,48,27,.5)}
  header.site .navlinks a,header.site .navdrop>summary{font-size:1rem;padding:11px 12px}
  header.site .navdrop>summary{justify-content:flex-start;gap:8px}
  header.site .navdrop__inhalt{background:transparent;box-shadow:none;border-left:2px solid var(--line);border-radius:0}
}

/* Shop-Seiten (erkennbar am Warenkorb-Knopf): shop.css klappt das Menü schon unter 1.480px ein.
   Dort dieselbe Karte wie am Handy statt einer flachen Liste über die ganze Breite. */
/* Über 1.480px steht die volle Leiste. Der Kopf ist jetzt fensterbreit (früher 1.080px mittig),
   deshalb rechts Platz für den festen Warenkorb-Knopf, sonst liegt er auf "Kontakt" */
@media(min-width:1481px){body:has(.wk-knopf) header.site .nav{padding-right:210px}}
@media(max-width:1480px){
  body:has(.wk-knopf) header.site .navlinks{top:100%;left:auto;right:12px;width:min(360px,calc(100% - 24px));background:#fff;border:0;border-radius:16px;padding:10px;box-shadow:0 18px 40px -18px rgba(31,48,27,.5)}
  body:has(.wk-knopf) header.site .navlinks a,body:has(.wk-knopf) header.site .navdrop>summary{font-size:1rem;padding:11px 12px}
  body:has(.wk-knopf) header.site .navdrop>summary{justify-content:flex-start;gap:8px;background:none}
  body:has(.wk-knopf) header.site .navdrop__inhalt{background:transparent;box-shadow:none;border-left:2px solid var(--line);border-radius:0}
}

/* ---------- Knöpfe ---------- */
.btn{font-family:var(--sans);font-weight:500;border-radius:999px;padding:12px 24px}
.btn.primary{background:var(--wald);color:#fff;box-shadow:0 10px 30px -14px rgba(31,48,27,.6)}
.btn.primary:hover{background:var(--blatt)}
.btn.ghost{background:#fff;color:var(--wald);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--blatt)}

/* ---------- Flächen der einfachen Seiten ---------- */
.hero{background:linear-gradient(180deg,var(--salbei-hell),#fff);border-bottom:0}
.band,.band.earth{background:var(--salbei-hell)}
.card{border-color:var(--line);border-radius:18px}
.grid .card:hover{border-color:var(--salbei)}
.tag{background:var(--salbei-hell);color:var(--blatt);font-weight:600;text-transform:none;letter-spacing:0;font-size:.8rem}
.trust .pill{border-color:var(--line);color:var(--leise)}
.stat .num{font-family:var(--serif);font-weight:500;color:var(--wald);font-size:2.4rem}
.fotoplatz{border-color:var(--salbei);background:var(--salbei-hell)}
table.anwendung th{background:var(--salbei-hell);color:var(--wald)}
input,select,textarea{border-color:var(--line);border-radius:10px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blatt);border-color:var(--blatt)}

/* ---------- Shop (shop.css, shop2.css) ---------- */
/* Auftakt der Shop-Seite war dunkel (#171a13) */
.shop-auftakt{background:var(--salbei-hell);color:var(--wald)}
.shop-auftakt h1,.shop-auftakt strong{color:var(--wald)}
.shop-auftakt p{color:var(--leise)}
.shop-sprung a{background:#fff;color:var(--wald);border-color:var(--line);font-family:var(--sans)}
.shop-sprung a:hover{border-color:var(--blatt);background:#fff;color:var(--blatt)}
/* Hinweiskasten unter dem Preis war beige */
.pp-weg{background:var(--salbei-hell)}
.pp-groesse.an,.pp-bedarf{background:var(--salbei-hell)}
.pp-bedarf{border-color:var(--line)}
/* Die zugeklappte Warenkorb-Schublade liegt rechts außerhalb des Fensters, ihr Schatten ragte
   als heller Streifen herein. Schatten nur, wenn sie offen ist. */
.wk{box-shadow:none}
.wk.auf{box-shadow:-16px 0 40px -20px rgba(31,48,27,.45)}
.karte__marke{background:rgba(31,48,27,.75)}

/* Lange Zeichenketten ohne Leerzeichen (Unterschriftenlinie "____" im Muster-Widerrufsformular,
   lange Adressen) sind in Inter breiter als vorher und schoben am Handy die Seite auf. */
.card p,.container p{overflow-wrap:anywhere}

/* ---------- Fuß wie auf der Startseite ---------- */
footer.site{background:var(--wald);color:#dfe6d2;margin-top:0}
footer.site .container{max-width:1180px;padding:56px clamp(16px,5vw,64px) 40px}
footer.site h4{font:500 1.35rem/1.2 var(--serif);color:#fff}
footer.site a{color:#dfe6d2}
footer.site .mini{color:#dfe6d2;font-size:.9rem}
.footbottom{border-top-color:rgba(255,255,255,.15);color:#b9c4ab}

/* ==========================================================================
   MARKENSEITEN (produktseite.css)
   Die Farbrollen werden für alle Marken auf hell gesetzt. Die Selektoren sind
   bewusst schwerer als body[data-marke="…"] in produktseite.css.
   ========================================================================== */
html body.produktseite,html body.produktseite[data-marke]{
  --ps-grund:#fff;
  --ps-grund-2:#F4F6EC;
  --ps-akzent:#476131;
  --ps-akzent-tief:#476131;
  --ps-zweit:#7A5233;
  --ps-hell-text:#1F301B;
  --ps-hell-grau:#5d6656;
  --ps-linie:rgba(31,48,27,.14);
  --ps-kopf-bg:rgba(255,255,255,.92);
  --ps-kopf-ink:#fff;
}
/* Güllebehandlung: Bernstein bleibt das Zeichen der Fäulnisseite, dunkel genug für hellen Grund */
html body.produktseite[data-marke="guelle"]{--ps-zweit:#9a5f1c}
/* NaturSinn: das Wasserblau gehört dem Wasserteil, dunkler für hellen Grund */
html body.produktseite[data-marke="natursinn"]{--ps-zweit:#2f7aa6}

/* Rhythmus: Die früher dunklen Abschnitte sind weiß, die früher hellen salbeigrün */
.ps-hell{background:var(--salbei-hell)}
.ps-dunkel h1,.ps-dunkel h2,.ps-dunkel h3,.ps-hell h2,.ps-hell h3{color:var(--wald)}
.ps-dunkel a{color:var(--blatt)}

/* Kopf über dem Bild: durchsichtig mit hellem Verlauf, danach fest und weiß */
body.produktseite header.site{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.55) 65%,rgba(255,255,255,0) 100%);backdrop-filter:none}
body.produktseite header.site.fest{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
body.produktseite header.site .brand,body.produktseite header.site .navlinks a{color:var(--wald)}
body.produktseite header.site .navlinks a.cta{background:var(--wald);color:#fff}
body.produktseite header.site .navdrop__inhalt{background:#fff;backdrop-filter:none}
@media(max-width:1080px){body.produktseite header.site .navlinks{background:#fff;backdrop-filter:none}}

/* Hero: das Foto ohne Schleier, im Original (Andi, 07.10.2026). Der Text steht oben links auf
   einer weißen Karte, damit das Motiv frei bleibt (bei Biolit der See im Steinbruch).
   Am Handy steht der Text unter dem Bild. */
.ps-hero{background:#fff;align-items:flex-start}
.ps-hero__schleier{display:none}
.ps-hero__inhalt{padding:clamp(96px,13vh,130px) 0 0}
.ps-hero__inhalt .ps-weit{max-width:none;margin:0;padding:0 clamp(16px,4vw,56px)}
.ps-hero__inhalt .ps-weit>*{max-width:560px}
.ps-hero__inhalt .ps-weit{position:relative}
/* Weicher Schleier nur hinter dem Text: ein heller Schimmer ohne Kante, der nach außen ins Foto
   ausläuft. Der Rest des Bildes bleibt im Original (Andi, 07.10.2026: keine Karte, ganze Bilder sehen). */
.ps-hero__inhalt .ps-weit::before{content:"";position:absolute;z-index:-1;left:-12%;top:-30%;width:min(1000px,110%);bottom:-34%;
  background:radial-gradient(closest-side,rgba(255,255,255,.86) 0%,rgba(255,255,255,.76) 42%,rgba(255,255,255,.42) 70%,rgba(255,255,255,.12) 88%,rgba(255,255,255,0) 100%)}
.ps-hero h1{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;color:var(--wald);font-size:clamp(2.4rem,4.4vw,4rem)}
.ps-hero__unter{font-size:1.05rem;margin-bottom:24px}
.ps-hero .ps-cue{display:none}
@media(max-width:820px){
  .ps-hero{display:block;min-height:0}
  .ps-hero .ps-hero__bild{position:relative;height:56svh;inset:auto}
  .ps-hero__inhalt{padding:28px 0 8px}
  .ps-hero__inhalt .ps-weit::before{display:none}
}
.ps-hero__unter{color:#2f3a2b;opacity:1}
.ps-hero__ort{color:var(--leise)}
/* Die farbigen Markenlogos haben einen deckend weißen Grund. Auf der weißen Karte im Hero
   bzw. auf hellem Grund nimmt multiply ihn weg. */
/* Freigestellte Logos (…-frei.png, weiß durchsichtig), kein Schild nötig (Andi, 07.10.2026) */
.ps-hero__marke,.ps-produkt__logo{mix-blend-mode:normal;opacity:1;background:none;padding:0}
.ps-hero__marke{height:clamp(52px,6vw,78px);margin-bottom:22px}
.ps-produkt__logo{height:30px;margin:2px 0 12px}
.ps-cue{color:var(--leise);font-family:var(--sans)}

/* NaturSinn-Hero (natursinn.css): Zitat und Dachzeile hatten Farben für dunklen Grund
   (hellgrüne Hervorhebung, weißer Name) und waren auf hellem Grund kaum zu sehen */
/* Dachzeilen über den Hero-Überschriften (je Seite eigene Klasse, Farbe für dunklen Grund) */
.leo-marke,.gb-marke,.daw-marke,.st-marke{font-family:var(--sans)!important;font-weight:600!important;color:var(--erde)!important;border-left-color:var(--blatt)!important;letter-spacing:.24em!important;font-size:.8rem!important}
.ps-hero h1.ns-marke{font-family:var(--sans);font-weight:600;font-size:.8rem;color:var(--erde);border-left-color:var(--blatt);letter-spacing:.24em}
.ns-zitat{font-family:var(--serif);font-weight:500;color:var(--wald);font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1.08;letter-spacing:-.01em}
.ns-zitat em{color:var(--blatt)}
.ns-zitat__wer{font-family:var(--sans);color:var(--erde);font-weight:600;letter-spacing:.2em}

/* Großer Satz und Zahlen */
.ps-satz{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.15}
.ps-satz em{color:var(--blatt);font-style:italic}
.ps-zahl b{font-family:var(--serif);font-weight:500;color:var(--wald);font-size:clamp(2.4rem,4.4vw,3.6rem)}
.ps-zahl small{color:var(--leise)}

/* Karten und Kästen */
.ps-weg__karte{box-shadow:0 24px 50px -30px rgba(31,48,27,.45)}
.ps-weg__nr,.ps-produkt__tag,.ps-stufe__kopf,.ps-kreis__nr,.ps-marke__kopf,.ps-dosis b{font-family:var(--sans);letter-spacing:.12em}
.ps-weg__text h3,.ps-produkt h3,.ps-stufe h3,.ps-kreis__station h3,.ps-marke h3,.ps-vergleich__karte h3{font-family:var(--serif);font-weight:500}
.ps-produkt{background:#fff;border-color:var(--line);box-shadow:var(--schatten)}
.ps-produkt:hover{background:#fff;border-color:var(--salbei)}
.ps-produkt__tag{border-color:rgba(71,97,49,.35)}
.ps-vergleich__karte{background:#fff;border-color:var(--line)}
.ps-vergleich__karte.betont{border-color:rgba(122,82,51,.4);background:#fbf8f4}
.ps-kette__schritt{background:#fff;border-color:var(--line)}
.ps-kette__schritt h4{font-family:var(--serif);font-weight:500;font-size:1.25rem}
.ps-dosis{background:#fff}
.ps-kraeuter li{background:#fff}
.ps-merk,.ps-hell .ps-merk{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blatt)}
.ps-zeichnung{background:var(--salbei-hell)}
.ps-split__bild figcaption,.ps-hell .ps-split__bild figcaption,.ps-stufe__bild figcaption{background:var(--salbei-hell);color:var(--leise)}
.ps-marke__inhalt{background:linear-gradient(180deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.94) 100%)}
.ps-marke img{opacity:1}
table.ps-tabelle th{background:var(--salbei-hell);font-family:var(--sans)}
table.ps-tabelle tbody tr:hover{background:#fafbf6}

/* Knöpfe in den früher dunklen Abschnitten */
.ps-dunkel .btn.primary{background:var(--wald);border-color:var(--wald);color:#fff}
.ps-dunkel .btn.primary:hover{background:var(--blatt);border-color:var(--blatt)}
.ps-dunkel .btn.ghost{background:#fff;border-color:var(--line);color:var(--wald)}
.ps-dunkel .btn.ghost:hover{background:#fff;border-color:var(--blatt);color:var(--blatt)}

/* Bilder mit Text: kein Schleier, die Fotos im Original (Andi, 07.10.2026). Der Text steht auf
   einer weißen Karte NEBEN dem Motiv: im Schlussbild rechts, damit Hand und Wurzel frei sind.
   Am Handy steht der Text unter dem Bild. */
.ps-schluss__schleier,.ps-hochlauf__schleier,.ps-fest__schleier{display:none}
/* Die Karte an den rechten Fensterrand, nicht nur an den Rand der mittigen Seitenbreite: im Biolit-Bild
   sitzen Hand und Wurzel in der Mitte, dort lag die Karte sonst genau darauf. */
/* width:100% ist Pflicht: .ps-schluss ist ein Flex-Container, ohne volle Breite schrumpft der
   Rahmen auf die Karte und margin:auto setzt ihn wieder in die Mitte. */
.ps-schluss .ps-weit{max-width:none;width:100%;margin:0;padding:0 clamp(16px,4vw,56px)}
.ps-schluss__inhalt{margin-left:auto;max-width:440px;position:relative;padding:32px 36px}
.ps-schluss__inhalt::before{content:"";position:absolute;z-index:-1;inset:-34% -30% -34% -30%;
  background:radial-gradient(closest-side,rgba(255,255,255,.86) 0%,rgba(255,255,255,.76) 42%,rgba(255,255,255,.42) 70%,rgba(255,255,255,.12) 88%,rgba(255,255,255,0) 100%)}
.ps-schluss h2{font-family:var(--serif);font-weight:500}
@media(max-width:760px){
  .ps-schluss{display:block;min-height:0;padding:0 0 40px}
  .ps-schluss .ps-schluss__bild{position:relative;inset:auto;top:auto;bottom:auto;height:62svh}
  .ps-schluss__inhalt{margin:24px 0 0;max-width:none;padding:0;background:none;box-shadow:none}
}
/* Bilder, über die Textblöcke laufen (NaturSinn: Halm, Berge): keine weißen Kästen, nur der
   weiche Schimmer hinter dem Text wie im Hero (Andi, 07.10.2026). Die Blöcke rücken enger zusammen. */
.ps-hochlauf__halt,.ps-fest__halt>div{background:none;backdrop-filter:none;box-shadow:none;border:0;border-radius:0;color:var(--wald);position:relative;isolation:isolate}
.ps-hochlauf__halt::before,.ps-fest__halt>div::before{content:"";position:absolute;z-index:-1;inset:-38% -24%;
  background:radial-gradient(closest-side,rgba(255,255,255,.86) 0%,rgba(255,255,255,.76) 42%,rgba(255,255,255,.42) 70%,rgba(255,255,255,.12) 88%,rgba(255,255,255,0) 100%)}
.ps-hochlauf__halt p,.ps-fest__halt p,.ps-fest__halt figcaption,.ps-fest__halt .quelle{color:#2f3a2b;opacity:1}
.ps-fest__halt .quelle{border-top-color:rgba(31,48,27,.18)}
/* Auf unruhigen Bildern (Kiesel, Wasser) etwas dichter in der Mitte */
.ps-hochlauf__halt::before{background:radial-gradient(closest-side,rgba(255,255,255,.93) 0%,rgba(255,255,255,.85) 45%,rgba(255,255,255,.5) 72%,rgba(255,255,255,.15) 89%,rgba(255,255,255,0) 100%)}
/* Der Schimmer ragt über den Fensterrand. clip statt hidden: hidden machte aus .ps-fest einen
   Scroll-Bereich und das Bild klebte nicht mehr (Falle Nr. 8 in SO_BAUEN_WIR_SEITEN.md) */
.ps-fest{overflow-x:clip}
/* Die rechtsbündige Fassung hatte eine senkrechte Linie am Kasten */
.ps-fest--rechts .ps-fest__halt>div{border-right:0;border-radius:0}
.ps-fest--dicht .ps-fest__halt{min-height:42svh}
.ps-fest--dicht .ps-fest__halt:first-child{min-height:62svh}
@media(max-width:900px){.ps-hochlauf__halt::before{display:none}}
@media(max-width:760px){.ps-fest__halt>div::before{display:none}}

/* Häufige Fragen wie auf der Startseite */
.ps-frage{border-top:1px solid var(--line);padding-top:18px}
.ps-frage h3{font-family:var(--serif);font-weight:500;font-size:1.5rem}
.ps-frage p{color:var(--leise)}