/* Praxis Ullrich – Gestaltungssystem
   Schwarz und Ocker aus dem Logo, warmes Papier statt Grau (Kick-off 08.09.2026).
   Überschriften Newsreader (ruhige Serife, harmoniert mit der Wortmarke), Fließtext Lato.
   Beide Schriften liegen lokal, keine Verbindung zu Google. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/newsreader-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/newsreader-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 600;font-display:swap;src:url(../fonts/newsreader-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 600;font-display:swap;src:url(../fonts/newsreader-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/lato-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lato-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lato-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/lato-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/lato-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --papier:#FBF8F3;
  --sand:#F4EEE3;
  --sand-tief:#EBE2D2;
  --weiss:#FFFFFF;
  --tinte:#15130F;
  --nacht:#191612;
  --text:#2B2722;
  --leise:#685F55;
  --ocker:#B89045;
  --ocker-zahl:#A5813E;
  --ocker-tief:#7C5F29;
  --ocker-hell:#E6D7B8;
  --ocker-hauch:rgba(184,144,69,.09);
  --linie:rgba(21,19,15,.10);
  --linie-hell:rgba(250,247,240,.14);
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --max:1200px;
  --lese:42rem;
  --rand:clamp(1.25rem,4vw,2.5rem);
  --luft:clamp(5rem,10vw,8.5rem);
  --rund:28px;
  --rund-k:18px;
  --feder:cubic-bezier(.32,.72,0,1);
  --weich:cubic-bezier(.22,.61,.36,1);
  --schatten:0 1px 1px rgba(60,42,12,.04),0 12px 24px -12px rgba(60,42,12,.10),0 40px 80px -40px rgba(60,42,12,.22);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:110px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--papier);color:var(--text);font-family:var(--sans);font-weight:400;
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--ocker-hell);color:var(--tinte)}
:focus-visible{outline:2px solid var(--ocker);outline-offset:3px;border-radius:6px}
.huelle{max-width:var(--max);margin:0 auto;padding-inline:var(--rand)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--tinte);color:#fff;padding:.7rem 1rem;border-radius:12px;text-decoration:none}
.sprung:focus{top:1rem}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--tinte);margin:0 0 1rem;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.45rem,5vw,4.35rem);line-height:1.04;font-optical-sizing:auto}
h2{font-size:clamp(1.95rem,3.4vw,3rem);line-height:1.1}
h3{font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.25;font-weight:450}
h4{font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1.15em}
em.ton{font-style:italic;color:var(--ocker-tief)}
strong,b{font-weight:700;color:var(--tinte)}

/* Vorzeile als feine Pille */
.vorzeile{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.4rem;padding:.42rem .9rem .42rem .75rem;
  border-radius:999px;background:var(--ocker-hauch);box-shadow:inset 0 0 0 1px rgba(184,144,69,.28);
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ocker-tief);line-height:1.3}
.vorzeile::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ocker);flex:0 0 6px}
.dunkel .vorzeile{background:rgba(184,144,69,.14);box-shadow:inset 0 0 0 1px rgba(184,144,69,.35);color:var(--ocker-hell)}

/* Knöpfe: Pille mit eingebettetem Pfeil */
.knopf{--k-bg:var(--tinte);--k-fg:#fff;--k-ring:transparent;--k-ikon:rgba(255,255,255,.14);
  display:inline-flex;align-items:center;gap:.85rem;min-height:54px;padding:.45rem .5rem .45rem 1.45rem;border-radius:999px;
  background:var(--k-bg);color:var(--k-fg);box-shadow:inset 0 0 0 1px var(--k-ring);text-decoration:none;
  font-weight:700;font-size:.98rem;letter-spacing:.005em;line-height:1.2;cursor:pointer;border:0;font-family:var(--sans);
  transition:transform .5s var(--feder),background .35s var(--weich),box-shadow .35s var(--weich),color .35s var(--weich)}
.knopf .ikon{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;background:var(--k-ikon);
  transition:transform .55s var(--feder),background .35s var(--weich)}
