/* Mehr Lebensenergie — TCM-Praxis Inna Illenseer · Konzept 07.09.2026
   Signatur: der Meridian (die Seite ist eine Leitbahn), die Qi-Linie aus dem Logo, Tusche-Wisch, fünf Elemente. */
:root{
  --gruen:#00722D; --gruen-tief:#0B4A24; --gruen-hell:#E4EFE6; --gruen-mitte:#2E8B4F;
  --tinte:#14231B; --tinte-2:#1C3327; --papier:#F8F5EE; --sand:#EFE8D9; --weiss:#FFFFFF;
  --erde:#C9A24D; --holz:#2E8B4F; --feuer:#C8442B; --metall:#A7ADB2; --wasser:#3E6E8E;
  /* Ocker ist eine FLÄCHEN- und LINIENfarbe. Als Text auf Papier kommt #C9A24D auf 2,20:1
     und ist damit nicht lesbar. Deshalb zwei abgeleitete Töne, gemessen am 25.09.2026:
     --erde-text  5,18:1 auf Papier · 4,63:1 auf Sand · 4,54:1 auf dem Ocker-Tint
     --erde-gross 3,66:1 auf Papier — nur für Schrift ab 24 px (WCAG AA groß) */
  --erde-text:#7C642F; --erde-gross:#9A7B39;
  /* Trägt ein Element-Plättchen WEISSE Schrift, braucht es 4,5:1. Erde und Metall sind
     dafür zu hell (2,40 und 2,27) — die Tiefton-Fassung gilt für ALLE fünf Plättchen,
     damit die Regel eine bleibt (keine gemischten Schriftfarben in einer Kartensorte). */
  --holz-tief:#2C864C; --feuer-tief:#C8442B; --erde-tief:#8E7336; --metall-tief:#73777A; --wasser-tief:#3E6E8E;
  --text:#1E2B24; --grau:#5C6B62; --linie:rgba(20,35,27,.1);
  --r:28px; --r-s:16px; --wrap:1240px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --han:"Songti SC","Noto Serif SC","Noto Serif CJK SC","SimSun",serif;
  --ease:cubic-bezier(.22,.61,.36,1); --schnell:.3s; --druck:.97;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 17px/1.65 var(--sans);color:var(--text);background:var(--papier);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.2vw,5.4rem);letter-spacing:-.025em}
h2{font-size:clamp(2rem,4.2vw,3.5rem)}
h3{font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.005em}
p{max-width:64ch}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
section{position:relative;padding:112px 0}
section.pt0{padding-top:0}
.weiss{background:var(--weiss)} .sand{background:var(--sand)} .tinte{background:var(--tinte);color:#F2F0E8} .gruenhell{background:var(--gruen-hell)}
.tinte p{color:rgba(242,240,232,.8)}
::selection{background:var(--gruen);color:#fff}

/* ---------- Kicker mit Punkt (der Meridianpunkt wiederholt sich überall) */
.kicker{display:inline-flex;align-items:center;gap:10px;font:800 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gruen);margin-bottom:18px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 4px rgba(0,114,45,.15)}
.tinte .kicker{color:var(--erde)} .tinte .kicker::before{background:var(--erde);box-shadow:0 0 0 4px rgba(201,162,77,.2)}
.han{font-family:var(--han);font-weight:400;letter-spacing:0}
.lead{font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--grau);line-height:1.6}
.tinte .lead{color:rgba(242,240,232,.78)}
.kursiv{font-family:var(--serif);font-style:italic;font-weight:500}

