@font-face{
  font-family:'Marcellus';
  src:url('../fonts/Marcellus.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../fonts/Manrope.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}
/* Cinzel – römische Capitalis, nur für die grossen Namenszüge (Willkommens-
   seite, Hero, Seitenkopf). Der Fliesstext bleibt Marcellus/Manrope. */
@font-face{
  font-family:'Cinzel';
  src:url('../fonts/Cinzel.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
/* Parisienne – die kalligrafische Schreibschrift des Hero-Namenszugs.
   AUSSER BETRIEB seit dem 02.09.2026 (Ruecknahme auf Ansage): Der Namenszug
   steht wieder in Cinzel-Versalien, siehe `.hero h1` weiter unten. In v13
   und v14 war sie in Betrieb, davor und danach nicht.

   Auskommentiert statt geloescht, und `assets/fonts/Parisienne.woff2`
   (22 KB) bleibt ebenfalls im Paket liegen — Wiedereinschalten heisst,
   diese Kommentarzeichen zu entfernen und die vier Werte in `.hero h1`
   sowie den margin-top von `.hero .sub` zurueckzustellen; alle fuenf sind
   dort einzeln benannt.

   Zur Herkunft, damit sie nicht neu recherchiert werden muss: eigene
   Bibliothek `~/Services/fonts`, SIL OFL 1.1, Pruefsumme gegen das
   Manifest verglichen — nichts nachgeladen.

   `font-display:block` stand hier AUSDRUECKLICH anders als bei den drei
   Schriften darueber: Bei `swap` stuende der Name den ersten Moment in der
   Ersatzschrift und spraenge dann in die Handschrift — bei einer
   Schreibschrift ist der Unterschied so gross (andere Breite, andere Hoehe,
   andere Anmutung), dass das als Fehler gelesen wird.

@font-face{
  font-family:'Parisienne';
  src:url('../fonts/Parisienne.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:block;
}
*/
:root{
  /* Zweites Netz gegen den erzwungenen Dunkelmodus mobiler Browser
     (14.09.2026). Das erste ist <meta name="color-scheme" content="only light">
     im Kopf jeder Seite — es greift schon vor dem ersten Zeichnen. Diese
     Regel hier faengt den Fall ab, dass eine Seite ohne das Meta-Element
     ausgeliefert wird. "only light" statt "light": das Schluesselwort only
     verbietet dem Browser ausdruecklich, ein anderes Schema zu erzwingen.
     Anlass war der Befund vom 10.09.2026, dass der Hintergrund auf einem
     Samsung-Geraet viel dunkler aussieht als gebaut — Chrome fuer Android
     kippt bei Seiten ohne Farbschema den cremefarbenen Schleier ins Dunkle.
     Die Seite hat KEINEN eigenen Dunkelmodus-Zweig (kein
     prefers-color-scheme im ganzen Stylesheet), deshalb ist das hier eine
     reine Aussage ueber den Bestand, keine Einschraenkung. */
  color-scheme:only light;

  --olive:#4C5539;
  --olive-dark:#3A4129;
  --olive-soft:#6B7355;
  --cream:#FAF5F1;
  --cream-panel:rgba(250,245,241,.92);
  --cream-panel-strong:rgba(250,245,241,.97);
  --ink:#33392A;
  --line:rgba(76,85,57,.18);
  --shadow:0 18px 50px rgba(58,65,41,.14);
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.75;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Marcellus',Georgia,serif;font-weight:400;color:var(--olive);}

/* ============ Willkommens-Overlay (Bild) ============ */
#intro{
  position:fixed;inset:0;z-index:1000;background:#5d7a49;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
  transition:opacity 1.4s ease;
}
#intro.fade{opacity:0;pointer-events:none;}
/* Solange die Willkommensseite liegt, bewegt sich dahinter nichts */
body.intro-an{overflow:hidden;}
/* Grundfarbe, falls das Bild noch nicht da ist */
#introBg{
  position:absolute;inset:0;z-index:0;
  background:url('../img/welcome-wald2.jpg') center/cover no-repeat;
  filter:blur(22px) saturate(.95) brightness(.88);
  transform:scale(1.12);
}
/* Das Bild füllt IMMER den ganzen Bildschirm – es trägt keinen Text mehr,
   deshalb sind die früheren „contain“-Ausnahmen entfallen. */
#introImg{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
}
/* Heller Schleier: hält das lichte Waldbild licht und trägt zugleich die
   grüne Schrift – dieselbe Handschrift wie Hero und Navigation, dadurch
   geht die Willkommensseite ohne Bruch in die Startseite über. */
#introVeil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(250,245,241,.60) 0%, rgba(250,245,241,.40) 42%, rgba(250,245,241,.14) 68%, rgba(250,245,241,0) 82%),
    linear-gradient(180deg, rgba(250,245,241,.26) 0%, rgba(250,245,241,0) 34%, rgba(250,245,241,0) 62%, rgba(250,245,241,.30) 100%);
}
#introInner{
  position:absolute;z-index:3;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(92vw,860px);text-align:center;padding:0 4vw;
}
#introLogo{
  width:clamp(96px,13vw,150px);height:clamp(96px,13vw,150px);
  border-radius:50%;object-fit:cover;
  box-shadow:0 20px 60px rgba(20,26,14,.45);
  margin-bottom:clamp(20px,3.4vw,34px);
}
#introName{
  font-family:'Cinzel','Marcellus',Georgia,serif;font-weight:400;
  font-size:clamp(28px,5.6vw,62px);
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--olive-dark);line-height:1.15;
  text-shadow:0 1px 0 rgba(250,245,241,.6), 0 0 22px rgba(250,245,241,.92), 0 0 60px rgba(250,245,241,.7);
}
#introSub{
  margin-top:clamp(12px,1.8vw,20px);
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:clamp(11.5px,1.5vw,15px);
  letter-spacing:.2em;text-transform:uppercase;line-height:1.6;
  color:var(--olive);
  text-shadow:0 0 18px rgba(250,245,241,.95), 0 0 44px rgba(250,245,241,.7);
}
#skipBtn{
  position:absolute;z-index:2;left:50%;bottom:clamp(18px,4vh,46px);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(76,85,57,.82);color:var(--cream);
  border:1px solid rgba(250,245,241,.65);border-radius:999px;
  padding:12px 38px 13px;font-family:'Manrope',sans-serif;
  cursor:pointer;white-space:nowrap;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(58,65,41,.35);
  transition:background .3s,color .3s,transform .3s;
}
#skipBtn .sb-1{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;}
#skipBtn .sb-2{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;line-height:1.2;opacity:.88;}
#skipBtn:hover{background:var(--cream);color:var(--olive);transform:translateX(-50%) translateY(-2px);}
@media(max-width:560px){
  #skipBtn{padding:11px 28px 12px;}
  #skipBtn .sb-1{font-size:12.5px;letter-spacing:.12em;}
  #skipBtn .sb-2{font-size:10px;letter-spacing:.18em;}
}

/* ============ Hintergrund-Video (Wald, Dauerschleife, ohne Ton) ============
   DIESE FASSUNG IST DER VIDEO-ZWILLING VON v11 (Entscheidung 01.09.2026).
   Inhaltlich ist alles aus v11 hier drin — helle Fusszeile, behobene
   Kastenkante am Hero-Schein, Cursor-Effekte, freigestelltes Logo.
   Der EINZIGE Unterschied ist der Hintergrund: hier laeuft wieder das
   Wald-Video, dort steht das Kleefoto.

   Was dieser Unterschied kostet, gehoert genannt:
     Datenvolumen     8,9 MB gegen 236 KB. Das bleibt der Preis.
                      (In v16 waren es 4,8 MB — der eigene Waldweg-Loop
                      war kleiner, aber weicher. Am 14.09.2026 spaet auf
                      Nutzerentscheid zurueck auf wald.mp4.)
     Ruhige Darstellung  Ein Loop IST fortwaehrende Bewegung. Bei
                      prefers-reduced-motion wird das Video gar nicht
                      erst geholt (site.js) und wald.jpg liegt darunter.

   KONTRAST — und hier stand zuerst eine Behauptung, die die Messung
   widerlegt hat. Der Gedanke war: ein Video hat eine Laufzeit, also auch
   Stellen, an denen es dunkel wird, also ist der Kontrast wieder eine
   Wahrscheinlichkeit. Das war bis v9 richtig. Seit den Aenderungen des
   01.09.2026 stimmt es nicht mehr, denn drei Ebenen tragen die Schrift
   inzwischen unabhaengig vom Hintergrund: der Kopfverlauf (.88/.60/.18),
   der Radialschein des Hero und die helle Fusszeile.

   Nachgerechnet gegen ein KOMPLETT SCHWARZES Videobild — die haerteste
   Stelle, die das Video ueberhaupt liefern kann:
     Navigation      5,22 : 1     Hero H1 (Zeilenrand)   7,01 : 1
     Hero Unterzeile 5,53 : 1     Hero Ortszeile         4,99 : 1
     Scroll-Hinweis  5,11 : 1     Fusszeile         6,17 bis 10,27 : 1
   Alles ueber 4,5. Der Kontrast ist damit auch in dieser Fassung eine
   feste Groesse, nicht mehr eine Wahrscheinlichkeit — er haengt nicht
   mehr davon ab, was das Video gerade zeigt.
   (Gerechnet wird je Textzeile gegen ihr AEUSSERES Ende: dort ist der
   Radialschein am duennsten. Wer Hero-Text verbreitert, muss neu rechnen.)

   Die Bilddateien der Foto-Fassungen (klee-gruen-hintergrund*.jpg,
   klee-hintergrund*.jpg, wald-hintergrund*.jpg) bleiben im Ordner
   liegen, sie werden hier nur nicht geladen. Schleier und Blattwerk
   stehen deshalb wieder auf ihren VIDEO-Werten aus v9, nicht auf den
   fuer das dunkle Kleefoto gerechneten — die waeren hier falsch herum. */
#bgWrap{
  position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--olive-dark);
}
#bgVideo{
  position:absolute;top:50%;left:50%;
  min-width:100%;min-height:100%;width:auto;height:auto;
  /* Hinterste der drei Parallax-Ebenen (Faktor 0,014 auf --sy, das site.js
     beim Scrollen schreibt) — sie wandert am wenigsten, deshalb wirkt sie
     am weitesten entfernt.

     Zwei Zahlen haengen zusammen und duerfen nur gemeinsam geaendert werden:
     scale(1.10) ist die Reserve, die verhindert, dass beim Verschieben der
     Videorand ins Bild rutscht — sie betraegt 5 % der Videohoehe oben.
     max(-22px, …) ist die Klemme, die die Verschiebung darunter haelt.
     22 px < 5 % gilt ab 440 px Videohoehe, also auf jedem realen Geraet.
     Wer die Klemme lockert, muss scale mit anheben. */
  transform:translate(-50%,calc(-50% + max(-22px,calc(var(--sy,0) * -0.014px))))
            scale(1.10) translateZ(0);
  object-fit:cover;
  /* UNVERAENDERT beim Wechsel auf waldweg-2026-10.mp4 (10.10.2026) —
     und das ist gemessen, nicht uebernommen: die mittlere Farbsaettigung
     liegt bei 0,363 gegen 0,370 des zugekauften Films, also praktisch
     gleich; oben ist das neue Material sogar heller (Leuchtdichte im
     obersten Zehntel 0,247 gegen 0,163). Es braucht damit so wenig
     Aufhellung wie sein Vorgaenger; saturate(.92) nimmt dem Gruen nur
     die Spur Buntheit, die ueber einer Textseite unruhig wirkt.
     Die v16-Werte saturate(.94) brightness(1.10) contrast(.98) gehoerten
     zur dunklen Handy-Aufnahme von 2026-09-11 — wer diese Fassung auf
     ein oben DUNKLES Video umstellt, holt sie zusammen mit Schleier und
     #canopy zurueck, nicht einzeln. */
  filter:saturate(.92);
}
/* DER OBERSTE STOPP STEHT WIEDER AUF DUNKLEM OLIV — und das ist ueber
   DIESEM Video richtig herum (Rueckbau 14.09.2026 spaet, Nutzerentscheid).

   Die Regel dahinter ist in diesem Projekt inzwischen viermal bestaetigt:
   Ein dunkler Stopp DAEMPFT einen hellen Hintergrund (richtig), ueber einem
   dunklen Hintergrund drueckt derselbe Stopp Schwarz auf Schwarz (falsch).
   wald.mp4 ist oben hell (Nebel, offener Himmel) — dunkler Stopp.
   waldweg-2026-10.mp4 ist oben NOCH heller (10.10.2026 ueber sieben
   Einzelbilder gemessen: 0,207–0,266, Mittel 0,247, gegen 0,095–0,211
   und Mittel 0,163 bei wald.mp4) — der dunkle Stopp bleibt also stehen.
   Die Handy-Aufnahme aus v16 war oben dichtes Laubdach — cremefarbener
   Stopp (.42). Gemessen wurde das am 14.09.2026 an beiden Faellen:
                       Oliv .30      Creme .42
     Kopfzeile oben     8,10 : 1      8,85 : 1     ueber der HANDY-Aufnahme
     Kopfzeile Mitte    5,01 : 1      6,81 : 1     (dort gewann Creme)
   Ueber wald.mp4 dreht sich dieses Verhaeltnis um, weil das Bild oben
   hell ist — dort sind die 5,22 : 1 der Navigation gegen ein komplett
   schwarzes Videobild gerechnet und gelten unveraendert weiter (Block
   oben in dieser Datei).

   Wer hier wieder ein dunkles Video einsetzt, dreht den Stopp erneut. */