.knopf .ikon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.knopf:hover{background:#2a251d}
.knopf:hover .ikon{transform:translate(3px,-2px) scale(1.05)}
.knopf:active{transform:scale(.98)}
.knopf.zwei{--k-bg:transparent;--k-fg:var(--tinte);--k-ring:rgba(21,19,15,.22);--k-ikon:var(--ocker-hauch)}
.knopf.zwei:hover{background:rgba(255,255,255,.65);--k-ring:rgba(184,144,69,.6)}
.knopf.ohne-ikon{padding:.45rem 1.5rem}.dunkel .knopf{--k-bg:var(--ocker);--k-fg:var(--tinte);--k-ikon:rgba(21,19,15,.12)}
.dunkel .knopf:hover{background:#c9a258}
.dunkel .knopf.zwei{--k-bg:transparent;--k-fg:#F4EEE3;--k-ring:rgba(244,238,227,.28);--k-ikon:rgba(244,238,227,.08)}
.dunkel .knopf.zwei:hover{background:rgba(244,238,227,.06);--k-ring:var(--ocker)}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.textlink{color:var(--ocker-tief);font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .45s var(--feder)}
.textlink:hover{background-size:100% 1px}
.textlink::after{content:" \2192"}

/* Offene Punkte nur auf der Vorschau sichtbar */
.offen{display:inline;padding:.08em .45em;border-radius:6px;background:#FFF4D6;box-shadow:inset 0 0 0 1px #E8C36A;color:#6B4F10;
  font-size:.86em;font-weight:700;font-family:var(--sans);white-space:normal}
.offen::before{content:"Offen: ";font-weight:900}
.vorschau-band{position:fixed;right:14px;bottom:14px;z-index:95;background:rgba(21,19,15,.86);color:#F4EEE3;
  font-size:.75rem;letter-spacing:.08em;padding:.45rem .9rem;border-radius:999px;backdrop-filter:blur(10px);pointer-events:none;white-space:nowrap}
.vorschau-band b{color:var(--ocker-hell);font-weight:700}

/* ------------------------------------------------ Kopf: schwebende Leiste */
.kopf{position:fixed;top:0;left:0;right:0;z-index:80;padding:14px var(--rand) 0;pointer-events:none}
.kopf-leiste{pointer-events:auto;max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:1.4rem;
  padding:.55rem .55rem .55rem 1.2rem;border-radius:999px;background:rgba(251,248,243,.72);
  backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
  box-shadow:inset 0 0 0 1px rgba(21,19,15,.07),0 18px 40px -26px rgba(60,42,12,.35);transition:background .4s var(--weich),box-shadow .4s var(--weich)}
.kopf.gescrollt .kopf-leiste{background:rgba(251,248,243,.92)}
.kopf-logo{display:block;flex:0 0 auto}
.kopf-logo img{height:30px;width:auto}
.menue{display:flex;align-items:center;gap:.2rem;margin:0 0 0 auto;padding:0;list-style:none}
.menue>li{position:relative}
.menue>li>a,.menue>li>button{display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .8rem;border-radius:999px;border:0;background:none;
  font:inherit;font-size:.93rem;color:var(--text);text-decoration:none;cursor:pointer;transition:background .3s var(--weich),color .3s}
.menue>li>a:hover,.menue>li>button:hover,.menue>li>a[aria-current]{background:rgba(21,19,15,.05);color:var(--tinte)}
.menue>li>a[aria-current]{box-shadow:inset 0 -2px 0 var(--ocker)}
.menue svg.pfeil{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .35s var(--feder)}
.unter{position:absolute;top:calc(100% + 12px);left:-1rem;width:min(560px,80vw);padding:6px;border-radius:24px;background:rgba(21,19,15,.04);
  box-shadow:inset 0 0 0 1px rgba(21,19,15,.06);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--weich),transform .45s var(--feder),visibility 0s .3s}
.unter-kern{background:var(--weiss);border-radius:19px;padding:1.1rem;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem;box-shadow:var(--schatten)}
.unter-kern p{grid-column:1/-1;margin:.2rem .6rem .5rem;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-tief)}
.unter-kern p.zwischen{margin-top:.8rem}
.unter a{display:block;padding:.55rem .7rem;border-radius:12px;text-decoration:none;font-size:.92rem;line-height:1.35;transition:background .25s}
.unter a span{display:block;font-size:.78rem;color:var(--leise)}
.unter a:hover{background:var(--sand)}
.hat-unter:hover .unter,.hat-unter:focus-within .unter,.hat-unter.ist-offen .unter{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hat-unter:hover svg.pfeil,.hat-unter.ist-offen svg.pfeil{transform:rotate(180deg)}
.kopf .knopf{min-height:46px;font-size:.9rem;padding-left:1.15rem}
.kopf .knopf .ikon{width:34px;height:34px;flex-basis:34px}
.burger{display:none;position:relative;width:46px;height:46px;border-radius:50%;border:0;background:var(--tinte);cursor:pointer;margin-left:auto}
.burger span{position:absolute;left:14px;right:14px;height:1.5px;background:#fff;border-radius:2px;transition:transform .5s var(--feder),opacity .3s}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:27px}
.menue-offen .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.menue-offen .burger span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
.vollmenue{position:fixed;inset:0;z-index:79;background:rgba(251,248,243,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:110px var(--rand) 2rem;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .4s var(--weich),visibility 0s .4s}
.menue-offen .vollmenue{opacity:1;visibility:visible;transition-delay:0s}
.vollmenue ul{list-style:none;margin:0;padding:0}
.vollmenue li{opacity:0;transform:translateY(28px);transition:opacity .5s var(--weich),transform .7s var(--feder)}
.menue-offen .vollmenue li{opacity:1;transform:none}
.vollmenue li:nth-child(2){transition-delay:.04s}.vollmenue li:nth-child(3){transition-delay:.08s}.vollmenue li:nth-child(4){transition-delay:.12s}
.vollmenue li:nth-child(5){transition-delay:.16s}.vollmenue li:nth-child(6){transition-delay:.2s}.vollmenue li:nth-child(7){transition-delay:.24s}
.vollmenue li:nth-child(8){transition-delay:.28s}.vollmenue li:nth-child(9){transition-delay:.32s}.vollmenue li:nth-child(10){transition-delay:.36s}
.vollmenue .gross a{display:block;font-family:var(--serif);font-size:2rem;line-height:1.2;padding:.45rem 0;text-decoration:none;color:var(--tinte);border-bottom:1px solid var(--linie)}
.vollmenue .klein{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem;margin:1.4rem 0}
.vollmenue .klein a{display:block;padding:.4rem 0;font-size:.95rem;text-decoration:none;color:var(--leise)}
.vollmenue .knopf{margin-top:1rem}
@media (max-width:1080px){.menue,.kopf .knopf.kopf-cta{display:none}.burger{display:block}}
@media (min-width:1081px){.vollmenue{display:none}}

/* ------------------------------------------------ Bewegung beim Einblenden */
html.js .auf{opacity:0;transform:translateY(28px);filter:blur(6px)}
html.js .auf.da{opacity:1;transform:none;filter:none;transition:opacity .9s var(--weich),transform 1.1s var(--feder),filter .9s var(--weich)}
html.js .auf.d1{transition-delay:.08s}html.js .auf.d2{transition-delay:.16s}html.js .auf.d3{transition-delay:.24s}html.js .auf.d4{transition-delay:.32s}html.js .auf.d5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){html.js .auf{opacity:1!important;transform:none!important;filter:none!important}*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}

/* ------------------------------------------------ Bänder */
.band{padding-block:var(--luft);position:relative}
.band.sand{background:var(--sand)}
.band.weiss{background:var(--weiss)}
.band.dunkel{background:var(--nacht);color:#D9D1C4}
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4{color:#F7F2E8}
.dunkel a:not(.knopf){color:#F4EEE3}
.band-kopf{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.band-kopf.mitte{margin-inline:auto;text-align:center}
.band-kopf .einleitung{font-size:1.14rem;color:var(--leise);margin:0}
.dunkel .band-kopf .einleitung{color:#B8AE9F}
.nr{font-family:var(--serif);font-style:italic;color:var(--ocker-tief);font-size:1rem;display:block;margin-bottom:.6rem}

/* Doppelrand-Karten */
.rahmen{padding:6px;border-radius:var(--rund);background:rgba(21,19,15,.035);box-shadow:inset 0 0 0 1px rgba(21,19,15,.06)}
.rahmen>.kern{border-radius:calc(var(--rund) - 6px);background:var(--weiss);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--schatten);height:100%}
.dunkel .rahmen{background:rgba(244,238,227,.04);box-shadow:inset 0 0 0 1px rgba(244,238,227,.08)}
.dunkel .rahmen>.kern{background:#221E18;box-shadow:inset 0 1px 0 rgba(244,238,227,.06)}
.bild-rahmen{padding:7px;border-radius:34px;background:rgba(21,19,15,.04);box-shadow:inset 0 0 0 1px rgba(21,19,15,.07)}
.bild-rahmen img{border-radius:27px;width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------ Startseite: Hero */
.hero{padding:clamp(7.5rem,13vw,10rem) 0 clamp(3.5rem,7vw,6rem);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:62vw;max-width:900px;aspect-ratio:1;right:-18vw;top:-22vw;border-radius:50%;
  background:radial-gradient(closest-side,rgba(184,144,69,.16),rgba(184,144,69,0));pointer-events:none}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.hero h1 .vorsatz{display:block;font-size:.5em;font-style:italic;color:var(--ocker-tief);letter-spacing:0;margin-bottom:.55em;line-height:1.25}
.hero .lead{font-size:clamp(1.08rem,1.35vw,1.22rem);line-height:1.72;color:#4A433A;max-width:36rem;margin:0 0 2rem}
.hero .knoepfe{margin-bottom:2.2rem}
.fakten-zeile{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:0;padding:1.3rem 0 0;border-top:1px solid var(--linie);list-style:none;font-size:.9rem;color:var(--leise)}
.fakten-zeile li{display:flex;align-items:baseline;gap:.5rem}
.fakten-zeile b{font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--tinte)}
.hero-bild{position:relative}
.hero-bild .bild-rahmen{aspect-ratio:4/5}
.hero-bild img{object-position:46% 30%}
.hero-bild figcaption{display:flex;align-items:center;gap:.9rem;margin:1rem .4rem 0;font-size:.86rem;color:var(--leise);line-height:1.4}
.hero-bild figcaption img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.hero-bild figcaption b{display:block;color:var(--tinte);font-size:.92rem}
@media (max-width:900px){.hero-raster{grid-template-columns:1fr}.hero-bild{max-width:440px}}

/* Drei Vertrauenszeichen */
.zeichen-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block:1px solid var(--linie)}
.zeichen{padding:2rem clamp(1rem,3vw,2.4rem);position:relative}
.zeichen+.zeichen{border-left:1px solid var(--linie)}
.zeichen .z-ikon{width:44px;height:44px;margin-bottom:1rem;color:var(--ocker)}
.zeichen h3{font-size:1.32rem;margin-bottom:.4rem}
.zeichen p{margin:0;color:var(--leise);font-size:.98rem}
@media (max-width:820px){.zeichen-reihe{grid-template-columns:1fr}.zeichen+.zeichen{border-left:0;border-top:1px solid var(--linie)}}

/* Zweispaltig: Überschrift links, Text rechts */
.geteilt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.geteilt .klebt{position:sticky;top:120px}
.geteilt .fliess p{font-size:1.1rem;line-height:1.78}
@media (max-width:900px){.geteilt{grid-template-columns:1fr}.geteilt .klebt{position:static}}

.karten3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:clamp(2.5rem,5vw,4rem)}
.karte .kern{padding:1.9rem 1.8rem 2rem}
.karte .k-nr{font-family:var(--serif);font-style:italic;font-size:2.4rem;line-height:1;color:var(--ocker-tief);display:block;margin-bottom:1.1rem}
.karte h3{font-size:1.3rem}
.karte p{margin:0;color:var(--leise);font-size:.98rem}
@media (max-width:900px){.karten3{grid-template-columns:1fr}}

/* Vergleich: zwei Wege als Zeitachsen */
.wege{display:grid;gap:1.1rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.weg .kern{padding:1.6rem clamp(1.2rem,3vw,2.2rem)}
.weg-kopf{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap;margin-bottom:1.3rem}
.weg-kopf h3{margin:0;font-size:1.3rem}
.weg-kopf span{font-size:.85rem;color:var(--leise)}
.spur{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem;position:relative}
.halt{position:relative;padding-top:1.6rem;font-size:.9rem;line-height:1.45;color:var(--leise)}
.halt::before{content:"";position:absolute;top:.35rem;left:0;right:-.5rem;height:2px;background:var(--sand-tief)}
.halt::after{content:"";position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--weiss);box-shadow:inset 0 0 0 2px #B9AE9C}
.halt:last-child::before{right:0}
.halt b{display:block;color:var(--tinte);font-size:.95rem;margin-bottom:.15rem}
.halt.lang{grid-column:span 2}
.halt.lang::before{background:repeating-linear-gradient(90deg,#CFC4B2 0 6px,transparent 6px 12px)}
.weg.hier .halt::before{background:var(--ocker)}
.weg.hier .halt::after{box-shadow:inset 0 0 0 2px var(--ocker);background:var(--ocker)}
.weg.hier .kern{box-shadow:inset 0 0 0 1px rgba(184,144,69,.45),var(--schatten)}
@media (max-width:760px){.spur{grid-auto-flow:row;grid-auto-columns:auto}.halt.lang{grid-column:auto}
  .halt{padding:0 0 1.1rem 1.6rem}.halt::before{top:.4rem;bottom:-.4rem;left:5px;right:auto;width:2px;height:auto}.halt:last-child::before{display:none}
  .halt.lang::before{background:repeating-linear-gradient(180deg,#CFC4B2 0 6px,transparent 6px 12px)}}

/* Schwerpunkte als Raster */
.felder{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.feld{grid-column:span 3;text-decoration:none;display:block}
.feld.breit{grid-column:span 4}
.feld .kern{padding:1.6rem 1.5rem 1.4rem;display:flex;flex-direction:column;transition:transform .6s var(--feder),box-shadow .5s var(--weich)}
.feld:hover .kern{transform:translateY(-4px)}
.feld .f-art{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-tief);margin-bottom:.9rem}
.feld h3{font-size:1.28rem;margin-bottom:.5rem}
.feld h3 small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--leise);letter-spacing:.02em;margin-top:.25rem}
.feld p{font-size:.95rem;color:var(--leise);margin:0 0 1.3rem;flex:1}
.feld .mehr{display:flex;align-items:center;justify-content:space-between;font-size:.86rem;font-weight:700;color:var(--tinte);padding-top:1rem;border-top:1px solid var(--linie)}
.feld .mehr i{width:30px;height:30px;border-radius:50%;background:var(--ocker-hauch);display:grid;place-items:center;transition:transform .5s var(--feder),background .3s}
.feld .mehr i svg{width:13px;height:13px;stroke:var(--ocker-tief);fill:none;stroke-width:1.8}
.feld:hover .mehr i{transform:translateX(3px);background:var(--ocker-hell)}
.feld.anlass .kern{background:var(--tinte)}
.feld.anlass h3{color:#F7F2E8}.feld.anlass p{color:#B8AE9F}.feld.anlass .f-art{color:var(--ocker)}
.feld.anlass .mehr{color:#F4EEE3;border-color:var(--linie-hell)}.feld.anlass .mehr i{background:rgba(184,144,69,.18)}
@media (max-width:1000px){.feld,.feld.breit{grid-column:span 6}}
@media (max-width:620px){.feld,.feld.breit{grid-column:span 12}}
/* 29.10.2026: „Etwas anderes“ als wählbare Box ganz rechts in der letzten Reihe, mit freiem Platz davor (Dustin). Gestrichelter Ockerrand statt weißer Karte,
   damit sie als Auswahl erkennbar ist und nicht als weiterer Schwerpunkt. */
.feld.feld-anders{grid-column:-4/-1;background:transparent;box-shadow:none}
.feld-anders .kern{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(184,144,69,.55);background-image:none}
@supports (border-style:dashed){.feld-anders .kern{box-shadow:none;outline:1.5px dashed rgba(184,144,69,.6);outline-offset:-1.5px}}
.feld-anders:hover .kern{background:var(--ocker-hauch);outline-color:rgba(184,144,69,.9)}
.feld-anders .mehr{border-top-style:dashed;border-top-color:rgba(184,144,69,.4)}
[data-theme="dark"] .feld-anders .kern{outline-color:rgba(201,162,88,.55)}
@media (max-width:1000px){.feld.feld-anders{grid-column:-7/-1}}
@media (max-width:620px){.feld.feld-anders{grid-column:1/-1}}
.grenzen-hinweis{margin-top:2rem;display:flex;gap:1rem;align-items:flex-start;max-width:52rem;color:var(--leise);font-size:.98rem}
.grenzen-hinweis svg{flex:0 0 22px;width:22px;height:22px;color:var(--ocker);margin-top:.2rem}

/* Drei Schritte */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.5rem);counter-reset:s;position:relative}
.schritt{position:relative;padding-top:4.2rem}
.schritt::before{counter-increment:s;content:"0" counter(s);position:absolute;top:0;left:0;font-family:var(--serif);font-size:3rem;line-height:1;color:var(--ocker-zahl);font-style:italic}
.schritt::after{content:"";position:absolute;top:1.5rem;left:4.2rem;right:-1rem;height:1px;background:linear-gradient(90deg,var(--ocker-hell),transparent)}
.schritt:last-child::after{display:none}
.schritt h3{font-size:1.35rem}
.schritt p{color:var(--leise);margin:0;font-size:.99rem}
.schritt .preisetikett{display:inline-block;margin-bottom:.8rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--ocker-tief);background:var(--ocker-hauch);padding:.3rem .7rem;border-radius:999px}
@media (max-width:900px){.schritte{grid-template-columns:1fr}.schritt::after{display:none}}
.raumbild{margin-top:clamp(3rem,6vw,5rem)}
.raumbild .bild-rahmen{aspect-ratio:21/9}
@media (max-width:700px){.raumbild .bild-rahmen{aspect-ratio:4/3}}

/* Person */
.person{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.person .bild-rahmen{aspect-ratio:4/5;max-width:460px}
.person .bild-rahmen img{object-position:50% 25%}
.zitat{margin:2rem 0;padding:0 0 0 1.5rem;border-left:2px solid var(--ocker);font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.35;color:var(--tinte);font-style:italic}
.zitat footer{font-family:var(--sans);font-style:normal;font-size:.85rem;color:var(--leise);margin-top:.7rem}
.belege{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin:2rem 0;padding:1.4rem 0;border-block:1px solid var(--linie)}
.belege li{list-style:none;display:flex;align-items:center;gap:.8rem;font-size:.9rem;color:var(--leise);line-height:1.35}
.belege img{width:52px;height:52px;border-radius:50%}
.belege b{display:block;color:var(--tinte)}
.belege{padding-left:0}
@media (max-width:900px){.person{grid-template-columns:1fr}}

/* Wissen */
.wissen-raster{display:grid;grid-template-columns:1.25fr 1fr;gap:1.1rem}
.video-karte .kern{position:relative;overflow:hidden;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.8rem;color:#F4EEE3;background:var(--nacht)}
.video-karte .kern img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.video-karte .kern::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,22,18,0) 30%,rgba(25,22,18,.85))}
.video-karte .inhalt{position:relative;z-index:1}
.video-karte h3{color:#F7F2E8;margin:.6rem 0 .3rem}
.video-karte .spiel{width:64px;height:64px;border-radius:50%;background:rgba(251,248,243,.92);display:grid;place-items:center;margin-bottom:1.2rem}
.video-karte .spiel svg{width:20px;height:20px;fill:var(--tinte);margin-left:3px}
.artikel-liste{display:grid;gap:.6rem}
.artikel-zeile{display:flex;gap:1.1rem;align-items:center;justify-content:space-between;padding:1.15rem 1.3rem;border-radius:20px;background:var(--weiss);
  box-shadow:inset 0 0 0 1px var(--linie);text-decoration:none;transition:box-shadow .3s,transform .5s var(--feder)}
.artikel-zeile:hover{box-shadow:inset 0 0 0 1px rgba(184,144,69,.55),var(--schatten);transform:translateX(3px)}
.artikel-zeile small{display:block;font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ocker-tief);margin-bottom:.25rem}
.artikel-zeile span{font-family:var(--serif);font-size:1.12rem;line-height:1.3;color:var(--tinte)}
.artikel-zeile i{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--ocker-hauch);display:grid;place-items:center}
.artikel-zeile i svg{width:13px;height:13px;stroke:var(--ocker-tief);fill:none;stroke-width:1.8}
@media (max-width:900px){.wissen-raster{grid-template-columns:1fr}.video-karte .kern{min-height:340px}}

/* Fragen */
.fragen{max-width:52rem;margin-inline:auto}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.5rem 0;
  font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.35;color:var(--tinte)}
.frage summary::-webkit-details-marker{display:none}
.frage summary i{flex:0 0 36px;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--linie);position:relative;transition:transform .5s var(--feder),background .3s}
.frage summary i::before,.frage summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ocker-tief);transform:translate(-50%,-50%)}
.frage summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--feder)}
.frage[open] summary i{background:var(--ocker-hauch);transform:rotate(180deg)}
.frage[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.frage .antwort{padding:0 3.5rem 1.6rem 0;color:var(--leise)}
.frage .antwort p:last-child{margin-bottom:0}
.dunkel .frage{border-color:var(--linie-hell)}.dunkel .frage summary{color:#F7F2E8}.dunkel .frage .antwort{color:#B8AE9F}

/* Abschluss */
.abschluss{border-radius:40px;padding:clamp(2.5rem,7vw,6rem) clamp(1.5rem,6vw,5.5rem);background:var(--nacht);position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(2rem,5vw,4rem);align-items:end}
.abschluss::before{content:"";position:absolute;width:640px;aspect-ratio:1;right:-220px;bottom:-320px;border-radius:50%;background:radial-gradient(closest-side,rgba(184,144,69,.28),rgba(184,144,69,0))}
.abschluss>*{position:relative}
.abschluss p.einleitung{color:#B8AE9F;font-size:1.1rem;max-width:36rem}
.abschluss .eckdaten{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.abschluss .eckdaten li{padding:1rem 0 0;border-top:1px solid var(--linie-hell);font-size:.92rem;color:#B8AE9F;line-height:1.45}
.abschluss .eckdaten b{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;color:#F7F2E8}
@media (max-width:900px){.abschluss{grid-template-columns:1fr;border-radius:30px}}

/* ------------------------------------------------ Unterseiten: Kopfbereich */
.seiten-kopf{padding:clamp(8rem,14vw,10.5rem) 0 clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.seiten-kopf::before{content:"";position:absolute;width:56vw;max-width:820px;aspect-ratio:1;right:-16vw;top:-24vw;border-radius:50%;background:radial-gradient(closest-side,rgba(184,144,69,.14),rgba(184,144,69,0));pointer-events:none}
.sk-raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,6vw,5rem);align-items:end}
.krumen{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.6rem;padding:0;list-style:none;font-size:.82rem;color:var(--leise)}
.krumen a{text-decoration:none;color:var(--leise)}
.krumen a:hover{color:var(--tinte)}
.krumen li+li::before{content:"/";margin-right:.4rem;color:#C9BEAC}
.seiten-kopf h1{font-size:clamp(2.3rem,4.6vw,3.9rem);max-width:18em}
.seiten-kopf .lead{font-size:clamp(1.06rem,1.3vw,1.2rem);line-height:1.72;color:#4A433A;max-width:40rem;margin:0 0 2rem}
.sk-seite{display:grid;gap:1rem}
.ansprech .kern{display:flex;gap:1rem;align-items:center;padding:1rem 1.1rem}
.ansprech img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.ansprech small{display:block;font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ocker-tief)}
.ansprech b{display:block;font-family:var(--serif);font-weight:500;font-size:1.15rem;line-height:1.25}
.ansprech span{font-size:.85rem;color:var(--leise)}
.eck .kern{padding:1.3rem 1.4rem}
.eck ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.eck li{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--leise);border-bottom:1px solid var(--linie);padding-bottom:.85rem}
.eck li:last-child{border:0;padding:0}
.eck li b{font-family:var(--serif);font-weight:500;font-size:1.05rem;color:var(--tinte);text-align:right}
.stufen-motiv{width:100%;height:auto;color:var(--ocker)}
@media (max-width:900px){.sk-raster{grid-template-columns:1fr}.sk-seite{max-width:440px}}

/* ------------------------------------------------ Lesetext mit Inhaltsverzeichnis */
.lese-raster{display:grid;grid-template-columns:240px minmax(0,var(--lese));gap:clamp(2rem,5vw,5rem);justify-content:center}
.lese-raster.ohne-toc{grid-template-columns:minmax(0,var(--lese))}
.toc{position:sticky;top:120px;align-self:start;max-height:calc(100vh - 150px);overflow:auto;padding-right:.5rem}
.toc p{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-tief);margin:0 0 .9rem}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--linie)}
.toc a{display:block;padding:.45rem 0 .45rem 1rem;margin-left:-1px;border-left:1px solid transparent;font-size:.85rem;line-height:1.4;color:var(--leise);text-decoration:none;transition:color .25s,border-color .25s}
.toc a:hover{color:var(--tinte)}
.toc a.aktiv{color:var(--tinte);border-left-color:var(--ocker)}
.toc-mobil{display:none;margin-bottom:2rem;border-radius:20px;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie)}
.toc-mobil summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700;font-size:.92rem;list-style:none}
.toc-mobil ol{margin:0;padding:0 1.2rem 1rem 2.4rem;font-size:.92rem}
.toc-mobil a{text-decoration:none;color:var(--leise);display:block;padding:.25rem 0}
@media (max-width:1100px){.lese-raster{grid-template-columns:minmax(0,var(--lese))}.toc{display:none}.toc-mobil{display:block}}

.lesetext{font-size:1.1rem;line-height:1.78;color:#2F2A24}
.lesetext>section{margin-bottom:clamp(3.5rem,7vw,5rem)}
.lesetext h2{font-size:clamp(1.75rem,2.9vw,2.4rem);line-height:1.14;margin:0 0 1.4rem}
.lesetext h3{font-size:1.32rem;margin:2.4rem 0 .8rem}
.lesetext p{margin:0 0 1.2em}
.lesetext a:not(.knopf){color:var(--ocker-tief);text-decoration:underline;text-decoration-color:rgba(138,106,46,.35);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .25s}
.lesetext a:not(.knopf):hover{text-decoration-color:currentColor}
.lesetext ul,.lesetext ol{margin:0 0 1.4em;padding:0}
.lesetext ul li{list-style:none;position:relative;padding-left:1.6rem;margin-bottom:.6em}
.lesetext ul li::before{content:"";position:absolute;left:0;top:.78em;width:.85rem;height:1px;background:var(--ocker)}
.lesetext ol{counter-reset:o}
.lesetext ol li{list-style:none;position:relative;padding-left:2.4rem;margin-bottom:.8em;counter-increment:o}
.lesetext ol li::before{content:counter(o);position:absolute;left:0;top:.05em;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ocker-hauch);
  color:var(--ocker-tief);font-size:.82rem;font-weight:700;display:grid;place-items:center;line-height:1}
.lesetext .einstieg p:first-child{font-family:var(--serif);font-size:1.38rem;line-height:1.55;color:var(--tinte)}
.lesetext .szene{margin:0 0 2rem;padding:1.8rem 1.9rem;border-radius:24px;background:var(--sand);position:relative}
.lesetext .szene p:last-child{margin-bottom:0}
.kasten{margin:2rem 0;padding:1.5rem 1.6rem;border-radius:22px;background:var(--weiss);box-shadow:inset 0 0 0 1px rgba(184,144,69,.35)}
.kasten .k-titel{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-tief);margin-bottom:.5rem}
.kasten p:last-child{margin-bottom:0}
.kasten.hinweis{background:var(--sand);box-shadow:none;font-size:.98rem}
.tabelle{margin:2rem 0;overflow-x:auto;border-radius:20px;box-shadow:inset 0 0 0 1px var(--linie);background:var(--weiss)}
.tabelle table{width:100%;border-collapse:collapse;font-size:.96rem;line-height:1.5}
.tabelle th{text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ocker-tief);background:var(--sand);padding:.95rem 1.1rem}
.tabelle td{padding:.95rem 1.1rem;border-top:1px solid var(--linie);vertical-align:top}
.tabelle td:last-child{font-weight:700;color:var(--tinte)}
.lesetext .knoepfe{margin:2rem 0}
.zwischen-cta{margin:3rem 0}
.zwischen-cta .kern{padding:1.6rem;display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:center;background:var(--nacht);color:#D9D1C4}
.zwischen-cta img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.zwischen-cta b{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.25;color:#F7F2E8;margin-bottom:.35rem}
.zwischen-cta p{margin:0 0 1rem;font-size:.95rem;color:#B8AE9F}
.zwischen-cta .knopf{--k-bg:var(--ocker);--k-fg:var(--tinte);--k-ikon:rgba(21,19,15,.12)}
@media (max-width:560px){.zwischen-cta .kern{grid-template-columns:1fr}}
.quellen{margin-top:2rem;border-radius:20px;background:var(--sand)}
.quellen summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-weight:700;font-size:.92rem;display:flex;justify-content:space-between}
.quellen summary::after{content:"+";color:var(--ocker-tief);font-size:1.2rem;line-height:1}
.quellen[open] summary::after{content:"\2212"}
.quellen ol{margin:0;padding:0 1.3rem 1.3rem 2.6rem;font-size:.88rem;line-height:1.55;color:var(--leise)}
.quellen li{margin-bottom:.6rem}
.quellen a{color:var(--ocker-tief);word-break:break-word}

/* Schaubild Ablauf */
.schaubild{margin:2rem 0;padding:1.6rem;border-radius:26px;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie)}
.schaubild ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.schaubild li{height:64px;border-radius:10px;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:var(--tinte);padding:0;margin:0}
.schaubild li::before{display:none}
.schaubild .p1{background:var(--sand-tief)}
.schaubild .p2{background:var(--ocker-hell)}
.schaubild .p3{background:var(--ocker-tief);color:#fff}
.schaubild .p4{background:repeating-linear-gradient(135deg,var(--ocker-hell) 0 6px,#F1E8D6 6px 12px)}
.schaubild .legende{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.2rem;font-size:.85rem;color:var(--leise)}
.schaubild .legende span{display:inline-flex;align-items:center;gap:.5rem}
.schaubild .legende i{width:14px;height:14px;border-radius:4px}
.schaubild small{display:block;margin-top:1rem;font-size:.8rem;color:var(--leise)}
@media (max-width:640px){.schaubild ol{grid-template-columns:repeat(6,1fr)}}

/* Preise */
.preis-raster{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:2rem 0}
.preis-karte .kern{padding:2rem}
.preis-karte .was{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-tief)}
.preis-karte .betrag{font-family:var(--serif);font-size:clamp(3rem,6vw,4.4rem);line-height:1;color:var(--tinte);margin:.6rem 0 .2rem}
.preis-karte .dauer{color:var(--leise);font-size:.95rem}
.preis-karte.stark .kern{box-shadow:inset 0 0 0 1px rgba(184,144,69,.55),var(--schatten)}
@media (max-width:620px){.preis-raster{grid-template-columns:1fr}}

/* Formular */
.formular .kern{padding:clamp(1.5rem,4vw,2.6rem)}
.feldgruppe{margin-bottom:1.35rem}
.feldgruppe label,.feldgruppe .lbl{display:block;font-weight:700;font-size:.95rem;color:var(--tinte);margin-bottom:.45rem}
.feldgruppe .pflicht{color:var(--ocker-tief);font-weight:400;font-size:.82rem;margin-left:.3rem}
.feldgruppe .hilfe{display:block;font-size:.84rem;color:var(--leise);margin-top:.4rem;line-height:1.45}
.eingabe{width:100%;font:inherit;font-size:1rem;padding:.95rem 1.1rem;border-radius:16px;border:0;background:var(--papier);color:var(--tinte);
  box-shadow:inset 0 0 0 1px rgba(21,19,15,.14);transition:box-shadow .25s,background .25s}
.eingabe:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--ocker)}
textarea.eingabe{min-height:130px;resize:vertical}
.wahl-reihe{display:flex;flex-wrap:wrap;gap:.5rem}
.wahl-reihe label{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1.1rem;border-radius:999px;background:var(--papier);box-shadow:inset 0 0 0 1px rgba(21,19,15,.14);
  cursor:pointer;font-weight:400;font-size:.95rem;margin:0;transition:box-shadow .25s,background .25s}
.wahl-reihe input{accent-color:var(--ocker)}
.wahl-reihe label:has(input:checked){background:var(--ocker-hauch);box-shadow:inset 0 0 0 1.5px var(--ocker)}
.fehler{display:none;color:#9E2A1E;font-size:.86rem;margin-top:.4rem}
.ungueltig .fehler{display:block}
.ungueltig .eingabe{box-shadow:inset 0 0 0 2px #C0563F}
.einwilligung{display:flex;gap:.8rem;align-items:flex-start;font-size:.88rem;line-height:1.5;color:var(--leise)}
.einwilligung input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--ocker);flex:0 0 18px}
.notfall{font-size:.86rem;color:var(--leise);background:var(--sand);border-radius:16px;padding:1rem 1.1rem;margin-bottom:1.35rem}
.danke{display:none;text-align:left}
.formular.gesendet form{display:none}
.formular.gesendet .danke{display:block}
.hp{position:absolute;left:-9999px}

/* Rechner */
.rechner .kern{padding:clamp(1.5rem,4vw,2.6rem)}
.regler{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--ocker) var(--wert,50%),var(--sand-tief) var(--wert,50%));outline:none;margin:1rem 0 .5rem}
.regler::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--ocker),0 6px 14px -4px rgba(60,42,12,.35);cursor:grab}
.regler::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid var(--ocker);cursor:grab}
.regler.leer::-webkit-slider-thumb{box-shadow:0 0 0 1.5px #C9BEAC;background:var(--papier)}
.regler-marken{display:flex;justify-content:space-between;font-size:.8rem;color:var(--leise);gap:1rem}
.regler-marken span:last-child{text-align:right}
.anzeige{font-family:var(--serif);font-size:1.5rem;color:var(--tinte)}
.summe{font-family:var(--serif);font-size:clamp(3rem,7vw,4.8rem);line-height:1;color:var(--tinte);margin:.4rem 0 1rem}
.aufstellung{list-style:none;margin:0 0 1.2rem;padding:0}
.aufstellung li{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--linie);font-size:.96rem}
.aufstellung li:last-child{font-weight:700;color:var(--tinte);border-bottom:0}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:620px){.zwei-spalten{grid-template-columns:1fr}}
.frage-karte{margin-bottom:1.1rem}
.frage-karte .kern{padding:1.5rem 1.6rem}
.frage-karte h3{font-size:1.2rem;margin:0 0 .3rem}
.frage-karte .hilfe{font-size:.88rem;color:var(--leise);margin:0}
.ueberspringen{background:none;border:0;padding:0;font:inherit;font-size:.84rem;color:var(--leise);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bereich-titel{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-tief);margin:2.2rem 0 .9rem}
.balken{height:8px;border-radius:999px;background:var(--sand-tief);overflow:hidden;margin:.45rem 0 .25rem}
.balken i{display:block;height:100%;background:var(--ocker);border-radius:999px}
.uebersicht-zeile{padding:.9rem 0;border-bottom:1px solid var(--linie)}
.uebersicht-zeile .kopfzeile{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem}
.uebersicht-zeile small{font-size:.78rem;color:var(--leise)}
@media print{.kopf,.fuss,.vorschau-band,.nur-bildschirm,body::after{display:none!important}.band{padding:1rem 0}}