/* ---------- Knöpfe */
.btn{--s:1;position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font:700 15px/1 var(--sans);letter-spacing:.01em;overflow:hidden;transition:transform var(--schnell) var(--ease),box-shadow var(--schnell) var(--ease),background var(--schnell);transform:translate(var(--mx,0),var(--my,0)) scale(var(--s));min-height:48px}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--schnell) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{--s:var(--druck);transition-duration:.1s}
.btn-gruen{background:var(--gruen);color:#fff;box-shadow:0 10px 30px -12px rgba(0,114,45,.7)}
.btn-gruen:hover{background:var(--gruen-tief);box-shadow:0 16px 34px -14px rgba(0,114,45,.8)}
.btn-gruen::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn-gruen:hover::after{transform:translateX(130%)}
.btn-hell{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-hell:hover{background:rgba(255,255,255,.24)}
.btn-linie{color:var(--gruen);border:1.5px solid rgba(0,114,45,.35);background:transparent}
.btn-linie:hover{border-color:var(--gruen);background:rgba(0,114,45,.06)}
.btn-weiss{background:#fff;color:var(--gruen-tief)}
.btn-weiss:hover{background:var(--papier)}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--gruen);border-bottom:1.5px solid transparent;transition:border-color var(--schnell)}
.text-link:hover{border-color:var(--gruen)}
.text-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---------- Header als Material */
header{position:fixed;inset:0 0 auto 0;z-index:60;transition:transform .45s var(--ease)}
header.weg{transform:translateY(-100%)}
.topbar{background:var(--tinte);color:rgba(242,240,232,.82);font:600 13px/1 var(--sans);letter-spacing:.02em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:16px}
.topbar a{display:inline-flex;align-items:center;gap:7px;padding:12px 0;min-height:44px;transition:color var(--schnell)}
.topbar a:hover{color:#fff}
.topbar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.topbar .rechts{display:flex;gap:22px}
.hauptzeile{background:rgba(248,245,238,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(20,35,27,.06);transition:background .4s}
header.fest .hauptzeile{background:rgba(248,245,238,.9)}
.hauptzeile .wrap{display:flex;align-items:center;justify-content:space-between;min-height:84px;gap:20px}
.logo{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 0;margin:-12px 0}
.logo img{height:56px;width:56px}
.logo b{font:600 25px/1.05 var(--serif);letter-spacing:.05em;white-space:nowrap;text-transform:uppercase;color:var(--gruen-tief)}
.logo b small{display:block;font:500 13px/1 var(--sans);letter-spacing:.18em;color:var(--grau);margin-top:5px}
.mb{display:none}
nav.haupt ul{display:flex;gap:6px;list-style:none}
nav.haupt a{position:relative;display:block;padding:12px 14px;font:600 15px/1 var(--sans);color:var(--text);border-radius:999px;transition:background var(--schnell),color var(--schnell)}
nav.haupt a::after{content:"";position:absolute;left:50%;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--gruen);transform:translateX(-50%) scale(0);transition:transform var(--schnell) var(--ease)}
nav.haupt a:hover{background:rgba(0,114,45,.07)}
nav.haupt a.aktiv{color:var(--gruen)} nav.haupt a.aktiv::after{transform:translateX(-50%) scale(1)}
.header-cta{display:flex;align-items:center;gap:10px}
.menu-knopf{display:none;width:48px;height:48px;border-radius:50%;background:var(--tinte);color:#fff;place-items:center}
.menu-knopf span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:background .2s}
.menu-knopf span::before,.menu-knopf span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:transform .3s var(--ease),top .3s}
.menu-knopf span::before{top:-6px} .menu-knopf span::after{top:6px}
body.menu-offen .menu-knopf span{background:transparent}
body.menu-offen .menu-knopf span::before{top:0;transform:rotate(45deg)} body.menu-offen .menu-knopf span::after{top:0;transform:rotate(-45deg)}
.menu-flaeche{position:fixed;inset:0;z-index:55;background:var(--tinte);color:#F2F0E8;padding:150px 28px 40px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transform:translateY(-3%);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.menu-flaeche[hidden]{display:none}
body.menu-offen .menu-flaeche{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu-flaeche ul{list-style:none;display:grid;gap:4px}
.menu-flaeche li a{display:flex;align-items:center;gap:14px;padding:12px 0;font:600 clamp(1.5rem,6vw,2.1rem)/1.1 var(--serif);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu-flaeche li a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--erde);flex:none}
body.menu-offen .menu-flaeche li a{opacity:1;transform:none}
.menu-flaeche li:nth-child(n) a{transition-delay:calc(.06s * var(--i,0))}
.menu-flaeche .unten{font-size:14px;color:rgba(242,240,232,.7);display:grid;gap:6px}
.menu-flaeche .unten a{min-height:44px;display:inline-flex;align-items:center}
.menu-qi{position:absolute;right:-60px;bottom:-40px;width:min(70vw,360px);opacity:.12;pointer-events:none}
.menu-qi svg{width:100%;height:auto}

/* ---------- Der Meridian (Signatur): senkrechte Leitbahn links, füllt sich mit dem Scrollen, Punkte je Abschnitt */
.meridian{position:fixed;left:26px;top:0;bottom:0;width:2px;z-index:40;pointer-events:none;--p:0}
.meridian .bahn{position:absolute;inset:0;background:rgba(20,35,27,.1)}
.meridian .fluss{position:absolute;left:0;top:0;width:100%;height:calc(var(--p) * 100%);background:linear-gradient(to bottom,rgba(0,114,45,.25),var(--gruen));transition:height .12s linear}
.meridian .fluss::after{content:"";position:absolute;left:50%;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--gruen);transform:translate(-50%,50%);box-shadow:0 0 0 6px rgba(0,114,45,.18),0 0 18px rgba(0,114,45,.6)}
.meridian .punkt{position:absolute;left:50%;width:9px;height:9px;border-radius:50%;background:var(--papier);border:2px solid rgba(20,35,27,.22);transform:translate(-50%,-50%) scale(.8);transition:transform .35s var(--ease),border-color .35s,background .35s;pointer-events:auto}
.meridian .punkt.an{background:var(--gruen);border-color:var(--gruen);transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 5px rgba(0,114,45,.16)}
.meridian .punkt i{position:absolute;left:18px;top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap;font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gruen-tief);background:rgba(248,245,238,.92);padding:6px 10px;border-radius:999px;opacity:0;transition:opacity .25s,transform .25s var(--ease);font-style:normal;box-shadow:0 6px 18px -8px rgba(20,35,27,.3)}
.meridian .punkt:hover i,.meridian .punkt.an.frisch i{opacity:1;transform:translateY(-50%) translateX(0)}
body.tinte-oben .meridian .bahn{background:rgba(242,240,232,.15)}
@media (max-width:1180px){.meridian{display:none}}
@media (max-width:1200px){.logo b{font-size:19px;white-space:normal}.mb{display:inline}nav.haupt a{padding:12px 10px}.header-cta .btn{padding-left:18px;padding-right:18px}}
nav.haupt a,.header-cta .btn{white-space:nowrap}

/* ---------- Cursor: Tuschepunkt */
.cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;width:10px;height:10px;border-radius:50%;background:var(--gruen);transform:translate(-50%,-50%);opacity:0;transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .3s;mix-blend-mode:multiply}
.cursor.an{opacity:.9}
.cursor.link{width:44px;height:44px;background:rgba(0,114,45,.18);border:1.5px solid var(--gruen)}
.cursor.foto{width:70px;height:70px;background:rgba(0,114,45,.12);border:1.5px solid rgba(0,114,45,.6)}
@media (hover:none),(max-width:900px){.cursor{display:none}}