#bgVeil{
  position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(58,65,41,.30) 0%,
    rgba(250,245,241,.55) 38%,
    rgba(250,245,241,.82) 100%);
  pointer-events:none;
}

/* ============ Navigation ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 5vw;
  transition:background .4s,box-shadow .4s,padding .4s;
}
header.scrolled{
  background:var(--cream-panel-strong);
  box-shadow:0 6px 30px rgba(58,65,41,.10);
  padding:10px 5vw;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;}
/* Freigestelltes Monogramm statt der Kreis-Kachel (01.09.2026). In der
   alten Datei war der Schriftzug „PSYCHOTHERAPIE RALF BÜRGMANN" mit
   eingebrannt — bei 46 px war er ohnehin nur noch ein grauer Streifen,
   und der Kreis stand als heller Fleck ueber dem Wald. Der weiche
   Schein ersetzt den Schlagschatten: er traegt das dunkle Monogramm
   ueber hellen wie dunklen Stellen des Fotos. */
.brand img{
  width:44px;height:44px;object-fit:contain;display:block;
  filter:drop-shadow(0 0 10px rgba(250,245,241,.9))
         drop-shadow(0 2px 6px rgba(250,245,241,.7));
}
header.scrolled .brand img{filter:none;}
.brand span{font-family:'Marcellus',serif;font-size:19px;letter-spacing:.06em;color:var(--olive);}
nav{display:flex;gap:28px;}
nav a{
  text-decoration:none;color:var(--olive);font-size:13.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;position:relative;padding:4px 0;
  transition:color .4s;
}
nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:currentColor;transition:width .3s;
}
/* Über dem Hintergrund steht die Navigation ebenfalls in Grün (wie der
   Hero). Der helle Verlauf darunter trägt sie.

   AM 01.09.2026 NACHGESCHÄRFT — und zwar gemessen, nicht nach Gefühl:
   Das neue Waldfoto ist im oberen Bildbereich deutlich dunkler und
   satter als das frühere Video. Am gerenderten Bild ergab die alte
   Abstufung (.78 / .34) hinter der Menüzeile nur noch 3,7 : 1, an den
   dunkelsten Stellen 2,8 : 1 — unter der Schwelle von 4,5 : 1, die für
   Schrift unter 18 pt gilt. Der Textschatten half dem Auge, aber er
   zählt in keiner Messung mit.

   Zwei Änderungen zusammen, weil eine allein nicht gereicht hätte:
   der Verlauf trägt mehr (.88 / .60), und die Schrift wird dunkler
   (--olive-dark statt --olive). Gemessen danach: 6,3 : 1 im Mittel,
   5,2 : 1 an der dunkelsten Stelle der Kopfleiste.

   Die untere Kante läuft 18 px in die Seite hinein aus, sonst endete
   der helle Streifen an einer sichtbaren Linie. */
header:not(.scrolled)::before{
  content:'';position:absolute;inset:0 0 -18px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(250,245,241,.88) 0%,
    rgba(250,245,241,.60) 62%,
    rgba(250,245,241,.18) 88%,
    rgba(250,245,241,0)   100%);
}
@media(min-width:901px){
  header:not(.scrolled) nav a{color:var(--olive-dark);text-shadow:0 0 14px rgba(250,245,241,.95),0 0 34px rgba(250,245,241,.75);}
}
header:not(.scrolled) .brand span{color:var(--olive-dark);text-shadow:0 0 14px rgba(250,245,241,.95),0 0 34px rgba(250,245,241,.75);}
header:not(.scrolled) #navToggle{color:var(--olive-dark);text-shadow:0 0 14px rgba(250,245,241,.95),0 0 34px rgba(250,245,241,.75);}
header .brand span,header #navToggle{transition:color .4s;}
header:has(nav.open) #navToggle{color:var(--olive);text-shadow:none;}
nav a:hover::after{width:100%;}
#navToggle{display:none;background:none;border:none;cursor:pointer;color:var(--olive);font-size:28px;line-height:1;}
@media(max-width:900px){
  nav{
    position:fixed;top:0;right:-290px;height:100vh;width:270px;
    flex-direction:column;gap:8px;background:var(--cream-panel-strong);
    padding:96px 34px;box-shadow:-10px 0 40px rgba(58,65,41,.18);
    transition:right .35s ease;backdrop-filter:blur(10px);
  }
  nav.open{right:0;}
  nav a{font-size:15px;padding:10px 0;}
  #navToggle{display:block;position:relative;z-index:110;}
}

/* ============ Hero ============ */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:120px 6vw 80px;
}
/* Nur noch das Monogramm: kein weisser Kreis, kein Schriftzug darunter,
   und leicht durchscheinend (Vorgabe 01.09.2026). Die Angaben, die
   frueher im Bild standen, stehen zwei Zeilen tiefer als echte Schrift —
   sie sind damit vorlesbar, durchsuchbar und skalieren mit.

   object-fit:contain statt cover: das Monogramm ist quadratisch und darf
   an keiner Kante angeschnitten werden. Der weiche Schein steht an der
   Stelle des frueheren Schlagschattens; er traegt das dunkle Zeichen
   ueber jeder Stelle des Waldfotos, so wie der Textschatten die
   Ueberschrift darunter traegt. */
.hero img.hero-logo{
  width:clamp(118px,15vw,178px);height:clamp(118px,15vw,178px);
  object-fit:contain;display:block;
  opacity:.84;
  filter:drop-shadow(0 0 18px rgba(250,245,241,.95))
         drop-shadow(0 8px 30px rgba(250,245,241,.65));
  margin-bottom:30px;
}
/* Weicher heller Schein hinter dem Hero-Text – trägt die grüne Schrift
   auch dann, wenn im Wald-Video gerade eine dunkle Stelle läuft.
   Liegt über dem Video-Schleier (#bgVeil) und unter dem Text. */
.hero{position:relative;}
/* LETZTER STOPP 70 %, NICHT 78 % — und das ist keine Geschmacksfrage.
   `radial-gradient(ellipse at center, …)` ohne Groessenangabe bedeutet
   `farthest-corner`: 100 % des Verlaufs ist die ECKE des Kastens. Die
   vier SEITEN liegen damit bei genau 1/√2 = 70,7 % des Radius. Steht
   der letzte Stopp weiter draussen, ist an der Kastenkante noch Deckung
   uebrig — hier waren es rund 0,13 — und die schneidet der Kasten hart
   ab. Ergebnis ist ein sichtbares helles Rechteck mitten im Bild.
   Ueber dem hellen Waldfoto ging der Absatz unter, ueber dem dunklen,
   glatten Kleefoto stand er als Kontur da (gemeldet 01.09.2026).
   Bei 70 % ist die Deckung auf der GESAMTEN Kastenkante null: an den
   Seiten (70,7 %) ebenso wie an den Ecken (100 %).
   Wer den letzten Stopp je wieder ueber 70,7 % schiebt, holt die
   Kontur zurueck — der Kasten muss dann mitwachsen. Die Zwischenstopps
   0/40/62 % bleiben unangetastet, und damit auch alle gemessenen
   Kontrastwerte: der gesamte Hero-Text sitzt innerhalb von 62 %. */
.hero::before{
  content:'';position:absolute;z-index:-1;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1180px,96vw);height:min(820px,92vh);
  background:radial-gradient(ellipse at center,
    rgba(250,245,241,.80) 0%,
    rgba(250,245,241,.62) 40%,
    rgba(250,245,241,.28) 62%,
    rgba(250,245,241,0) 70%);
  pointer-events:none;
}
/* ============ Der Namenszug im Hero ============
   ZURUECKGENOMMEN am 02.09.2026 auf Ansage: wieder Cinzel in Versalien, also
   Zeichen fuer Zeichen der Stand aus v12. Die Handschrift (Parisienne) war
   nur in v13 und v14 in Betrieb.

   Vier Werte gehoeren zusammen und sind gemeinsam zurueckgedreht — wer nur
   die Schriftfamilie tauscht, bekommt weder das eine noch das andere sauber:
     font-family      Cinzel statt Parisienne
     font-size        clamp(28px,4.8vw,56px) statt clamp(42px,7.2vw,84px)
     text-transform   uppercase statt none
     letter-spacing   .12em statt 0
   Dazu die fuenfte Stelle eine Regel tiefer: `.hero .sub{margin-top}` geht
   von 30 auf 18 px zurueck. Die 30 px waren allein fuer die Unterlaenge des
   handgeschriebenen „g" da; Versalien haben keine Unterlaenge, der Abstand
   sieht sonst nach Loch aus.

   `line-height` steht hier wieder gar nicht: Cinzel kam immer mit dem
   Vorgabewert aus, die 1.06 waren eine Folge der Schreibschrift.

   KONTRAST — und hier stand zuerst eine Zahl, die die Messung widerlegt hat.
   Die Annahme war: mit der Ruecknahme wird die Zeile schmaler (555 -> 433 px)
   und rueckt in den dichteren Teil des Radialscheins. Falsch, und zwar aus
   einem Grund, der es wert ist, hier zu stehen:

     Die 433 px stammten aus einer Canvas-Messung von „Ralf Bürgmann".
     Canvas wendet `text-transform` NICHT an — gemessen wurde also die
     gemischte Schreibweise, waehrend die Seite Versalien rendert.
     Versalien sind breiter. Am gerenderten Element nachgemessen betraegt
     die Zeilenbreite je Punktgroesse 10,711 statt der angenommenen 6,176.

   Tatsaechlich ist die Versalien-Zeile mit 600 px bei 1672 px Fenster die
   BREITERE der beiden und steht damit weiter aussen im Schein, wo er duenner
   ist. Neu gerechnet gegen ein komplett schwarzes Videobild, Schein im
   schwaechsten Moment seiner Animation, ohne text-shadow:
     400 px Fenster   5,06 : 1   <- schwaechste Stelle
     ab 583 px        6,36 bis 6,42 : 1
   (Die Handschrift lag bei 5,37 bzw. 6,43–6,47 — sie war minimal besser,
   weil schmaler.) Beide Fassungen liegen ueber 4,5 und weit ueber den 3,0
   fuer grossen Text. Diese Zahlen gelten rueckwirkend auch fuer v12 und
   alle frueheren Fassungen; der Zustand ist nicht neu, nur die Zahl war
   vorher falsch. Skript: scratchpad/hero_kontrast.py.

   MERKER fuer jede kuenftige Breitenmessung an dieser Zeile: am
   gerenderten Element messen, nicht per Canvas — sonst faellt
   text-transform still unter den Tisch. */
