/* =====================================================================================
   NATURSINN – eigene Bausteine für natursinn.html

   Baut auf produktseite.css auf (ps-hero, ps-abschnitt, ps-weit, ps-anim …) und
   ergaenzt nur, was diese Seite zusaetzlich braucht. Alles hier traegt das
   Praefix ns-, damit nichts mit den anderen Produktseiten kollidiert.

   FARBEN: Die Seite hat drei Welten, und jede bekommt einen eigenen Ton -
   Landwirtschaft gruen (die Hausfarbe), Gewaesser tuerkis, Wasser blau. Das ist
   keine Dekoration: Wer auf der Seite springt, soll am Farbton merken, wo er ist.
   ===================================================================================== */

.natursinn-seite{
  --ns-land:#5a7d3c;
  --ns-land-dunkel:#3f5a29;
  --ns-wasser:#2f6f8f;
  --ns-wasser-dunkel:#1f4d64;
  --ns-gewaesser:#2f8f7d;
  --ns-gewaesser-dunkel:#1d6355;
  --ns-nacht:#141a16;
  /* Tiefes Wasser. --ns-tief-2 ist zugleich die Farbe, auf die das
     freigestellte WASSER2000-Foto montiert wurde (siehe
     09_Server\werkzeuge\bilder-natursinn.js). Wer sie hier aendert, muss das
     Bild neu erzeugen, sonst steht ein Kasten in der alten Farbe auf der
     Seite. */
  --ns-tief:#0b1f2a;
  --ns-tief-2:#122b38;
}

/* ===================================================================== Zitat-Hero

   ACHTUNG, NICHT .ps-marke NEHMEN: Das ist in produktseite.css die grosse
   Markenkachel mit min-height 290px und Bildhintergrund. Fuer die kleine
   Kopfzeile ueber der Ueberschrift gibt es auf jeder Seite eine eigene Klasse
   (vgl. .gb-marke auf guellebehandlung.html). */
.ns-marke{display:inline-block;font-family:var(--kopf);font-weight:700;
  letter-spacing:.32em;font-size:.86rem;text-transform:uppercase;
  color:var(--ps-akzent);border-left:3px solid var(--ps-akzent);
  padding-left:12px;margin-bottom:24px}

/* Die Markenzeile im Hero ist ein h1 - die Seite braucht eine Ueberschrift
   erster Ordnung, und der Hero beginnt hier mit einem Zitat statt mit einer
   Schlagzeile. Damit greift aber ".ps-hero h1" aus produktseite.css: Das ist
   spezifischer als ".ns-marke" und macht aus der kleinen Zeile eine 90 Pixel
   hohe Schlagzeile. Diese Regel dreht das zurueck. Sie muss mindestens so
   spezifisch sein wie ".ps-hero h1" - deshalb beide Klassen im Selektor. */
.ps-hero h1.ns-marke{font-size:.86rem;line-height:1.18;letter-spacing:.32em;
  max-width:none;margin:0 0 24px}


/* SCHLEIER FUER EIN HELLES HERO.
   Der Standardschleier aus produktseite.css ist auf dunkle Motive gerechnet -
   Felswand, Guellegrube, Floez. Er nimmt in der Bildmitte nur 15 % weg. Der
   Bergsee ist an genau dieser Stelle fast weiss, weisse Schrift stand darauf
   praktisch unlesbar. Deshalb hier ein eigener Verlauf: senkrecht etwas
   kraeftiger, dazu ein zweiter von links, weil der Text links steht. Rechts
   bleibt der See offen. */
.natursinn-seite .ps-hero__schleier{
  background:linear-gradient(180deg,rgba(9,20,26,.80) 0%,rgba(9,20,26,.34) 24%,
             rgba(9,20,26,.56) 60%,rgba(9,20,26,.93) 100%)}
.natursinn-seite .ps-hero__schleier::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,20,26,.66) 0%,rgba(9,20,26,.42) 38%,
             rgba(9,20,26,.06) 72%,rgba(9,20,26,0) 100%)}