/* Wissen-Übersicht */
.kat-titel{display:flex;align-items:baseline;gap:1rem;margin:3.5rem 0 1.2rem}
.kat-titel h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0}
.kat-titel span{font-family:var(--serif);font-style:italic;color:var(--ocker-tief)}
.art-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.art-karte{text-decoration:none;display:block}
.art-karte .kern{padding:1.5rem;display:flex;flex-direction:column;transition:transform .6s var(--feder)}
.art-karte:hover .kern{transform:translateY(-4px)}
.art-karte h3{font-size:1.2rem;line-height:1.3;margin-bottom:.6rem}
.art-karte p{font-size:.92rem;color:var(--leise);margin:0 0 1rem;flex:1}
.art-karte .meta{font-size:.78rem;color:var(--leise);display:flex;justify-content:space-between;border-top:1px solid var(--linie);padding-top:.8rem}
@media (max-width:1000px){.art-raster{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.art-raster{grid-template-columns:1fr}}
.verwandt{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.verwandt{grid-template-columns:1fr}}

/* Mobil: fester Handlungsknopf nach dem ersten Scrollen */
.mobil-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:none;transform:translateY(140%);transition:transform .6s var(--feder)}
.mobil-cta.sichtbar{transform:none}
.mobil-cta .knopf{width:100%;justify-content:space-between;box-shadow:0 18px 40px -16px rgba(21,19,15,.55)}
@media (max-width:760px){.mobil-cta{display:block}.vorschau-band{bottom:auto;top:76px}}