.hero h1{
  font-family:'Cinzel','Marcellus',Georgia,serif;
  font-size:clamp(28px,4.8vw,56px);
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--olive-dark);
  text-shadow:0 1px 0 rgba(250,245,241,.6), 0 0 22px rgba(250,245,241,.9), 0 0 60px rgba(250,245,241,.7);
}
/* margin-top wieder 18 px (Ruecknahme 02.09.2026). Er war fuer die Dauer von
   v13/v14 auf 30 px gestanden, weil die Handschrift die Unterlaenge des „g"
   37 px unter die Grundlinie setzte. Mit den Versalien gibt es keine
   Unterlaenge mehr — bliebe der Wert stehen, sieht der Abstand nach Loch
   aus. Der Merker dahinter gilt weiter: ein Abstand gehoert zur Schrift,
   die darueber steht, nicht zur Zeile darunter. */
.hero .sub{
  margin-top:18px;font-size:clamp(13.5px,1.6vw,16px);
  letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--olive);text-shadow:0 0 18px rgba(250,245,241,.9), 0 0 44px rgba(250,245,241,.65);
  max-width:min(100%,44ch);line-height:1.6;
}
/* --olive statt --olive-soft (01.09.2026): Über dem neuen Foto kam die
   weiche Variante an den dunkelsten Stellen nur auf 3,3 : 1. Dieselbe
   Zeile in --olive misst 5,2 : 1. Der Unterschied im Bild ist kaum zu
   sehen, der in der Messung entscheidet. */
.hero .orte{
  margin-top:14px;color:var(--olive);font-size:15px;letter-spacing:.08em;font-weight:600;
  text-shadow:0 0 16px rgba(250,245,241,.9), 0 0 40px rgba(250,245,241,.6);
}
.hero .cta{
  margin-top:42px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
}

/* ---- Knopfzeilen am Handy mittig (14.09.2026, Nutzerwunsch) --------------
   Ausgangslage, am 390-px-Geraet gemessen (deviceScaleFactor 2, mobile):
   Die beiden Hero-Knoepfe standen mittig (die Regel darueber), die drei
   Knoepfe weiter unten dagegen linksbuendig — „Anfahrt & Parken" lag mit
   0 px links an der Kachelkante und liess rechts 25 px frei. Bei einem
   Knopf, der fast so breit ist wie die Kachel, liest sich das nicht als
   Ausrichtung, sondern als Schieflage.

   Zwei Stellen sind betroffen, beide auf der Startseite, beide heissen
   „Anfahrt & Parken": der einzelne Knopf unter den Standort-Kacheln
   (.knopfzeile) und die Dreier-Reihe im Kontakt-Teaser. Die Reihe wird als
   GANZES zentriert — ein einzelnes Kind einer Flex-Reihe mittig zu setzen,
   waehrend die Geschwister links bleiben, waere die naechste Schieflage.

   NACHTRAG 14.09.2026 spaet (Nutzeransage „Anfahrt und Parken zentriert
   unter die 2 Standorte"): Fuer .knopfzeile gilt das jetzt auf JEDER
   Breite, nicht mehr nur bis 640 px. Der Grund, der vorher fuer
   linksbuendig sprach, traegt an dieser einen Stelle naemlich nicht: Der
   Knopf steht dort nicht unter einem Textblock, sondern unter den ZWEI
   gleich breiten Standort-Kacheln. Deren gemeinsame Mitte ist die Linie,
   auf die das Auge schaut — ein linksbuendiger Knopf haengt darunter an
   der Kante nur der linken Kachel und sieht aus wie zu Purkersdorf
   gehoerig, obwohl er fuer beide Standorte gilt.

   Die Dreier-Reihe im Kontakt-Teaser bleibt unveraendert: bis 640 px
   mittig, darueber linksbuendig. Sie steht unter Fliesstext und haengt
   dort an derselben linken Kante wie Ueberschrift und Absatz. */
.knopfzeile{
  text-align:center;
  /* max-width MUSS mit, sonst greift text-align:center ins Leere.
     .knopfzeile ist ein <p> und erbt damit `.panel p{max-width:72ch}` —
     die Lesebreite fuer Fliesstext. Am 1066-px-Fenster sind das 785,8 px
     statt der 810 px, die die Standort-Kacheln einnehmen. Der Knopf stand
     dadurch zwar exakt mittig in SEINER Zeile, aber 11,2 px links der
     Mitte der Kacheln — gemessen 273,9 px Luft links gegen 296,3 px
     rechts. Sichtbar ist das nicht als Versehen, sondern als Schieflage,
     und genau die sollte weg.
     72ch sind fuer Text da. Ein einzelner Knopf ist kein Text.

     SPEZIFITAET, und das ist hier keine Formsache: `.knopfzeile` allein
     (0-1-0) verliert gegen `.panel p` (0-1-1) — und steht ausserdem
     frueher in der Datei. Ein `max-width:none` an dieser Stelle waere
     wirkungslos gewesen und haette wie erledigt ausgesehen. Gemessen:
     die Zeile blieb bei 785,8 px, der Versatz bei -11,2 px. Deshalb steht
     die Breite unten als `.panel p.knopfzeile` (0-2-1) und gewinnt
     unabhaengig von der Reihenfolge. Dieselbe Falle wie damals bei
     `.reveal` gegen `.js .reveal`. */
}
.panel p.knopfzeile{max-width:none;}
@media(max-width:640px){
  #kontakt-teaser .cta{justify-content:center;}
}
.btn{
  display:inline-block;text-decoration:none;border-radius:999px;
  padding:14px 38px;font-size:14px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  /* `transition:all` stand hier bis v8. Das animierte auch Rahmenbreite und
     Innenabstand mit — also Layout, das der Browser bei jedem Zwischenschritt
     neu rechnen muss. Benannte Eigenschaften laufen dagegen auf dem
     Compositor. Dauer von .3s auf .42s: ruhiger, passend zum Rest. */
  transition:transform .42s cubic-bezier(.22,.61,.36,1),
             background-color .42s ease,
             color .42s ease,
             border-color .42s ease,
             box-shadow .42s ease;
}
/* ============ Farbwechsel beim Darueberfahren ============
   Vorgabe 01.09.2026: JEDER Knopf tauscht die Farben, so wie es
   „Anfahrt & Parken" (.btn-line) schon immer getan hat — der Knopf
   kehrt sich um, Grund und Schrift wechseln die Plaetze. Das ist eine
   Aussage, kein Effekt: man sieht auf einen Blick, worauf der Zeiger
   steht, auch aus dem Augenwinkel.

   Bis v9 wurde .btn-solid beim Hover nur eine Spur dunkler
   (--olive -> --olive-dark). Der Unterschied betrug 1,2 : 1 — messbar,
   aber nicht sichtbar. Die Umkehr bringt 6,3 : 1.

   Dieselbe Umkehr liegt weiter unten auf .map-ph button, .gal-nav,
   .p-btn und den Galeriepunkten; :focus-visible bekommt sie ebenfalls,
   sonst waere die Tastatur schlechter gestellt als die Maus. */
.btn-solid{background:var(--olive);color:var(--cream);border:1px solid var(--olive);}
/* Der Hub kommt als Variable, nicht als transform — siehe „MAGNETIC
   BUTTON" am Dateiende: alle Zustaende teilen sich EINE transform-Angabe. */
.btn-solid:hover,.btn-solid:focus-visible{
  background:var(--cream);color:var(--olive);border-color:var(--olive);
  --mgl:-2px;
}
.btn-ghost{background:rgba(250,245,241,.16);color:var(--cream);border:1px solid rgba(250,245,241,.7);backdrop-filter:blur(6px);}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--cream);color:var(--olive);border-color:var(--cream);}
.scroll-hint{
  margin-top:64px;color:var(--olive);font-size:12px;letter-spacing:.3em;font-weight:600;
  text-transform:uppercase;opacity:.9;animation:drift 3s ease-in-out infinite;
  text-shadow:0 0 16px rgba(250,245,241,.85);
}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ============ Sektionen ============ */
section{padding:0 6vw;}
.panel{
  max-width:1060px;margin:0 auto 90px;
  background:var(--cream-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(38px,6vw,74px);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.kicker{
  font-size:12.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--olive-soft);margin-bottom:14px;
}
.panel h2{font-size:clamp(27px,3.6vw,40px);margin-bottom:26px;line-height:1.25;}
.panel p{margin-bottom:18px;max-width:72ch;}
.panel p:last-child{margin-bottom:0;}
.lead{font-size:clamp(18px,2.2vw,21px);color:var(--olive-dark);line-height:1.7;}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center;}
.two-col img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);display:block;}
@media(max-width:820px){.two-col{grid-template-columns:1fr;}}

/* „Über mich": Foto rechts eingebunden, der Text fließt darum herum.
   Das Bild endet damit innerhalb des ersten Absatzes statt neben dem
   ganzen Block (Vorgabe RB) – und es bleibt kein leerer Raum darunter. */
.bio::after{content:"";display:block;clear:both;}
.bio-foto{
  float:right;width:340px;max-width:40%;
  margin:6px 0 22px 38px;
  border-radius:var(--radius);box-shadow:var(--shadow);
}
/* Auf schmalen Schirmen kein Umfluss – sonst bleiben Textschnipsel daneben.
   Das Bild steht im Quelltext vorne (Float-Zwang); per order rutscht es hier
   wieder unter die Überschrift, damit die Lesereihenfolge stimmt.
   Absätze tragen dieselbe order und bleiben deshalb untereinander in
   Quelltext-Reihenfolge. */
@media(max-width:640px){
  .bio{display:flex;flex-direction:column;}
  .bio .kicker{order:1;}
  .bio h2{order:2;}
  .bio-foto{order:3;float:none;width:100%;max-width:320px;margin:0 0 26px;}
  .bio p{order:4;}
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:10px;}
.card{
  background:rgba(255,255,255,.55);border:1px solid var(--line);
  border-radius:14px;padding:26px 24px;
}
.card h3{font-size:19px;margin-bottom:10px;}
.card p{font-size:15.5px;margin:0;line-height:1.65;}

.quote{
  border-left:3px solid var(--olive);padding:6px 0 6px 26px;
  font-family:'Marcellus',serif;font-size:clamp(19px,2.4vw,24px);
  color:var(--olive-dark);line-height:1.6;margin:30px 0;
}
.quote small{display:block;font-family:'Manrope',sans-serif;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--olive-soft);margin-top:12px;}

/* Standorte */
.locs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,44px);}
@media(max-width:820px){.locs{grid-template-columns:1fr;}}
.loc{background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.loc .loc-body{padding:26px 28px 30px;}
.loc h3{font-size:22px;margin-bottom:8px;}
.loc p{font-size:15.5px;margin-bottom:6px;}
.loc .addr{font-weight:700;color:var(--olive-dark);}

/* ============ Bildergalerie zum Durchklicken (Standorte) ============ */
.gal{
  position:relative;height:clamp(230px,26vw,290px);
  background:rgba(76,85,57,.10);overflow:hidden;
  touch-action:pan-y;user-select:none;
}
.gal-stage{position:absolute;inset:0;}
.gal-stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .55s ease;cursor:pointer;
}
.gal-stage img.on{opacity:1;}
/* Pfeile links/rechts */
.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(250,245,241,.7);
  background:rgba(58,65,41,.45);color:var(--cream);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .25s,transform .25s,opacity .25s;padding:0;
}
.gal-nav svg{width:15px;height:15px;fill:currentColor;}
/* Umkehr wie bei allen Knoepfen: heller Grund, gruener Pfeil. */
.gal-nav:hover,.gal-nav:focus-visible{
  background:var(--cream);color:var(--olive);border-color:var(--cream);
}
.gal-nav.prev{left:12px;}
.gal-nav.next{right:12px;}
.gal-nav:focus-visible{outline:2px solid var(--cream);outline-offset:2px;}
/* Punkte + Zähler */
.gal-dots{
  position:absolute;left:0;right:0;bottom:11px;z-index:3;
  display:flex;justify-content:center;gap:7px;
}
.gal-dots button{
  width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(250,245,241,.85);background:rgba(58,65,41,.35);
  transition:background .25s,transform .25s;
}
.gal-dots button.on{background:var(--cream);transform:scale(1.25);}
.gal-dots button:hover,.gal-dots button:focus-visible{background:var(--cream);}
.gal-count{
  position:absolute;right:12px;bottom:10px;z-index:3;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--cream);
  background:rgba(58,65,41,.45);border-radius:999px;padding:3px 10px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