/* ---------- Intro (einmal je Sitzung): der Kreis zeichnet sich, die Qi-Linie, das Blatt */
.intro{position:fixed;inset:0;z-index:200;background:var(--papier);display:grid;place-items:center;transition:opacity .7s var(--ease),visibility 0s .7s}
.intro.weg{opacity:0;visibility:hidden}
.intro svg{width:min(46vw,300px);height:auto;overflow:visible}
.intro .kreis{fill:none;stroke:var(--gruen);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:zeichnen 1.4s var(--ease) .1s forwards}
.intro .qi{fill:none;stroke:var(--gruen);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:zeichnen 1s var(--ease) 1.1s forwards}
.intro .blatt{fill:var(--gruen);opacity:0;transform-origin:70% 90%;animation:blatt .8s var(--ease) 1.8s forwards}
.intro .wort{position:absolute;bottom:18vh;left:0;right:0;text-align:center;font:600 clamp(1.2rem,3vw,1.8rem)/1 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--gruen-tief);opacity:0;animation:auftauchen .9s var(--ease) 2s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes blatt{from{opacity:0;transform:scale(.4) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes auftauchen{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
html.ankunft .intro{display:none}

/* ---------- Seitenwechsel: Tuschewisch von unten (Ruhezustand unsichtbar) */
.wisch{position:fixed;inset:-10% 0 -10% 0;z-index:190;background:var(--tinte);transform:translateY(101%);visibility:hidden;pointer-events:none;-webkit-mask:linear-gradient(to bottom,transparent 0,#000 12%,#000 100%);mask:linear-gradient(to bottom,transparent 0,#000 12%,#000 100%)}
.wisch.los{visibility:visible;transition:transform .55s var(--ease);transform:translateY(0)}
html.ankunft .wisch{visibility:visible;transform:translateY(0);animation:wischWeg .7s var(--ease) .05s forwards}
@keyframes wischWeg{to{transform:translateY(-101%)}}

/* ---------- Reveal (additiv: Grundzustand lesbar, nur mit JS versteckt) */
.js .rev{opacity:0;transform:translateY(26px);filter:blur(4px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.js .rev.da{opacity:1;transform:none;filter:blur(0)}
.js .rev.v2{transition-delay:.12s}.js .rev.v3{transition-delay:.24s}.js .rev.v4{transition-delay:.36s}.js .rev.v5{transition-delay:.48s}.js .rev.v6{transition-delay:.6s}
/* Tusche-Wisch: das Bild kommt mit weicher Pinselkante von links */
.js .tusche{--m:110%;-webkit-mask:linear-gradient(100deg,#000 0,#000 calc(100% - var(--m) - 18%),transparent calc(100% - var(--m)));mask:linear-gradient(100deg,#000 0,#000 calc(100% - var(--m) - 18%),transparent calc(100% - var(--m)));transition:--m 1.3s var(--ease)}
@property --m{syntax:"<percentage>";inherits:false;initial-value:110%}
.js .tusche.da{--m:-30%}
/* Wort-Aufstieg in Überschriften */
.js .worte i{display:inline-block;font-style:inherit;opacity:0;transform:translateY(.5em);filter:blur(5px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);transition-delay:calc(var(--i) * .05s)}
.js .worte.da i{opacity:1;transform:none;filter:blur(0)}

/* ---------- Hero Start */
.hero{position:relative;min-height:94vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--tinte)}
.hero .medien{position:absolute;inset:0}
.hero video,.hero .medien img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero .montage video{opacity:0;transition:opacity 1.2s var(--ease)} .hero .montage video.an{opacity:1}
/* 🔴 ZWEI Verläufe: von unten für die ganze Fläche, von links für die TEXTSPALTE.
   Nur nach oben abzudunkeln macht entweder den Text lesbar oder das Video sichtbar —
   nie beides. Gemessen am 25.09.2026: H1 2,61:1 (ernaehrung), Kicker 3,13:1 (index). */
.hero .schleier{position:absolute;inset:0;background:
  linear-gradient(to right,rgba(20,35,27,.88) 0,rgba(20,35,27,.72) 34%,rgba(20,35,27,.22) 62%,transparent 80%),
  linear-gradient(to top,rgba(20,35,27,.94) 0,rgba(20,35,27,.62) 42%,rgba(20,35,27,.32) 75%,rgba(20,35,27,.45) 100%)}
.hero-inhalt{position:relative;padding-top:190px;padding-bottom:170px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end}
.hero .kicker{color:#fff} .hero .kicker::before{background:var(--erde);box-shadow:0 0 0 4px rgba(201,162,77,.25)}
.hero h1{max-width:12ch}
.h1-ort{display:block;font:500 clamp(1.15rem,2vw,1.6rem)/1.3 var(--serif);font-style:italic;letter-spacing:0;margin-top:16px;color:rgba(255,255,255,.85);max-width:32ch}
.hero .lead{color:rgba(255,255,255,.94);margin:22px 0 32px;max-width:52ch}
.hero .knoepfe{display:flex;gap:12px;flex-wrap:wrap}
/* Qi-Kreis: die Logo-Geometrie, zeichnet sich mit dem Scrollen */
.qi-kreis{justify-self:end;width:min(34vw,420px);aspect-ratio:1;--p:.5;position:relative}
.qi-kreis svg{width:100%;height:100%;overflow:visible}
.qi-kreis .kreis{fill:none;stroke:rgba(255,255,255,.9);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p));transition:stroke-dashoffset .15s linear}
.qi-kreis .qi{fill:none;stroke:var(--erde);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p));transition:stroke-dashoffset .15s linear}
.qi-kreis .blatt{fill:#fff;opacity:clamp(0,calc(var(--p) * 1.6 - .4),1);transform-origin:20% 60%;transform:scale(calc(.7 + var(--p) * .3));transition:opacity .15s,transform .15s}
.qi-kreis .han{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(2.6rem,6vw,5rem);color:rgba(255,255,255,.14);pointer-events:none}
.hero .scroll-hinweis{position:absolute;left:64px;bottom:28px;display:flex;align-items:center;gap:12px;font:700 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.hero .scroll-hinweis i{width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);display:block;position:relative;overflow:hidden}
.hero .scroll-hinweis i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--erde);animation:tropf 2.2s var(--ease) infinite}
@keyframes tropf{to{top:100%}}

/* Unterseiten-Hero */
.hero-u{min-height:76vh}
.hero-u .hero-inhalt{grid-template-columns:1fr;padding-top:180px;padding-bottom:110px}
.hero-u h1{max-width:16ch}
.krumen{display:flex;gap:8px;align-items:center;font:600 13px/1 var(--sans);color:rgba(255,255,255,.7);margin-bottom:22px;flex-wrap:wrap}
.krumen a{min-height:44px;display:inline-flex;align-items:center;transition:color var(--schnell)} .krumen a:hover{color:#fff}
.krumen svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hero-foto .medien::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 75% 45%,transparent,rgba(20,35,27,.35))}

/* ---------- Angebots-Kacheln (Leiste unter dem Hero) */
.kacheln{margin-top:-90px;position:relative;z-index:2}
.kachel-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kachel{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--tinte);color:#fff;isolation:isolate;transform:translateZ(0);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.kachel:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(20,35,27,.6)}
.kachel:active{transform:scale(var(--druck));transition-duration:.1s}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);filter:saturate(.9) contrast(1.02)}
.kachel:hover img{transform:scale(1.06)}
/* Die Ocker-Marke („HAUPTANGEBOT“) sitzt über dem Titel, also höher im Verlauf.
   Bei .25 auf 55 % kam sie auf 2,50:1 — der Verlauf greift jetzt früher. */
.kachel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,35,27,.95) 0,rgba(20,35,27,.86) 26%,rgba(20,35,27,.55) 52%,rgba(20,35,27,.12) 78%,transparent)}
.kachel .text{position:absolute;left:24px;right:24px;bottom:22px;z-index:1}
.kachel .text small{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--erde);margin-bottom:10px}
.kachel .text small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--erde)}
.kachel .text b{display:block;font:600 clamp(1.4rem,2vw,1.9rem)/1.05 var(--serif);letter-spacing:-.01em}
.kachel .text span{display:block;font-size:14px;color:rgba(255,255,255,.75);margin-top:8px;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .45s var(--ease)}
.kachel:hover .text span{max-height:80px;opacity:1}
.kachel .pfeil{position:absolute;right:20px;top:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1;transition:background .3s,transform .45s var(--ease)}
.kachel .pfeil svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kachel:hover .pfeil{background:var(--gruen);transform:rotate(45deg)}
.kachel.haupt .pfeil{background:var(--gruen);border-color:transparent}