/* ------------------------------------------------ Fuß */
.fuss{background:var(--tinte);color:#A99F90;padding:clamp(4rem,8vw,6rem) 0 2rem;font-size:.92rem;margin-top:0}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
.fuss img.logo{height:34px;width:auto;margin-bottom:1.4rem}
.fuss h4{color:#F4EEE3;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fuss a{color:#D9D1C4;text-decoration:none}
.fuss a:hover{color:var(--ocker)}
.fuss address{font-style:normal;line-height:1.7}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid rgba(244,238,227,.1);font-size:.82rem;color:#8A8072}
.fuss-unten p{margin:0;max-width:52rem}
@media (max-width:900px){.fuss-raster{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fuss-raster{grid-template-columns:1fr}}

.video-link{display:inline-flex;align-items:center;gap:.75rem;padding:.45rem .9rem .45rem .45rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.95rem;color:var(--tinte);transition:background .3s var(--weich)}
.video-link:hover{background:rgba(21,19,15,.05)}
.spiel-klein{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(184,144,69,.55);background:var(--weiss);transition:transform .5s var(--feder)}
.spiel-klein svg{width:14px;height:14px;fill:var(--ocker-tief);margin-left:2px}
.video-link:hover .spiel-klein{transform:scale(1.06)}
.punkt-linie{width:28px;height:1px;background:var(--ocker);flex:0 0 28px;margin-top:.6rem;align-self:flex-start}
.beleg-ikon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--weiss);color:var(--ocker);box-shadow:inset 0 0 0 1px var(--linie)}
.beleg-ikon svg{width:28px;height:28px}
.abschluss ul:not(.eckdaten){list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.4rem}
.abschluss ul:not(.eckdaten) li{color:#B8AE9F;font-size:.95rem;padding-left:1.2rem;position:relative}
.abschluss ul:not(.eckdaten) li::before{content:"";position:absolute;left:0;top:.75em;width:.6rem;height:1px;background:var(--ocker)}
.abschluss .eckdaten a,.abschluss .klein-hinweis a{text-decoration:none}
.abschluss .klein-hinweis{color:#8F8577!important}
.dunkel .klein-hinweis a{color:#F4EEE3}
.hero .knoepfe{gap:1rem}
.art-kat{display:block;font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ocker-tief);margin-bottom:.9rem}
.lesetext .schaubild ol{counter-reset:none}
.lesetext .schaubild li{padding-left:0;margin:0}
.lesetext .schaubild li::before{display:none}
/* Formular immer hell, auch in dunklen Bändern */
.dunkel .formular{background:rgba(244,238,227,.06);box-shadow:inset 0 0 0 1px rgba(244,238,227,.1)}
.dunkel .formular>.kern{background:var(--weiss);color:var(--text)}
.dunkel .formular .lbl,.dunkel .formular label{color:var(--tinte)}
.dunkel .formular a:not(.knopf){color:var(--ocker-tief)}
.dunkel .formular .knopf{--k-bg:var(--tinte);--k-fg:#fff;--k-ikon:rgba(255,255,255,.14)}
.dunkel .formular h3{color:var(--tinte)}
.dunkel .formular .vorzeile{color:var(--ocker-tief);background:var(--ocker-hauch)}

/* ------------------------------------------------ Startseite: Überschrift Wort für Wort
   Einmaliger, dezenter Ablauf von rund zweieinhalb Sekunden, danach Stillstand. Bei reduzierter Bewegung sofort sichtbar. */
.h1-anim .w,.h1-anim .x,.h1-anim .b{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  html.js .h1-anim .w{opacity:0;transform:translateY(.18em);filter:blur(2px);
    animation:h1-ein .9s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:calc(var(--i) * 60ms + 150ms)}
  /* „in Ruhe“: nur etwas langsamer als der Rest */
  html.js .h1-anim .w.langsam{animation-duration:1.5s}
  /* ruhige Stelle der Überschrift: gleichmäßiges Einblenden ohne Bewegung */
  html.js .h1-anim .w.leise{transform:none;filter:none;animation:h1-leise 1.4s cubic-bezier(.4,0,.2,1) 1.05s forwards}
}
@keyframes h1-ein{to{opacity:1;transform:none;filter:none}}
@keyframes h1-leise{to{opacity:1}}
.h1-anim .ruhe{white-space:nowrap}

/* ------------------------------------------------ Variante B: Hero mit großem Foto und Wegweiser */
.hero-b{position:relative;overflow:hidden;min-height:min(100svh,980px);display:flex;align-items:flex-end;padding:clamp(7.5rem,12vw,9rem) 0 clamp(2.5rem,5vw,4rem);isolation:isolate}
.hb-bild{position:absolute;inset:0;z-index:-2}
.hb-bild img{width:100%;height:100%;object-fit:cover;object-position:74% 34%}
.hb-schleier{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(251,248,243,.97) 0%,rgba(251,248,243,.94) 30%,rgba(251,248,243,.78) 42%,rgba(251,248,243,.25) 58%,rgba(251,248,243,0) 72%),
             linear-gradient(0deg,rgba(40,28,12,.28) 0%,rgba(40,28,12,0) 35%)}
.hb-innen{width:100%;display:grid;grid-template-columns:minmax(0,560px) 1fr;grid-template-areas:"text ." "ww .";gap:2rem}
.hb-text{grid-area:text}
.hero-b h1{font-size:clamp(2.8rem,6vw,5rem);line-height:1.02;margin-bottom:1.2rem}
.hero-b .lead{font-size:clamp(1.05rem,1.3vw,1.18rem);line-height:1.7;color:#3F382F;margin:0 0 1.8rem;max-width:34rem}
.hero-b .knoepfe{margin-bottom:1.4rem}
.hero-b .knopf.zwei{background:rgba(255,255,255,.6)}
.haken{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.haken li{position:relative;padding-left:1.7rem;font-size:.95rem;color:#4A433A}
.haken li::before{content:"";position:absolute;left:.15rem;top:.45em;width:.7rem;height:.38rem;border-left:1.6px solid var(--ocker);border-bottom:1.6px solid var(--ocker);transform:rotate(-45deg)}
.ww{grid-area:ww;max-width:620px;background:rgba(251,248,243,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ww>.kern{position:relative;overflow:hidden;padding:clamp(1.4rem,2.6vw,2rem)}
.ww-balken{position:absolute;top:0;left:0;right:0;height:3px;background:var(--sand-tief)}
.ww-balken i{display:block;height:100%;background:var(--ocker);transform-origin:left;transform:scaleX(.33);transition:transform .6s var(--feder)}
.ww-schritt{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-tief);margin:.3rem 0 .4rem}
.ww h2{font-size:clamp(1.35rem,2vw,1.65rem);margin:0 0 1.1rem}
.ww-wahl{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.3rem}
.ww-wahl label{display:flex;align-items:center;gap:.7rem;min-height:50px;padding:.6rem 1rem;border-radius:999px;background:var(--papier);box-shadow:inset 0 0 0 1px rgba(21,19,15,.12);cursor:pointer;font-size:.93rem;line-height:1.3;transition:box-shadow .25s,background .25s}
/* 29.10.2026: Antworten färben sich beim Darüberfahren warm ein, der Punkt deutet die Auswahl an (Dustin); nur bei Maus, nicht beim Tippen */
@media (hover:hover){
  .ww-wahl label:hover{background:rgba(184,144,69,.16);box-shadow:inset 0 0 0 1px rgba(184,144,69,.8)}
  .ww-wahl label:hover .punkt{box-shadow:inset 0 0 0 1.5px var(--ocker)}
  .ww-wahl label:hover .punkt::after{transform:scale(.5)}
  [data-theme="dark"] .ww-wahl label:hover{background:rgba(201,162,88,.2)}
}
.ww-wahl input{position:absolute;opacity:0;pointer-events:none}
.ww-wahl .punkt{flex:0 0 18px;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #C9BEAC;position:relative;transition:box-shadow .2s}
.ww-wahl .punkt::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ocker);transform:scale(0);transition:transform .25s var(--feder)}
.ww-wahl label:has(input:checked){background:var(--ocker-hauch);box-shadow:inset 0 0 0 1.5px var(--ocker)}
.ww-wahl input:checked+.punkt{box-shadow:inset 0 0 0 1.5px var(--ocker)}
.ww-wahl input:checked+.punkt::after{transform:scale(1)}
.ww-wahl input:focus-visible+.punkt{outline:2px solid var(--ocker);outline-offset:3px}
.ww-fuss{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ww-fuss small{font-size:.8rem;color:var(--leise);max-width:24em;line-height:1.45}
.ww-fuss .knopf{min-height:48px}
.ww-fuss .knopf:disabled{opacity:.35;cursor:not-allowed}
.ww-hinweis{font-size:.95rem;color:var(--leise);margin:0 0 1.2rem}
.ww-skala{position:relative;padding-top:2.6rem;margin-bottom:1.4rem}
.ww-skala output{position:absolute;top:0;left:0;font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--ocker-tief)}
.ww-spiegel{font-size:1.05rem;margin:0 0 .9rem}
@media (max-width:900px){
  .hero-b{min-height:auto;display:block;padding-top:6.8rem}
  .hb-bild{position:relative;inset:auto;height:56vw;max-height:420px;margin:-6.8rem 0 0;z-index:0}
  .hb-bild img{object-position:62% 30%}
  .hb-schleier{display:none}
  .hb-innen{grid-template-columns:1fr;grid-template-areas:"text" "ww";margin-top:-3.2rem;position:relative}
  .hb-text{background:var(--papier);border-radius:28px 28px 0 0;padding-top:2rem}
  .ww{background:var(--weiss)}
  .ww-wahl{grid-template-columns:1fr}
}

/* Szenen zum Wiedererkennen */
/* 29.10.2026: Auswahl „Was beschäftigt Sie?“ (Dustin: bessere Darstellung, jeder Button einmal kurz ein Schein, „Etwas anderes“ erst danach und mittig).
   Fünf Kacheln mit feinem Liniensymbol, mittig. Sobald die Reihe ganz zu sehen ist (wegweiser.js setzt „glanz“), läuft über jede Kachel nacheinander
   ein warmer Lichtschein mit leichtem Leuchten am Rand, danach erscheint „Etwas anderes“. Ohne Skript oder bei „Bewegung reduzieren“ ist alles gleich da. */
.kacheln{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;max-width:60rem;margin:0 auto;--schein:rgba(184,144,69,.2)}
[data-theme="dark"] .kacheln{--schein:rgba(217,184,110,.22)}
.kachel{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;width:9.6rem;min-height:8.2rem;padding:1.2rem .8rem 1.1rem;
  font:inherit;font-weight:700;font-size:1rem;line-height:1.25;color:var(--tinte);cursor:pointer;background:var(--weiss);border:0;border-radius:22px;
  box-shadow:inset 0 0 0 1px var(--linie);transition:box-shadow .35s,transform .5s var(--feder)}
.kachel svg{width:34px;height:34px;fill:none;stroke:var(--ocker);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--feder)}
@media (hover:hover){.kachel:hover{box-shadow:inset 0 0 0 1px rgba(184,144,69,.6),var(--schatten);transform:translateY(-3px)}}
@media (hover:hover){.kachel:hover svg{transform:translateY(-2px) scale(1.06)}}
.kachel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 35%,var(--schein) 50%,transparent 65%) no-repeat;background-size:260% 100%}
.kacheln.glanz .kachel{animation:kachel-leuchten .9s calc(.2s + var(--i) * .2s) var(--weich) both}
.kacheln.glanz .kachel::after{animation:kachel-schein .9s calc(.2s + var(--i) * .2s) var(--weich) both}
@keyframes kachel-schein{0%{opacity:1;background-position:130% 0} 85%{opacity:1} 100%{opacity:0;background-position:-30% 0}}
@keyframes kachel-leuchten{45%{box-shadow:inset 0 0 0 1px rgba(184,144,69,.6),0 0 0 5px rgba(184,144,69,.12),0 16px 30px -16px rgba(60,42,12,.3)}}
.kachel-anders-zeile{display:flex;justify-content:center;margin-top:2.4rem}
/* Handschriftlicher Hinweis rechts unten (Dustin 29.10.2026): Pfeil zeigt auf die Kacheln, „Klick mich!“ schreibt sich nach dem Lichtschein Strich für Strich */
.kacheln{position:relative}
.klick-mich{position:absolute;right:0;top:100%;width:clamp(170px,21vw,246px);margin-top:.1rem;pointer-events:none;fill:none;stroke:var(--ocker-tief);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.js .kacheln.bereit:not(.glanz) .klick-mich{opacity:0}
.kacheln.glanz .klick-pfeil{stroke-dasharray:1;animation:klick-zeichnen .55s 2s var(--weich) both}
.kacheln.glanz .klick-spitze{stroke-dasharray:1;animation:klick-zeichnen .16s 2.5s linear both}
.kacheln.glanz .klick-schrift{stroke-dasharray:1;animation:klick-zeichnen calc(var(--l) * 1.4s) calc(2.7s + var(--a) * 1.4s) linear both}
/* Unsichtbar bis zum eigenen Einsatz, sonst zeigen die runden Linienenden vorab kleine Punkte */
@keyframes klick-zeichnen{from{stroke-dashoffset:1;opacity:0} 1%{opacity:1} to{stroke-dashoffset:0;opacity:1}}
@media (max-width:760px){
  .kachel-anders-zeile{margin-top:5.4rem}
  .klick-mich{width:176px;right:.2rem}
}
.kachel-anders{font:inherit;font-weight:700;font-size:.95rem;color:var(--ocker-tief);background:transparent;border:0;border-radius:999px;padding:.8rem 1.5rem;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(184,144,69,.5);transition:background .3s,box-shadow .3s}
@media (hover:hover){.kachel-anders:hover{background:var(--ocker-hauch);box-shadow:inset 0 0 0 1px rgba(184,144,69,.8)}}
.js .kacheln.bereit:not(.glanz) + .kachel-anders-zeile .kachel-anders{opacity:0}
.kacheln.glanz + .kachel-anders-zeile .kachel-anders{animation:anders-an .7s 1.45s var(--feder) both}
@keyframes anders-an{from{opacity:0;transform:translateY(10px)}}
@media (max-width:760px){
  .kachel{width:calc(50% - .4rem);min-height:7rem;padding:1rem .6rem}
  .kachel svg{width:30px;height:30px}
}
.ek-liste{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ek-liste li{background:var(--weiss);border-radius:22px;padding:1.5rem 1.6rem;box-shadow:inset 0 0 0 1px var(--linie);font-family:var(--serif);font-size:1.2rem;line-height:1.4;color:var(--tinte);
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--weich),transform .9s var(--feder)}
.ek-liste li.da{opacity:1;transform:none}
.ek-trost{max-width:46rem;font-size:1.08rem;margin:0 0 1.6rem}
@media (max-width:820px){.ek-liste{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ek-liste li{opacity:1;transform:none}}
/* Variante B: Feinschliff erster Bildschirm */
.hero-b{padding-top:clamp(6.5rem,10vw,7.6rem)}
.hero-b h1{font-size:clamp(2.6rem,4.6vw,4.1rem);margin-bottom:1rem}
.hero-b .vorzeile{margin-bottom:1.1rem}
.hero-b .lead{margin-bottom:1.5rem}
.hb-innen{gap:1.6rem}
@media (max-width:900px){
  .hero-b{padding-top:0}
  .hb-bild{margin:0;height:82vw;max-height:520px}
  .hb-bild img{object-position:50% 22%}
  .hb-innen{margin-top:-2.4rem}
  .hb-text{padding-top:1.8rem}
}
@media (max-width:900px){
  .hb-bild{margin:86px var(--rand) 0;height:74vw;max-height:480px;border-radius:26px;overflow:hidden}
  .hb-bild img{object-position:48% 16%}
  .hb-innen{margin-top:0}
  .hb-text{background:none;border-radius:0;padding-top:1.6rem}
}
/* Variante B: „Etwas anderes“ als Zwischenschritt */
.ek-wege{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}
.ek-weg .kern{padding:1.6rem 1.6rem 1.7rem;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.ek-weg :is(h3,h4){font-size:1.3rem;margin:.2rem 0 .5rem}
.ek-weg h4{font-family:var(--serif);font-weight:450;letter-spacing:-.012em;line-height:1.25}
.ek-weg p{font-size:.96rem;color:var(--leise);margin:0 0 1.2rem;flex:1}
.ek-weg .knopf{margin-top:auto}
.ek-klein{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-tief)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.chip{display:inline-block;padding:.42rem .8rem;border-radius:999px;background:var(--papier);box-shadow:inset 0 0 0 1px rgba(21,19,15,.12);font-size:.86rem;text-decoration:none;color:var(--tinte);transition:box-shadow .25s,background .25s}
@media (hover:hover){.chip:hover{background:var(--ocker-hauch);box-shadow:inset 0 0 0 1px rgba(184,144,69,.6)}}
.ek-termin{margin:0 0 1.2rem}
.ek-termin p{margin:0 0 .8rem;font-weight:700}
@media (max-width:900px){.ek-wege{grid-template-columns:1fr}}
/* „Ohne Anruf“ als hervorgehobener Schritt */
.ek-kontakt{background:rgba(184,144,69,.18);box-shadow:inset 0 0 0 1px rgba(184,144,69,.45)}
.ek-kontakt>.kern{background:var(--nacht)!important;box-shadow:0 30px 60px -30px rgba(21,19,15,.55)!important;position:relative;overflow:hidden}
.ek-kontakt>.kern::before{content:"";position:absolute;width:320px;aspect-ratio:1;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(closest-side,rgba(184,144,69,.3),rgba(184,144,69,0));pointer-events:none}
.ek-kontakt :is(h3,h4){color:#F7F2E8}
.ek-kontakt p{color:#C9C0B2}
.ek-kontakt .ek-klein{color:var(--ocker)}
.ek-person{display:flex;align-items:center;gap:.8rem;margin:0 0 1.3rem;font-size:.86rem;color:#B8AE9F;line-height:1.35}
.ek-person img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 2px rgba(184,144,69,.5)}
.ek-person b{display:block;color:#F7F2E8;font-size:.95rem}
@media (min-width:901px){.ek-wege{align-items:stretch}.ek-kontakt{transform:translateY(-10px)}}
/* Reflexionshilfe Variante B: Mehrwert im Ergebnis */
.ref-erkl{margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--linie)}
.ref-erkl h3,.ref-vorbereitung h3{font-size:1.35rem;margin:0 0 .6rem}
.ref-erkl>p,.ref-vorbereitung>p{color:var(--leise);font-size:.98rem}
.ref-karten{display:grid;gap:.8rem;margin-top:1rem}
.ref-karte{padding:1.3rem 1.4rem;border-radius:20px;background:var(--papier);box-shadow:inset 0 0 0 1px rgba(184,144,69,.35)}
.ref-karte h4{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin:0 0 .4rem}
.ref-karte p{margin:0 0 .7rem;font-size:.97rem;color:var(--text)}
.ref-vorbereitung{margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--linie)}
.ref-vorbereitung .hilfe{display:block;font-size:.84rem;color:var(--leise);margin-top:.4rem}
.ref-passend{margin-top:1.8rem}
@media print{.ref-karte{box-shadow:none;border:1px solid #ccc}#refZiel{border:1px solid #999}}
/* Reflexionshilfe Variante B: Übersicht vorab senden */
.ref-senden{margin-top:2.4rem;background:rgba(184,144,69,.18)!important;box-shadow:inset 0 0 0 1px rgba(184,144,69,.45)!important}
.ref-senden>.kern{background:var(--nacht)!important;box-shadow:0 30px 60px -30px rgba(21,19,15,.55)!important;position:relative;overflow:hidden}
.ref-senden>.kern::before{content:"";position:absolute;width:340px;aspect-ratio:1;right:-150px;top:-170px;border-radius:50%;background:radial-gradient(closest-side,rgba(184,144,69,.3),rgba(184,144,69,0));pointer-events:none}
.ref-senden h3{font-size:1.45rem;margin:.7rem 0 .6rem}
.ref-senden .rs-text{color:#C9C0B2}
.ref-senden .rs-inhalt{color:#E8DFD0;font-size:.92rem;padding:.85rem 1.05rem;border-radius:14px;background:rgba(244,238,227,.06);box-shadow:inset 0 0 0 1px rgba(244,238,227,.1);margin:1.1rem 0 1.4rem}
.ref-senden #refSendForm{margin-top:.4rem}
.ref-senden .formular{margin-top:0}
/* Einwilligung: Häkchen und Text nebeneinander, normale Schrift (die allgemeine .feldgruppe-label-Regel war stärker) */
.feldgruppe label.einwilligung{display:flex;font-weight:400;font-size:.88rem;line-height:1.5;color:var(--leise);margin-bottom:0}
.dunkel .formular label.einwilligung{color:var(--leise)}
@media (max-width:640px){
  .ref-senden{margin-inline:-.75rem}
  .ref-senden>.kern{padding:1.4rem 1.05rem}
  .ref-senden .formular>.kern{padding:1.3rem 1rem}
}
/* Variante B: Wegweiser im ersten Bildschirm, Anfrage im Kasten, Info-Karte */
.hero-b{padding:clamp(6.2rem,9vw,7rem) 0 clamp(1.6rem,3vw,2.4rem)}
.hero-b h1{font-size:clamp(2.6rem,4.2vw,3.7rem)}
.hero-b .lead{font-size:clamp(1.02rem,1.2vw,1.1rem);margin-bottom:0}
.hb-innen{grid-template-areas:"text ." "ww info";gap:1.4rem 2rem;align-items:end}
.hb-info{grid-area:info;justify-self:end;max-width:340px;padding:1.2rem 1.4rem;border-radius:22px;background:rgba(251,248,243,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 20px 40px -24px rgba(40,28,12,.45)}
.hb-info .haken li{font-size:.9rem}
.hb-tel{margin:.8rem 0 0;padding-top:.8rem;border-top:1px solid var(--linie);font-size:.9rem;color:#4A433A}
.hb-tel a{font-weight:700;color:var(--tinte);text-decoration:none;white-space:nowrap}
.ww>.kern{padding:clamp(1.2rem,2.2vw,1.7rem)}
.ww h2{margin-bottom:.9rem}
.ww-wahl{margin-bottom:1rem}
.ww-wahl label{min-height:46px}
.ww-mit{font-size:.95rem;color:var(--leise);margin:-.3rem 0 1rem}
.ww-felder{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.ww-anfrage .feldgruppe{margin-bottom:1rem}
.ww-anfrage .einwilligung{font-size:.8rem}
.ww-direkt{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;line-height:1.5;color:#3F382F;margin:0 0 1rem;padding:.75rem .9rem;border-radius:14px;background:var(--ocker-hauch)}
.ww-direkt svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:var(--ocker-tief);stroke-width:1.6;margin-top:.05rem}
.ww-notfall{font-size:.76rem;line-height:1.5;color:var(--leise);margin:1rem 0 0}
.ww-anfrage .danke h2{margin-bottom:.8rem}
@media (max-width:1180px){
  .hb-innen{grid-template-areas:"text ." "ww ." "info .";align-items:start}
  .hb-info{justify-self:start;max-width:620px}
}
@media (max-width:900px){
  .hb-bild{height:50vw;max-height:300px}
  .hb-bild img{object-position:48% 18%}
  .hb-text{padding-top:1.3rem}
  .hero-b h1{font-size:clamp(2.3rem,9vw,2.8rem);margin-bottom:.8rem}
  .hero-b .vorzeile{margin-bottom:.8rem}
  .hero-b .lead{font-size:1rem;line-height:1.6}
  .hb-innen{grid-template-areas:"text" "ww" "info";gap:1.2rem}
  .hb-info{max-width:none;background:var(--weiss)}
  .ww-wahl{grid-template-columns:1fr 1fr;gap:.45rem}
  .ww-wahl label{min-height:52px;padding:.5rem .75rem;gap:.5rem;font-size:.86rem;border-radius:18px}
  .ww-wahl .punkt{flex-basis:14px;width:14px;height:14px}
  .ww-wahl .punkt::after{inset:3px}
  .ww-felder{grid-template-columns:1fr}
}
.hb-info{max-width:360px}
@media (max-width:900px){
  .hero-b{padding-top:0}
  .hb-bild{height:44vw;max-height:280px}
}
@media (max-width:440px){.hb-ort{display:none}}
/* Variante B: Themenkarte über der Info-Karte, erscheint mit dem Anfrageschritt */
.hb-seite{grid-area:info;justify-self:end;width:100%;max-width:360px;display:flex;flex-direction:column;gap:.9rem}
.hb-seite .hb-info{max-width:none;width:100%}
.hb-thema{position:relative;display:block;overflow:hidden;padding:1.25rem 4rem 1.3rem 1.4rem;border-radius:22px;text-decoration:none;color:#C9C0B2;
  background:var(--nacht);box-shadow:inset 0 0 0 1px rgba(184,144,69,.45),0 26px 50px -26px rgba(21,19,15,.6);transition:transform .5s var(--feder),box-shadow .3s}
.hb-thema::before{content:"";position:absolute;width:260px;aspect-ratio:1;right:-120px;top:-140px;border-radius:50%;background:radial-gradient(closest-side,rgba(184,144,69,.32),rgba(184,144,69,0));pointer-events:none}
.hb-thema:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--ocker),0 30px 56px -26px rgba(21,19,15,.7)}
.hb-thema:not([hidden]){animation:themaEin .8s var(--feder) both}
@keyframes themaEin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hb-thema-vor{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-hell);margin-bottom:.45rem}
.hb-thema-titel{display:block;font-family:var(--serif);font-size:1.45rem;line-height:1.2;color:#F7F2E8;margin-bottom:.5rem}
.hb-thema-titel em{font-style:italic;color:var(--ocker-hell)}
.hb-thema-text{display:block;font-size:.86rem;line-height:1.5}
.hb-thema-pfeil{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ocker)}
.hb-thema-pfeil svg{width:16px;height:16px;fill:none;stroke:var(--tinte);stroke-width:2}
@media (prefers-reduced-motion:reduce){.hb-thema:not([hidden]){animation:none}}
@media (max-width:1180px){.hb-seite{justify-self:start;max-width:620px}}
@media (max-width:900px){.hb-seite{max-width:none}}
.hb-seite{max-width:420px}
.hb-thema-titel{font-size:1.38rem}
/* Themenkarte: Lesegröße statt Kleingedrucktes (Dustin, 11.10.) */
.hb-seite{max-width:470px}
.hb-thema{padding:1.4rem 4.4rem 1.5rem 1.6rem}
.hb-thema-vor{font-size:.75rem;margin-bottom:.55rem}
.hb-thema-titel{font-size:1.6rem;margin-bottom:.6rem}
.hb-thema-text{font-size:1rem;line-height:1.6;color:#E8DFD0}
.hb-thema-pfeil{width:42px;height:42px;right:1.25rem}
.hb-info .haken li{font-size:.95rem}
.hb-tel{font-size:.95rem}
@media (max-width:900px){.hb-thema{padding-right:4rem}}
.hb-thema-text{font-size:1.0625rem}
/* Variante B: Kontaktfenster, schwebendes Porträt rechts unten */
.vorschau-band{right:auto;left:14px}
.kf{position:fixed;right:20px;bottom:20px;z-index:72;display:flex;flex-direction:column;align-items:flex-end;gap:.9rem;transform:translateY(calc(100% + 40px));transition:transform .7s var(--feder)}
.kf.sichtbar{transform:none}
.kf-knopf{display:flex;align-items:center;gap:.8rem;padding:0;border:0;background:none;cursor:pointer;font:inherit;order:2}
.kf-knopf img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 20%;display:block;box-shadow:0 0 0 3px var(--papier),0 0 0 4.5px var(--ocker),0 18px 36px -14px rgba(21,19,15,.6);transition:transform .5s var(--feder)}
.kf-knopf:hover img{transform:translateY(-2px) scale(1.03)}
.kf-knopf:focus-visible{outline:none}.kf-knopf:focus-visible img{box-shadow:0 0 0 3px var(--papier),0 0 0 5.5px var(--tinte)}
.kf-knopf-text{font-size:.9rem;font-weight:700;color:var(--tinte);background:rgba(251,248,243,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:.6rem 1rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--linie),0 12px 28px -14px rgba(21,19,15,.5);white-space:nowrap;transition:opacity .3s,transform .4s var(--feder)}
.kf.kf-offen .kf-knopf-text{opacity:0;transform:translateX(8px);pointer-events:none}
.kf-fenster{order:1;width:min(400px,calc(100vw - 24px));max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain;border-radius:26px;background:var(--weiss);color:var(--text);
  box-shadow:0 0 0 1px rgba(21,19,15,.08),0 40px 80px -30px rgba(21,19,15,.5);opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;transition:opacity .3s,transform .5s var(--feder)}
.kf-fenster.da{opacity:1;transform:none}
.kf-kopf{display:flex;align-items:center;gap:.9rem;padding:1.2rem 1.3rem 1.1rem;background:var(--nacht);color:#C9C0B2;position:relative;overflow:hidden}
.kf-kopf::before{content:"";position:absolute;width:240px;aspect-ratio:1;right:-110px;top:-130px;border-radius:50%;background:radial-gradient(closest-side,rgba(184,144,69,.32),rgba(184,144,69,0));pointer-events:none}
.kf-kopf img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 2px rgba(184,144,69,.6);flex:0 0 56px;position:relative}
.kf-kopf>div{flex:1;min-width:0;position:relative}
.kf-vor{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-hell);margin:0 0 .15rem}
.kf-kopf h2{font-size:1.35rem;margin:0;color:#F7F2E8;line-height:1.15}
.kf-rolle{font-size:.84rem;margin:.1rem 0 0;color:#C9C0B2}
.kf-zu{position:absolute;right:.8rem;top:.8rem;width:34px;height:34px;border-radius:50%;border:0;background:rgba(244,238,227,.1);color:#F4EEE3;cursor:pointer;display:grid;place-items:center}
.kf-zu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.kf-zu:hover{background:rgba(244,238,227,.2)}
.kf-direkt{display:flex;gap:.7rem;align-items:flex-start;margin:0;padding:.9rem 1.3rem;background:var(--ocker-hauch);font-size:.9rem;line-height:1.5;color:#3F382F}
.kf-direkt svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:var(--ocker-tief);stroke-width:1.6;margin-top:.05rem}
.kf-koerper{padding:1rem 1.3rem 1.3rem}
.kf-wege{display:grid;gap:.6rem}
.kf-weg{display:flex;align-items:center;gap:.9rem;width:100%;padding:.9rem 1rem;border-radius:18px;border:0;background:var(--papier);box-shadow:inset 0 0 0 1px var(--linie);text-align:left;text-decoration:none;color:var(--tinte);font:inherit;cursor:pointer;transition:box-shadow .25s,transform .4s var(--feder)}
.kf-weg:hover{box-shadow:inset 0 0 0 1px rgba(184,144,69,.6),var(--schatten);transform:translateY(-1px)}
.kf-weg>span:nth-child(2){flex:1;min-width:0}
.kf-weg b{display:block;font-family:var(--serif);font-weight:500;font-size:1.12rem;line-height:1.2}
.kf-weg small{display:block;font-size:.84rem;color:var(--leise);line-height:1.4;margin-top:.1rem}
.kf-ikon{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--weiss);box-shadow:inset 0 0 0 1px rgba(184,144,69,.45)}
.kf-ikon svg{width:20px;height:20px;fill:none;stroke:var(--ocker-tief);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kf-pfeil{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ocker-hauch)}
.kf-pfeil svg{width:14px;height:14px;fill:none;stroke:var(--tinte);stroke-width:2}
.kf-aus{cursor:default;opacity:.85}.kf-aus:hover{transform:none;box-shadow:inset 0 0 0 1px var(--linie)}
.kf-form .feldgruppe{margin-bottom:1rem}
.kf-form .feldgruppe label,.kf-form .feldgruppe .lbl{font-size:.9rem;margin-bottom:.35rem}
.kf-form .eingabe{padding:.8rem .95rem;font-size:.98rem}
select.eingabe{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315130F' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right .95rem center;background-size:16px}
.kf-zwei{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.kf-zwei label{font-weight:400!important;color:var(--leise)!important;font-size:.86rem!important}
.kf-zwei [data-feld]:not(.ungueltig)>.fehler{display:none}
textarea.kf-notiz{min-height:84px}
.kf-form .einwilligung{font-size:.8rem}
.kf-fuss{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.2rem}
.kf-notfall{font-size:.75rem;line-height:1.5;color:var(--leise);margin:1rem 0 0}
.kf-form .danke h3{font-size:1.3rem;margin:.4rem 0 .6rem}
.kf-form .danke .kf-vor{color:var(--ocker-tief)}
@media (max-width:760px){
  .kf{right:14px;bottom:14px;gap:.7rem}
  .kf-knopf img{width:58px;height:58px}
  .kf-knopf-text{display:none}
  .kf-fenster{width:calc(100vw - 28px);max-height:calc(100vh - 100px);border-radius:22px}
  .kf-koerper{padding:.9rem 1rem 1.1rem}.kf-kopf{padding:1rem 1rem .9rem}.kf-direkt{padding:.8rem 1rem}
  .kf-zwei{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.kf,.kf-fenster,.kf-knopf img{transition:none}}
@media print{.kf{display:none!important}}
.kf-fenster{max-height:calc(100vh - 200px)}
@media (max-width:760px){.kf-fenster{max-height:calc(100vh - 200px)}}
textarea.kf-notiz{min-height:64px}
.kf-form .feldgruppe{margin-bottom:.85rem}
/* Kontaktfenster: Kopf bleibt stehen, Zurück-Pfeil unter dem X, Telefonzeile ohne Umbruch im Satz */
.kf-fenster{width:min(460px,calc(100vw - 24px))}
.kf-kopf{position:sticky;top:0;z-index:2;padding-right:4.2rem}
.kf-kopf>div{padding-right:0}
.kf-zurueck{position:absolute;right:.8rem;top:calc(.8rem + 34px + .45rem);width:34px;height:34px;border-radius:50%;border:0;background:rgba(244,238,227,.1);color:#F4EEE3;cursor:pointer;display:grid;place-items:center}
.kf-zurueck svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kf-zurueck:hover{background:rgba(244,238,227,.2)}
.kf-zurueck:focus-visible,.kf-zu:focus-visible{outline:2px solid var(--ocker);outline-offset:2px}
.kf-tel{display:flex;flex-wrap:wrap;gap:.1rem .65rem}
.kf-tel span{white-space:nowrap}
.kf-tel span:first-child{color:var(--tinte);font-weight:700}
.kf-fuss{justify-content:flex-end}
@media (max-width:760px){.kf-fenster{width:calc(100vw - 28px)}.kf-kopf{padding-right:3.6rem}}
.kf-weg small.kf-tel{display:flex;flex-wrap:wrap;gap:.1rem .65rem;align-items:baseline}
/* Notrufnummern anklickbar */
.tel-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(184,144,69,.8);text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap;font-weight:700}
.tel-link:hover{text-decoration-color:currentColor}
/* Kontaktfenster: Telefonnummer groß, Zeiten dahinter */
.kf-weg small .kf-nr{font-family:var(--serif);font-weight:500;font-size:1.55rem;line-height:1.1;color:var(--tinte);letter-spacing:.01em}
.kf-weg small.kf-tel{gap:.15rem .7rem;margin-top:.2rem}
.kf-weg small.kf-tel span:last-child{font-size:.88rem;color:var(--leise)}
.kf-weg small .kf-nr{font-size:1.42rem}
.kf-weg small.kf-tel{gap:.15rem .6rem}
/* Hero B: Kopf bleibt bei breiten Fenstern sichtbar, Beschnitt nach unten statt oben (Dustin, 11.10.) */
@media (min-width:901px){.hb-bild img{object-position:74% 6%}}
/* ab 1381 px: Bildfläche an die Textspalte gekoppelt einrücken, Dirk steht rechts neben dem Text (Dustin, 11.10.) */
@media (min-width:1381px){.hb-bild{left:calc(50% - 400px)}.hb-bild img{object-position:60% 0%}}
/* Hero B, 901 bis 1180 px (Tablet quer, kleine Laptops): Foto als Karte oben, sonst steht der Kopf hinter Leiste und Überschrift */
@media (min-width:901px) and (max-width:1180px){
  .hero-b{min-height:auto;display:block;padding:0 0 clamp(1.6rem,3vw,2.4rem)}
  .hb-bild{position:relative;inset:auto;z-index:0;margin:92px var(--rand) 0;height:44vw;max-height:430px;border-radius:26px;overflow:hidden}
  .hb-bild img{object-position:62% 14%}
  .hb-schleier{display:none}
  .hb-innen{grid-template-columns:1fr;grid-template-areas:"text" "ww" "info";margin-top:0;align-items:start}
  .hb-text{padding-top:1.8rem}
  .hb-seite{justify-self:start;max-width:620px}
  .hb-info{background:var(--weiss)}
}
/* Hero B, 1181 bis 1380 px: Bildfläche nach rechts einrücken, damit das Gesicht neben dem Text steht statt dahinter */
@media (min-width:1181px) and (max-width:1380px){.hb-bild{left:18%}.hb-bild img{object-position:60% 0%}}
/* Hero B: eingerückte Bildfläche läuft links weich ins Papier aus, keine harte Kante (Dustin, 11.10.) */
@media (min-width:1181px){
  .hb-bild{-webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 120px,#000 300px);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 120px,#000 300px)}
}
/* ================================================================ Lesetext-Bausteine (Variante B) */
.lesetext .sek-lead{font-family:var(--serif);font-size:1.32rem;line-height:1.5;color:var(--tinte);margin-bottom:1.5rem}
/* Zeichnen von Linien beim Einblenden */
.zeichne{stroke-dasharray:1;stroke-dashoffset:1}
.auf.da .zeichne{animation:zeichnen 1.8s var(--weich) .2s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes bsEin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.zeichne{stroke-dashoffset:0;animation:none!important}}
/* Kurzfassung mit Stufenmotiv */
.kurz{display:grid;grid-template-columns:1fr 220px;gap:2rem;align-items:center;padding:2rem;border-radius:26px;background:var(--weiss);box-shadow:inset 0 0 0 1px rgba(184,144,69,.35),var(--schatten)}
.kurz-lead{font-family:var(--serif);font-size:1.45rem;line-height:1.4;color:var(--tinte);margin:0 0 1rem}
.kurz-text p{font-size:1.02rem;line-height:1.7}.kurz-text p:last-child{margin:0}
.kurz-motiv{margin:0}.kurz-motiv figcaption{font-size:.8rem;color:var(--leise);text-align:center;margin-top:.4rem}
.lesetext .kurz-liste{margin:0}.lesetext .kurz-liste li{padding-left:1.8rem;margin-bottom:.7em;font-size:1.02rem}
.lesetext .kurz-liste li::before{width:.7rem;height:.38rem;border-left:1.6px solid var(--ocker);border-bottom:1.6px solid var(--ocker);background:none;transform:rotate(-45deg);top:.5em}
/* Woche: Szenen als Karten an einer Linie */
.woche{margin:1.4rem 0 2rem}
.lesetext .woche-liste{list-style:none;margin:0;padding:1.5rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:relative;counter-reset:none}
.woche-liste::before{content:"";position:absolute;left:16.6%;right:16.6%;top:5px;height:1px;background:var(--ocker);opacity:.45}
.lesetext .woche-liste li{position:relative;padding:1.3rem 1.3rem 1.2rem;margin:0;border-radius:22px;background:var(--sand)}
.lesetext .woche-liste li::before{content:"";position:absolute;left:50%;top:-19px;width:11px;height:11px;border-radius:50%;background:var(--ocker);transform:translateX(-50%)}
.woche-tag{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-tief);margin-bottom:.5rem}
.woche-liste p{margin:0;font-size:.98rem;line-height:1.65}
/* Kennzahl am Rand */
.zahl{float:right;width:min(44%,250px);margin:.2rem 0 1rem 1.8rem;padding:1.2rem 1.3rem;border-radius:20px;background:var(--weiss);box-shadow:inset 0 0 0 1px rgba(184,144,69,.35)}
.zahl b{display:block;font-family:var(--serif);font-weight:500;font-size:2.7rem;line-height:1;color:var(--ocker-tief);margin-bottom:.5rem}
.zahl span{display:block;font-size:.88rem;line-height:1.5;color:var(--leise)}
.lesetext h3,.formen,.ablauf-zeit,.kurve,.kreislauf,.woche{clear:both}
/* Karten für H3-Reihen */
.formen{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0 0}
.form-karte{position:relative;padding:1.5rem 1.5rem 1.4rem;border-radius:22px;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie)}
.form-karte.auf.da{animation:bsEin .7s var(--feder) both;animation-delay:calc(var(--i,0)*90ms)}
.form-nr{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;color:var(--ocker-tief);margin-bottom:.5rem}
.lesetext .form-karte h3{margin:0 0 .6rem;font-size:1.22rem;line-height:1.25}
.form-karte h3 small{display:block;font-family:var(--sans);font-weight:400;font-size:.88rem;color:var(--leise);margin-top:.3rem;line-height:1.4}
.form-karte p{margin:0;font-size:.98rem;line-height:1.65}
/* Zwei Wege */
.zwei-wege{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0 2rem}
.zw-weg{padding:1.5rem 1.6rem;border-radius:22px}
.zw-aus{background:var(--sand);color:#5B5248}.zw-an{background:var(--nacht);color:#D9D1C4}
.zw-tag{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.45rem}
.zw-aus .zw-tag{color:var(--leise)}.zw-an .zw-tag{color:var(--ocker-hell)}
.zw-weg b{display:block;font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.2;margin-bottom:.55rem}
.zw-an b{color:#F7F2E8}.zw-weg p{margin:0;font-size:.96rem;line-height:1.65}
/* Kreislauf */
.kreislauf{margin:2rem 0 2.4rem;padding:1.8rem 1.4rem 1.4rem;border-radius:26px;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie)}
.kreis-feld{display:grid;grid-template-columns:1fr 190px 1fr;grid-template-rows:auto 190px auto;grid-template-areas:". n1 ." "n4 ring n2" ". n3 .";gap:.6rem .8rem;align-items:center;justify-items:center;max-width:720px;margin:0 auto}
.kreis-ring{grid-area:ring;width:190px;height:190px;color:var(--ocker)}
.kreis-ring text{font-family:var(--sans);font-weight:700;fill:var(--ocker-tief)}
.lesetext .kreis-schritte{display:contents;margin:0;padding:0}
.lesetext .kreis-schritte li{list-style:none;padding:.9rem 1rem;margin:0;border-radius:18px;background:var(--papier);box-shadow:inset 0 0 0 1px var(--linie);text-align:center;width:100%;max-width:230px;opacity:0;transform:translateY(10px);transition:opacity .6s var(--weich),transform .8s var(--feder);transition-delay:calc(var(--i)*.35s + .3s)}
.lesetext .kreis-schritte li::before{display:none}
.kreislauf.da .kreis-schritte li{opacity:1;transform:none}
.kreis-schritte li:nth-child(1){grid-area:n1}.kreis-schritte li:nth-child(2){grid-area:n2}.kreis-schritte li:nth-child(3){grid-area:n3}.kreis-schritte li:nth-child(4){grid-area:n4}
.kreis-schritte b{display:block;font-family:var(--serif);font-weight:500;font-size:1.08rem;line-height:1.25;color:var(--tinte)}
.kreis-schritte span{display:block;font-size:.82rem;color:var(--leise);margin-top:.2rem;line-height:1.4}
.kreislauf figcaption,.kurve figcaption{font-size:.92rem;color:var(--leise);text-align:center;margin-top:1.2rem;line-height:1.5}
/* Angstkurve */
.kurve{margin:2rem 0 2.4rem;padding:1.6rem 1.6rem 1.3rem;border-radius:26px;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie)}
.kurve svg{width:100%;height:auto;display:block}
.kurve .achse{stroke:var(--tinte);stroke-opacity:.35;stroke-width:1.2;fill:none}
.kurve .raster{stroke:var(--tinte);stroke-opacity:.1;stroke-dasharray:3 7;fill:none}
.kurve .kurve-bleiben{stroke:var(--ocker);stroke-width:3.2;fill:none;stroke-linecap:round}
.kurve .kurve-ausweichen{stroke:#6B5E4C;stroke-width:2;fill:none;stroke-linecap:round}
.auf.da .kurve-ausweichen{animation-delay:1.3s;animation-duration:.9s}
.kurve .punkt-ausweichen{fill:#6B5E4C;opacity:0;transition:opacity .4s 2.2s}.kurve .abbruch{stroke:#6B5E4C;stroke-width:2;stroke-linecap:round;fill:none;opacity:0;transition:opacity .4s 2.2s}
.auf.da .punkt-ausweichen,.auf.da .abbruch{opacity:1}
.kurve .beschriftung text{font-family:var(--sans);font-size:14px;fill:var(--tinte);opacity:0;transition:opacity .6s 1.2s}
.auf.da .beschriftung text{opacity:1}
.kurve .beschriftung .klein{font-size:12px;fill:var(--leise)}
.kurve .beschriftung .achse-text{font-size:11px;fill:var(--leise);letter-spacing:.1em;text-transform:uppercase}
.lesetext .kurve-legende{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem;font-size:.92rem;color:var(--leise);line-height:1.5}
.lesetext .kurve-legende li{padding-left:0;margin:0}.lesetext .kurve-legende li::before{display:none}
.kurve-legende i{display:inline-block;width:22px;height:3px;border-radius:2px;margin:0 .6rem .25rem 0;vertical-align:middle}
.l-bleiben{background:var(--ocker)}.l-ausweichen{background:#6B5E4C;height:2px!important}
/* Ablauf als Zeitstrahl */
.lesetext .ablauf-zeit{list-style:none;margin:1.2rem 0 0;padding:0;position:relative;counter-reset:none}
.ablauf-zeit::before{content:"";position:absolute;left:21px;top:14px;bottom:14px;width:1px;background:linear-gradient(var(--ocker),rgba(184,144,69,.15))}
.lesetext .ablauf-zeit li{display:grid;grid-template-columns:44px 1fr;gap:1.1rem;padding:0;margin:0 0 1.5rem;align-items:start}
.lesetext .ablauf-zeit li::before{display:none}
.ablauf-zeit li.auf.da{animation:bsEin .7s var(--feder) both;animation-delay:calc(var(--i,0)*70ms)}
.az-marke span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--ocker);font-family:var(--serif);font-size:1.15rem;color:var(--ocker-tief)}
.az-inhalt{background:var(--weiss);border-radius:22px;padding:1.4rem 1.6rem 1.3rem;box-shadow:inset 0 0 0 1px var(--linie);min-width:0}
.lesetext .az-inhalt h3{margin:0 0 .6rem;font-size:1.24rem;line-height:1.25}
.az-inhalt p{font-size:1.02rem;line-height:1.7}.az-inhalt p:last-child,.az-inhalt ul:last-child,.az-inhalt ol:last-child{margin-bottom:0}
/* Hinweis-Abschnitt und Termin-Karte */
.sek-hinweis{display:grid;grid-template-columns:28px 1fr;gap:1.1rem;padding:1.7rem 1.8rem;margin:0;font-size:1.02rem}
.sek-hinweis>svg{width:28px;height:28px;color:var(--ocker-tief);margin-top:.15rem}.sek-hinweis p:last-child{margin:0}
.termin-karte{display:grid;grid-template-columns:48px 1fr;gap:1.3rem;padding:1.8rem 1.9rem;border-radius:24px;background:var(--sand)}
.termin-karte>svg{width:48px;height:48px;color:var(--ocker-tief)}
.termin-karte p{font-size:1.02rem}.termin-karte .knoepfe{margin:.6rem 0 0}
@media (max-width:760px){
  .kurz{grid-template-columns:1fr;padding:1.5rem}.kurz-motiv{max-width:200px;margin:0 auto}
  .lesetext .woche-liste{grid-template-columns:1fr;padding-top:0}.woche-liste::before{display:none}.lesetext .woche-liste li::before{display:none}
  .zahl{float:none;width:100%;margin:0 0 1.2rem}
  .formen,.zwei-wege{grid-template-columns:1fr}
  .kreislauf{padding:1.4rem 1rem 1.2rem}
  .kreis-feld{display:block}.kreis-ring{display:none}
  .lesetext .kreis-schritte{display:grid;gap:.5rem}
  .lesetext .kreis-schritte li{max-width:none;position:relative}
  .lesetext .kreis-schritte li:not(:last-child)::after{content:"↓";display:block;color:var(--ocker);font-size:1.1rem;line-height:1;margin-top:.5rem}
  .kurve{padding:1.1rem 1rem 1rem}.kurve .beschriftung text:not(.achse-text){display:none}
  .lesetext .ablauf-zeit li{grid-template-columns:36px 1fr;gap:.8rem}.ablauf-zeit::before{left:17px}
  .az-marke span{width:36px;height:36px;font-size:1rem}.az-inhalt{padding:1.1rem 1.1rem 1rem}
  .sek-hinweis,.termin-karte{grid-template-columns:1fr;gap:.6rem;padding:1.3rem}
}
/* Kurzfassung: Leitsatz oben über volle Breite */
.kurz{display:block;padding:2rem 2.1rem}
.kurz .kurz-lead{font-family:var(--serif);font-size:1.5rem;line-height:1.4;color:var(--tinte);margin:0 0 1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--linie)}
.kurz-rest{display:grid;grid-template-columns:1fr 230px;gap:2rem;align-items:center}
.kurz-text p{font-size:1.02rem;line-height:1.7;margin:0 0 .9em}.kurz-text p:last-child{margin:0}
@media (max-width:760px){.kurz{padding:1.5rem}.kurz-rest{grid-template-columns:1fr}.kurz-motiv{max-width:200px;margin:0 auto}}
/* Kreislauf auf dem Handy: Knoten untereinander, Grid-Flächen aufheben */
@media (max-width:760px){
  .lesetext .kreis-schritte{display:grid;grid-template-columns:1fr;grid-template-areas:none;gap:.5rem;margin:0;padding:0}
  .lesetext .kreis-schritte li{grid-area:auto!important;max-width:none;width:100%;opacity:1;transform:none;transition:none}
  .lesetext .kreis-schritte li:not(:last-child)::after{content:"";display:block;width:1px;height:14px;margin:.7rem auto -1.3rem;background:var(--ocker)}
  .kreislauf figcaption{margin-top:1.4rem}
}
/* ================================================================ Dunkles Schema (Variante B) */
:root[data-theme="dark"]{
  --papier:#15120F;--sand:#1D1915;--sand-tief:#282219;--weiss:#1C1814;--tinte:#F4EEE3;--nacht:#231E19;
  --text:#D9D1C4;--leise:#A59B8E;--ocker:#C9A258;--ocker-zahl:#C9A258;--ocker-tief:#D9B86E;--ocker-hell:#E6D7B8;--ocker-hauch:rgba(201,162,88,.13);
  --linie:rgba(250,247,240,.12);--linie-hell:rgba(250,247,240,.14);
  --schatten:0 1px 1px rgba(0,0,0,.3),0 12px 24px -12px rgba(0,0,0,.55),0 40px 80px -40px rgba(0,0,0,.7);
  color-scheme:dark}
html.schema-wechsel *,html.schema-wechsel *::before,html.schema-wechsel *::after{transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,fill .45s ease,stroke .45s ease!important}
/* Logo */
.logo-hell{display:none}
[data-theme="dark"] .logo-dunkel{display:none}[data-theme="dark"] .logo-hell{display:block}
/* Schalter links unten */
.schema{position:fixed;left:20px;bottom:20px;z-index:72;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--weiss);color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie),0 14px 30px -14px rgba(21,19,15,.5);transition:transform .5s var(--feder),box-shadow .3s}
.schema:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(184,144,69,.6),0 18px 36px -14px rgba(21,19,15,.5)}
.schema:focus-visible{outline:2px solid var(--ocker);outline-offset:3px}
.schema svg{grid-area:1/1;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:opacity .35s,transform .6s var(--feder)}
.schema .sonne{opacity:0;transform:rotate(-90deg) scale(.6)}
.schema .mond{opacity:1;transform:none}
[data-theme="dark"] .schema .sonne{opacity:1;transform:none}
[data-theme="dark"] .schema .mond{opacity:0;transform:rotate(90deg) scale(.6)}
@media (max-width:760px){.schema{left:14px;bottom:14px;width:44px;height:44px}}
@media print{.schema{display:none!important}}
/* Vorschau-Band weicht nach oben links aus */
.vorschau-band{bottom:auto;top:88px;left:14px;right:auto}
/* Fest eingetragene Farben im dunklen Schema */
[data-theme="dark"] ::selection{background:var(--ocker);color:#15120F}
[data-theme="dark"] .kopf-leiste{background:rgba(21,18,15,.74);box-shadow:inset 0 0 0 1px rgba(250,247,240,.09),0 24px 50px -28px rgba(0,0,0,.7)}
[data-theme="dark"] .kopf.gescrollt .kopf-leiste{background:rgba(21,18,15,.92)}
[data-theme="dark"] .menue>li>a:hover,[data-theme="dark"] .menue>li>button:hover,[data-theme="dark"] .menue>li>a[aria-current]{background:rgba(250,247,240,.07)}
[data-theme="dark"] .unter{background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie),var(--schatten)}
[data-theme="dark"] .vollmenue{background:rgba(21,18,15,.97)}
[data-theme="dark"] .burger span{background:#15120F}
[data-theme="dark"] .knopf{--k-fg:#15120F;--k-ikon:rgba(0,0,0,.14)}
[data-theme="dark"] .knopf:hover{background:#E6DFD3}
[data-theme="dark"] .knopf.zwei{--k-fg:var(--tinte);--k-ring:rgba(250,247,240,.26)}
[data-theme="dark"] .knopf.zwei:hover{background:rgba(250,247,240,.07)}
[data-theme="dark"] .hero-b .knopf.zwei{background:rgba(28,24,20,.6)}
[data-theme="dark"] .dunkel .knopf{--k-fg:#15120F}
[data-theme="dark"] .dunkel .formular .knopf{--k-fg:#15120F;--k-ikon:rgba(0,0,0,.14)}
[data-theme="dark"] .rahmen{background:rgba(250,247,240,.035);box-shadow:inset 0 0 0 1px rgba(250,247,240,.07)}
[data-theme="dark"] .rahmen>.kern{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--schatten)}
[data-theme="dark"] .bild-rahmen{background:rgba(250,247,240,.04);box-shadow:inset 0 0 0 1px rgba(250,247,240,.08)}
[data-theme="dark"] .dunkel .rahmen>.kern{background:#2C2620}
[data-theme="dark"] .band.dunkel,[data-theme="dark"] .abschluss.dunkel,[data-theme="dark"] .zwischen-cta .kern,[data-theme="dark"] .hb-thema,[data-theme="dark"] .kf-kopf,[data-theme="dark"] .zw-an,[data-theme="dark"] .ek-kontakt>.kern,[data-theme="dark"] .ref-senden>.kern{box-shadow:inset 0 0 0 1px rgba(201,162,88,.28)}
[data-theme="dark"] .hero .lead,[data-theme="dark"] .seiten-kopf .lead,[data-theme="dark"] .hero-b .lead,[data-theme="dark"] .lesetext,[data-theme="dark"] .haken li,[data-theme="dark"] .hb-tel,[data-theme="dark"] .ww-direkt,[data-theme="dark"] .kf-direkt,[data-theme="dark"] .zw-aus{color:var(--text)}
[data-theme="dark"] .lesetext a:not(.knopf){text-decoration-color:rgba(217,184,110,.45)}
[data-theme="dark"] .krumen li+li::before{color:var(--leise)}
[data-theme="dark"] .ww-wahl .punkt{box-shadow:inset 0 0 0 1.5px rgba(250,247,240,.3)}
[data-theme="dark"] .ww-wahl input:checked+.punkt{box-shadow:inset 0 0 0 1.5px var(--ocker)}
[data-theme="dark"] .ww-wahl label,[data-theme="dark"] .wahl-reihe label,[data-theme="dark"] .chip{box-shadow:inset 0 0 0 1px rgba(250,247,240,.16)}
[data-theme="dark"] .eingabe{background:#241F1A;box-shadow:inset 0 0 0 1px rgba(250,247,240,.16)}
[data-theme="dark"] .eingabe:focus{background:#2B251F;box-shadow:inset 0 0 0 2px var(--ocker)}
[data-theme="dark"] .fehler{color:#E8857A}
[data-theme="dark"] .regler.leer::-webkit-slider-thumb{background:#5E554B}
[data-theme="dark"] .hb-schleier{background:linear-gradient(100deg,rgba(21,18,15,.97) 0%,rgba(21,18,15,.94) 30%,rgba(21,18,15,.8) 42%,rgba(21,18,15,.3) 58%,rgba(21,18,15,0) 72%),linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 35%)}
[data-theme="dark"] .ww{background:rgba(28,24,20,.72)}
[data-theme="dark"] .hb-info{background:rgba(28,24,20,.84);box-shadow:inset 0 0 0 1px rgba(250,247,240,.1),0 20px 40px -24px rgba(0,0,0,.7)}
[data-theme="dark"] .hb-thema-pfeil svg,[data-theme="dark"] .kf-pfeil svg{stroke:#15120F}
[data-theme="dark"] .kf-knopf-text{background:rgba(28,24,20,.92);box-shadow:inset 0 0 0 1px var(--linie),0 12px 28px -14px rgba(0,0,0,.7)}
[data-theme="dark"] .kf-fenster{box-shadow:0 0 0 1px rgba(250,247,240,.1),0 40px 80px -30px rgba(0,0,0,.8)}
[data-theme="dark"] .kreis-schritte li{background:#221D18}
[data-theme="dark"] .kurve .kurve-ausweichen,[data-theme="dark"] .kurve .abbruch{stroke:#B3A693}
[data-theme="dark"] .kurve .punkt-ausweichen,[data-theme="dark"] .l-ausweichen{fill:#B3A693;background:#B3A693}
[data-theme="dark"] .kurve .achse{stroke-opacity:.5}
[data-theme="dark"] .schaubild .p3{fill:#2A251F}[data-theme="dark"] .schaubild .p4{fill:#332C24}
[data-theme="dark"] .az-marke span,[data-theme="dark"] .kf-ikon{background:#221D18}
[data-theme="dark"] body::after{opacity:.05}
[data-theme="dark"] .fuss{background:#0E0C0A;box-shadow:inset 0 1px 0 rgba(250,247,240,.08)}
/* Vorschau: Hinweis unter Senden-Knöpfen */
.versand-hinweis{margin:.8rem 0 0;font-size:.85rem;line-height:1.4}

/* ================================================================ Korrekturen nach der Prüfung vom 13.10.2026 */
.anker{display:block;height:0;overflow:hidden}
/* Dunkles Schema: Flächen und Knöpfe, deren Farben fest eingetragen waren */
[data-theme="dark"] .feld.anlass .kern{background:var(--nacht);box-shadow:inset 0 0 0 1px rgba(201,162,88,.28),var(--schatten)}
[data-theme="dark"] .dunkel .knopf.zwei{--k-fg:#F4EEE3;--k-ring:rgba(244,238,227,.28);--k-ikon:rgba(244,238,227,.08)}
[data-theme="dark"] .sprung{color:#15120F}
[data-theme="dark"] .kf-pfeil svg{stroke:var(--tinte)}
[data-theme="dark"] .video-karte .spiel svg{fill:#15120F}
/* Fußzeile nicht unter den festen Knöpfen (Farbschema links, Porträt rechts) verstecken */
body:has(.schema) .fuss{padding-bottom:5.5rem}
/* Reflexionshilfe: Wert („6 von 10“) in einer Zeile; auf dem Handy steht er über den Randbeschriftungen.
   Nur dort, der Kostenrechner nutzt dieselbe Leiste für einen langen Text. */
#refFragen .regler-marken .anzeige{white-space:nowrap}
@media (max-width:560px){
  #refFragen .regler-marken{flex-wrap:wrap;row-gap:.2rem}
  #refFragen .regler-marken .anzeige{order:-1;flex:1 0 100%;text-align:center}
  #refFragen .regler-marken>span:not(.anzeige){flex:1 1 0;min-width:0}
}
/* Kostenrechner: Aufstellung ohne die Aufzählungsstriche aus dem Fließtext */
.lesetext ul.aufstellung li{padding-left:0}
.lesetext ul.aufstellung li::before{display:none}
/* Kontaktfenster: fokussierte Felder nicht unter dem klebenden Fensterkopf verstecken */
.kf-fenster{scroll-padding-top:150px}
@media (max-width:760px){.kf-fenster{scroll-padding-top:140px}}

.buch-hinweis{margin:.7rem 0 0;font-size:.85rem;line-height:1.45;color:var(--leise)}
.buch-hinweis a{color:inherit}
.dunkel .buch-hinweis{color:#B8AE9F}

/* Startseite: Gruppen der Schwerpunkte und einklappbare Schritte (Dustin 13.10.2026) */
.felder-gruppe{margin:2.4rem 0 1rem;font-size:1.05rem;letter-spacing:.04em;color:var(--ocker-tief)}
.felder-gruppe:first-of-type{margin-top:1.6rem}
.schritt-mehr{margin-top:.8rem}
.schritt-mehr summary{cursor:pointer;font-weight:700;font-size:.92rem;color:var(--ocker-tief);list-style:none}
.schritt-mehr summary::-webkit-details-marker{display:none}
.schritt-mehr summary::after{content:" +"}
.schritt-mehr[open] summary::after{content:" \2212"}
.schritt-mehr p{margin-top:.7rem}

/* Video-Platzhalter im Querformat 16:9 mit Text und Knopf daneben (Dustin 28.10.2026) */
.video-band{padding-block:clamp(2.2rem,5vw,4rem)}
.video-zeile{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.video-zeile.umgekehrt{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.video-zeile.umgekehrt .video-platz{order:2}
.video-platz{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;display:grid;place-items:center;isolation:isolate;
  background:radial-gradient(120% 90% at 20% 15%,#2B261F 0%,#14120F 62%),#14120F;
  box-shadow:0 28px 60px -28px rgba(21,19,15,.55),0 0 0 1px rgba(184,144,69,.28) inset}
.video-platz::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background:linear-gradient(115deg,transparent 0 46%,rgba(184,144,69,.18) 46.2% 46.6%,transparent 46.8% 100%),
             linear-gradient(115deg,transparent 0 52%,rgba(184,144,69,.12) 52.2% 52.5%,transparent 52.7% 100%)}
.video-play{position:relative;width:clamp(4.4rem,9vw,6rem);aspect-ratio:1;border-radius:50%;border:0;display:grid;place-items:center;cursor:default;
  background:linear-gradient(145deg,#C9A35A,#B89045 55%,#8A6C34);color:#14120F;
  box-shadow:0 14px 34px -10px rgba(184,144,69,.7),0 0 0 8px rgba(184,144,69,.16);transition:transform .25s ease,box-shadow .25s ease}
.video-play svg{width:42%;height:42%;fill:currentColor;margin-left:7%}
.video-play::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1.5px solid rgba(184,144,69,.45);animation:video-puls 2.6s ease-out infinite}
.video-platz:hover .video-play{transform:scale(1.06);box-shadow:0 18px 40px -10px rgba(184,144,69,.8),0 0 0 10px rgba(184,144,69,.2)}
.video-marke{position:absolute;top:1rem;left:1rem;padding:.3rem .75rem;border-radius:99px;background:#F4EFE6;color:#7C5F29;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.video-dauer{position:absolute;right:1rem;bottom:.9rem;color:#F4EFE6;opacity:.7;font-size:.78rem;letter-spacing:.06em}
.video-text :is(h2,h3){font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:.9rem}
.video-text p{color:var(--leise)}
.video-text .knoepfe{margin-top:1.6rem}
@keyframes video-puls{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.video-play::after{animation:none;opacity:.5}}
@media (max-width:860px){.video-zeile,.video-zeile.umgekehrt{grid-template-columns:1fr}.video-zeile.umgekehrt .video-platz{order:0}}

/* 28.10.2026: Themenkarten im Lesetext sind ganze Links, ohne Unterstreichung des Fließtexts */
.lesetext a.feld{color:inherit;text-decoration:none}
/* 28.10.2026: Links im dunklen Kasten hell, Kontrast über 4,5:1 */
.zw-an a:not(.knopf){color:var(--ocker-hell);text-decoration-color:rgba(230,215,184,.5)}
/* 28.10.2026: sichtbarer Tastaturfokus auch für den schwebenden Kontakt-Button und Schieberegler */
.kf-knopf:focus-visible{outline:3px solid var(--ocker-tief);outline-offset:3px}
input[type="range"]:focus-visible{outline:3px solid var(--ocker-tief);outline-offset:4px;border-radius:4px}
/* 28.10.2026: Umfließen bei 320 px (WCAG 1.4.10): lange Wörter in Überschriften trennen, Rasterspalten dürfen schrumpfen */
@media (max-width:480px){h1,h2,h3,.lead{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}}
.lese-raster>*,.geteilt>*,.sk-raster>*,.ab-seite>*{min-width:0}
.lesetext{overflow-wrap:break-word}
/* 28.10.2026: Dirks Hinweis unter dem Freitextfeld, normale Schriftgröße */
.feld-hinweis{margin:.5rem 0 0;font-size:1rem;line-height:1.5;color:var(--text)}
/* 28.10.2026: Video-Platzhalter in der Lesespalte (Mitte der Themenseiten) */
.video-inline{margin:2.6rem 0 2.8rem}
.video-inline .video-platz{width:100%}
.video-inline figcaption{margin-top:1rem;color:var(--leise);font-size:1rem;line-height:1.6}
.video-inline figcaption .vorzeile{margin-bottom:.6rem}
.video-inline figcaption b{display:block;color:var(--tinte);font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.25;margin-bottom:.35rem}
/* 28.10.2026: Inhalt des Videos in drei Punkten neben dem Video */
.video-punkte{list-style:none;padding:0;margin:.2rem 0 1.5rem}
.video-punkte li{position:relative;padding-left:1.35rem;margin-bottom:.6rem;line-height:1.55}
.video-punkte li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--ocker-zahl)}
/* 28.10.2026: Videoabschnitt mit einer Hauptaktion (Abspielen) und Anfrage als Textlink */
.video-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.7rem}
.video-aktionen .knopf[disabled]{cursor:default}
.video-hinweis{margin:1rem 0 0;font-size:.9rem;color:var(--leise)}
.video-aktionen .ikon svg{fill:currentColor;stroke:none;width:12px;height:12px;margin-left:2px}
/* 29.10.2026: Gestapelte Karten unter dem Kopf der Startseite (Dustin): Karte 1 ist das Video, danach drei große Info-Kacheln. Jede Karte bleibt oben stehen, die nächste fährt beim Scrollen darüber.
   Wo der Browser Scroll-Animationen kann, kippt die ankommende Karte aus der Tiefe herein, die darunter liegende tritt zurück und liegt im Schatten. */
.stapel-band{padding-block:clamp(2rem,4vw,3rem) clamp(3.5rem,7vw,6rem);--oben:96px;--versatz:18px;--h:28rem;--wort-a:22vh;--schicht-a:27rem;--schicht-e:4.5rem}
.stapel{display:grid;gap:clamp(2.5rem,6vh,4rem);max-width:70rem;margin-inline:auto}
.stapel-karte{position:sticky;top:calc(var(--oben) + var(--n) * var(--versatz));display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  min-height:min(var(--h),calc(100svh - 160px));padding:clamp(1.25rem,3vw,2.5rem);border-radius:28px;background:var(--weiss);transform-origin:50% 0;
  box-shadow:inset 0 0 0 1px var(--linie),0 2px 4px rgba(40,28,8,.05),0 18px 36px -16px rgba(40,28,8,.28),0 46px 80px -36px rgba(40,28,8,.26)}
.stapel-karte .video-platz{width:100%}
.stapel-bild{justify-self:center;width:min(100%,17rem);aspect-ratio:4/5;border-radius:22px;background:var(--sand);display:grid;place-items:center;color:var(--ocker-tief)}
.stapel-marke{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker-tief);margin:0 0 .8rem}
.stapel-text h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.18;margin:0 0 .9rem;color:var(--tinte)}
.stapel-text p{margin:0;max-width:34rem}
.stapel-text .video-aktionen{margin-top:1.4rem}
@keyframes stapel-ankunft{
  from{transform:perspective(1100px) translateY(64px) rotateX(16deg) scale(.95);box-shadow:inset 0 0 0 1px var(--linie),0 4px 8px rgba(40,28,8,.04),0 60px 90px -30px rgba(40,28,8,.34),0 110px 140px -60px rgba(40,28,8,.30)}
  to{transform:perspective(1100px) translateY(0) rotateX(0deg) scale(1);box-shadow:inset 0 0 0 1px var(--linie),0 2px 4px rgba(40,28,8,.05),0 18px 36px -16px rgba(40,28,8,.28),0 46px 80px -36px rgba(40,28,8,.26)}}
@keyframes stapel-zurueck{
  to{transform:perspective(1100px) translateY(-8px) rotateX(0deg) scale(.93);filter:brightness(.86) saturate(.9)}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .stapel-band{timeline-scope:--karte-2,--karte-3,--karte-4}
    /* --bild: Zeitleiste der eigenen Karte für Bild und Wörter, egal an welcher Stelle sie steht (ohne Videokarte rückt alles eine Stelle vor) */
    .stapel-karte:nth-child(1){view-timeline-name:--bild}
    .stapel-karte:nth-child(2){view-timeline-name:--karte-2,--bild}
    .stapel-karte:nth-child(3){view-timeline-name:--karte-3,--bild}
    .stapel-karte:nth-child(4){view-timeline-name:--karte-4,--bild}
    .stapel-karte{animation:stapel-ankunft linear both;animation-timeline:view();
      animation-range:cover 0% cover calc(100vh - var(--oben) - var(--n) * var(--versatz))}
    .stapel-karte:nth-child(1){animation:stapel-ankunft linear both,stapel-zurueck linear both;animation-timeline:view(),--karte-2;
      animation-range:cover 0% cover calc(100vh - var(--oben)),cover calc(100vh - var(--oben) - var(--h)) cover calc(100vh - var(--oben) - var(--versatz))}
    .stapel-karte:nth-child(2){animation:stapel-ankunft linear both,stapel-zurueck linear both;animation-timeline:view(),--karte-3;
      animation-range:cover 0% cover calc(100vh - var(--oben) - var(--versatz)),cover calc(100vh - var(--oben) - var(--versatz) - var(--h)) cover calc(100vh - var(--oben) - 2 * var(--versatz))}
    .stapel-karte:nth-child(3){animation:stapel-ankunft linear both,stapel-zurueck linear both;animation-timeline:view(),--karte-4;
      animation-range:cover 0% cover calc(100vh - var(--oben) - 2 * var(--versatz)),cover calc(100vh - var(--oben) - 2 * var(--versatz) - var(--h)) cover calc(100vh - var(--oben) - 3 * var(--versatz))}
  }
}
@media (max-width:760px){
  .stapel-band{--oben:80px;--versatz:10px;--h:34.5rem;--wort-a:40vh;--schicht-a:20rem;--schicht-e:10rem}
  .stapel-karte{grid-template-columns:1fr;align-content:start;gap:1rem;min-height:var(--h);border-radius:22px;padding:1rem 1rem 1.3rem}
  .stapel-karte:not(.stapel-video){align-content:space-between}
  .stapel-bild{width:100%;aspect-ratio:4/3;border-radius:16px}
  .stapel-text h3{font-size:1.35rem;-webkit-hyphens:manual;hyphens:manual}
  .stapel-text .video-aktionen{margin-top:1rem}
  .stapel-video .video-hinweis{display:none}
}
@media (prefers-reduced-motion:reduce),(max-height:640px){.stapel-karte{position:static}}
/* 29.10.2026: Kachel „Ihr Tempo“: Text erscheint Wort für Wort beim Scrollen, während die Karte heraufkommt (Dustin). Ohne Scroll-Animation oder bei „Bewegung reduzieren“ sofort ganz. */
@keyframes wort-an{to{opacity:1}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .stapel-karte[data-woerter] .wort{opacity:.14;animation:wort-an linear both;animation-timeline:--bild;
      animation-range:cover calc(var(--wort-a) + (100vh - var(--oben) - var(--n) * var(--versatz) - var(--wort-a) - 8vh) * var(--i) / var(--woerter)) cover calc(var(--wort-a) + 4vh + (100vh - var(--oben) - var(--n) * var(--versatz) - var(--wort-a) - 8vh) * var(--i) / var(--woerter))}
  }
}
/* 29.10.2026: Bildfamilie der drei Kacheln (Dustin: „die Grafiken passen nicht zueinander … das muss einheitlich sein“). Jedes Bild: ein Motiv als feine Ockerlinie
   mit weicher Fläche, sechs Schichten zu je 81 %, nach innen heller, Licht in der Mitte, darin ein kleiner dunkler Akzent (zwei Menschen, Lächeln, Schild).
   Kopf und Kalender sinken beim Scrollen in die Tiefe, jede Schicht erscheint, sobald das Motiv an ihr vorbeisinkt. Start, wenn das Bildfeld ganz zu sehen ist (--schicht-a),
   Ende kurz nach dem Andocken, bevor die nächste Karte das Feld verdeckt (--schicht-e). Das Schloss rastet zuerst ein und sinkt dann zeitgesteuert (praxis.js setzt „bereit“ und „zu“).
   Ohne Scroll-Animation, ohne Skript oder bei „Bewegung reduzieren“ steht überall das Endbild. */
.stapel-band{--s-aussen:#B89045;--s-innen:#E9D9B6;--f-aussen:#E2D5BE;--f-innen:#FBF6EC;--l-mitte:#FFFDF6;--l-rand:#F6E6C4;--figur:#3B2E1E}
[data-theme="dark"] .stapel-band{--s-aussen:#C9A258;--s-innen:#EAD4A0;--f-aussen:#211C17;--f-innen:#4A3D2C;--l-mitte:#FFE3A6;--l-rand:#C99A4E;--figur:#120F0B}
.stapel-karte{--schicht-ende:calc(100vh - var(--oben) - var(--n) * var(--versatz) + var(--schicht-e))}
.schichten{width:100%;height:100%;display:block}
.schicht,.schicht-kern,.schicht-weg,.schicht-zeichen{transform-box:view-box;transform-origin:var(--ox) var(--oy)}
.schicht,.schicht-kern{stroke-linecap:round;stroke-linejoin:round}
.schicht{scale:var(--s);fill:var(--f-aussen);stroke:var(--s-aussen);stroke-width:calc(1.6px - var(--k) * .1px)}
@supports (color:color-mix(in oklab,red,blue)){.schicht{fill:color-mix(in oklab,var(--f-innen) calc(var(--k) * 20%),var(--f-aussen));stroke:color-mix(in oklab,var(--s-innen) calc(var(--k) * 20%),var(--s-aussen))}}
.schicht-kern{scale:.2824;stroke:var(--s-innen);stroke-width:1px}
.schicht-weg{scale:.2824;fill:var(--figur)}
.schicht-begleiter{scale:.3037}
/* Haken im Kalender: von Anfang an als feine Linie da, beim Einsinken dunkel wie die anderen Akzente; Impuls hier, Verformung zum Lächeln in praxis.js */
.schicht-zeichen{scale:.2824;fill:none;stroke:var(--figur)}
.kalender-zeichen{vector-effect:non-scaling-stroke;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.schichten-kalender.froh .kalender-zeichen{animation:zeichen-puls .5s .12s both}
@keyframes zeichen-puls{0%{transform:scale(1)} 35%{transform:scale(1.35)} 68%{transform:scale(.94)} 100%{transform:scale(1)}}
@keyframes zeichen-sinken{
  0%{scale:1;stroke:var(--s-aussen)} 16.667%{scale:.81} 33.333%{scale:.6561;stroke:var(--figur)} 50%{scale:.5314} 66.667%{scale:.4305} 83.333%{scale:.3487} 100%{scale:.2824;stroke:var(--figur)}}
@keyframes schicht-sinken{
  0%{scale:1;stroke:var(--s-aussen);stroke-width:1.6px;fill-opacity:0} 16.667%{scale:.81} 18%{fill-opacity:1} 33.333%{scale:.6561} 50%{scale:.5314}
  66.667%{scale:.4305} 83.333%{scale:.3487} 100%{scale:.2824;stroke:var(--s-innen);stroke-width:1px;fill-opacity:1}}
@keyframes schicht-gehen{
  0%{scale:1;opacity:0} 14%{opacity:0} 16.667%{scale:.81} 26%{opacity:1} 33.333%{scale:.6561} 50%{scale:.5314} 66.667%{scale:.4305} 83.333%{scale:.3487} 100%{scale:.2824;opacity:1}}
/* Der Therapeut bleibt einen halben Schritt hinter der Patientin (Maßstab geteilt durch 0,93) */
@keyframes schicht-begleiten{
  0%{scale:1;opacity:0} 14%{opacity:0} 16.667%{scale:.871} 26%{opacity:1} 33.333%{scale:.7055} 50%{scale:.5714} 66.667%{scale:.4629} 83.333%{scale:.3749} 100%{scale:.3037;opacity:1}}
@keyframes schicht-an{from{opacity:0}}
@keyframes schein-an{0%,45%{opacity:0}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .schichten:not(.schichten-schloss) .schicht-kern{animation:schicht-sinken linear both;animation-timeline:--bild;animation-range:cover var(--schicht-a) cover var(--schicht-ende)}
    .schichten:not(.schichten-schloss) .schicht-schein{animation:schein-an linear both;animation-timeline:--bild;animation-range:cover var(--schicht-a) cover var(--schicht-ende)}
    /* Eine Schicht erscheint erst, wenn der Kern rund 7 % kleiner ist als sie, sonst liegen zwei Umrisse knapp übereinander (Dustin: wirkt billig) */
    .schichten:not(.schichten-schloss) .schicht{animation:schicht-an linear both;animation-timeline:--bild;animation-range:cover calc(var(--schicht-a) + (var(--schicht-ende) - var(--schicht-a)) * (var(--k) + .36) / 6) cover calc(var(--schicht-a) + (var(--schicht-ende) - var(--schicht-a)) * (var(--k) + .72) / 6)}
    .schicht-weg{animation:schicht-gehen linear both;animation-timeline:--bild;animation-range:cover var(--schicht-a) cover var(--schicht-ende)}
    .schicht-begleiter{animation:schicht-begleiten linear both;animation-timeline:--bild;animation-range:cover var(--schicht-a) cover var(--schicht-ende)}
    .schicht-zeichen{animation:zeichen-sinken linear both;animation-timeline:--bild;animation-range:cover var(--schicht-a) cover var(--schicht-ende)}
  }
}
/* Schloss (Dustin 29.10.2026: soll spürbar „klicken“ und viel früher): vorne offen gezeichnet, rastet in 0,6 Sekunden ein, sobald es ganz zu sehen ist
   (Bügel schwenkt zu, fällt mit Nachfedern ein, der Körper staucht sich), danach sinkt es wie Kopf und Kalender in seine Schichten. Zeitgesteuert, damit das Einrasten
   immer gleich schnell ist. Wieder offen, wenn es beim Zurückscrollen unten aus dem Bild ist. */
.schloss-auf{display:none;fill:none;stroke:var(--s-aussen);stroke-width:1.6px;stroke-linejoin:round;transform-box:view-box;transform-origin:122px 210px}
.schloss-buegel{transform-box:view-box;transform-origin:144px 132px}
.schichten-schloss.bereit .schloss-auf{display:inline}
.schichten-schloss.bereit:not(.zu) .schloss-buegel{transform:translateY(-16px) rotate(-22deg)}
.schichten-schloss.bereit:not(.zu) :is(.schicht,.schicht-kern,.schicht-schein,.schloss-schild){opacity:0}
.schichten-schloss.zu .schloss-buegel{animation:schloss-einrasten .62s both}
.schichten-schloss.zu .schloss-auf{animation:schloss-stoss .62s linear both,schloss-weg .62s step-end both}
.schichten-schloss.zu .schicht-kern{animation:schloss-zeigen .62s step-end both,schicht-sinken .9s .62s linear both}
.schichten-schloss.zu .schicht{animation:schicht-an .06s calc(.674s + var(--k) * .15s) both}
.schichten-schloss.zu .schicht-schein{animation:schein-an .9s .62s linear both}
/* Zum Schluss setzt sich ein Schild über das innerste Schloss, wie ein Siegel: kurz größer, dann ruhig (Dustin: Schild statt Schlüsselloch) */
.schloss-schild{fill:var(--l-mitte);stroke:var(--figur);stroke-width:1.8px;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.schichten-schloss.zu .schloss-schild{animation:schild-an .55s 1.45s both}
@keyframes schild-an{0%{opacity:0;transform:scale(.55)} 60%{opacity:1;transform:scale(1.08)} 100%{opacity:1;transform:scale(1)}}
@keyframes schloss-einrasten{
  0%{transform:translateY(-16px) rotate(-22deg);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  52%{transform:translateY(-12px) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,1,1)}
  66%{transform:translateY(1.4px);animation-timing-function:ease-out}
  80%{transform:translateY(-.6px)} 92%,100%{transform:none}}
@keyframes schloss-stoss{0%,65%{transform:none} 71%{transform:scale(1.03,.96)} 82%{transform:scale(.995,1.008)} 94%,100%{transform:none}}
@keyframes schloss-weg{from{opacity:1}to{opacity:0}}
@keyframes schloss-zeigen{from{opacity:0}to{opacity:1}}
/* 29.10.2026: „So arbeitet Dirk Ullrich“ (Dustin): vor „Stufe für Stufe“ eine kleine Treppe im Querschnitt, die sich Stufe für Stufe zeichnet, sobald die Überschrift
   ins Bild kommt. Dahinter ganz dezent eine große Treppe über den ganzen Abschnitt, die sich beim Scrollen zeichnet. Ohne Animation steht beides fertig da. */
.stufen-wort{white-space:nowrap}
.stufen-mini{display:inline-block;width:.78em;height:.78em;margin-right:.22em;vertical-align:-.04em;fill:none;stroke:var(--ocker);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stufen-mini path{stroke-dasharray:1}
.js .klebt.auf:not(.da) .stufen-mini path{stroke-dashoffset:1}
.klebt.da .stufen-mini path{animation:stufen-mini 1.5s .5s both}
@keyframes stufen-mini{
  0%{stroke-dashoffset:1;animation-timing-function:var(--weich)} 26%,36%{stroke-dashoffset:.667;animation-timing-function:var(--weich)}
  62%,72%{stroke-dashoffset:.333;animation-timing-function:var(--weich)} 100%{stroke-dashoffset:0}}
.stufen-band{position:relative;overflow:hidden}
.stufen-band>.huelle{position:relative;z-index:1}
.stufen-hinter{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:rgba(184,144,69,.07);stroke-width:26;stroke-linejoin:miter}
[data-theme="dark"] .stufen-hinter{stroke:rgba(201,162,88,.07)}
.stufen-hinter.hoch{display:none;stroke-width:16}
@media (max-width:760px){.stufen-hinter.quer{display:none}.stufen-hinter.hoch{display:block}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .stufen-hinter path{stroke-dasharray:1;animation:stufen-hinter linear both;animation-timeline:view();animation-range:cover 12% cover 62%}
  }
}
@keyframes stufen-hinter{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.stufen-band{padding-bottom:calc(var(--luft) + 3rem)}
/* Der Button bleibt blass wie die anderen Folge-Buttons (Dustin 29.10.2026: kein Gold), aber deckend in Seitenfarbe, damit die Treppe nicht hindurchscheint,
   dazu ein Freiraum in Hintergrundfarbe, damit sie nie mit einer Ecke an den Button stößt */
.stufen-band .knopf{background:var(--papier);box-shadow:inset 0 0 0 1px var(--k-ring),0 0 0 14px var(--papier)}
.stufen-band .knopf:hover{background:var(--weiss)}
/* 29.10.2026: „Wenn Angst den Alltag bestimmt“ nur mit Text und Bewegung (Dustin: Bilder verworfen, „eher nur mit Text und Animation“).
   Rechts drei Schritte. Jedes Wort erscheint, sobald es die Lesezeile im unteren Drittel des Bildschirms erreicht; darunter steht der Text blass als Vorschau.
   Je Schritt zieht sich beim Lesen ein Ockerstrich unter einen Kernsatz. Ohne Scroll-Animation oder bei „Bewegung reduzieren“ ist alles gleich voll da. */
.pb-schritte{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.2rem,5vw,3.6rem)}
/* Größen abgestimmt auf die Überschrift links (Dustin 29.10.2026: Textblock „unterdimensioniert“): Absatz etwas größer als der Fließtext der Seite, weil er allein steht */
.pb-nr{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(2rem,1.2rem + 1.8vw,2.9rem);line-height:1;color:var(--ocker-tief);margin-bottom:.6rem}
.pb-schritt h3{font-size:clamp(1.45rem,1rem + 1.3vw,2.1rem);line-height:1.15;margin:0 0 .8rem}
.pb-schritt p{margin:0;font-size:clamp(1.1rem,.95rem + .45vw,1.26rem);line-height:1.72;max-width:35rem}
.pb-schritt>p{margin-top:clamp(1.5rem,4vh,2.5rem)}
.pb-schritt .lw{display:inline-block}
.pb-kern{color:inherit;background:linear-gradient(transparent 60%,rgba(184,144,69,.3) 60%) no-repeat;background-size:100% 100%;padding-inline:.06em}
[data-theme="dark"] .pb-kern{background-image:linear-gradient(transparent 60%,rgba(201,162,88,.32) 60%)}
@keyframes lw-an{to{opacity:1}}
@keyframes kern-an{from{background-size:0% 100%}}
@keyframes pb-auf{from{opacity:0;transform:translateY(14px)}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .pb-schritt .lw{opacity:.16;animation:lw-an linear both;animation-timeline:view();animation-range:cover 16% cover 28%}
    .pb-kern{animation:kern-an linear both;animation-timeline:view();animation-range:cover 26% cover 46%}
    .pb-schritt :is(.pb-nr,h3){animation:pb-auf linear both;animation-timeline:view();animation-range:cover 6% cover 22%}
  }
}
/* Kleine Dialoge je Schritt (Dustin 29.10.2026): links die helle Blase mit dem Satz der Person, rechts etwas tiefer die dunkle Blase mit der Stimme der Vernunft.
   Ohne Scroll-Animation oder bei „Bewegung reduzieren“ stehen die Gespräche untereinander. Mit Scroll-Animation wird jeder Schritt zur Bühne: Nummer, Überschrift
   und Gesprächsfläche bleiben in der Bildschirmmitte stehen, beim Weiterscrollen spielt immer nur ein Gespräch (Satz, dann Antwort, dann gleiten beide nach oben weg),
   rund 70 % Bildschirmhöhe Scrollweg je Gespräch (Dustin: „langsam an das Thema heranführen“). Danach folgt der Absatz.
   Die Bühne ist nur so hoch wie ihr Inhalt (--buehne-h) und steht mittig unter der Kopfleiste, damit rund um den Absatz keine leeren Flächen entstehen. */
.pb-schritt{padding-bottom:clamp(4rem,10vh,7rem)}
.pb-schritt h3{margin-bottom:1.2rem}
.pb-buehne{padding-block:.5rem}
.pb-dialog{display:grid;gap:1.4rem;margin:.4rem 0 2.2rem;--gegen-bg:#3A3027;--gegen-fg:#FBF6EC}
[data-theme="dark"] .pb-dialog{--gegen-bg:#E6D7B8;--gegen-fg:#15120F}
.pb-blasen-titel{display:block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ocker-tief);margin-bottom:.9rem}
.pb-paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9rem;align-items:start}
.pb-blase{position:relative;justify-self:start;margin:0 0 .35rem;padding:.7rem 1.15rem;background:var(--weiss);border-radius:20px;
  font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,.98rem + .35vw,1.26rem);line-height:1.35;color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie),0 10px 20px -14px rgba(60,42,12,.3)}
.pb-blase::after{content:"";position:absolute;left:18px;bottom:-6px;width:12px;height:12px;background:inherit;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);transform:rotate(45deg);border-bottom-right-radius:3px}
.pb-blase.pb-gegen{justify-self:end;margin-top:1.8rem;background:var(--gegen-bg);color:var(--gegen-fg);font-style:normal;font-family:var(--sans);font-weight:700;font-size:clamp(.98rem,.9rem + .25vw,1.1rem);
  box-shadow:0 14px 26px -16px rgba(20,14,6,.55)}
.pb-blase.pb-gegen::after{left:auto;right:18px;border-color:transparent}
@media (max-width:600px){
  .pb-paar{grid-template-columns:1fr;gap:.2rem}
  .pb-blase{max-width:88%}
  .pb-blase.pb-gegen{margin-top:.3rem}
}
@keyframes satz-an{0%{opacity:0;transform:translateY(26px) scale(.9)} 16%{opacity:1;transform:translateY(0) scale(1.03)} 22%,80%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-34px)}}
@keyframes antwort-an{0%,34%{opacity:0;transform:translateY(26px) scale(.9)} 48%{opacity:1;transform:translateY(0) scale(1.03)} 54%,80%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-34px)}}
@keyframes satz-bleibt{0%{opacity:0;transform:translateY(26px) scale(.9)} 16%{opacity:1;transform:translateY(0) scale(1.03)} 22%,100%{opacity:1;transform:none}}
@keyframes antwort-bleibt{0%,34%{opacity:0;transform:translateY(26px) scale(.9)} 48%{opacity:1;transform:translateY(0) scale(1.03)} 54%,100%{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-height:560px){
    /* --buehne-top: Bühne mittig im Bereich unter der Kopfleiste. Gespräch k spielt, sobald die Bühne steht, plus k mal --pro-paar Scrollweg */
    .pb-pin{--kopf:clamp(84px,13vh,128px);--buehne-h:25rem;--pro-paar:70vh;
      --buehne-top:max(var(--kopf),calc((100svh + var(--kopf) - var(--buehne-h)) / 2));
      height:calc(var(--buehne-h) + var(--paare) * var(--pro-paar));view-timeline-name:--pin}
    .pb-buehne{position:sticky;top:var(--buehne-top);min-height:var(--buehne-h);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
    .pb-dialog{position:relative;display:block;height:15rem;margin-bottom:0}
    .pb-paar{position:absolute;inset:0;align-content:center}
    .pb-paar .pb-blase{transform-origin:left bottom;animation:satz-an linear both;animation-timeline:--pin;
      animation-range:cover calc(100svh - var(--buehne-top) + var(--p) * var(--pro-paar)) cover calc(100svh - var(--buehne-top) + (var(--p) + 1) * var(--pro-paar))}
    .pb-paar .pb-blase.pb-gegen{transform-origin:right bottom;animation-name:antwort-an}
    .pb-paar:last-child .pb-blase{animation-name:satz-bleibt}
    .pb-paar:last-child .pb-blase.pb-gegen{animation-name:antwort-bleibt}
  }
}
@media (max-width:760px){.pb-pin{--buehne-h:27rem}}
/* 29.10.2026: Schwerpunkte auf der Startseite als Weiche (Dustin): „Ich bin heute hier …“, aus demselben Punkt darunter führen zwei Linien zu zwei Kacheln
   (Termin steht an, über Ängste sprechen). Je nach Wahl erscheinen die Termin-Karten oder die Phobien, der gestrichelte Button zeigt alles wie bisher.
   Die Linien berechnet praxis.js aus der Lage der Kacheln. Ablauf beim Hereinscrollen: Punkt, Stamm, beide Äste, Kacheln, je ein Lichtschein, zuletzt der Button.
   Ohne Skript ist die Weiche verborgen und der Abschnitt steht vollständig da. Bei „Bewegung reduzieren“ steht die Weiche sofort fertig da. */
.sp-weiche{display:none}
.js .sp-weiche{display:block;position:relative;margin-top:clamp(2.2rem,5vw,3.6rem)}
.sp-frage{text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.55rem,1.1rem + 1.5vw,2.3rem);line-height:1.2;color:var(--tinte);margin:0 0 clamp(4.6rem,9vw,6.6rem)}
.sp-linien{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;fill:none;stroke:var(--ocker);stroke-width:1.8;stroke-linecap:round}
.sp-punkt{fill:var(--ocker);stroke:none;transform-box:fill-box;transform-origin:center}
.sp-ast{transition:stroke .4s,stroke-width .4s,opacity .4s}
.sp-wahl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2.6vw,1.8rem);max-width:54rem;margin:0 auto}
.sp-kachel{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:1.2rem;min-height:9.5rem;
  padding:clamp(1.05rem,2.6vw,1.7rem);text-align:left;font:inherit;font-family:var(--serif);font-size:clamp(1.05rem,.88rem + .65vw,1.42rem);line-height:1.3;color:var(--tinte);
  background:var(--weiss);border:0;border-radius:22px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--linie),var(--schatten);transition:box-shadow .35s,background .35s,transform .5s var(--feder)}
.sp-kachel i{align-self:flex-end;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--ocker-hauch);display:grid;place-items:center;transition:background .3s,transform .5s var(--feder)}
.sp-kachel .sp-ab{width:15px;height:15px;stroke:var(--ocker-tief);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
@media (hover:hover){.sp-kachel:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(184,144,69,.65),var(--schatten)}}
.sp-kachel:hover i{transform:translateY(3px);background:var(--ocker-hell)}
.sp-kachel[aria-pressed="true"]{background:var(--ocker-hauch);box-shadow:inset 0 0 0 1.5px var(--ocker),var(--schatten)}
.sp-kachel[aria-pressed="true"] i{background:var(--ocker);}
.sp-kachel[aria-pressed="true"] .sp-ab{stroke:#fff}
.sp-kachel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(184,144,69,.2) 50%,transparent 65%) no-repeat;background-size:260% 100%}
.sp-alles-zeile{display:flex;justify-content:center;margin-top:clamp(1.8rem,4.5vw,2.6rem)}
.sp-alles{font:inherit;font-weight:700;font-size:.95rem;line-height:1.3;color:var(--ocker-tief);background:transparent;border:1.5px dashed rgba(184,144,69,.7);border-radius:999px;
  padding:.85rem 1.6rem;cursor:pointer;transition:background .3s,border-color .3s}
.sp-alles:hover{background:var(--ocker-hauch);border-color:var(--ocker)}
.sp-alles[aria-pressed="true"]{border-style:solid;border-color:var(--ocker);background:var(--ocker-hauch)}
/* Gewählter Weg: der zugehörige Ast wird kräftig, der andere tritt zurück; bei „alles“ treten beide zurück */
#schwerpunkte[data-modus="termin"] .sp-ast:not([data-ast="termin"]),#schwerpunkte[data-modus="aengste"] .sp-ast:not([data-ast="aengste"]),#schwerpunkte[data-modus="alles"] .sp-ast{opacity:.2}
#schwerpunkte[data-modus="termin"] .sp-ast[data-ast="termin"],#schwerpunkte[data-modus="aengste"] .sp-ast[data-ast="aengste"]{stroke:var(--ocker-tief);stroke-width:2.6}
[data-theme="dark"] #schwerpunkte[data-modus="termin"] .sp-ast[data-ast="termin"],[data-theme="dark"] #schwerpunkte[data-modus="aengste"] .sp-ast[data-ast="aengste"]{stroke:var(--ocker-hell)}
/* Inhalt je Wahl; vor der ersten Wahl ist nichts darunter */
.sp-inhalt{margin-top:clamp(1.4rem,3vw,2.2rem)}
.js #schwerpunkte:not([data-modus]) .sp-inhalt{display:none}
.js #schwerpunkte[data-modus="termin"] .sp-gruppe:not([data-gruppe="termin"]),.js #schwerpunkte[data-modus="aengste"] .sp-gruppe:not([data-gruppe="aengste"]){display:none}
.js #schwerpunkte:is([data-modus="termin"],[data-modus="aengste"]) .felder-gruppe{display:none}
/* Gruppenüberschriften in der Gesamtansicht deutlich größer, mit feiner Linie (Dustin: „Phobien“ war das kleinste Element) */
#schwerpunkte .felder-gruppe{display:flex;align-items:center;gap:1rem;font-size:clamp(1.4rem,1rem + 1.2vw,1.9rem);letter-spacing:0;color:var(--tinte);margin:clamp(2rem,4vw,3rem) 0 1.2rem}
#schwerpunkte .felder-gruppe::after{content:"";flex:1;height:1px;background:var(--linie)}
#schwerpunkte .sp-gruppe:first-child .felder-gruppe{margin-top:.6rem}
#schwerpunkte .felder .feld:nth-child(2){--k:1}#schwerpunkte .felder .feld:nth-child(3){--k:2}#schwerpunkte .felder .feld:nth-child(4){--k:3}
#schwerpunkte .felder .feld:nth-child(5){--k:4}#schwerpunkte .felder .feld:nth-child(6){--k:5}#schwerpunkte .felder .feld:nth-child(7){--k:6}
/* Pfeile in den dunklen Termin-Karten heller (vorher Kontrast 2,4 zu 1) */
.feld.anlass .mehr i svg{stroke:var(--ocker)}
@keyframes sp-erscheinen{from{opacity:0;translate:0 14px}}
@keyframes sp-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sp-punkt-an{from{scale:0}}
@media (prefers-reduced-motion:no-preference){
  .sp-linien path{stroke-dasharray:1}
  .js .sp-weiche:not(.an) .sp-linien path{stroke-dashoffset:1}
  .js .sp-weiche:not(.an) :is(.sp-punkt,.sp-kachel,.sp-alles){opacity:0}
  .sp-weiche.an .sp-punkt{animation:sp-punkt-an .35s var(--feder) both}
  .sp-weiche.an .sp-stamm{animation:sp-zeichnen .35s .25s ease-in both}
  .sp-weiche.an .sp-ast{animation:sp-zeichnen .85s .6s var(--weich) both}
  .sp-weiche.an .sp-kachel{animation:sp-erscheinen .5s 1.3s var(--weich) both,kachel-leuchten .9s 1.9s var(--weich)}
  .sp-weiche.an .sp-kachel+.sp-kachel{animation-delay:1.42s,2.15s}
  .sp-weiche.an .sp-kachel::after{animation:kachel-schein .9s 1.9s var(--weich) both}
  .sp-weiche.an .sp-kachel+.sp-kachel::after{animation-delay:2.15s}
  .sp-weiche.an .sp-alles{animation:sp-erscheinen .55s 2.6s var(--weich) both}
  /* Karten erscheinen nach der Wahl kurz nacheinander */
  .js #schwerpunkte[data-modus] .sp-gruppe .feld{animation:sp-erscheinen .5s calc(var(--k,0) * 70ms) var(--weich) both}
}
@media (max-width:620px){
  .sp-kachel{min-height:11rem;border-radius:18px;gap:.8rem}
  .sp-kachel i{width:32px;height:32px;flex-basis:32px}
  .sp-alles{font-size:.9rem;padding:.8rem 1.2rem;text-align:center}
}
/* 29.10.2026: Kachel „DU“ bei den Phobien (Dustin: Logo smart zeigen): Das Monogramm aus dem Logo, im Ring, entfaltet sich beim Erscheinen zu „Dirk Ullrich“,
   daran läuft Dirks Satz weiter. Warmer Grund statt weißer Karte, damit sie nicht wie ein weiterer Schwerpunkt wirkt. Ohne Skript oder bei „Bewegung reduzieren“
   steht der Name fertig da. */
.feld-dirk .kern{background:var(--papier);box-shadow:inset 0 0 0 1px rgba(184,144,69,.35),var(--schatten)}
[data-theme="dark"] .feld-dirk .kern{background:var(--nacht)}
.du-zeichen{position:relative;display:inline-flex;align-items:baseline}
.feld-dirk .du-name{position:relative;align-self:flex-start;font-size:clamp(1.4rem,1.15rem + .55vw,1.55rem);line-height:1.1;margin:.3rem 0 1.05rem;white-space:nowrap}
.du-d,.du-rest-1{color:var(--tinte)}
.du-u,.du-rest-2{color:var(--ocker-tief)}
.du-rest{display:inline-grid;grid-template-columns:1fr}
.du-rest>span{overflow:hidden;min-width:0}
.du-luecke{display:inline-block;width:.26em;overflow:hidden}
.du-ring{position:absolute;left:-.3em;top:50%;width:2em;height:2em;translate:0 -52%;border:1.5px solid var(--ocker);border-radius:50%;opacity:0;pointer-events:none}
.feld-dirk p{color:var(--text)}
@media (prefers-reduced-motion:no-preference){
  /* Erst einblenden (rund 0,9 s), dann das Monogramm kurz stehen lassen, dann entfalten */
  .du-rest{transition:grid-template-columns 1.1s 1.6s var(--weich)}
  .du-luecke{transition:width 1.1s 1.6s var(--weich)}
  .du-ring{transition:opacity .6s 1.5s var(--weich),scale .9s 1.5s var(--weich)}
  .js .feld-dirk:not(.da) .du-rest{grid-template-columns:0fr}
  .js .feld-dirk:not(.da) .du-luecke{width:.03em}
  .js .feld-dirk:not(.da) .du-ring{opacity:1}
  .feld-dirk.da .du-ring{scale:1.7}
}
/* Fokusrahmen der Weiche liegt direkt auf dem Rand, sonst wirkt eine gewählte Kachel doppelt gerahmt (Dustin 29.10.2026: „was fällt auf?“) */
.sp-kachel:focus-visible,.sp-alles:focus-visible{outline-offset:0}
/* Nach der Wahl treten die beiden anderen Möglichkeiten zurück: blasser und etwas kleiner, damit der gewählte Weg klar im Fokus steht (Dustin 29.10.2026).
   Deckkraft 62 %, damit der Text noch den Kontrast für Barrierefreiheit hält (rund 4,9 zu 1). Beim Darüberfahren oder per Tastatur sofort wieder voll da.
   filter und scale statt opacity und transform, damit sich Einblendung und Darüberfahren nicht ins Gehege kommen. Kacheln schrumpfen zur Oberkante hin, die Linien bleiben angesetzt. */
.sp-kachel{transform-origin:50% 0;transition:box-shadow .35s,background .35s,transform .5s var(--feder),filter .35s var(--weich),scale .45s var(--feder)}
.sp-alles{transition:background .3s,border-color .3s,color .3s,filter .35s var(--weich),scale .45s var(--feder)}
/* Stärker zurücktreten über Fläche und Farbe statt Deckkraft (Dustin 29.10.2026: „noch blasser“, dann „die Box außen herum verschwindet“): Kachel ohne Karte,
   Rahmen und Schatten, nur noch graue Schrift und Pfeil, kleiner. Der gestrichelte Button tritt nur blasser zurück („der Button mit wenig Deckkraft ist ok“).
   Die Schrift hält so den Kontrast für Barrierefreiheit (Grau auf Sand rund 5,4 zu 1), obwohl die Kachel fast im Hintergrund verschwindet. */
#schwerpunkte[data-modus] .sp-kachel[aria-pressed="false"]{background:transparent;color:var(--leise);box-shadow:none}
#schwerpunkte[data-modus] .sp-kachel[aria-pressed="false"] i{background:transparent;box-shadow:none}
#schwerpunkte[data-modus] .sp-kachel[aria-pressed="false"] .sp-ab{stroke:var(--leise)}
#schwerpunkte[data-modus] .sp-alles[aria-pressed="false"]{color:var(--leise);border-color:rgba(21,19,15,.18)}
[data-theme="dark"] #schwerpunkte[data-modus] .sp-alles[aria-pressed="false"]{border-color:rgba(250,247,240,.18)}
#schwerpunkte[data-modus] .sp-kachel[aria-pressed="false"]:is(:hover,:focus-visible){background:var(--weiss);color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(184,144,69,.65),var(--schatten)}
#schwerpunkte[data-modus] .sp-kachel[aria-pressed="false"]:is(:hover,:focus-visible) i{background:var(--ocker-hauch);box-shadow:none}
#schwerpunkte[data-modus] .sp-kachel[aria-pressed="false"]:is(:hover,:focus-visible) .sp-ab{stroke:var(--ocker-tief)}
#schwerpunkte[data-modus] .sp-alles[aria-pressed="false"]:is(:hover,:focus-visible){color:var(--ocker-tief);border-color:var(--ocker)}
@media (prefers-reduced-motion:no-preference){
  #schwerpunkte[data-modus] :is(.sp-kachel,.sp-alles)[aria-pressed="false"]{scale:.93}
}
#schwerpunkte[data-modus] :is(.sp-kachel,.sp-alles)[aria-pressed="false"]:is(:hover,:focus-visible){filter:none;scale:1}
/* 29.10.2026: „So läuft es ab“ nacheinander beim Scrollen (Dustin): erst Schritt 01, dann zieht sich die Linie bis zur 02, Schritt 02 erscheint,
   dann die Linie zur 03 und Schritt 03. Die Linien reichen jetzt bis zur nächsten Zahl. „Mehr erfahren +“ steht in allen drei Spalten auf einer Höhe.
   Auf dem Handy erscheinen die Schritte untereinander, jeder beim Hereinscrollen. Ohne Scroll-Animation oder bei „Bewegung reduzieren“ steht alles gleich da. */
.schritte{--abstand:clamp(1.2rem,3vw,2.5rem);gap:var(--abstand)}
.schritt{display:flex;flex-direction:column;align-items:flex-start}
.schritt-mehr{margin-top:auto;padding-top:.8rem}
.schritt::after{left:4.4rem;right:calc(.6rem - var(--abstand));height:1.5px;background:linear-gradient(90deg,var(--ocker),rgba(184,144,69,.4));transform-origin:0 50%}
@keyframes schritt-an{from{opacity:0;translate:0 22px}}
@keyframes schritt-blende{from{opacity:0}}
@keyframes schritt-hoch{from{translate:0 18px}}
@keyframes linie-an{from{scale:0 1}}
/* Abfolge kompakt (Dustin 29.10.2026, „was fällt auf?“: auf großen Bildschirmen kam Schritt 03 erst, als das Video darunter schon ganz zu sehen war, die Buttons fehlten):
   alles ist fertig, wenn die Oberkante der Schritte bei rund 55 % der Bildschirmhöhe steht. Die Zahlen bleiben an der Linie stehen und blenden nur ein,
   nur der Text darunter steigt leicht auf; vorher saß die „03“ während der Bewegung tiefer als die Linie. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:901px){
    .schritte{view-timeline-name:--ablauf}
    .schritte .schritt.auf{opacity:1;transform:none;filter:none;transition:none}
    .schritt{animation:schritt-blende linear both;animation-timeline:--ablauf}
    .schritt>*{animation:schritt-hoch linear both;animation-timeline:--ablauf}
    .schritt:nth-child(1),.schritt:nth-child(1)>*{animation-range:cover 10vh cover 18vh}
    .schritt:nth-child(2),.schritt:nth-child(2)>*{animation-range:cover 24vh cover 31vh}
    .schritt:nth-child(3),.schritt:nth-child(3)>*{animation-range:cover 37vh cover 44vh}
    .schritt::after{animation:linie-an linear both;animation-timeline:--ablauf}
    .schritt:nth-child(1)::after{animation-range:cover 17vh cover 25vh}
    .schritt:nth-child(2)::after{animation-range:cover 30vh cover 38vh}
    /* Die Buttons darunter erscheinen direkt nach Schritt 03: erst der Weg, dann die Handlung */
    #ablauf{timeline-scope:--ablauf}
    #ablauf .schritte + .auf{opacity:1;transform:none;filter:none;transition:none;animation:schritt-an linear both;animation-timeline:--ablauf;animation-range:cover 43vh cover 51vh}
  }
  @media (prefers-reduced-motion:no-preference) and (max-width:900px){
    .schritte .schritt.auf{opacity:1;transform:none;filter:none;transition:none}
    .schritt{animation:schritt-an linear both;animation-timeline:view();animation-range:entry 15% cover 32%}
  }
}
/* Videozeile innerhalb eines Abschnitts: Abstand nach oben statt eigenem Abschnitt (29.10.2026) */
.video-zeile.eingebettet{margin-top:clamp(4rem,9vw,7rem)}
/* 29.10.2026: Beim Betreten der Startseite steht nur der Kopfbereich mit dem Quiz im Bild (Dustin: „das Video soll nicht zu sehen sein, Fokus immer auf dem Quiz,
   im Idealfall füllen Besucher das aus“). Vermessen auf zehn üblichen Bildschirmgrößen:
   - ab 1181 px Breite füllt der Kopf immer die ganze Höhe (vorher bei 980 px gedeckelt, auf hohen Bildschirmen schaute das Video herein)
   - niedrige Laptops (bis 860 px Höhe): engere Abstände und etwas kleinere Überschrift, damit alle Antworten im ersten Bild stehen
   - 901 bis 1180 px: flacheres Foto, Text links, Quiz rechts (vorher stand das Quiz unter dem Foto außerhalb des ersten Bildes)
   - Handy: Foto etwas flacher und Abstände enger, damit Frage und Antworten früher kommen
   - nach dem Einblenden zieht einmal ein warmer Lichtschein über die Antworten, wie bei den Kacheln weiter unten */
@media (min-width:1181px){.hero-b{min-height:100svh}}
@media (min-width:1181px) and (max-height:860px){
  .hero-b{padding-top:6.6rem;padding-bottom:1.5rem}
  .hero-b h1{font-size:clamp(2.6rem,6.2vh,3.6rem);margin-bottom:.7rem}
  .hero-b .vorzeile{margin-bottom:.8rem}
  .hero-b .lead{font-size:1rem;line-height:1.6;margin-bottom:1rem}
  .hb-innen{gap:1rem 2rem}
  .ww>.kern{padding:1.05rem 1.4rem 1.1rem}
  .ww h2{margin-bottom:.7rem}
  .ww-wahl{gap:.4rem;margin-bottom:.7rem}
  .ww-wahl label{min-height:42px;padding:.45rem .9rem}
}
@media (min-width:901px) and (max-width:1180px){
  .hb-bild{height:clamp(150px,22vh,240px);max-height:none}
  .hb-innen{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:"text ww" "info ww";gap:1.2rem 2rem;align-items:start}
  .hb-text{padding-top:1.1rem}
  .hero-b h1{font-size:clamp(2.3rem,4.2vw,3rem);margin-bottom:.7rem}
  .hero-b .lead{font-size:1rem;line-height:1.6;margin-bottom:0}
  .ww{max-width:none;margin-top:1.1rem}
  .hb-seite{max-width:none}
}
@media (max-width:900px){
  .hb-bild{height:30vw;max-height:240px}
  .hb-text{padding-top:.9rem}
  .hero-b .vorzeile{margin-bottom:.6rem}
  .hero-b h1{margin-bottom:.6rem}
  .hero-b .lead{line-height:1.5}
  .hb-innen{gap:1rem}
}
.ww-wahl label{position:relative;overflow:hidden}
.ww-wahl label::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(184,144,69,.24) 50%,transparent 65%) no-repeat;background-size:260% 100%}
@media (prefers-reduced-motion:no-preference){
  .ww.da .ww-stufe[data-stufe="1"] .ww-wahl label::after{animation:kachel-schein .9s calc(3.2s + var(--i) * .12s) var(--weich) both}
}
/* „Ein anderer Termin“ unter „Untersuchung“: gestrichelt wie die übrigen Wege zu „Etwas anderes“ (29.10.2026) */
.ek-anders-termin{border:1.5px dashed rgba(184,144,69,.7);box-shadow:none}
.ek-anders-termin:hover{border-color:var(--ocker)}
/* 29.10.2026: Wege bei „Etwas anderes“ direkt unter den Karten (Dustin: nicht nach oben schicken, wo man schon war). Mit Skript zu, bis die Karte gewählt ist. */
.sp-anders{margin-top:clamp(2.2rem,5vw,3.4rem);scroll-margin-top:110px}
.sp-anders:focus{outline:none}
.sp-anders h3{font-size:clamp(1.6rem,1.15rem + 1.4vw,2.2rem);margin:.5rem 0 .8rem}
.sp-anders .einleitung{max-width:46rem;font-size:1.06rem;color:var(--leise);margin:0 0 1.6rem}
.js .sp-anders:not(.aufgeklappt){display:none}
@media (prefers-reduced-motion:no-preference){.sp-anders.aufgeklappt{animation:sp-erscheinen .5s var(--weich) both}}
#schwerpunkte .feld-anders[aria-expanded="true"] .kern{background:var(--ocker-hauch);outline-color:var(--ocker)}
#schwerpunkte .feld-anders[aria-expanded="true"] .mehr i svg{transform:rotate(90deg)}
#schwerpunkte .feld-anders .mehr i svg{transition:transform .35s var(--weich)}

/* ================================================================ Schaubild „Ablauf“ von Dirk Ullrich (Inline-SVG, Desktop und Mobil, 02.11.2026) */
.sb2{margin:2rem 0;padding:0;background:none}
.sb2 svg{display:block;width:100%;height:auto}
.sb2 .sb2-mobil{display:none}
@media (max-width:760px){.sb2 .sb2-desktop{display:none}.sb2 .sb2-mobil{display:block}}
[data-theme="dark"] .sb2 [fill="#FBF8F2"]{fill:var(--weiss)}
[data-theme="dark"] .sb2 [stroke="#E7E2D8"]{stroke:rgba(250,247,240,.16)}
[data-theme="dark"] .sb2 rect[fill="#ffffff"],[data-theme="dark"] .sb2 circle[fill="#ffffff"]{fill:#26201A}
[data-theme="dark"] .sb2 rect[fill="#14120f"]{fill:#0F0D0A;stroke:rgba(250,247,240,.14)}
[data-theme="dark"] .sb2 circle[fill="#14120f"]{fill:var(--tinte)}
[data-theme="dark"] .sb2 rect[fill="#F0E4C8"][stroke-dasharray]{fill:#3A3023}
[data-theme="dark"] .sb2 text[fill="#14120f"]:not([text-anchor="middle"]){fill:var(--tinte)}
[data-theme="dark"] .sb2 text[fill="#3a362f"]{fill:var(--text)}
[data-theme="dark"] .sb2 text[fill="#767066"]{fill:var(--leise)}
[data-theme="dark"] .sb2 text[fill="#8a6c34"]{fill:var(--ocker)}
/* Mobil, Wegweiser Schritt 1: ohne Kasten, ohne Balken, ohne „Schritt 1 von 3“. Der helle Kasten erscheint mit Schritt 2 (Dustin, 08.11.2026) */
@media (max-width:900px){
  .ww{transition:background-color .45s var(--weich),box-shadow .45s var(--weich)}
  .ww>.kern{transition:background-color .45s var(--weich),box-shadow .45s var(--weich)}
  .ww[data-stufe="1"],[data-theme="dark"] .ww[data-stufe="1"]{background:transparent;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .ww[data-stufe="1"]>.kern,[data-theme="dark"] .ww[data-stufe="1"]>.kern{background:transparent;box-shadow:none;padding:0;overflow:visible}
  .ww[data-stufe="1"] .ww-balken,.ww[data-stufe="1"] .ww-schritt{display:none}
}