/* sanfter Verlauf unten, damit Punkte und Zähler auf jedem Bild lesbar bleiben */
.gal::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:78px;z-index:2;
  background:linear-gradient(to top,rgba(58,65,41,.42),rgba(58,65,41,0));
  pointer-events:none;
}
@media(max-width:560px){
  .gal-nav{width:34px;height:34px;}
  .gal-count{font-size:10.5px;}
}


/* ============ Film-Kachel („Der Weg", letzte Kachel der Startseite) ============
   Der Film ist HOCHKANT (478x850, Handy-Aufnahme). Genau das ist die
   Entscheidung, die hier getroffen werden muss: Ein Hochkantvideo auf
   Kachelbreite laufen zu lassen, waere am Fenster eine 1060 px hohe Saeule
   — die Kachel waere dreimal so hoch wie jede andere und der Film in der
   Mitte trotzdem nicht groesser, weil die Hoehe der Bildschirm begrenzt.
   Deshalb eine feste Hoechstbreite, mittig gesetzt.

   aspect-ratio statt fester Hoehe: Der Kasten steht damit schon VOR dem
   Laden in der richtigen Groesse. Ohne die Zeile springt die Seite in dem
   Moment, in dem die Metadaten ankommen (Layout Shift) — und hier waere
   der Sprung gross, weil ein Video ohne bekannte Groesse mit 300x150
   angesetzt wird.

   background auf --olive-dark: Das ist der Rand, den man beim Vollbild und
   in der Sekunde vor dem ersten Bild sieht. Schwarz waere auf dieser Seite
   ein Fremdkoerper. */
.film{max-width:352px;margin:30px auto 0;}
.film video{
  display:block;width:100%;aspect-ratio:478/850;
  border-radius:18px;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--olive-dark);
}
/* Die zwei Sprungknoepfe. Bewusst NICHT .btn: die Klasse traegt Magnetik,
   Hover-Hub und Druckpunkt in EINER zusammengesetzten transform-Angabe
   (siehe Block ganz unten) — ein Knopf, der dem Zeiger entgegenkommt,
   waehrend daneben ein Film laeuft, ist Unruhe an der falschen Stelle.
   Die Farbumkehr beim Hover machen sie mit, das ist die Handschrift der
   Seite. */
.film-ctrl{margin-top:16px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.film-btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;border:1px solid var(--olive);
  background:transparent;color:var(--olive);
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  /* nowrap gehoert zwingend dazu, und das ist gemessen: ohne die Zeile
     bricht „10 s zurück" ab 356 px Geraetebreite IM Knopf um — die Pille
     wurde 53 statt 36,5 px hoch und die beiden Knoepfe standen
     unterschiedlich hoch nebeneinander. Die seiteneigene .btn traegt
     dieselbe Zeile seit jeher; sie fehlte hier schlicht.
     flex-wrap an der Reihe darueber ist das zweite Netz: wenn die zwei
     Pillen wirklich einmal nicht nebeneinander passen, stellen sie sich
     untereinander, statt die Beschriftung zu zerreissen. */
  white-space:nowrap;
  padding:9px 18px;cursor:pointer;
  transition:background .42s ease,color .42s ease,border-color .42s ease;
}
.film-btn svg{width:15px;height:15px;fill:currentColor;flex-shrink:0;}
.film-btn:hover,.film-btn:focus-visible{background:var(--olive);color:var(--cream);}
.film-btn:focus-visible{outline:2px solid var(--olive-dark);outline-offset:3px;}
.film-hinweis{
  margin-top:14px;text-align:center;font-size:13px;color:var(--olive-soft);
}
/* Unter 400 px stehen die beiden Knoepfe sonst zu eng: Laufweite und
   Innenabstand zurueck, bevor die Beschriftung umbricht.

   flex:1 1 auto ist die Antwort auf eine Messung, nicht Geschmack. Die
   beiden Pillen brauchen nebeneinander rund 252 px; so viel Platz hat die
   Kachel erst ab etwa 380 px Geraetebreite (gemessen: bei 386 px bleiben
   9,8 px uebrig, bei 356 px fehlen 16,6 px). Darunter stellen sie sich
   also untereinander — das ist richtig so, sieht aber nach Panne aus,
   wenn dabei zwei verschieden breite Pillen uebereinanderstehen. Mit
   flex-grow fuellt jede die Zeile, in der sie steht: nebeneinander werden
   beide etwas breiter, untereinander beide gleich breit.
   Die Begrenzung ist uebrigens die KACHEL, nicht der Film — .film-ctrl
   aus dem Film herauszunehmen wuerde nichts gewinnen (nachgerechnet). */
@media(max-width:400px){
  .film-btn{padding:9px 13px;letter-spacing:.08em;gap:6px;flex:1 1 auto;justify-content:center;}
}

/* Honorar */
.fee-row{display:flex;flex-wrap:wrap;gap:20px;margin-top:26px;}
.fee{
  flex:1 1 220px;background:rgba(255,255,255,.55);border:1px solid var(--line);
  border-radius:14px;padding:26px;text-align:center;
}
.fee .big{font-family:'Marcellus',serif;font-size:34px;color:var(--olive);}
.fee .lbl{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--olive-soft);margin-top:6px;}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px;}
@media(max-width:640px){.contact-grid{grid-template-columns:1fr;}}
.contact-grid a{color:var(--olive-dark);text-decoration:none;font-weight:700;word-break:break-word;}
.contact-grid a:hover{text-decoration:underline;}

/* ============ Fusszeile ============
   Bis v9 stand hier eine deckende olivgruene Flaeche — der einzige Block
   der Seite, hinter dem der Wald aufhoerte. Seit dem 01.09.2026 laesst
   sie ihn durch, in derselben Handschrift wie die Kacheln darueber:
   Grundfarbe mit Restdeckung, weichgezeichneter Untergrund, feine Kante.

   Die Deckung ist NICHT frei gewaehlt. Gerechnet wurde gegen den
   hellsten Untergrund, der unter der Fusszeile vorkommen kann (Schleier
   .86 Creme ueber einer hellen Bokeh-Stelle des Fotos, rund 241/240/234):

       Deckung 1,00  -> Textkontrast 6,30 : 1
       Deckung 0,88  -> Textkontrast 4,71 : 1   <- gewaehlt
       Deckung 0,82  -> Textkontrast 4,09 : 1   (unter WCAG AA)

   Mehr Durchsicht als 0,88 kostet die Lesbarkeit — und ein Rechtstext,
   den man nicht lesen kann, ist kein Rechtstext. */
/* ============ Fusszeile ============
   Bis 01.09.2026 war das ein gruener Block: rgba(76,85,57,.88) plus
   backdrop-filter, cremefarbene Schrift darauf. Auf Ansage ist daraus
   eine helle Auflage geworden, gebaut wie der Seitenkopf — dieselbe
   Handschrift oben wie unten, kein Kasten mehr.

   DREI Dinge muessen dafuer zusammen weg, nicht nur die Hintergrundfarbe:
   1. Die Flaechenfarbe wird ein Verlauf, der oben bei NULL beginnt.
      Nur so gibt es keine Oberkante.
   2. `border-top` faellt weg — eine Linie ist eine Kante.
   3. `backdrop-filter` faellt weg. Er wirkt auf den GANZEN Kasten und
      hoert an dessen Kante hart auf; selbst hinter einem voellig
      durchsichtigen Verlauf zeichnet er die Oberkante nach. Das ist
      dieselbe Falle wie beim Radialschein des Hero, nur eine Etage
      tiefer.
   Die Schrift dreht damit von Creme auf Oliv, und das Monogramm von
   der hellen auf die dunkle Fassung (logo-mono.png in allen vier
   HTML-Dateien).

   GEMESSEN am gerenderten Bildschirmfoto, je Textzeile der dunkelste
   Grund links und rechts aussen (dort steht keine Schrift), am
   01.09.2026:
     Name --olive            6,16 : 1
     Telefon/Mail --olive    6,55 : 1
     Impressum/DSE           9,06 : 1
     Fliesstext --ink        9,51 bis 9,75 : 1
     Kleingedrucktes --ink  10,31 : 1
   Der gruene Block kam an derselben Stelle auf 4,80 bis 5,96 : 1. Die
   helle Auflage ist also nicht nur eine Formfrage, sie ist auch besser
   lesbar. Oberkante gegengeprueft: groesster Helligkeitssprung im
   Umkreis von 10 px = 0,008, also keine Kante mehr auffindbar. */
footer{
  background:linear-gradient(to bottom,
    rgba(250,245,241,0)   0%,
    rgba(250,245,241,.52) 11%,
    rgba(250,245,241,.80) 30%,
    rgba(250,245,241,.92) 100%);
  color:var(--ink);text-align:center;
  padding:56px 6vw 120px;font-size:14px;line-height:2;
}
/* Dasselbe freigestellte Monogramm wie im Kopf und jetzt auch in
   derselben Farbe: die helle Fassung logo-mono-hell.png war fuer den
   gruenen Block gedacht und ist auf der hellen Auflage unsichtbar.
   Kein Kreis, kein Schriftzug, leicht durchscheinend. */
footer .f-logo{
  width:76px;height:76px;object-fit:contain;display:block;
  margin:0 auto 16px;opacity:.86;
}
footer .f-name{font-family:'Marcellus',serif;font-size:20px;letter-spacing:.1em;color:var(--olive);}
footer a{color:var(--olive);}
/* Die Deckung .75 ist hier bewusst entfallen: sie drueckte den Kontrast
   des Kleingedruckten auf 3,4 : 1 und lag damit schon vor dem Umbau
   unter der Schwelle. Leise bleibt der Absatz ueber die Schriftgroesse,
   nicht ueber die Sichtbarkeit — deshalb steht er auch nach dem Wechsel
   auf Hell im vollen --ink und nicht in einem blassen Grau. */
footer .legal{font-size:12.5px;margin-top:18px;color:var(--ink);}

/* ============ Scroll-Reveal: die ganze Kachel auf einmal ============
   „Scroll-triggered full card reveal" — die Kachel tritt als EIN Element
   hervor. Deshalb steht .reveal ausschliesslich auf .panel und auf keinem
   Kind darin: Überschrift, Fliesstext, Zitat und Logo sind zu diesem
   Zeitpunkt längst im Dokument und werden nie einzeln angefasst. Wer hier
   später ein .reveal auf eine .card oder ein h2 setzt, zerlegt genau das.

   Weg und Dauer bewusst am ruhigen Ende: 40 px und 1,15 s. Beide
   Eigenschaften teilen Dauer und Kurve, damit sie exakt gleichzeitig
   ankommen — die weisse Kachel schiebt sich langsam aus dem Waldgrund
   nach vorn, statt zu springen. Die Kurve läuft weich aus und schwingt
   nicht über; ein Überschwinger würde bei einer 1.000 px breiten Kachel
   wie ein Ruck aussehen.

   Der .js-Vorsatz ist kein Schmuck: Ohne ihn stünde jede Kachel auf
   opacity:0, sobald JavaScript ausfällt — die Seite wäre leer. Gesetzt
   wird die Klasse als erste Zeile im <head>, also bevor gezeichnet wird. */
.js .reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1.15s cubic-bezier(.22,.61,.36,1),
             transform 1.15s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.in{opacity:1;transform:none;}