.ns-zitat{
  font-family:var(--kopf);font-weight:700;
  font-size:clamp(1.6rem,4.4vw,3.1rem);line-height:1.16;
  letter-spacing:-.015em;margin:0 0 18px;max-width:19ch;
}
.ns-zitat em{font-style:italic;color:#cfe0b8}
.ns-zitat__wer{display:block;margin-top:20px;font-family:var(--kopf);
  font-weight:600;font-size:.84rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}

/* =================================================================== Die Zeitleiste
   Der Weg von 1999 bis heute, waagerecht am Desktop, senkrecht am Handy. */

.ns-zeit{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));position:relative}
.ns-zeit::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;
  background:linear-gradient(90deg,transparent,var(--ns-land) 12%,var(--ns-land) 88%,transparent)}
.ns-zeit li{position:relative;padding:32px 16px 0 0}
.ns-zeit li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;
  border-radius:50%;background:var(--bg);border:3px solid var(--ns-land)}
.ns-zeit b{display:block;font-family:var(--kopf);font-size:1.24rem;line-height:1}
.ns-zeit span{display:block;margin-top:7px;font-size:.9rem;color:var(--muted);line-height:1.5}
@media(max-width:700px){
  .ns-zeit{grid-template-columns:1fr;gap:22px}
  .ns-zeit::before{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto;
    background:linear-gradient(180deg,var(--ns-land),transparent)}
  .ns-zeit li{padding:0 0 0 30px}
  .ns-zeit li::before{top:2px}
}

/* ===================================================================== Drei Welten
   Der Umschalter. Kein Karussell, kein Aufklappen - drei Knoepfe, ein Bereich.
   Ohne JavaScript liegen alle drei Bereiche einfach untereinander, sichtbar. */

.ns-welten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 30px}
@media(max-width:700px){.ns-welten{grid-template-columns:1fr}}

.ns-welt{
  position:relative;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;
  padding:18px 18px 16px;transition:border-color .2s,transform .2s,box-shadow .2s;
  border-top:3px solid var(--line);
}
.ns-welt:hover{transform:translateY(-2px);box-shadow:var(--schatten-hover)}
.ns-welt:focus-visible{outline:3px solid var(--ns-land);outline-offset:2px}
.ns-welt b{display:block;font-family:var(--kopf);font-size:1.12rem;margin-bottom:5px}
.ns-welt span{display:block;font-size:.87rem;color:var(--muted);line-height:1.5}
.ns-welt svg{width:26px;height:26px;margin-bottom:10px;fill:none;stroke-width:1.6;
  stroke:var(--muted)}

.ns-welt[aria-selected="true"]{background:var(--bg)}
.ns-welt--land[aria-selected="true"]{border-top-color:var(--ns-land)}
.ns-welt--land[aria-selected="true"] svg{stroke:var(--ns-land)}
.ns-welt--gewaesser[aria-selected="true"]{border-top-color:var(--ns-gewaesser)}
.ns-welt--gewaesser[aria-selected="true"] svg{stroke:var(--ns-gewaesser)}
.ns-welt--wasser[aria-selected="true"]{border-top-color:var(--ns-wasser)}
.ns-welt--wasser[aria-selected="true"] svg{stroke:var(--ns-wasser)}

/* Solange kein JavaScript laeuft, ist nichts ausgeblendet. Erst das Skript
   setzt hidden - dieselbe Linie wie bei den anderen Seiten. */
.ns-tafel[hidden]{display:none}

/* Das Umschalten war bisher nicht zu erkennen: Der Kunde selbst hat auf der
   Live-Seite nicht gemerkt, dass hinter "Gewaesser" und "Wasseraufbereitung"
   noch zwei Seiten Text stecken. Zwei Kleinigkeiten dagegen - ein Satz
   darueber und ein Zeiger, der die gewaehlte Karte sichtbar mit dem Bereich
   darunter verbindet. Beides nur mit Skript: ohne stehen alle drei Bereiche
   untereinander, dann gibt es weder etwas umzuschalten noch eine "gewaehlte"
   Karte.

   Der Hinweis steht im HTML auf hidden und wird von natursinn.js sichtbar
   gemacht - NICHT ueber .js-an, die Begruendung steht dort. */
.ns-hinweis{margin:0 0 16px;font-size:.9rem;color:var(--ps-hell-grau)}