/* ---------- Duo (Bild + Text) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.duo.rechts .bildseite{order:2}
.bildseite{position:relative}
.foto{border-radius:var(--r);overflow:hidden;transform:translateZ(0);background:var(--sand)}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.foto:hover img{transform:scale(1.04)}
.foto.hoch{aspect-ratio:4/5}.foto.quer{aspect-ratio:4/3}.foto.quad{aspect-ratio:1}
.notiz{position:absolute;left:-18px;bottom:28px;background:#fff;border-radius:var(--r-s);padding:16px 20px;box-shadow:0 24px 48px -24px rgba(20,35,27,.45);display:flex;align-items:center;gap:14px;max-width:270px}
.notiz svg{width:34px;height:34px;flex:none;fill:none;stroke:var(--gruen);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notiz b{display:block;font:600 1.05rem/1.2 var(--serif)} .notiz span{font-size:13px;color:var(--grau)}
.notiz.oben{left:auto;right:-18px;top:28px;bottom:auto}
.duo h2{margin-bottom:20px}
.duo p+p{margin-top:14px}
.duo .btn,.duo .text-link{margin-top:26px}
.absatz-gruss{font:500 clamp(1.4rem,2.4vw,2rem)/1.2 var(--serif);font-style:italic;color:var(--gruen);margin-bottom:8px}

/* ---------- Statement (füllt sich wortweise beim Scrollen) */
.statement{--p:0;text-align:center;padding:140px 0}
.statement h2{font-size:clamp(1.9rem,4.4vw,3.6rem);font-weight:500;line-height:1.2;max-width:22ch;margin:0 auto}
.statement h2 i{font-style:normal;opacity:.18;transition:opacity .3s} /* Noah, 22.09.2026 abends: blass wie am Anfang, sonst sieht man die Animation nicht */
.statement h2 i.an{opacity:1}
.statement .han{display:block;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--erde-gross);margin-bottom:18px;letter-spacing:.4em}