/* Ruhige Darstellung: Der Vorsatz .js muss hier mitgeführt werden, sonst
   gewinnt die Regel darüber nach Spezifität und die Kachel bliebe unsichtbar. */
@media(prefers-reduced-motion:reduce){
  .reveal,.js .reveal{opacity:1;transform:none;transition:none;}
  .scroll-hint{animation:none;}
}

/* ============ Audio-Player ============ */
/* Maße bewusst klein gehalten (rund ein Drittel der ursprünglichen Fläche) */
#player{
  position:fixed;left:14px;bottom:14px;z-index:200;
  background:var(--cream-panel-strong);
  border:1px solid var(--line);border-radius:999px;
  box-shadow:0 8px 26px rgba(58,65,41,.24);
  display:flex;align-items:center;gap:7px;
  padding:5px 11px 5px 5px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  max-width:min(260px,calc(100vw - 28px));
  transition:transform .35s ease,opacity .35s ease;
}
#player.mini .p-meta,#player.mini .p-ctrl,#player.mini .p-bar{display:none;}
#player.mini{padding:4px;gap:0;}
#pLogo{
  width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;
  box-shadow:0 3px 9px rgba(58,65,41,.25);cursor:pointer;
}
#player.playing #pLogo{animation:spin 14s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.p-meta{min-width:0;line-height:1.25;}
.p-title{font-family:'Marcellus',serif;font-size:11.5px;color:var(--olive);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p-sub{font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive-soft);white-space:nowrap;}
.p-bar{width:44px;height:2px;border-radius:99px;background:rgba(76,85,57,.18);overflow:hidden;flex-shrink:0;}
.p-bar i{display:block;height:100%;width:0%;background:var(--olive);border-radius:99px;}
.p-ctrl{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.p-btn{
  background:none;border:none;cursor:pointer;color:var(--olive);
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background .25s;padding:0;
}
/* Auch die drei Knoepfe des Players tauschen die Farben — bis v9 wurde
   hier nur ein Hauch Grau hinterlegt. */
.p-btn:hover,.p-btn:focus-visible{background:var(--olive);color:var(--cream);}
.p-btn svg{width:11px;height:11px;fill:currentColor;}
.p-btn.main{width:26px;height:26px;background:var(--olive);color:var(--cream);}
.p-btn.main:hover,.p-btn.main:focus-visible{
  background:var(--cream);color:var(--olive);box-shadow:inset 0 0 0 1px var(--olive);
}
.p-btn.main svg{width:12px;height:12px;}
@media(max-width:560px){
  .p-bar{display:none;}
  .p-title{max-width:88px;}
}

/* =====================================================================
   Unterseite Kontakt & Anfahrt
   ===================================================================== */
.page-head{
  min-height:56vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:150px 6vw 70px;
}
.page-head{position:relative;}
/* Letzter Stopp 70 % statt 78 % — dieselbe Kanten-Falle wie beim Hero,
   ausfuehrlich dort erklaert. Betrifft Kontakt, Impressum und
   Datenschutz, also alle Seitenkoepfe. */
.page-head::before{
  content:'';position:absolute;z-index:-1;
  left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(1100px,96vw);height:min(560px,72vh);
  background:radial-gradient(ellipse at center,
    rgba(250,245,241,.80) 0%,
    rgba(250,245,241,.60) 40%,
    rgba(250,245,241,.26) 62%,
    rgba(250,245,241,0) 70%);
  pointer-events:none;
}
.page-head h1{
  font-family:'Cinzel','Marcellus',Georgia,serif;
  font-size:clamp(25px,4.2vw,48px);text-transform:uppercase;letter-spacing:.12em;
  color:var(--olive-dark);
  text-shadow:0 1px 0 rgba(250,245,241,.6), 0 0 22px rgba(250,245,241,.9), 0 0 56px rgba(250,245,241,.7);
}
.page-head .sub{
  margin-top:16px;font-size:clamp(13px,1.6vw,15.5px);
  letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--olive);text-shadow:0 0 18px rgba(250,245,241,.9), 0 0 40px rgba(250,245,241,.65);
}
.page-head .orte{
  margin-top:12px;color:var(--olive);font-size:15px;letter-spacing:.08em;font-weight:600;
  text-shadow:0 0 16px rgba(250,245,241,.9), 0 0 36px rgba(250,245,241,.6);
}

/* Kontaktformular */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:26px;}
.form-grid .full{grid-column:1/-1;}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--olive-soft);
}
.field input,.field select,.field textarea{
  font-family:'Manrope',sans-serif;font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;line-height:1.5;
  transition:border-color .25s,box-shadow .25s,background .25s;
  width:100%;
}
.field textarea{min-height:170px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--olive);background:#fff;
  box-shadow:0 0 0 3px rgba(76,85,57,.14);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(51,57,42,.42);}
.consent{
  grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;
  font-size:14.5px;line-height:1.6;color:var(--olive-dark);
}
.consent input{
  width:20px;height:20px;flex-shrink:0;margin-top:3px;accent-color:var(--olive);cursor:pointer;
}
.form-actions{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:6px;
}
button.btn{border:none;cursor:pointer;font-family:'Manrope',sans-serif;}
.btn-line{
  background:transparent;color:var(--olive);border:1px solid var(--olive);
  cursor:pointer;font-family:'Manrope',sans-serif;
}
.btn-line:hover,.btn-line:focus-visible{background:var(--olive);color:var(--cream);}
.form-note{font-size:14px;color:var(--olive-soft);margin-top:16px;line-height:1.65;}
.form-msg{
  grid-column:1/-1;font-size:15px;line-height:1.6;border-radius:12px;
  padding:14px 18px;display:none;
}
.form-msg.ok{display:block;background:rgba(76,85,57,.12);border:1px solid var(--line);color:var(--olive-dark);}
.form-msg.err{display:block;background:rgba(163,88,58,.12);border:1px solid rgba(163,88,58,.3);color:#7d3f27;}

/* Standort-Block auf der Kontaktseite */
.route{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,48px);align-items:start;}
@media(max-width:900px){.route{grid-template-columns:1fr;}}
.route img.house{
  width:100%;height:clamp(220px,26vw,300px);object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow);display:block;
}
.route h3{font-size:23px;margin-bottom:6px;}
.route .addr{font-weight:700;color:var(--olive-dark);font-size:16.5px;line-height:1.6;margin-bottom:18px;}
.way{margin-bottom:22px;}
.way:last-child{margin-bottom:0;}
.way h4{
  font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--olive-soft);
  margin-bottom:9px;display:flex;align-items:center;gap:9px;
}
.way h4 svg{width:17px;height:17px;fill:currentColor;flex-shrink:0;}
.way ul{list-style:none;margin:0;padding:0;}
.way li{
  position:relative;padding-left:19px;font-size:15.5px;line-height:1.65;margin-bottom:7px;
}
.way li::before{
  content:'';position:absolute;left:0;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--olive-soft);
}
.way li strong{color:var(--olive-dark);}
.price-tag{
  display:inline-block;background:rgba(76,85,57,.10);border:1px solid var(--line);
  border-radius:999px;padding:2px 12px;font-size:13.5px;font-weight:700;
  color:var(--olive-dark);margin-left:2px;white-space:nowrap;
}
.route-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.route-links a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--olive);border:1px solid var(--olive);border-radius:999px;
  padding:9px 20px;transition:background .25s,color .25s;
}
.route-links a:hover,.route-links a:focus-visible{background:var(--olive);color:var(--cream);}

/* Karte mit Zwei-Klick-Ladung (DSGVO) */
.map-box{
  position:relative;margin-top:20px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
  background:linear-gradient(150deg,#e6e3d5,#d6d8c4);
  aspect-ratio:16/10;
}
.map-box iframe{width:100%;height:100%;border:0;display:block;}
.map-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:26px;
}
.map-ph p{font-size:14.5px;color:var(--olive-dark);max-width:34ch;margin:0;line-height:1.6;}
.map-ph button{
  background:var(--olive);color:var(--cream);border:1px solid var(--olive);border-radius:999px;
  padding:12px 28px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s;
}
/* Umkehr wie bei allen Knoepfen (siehe .btn-solid). border statt none,
   damit der Knopf beim Wechsel auf Creme seine Kontur behaelt und die
   Flaeche nicht um einen Pixel springt. */
.map-ph button:hover,.map-ph button:focus-visible{
  background:var(--cream);color:var(--olive);border-color:var(--olive);
}
.map-credit{font-size:12.5px;color:var(--olive-soft);margin-top:8px;}
.map-credit a{color:var(--olive-soft);}

.divider{height:1px;background:var(--line);margin:clamp(40px,6vw,64px) 0;}
.note-soft{
  font-size:15px;color:var(--olive-soft);line-height:1.7;
  background:rgba(255,255,255,.42);border:1px solid var(--line);
  border-radius:14px;padding:20px 24px;margin-top:26px;
}

/* =====================================================================
   Logo-Kachel: klein, unten mittig in jeder großen Sektions-Kachel
   (nicht in den kleinen Karten darin – bewusst am Dateiende, damit der
   zusätzliche Fußraum die Innenabstände des Panels überschreibt)
   ===================================================================== */
.panel{position:relative;padding-bottom:calc(clamp(38px,6vw,74px) + 56px);}
.panel::after{
  content:'';position:absolute;left:50%;bottom:clamp(22px,3vw,32px);transform:translateX(-50%);
  width:44px;height:44px;border-radius:12px;
  background:url('../img/logo-kachel.png') center/cover no-repeat;
  box-shadow:0 2px 12px rgba(58,65,41,.16);
}

/* =====================================================================
   Rechtstexte: Impressum und Datenschutzerklärung (neu am 31.08.2026)
   ---------------------------------------------------------------------
   Bewusst nüchtern gehalten: dieselbe Kachel und dieselbe Schrift wie der
   Rest der Seite, aber engere Zeilen und kleinere Überschriften – ein
   Rechtstext wird gelesen, nicht bewundert.
   ===================================================================== */

/* Fusszeile: die beiden Pflichtlinks, deutlich sichtbar über dem Kleingedruckten */
footer .f-links{margin-top:22px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;}
footer .f-links a{
  color:var(--olive-dark);font-weight:700;font-size:13.5px;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid rgba(76,85,57,.45);padding-bottom:2px;
}
footer .f-links a:hover{border-bottom-color:var(--olive-dark);}

/* Der Textkörper eines Rechtstextes */
.rechts{max-width:78ch;}
.rechts h3{
  font-size:clamp(18px,2.1vw,22px);margin:38px 0 14px;
  padding-top:16px;border-top:1px solid var(--line);
}
.rechts h3:first-of-type{margin-top:8px;border-top:none;padding-top:0;}
.rechts h4{font-size:16px;color:var(--olive-dark);margin:22px 0 8px;}
.rechts p{margin-bottom:16px;}
.rechts ul{margin:0 0 18px 22px;}
.rechts li{margin-bottom:9px;}
.rechts a{color:var(--olive-dark);font-weight:600;}

/* Datenblock des Impressums: Bezeichnung links, Angabe rechts.
   Auf schmalen Geräten fällt es auf eine Spalte zurück. */
.daten{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:10px 26px;margin:0 0 24px;}
.daten dt{font-weight:700;color:var(--olive-soft);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding-top:3px;}
.daten dd{margin:0;}
@media(max-width:640px){
  .daten{grid-template-columns:1fr;gap:2px 0;}
  .daten dt{margin-top:14px;}
}

/* OFFENE ANGABE – muss vor dem Livegang ersetzt werden.
   Absichtlich auffällig: ein Platzhalter, den man übersieht, geht
   irgendwann als Tatsache online. */