.ns-welten--schaltbar .ns-welt[aria-selected="true"]::after{
  content:"";position:absolute;left:50%;bottom:-11px;width:18px;height:18px;
  background:var(--bg);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
/* Am Handy stehen die drei Karten untereinander, dann zeigt der Zeiger nicht
   auf den Bereich, sondern auf die naechste Karte. */
@media(max-width:700px){ .ns-welten--schaltbar .ns-welt[aria-selected="true"]::after{display:none} }

/* ======================================================================= Bildband
   Vorbild ist die Leitbild-Seite von natursinn.de: Das Foto liegt flaechig
   darunter, ein Verlauf blendet es zur Textseite hin aus. Dadurch wirkt das
   Bild gross, ohne dass Text mitten darauf steht - das ist der Unterschied
   zwischen einem Foto als Hintergrund und einem Foto als Tapete.

   --links  = Motiv rechts (der Frosch), Text links.
   --rechts = Motiv links (der Halm), Text rechts.
   --hell   = das Bild laeuft von sich aus ins Helle, also dunkle Schrift. */
.ns-band{position:relative;border-radius:18px;overflow:hidden;display:grid;
  align-items:center;min-height:clamp(300px,38vw,440px);background:var(--ns-tief)}
.ns-band__bild{position:absolute;inset:0;z-index:0}
.ns-band__bild img{width:100%;height:100%;object-fit:cover;display:block}
.ns-band__schleier{position:absolute;inset:0;z-index:1}
.ns-band__inhalt{position:relative;z-index:2;padding:clamp(24px,4vw,50px);max-width:44ch}
.ns-band__inhalt h2,.ns-band__inhalt h3{margin:0 0 12px;
  font-size:clamp(1.4rem,3.2vw,2.3rem);line-height:1.14;letter-spacing:-.02em}
.ns-band__inhalt p{margin:0;font-size:1.02rem;line-height:1.65}

.ns-band--links .ns-band__schleier{background:linear-gradient(90deg,
  rgba(11,31,42,.96) 0%,rgba(11,31,42,.88) 34%,rgba(11,31,42,.35) 66%,rgba(11,31,42,0) 100%)}

/* Der Textblock steht rechts, der Text darin bleibt aber linksbuendig -
   rechtsbuendiger Fliesstext liest sich schlechter, weil der Zeilenanfang
   wandert. natursinn.de macht es genauso. */
.ns-band--rechts{justify-items:end}
.ns-band--rechts .ns-band__schleier{background:linear-gradient(270deg,
  rgba(243,244,240,.97) 0%,rgba(243,244,240,.9) 34%,rgba(243,244,240,.3) 68%,rgba(243,244,240,0) 100%)}

/* Farben gehoeren zur Variante, nicht zur Richtung: ein helles Band koennte
   auch von links kommen. */
.ns-band--hell{background:#f3f4f0}
.ns-band--hell .ns-band__inhalt,
.ns-band--hell .ns-band__inhalt h2,
.ns-band--hell .ns-band__inhalt h3{color:#171c1f}
.ns-band--hell .ns-band__inhalt p{color:#3d4649}

/* Am Handy passt kein waagrechter Verlauf mehr: Das Bild ist dann so schmal
   beschnitten, dass Motiv und Text uebereinanderliegen wuerden. Also Verlauf
   von unten, Text unten, und das Motiv aus der Mitte herausgeschoben, damit
   es im schmalen Ausschnitt stehen bleibt. */
@media(max-width:760px){
  .ns-band{align-items:end;min-height:420px}
  .ns-band--rechts{justify-items:stretch;text-align:left}
  .ns-band__inhalt{max-width:none}
  .ns-band--links .ns-band__bild img{object-position:68% 50%}
  .ns-band--rechts .ns-band__bild img{object-position:26% 50%}
  .ns-band--links .ns-band__schleier{background:linear-gradient(180deg,
    rgba(11,31,42,.15) 0%,rgba(11,31,42,.55) 46%,rgba(11,31,42,.95) 100%)}
  .ns-band--rechts .ns-band__schleier{background:linear-gradient(180deg,
    rgba(243,244,240,.2) 0%,rgba(243,244,240,.7) 44%,rgba(243,244,240,.97) 100%)}
}

/* Blau gehoert auf dieser Seite ausschliesslich dem Wasserteil. Die
   Kaskadenschiene nimmt ueber --ps-zweit sonst das Wasserblau an und faerbt
   damit ausgerechnet die Landwirtschaft ein. */
.natursinn-seite .ps-kaskade__fortschritt{
  background:linear-gradient(180deg,var(--ps-akzent),rgba(140,192,122,.22))}

/* Ein Foto ueber die volle Spaltenbreite, mit Bildunterschrift darunter.
   Feste Rahmenhoehe, weil das Bild darin den Hero-Effekt bekommt und dafuer
   groesser sein muss als sein Rahmen (siehe .ps-parallaxrahmen). */
.ns-breitbild{margin:34px 0 0}
.ns-breitbild__rahmen{height:min(58svh,470px);border-radius:16px 16px 0 0}
.ns-breitbild figcaption{padding:12px 16px;font-size:.86rem;color:var(--ps-hell-grau);
  background:var(--ps-grund-2)}

/* Verpackung neben dem Namen der Kaskadenstufe: Danach sucht man im Regal,
   und die Kaskade selbst zeigt die Situation, nicht das Produkt. */
.ns-stufe-kopf{display:flex;align-items:center;gap:14px;margin:0 0 4px}
.ns-stufe-kopf img{width:86px;height:86px;object-fit:contain;background:#f7f4ec;
  border-radius:10px;padding:7px;flex:0 0 auto}
.ns-stufe-kopf .ps-stufe__kopf{margin-bottom:2px}
.ns-stufe-kopf h3{margin:0}
@media(max-width:760px){ .ns-stufe-kopf img{width:62px;height:62px} }

/* Das freigestellte Geraetefoto ist auf --ns-tief-2 montiert; die Flaeche
   darum muss dieselbe Farbe haben, sonst sieht man den Rand des Bildes. */
.ns-tief-bild{background:var(--ns-tief-2)}
.ns-tief-bild figcaption{background:var(--ns-tief);color:var(--ps-hell-grau)}
/* Hochkant und ungedeckelt waere das Geraetefoto hoeher als der Bildschirm -
   dann bleibt es beim Scrollen nicht stehen, sondern schiebt sich durch.
   contain statt cover, weil es ein freigestelltes Produkt ist: beschneiden
   wuerde die Geraete anschneiden. */
.ns-tief-bild img{max-height:min(66svh,620px);object-fit:contain}

/* Der Halm mit dem Tropfen sitzt links, rechts laeuft das Bild ins Helle
   aus. Auf einem bildschirmhohen Fenster wird das sehr breite Bild
   (3000x1123) an den Seiten beschnitten - der Ausschnitt wird deshalb nach
   links geschoben, damit der Halm im Bild bleibt und rechts die helle
   Flaeche fuer den Text uebrig ist. */
.ns-halmbild img{object-position:34% 50%}

/* Der Frosch sitzt bei 62 % der Bildbreite. Wird das Querformat auf ein
   bildschirmhohes Fenster beschnitten (Variante C), faellt er sonst aus dem
   Bild - am Handy war er komplett weg. */
#tafel-gewaesser .ps-fest__bild img{object-position:64% 50%}

/* .ns-hochbild wurde am 02.09.2026 abgeloest: Das hochkante Bild traegt
   jetzt einen eigenen Abschnitt (.ps-hochlauf) statt neben dem Text zu
   stehen. */

/* ================================================================== Bausteinkarten */

.ns-bausteine{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
/* color MUSS hier stehen: Die Karten liegen im dunklen Abschnitt, und ein
   <article> erbt dessen helle Schriftfarbe - das waere weiss auf weiss. */
.ns-baustein{
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s;
}
.ns-baustein:hover{transform:translateY(-3px);box-shadow:var(--schatten-hover)}
.ns-baustein__bild{aspect-ratio:4/3;background:var(--bg);overflow:hidden}
.ns-baustein__bild img{width:100%;height:100%;object-fit:contain;padding:14px}
.ns-baustein__inhalt{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.ns-baustein__wo{font-family:var(--kopf);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ns-land);margin-bottom:6px}
.ns-baustein h3{margin:0 0 6px;font-size:1.22rem;color:var(--ink)}
.ns-baustein p{margin:0 0 12px;font-size:.92rem;line-height:1.6;color:var(--muted)}
.ns-baustein dl{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:.87rem}
.ns-baustein dt{color:var(--muted)}
.ns-baustein dd{margin:0;font-weight:600;color:var(--ink)}

/* ====================================================================== Rechner */

.ns-rechner{
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;
  padding:clamp(18px,3vw,30px);box-shadow:var(--schatten);
}
.ns-rechner__felder{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:22px}
.ns-rechner label{display:flex;flex-direction:column;gap:6px;font-size:.86rem;
  color:var(--muted)}
.ns-rechner input[type=number]{
  font:inherit;font-size:1.28rem;font-family:var(--kopf);font-weight:700;
  color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:11px;padding:11px 13px;width:100%;
}
.ns-rechner input:focus{outline:0;border-color:var(--ns-land)}
.ns-rechner__hinweis{font-size:.78rem;color:var(--muted);margin-top:-2px}

.ns-ergebnis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ns-karte{background:var(--bg);border:1px solid var(--line);border-radius:13px;
  padding:15px 17px;border-left:3px solid var(--ns-land)}
.ns-karte__wof{font-size:.79rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.14em;font-family:var(--kopf);font-weight:600}
.ns-karte__wert{font-family:var(--kopf);font-weight:700;font-size:1.6rem;
  line-height:1.15;margin:5px 0 3px;color:var(--ink)}
.ns-karte__wert small{font-size:.94rem;font-weight:600;color:var(--muted)}
.ns-karte__dazu{font-size:.84rem;color:var(--muted);line-height:1.5}

.ns-rechenweg{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.85rem;line-height:1.65;color:var(--muted)}
.ns-rechenweg b{color:var(--ink)}
.ns-rechenweg ol{margin:8px 0 0;padding-left:20px}
.ns-rechenweg li{margin-bottom:3px}

/* =================================================================== Pioniere */

.ns-pioniere{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:30px}
.ns-pionier{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
  border-radius:15px;padding:22px 20px;position:relative;overflow:hidden;
}
.ns-pionier__jahre{font-family:var(--kopf);font-size:.76rem;letter-spacing:.18em;
  color:rgba(255,255,255,.5);margin-bottom:8px}
.ns-pionier h3{margin:0 0 10px;font-size:1.18rem;color:#fff}
.ns-pionier p{margin:0;font-size:.9rem;line-height:1.62;color:rgba(255,255,255,.76)}
.ns-pionier__wasser{position:absolute;right:-14px;bottom:-14px;width:76px;height:76px;
  opacity:.09;fill:#fff}

/* Die gezeichnete Wasser-Grafik (.ns-bild-svg) ist am 02.09.2026 entfallen -
   fuer Gewaesser und Wasseraufbereitung liegen jetzt echte Fotos vor. */

/* ==================================================================== Einordnung
   Kein Warnkasten, sondern ein ruhiger Absatz. Die Seite soll die Sache
   erklaeren, nicht sich dauernd entschuldigen. */
.ns-einordnung{border-left:3px solid var(--earth);padding:4px 0 4px 20px;
  max-width:68ch;font-size:.95rem;line-height:1.72}
.ns-einordnung h3,.ns-einordnung h4{margin:0 0 8px;font-size:1.06rem;
  font-family:var(--kopf)}
/* FEHLER, DER VON DER ALTEN SEITE MITKAM: --muted (#6f6857) ist fuer den
   hellen Seitengrund gedacht. Der Kasten steht aber im dunklen Teil, dort
   ergibt das 3,4:1 - zu wenig fuer Fliesstext. Also andersherum: hell ist die
   Vorgabe, und nur im .ps-hell-Abschnitt wird auf --muted zurueckgestellt.
   Gemessen danach 7,0:1 auf --ps-grund. */
.ns-einordnung p{margin:0 0 10px;color:var(--ps-hell-grau)}
.ps-hell .ns-einordnung p{color:var(--muted)}
.ns-einordnung p:last-child{margin-bottom:0}
.ns-tafel--wasser .ns-einordnung{border-left-color:var(--ps-zweit)}

/* ======================================================================= Ruhe */
@media(prefers-reduced-motion:reduce){
  .ns-welt,.ns-baustein{transition:none}
}