/* ---------- Karten */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.karte{background:#fff;border-radius:var(--r);padding:32px 30px;border:1px solid var(--linie);transition:transform .4s var(--ease),box-shadow .4s var(--ease);position:relative;overflow:hidden}
.karte::before{content:"";position:absolute;left:30px;top:0;width:36px;height:3px;border-radius:0 0 4px 4px;background:var(--gruen);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.karte:hover{transform:translateY(-6px);box-shadow:0 30px 50px -34px rgba(20,35,27,.5)} .karte:hover::before{transform:scaleX(1)}
.karte .ico{width:52px;height:52px;border-radius:16px;background:var(--gruen-hell);display:grid;place-items:center;margin-bottom:20px}
.karte .ico svg{width:26px;height:26px;fill:none;stroke:var(--gruen);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.karte h3{margin-bottom:10px} .karte p{font-size:15.5px;color:var(--grau)}
.tinte .karte{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#F2F0E8}
.tinte .karte .ico{background:rgba(201,162,77,.14)} .tinte .karte .ico svg{stroke:var(--erde)} .tinte .karte p{color:rgba(242,240,232,.7)}
.sand .karte{background:#fff}
.kopf{max-width:720px;margin-bottom:56px}
.kopf.mitte{margin-left:auto;margin-right:auto;text-align:center}
.kopf.mitte .kicker{justify-content:center}
.kopf h2{margin-bottom:16px}
.kopf-zeile{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.kopf-zeile .kopf{margin-bottom:0}

/* ---------- Kurszeiten (Stundenplan) */
.stundenplan{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch}
.plan{background:var(--tinte);color:#F2F0E8;border-radius:var(--r);padding:38px;display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden}
.plan .qi-deko{position:absolute;right:-40px;top:-40px;width:220px;opacity:.1}
.plan h3{font-size:1.9rem}
.termin{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.termin .tag{font:600 1.5rem/1 var(--serif);color:var(--erde);min-width:48px}
.termin b{display:block;font-weight:700} .termin span{font-size:14px;color:rgba(242,240,232,.65)}
.termin .zeit{font:700 15px/1 var(--sans);background:rgba(255,255,255,.08);padding:10px 14px;border-radius:999px;white-space:nowrap}
.plan .ort{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:rgba(242,240,232,.75);margin-top:auto;padding-top:10px}
.plan .ort svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--erde);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{align-self:flex-start}

/* ---------- Fünf Elemente (Rad dreht mit dem Scrollen) */
.elemente{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.rad{--rot:0deg;width:min(100%,460px);aspect-ratio:1;margin:0 auto;position:relative}
.rad svg{width:100%;height:100%;overflow:visible}
.rad .ring{fill:none;stroke:var(--linie);stroke-width:1.5}
.rad .pfad{fill:none;stroke:rgba(20,35,27,.35);stroke-width:1.5;stroke-dasharray:4 6;transform-origin:200px 200px;transform:rotate(var(--rot));transition:transform .2s linear}
.rad .knoten{cursor:pointer;transition:transform .35s var(--ease);transform-origin:center}
.rad .knoten circle{transition:r .35s var(--ease),filter .35s}
.rad .knoten text{font:600 22px var(--han);fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.rad .knoten.an circle{filter:drop-shadow(0 8px 16px rgba(20,35,27,.35))}
/* 13 px in viewBox-Einheiten sind am Bildschirm 12,2 px (Desktop) bzw. 9,3 px (390 px).
   Gemessen wird, was ankommt — deshalb 14 px, und auf Schmal blendet die Beschriftung
   aus: die fünf Namen stehen direkt daneben als HTML-Liste (.elemente). */
.rad .name{font:800 14px var(--sans);letter-spacing:.14em;text-transform:uppercase;fill:var(--grau);text-anchor:middle}
.rad .mitte{font:600 15px var(--serif);fill:var(--grau);text-anchor:middle}
.elemente-liste{display:grid;gap:10px}
.element{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:16px 18px;border-radius:var(--r-s);background:#fff;border:1px solid var(--linie);cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.element:hover,.element.an{transform:translateX(6px);box-shadow:0 20px 40px -28px rgba(20,35,27,.45);border-color:transparent}
.element .han{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:20px}
.element b{display:block} .element span{font-size:13.5px;color:var(--grau)}
.element em{font:600 13px/1 var(--sans);font-style:normal;color:var(--grau);white-space:nowrap}
.element[data-e=holz] .han{background:var(--holz-tief)} .element[data-e=feuer] .han{background:var(--feuer-tief)} .element[data-e=erde] .han{background:var(--erde-tief)} .element[data-e=metall] .han{background:var(--metall-tief)} .element[data-e=wasser] .han{background:var(--wasser-tief)}

/* ---------- Meridian-Figur (Qigong): Leitbahnen fließen */
.figur{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.figur svg{width:min(100%,300px);height:auto;margin:0 auto;display:block;overflow:visible}
.figur .koerper{fill:none;stroke:rgba(20,35,27,.28);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.figur .bahn{fill:none;stroke:var(--gruen);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:6 10;animation:fliessen 3s linear infinite}
.figur .bahn.b2{animation-duration:3.8s;stroke:var(--gruen-mitte)} .figur .bahn.b3{animation-duration:4.4s;stroke:var(--erde)}
.figur .dantian{fill:var(--erde);animation:pulsen 2.6s var(--ease) infinite;transform-origin:center}
@keyframes fliessen{to{stroke-dashoffset:-64}}
@keyframes pulsen{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:.5}}
.figur:not(.da) .bahn,.figur:not(.da) .dantian{animation-play-state:paused}
.liste-punkte{display:grid;gap:14px;margin-top:22px}
.liste-punkte li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.liste-punkte li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gruen);margin-top:8px;box-shadow:0 0 0 4px rgba(0,114,45,.14)}
.liste-punkte b{display:block} .liste-punkte span{font-size:15px;color:var(--grau)}

/* ---------- Ablauf (Schritte) */
.ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.schritt{background:#fff;border-radius:var(--r);padding:34px 30px;border:1px solid var(--linie);position:relative}
.schritt::before{counter-increment:s;content:"0" counter(s);font:600 3.2rem/1 var(--serif);color:var(--gruen-hell);position:absolute;right:26px;top:22px}
.schritt .nr{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gruen);margin-bottom:16px}
.schritt .nr::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gruen)}
.schritt h3{margin-bottom:10px} .schritt p{font-size:15.5px;color:var(--grau)}
.tinte .schritt{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#F2F0E8} .tinte .schritt::before{color:rgba(255,255,255,.06)} .tinte .schritt p{color:rgba(242,240,232,.7)}
.sand .schritt{background:#fff}

/* ---------- Zahlen-Band */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.zahl-k{padding:30px 28px;border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.zahl{font:600 clamp(2.4rem,4vw,3.6rem)/1 var(--serif);color:#fff;letter-spacing:-.02em}
.zahl em{font-style:normal;color:var(--erde);font-size:.6em;margin-left:4px}
.zahl-k span{display:block;margin-top:10px;font-size:14.5px;color:rgba(242,240,232,.7)}

/* ---------- Zitate-Band */
.zitate{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.zitat{padding:36px 32px;border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);position:relative}
.zitat .han{position:absolute;right:26px;top:22px;font-size:2rem;color:rgba(201,162,77,.35)}
.zitat p{font:500 clamp(1.25rem,1.7vw,1.5rem)/1.35 var(--serif);font-style:italic;color:#F2F0E8;max-width:none;padding-right:40px}
.zitat cite{display:block;margin-top:18px;font:700 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--erde);font-style:normal}

/* ---------- Galerie */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:280px;gap:18px}
.galerie .foto{border-radius:var(--r);height:100%}
.galerie .foto.gross{grid-row:span 2}
.galerie figcaption{position:absolute;left:20px;bottom:18px;color:#fff;font:600 13px/1 var(--sans);letter-spacing:.06em;background:rgba(20,35,27,.55);padding:9px 13px;border-radius:999px;backdrop-filter:blur(6px)}
.galerie figure{position:relative;height:100%}

/* ---------- Programme-Teaser / Warteliste */
.programm{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.programm .chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--linie);font:600 13.5px/1 var(--sans)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gruen)}
.tinte .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#F2F0E8} .tinte .chip::before{background:var(--erde)}
.bald{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(201,162,77,.22);color:#6B5426;font:800 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.bald::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--erde);animation:pulsen 2s var(--ease) infinite}
.tinte .bald{color:var(--erde)}

/* ---------- FAQ */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-top:1px solid var(--linie)}
.faq-item:last-child{border-bottom:1px solid var(--linie)}
.faq-frage{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:24px 0;font:600 1.15rem/1.3 var(--sans);min-height:48px;transition:color var(--schnell)}
.faq-frage:hover{color:var(--gruen)}
.faq-frage i{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(0,114,45,.3);display:grid;place-items:center;transition:transform .4s var(--ease),background .3s,border-color .3s}
.faq-frage i::before,.faq-frage i::after{content:"";position:absolute;width:12px;height:1.5px;background:var(--gruen);transition:transform .3s}
.faq-frage i::after{transform:rotate(90deg)}
.faq-frage i{position:relative}
.faq-item.offen .faq-frage i{background:var(--gruen);border-color:var(--gruen)} .faq-item.offen .faq-frage i::before,.faq-item.offen .faq-frage i::after{background:#fff} .faq-item.offen .faq-frage i::after{transform:rotate(0)}
.faq-antwort{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-antwort>div{overflow:hidden}
.faq-antwort p{padding:0 60px 26px 0;color:var(--grau);max-width:none}
.faq-item.offen .faq-antwort{grid-template-rows:1fr}
html.kein-js .faq-antwort{grid-template-rows:1fr}

/* ---------- Hinweis (rechtlich) */
.hinweis{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:#fff;border:1px solid var(--linie);border-left:3px solid var(--erde);border-radius:var(--r-s);padding:22px 26px;font-size:14.5px;color:var(--grau);max-width:900px;margin:0 auto}
.hinweis svg{width:24px;height:24px;fill:none;stroke:var(--erde);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.hinweis b{color:var(--text);display:block;margin-bottom:4px}
.hinweis p{max-width:none}

/* ---------- CTA-Band mit drei Schritt-Karten */
.cta{position:relative;overflow:hidden;color:#fff;background:var(--tinte);padding:120px 0}
.cta .bg{position:absolute;inset:0}
.cta .bg img{width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.8)}
.cta .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 100%,rgba(0,114,45,.35),transparent),linear-gradient(to bottom,rgba(20,35,27,.6),rgba(20,35,27,.85))}
.cta .wrap{position:relative;text-align:center}
.cta h2{max-width:18ch;margin:0 auto 14px}
.cta .lead{color:rgba(255,255,255,.8);margin:0 auto 46px;max-width:52ch}
.cta .kicker{color:var(--erde);justify-content:center} .cta .kicker::before{background:var(--erde)}
.schritte{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center;margin:0 auto 46px;max-width:980px}
.sk{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--r);padding:28px 24px;text-align:left}
.sk .ico{width:44px;height:44px;border-radius:14px;background:rgba(201,162,77,.18);display:grid;place-items:center;margin-bottom:16px}
.sk .ico svg{width:22px;height:22px;fill:none;stroke:var(--erde);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sk small{display:inline-block;font:800 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--erde);margin-bottom:8px}
.sk b{display:block;font:600 1.3rem/1.15 var(--serif);margin-bottom:6px} .sk p{font-size:14px;color:rgba(255,255,255,.7);max-width:none}
.schritte>svg{width:26px;height:26px;fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cta .knoepfe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta .oder{margin:22px auto 0;max-width:none;text-align:center;font-size:14px;color:rgba(255,255,255,.65)} .cta .oder a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.4)}

/* ---------- Kontakt */
.kontakt{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:stretch}
.kontakt.gleich{grid-template-columns:1fr 1fr}
.info-karte{background:var(--tinte);color:#F2F0E8;border-radius:var(--r);padding:40px;display:flex;flex-direction:column;gap:26px;position:relative;overflow:hidden}
.info-karte .qi-deko{position:absolute;right:-60px;bottom:-60px;width:280px;opacity:.08}
.info-karte h2,.info-karte h3{font-size:1.8rem}
.info-zeile{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;position:relative}
.info-zeile svg{width:22px;height:22px;fill:none;stroke:var(--erde);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.info-zeile small{display:block;font:800 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,232,.55);margin-bottom:6px}
.info-zeile a,.info-zeile b{font-weight:700;font-size:1.05rem}
.info-zeile a{min-height:44px;display:inline-flex;align-items:center;margin:-10px 0}
.info-zeile a:hover{color:var(--erde)}
.info-zeile span{display:block;font-size:14px;color:rgba(242,240,232,.65);margin-top:4px}
.info-karte .orte{display:flex;flex-wrap:wrap;gap:8px}
.info-karte .orte span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);font:600 13px/1 var(--sans)}
.formular{background:#fff;border-radius:var(--r);padding:40px;border:1px solid var(--linie);display:grid;gap:18px}
.formular h2,.formular h3{font-size:1.8rem;margin-bottom:4px}
.feld{display:grid;gap:8px}
.feld label{font:700 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.feld input,.feld textarea{width:100%;border:1.5px solid var(--linie);border-radius:14px;padding:15px 16px;font:inherit;background:var(--papier);transition:border-color var(--schnell),box-shadow var(--schnell)}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 4px rgba(0,114,45,.12);background:#fff}
.feld textarea{min-height:130px;resize:vertical}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.anliegen{display:flex;flex-wrap:wrap;gap:8px}
.anliegen label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1.5px solid var(--linie);font:600 13.5px/1 var(--sans);cursor:pointer;transition:all var(--schnell);min-height:44px;text-transform:none;letter-spacing:0;color:var(--text)}
.anliegen input{position:absolute;opacity:0;width:0;height:0}
.anliegen label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--linie);transition:background var(--schnell)}
.anliegen label:hover{border-color:rgba(0,114,45,.4)}
.anliegen label:has(input:checked){background:var(--gruen);border-color:var(--gruen);color:#fff} .anliegen label:has(input:checked)::before{background:#fff}
.formular .btn{justify-self:start}
.formular .klein{font-size:13px;color:var(--grau)}
.formular .klein a{color:var(--gruen);font-weight:700}
/* Fieldset statt Label bei Auswahlgruppen — eine Gruppe braucht eine Legende, kein Label ohne Ziel */
.formular fieldset.feld{border:0;padding:0;margin:0;min-width:0}
.formular fieldset.feld legend{padding:0;font:700 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--grau);margin-bottom:8px}
/* Pflichtfeld nicht ausgefüllt: sichtbar an Rahmen UND Meldung, nie nur an Farbe */
.feld input.fehlt,.feld textarea.fehlt{border-color:#A8321F;box-shadow:0 0 0 4px rgba(168,50,31,.12)}
.formular .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-meldung a{color:inherit;text-decoration:underline;font-weight:800}
.form-meldung{font-size:13.5px;line-height:1.5;margin:0;padding:12px 14px;border-radius:14px;display:flex;gap:10px}
.form-meldung[hidden]{display:none}
.form-meldung[data-art="fehler"]{background:rgba(168,50,31,.1);color:#8E2A19;font-weight:600}
.form-meldung[data-art="ok"]{background:rgba(0,114,45,.1);color:#00591F;font-weight:600}
.direkt-anruf{display:flex;align-items:center;gap:8px;margin:0}
.direkt-anruf svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--gruen);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.direkt-anruf a{color:var(--gruen);font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}

/* ---------- Radar (Einsatzgebiet) */
.radar-block{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.radar{position:relative;width:min(100%,520px);aspect-ratio:1;margin:0 auto}
.radar svg{width:100%;height:100%;overflow:visible}
.radar .kreis{fill:none;stroke:var(--linie);stroke-width:1.2}
.radar .kreis.k2{stroke-dasharray:3 6}
.radar .achse{stroke:var(--linie);stroke-width:1}
.radar .ort{cursor:default}
.radar .ort circle{fill:var(--gruen);transition:r .3s var(--ease)}
.radar .ort:hover circle{r:8}
.radar .ort text{font:600 14px var(--sans);fill:var(--text)}
.radar .praxis text{font:800 14px var(--sans);fill:var(--gruen)}
.radar .km{font:600 14px var(--sans);fill:var(--grau)}
.radar .praxis circle{fill:var(--erde);animation:pulsen 2.4s var(--ease) infinite;transform-origin:center}
.radar .praxis text{font:700 13px var(--sans);fill:var(--gruen-tief)}
.radar .fahne{fill:none;stroke:var(--gruen);stroke-width:1.5;opacity:.5;transform-origin:260px 260px;animation:drehen 12s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}

/* ---------- Zeitleiste (Ausbildung) */
.zeitleiste{display:grid;gap:0;max-width:820px;position:relative}
.zeitleiste::before{content:"";position:absolute;left:79px;top:14px;bottom:14px;width:2px;background:var(--linie)}
.zl{display:grid;grid-template-columns:64px 32px 1fr;gap:0;align-items:start;padding:14px 0}
.zl .jahr{font:600 1.15rem/1.3 var(--serif);color:var(--gruen)}
.zl .pkt{width:32px;display:grid;place-items:start center;padding-top:8px}
.zl .pkt i{width:12px;height:12px;border-radius:50%;background:var(--papier);border:2.5px solid var(--gruen);display:block}
.zl b{display:block} .zl span{font-size:14.5px;color:var(--grau)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Praxis-Räume / Werte */
.werte{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ---------- Footer */
footer{background:var(--tinte);color:rgba(242,240,232,.78);padding:80px 0 34px;position:relative;overflow:hidden}
footer .qi-deko{position:absolute;right:-80px;top:-60px;width:380px;opacity:.06;pointer-events:none}
.fuss{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;position:relative}
.fuss img{width:72px;height:72px;margin-bottom:16px}
.fuss h3,.fuss h4{font:600 1.2rem/1.2 var(--serif);color:#fff;margin-bottom:16px}
.fuss ul{list-style:none;display:grid;gap:2px}
.fuss a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;transition:color var(--schnell)} .fuss a:hover{color:#fff}
.fuss p{font-size:14.5px;max-width:34ch}
.fuss-unten{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:rgba(242,240,232,.5)}
.fuss-unten a{min-height:44px;display:inline-flex;align-items:center}
.fuss .hinweis-fuss{font-size:13px;color:rgba(242,240,232,.5);margin-top:18px;max-width:40ch}

/* ---------- Textseiten */
.textseite{padding-top:190px}
.textseite .wrap{max-width:860px}
.textseite h1{font-size:clamp(2.2rem,4.5vw,3.6rem);margin-bottom:28px}
.textseite h2{font-size:1.6rem;margin:40px 0 12px} .textseite h3{font-size:1.2rem;margin:26px 0 8px;font-family:var(--sans);font-weight:700}
.textseite p{max-width:none;margin-bottom:12px;color:var(--grau)} .textseite p b{color:var(--text)}
.textseite .platz{background:rgba(201,162,77,.18);padding:1px 6px;border-radius:6px;color:var(--erde-text);font-weight:700}
.textseite a{color:var(--gruen);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.textseite a:hover{text-decoration-thickness:2px}
/* Rechtstexte: Listen mit Meridianpunkt, wie überall auf der Seite */
.textseite .liste-punkte-text{display:grid;gap:9px;margin:10px 0 18px;padding:0}
.textseite .liste-punkte-text li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;color:var(--grau);font-size:15px}
.textseite .liste-punkte-text li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gruen);margin-top:8px;box-shadow:0 0 0 3px rgba(0,114,45,.14)}
.textseite .nachweise{display:grid;gap:7px;margin:10px 0 18px;padding:0}
.textseite .nachweise li{list-style:none;color:var(--grau);font-size:14px;padding-left:16px;position:relative}
.textseite .nachweise li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--erde)}
.textseite .stand-zeile{margin-top:36px;padding-top:18px;border-top:1px solid var(--linie);font-size:14px;color:var(--grau)}

/* Marke „Hauptangebot“ über der H1 der beiden Hauptseiten (Inna, 07.09.2026) */
.haupt-marke{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:800 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.haupt-marke::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--erde);box-shadow:0 0 0 4px rgba(201,162,77,.3)}

/* ---------- Responsiv */
@media (max-width:1100px){
  .hero-inhalt{grid-template-columns:1fr}.qi-kreis{display:none}
  .kachel-raster{grid-template-columns:repeat(2,1fr)}
  .duo,.stundenplan,.elemente,.figur,.programm,.kontakt,.radar-block{grid-template-columns:1fr;gap:40px}
  .kontakt.gleich{grid-template-columns:1fr}
  .duo.rechts .bildseite{order:0}
  .karten,.ablauf,.zitate{grid-template-columns:repeat(2,1fr)}
  .zahlen,.werte{grid-template-columns:repeat(2,1fr)}
  .fuss{grid-template-columns:1fr 1fr}
  .galerie{grid-template-columns:repeat(2,1fr);grid-auto-rows:240px}
  .schritte{grid-template-columns:1fr;max-width:520px} .schritte>svg{transform:rotate(90deg);margin:0 auto}
}
@media (max-width:900px){
  /* 🔴 SVG-Beschriftungen skalieren mit der Grafik: bei 390 px kommen aus 14 px noch
     9,3 px an — unter der Hausgrenze von 13 px. Weggelassen statt geschrumpft, denn
     dieselben Namen stehen daneben im Text: die fünf Elemente in .elemente, die Orte
     als Chips in .orte. Geprüft von pruefen.py (die HTML-Fassung MUSS sichtbar sein). */
  /* 🔴 Das RAD verliert auf Schmal nur seine Beschriftung — die fünf Zeichen bleiben im
     Bild und die Namen stehen als Liste daneben (.elemente). Der RADAR dagegen wird ganz
     ausgeblendet: ohne Ortsnamen ist er ein Punktemuster ohne Aussage, und eine Grafik,
     die nichts mehr sagt, gehört ersetzt, nicht geschrumpft. Die Orte stehen auf
     kontakt.html als Chips (.orte) und in der Liste daneben. */
  .rad .name,.rad .mitte{display:none}
  .radar{display:none}
  nav.haupt,.header-cta .btn{display:none}.menu-knopf{display:grid}
  .topbar .links{display:none}.topbar .wrap{justify-content:center}
  .hauptzeile .wrap{min-height:72px}.logo img{height:46px;width:46px}.logo b{font-size:16px}
  .mb{display:inline}.logo b small{letter-spacing:.03em;line-height:1.25}
  section{padding:84px 0}
  .hero-inhalt{padding-top:150px;padding-bottom:130px}
  .hero-u .hero-inhalt{padding-top:150px;padding-bottom:80px}
  .kacheln{margin-top:-60px}
  .statement{padding:100px 0}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .kachel-raster{grid-template-columns:1fr 1fr;gap:12px}.kachel{aspect-ratio:3/4}.kachel .text{left:16px;right:16px;bottom:16px}
  .karten,.ablauf,.zitate,.zahlen,.werte,.fuss,.zwei,.galerie{grid-template-columns:1fr}
  .galerie{grid-auto-rows:220px}.galerie .foto.gross{grid-row:auto}
  .notiz{left:12px;bottom:12px;max-width:calc(100% - 24px)}.notiz.oben{right:12px;top:12px;left:auto}
  .hero .scroll-hinweis{display:none}
  .info-karte,.formular,.plan{padding:28px 22px}
  .zeitleiste::before{left:71px}.zl{grid-template-columns:56px 32px 1fr}
  .hero h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  .textseite{padding-top:140px}
}

/* ---------- Zugänglichkeit */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .js .rev,.js .worte i{opacity:1;transform:none;filter:none}.js .tusche{-webkit-mask:none;mask:none}
  .statement h2 i{opacity:1}.qi-kreis{--p:1}.meridian{display:none}.cursor{display:none}.intro{display:none}.wisch{display:none!important}
  .hero video{display:none}
}
@media (prefers-reduced-transparency:reduce){.hauptzeile{background:var(--papier);backdrop-filter:none}.btn-hell,.sk{backdrop-filter:none;background:rgba(20,35,27,.8)}}
@media (prefers-contrast:more){.hauptzeile{background:#fff;border-bottom:2px solid var(--tinte)}.karte,.schritt,.formular{border-color:var(--tinte)}}
:focus-visible{outline:3px solid var(--gruen);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- 22.09.2026: Aufklappmenü „Angebote" (Noah im Call mit Inna), lesbare Han-Zeichen --- */
nav.haupt li.hat-menu{position:relative}
nav.haupt li.hat-menu>a{display:inline-flex;align-items:center;gap:6px}
.pfeil-klein{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
nav.haupt li.hat-menu:hover .pfeil-klein,nav.haupt li.hat-menu:focus-within .pfeil-klein{transform:rotate(180deg)}
.drop{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,8px) scale(.98);transform-origin:top center;width:400px;background:rgba(248,245,238,.94);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border-radius:var(--r);box-shadow:0 30px 70px -30px rgba(20,35,27,.45),0 0 0 1px rgba(20,35,27,.08);padding:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s .3s;z-index:60;text-align:left}
.drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
nav.haupt li.hat-menu:hover .drop,nav.haupt li.hat-menu:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s 0s}
.drop-raster{display:grid;grid-template-columns:1fr;gap:2px} /* Noah, 22.09.2026: Angebote untereinander */
nav.haupt .drop-eintrag{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:16px;font:inherit;color:var(--text)}
nav.haupt .drop-eintrag::after{display:none}
nav.haupt .drop-eintrag:hover{background:rgba(0,114,45,.07)}
.drop-eintrag .ic{width:38px;height:38px;flex:none;border-radius:12px;background:rgba(0,114,45,.09);color:var(--gruen);display:grid;place-items:center}
.drop-eintrag .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drop-eintrag b{display:block;font:700 15px/1.2 var(--sans);margin:2px 0 3px}
.drop-eintrag small{display:block;font:500 13px/1.35 var(--sans);color:var(--text-2,#4a5a50)}
nav.haupt .drop-alle{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;padding:13px;border-radius:14px;background:var(--tinte);color:#fff;font:700 14.5px/1 var(--sans)}
nav.haupt .drop-alle::after{display:none}
nav.haupt .drop-alle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav.haupt .drop-alle:hover{background:var(--gruen)}
.han-de{display:block;font:800 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--erde-text);margin:-6px 0 22px}
.zitat .han{text-align:center;line-height:1}
.zitat .han::after{content:attr(data-de);display:block;font:800 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--erde-text);margin-top:6px}
@media (prefers-reduced-motion:reduce){.drop{transition:none;transform:translate(-50%,0)}}
@media (prefers-reduced-transparency:reduce){.drop{background:var(--papier);backdrop-filter:none}}

/* 22.09.2026: Kontaktleiste mobil — Telefonnummer brach in zwei Zeilen, sobald die neue (längere) Mailadresse daneben stand */
.topbar a{white-space:nowrap}
@media (max-width:480px){
  .topbar{font-size:13px}
  .topbar .wrap{gap:10px}
  .topbar .rechts{gap:12px}
}

/* 22.09.2026 abends (Noah): Footer — Logo größer, Kontakt mit Zeichen, Impressum/Datenschutz nur noch in der Fußzeile */
footer .fuss-logo{width:112px;height:112px;margin-bottom:14px}
/* 🔴 Der Kontaktweg dieser Praxis ist das Telefon („Fokus auf Anruf“, Close-Notiz 2021).
   Im Fuß war der Telefonlink 20 px hoch — auf dem Handy trifft den niemand sicher.
   44 px sind die Hausgrenze; die Adresse darf zweizeilig höher werden. */
footer .kontakt-liste li a{display:flex;align-items:flex-start;gap:12px;line-height:1.35;min-height:44px;padding:10px 0}
footer .kontakt-liste li a span{align-self:center}
footer .kontakt-liste li a svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
footer .kontakt-liste li a span{display:block}

/* 🔴 Touch-Ziele auf dem Handy: ein Textlink, der für sich steht, ist ein Knopf.
   Gemessen am 25.09.2026: „Mehr über mich“ 27 px, die Telefonnummer unter dem CTA
   20 px. Bei einer Praxis, deren Kontaktweg der Anruf ist, ist das der falsche Link
   zum Verfehlen. Links INNERHALB eines Satzes bleiben unangetastet — dort wäre eine
   44-px-Zeile ein Bruch im Fließtext. */
@media (hover:none),(max-width:900px){
  .text-link{min-height:44px;align-items:center}
  .cta .oder a,.oder a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  /* Telefon und Mail in der Kontaktkarte — der wichtigste Link der ganzen Seite. */
  .info-zeile a{display:inline-flex;align-items:center;min-height:44px}
}