.offen{
  display:inline-block;background:#F7E9CF;color:#6A3B12;
  border:1px dashed #B07A2E;border-radius:8px;
  padding:3px 10px;font-size:14px;font-weight:700;line-height:1.5;
}
.offen-block{
  display:block;background:#F7E9CF;color:#6A3B12;
  border-left:4px solid #B07A2E;border-radius:0 8px 8px 0;
  padding:14px 18px;margin:18px 0;font-size:15px;
}
.offen-block strong{color:#5A3210;}

/* „Stand: …" unter der Überschrift und die Rückkehr nach oben */
.stand{font-size:13.5px;color:var(--olive-soft);margin-bottom:26px;}
.zurueck{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);}

/* Sicherheitsnetz für lange Überschriften auf schmalen Geräten: Ein einzelnes
   langes Wort (z. B. „Datenschutzerklärung") kann sonst nicht umbrechen und
   ragt seitlich aus dem Bild. Wo es passt, ändert diese Regel nichts. */
.page-head h1{overflow-wrap:break-word;}

/* =====================================================================
   ANIMATIONS-SYSTEM v9 (01.09.2026)
   ---------------------------------------------------------------------
   Fuenf Bausteine, mehr nicht — das ist die eigentliche Entscheidung.
   Eine Therapie-Seite darf nicht wirken, als wolle sie etwas verkaufen;
   jede zusaetzliche Bewegung haette genau das getan.

     1  Soft Fade Up + Full Content Reveal .... steht bereits weiter oben
                                                (.js .reveal, seit v8)
     2  Subtle Forest Parallax ................ drei Ebenen, eine Variable
     3  Organic Mask Reveal ................... .mask-reveal, 6 Stellen
     4  Slow Ambient Motion ................... Nebel + Lichtatmung
     5  Premium Microinteractions ............. Hover, Druck, Fokus

   Gemeinsame Kurve fuer alles, was traegt: cubic-bezier(.22,.61,.36,1).
   Sie laeuft weich aus und schwingt NICHT ueber — ein Ueberschwinger ist
   der schnellste Weg, „hochwertig" in „verspielt" zu verwandeln.
   ===================================================================== */

/* ---------------------------------------------------------------------
   2 · SUBTLE FOREST PARALLAX
   ---------------------------------------------------------------------
   Drei Ebenen, exakt eine Zahl: site.js schreibt --sy (den geklemmten
   Scrollstand) an <html>, jede Ebene multipliziert ihn mit ihrem eigenen
   Faktor. Das ist der Kern von Parallaxe — gleicher Weg, verschiedene
   Geschwindigkeit — und es bedeutet einen einzigen Schreibzugriff pro
   Bild statt drei.

       hinten   Wald-Video    Faktor 0,014   (siehe #bgVideo oben)
       Mitte    Nebelbank     Faktor 0,075
       vorn     Blattwerk     Faktor 0,340

   Die Faktoren sind bewusst um eine Groessenordnung kleiner als bei den
   ueblichen Parallax-Seiten. Der Effekt soll Tiefe andeuten, nicht
   auffallen: bei 800 px Scrollweg wandert das Video 11 px.
   --------------------------------------------------------------------- */
.fog{
  position:absolute;inset:-14% -8%;pointer-events:none;
}
/* Zwei Ebenen ineinander, weil zwei Dinge gleichzeitig transformieren:
   aussen der Scroll-Versatz, innen die Dauerbewegung. Ein Element kann
   nur EIN transform tragen — der Versuch, beides in eine Regel zu
   schreiben, laesst die Keyframes den Scrollwert ueberschreiben. */
.fog>i{display:block;position:absolute;inset:0;}

/* VIEL DEZENTER, auf ein Drittel (Nutzerentscheid 10.10.2026): die drei
   Cremeflecken standen auf .42 / .30 / .34 und waren damit der hellste
   Schimmer ueber dem Wald. Jetzt .14 / .10 / .11.

   GEAENDERT WURDE NUR DIE DICHTE, nicht die Bewegung: Zuege (96 s / 138 s),
   Wege, Groessen und das leichte Pulsieren in @keyframes nebelA/nebelB
   bleiben, wie sie waren. Wer zurueckbauen will, setzt die drei Alphawerte
   zurueck — sonst nichts.

   KONTRASTFOLGE: keine, die unter die gemessenen Werte fuehrt. Die Flecken
   liegen zwischen Video und #bgVeil, sie HELLEN den Grund also auf und
   tragen damit zur Lesbarkeit bei. Alle dokumentierten Kontrastzahlen
   dieses Projekts sind aber OHNE ihren Beitrag gerechnet (die Kette im
   Messskript ist Video -> #bgVeil -> Schein). Weniger Nebel naehert die
   Seite diesen Zahlen an und kann sie nicht unterschreiten. */
#fogA{transform:translate3d(0,calc(var(--sy,0) * -0.075px),0);}
#fogA>i{
  background:
    radial-gradient(60% 40% at 22% 62%, rgba(250,245,241,.14) 0%, rgba(250,245,241,0) 70%),
    radial-gradient(46% 32% at 74% 38%, rgba(250,245,241,.10) 0%, rgba(250,245,241,0) 72%);
  animation:nebelA 96s ease-in-out infinite;
}
/* Ebene B bekommt bewusst KEINEN Scroll-Faktor: damit bleiben es drei
   scroll-gekoppelte Ebenen. Sie treibt nur. */
#fogB>i{
  background:
    radial-gradient(54% 36% at 54% 78%, rgba(250,245,241,.11) 0%, rgba(250,245,241,0) 74%);
  animation:nebelB 138s ease-in-out infinite;
}

#canopy{
  position:fixed;left:-3%;right:-3%;top:0;z-index:-1;
  height:clamp(180px,30vh,380px);
  background:url('../img/canopy.svg') top center/cover no-repeat;
  /* Gemessen am 01.09.2026 im Browser, zuerst gegen das laufende
     Wald-Video: bei .30 ging die Ebene im Blattwerk des Videos unter,
     bei .45 wirkte sie wie ein weicher Rahmen aus Zweigen — .42 war der
     Wert dazwischen.

     Nach dem Wechsel auf das Foto am selben Tag neu bewertet und auf
     .32 zurueckgenommen: Der neue Hintergrund ist oben deutlich heller,
     und auf hellem Grund liest sich dieselbe Deckung als dunkler Fleck,
     nicht als Blattwerk. Die Zahl gehoert zum Hintergrund, nicht zur
     Ebene — wer den Hintergrund wechselt, muss sie neu ansehen.

     Genau das am 01.09.2026 dreimal getan: .32 gegen das Waldfoto, .18
     gegen den goldenen Klee, .14 gegen den gruenen (der bringt oben
     selbst ein dunkles Bokeh mit, zwei unscharfe dunkle Ebenen
     uebereinander geben Schlieren statt Tiefe).

     HIER steht wieder .42 — der urspruengliche Wert, gemessen gegen
     GENAU DIESES laufende Video. Das ist kein Rueckschritt, sondern die
     Konsequenz derselben Regel: die Zahl gehoert zum Hintergrund. Wer
     diese Fassung auf ein Foto umstellt, muss sie erneut ansehen.
     Der Zwilling v11 steht aus demselben Grund auf .14.

     14.09.2026 spaet, fuenfte Bewertung — zurueck auf .42, gemeinsam mit
     dem Film. Die .20 aus v16 waren gegen die Handy-Aufnahme gerechnet,
     die am oberen Bildrand SELBST dichtes Laubdach mitbringt: zwei
     unscharfe dunkle Ebenen uebereinander geben dort keine Tiefe, sondern
     Schlieren. wald.mp4 zeigt oben offenen Nebelwald — hier hat die
     gezeichnete Ebene wieder etwas zu tun, und bei .20 ginge sie darin
     unter. Damit ist zum vierten Mal bestaetigt: die Zahl gehoert zum
     Hintergrund, nicht zur Ebene.

     10.10.2026, sechste Bewertung — .42 bleibt beim Wechsel auf
     waldweg-2026-10.mp4 stehen. Die neue Aufnahme steht zwischen den
     beiden alten Faellen: links und rechts Geaest, in der Mitte offener
     Himmel ueber dem Weg, und sie ist oben heller als beide (0,247).
     Die gezeichnete Ebene hat dort also etwas zu tun, ohne auf dichtes
     Laubdach zu treffen. */
  opacity:.42;
  pointer-events:none;
  /* max() statt clamp(): die Werte sind negativ, max() ist hier die
     UNTERE Schranke. Ohne sie liefe die Ebene bei langen Seiten hunderte
     Pixel weit ins Nichts. */
  transform:translate3d(0,max(-330px,calc(var(--sy,0) * -0.34px)),0);
  /* Die Zweige laufen nach unten aus, statt an einer Kante zu enden —
     sonst sieht man, dass es ein Rechteck ist. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,0) 100%);
}

/* ---------------------------------------------------------------------
   4 · SLOW AMBIENT MOTION
   ---------------------------------------------------------------------
   Zwei Nebelbaenke und die Lichtatmung hinter Hero und Seitenkopf.
   Alle drei laufen ueber Minuten statt Sekunden und bewegen ausschliess-
   lich transform und opacity — beides braucht der Browser nicht neu zu
   zeichnen. Gedacht sind sie zum Uebersehen: wer die Bewegung bemerkt,
   sieht sie zum letzten Mal bewusst.
   --------------------------------------------------------------------- */
@keyframes nebelA{
  0%,100%{transform:translate3d(-2.5%,0,0)     scale(1.02);opacity:.82;}
  50%    {transform:translate3d(3.5%,-1.6%,0)  scale(1.09);opacity:1;}
}
@keyframes nebelB{
  0%,100%{transform:translate3d(2%,1.2%,0)     scale(1.05);opacity:.70;}
  50%    {transform:translate3d(-3%,-1%,0)     scale(1);   opacity:.96;}
}
/* SLOW IMAGE ZOOM (Vorgabe: 1–5 %, sehr langsam, kein aggressiver Zoom)
   ---------------------------------------------------------------------
   132 Sekunden fuer einen vollen Zug, 3,7 % Weg (1,005 -> 1,042). Das
   sind rund 0,03 % pro Sekunde: Wer eine Minute auf die Seite schaut,
   sieht ein anderes Bild als beim Ankommen, kann aber nicht sagen, wann
   es sich bewegt hat. Genau das ist gemeint.

   Der Ausgangswert ist 1,005 und nicht 1: Bei exakt 1 stuende das Bild
   an einem Ende der Bewegung fuer einen Moment still — bei einer so
   langsamen Kurve faellt das als Stocken auf.

   Der Bezugspunkt (transform-origin 52%/62%) liegt auf dem Zweig mit
   den Ahornblaettern. Ein Zoom auf die Bildmitte haette den Zweig aus
   dem Ausschnitt geschoben. */
/* NICHT IN GEBRAUCH in dieser Video-Fassung — es gibt kein #bgFoto,
   das die Regel aufrufen koennte. Sie bleibt stehen (Loesch-Schutz und
   weil der Zwilling v11 sie braucht): Wer diese Fassung je auf ein Foto
   umstellt, hat den langsamen Zoom damit sofort wieder. */
@keyframes bildAtmen{
  0%,100%{transform:scale(1.005);}
  50%    {transform:scale(1.042);}
}

/* Der helle Schein hinter den grossen Namenszuegen atmet: 84 Sekunden
   fuer einen Zug, 5,5 % Groessenaenderung. Er traegt die gruene Schrift
   ueber dem Foto — deshalb darf er nie so weit zurueckgehen, dass die
   Schrift auf einer dunklen Stelle steht. Untere Grenze: opacity .86. */
.hero::before,.page-head::before{
  animation:lichtAtmen 84s ease-in-out infinite;
}
@keyframes lichtAtmen{
  0%,100%{transform:translate(-50%,-50%) scale(1);      opacity:.86;}
  50%    {transform:translate(-50%,-51%) scale(1.055);  opacity:1;}
}

/* ---------------------------------------------------------------------
   3 · ORGANIC MASK REVEAL
   ---------------------------------------------------------------------
   Sechs Bilder treten nicht ein, sondern gehen auf: zwei weiche, gegen-
   einander versetzte Lichtflecken wachsen ueber das Bild, wie Licht, das
   zwischen Baeumen aufkommt. Zwei statt einem, weil ein einzelner Kreis
   als Kreis erkennbar bleibt; zwei versetzte ergeben eine unregelmaessige
   Form, die keine geometrische Figur mehr ist.

   ENTSCHEIDEND: Ausgeloest wird das NICHT von einem eigenen Beobachter
   auf dem Bild, sondern von der .in-Klasse der Kachel darueber. Damit
   gibt es weiterhin genau EINEN Ausloeser pro Kachel — die Maske geht
   in derselben Millisekunde auf, in der die Kachel sich hebt. Ein
   zweiter Beobachter haette Stagger erzeugt, und genau das soll die
   Seite nicht tun. `.reveal` bleibt deshalb ausschliesslich auf `.panel`.

   Ohne JavaScript fehlt `.js` — dann gibt es keine Maske und das Bild
   steht schlicht da. Dieselbe Absicherung wie beim Kachel-Reveal.
   --------------------------------------------------------------------- */
.js .reveal .mask-reveal{
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,rgba(0,0,0,0) 100%),
                     radial-gradient(closest-side,#000 48%,rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(closest-side,#000 55%,rgba(0,0,0,0) 100%),
                     radial-gradient(closest-side,#000 48%,rgba(0,0,0,0) 100%);
  -webkit-mask-position:36% 44%, 68% 60%;
          mask-position:36% 44%, 68% 60%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:0% 0%, 0% 0%;
          mask-size:0% 0%, 0% 0%;
  /* BLUR TO FOCUS (dazu am 01.09.2026): Das Bild kommt nicht nur auf,
     es stellt sich auch scharf — 9 px Unschaerfe laufen auf 0 zurueck.
     Beides teilt denselben Ausloeser und dieselbe Kurve, laeuft aber
     100 ms laenger: Die Form ist dann schon vollstaendig da, waehrend
     die Schaerfe noch ankommt. Umgekehrt saehe es aus wie ein Bild,
     das zu spaet geladen hat.
     saturate startet bei .90, weil ein weichgezeichnetes Bild sonst
     farbiger wirkt als das scharfe daneben. */
  filter:blur(9px) saturate(.90);
  transition:-webkit-mask-size 1.5s cubic-bezier(.22,.61,.36,1),
                     mask-size 1.5s cubic-bezier(.22,.61,.36,1),
                        filter 1.6s cubic-bezier(.22,.61,.36,1);
}
/* 360 % ist gerechnet, nicht geschaetzt: bei dieser Groesse liegt der
   voll deckende Kern (55 % von closest-side) in jedem Seitenverhaeltnis
   ueber der gesamten Bildflaeche. Kleinere Werte lassen je nach Format
   eine helle Ecke stehen. */
.js .reveal.in .mask-reveal{
  -webkit-mask-size:360% 360%, 300% 300%;
          mask-size:360% 360%, 300% 300%;
  filter:blur(0) saturate(1);
}

/* ---------------------------------------------------------------------
   5 · PREMIUM MICROINTERACTIONS
   ---------------------------------------------------------------------
   Die Regel dahinter: Bewegung nur so weit, dass die Hand sie spuert,
   nicht so weit, dass das Auge sie sucht. Drei Pixel Hub, kein Farb-
   sprung, kein Zoom auf Text.
   --------------------------------------------------------------------- */

/* Anheben nur dort, wo tatsaechlich ein Zeiger schwebt. Auf dem
   Touchgeraet bleibt ein :hover sonst nach dem Antippen haengen —
   die Kachel steht dann dauerhaft schief. */

/* ---------------------------------------------------------------------
   VORGABE RB 01.09.2026: „Die Kacheln, die kein Button sind => ohne
   Pop-up Effekt" und „keinen Pop-out-Effekt bei den Bildern, die sollen
   einfach immer bleiben, wo sie sind."

   Damit faellt die Trennlinie neu, und zwar nach FUNKTION statt nach
   Aussehen: Bewegung beim Darueberfahren bekommt nur noch, was auf
   einen Klick antwortet — Knoepfe, Routenlinks, der Karten-Knopf, die
   Galeriepfeile, die Fusszeilen-Links. Alles, was blosser Inhalt ist,
   steht still: die Karten (.card), die Honorarfelder (.fee), die
   Standortkacheln (.loc), die Hinweiskaesten (.note-soft) und saemtliche
   Bilder (Portraet, Praxisfotos, Zwei-Spalter).

   Das ist mehr als Geschmack. Ein Element, das sich beim Darueberfahren
   hebt, verspricht Klickbarkeit. Bei einer Kachel, die nirgendwohin
   fuehrt, ist dieses Versprechen falsch — der Besucher klickt und es
   passiert nichts.

   Bis v11 hoben sich diese Elemente um 3 px und bekamen einen tieferen
   Schatten. Die Regeln stehen unten auskommentiert, nicht geloescht.
   Was BLEIBT: die Uebergangsdauern. Sie kosten nichts, solange keine
   Zustandsregel sie ausloest, und muessten beim Wiedereinschalten
   sonst mitgesucht werden.
   --------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .card,.fee,.loc,.note-soft{
    transition:transform .5s cubic-bezier(.22,.61,.36,1),
               box-shadow .5s ease, border-color .5s ease,
               background-color .5s ease;
  }
  /* ENTFERNT am 01.09.2026 (Vorgabe RB) — Kacheln ohne Ziel stehen still:
  .card:hover,.fee:hover,.note-soft:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 34px rgba(58,65,41,.13);
    border-color:rgba(76,85,57,.32);
    background-color:rgba(255,255,255,.72);
  }
  .loc:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 44px rgba(58,65,41,.15);
    border-color:rgba(76,85,57,.30);
  }
  */
  .btn-solid:hover{box-shadow:0 12px 28px rgba(58,65,41,.26);}
  .btn-line:hover,.btn-ghost:hover{box-shadow:0 10px 24px rgba(58,65,41,.18);}
  .route-links a:hover{--mgl:-2px;box-shadow:0 10px 22px rgba(58,65,41,.16);}
  .map-ph button:hover{--mgl:-2px;box-shadow:0 12px 26px rgba(58,65,41,.24);}
  .gal-nav:hover{transform:translateY(-50%) scale(1.07);}
  /* War #fff und stammt aus der Zeit des gruenen Blocks — auf der hellen
     Auflage waere Weiss auf Creme unsichtbar (01.09.2026). */
  footer .f-links a:hover{color:var(--ink);}
  .bio-foto,.two-col img,.route img.house{
    transition:transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s ease;
  }
  /* ENTFERNT am 01.09.2026 (Vorgabe RB) — Bilder bleiben, wo sie sind:
  .bio-foto:hover,.two-col img:hover,.route img.house:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 60px rgba(58,65,41,.20);
  }
  */
}

/* Zweites Netz gegen das Wiederauftauchen: Der Knopf mit der Telefon-
   nummer traegt .btn und wuerde die .btn-line-Umkehr sonst erben. Er ist
   ausdruecklich KEIN Knopf (Vorgabe RB) — er zeigt nur die Nummer.
   Deshalb hier alles zurueckgenommen, was Klickbarkeit verspricht:
   Farbumkehr, Schatten, Hub, Zeigerhand. Die Magnetik nimmt ihm site.js
   ab (Selektor `.btn:not(.btn-static)`), denn sie ist JavaScript und
   liesse sich hier nicht abschalten. */
.btn-static{
  display:inline-flex;align-items:center;gap:11px;
  cursor:default;
  /* Ziffern brauchen weniger Sperrung als Versalien — .14em ist fuer die
     Wortknoepfe gerechnet und liesse eine Telefonnummer auseinanderfallen. */
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  --mgl:0px;--mgs:1;
}
.btn-static:hover,.btn-static:focus,.btn-static:focus-visible{
  background:transparent;color:var(--olive);border-color:var(--olive);
  box-shadow:none;
}
/* Die Linienstaerke ist so gewaehlt, dass der Hoerer neben der 700er
   Schrift gleich schwer wirkt — duenner sieht er nach Fremdkoerper aus. */
.btn-static .btn-ico{
  width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Der Methode-Abschnitt hat seit dem 01.09.2026 keine Karten mehr und
   endet mit Fliesstext. Der Fussraum der Kachel ist aber fuer die
   Logo-Kachel gerechnet (siehe unten, .panel::after): clamp + 56 px.
   Ohne Karten steht davon zu viel als Leerflaeche da. .panel-schlank
   nimmt die Zugabe auf das Mass zurueck, das das Logo tatsaechlich
   braucht — 44 px hoch, 22 bis 32 px ueber der Unterkante. */
.panel-schlank{padding-bottom:calc(clamp(38px,6vw,74px) * .55 + 56px);}
.route-links a,.map-ph button,footer .f-links a{
  transition:transform .42s cubic-bezier(.22,.61,.36,1),
             background-color .42s ease, color .42s ease,
             border-color .42s ease, box-shadow .42s ease;
}

/* Der Druckpunkt gilt auf JEDEM Geraet — er ist die einzige Rueckmeldung,
   die ein Finger bekommt, und deshalb wichtiger als jeder Hover. */
/* Der Druckpunkt setzt den Hub zurueck und drueckt zusammen — beides
   ueber Variablen, damit die Magnetik daneben bestehen bleibt. */
.btn:active,.map-ph button:active,.route-links a:active{
  --mgl:0px;--mgs:.972;
}
#skipBtn:active{transform:translateX(-50%) scale(.972);}
.gal-nav:active{transform:translateY(-50%) scale(.92);}
.gal-dots button:active{transform:scale(.86);}
.p-btn:active{transform:scale(.9);}
.p-btn{transition:background .25s, transform .25s cubic-bezier(.22,.61,.36,1);}

/* Tastaturbedienung: ein sichtbarer, ruhiger Ring statt des Browser-
   Standards. Ohne :focus-visible saehe ihn auch jeder Mausklick. */
a:focus-visible,button:focus-visible,.btn:focus-visible,
.gal:focus-visible,summary:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:3px;
}
/* Diese Ausnahme hat sich am 01.09.2026 erledigt und ist deshalb
   auskommentiert statt entfernt: Sie hat den olivgruenen Fokusrahmen
   gegen einen cremefarbenen getauscht, weil Oliv auf dem gruenen Block
   nicht zu sehen war. Die Fusszeile ist jetzt hell — damit ist der
   cremefarbene Rahmen der unsichtbare, und der Regelfall zwei Zeilen
   darueber ist wieder der richtige. Kehrt die dunkle Fusszeile je
   zurueck, gehoert diese Zeile mit ihr zurueck.
footer a:focus-visible{outline-color:#fdfbf9;} */

/* Die Unterstreichung im Kontaktblock sprang bisher hart an. Ueber die
   Farbe der Linie laesst sie sich weich einblenden — der Text bleibt
   dabei an derselben Stelle stehen. */
.contact-grid a{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
  transition:text-decoration-color .4s ease, color .4s ease;
}
.contact-grid a:hover{text-decoration-color:currentColor;}

/* Menue-Unterstreichung auf dieselbe ruhige Kurve wie alles andere.
   Dazu ein Farbwechsel: die Unterstreichung allein ist 1,5 px hoch und
   im Augenwinkel nicht zu sehen. */
nav a::after{transition:width .45s cubic-bezier(.22,.61,.36,1);}
nav a:hover,nav a:focus-visible{color:var(--olive-dark);}

/* =====================================================================
   12 · CURSOR-EFFEKTE  (nur Desktop, nur bei feinem Zeiger)
   ---------------------------------------------------------------------
   Seit 15.09.2026 ist es NOCH EINER (urspruenglich drei) — und der
   einzige verbliebene zeichnet nichts, er neigt nur. Wie zuvor gilt er
   ausschliesslich dort, wo es einen echten Mauszeiger gibt: site.js legt
   ihn nur an, wenn (hover:hover) and (pointer:fine) zutrifft und der
   Besucher keine ruhige Darstellung angefordert hat.

     · Magnetic Button .... Knoepfe neigen sich bis zu 2,4 px zum Zeiger

     (entfallen, beide am 15.09.2026 auf Ansage)
       Cursor Spotlight — der weiche Lichtfleck ueber dem Hintergrund.
                 Block unten auskommentiert, samt der Rechnung, was das
                 den Kontrast kostet (nichts Kritisches).
       Cursor Follow —— der kleine Punkt, der dem Zeiger nachlief.
                 Er war gemeint, als vom „Schatten unter der Maus" die
                 Rede war. Block unten auskommentiert.

   Ausdruecklich NICHT gebaut: dauerhafte Cursor-Trails und Partikel.
   Beide standen als Verbot in der Vorgabe, und beide waeren auf einer
   Psychotherapie-Seite auch ohne Verbot falsch.

   Kostenseite: Der verbliebene Effekt bewegt nur transform.
   Waehrend der Mausbewegung wird kein Layout gelesen — die Positionen
   der Knoepfe liegen zwischengespeichert und werden nur bei Scrollen
   und Groessenaenderung neu bestimmt. --------------------------------- */

/* =====================================================================
   LICHTFLECK („Cursor Spotlight") — ENTFERNT am 15.09.2026 auf Ansage
   ---------------------------------------------------------------------
   Kurze Geschichte, weil sie zwei Tage umfasst: Der Fleck lag seit v10
   zwischen Schleier und Inhalt und hellte den Waldhintergrund um 14 %
   auf, cremefarben. Am 14.09. wurde er auf Wunsch warm eingefaerbt
   (heller Bernstein rgb(255,226,163)). Am 15.09. lautete die Ansage
   „entferne den Schatten unter der Maus" — er ist damit ganz weg.

   WAS DAS FUER DEN KONTRAST BEDEUTET, und das ist der Grund, warum hier
   Zahlen stehen: Der Fleck HELLTE auf, er hat die Hero-Schrift also
   mitgetragen. Ohne ihn faellt die Seite auf genau die Werte zurueck,
   mit denen sie seit v10 dokumentiert und abgenommen ist — denn in JENER
   Rechnung kam der Fleck gar nicht vor:

                     ohne Fleck (= jetzt)   mit creme   mit Bernstein
     Navigation            5,22               5,48         5,35
     Hero H1               7,01               7,38         7,20
     Unterzeile            5,53               5,76         5,62
     Ortszeile             4,99               5,28         5,15  <- schwaechste
     Scroll-Hinweis        5,11               5,38         5,25

   Die schwaechste Stelle der Seite liegt damit bei 4,99 : 1, gerechnet
   gegen ein komplett schwarzes Videobild und OHNE den cremefarbenen
   text-shadow, der zusaetzlich traegt. AA (4,50) haelt. Es ist also
   nichts nachzuziehen — das Entfernen kostet Helligkeit, aber keine
   Lesbarkeit. Skript: scratchpad/spot_kontrast2.py.

   ZURUECKHOLEN heisst: diesen Block einkommentieren, die Zeile
   `body.zeiger-an #spot` darunter, und in site.js BEIDE Stellen (das
   Anlegen des Elements und die zwei Zeilen in takt()).

#spot{
  position:fixed;left:0;top:0;z-index:-1;pointer-events:none;
  width:44vmax;height:44vmax;margin:-22vmax 0 0 -22vmax;
  background:radial-gradient(closest-side,
    rgba(255,226,163,.14) 0%,
    rgba(255,226,163,.07) 46%,
    rgba(255,226,163,0)   100%);
  opacity:0;transition:opacity 1.1s ease;
  transform:translate3d(var(--zx,50vw),var(--zy,50vh),0);
  will-change:transform;
}
   ===================================================================== */
/* =====================================================================
   ZEIGERPUNKT („Cursor Follow") — ENTFERNT am 15.09.2026 auf Ansage
   ---------------------------------------------------------------------
   Er lief dem Zeiger traege nach (Faktor 0,14 je Bild), war weich, ohne
   Rand und olivgruen bei 20 % Deckung — gedacht als kaum merkliche
   Spur, gelesen aber als „Schatten unter der Maus". Zusammen mit dem
   Lichtfleck weiter oben, der am selben Tag fiel, ist damit JEDE
   gezeichnete Spur unter dem Zeiger fort.

   UEBRIG von den urspruenglich drei Cursor-Effekten ist nur die Magnetik
   der Knoepfe — und die zeichnet nichts, sie neigt einen Knopf um bis zu
   2,4 px zum Zeiger. Auf dem Touchgeraet gab es ohnehin nie etwas davon.

   KONTRAST: keine Folge. Anders als der Lichtfleck lag dieser Punkt
   UEBER dem Inhalt (z-index 400) und hat nie Text getragen.

   Die Klassen `zeiger-an` und `zeiger-ruht` setzt site.js weiterhin am
   Koerper — sie haben jetzt keinen Abnehmer im CSS mehr, bleiben aber
   als Anknuepfpunkt stehen, falls der Punkt je zurueckkehrt.

   ZURUECKHOLEN heisst: diesen Block einkommentieren UND in site.js vier
   Stellen (das Anlegen des Elements, zwei Zeilen in takt(), je eine in
   den mouseover-/mouseout-Zuhoerern).

#zeigerpunkt{
  position:fixed;left:0;top:0;z-index:400;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(76,85,57,.20) 0%, rgba(76,85,57,.10) 60%, rgba(76,85,57,0) 100%);
  opacity:0;
  transform:translate3d(var(--px,-100px),var(--py,-100px),0) scale(var(--ps,1));
  transition:opacity .55s ease;
  will-change:transform;
}
body.zeiger-an #spot{opacity:1;}
body.zeiger-an #zeigerpunkt{opacity:1;}
body.zeiger-ruht #zeigerpunkt{opacity:0;}
   ===================================================================== */

/* MAGNETIC BUTTON — die Verschiebung kommt aus zwei eigenen Variablen,
   die site.js schreibt (--mgx/--mgy). Sie steht in DERSELBEN
   transform-Angabe wie der Hover-Hub (--mgl) und der Druckpunkt (--mgs).
   Das ist kein Stil, sondern Notwendigkeit: Ein Element kann nur EIN
   transform tragen. Wer hier spaeter ein zweites `transform:translateY()`
   in eine :hover-Regel schreibt, loescht die Magnetik still aus.
   Deshalb setzen alle Zustandsregeln unten Variablen statt transform. */
.btn,.route-links a,.map-ph button{
  transform:translate3d(var(--mgx,0px),calc(var(--mgy,0px) + var(--mgl,0px)),0)
            scale(var(--mgs,1));
}
/* Kuerzere Dauer nur fuer die Bewegung: 0,42 s waren richtig, solange
   sich der Knopf erst beim Hover hob. Ein Knopf, der dem Zeiger mit
   0,42 s Verzoegerung entgegenkommt, wirkt defekt. Die Farben behalten
   ihre ruhigen 0,42 s. */
.btn,.route-links a,.map-ph button{
  transition:transform .22s cubic-bezier(.22,.61,.36,1),
             background-color .42s ease,
             color .42s ease,
             border-color .42s ease,
             box-shadow .42s ease;
}

/* =====================================================================
   RUHIGE DARSTELLUNG (prefers-reduced-motion)
   ---------------------------------------------------------------------
   Dieser Block MUSS der letzte der Datei bleiben. Jede Regel, die
   danach kaeme, wuerde ihn bei gleicher Spezifitaet schlagen und den
   Fallback still aushebeln — genau die Falle, die in v8 schon einmal
   zugeschnappt ist (.reveal gegen .js .reveal).

   Abgeschaltet wird hier alles, was sich von selbst bewegt. Was bleibt:
   die Seite, vollstaendig sichtbar, mit allen Bildern.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  /* Kachel-Reveal und Masken: alles sofort da. filter:none MUSS hier
     stehen — ohne die Zeile bliebe das Bild bei ruhiger Darstellung
     dauerhaft mit 9 px Unschaerfe liegen, weil der Uebergang, der sie
     wegnimmt, hier abgeschaltet ist. */
  .reveal,.js .reveal{opacity:1;transform:none;transition:none;}
  .js .reveal .mask-reveal,.js .reveal.in .mask-reveal{
    -webkit-mask-image:none;mask-image:none;transition:none;
    filter:none;
  }

  /* Dauerbewegungen aus. Der langsame Bildzoom (#bgFoto>i) steht hier
     bewusst NICHT: in dieser Fassung gibt es kein Bild, das zoomen
     koennte — das Video wird weiter unten ganz ausgeblendet. */
  #fogA>i,#fogB>i,.hero::before,.page-head::before,
  #player.playing #pLogo,.scroll-hint{animation:none;}

  /* Parallax aus — die Ebenen stehen still, bleiben aber sichtbar */
  #fogA{transform:none;}
  #bgVideo{transform:translate(-50%,-50%) scale(1.08) translateZ(0);}
  /* Das Blattwerk wird von fixed auf absolute gestellt: es bewegt sich
     dann relativ zur Seite ueberhaupt nicht mehr, scrollt aber oben
     natuerlich weg, statt ueber allem stehen zu bleiben. */
  #canopy{position:absolute;transform:none;}

  /* Ein laufendes Hintergrund-Video ist Dauerbewegung. Statt seiner das
     Standbild, das ohnehin im Paket liegt — der Wald bleibt, die
     Bewegung geht. site.js holt das Video in diesem Fall gar nicht
     erst, das spart nebenbei 5,00 MB (bis v22: 8,9 MB).
     (In der Foto-Fassung v11 stehen diese beiden Zeilen nicht: dort ist
     der Hintergrund ohnehin ein Standbild.)

     Das Standbild zieht IMMER mit dem Film mit — es ist ein Einzelbild
     aus genau diesem Video (Sekunde 0), sonst zeigt die ruhige
     Darstellung einen anderen Wald als die bewegte. Genau dieser Bruch
     war am 14.09. der Grund, waldweg-standbild.jpg wieder gegen wald.jpg
     zu tauschen. Jetzt: waldweg-2026-10-standbild.jpg, 1024x576, 194 KB.
     wald.jpg bleibt in Betrieb, aber als BILD im Waldbaden-Abschnitt;
     waldweg-standbild.jpg bleibt ungenutzt im Paket (Lösch-Schutz). */
  #bgVideo{display:none;}
  #bgWrap{background:url('../img/waldweg-2026-10-standbild.jpg') center/cover no-repeat;}

  /* Die drei Cursor-Effekte werden von site.js in diesem Fall gar nicht
     erst angelegt; die Regeln hier sind das zweite Netz, falls jemand
     die Einstellung bei geoeffneter Seite umstellt. */
  #spot,#zeigerpunkt{display:none !important;}

  /* Mikro-Interaktionen: Farbe und Schatten duerfen bleiben, Bewegung nicht.
     transform:none allein genuegt seit v10 nicht mehr — Hub, Druckpunkt
     und Magnetik laufen ueber Variablen, die zurueckgesetzt werden
     muessen, sonst blieben sie in der zusammengesetzten Angabe stehen. */
  .card,.fee,.loc,.note-soft,.btn,.gal-nav,.route-links a,
  .map-ph button,.p-btn,footer .f-links a,.bio-foto,.two-col img,
  .route img.house{transition:none;}
  .btn,.route-links a,.map-ph button{--mgx:0px;--mgy:0px;--mgl:0px;--mgs:1;}
  .card:hover,.fee:hover,.loc:hover,.note-soft:hover,.btn:hover,
  .route-links a:hover,.map-ph button:hover,.bio-foto:hover,
  .two-col img:hover,.route img.house:hover,
  .btn:active,.map-ph button:active,.route-links a:active,
  .gal-dots button:active,.p-btn:active{transform:none;}
  #skipBtn:hover,#skipBtn:active{transform:translateX(-50%);}
  .gal-nav:hover,.gal-nav:active{transform:translateY(-50%);}
  .gal-stage img{transition:none;}
}