/* =====================================================================
   Gemeinsame Basis für jeanette-nentwig.de und die-auto-biografie.de
   Farben und Schriften setzt die jeweilige Themen-Datei über :root.
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.7 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,picture,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-hell);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:300;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;transition:top .2s}
.skip:focus{top:16px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 28px}
.wrap-eng{max-width:820px}
@media (max-width:640px){.wrap{padding:0 20px}}

/* ---------- Atmosphäre: feines Korn und Lichtkegel über der ganzen Seite ---------- */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1100px 620px at 78% -8%,var(--schein),transparent 62%),radial-gradient(900px 600px at -10% 38%,var(--schein-2),transparent 60%)}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:2}

/* ---------- Typografie ---------- */
.disp{font-family:var(--disp);font-weight:var(--disp-w,400);letter-spacing:-.022em;line-height:1.02}
h1.disp{font-size:clamp(46px,8.2vw,118px)}
h2.disp{font-size:clamp(34px,5vw,66px);line-height:1.06}
h3.disp{font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.012em}
.disp em{font-style:italic;color:var(--accent-hell)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hell)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.lead{font-size:clamp(18px,1.55vw,22px);line-height:1.6;color:var(--text-2)}
.muted{color:var(--muted)}
.prosa p{color:var(--text-2);max-width:68ch}
.prosa p+p{margin-top:1.15em}
.prosa a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1.5px;transition:color .2s}
.prosa a:hover{color:var(--accent-hell)}
.prosa strong{color:var(--text);font-weight:600}

/* ---------- Buttons · Hausstil (Pill + rotierender Licht-Rahmen + Shimmer) ---------- */
@property --ga{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --gao{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --gp{syntax:'<percentage>';initial-value:5%;inherits:false}
@property --gs{syntax:'<color>';initial-value:#ffffff;inherits:false}
.btn{--ease:cubic-bezier(.22,1,.36,1);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 14px/1.5 var(--body);letter-spacing:-.01em;padding:11px 22px;border-radius:9999px;border:1px solid transparent;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .22s var(--ease),background .2s ease,box-shadow .2s var(--ease),color .2s,--gao .8s cubic-bezier(.25,1,.5,1),--gp .8s cubic-bezier(.25,1,.5,1),--gs .8s cubic-bezier(.25,1,.5,1)}
.btn>*{position:relative;z-index:1}
.btn .ar{display:inline-block;font-size:1.05em;line-height:1;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.btn:hover .ar{transform:translateX(3px)}
.btn:active{scale:.97}
.b-prim{--hl:#ffffff;--hl2:#ffffff;--fill:var(--accent);color:var(--accent-ink);background:linear-gradient(var(--fill),var(--fill)) padding-box,conic-gradient(from calc(var(--ga) - var(--gao)),transparent,var(--hl) var(--gp),var(--gs) calc(var(--gp)*2),var(--hl) calc(var(--gp)*3),transparent calc(var(--gp)*4)) border-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 34px -12px var(--accent);animation:btnGa 4.5s linear infinite}
.b-prim::after{content:"";pointer-events:none;position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:-1;width:100%;aspect-ratio:1;background:linear-gradient(-50deg,transparent,var(--hl),transparent);-webkit-mask-image:radial-gradient(circle at bottom,transparent 40%,#000);mask-image:radial-gradient(circle at bottom,transparent 40%,#000);opacity:.42;animation:btnShimmer 6s linear infinite}
.b-prim:is(:hover,:focus-visible){--gp:20%;--gao:95deg;--gs:var(--hl2);--fill:var(--accent-hover);transform:translateY(-2px)}
.b-ghost{background:rgba(255,255,255,.06);color:var(--text);font-weight:500;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.b-ghost:hover{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transform:translateY(-2px)}
.b-lg{padding:14px 26px;font-size:15px}
@keyframes btnGa{to{--ga:360deg}}
@keyframes btnShimmer{to{rotate:360deg}}

/* ---------- Lichtring: wandernder Schein um Karten und Bilder ---------- */
.ring{position:relative;border-radius:var(--r,26px);isolation:isolate}
.ring::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ga),transparent 0 62%,var(--accent-hell) 74%,#fff 80%,var(--accent-hell) 86%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:btnGa 9s linear infinite;opacity:.85}
.ring::after{content:"";position:absolute;inset:-28px;z-index:-2;border-radius:inherit;background:radial-gradient(closest-side,var(--schein),transparent);filter:blur(22px);opacity:.9;pointer-events:none}

/* ---------- Kopfleiste ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,box-shadow .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.nav.sc{background:var(--nav-bg);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.nav.weg{transform:translateY(-100%)}
.nav-in{display:flex;align-items:center;gap:26px;height:78px}
.marke{margin-right:auto;display:flex;flex-direction:column;line-height:1.1}
.marke b{font:var(--disp-w,400) 23px/1.05 var(--disp);letter-spacing:-.01em}
.marke span{font:500 10.5px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.nav-links{display:flex;gap:24px}
.nav-links a{position:relative;font:500 14.5px/1 var(--body);color:var(--text-2);padding:8px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent-hell);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hell));transform-origin:0 50%;transform:scaleX(0)}
.burger{display:none;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);align-items:center;justify-content:center;flex-direction:column;gap:6px}
.burger i{display:block;width:18px;height:1.6px;background:var(--text);border-radius:2px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.burger[aria-expanded=true] i:first-child{transform:translateY(3.8px) rotate(45deg)}
.burger[aria-expanded=true] i:last-child{transform:translateY(-3.8px) rotate(-45deg)}
.menue{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:110px 28px 40px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menue.auf{opacity:1;visibility:visible}
.menue a.m{display:flex;align-items:baseline;gap:14px;padding:13px 0;font:var(--disp-w,400) clamp(30px,8vw,44px)/1.1 var(--disp);letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.menue a.m small{font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.menue .btn{margin-top:30px;align-self:flex-start}
@media (max-width:1060px){.nav-links,.nav .nav-cta{display:none}.burger{display:flex}}

/* ---------- Abschnitte ---------- */
.sek{padding:clamp(84px,11vw,150px) 0}
.sek-kopf{display:grid;gap:22px;margin-bottom:clamp(40px,5vw,68px);max-width:900px}
.karte{position:relative;background:var(--card);border-radius:26px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.karte-p{padding:clamp(26px,3.2vw,44px)}
/* Zeiger-Lichtfleck auf Karten */
.licht{--mx:50%;--my:50%}
.licht::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--mx) var(--my),var(--schein),transparent 60%);opacity:0;transition:opacity .4s}
.licht:hover::before{opacity:1}
.licht>*{position:relative;z-index:1}
.bild{position:relative;overflow:hidden;border-radius:22px;background:var(--card)}
.bild picture{display:block;width:100%;height:100%}
.bild img{width:100%;height:100%;object-fit:cover}
.bild.ring{overflow:hidden}
.bild.ring::before{inset:0;z-index:2;pointer-events:none}
.bild.ring::after{display:none}
.bild.par img{height:116%;will-change:transform}
figcaption{font:400 13px/1.5 var(--body);color:var(--muted);margin-top:12px}

/* ---------- Einblenden (nur mit JS und Bewegungsfreigabe versteckt) ---------- */
html:where(.js.bew) :where([data-rv]){opacity:0}
html:where(.js.bew) :where([data-st])>*{opacity:0}
html:where(.js.bew) :where([data-woerter]){opacity:0}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .04em .16em;margin:-.06em -.04em -.16em}
.wi{display:inline-block;will-change:transform}

/* ---------- Laufband ---------- */
.band{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.band-in{display:flex;gap:56px;width:max-content;animation:band 46s linear infinite}
.band span{font:var(--disp-w,400) clamp(22px,2.6vw,34px)/1 var(--disp);font-style:italic;color:var(--text-2);white-space:nowrap;display:flex;align-items:center;gap:56px}
.band span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
@keyframes band{to{transform:translateX(-50%)}}

/* ---------- Kontaktblock ---------- */
.ruf{position:relative;border-radius:34px;overflow:hidden;padding:clamp(40px,6vw,88px);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.ruf-bg{position:absolute;inset:0;z-index:0}
.ruf-bg picture{position:absolute;inset:0}
.ruf-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.ruf-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 8%,color-mix(in srgb,var(--bg) 70%,transparent) 55%,color-mix(in srgb,var(--bg) 35%,transparent))}
.ruf>*:not(.ruf-bg){position:relative;z-index:1}
.ruf h2{max-width:16ch}
.ruf .lead{max-width:52ch;margin-top:20px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.kontaktzeile{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:30px;font-size:15px;color:var(--text-2)}
.kontaktzeile a{color:var(--text);border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .2s}
.kontaktzeile a:hover{border-color:var(--accent-hell)}

/* ---------- Fuß ---------- */
.fuss{padding:70px 0 44px;border-top:1px solid var(--line);margin-top:40px}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.fuss h4{font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.fuss li+li{margin-top:9px}
.fuss a{color:var(--text-2);transition:color .2s}
.fuss a:hover{color:var(--text)}
.fuss-marke b{display:block;font:var(--disp-w,400) 30px/1.1 var(--disp);letter-spacing:-.015em}
.fuss-marke p{color:var(--muted);margin-top:12px;max-width:34ch;font-size:15px}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:820px){.fuss-raster{grid-template-columns:1fr;gap:34px}}

/* ---------- Rechtstexte ---------- */
.recht{padding:170px 0 90px}
.recht h1{font-size:clamp(40px,6vw,72px);margin-bottom:38px}
.recht h2{font:600 21px/1.3 var(--body);margin:44px 0 12px;color:var(--text)}
.recht h3{font:600 17px/1.4 var(--body);margin:26px 0 8px;color:var(--text)}
.recht p,.recht li{color:var(--text-2);max-width:74ch}
.recht p+p{margin-top:.9em}
.recht ul{list-style:disc;padding-left:22px;margin-top:8px}
.recht a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}

/* ---------- Nur in der Vorschau: Hinweise auf noch fehlende Inhalte ---------- */
.entwurf{display:inline-flex;width:fit-content;justify-self:start;align-items:center;gap:9px;font:600 11.5px/1.3 var(--body);letter-spacing:.06em;color:#f6d98a;background:rgba(246,217,138,.09);box-shadow:inset 0 0 0 1px rgba(246,217,138,.32);padding:7px 13px;border-radius:9999px;margin-bottom:18px}
.entwurf::before{content:"";width:7px;height:7px;border-radius:50%;background:#f6d98a;flex:none}
.offen{border-radius:26px;padding:clamp(28px,4vw,52px);background:repeating-linear-gradient(135deg,rgba(246,217,138,.05) 0 14px,transparent 14px 28px),var(--card);box-shadow:inset 0 0 0 1px rgba(246,217,138,.3)}
.offen h3{font:600 20px/1.3 var(--body);color:#f6d98a;margin-bottom:10px}
.offen p{color:var(--text-2);max-width:62ch}
.offen ul{margin-top:14px;display:grid;gap:7px;color:var(--text-2)}
.offen li{padding-left:20px;position:relative}
.offen li::before{content:"";position:absolute;left:0;top:.75em;width:9px;height:1.5px;background:#f6d98a}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* =====================================================================
   Feinschliff Schriftbild
   ===================================================================== */
.disp{text-wrap:balance;font-optical-sizing:auto;font-kerning:normal;font-feature-settings:"kern","liga","dlig"}
.lead,.prosa p,.station-text p{text-wrap:pretty}
.prosa,.lead{font-family:var(--lese,var(--body));font-variant-numeric:oldstyle-nums proportional-nums}
.initial>p:first-child::first-letter{float:left;font:var(--disp-w) 4.9em/.78 var(--disp);padding:.08em .12em 0 0;color:var(--accent-hell)}
.kapitaelchen{font-variant-caps:all-small-caps;letter-spacing:.09em}
.zitat{position:relative;font:var(--disp-w) clamp(30px,4.2vw,58px)/1.16 var(--disp);font-style:italic;letter-spacing:-.012em;text-wrap:balance;padding-left:clamp(22px,3vw,44px)}
.zitat::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:2px;background:linear-gradient(var(--accent-hell),transparent)}
.zitat cite{display:block;margin-top:22px;font:500 13px/1.4 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* =====================================================================
   Lichtband: ein weicher Lichtschwall, der über große Flächen zieht
   ===================================================================== */
.lichtband{position:absolute;inset:-20% -60%;z-index:0;pointer-events:none;background:linear-gradient(104deg,transparent 42%,var(--lichtband,rgba(255,255,255,.075)) 49%,rgba(255,255,255,.02) 53%,transparent 60%);mix-blend-mode:screen;animation:lichtband 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes lichtband{0%{transform:translateX(-46%)}62%,100%{transform:translateX(46%)}}

/* =====================================================================
   Lichtschweif: eine Lichtspur, die beim Rollen durch die ganze Seite läuft
   ===================================================================== */
.schweif{position:absolute;left:0;top:0;z-index:1;pointer-events:none;overflow:visible}
.schweif path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.schweif .bahn{stroke:var(--line);stroke-width:1}
.schweif .hof2{stroke:var(--schweif);stroke-width:16;opacity:.05}
.schweif .hof1{stroke:var(--schweif);stroke-width:6;opacity:.14}
.schweif .spur{stroke:var(--schweif);stroke-width:1.5;opacity:.9}
.schweif .spitze{stroke:#fff;stroke-width:2.4;opacity:.95}
.schweif-kopf{position:absolute;left:0;top:0;z-index:1;width:180px;height:180px;margin:-90px 0 0 -90px;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,#fff 0 2.2%,var(--schweif) 5%,color-mix(in srgb,var(--schweif) 34%,transparent) 20%,transparent 70%);opacity:0;will-change:transform;transition:opacity .5s}
.schweif-kopf.an{opacity:1}

/* =====================================================================
   Reise: Stationen. Ohne Skript und auf dem Handy ein ruhiger Stapel,
   am großen Bildschirm eine gepinnte Bühne, durch die man hindurchrollt.
   ===================================================================== */
.reise{position:relative}
.reise-liste{display:grid;gap:18px;padding:0 28px;max-width:1200px;margin:0 auto}
.station{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(78svh,640px);border-radius:26px;overflow:hidden;isolation:isolate;background:var(--card)}
.station-bild{position:absolute;inset:0;z-index:-2}
.station-bild picture{position:absolute;inset:0}
.station-bild img{width:100%;height:100%;object-fit:cover}
.station::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 10%,transparent) 18%,color-mix(in srgb,var(--bg) 74%,transparent) 62%,color-mix(in srgb,var(--bg) 96%,transparent))}
.station-text{padding:clamp(24px,4vw,56px);max-width:640px}
.station-nr{display:flex;align-items:center;gap:14px;font:600 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hell)}
.station-nr b{font:italic var(--disp-w) clamp(54px,6vw,92px)/.9 var(--disp);letter-spacing:-.03em;color:var(--accent-hell)}
.station h3.disp{font-size:clamp(40px,6vw,92px);margin:14px 0 14px;line-height:1}
.station-text p{font-family:var(--lese,var(--body));font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--text-2);max-width:34ch}
.station .btn{margin-top:26px}
.reise-film,.reise-schiene,.reise-hinweis{display:none}
@media (max-width:640px){.reise-liste{padding:0 20px}}

.reise.pin{height:calc(var(--n)*var(--schritt) + 100vh)}
.reise.pin .reise-buehne{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg)}
.reise.pin .reise-liste{display:block;position:absolute;inset:0;max-width:none;padding:0;margin:0}
.reise.pin .station{position:absolute;inset:0;min-height:0;border-radius:0;background:none;visibility:hidden;isolation:auto;overflow:visible}
.reise.pin .station-bild{z-index:1}
.reise.pin .station::after{display:none}
.reise.pin .station-bild{will-change:transform,opacity,filter}
.reise.pin .reise-schleier{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 88%,transparent),color-mix(in srgb,var(--bg) 52%,transparent) 36%,transparent 68%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 62%,transparent),transparent 22%,transparent 62%,var(--bg))}
.reise.pin .station-text{position:absolute;z-index:4;left:max(28px,calc((100vw - 1200px)/2 + 28px));bottom:clamp(70px,13vh,150px);padding:0;will-change:transform,opacity}
.reise.pin .reise-film{display:block;position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.reise.pin .reise-schiene{display:flex;flex-direction:column;gap:4px;position:absolute;z-index:5;right:max(24px,calc((100vw - 1200px)/2 + 28px));top:50%;translate:0 -50%;padding:12px 16px 12px 20px;border-radius:20px;background:color-mix(in srgb,var(--bg) 46%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px var(--line)}
.reise-schiene button{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:9px 0;font:500 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .4s}
.reise-schiene button i{width:26px;height:1.5px;background:currentColor;transition:width .5s cubic-bezier(.22,1,.36,1),background .4s,box-shadow .4s}
.reise-schiene button:hover{color:var(--text)}
.reise-schiene button[aria-current=true]{color:var(--text)}
.reise-schiene button[aria-current=true] i{width:64px;background:var(--accent-hell);box-shadow:0 0 14px var(--schweif),0 0 2px #fff}
.reise.pin .reise-hinweis{display:block;position:absolute;z-index:5;left:max(28px,calc((100vw - 1200px)/2 + 28px));bottom:30px;font:500 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.reise.pin .reise-balken{position:absolute;z-index:5;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.reise.pin .reise-balken i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,transparent,var(--schweif) 70%,#fff);box-shadow:0 0 16px var(--schweif)}

.mauslicht{position:fixed;left:0;top:0;z-index:60;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--schweif) 26%,transparent),color-mix(in srgb,var(--schweif) 9%,transparent) 42%,transparent 72%);mix-blend-mode:screen;opacity:0;transition:opacity .6s;will-change:transform}
.mauslicht.an{opacity:1}
.mausschweif{position:fixed;inset:0;z-index:61;width:100vw;height:100vh;pointer-events:none}

.reise .lichtband{display:none}
.reise.pin .lichtband{display:block;z-index:3}

/* =====================================================================
   Runde 2 (09.10.2026): Lesbarkeit, einladendere Knöpfe, Fortschritt oben,
   flüssigere Reise
   ===================================================================== */

/* ---------- Lesbarkeit ---------- */
body{font-size:18px;line-height:1.72}
body::after{opacity:.03}
.eyebrow{font-size:13.5px;letter-spacing:.15em;font-weight:700}
.lead{color:var(--text)}
.prosa p{color:var(--text-2)}
.muted{color:var(--muted)}
figcaption{font-size:14.5px;color:var(--text-2)}
.nav-links a{font-size:15.5px;color:var(--text);font-weight:500}
.marke span{font-size:11.5px;letter-spacing:.16em;color:var(--text-2)}
.fuss{font-size:16px}
.fuss h4{font-size:12.5px;color:var(--text-2)}
.fuss a,.fuss li{color:var(--text-2)}
.fuss-marke p{color:var(--text-2);font-size:16px}
.fuss-unten{font-size:14px;color:var(--text-2)}
.kontaktzeile{font-size:16px;color:var(--text)}
.recht p,.recht li{color:var(--text)}
.mauslicht{width:460px;height:460px;margin:-230px 0 0 -230px;background:radial-gradient(closest-side,color-mix(in srgb,var(--schweif) 15%,transparent),color-mix(in srgb,var(--schweif) 5%,transparent) 45%,transparent 72%)}
.nav-prog{display:none}

/* ---------- Knöpfe: größer, klarer, mit Pfeil im Kreis ---------- */
.btn{font-size:15px;padding:12px 24px;gap:10px;letter-spacing:0}
.b-lg{padding:16px 30px;font-size:16.5px}
.b-prim{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 14px 44px -12px var(--accent),0 2px 0 rgba(255,255,255,.12) inset}
.b-prim:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),0 20px 60px -12px var(--accent)}
.b-prim .ar{display:grid;place-items:center;width:28px;height:28px;margin-right:-10px;border-radius:50%;background:rgba(0,0,0,.2);font-size:15px;transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s}
.b-prim:hover .ar{transform:translateX(4px);background:rgba(0,0,0,.32)}
.b-ghost{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-weight:600}
.b-ghost:hover{background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.36)}
.b-ghost .ar{display:inline-block;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.b-ghost:hover .ar{transform:translate(3px,0)}
.b-ghost .runter{display:inline-block;animation:runter 1.8s ease-in-out infinite}
@keyframes runter{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ---------- Fortschritt ganz oben ---------- */
.fortschritt{position:fixed;left:0;right:0;top:0;z-index:130;height:4px;background:rgba(255,255,255,.07);pointer-events:none}
.fortschritt i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--accent-hell) 78%,#fff);box-shadow:0 0 16px var(--schweif),0 0 3px #fff;border-radius:0 4px 4px 0}
.fortschritt-zahl{position:fixed;left:50%;top:14px;z-index:130;translate:-50% 0;min-width:58px;text-align:center;padding:8px 13px;border-radius:9999px;font:700 12px/1 var(--body);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--text);background:var(--nav-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none;opacity:0;transition:opacity .45s}
.fortschritt-zahl.an{opacity:1}
@media (max-width:1060px){.fortschritt-zahl{top:auto;bottom:16px}}

/* ---------- Reise: Text immer auf einer Glasfläche, Stand oben, Lichtblüte, Blende ---------- */
.station-nr{font-size:13.5px;letter-spacing:.15em;font-weight:700}
.station-text p{color:var(--text);font-size:clamp(19px,1.7vw,23px)}
.reise.pin .station-text{padding:clamp(26px,3vw,44px);border-radius:28px;max-width:600px;background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 40px 90px -40px #000}
.reise.pin .reise-schleier{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 62%,transparent),transparent 24%,transparent 62%,color-mix(in srgb,var(--bg) 92%,transparent))}
.reise.pin .station-bild{will-change:transform,opacity,clip-path,filter;transform-origin:50% 52%}
.reise.pin .reise-balken{display:none}
.reise-stand,.reise-schein,.reise-iris{display:none}
.reise.pin .reise-stand{display:block;position:absolute;z-index:5;top:96px;left:max(28px,calc((100vw - 1200px)/2 + 28px));right:max(28px,calc((100vw - 1200px)/2 + 28px))}
.reise-stand-text{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;font:700 13px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--text);text-shadow:0 1px 14px rgba(0,0,0,.9)}
.reise-stand-text b{color:var(--accent-hell)}
.reise-stand-text span{margin-left:8px;font:var(--disp-w) 22px/1 var(--disp);font-style:italic;letter-spacing:0;text-transform:none;color:var(--text)}
.reise-segmente{display:flex;gap:8px}
.reise-segmente span{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden}
.reise-segmente i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent-hell),#fff);box-shadow:0 0 12px var(--schweif)}
.reise.pin .reise-schein{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(58% 52% at 52% 46%,var(--bluete,rgba(255,224,190,.5)),transparent 72%)}
.reise.pin .reise-iris{display:block;position:absolute;z-index:2;left:50%;top:52%;translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 2px var(--accent-hell),0 0 70px 8px var(--schweif),inset 0 0 70px 8px color-mix(in srgb,var(--schweif) 45%,transparent)}
.reise.pin .reise-schiene button{font-size:13px;color:var(--text-2)}
.reise.pin .reise-hinweis{font-size:12.5px;color:var(--text);text-shadow:0 1px 12px rgba(0,0,0,.9)}
.reise.pin .reise-stand{padding:14px 18px 16px;border-radius:18px;background:color-mix(in srgb,var(--bg) 58%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.reise-stand-text{text-shadow:none}

/* ---------- Runde 3 (09.10.2026): die Reise zeichnet auf einer Leinwand, nichts Bewegtes liegt mehr im Dokument ---------- */
.reise-kino{display:none}
.reise.pin .reise-kino{display:block;position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;transition:opacity .6s}
.reise.pin.kino .reise-kino{opacity:1}
.reise.pin.kino .station-bild{visibility:hidden}
.reise.pin .station-bild{will-change:opacity;transform:none!important;filter:none!important;clip-path:none!important}
.reise .lichtband,.reise.pin .lichtband,.reise-schein,.reise-iris,.reise-film{display:none!important}

/* Prozentzahl unten rechts (oben läuft der Balken), Stand der Reise ganz oben in der Bühne */
.fortschritt-zahl,.fortschritt-zahl.an{left:auto;right:18px;top:auto;bottom:18px;translate:none}
.reise.pin .reise-stand{top:22px}
@media (max-height:760px){.reise.pin .station-text{bottom:56px}.station h3.disp{font-size:clamp(36px,5vw,68px)}}
.reise.pin .reise-stand{top:92px;transition:top .5s cubic-bezier(.22,1,.36,1)}
html.nav-weg .reise.pin .reise-stand{top:22px}

/* =====================================================================
   Runde 4 (09.10.2026): hochwertigere Knöpfe, Reise mit klarer Bedienung
   Grundsätze: nur transform/opacity bewegen, eigene Kurven statt Standard-Easing,
   Drücken sofort spürbar (scale .97), Hover nur mit Maus, nichts dreht sich ohne Grund.
   ===================================================================== */
:root{--aus:cubic-bezier(.23,1,.32,1);--hin-her:cubic-bezier(.65,0,.35,1);
  --k-oben:color-mix(in srgb,var(--accent) 80%,#fff);--k-unten:color-mix(in srgb,var(--accent) 84%,#000);
  --k-rand:color-mix(in srgb,var(--accent) 62%,#000);--k-schatten:color-mix(in srgb,var(--accent) 70%,#000);--k-text:0 1px 0 rgba(0,0,0,.22)}

/* ---------- Knöpfe ---------- */
.btn{min-height:54px;padding:0 26px;gap:12px;border:1.5px solid transparent;border-radius:9999px;font:600 16.5px/1 var(--body);letter-spacing:.005em;scale:1;-webkit-user-select:none;user-select:none;
  transition:transform 160ms var(--aus),box-shadow 240ms var(--aus),filter 200ms ease,background-color 200ms ease,border-color 200ms ease}
.btn:active{scale:1;transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--accent-hell);outline-offset:3px}
.b-lg{min-height:62px;padding:0 32px;font-size:18px}
.nav .nav-cta{min-height:46px;padding:0 20px;font-size:15.5px}

/* Hauptknopf: gewölbte Fläche mit Glanzkante, ruhiger Lichtring im Rand, weicher Farbschatten */
.b-prim{color:var(--accent-ink);text-shadow:var(--k-text);
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 54%) padding-box,linear-gradient(180deg,var(--k-oben),var(--k-unten)) padding-box,conic-gradient(from var(--ga),var(--k-rand) 0 56%,rgba(255,255,255,.95) 71%,var(--k-rand) 86% 100%) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.5),0 10px 22px -8px var(--k-schatten),0 26px 52px -22px var(--k-schatten);
  animation:btnGa 7s linear infinite}
.b-prim:is(:hover,:focus-visible){transform:none}
/* Statt des dauernd kreisenden Schimmers: ein einzelner Lichtstreif, der beim Überfahren einmal durchzieht */
.b-prim::after{left:0;top:0;translate:none;width:100%;height:100%;aspect-ratio:auto;z-index:0;border-radius:inherit;opacity:1;animation:none;-webkit-mask-image:none;mask-image:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.36) 49%,transparent 64%);transform:translateX(-125%);transition:transform 0s}
@media (hover:hover) and (pointer:fine){
  .b-prim:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.46),inset 0 -1px 0 rgba(0,0,0,.22),0 2px 3px rgba(0,0,0,.5),0 16px 30px -8px var(--k-schatten),0 34px 64px -22px var(--k-schatten)}
  .b-prim:hover::after{transform:translateX(125%);transition:transform 760ms var(--aus)}
  .b-prim:active{transform:scale(.97);filter:brightness(.98)}
}

/* Zweitknopf: klares Glas mit sichtbarem Rand, gut lesbar auf jedem Bild */
.b-ghost,.reise.pin .station-text .b-prim{color:#fff;font-weight:600;text-shadow:none;animation:none;
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.07));border-color:rgba(255,255,255,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 10px 24px -14px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.reise.pin .station-text .b-prim::after{display:none}
@media (hover:hover) and (pointer:fine){
  .b-ghost:hover,.reise.pin .station-text .b-prim:hover{transform:translateY(-1px);filter:none;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.12));border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -14px rgba(0,0,0,.9)}
  .b-ghost:active,.reise.pin .station-text .b-prim:active{transform:scale(.97)}
}
.btn:disabled{opacity:.34;pointer-events:none}

/* Pfeil im Kreis: beim Überfahren fährt der Pfeil hinaus und ein neuer herein */
.btn .ar,.b-prim .ar,.b-ghost .ar{position:relative;display:block;flex:none;width:30px;height:30px;margin:0 -12px 0 0;border-radius:50%;overflow:hidden;background:rgba(0,0,0,.2);box-shadow:inset 0 1px 2px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.2);transform:none;transition:background-color 200ms ease}
.btn .ar.links{margin:0 0 0 -12px}
.b-ghost .ar,.reise.pin .station-text .b-prim .ar{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.btn .ar:not(.tausch){display:grid;place-items:center;font-size:16px}
.btn .ar.tausch{font-size:0}
.btn .ar.tausch::before,.btn .ar.tausch::after{content:attr(data-p);position:absolute;inset:0;display:grid;place-items:center;font:600 16px/1 var(--body);transition:transform 340ms var(--aus)}
.btn .ar.tausch::after{transform:translateX(-115%)}
.btn .ar.tausch.links::after{transform:translateX(115%)}
.btn .ar.tausch[data-p="↓"]::after{transform:translateY(-115%)}
.btn .ar.tausch[data-p="↗"]::after{transform:translate(-115%,115%)}
@media (hover:hover) and (pointer:fine){
  .btn:hover .ar,.b-prim:hover .ar{transform:none;background:rgba(0,0,0,.3)}
  .b-ghost:hover .ar,.reise.pin .station-text .b-prim:hover .ar{background:rgba(255,255,255,.24)}
  .btn:hover .ar.tausch::before{transform:translateX(115%)}
  .btn:hover .ar.tausch.links::before{transform:translateX(-115%)}
  .btn:hover .ar.tausch[data-p="↓"]::before{transform:translateY(115%)}
  .btn:hover .ar.tausch[data-p="↗"]::before{transform:translate(115%,-115%)}
  .btn:hover .ar.tausch::after{transform:none}
}

/* ---------- Reise: Bedienleiste, größere Raumliste, klarer Hinweis ---------- */
.reise-steuerung{display:none}
.reise.pin .reise-steuerung{display:flex;align-items:center;justify-content:space-between;gap:20px;position:absolute;z-index:6;bottom:26px;left:max(28px,calc((100vw - 1200px)/2 + 28px));right:max(28px,calc((100vw - 1200px)/2 + 28px))}
.reise-knoepfe{display:flex;align-items:center;gap:14px;margin-left:auto}
.reise-zaehler{min-width:132px;text-align:center;font:600 16.5px/1 var(--body);font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.95)}
.reise-weg{padding:16px 4px;font:600 16px/1 var(--body);color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:6px;text-shadow:0 1px 14px rgba(0,0,0,.95);transition:text-decoration-color 200ms ease}
.reise-weg:hover{text-decoration-color:#fff}
.reise.pin .station-text{bottom:118px}
.reise.pin .reise-hinweis{left:auto;right:max(28px,calc((100vw - 1200px)/2 + 28px));bottom:106px;max-width:340px;padding:12px 16px;border-radius:16px;font:500 15.5px/1.45 var(--body);letter-spacing:0;text-transform:none;text-align:right;color:#fff;text-shadow:none;background:color-mix(in srgb,var(--bg) 62%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:opacity 400ms ease}
.reise.pin .reise-schiene{top:46%}
.reise-schiene::before{content:attr(aria-label);display:block;margin:2px 0 6px;text-align:right;font:700 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hell)}
.reise.pin .reise-schiene button{min-height:44px;padding:0;font-size:14.5px;letter-spacing:.1em;color:#fff;opacity:.72;transition:opacity 200ms ease}
.reise.pin .reise-schiene button:hover,.reise.pin .reise-schiene button[aria-current=true]{opacity:1}
html.in-reise .fortschritt-zahl{opacity:0}
@media (max-height:700px){.reise.pin .reise-schiene{display:none}.reise.pin .station-text{bottom:104px}.reise.pin .reise-hinweis{display:none}}

/* Niedrige Fenster: Textfeld kompakter, damit es die Kopfzeile der Reise nie berührt */
@media (max-height:760px){
  .reise.pin .reise-stand,html.nav-weg .reise.pin .reise-stand{top:18px}
  .reise.pin .station-text{padding:22px 28px;bottom:104px}
  .reise.pin .station-nr b{font-size:44px}
  .reise.pin .station h3.disp{font-size:clamp(32px,4.4vw,54px);margin:8px 0 8px}
  .reise.pin .station-text p{font-size:18px}
  .reise.pin .station .btn{margin-top:16px;min-height:52px;font-size:16.5px}
}

/* =====================================================================
   Runde 5 (09.10.2026): Schriftbild nach Apple-Art, ruhigere Seiten.
   Eine serifenlose Familie für alles: auf Apple-Geräten die Systemschrift
   San Francisco, sonst die mitgelieferte Inter. Betonung in Überschriften
   über Farbe, nicht über Kursive. Kleine Zeilen ohne Versalien.
   Radien: Knöpfe rund, Karten 28px, Bilder 22px.
   ===================================================================== */
:root{--sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --disp:var(--sans);--body:var(--sans);--lese:var(--sans);--disp-w:600}
html{scroll-padding-top:84px}
body{font:400 19px/1.58 var(--body);letter-spacing:-.011em;font-feature-settings:"kern","liga","calt";font-optical-sizing:auto}
.disp{font-family:var(--disp);font-weight:600;font-style:normal;letter-spacing:-.028em;line-height:1.05;font-variation-settings:normal;font-optical-sizing:auto;font-feature-settings:"kern","liga","calt";text-wrap:balance}
h1.disp{font-size:clamp(46px,7.4vw,112px);line-height:1;letter-spacing:-.036em}
h2.disp{font-size:clamp(34px,4.6vw,64px);line-height:1.06}
h3.disp{font-size:clamp(23px,2.2vw,30px);line-height:1.16;letter-spacing:-.02em}
.disp em{font-style:normal;font-weight:inherit;color:var(--accent-hell)}
.eyebrow{display:block;font:600 17px/1.2 var(--body);letter-spacing:-.01em;text-transform:none;color:var(--accent-hell)}
.eyebrow::before{display:none}
.lead{font-family:var(--body);font-size:clamp(20px,1.75vw,24px);line-height:1.45;font-weight:500;letter-spacing:-.016em;color:var(--text-2);font-variant-numeric:normal}
.prosa{font-family:var(--body);font-variant-numeric:normal}
.prosa p{font-size:19px;line-height:1.62;color:var(--text-2);max-width:64ch}
.prosa .lead{font-size:clamp(20px,1.75vw,24px);line-height:1.45}
figcaption{font-size:15px;color:var(--muted)}
.sek{padding:clamp(88px,11vw,160px) 0}
.sek-kopf{gap:20px;max-width:880px}
.karte{border-radius:28px}
.zitat{font:600 clamp(28px,3.8vw,52px)/1.14 var(--disp);font-style:normal;letter-spacing:-.028em}
.zitat cite{font:500 16px/1.4 var(--body);letter-spacing:0;text-transform:none}

/* Kopfleiste und Fuß */
.nav-in{height:68px}
.marke b{font:600 19px/1.1 var(--disp);letter-spacing:-.022em}
.marke span{font:400 12.5px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:3px}
.nav-links{gap:28px}
.nav-links a{font:500 15.5px/1 var(--body);letter-spacing:-.01em;color:var(--text-2)}
.menue a.m{font:600 clamp(28px,7vw,40px)/1.12 var(--disp);letter-spacing:-.03em}
.menue a.m small{font:400 14px/1 var(--body);letter-spacing:0;text-transform:none}
.fuss h4{font:600 14px/1.2 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.fuss-marke b{font:600 24px/1.1 var(--disp);letter-spacing:-.024em}
.fuss-unten span{display:flex;flex-wrap:wrap;gap:6px 22px}
.band{padding:26px 0}
.band-in{gap:64px}
.band span{font:600 clamp(20px,2.2vw,28px)/1 var(--disp);font-style:normal;letter-spacing:-.022em;color:var(--muted);gap:64px}
.band span::after{display:none}
.recht h1{font-size:clamp(38px,5.4vw,68px)}
.fortschritt{height:3px}
.b-ghost .runter{animation:none}
.kontaktzeile{font-size:17px;color:var(--text-2)}

/* ---------- Aussage: ein großer Satz, dessen Wörter beim Rollen aufleuchten ---------- */
.aussage{padding:clamp(96px,14vw,200px) 0}
.aussage .satz{font:600 clamp(30px,4.5vw,62px)/1.12 var(--disp);letter-spacing:-.032em;text-wrap:balance;max-width:1040px;color:var(--text)}
.aussage .satz em{font-style:normal;color:var(--accent-hell)}
.aussage .von{margin-top:clamp(22px,2.6vw,34px);font:500 17px/1.4 var(--body);color:var(--muted)}
.aussage .lead{margin-top:clamp(24px,3vw,40px);max-width:62ch}
html:where(.js.bew) .aussage .aw{opacity:.16}
.aw{display:inline;will-change:opacity}

/* ---------- Liste mit stehender Überschrift: links der Titel, rechts große Zeilen ---------- */
.liste2{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,6vw,110px);align-items:start}
.liste2>.kopf{position:sticky;top:112px;display:grid;gap:18px}
.liste2 .zeile{padding:clamp(26px,3vw,42px) 0;border-top:1px solid var(--line)}
.liste2 .zeile:first-child{border-top:0;padding-top:0}
.liste2 .zeile h3{font:600 clamp(24px,2.4vw,34px)/1.15 var(--disp);letter-spacing:-.024em;margin-bottom:12px}
.liste2 .zeile p{color:var(--text-2);max-width:60ch}
@media (max-width:900px){.liste2{grid-template-columns:1fr}.liste2>.kopf{position:static}}

/* ---------- Einblenden der Startansicht über Motion (ohne Skript sichtbar) ---------- */
html:where(.js.bew) :where([data-ein]){opacity:0}
.held h1.disp>span{display:block;animation:hoch .95s var(--aus) both}
.held h1.disp>span+span{animation-delay:.07s}
@keyframes hoch{from{transform:translateY(.32em)}to{transform:none}}

/* ---------- Reise: Schrift und Zeilen im neuen Bild ---------- */
.station-nr{display:block;font:600 17px/1.2 var(--body);letter-spacing:-.01em;text-transform:none;color:var(--accent-hell)}
.station h3.disp{font-size:clamp(36px,4.8vw,68px);line-height:1.02;letter-spacing:-.034em;margin:12px 0 14px}
.station-text p{font-family:var(--body);font-size:clamp(19px,1.6vw,22px);line-height:1.45;font-weight:500;letter-spacing:-.014em;color:var(--text);max-width:32ch}
.reise-stand-text{font:600 15.5px/1 var(--body);letter-spacing:-.01em;text-transform:none}
.reise-stand-text span{font:500 15.5px/1 var(--body);font-style:normal;color:var(--text-2)}
.reise.pin .reise-schiene button{font:500 15.5px/1 var(--body);letter-spacing:-.01em;text-transform:none}
.reise-schiene::before{font:600 14px/1 var(--body);letter-spacing:0;text-transform:none}
.reise-zaehler{font:600 17px/1 var(--body);letter-spacing:-.01em}
@media (max-height:760px){.reise.pin .station h3.disp{font-size:clamp(30px,4vw,48px)}}

/* Vorschau-Hinweise im neuen Schriftbild */
.entwurf{font:600 13px/1.3 var(--body);letter-spacing:0}
.offen{border-radius:28px}

/* ---------- Reise, Runde 5: nichts Teures über der Leinwand ----------
   Über der bewegten Leinwand liegen keine Glasflächen mit Weichzeichner mehr (jede kostet in jedem Bild Rechenzeit,
   auf älteren Rechnern spürbar). Die Kopfleiste bleibt in der Reise weg, die Kopfzeile der Bühne steht fest:
   beim Zurückrollen klappt nichts mehr auf und nichts verschiebt sich. */
body::after{mix-blend-mode:normal;opacity:.022}
.reise.pin .reise-stand,html.nav-weg .reise.pin .reise-stand{top:22px;transition:none}
.reise.pin .reise-stand,.reise.pin .reise-schiene,.reise.pin .reise-hinweis{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--bg) 78%,transparent)}
.reise.pin .station-text{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--bg) 84%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 90px -40px #000}
.reise.pin .btn{-webkit-backdrop-filter:none;backdrop-filter:none}
.reise.pin .b-ghost,.reise.pin .station-text .b-prim{background:linear-gradient(180deg,rgba(60,60,66,.92),rgba(34,34,38,.92));border-color:rgba(255,255,255,.34)}
@media (hover:hover) and (pointer:fine){.reise.pin .b-ghost:hover,.reise.pin .station-text .b-prim:hover{background:linear-gradient(180deg,rgba(78,78,86,.95),rgba(46,46,52,.95))}}
@media (max-height:760px){.reise.pin .reise-stand,html.nav-weg .reise.pin .reise-stand{top:16px}}

/* ---------- Runde 6 (09.10.2026): Handyansicht ---------- */
html,body{overflow-x:clip}
.schweif-kasten{position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none;z-index:1}
@media (max-width:820px){
  .fuss li+li{margin-top:0}
  .fuss li{padding:9px 0}
  .fuss li:has(a){padding:0}
  .fuss li a,.fuss-unten span a{display:inline-block;padding:9px 0}
  .fuss-unten{gap:4px 12px}
}
@media (max-width:640px){
  .marke span{font-size:13px}
  .fortschritt-zahl,.fortschritt-zahl.an{font-size:13px;right:12px;bottom:14px}
  .ruf{padding:32px 24px;border-radius:28px}
  .knoepfe .btn{flex:1 1 auto}
  .sek{padding:72px 0}
  .aussage{padding:84px 0}
  .station{min-height:min(74svh,600px)}
  .station-text{padding:24px 22px 26px}
  .station .btn{margin-top:20px}
  .karte-p{padding:24px 22px}
  .liste2 .zeile h3{font-size:24px}
  .kontaktzeile{flex-direction:column;gap:6px}
}

/* ---------- Runde 7 (09.10.2026): Befunde der Messung ---------- */
.fuss .fuss-h{font:600 14px/1.2 var(--body);letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:18px}
/* Leitsatz: graue Wörter (Kontrast 4,7:1) werden beim Rollen farbig, statt aus fast unsichtbar aufzutauchen */
html:where(.js.bew) .aussage .aw{opacity:1;color:#7c7c82;transition:color 380ms ease}
html:where(.js.bew) .aussage .aw.an{color:inherit}
.aw{will-change:auto}
@media (max-width:640px){.marke span{font-size:14px}.fortschritt-zahl,.fortschritt-zahl.an{font-size:14px}}
.offen .offen-t{font:600 20px/1.3 var(--body);color:#f6d98a;margin-bottom:10px;max-width:none}

/* jeanette-nentwig.de · Thema „Haus am See": ruhiges Schwarz, helles Grau, Samtrot (Markenfarbe der bisherigen Seite) */
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --bg:#09090B;--bg-2:#101012;--card:#151518;--line:rgba(255,255,255,.12);
  --text:#F5F5F7;--text-2:#D6D6DB;--muted:#A1A1A6;
  --accent:#BB2D3D;--accent-hover:#CC3A4B;--accent-hell:#F5919B;--accent-ink:#fff;
  --schein:rgba(187,45,61,.13);--schein-2:rgba(255,255,255,.03);
  --nav-bg:rgba(9,9,11,.78);
  --schweif:#F2909A;--lichtband:rgba(255,214,200,.085);--bluete:rgba(255,214,190,.5);
  --k-oben:#D2495B;--k-unten:#A1202F;--k-rand:#6A131E;--k-schatten:#5C0F1A;
}

/* ---------- Startansicht: Name links, Porträt rechts ---------- */
.held{position:relative;min-height:100dvh;display:flex;align-items:center;padding:96px 0 72px;overflow:hidden}
.held>.wrap{position:relative;z-index:1}
.held-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,90px);align-items:center}
.held h1{margin:16px 0 0}
.held .lead{margin-top:26px;max-width:31ch}
.held .knoepfe{margin-top:36px}
.held-bild{position:relative;justify-self:end;width:min(100%,480px)}
.held-bild .bild{aspect-ratio:4/5;border-radius:36px}
.held-bild.ring{--r:36px}
.held-bild img{will-change:transform}
@media (max-width:900px){
  .held{padding-top:104px;min-height:0}
  .held-raster{grid-template-columns:1fr}
  .held-bild{justify-self:start;width:min(100%,420px)}
}

/* ---------- Mehr aus dem Haus: drei Kacheln, eine groß ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:clamp(36px,4.6vw,60px)}
.kachel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;border-radius:28px;overflow:hidden;isolation:isolate;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.kachel:nth-child(1){grid-column:span 12;min-height:clamp(440px,46vw,600px)}
.kachel:nth-child(1) img{object-position:50% 22%}
.kachel:nth-child(2){grid-column:span 5}
.kachel:nth-child(3){grid-column:span 7}
.kachel picture{position:absolute;inset:0;z-index:-2}
.kachel img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--aus)}
.kachel.mit-bild::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,9,11,0) 30%,rgba(9,9,11,.72) 68%,rgba(9,9,11,.94))}
.kachel.farbe{justify-content:space-between;background:linear-gradient(150deg,#C23446,#7C1524 62%,#4A0C16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.kachel-t{padding:clamp(24px,2.8vw,38px)}
.kachel h3{font:600 clamp(26px,2.9vw,40px)/1.08 var(--disp);letter-spacing:-.03em}
.kachel:nth-child(1) h3{font-size:clamp(30px,3.8vw,54px)}
.kachel p{margin-top:10px;font-size:18px;line-height:1.45;color:var(--text-2);max-width:40ch}
.kachel.farbe p{color:rgba(255,255,255,.88)}
.kachel .gross-zeile{max-width:none;margin-top:0;padding:clamp(24px,2.8vw,38px) clamp(24px,2.8vw,38px) 0;font:600 clamp(24px,2.5vw,34px)/1.16 var(--disp);letter-spacing:-.028em;color:#fff;text-wrap:balance}
.kachel .mehr{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:600 17px/1 var(--body);color:var(--text)}
.kachel .mehr i{font-style:normal;transition:transform 300ms var(--aus)}
@media (hover:hover) and (pointer:fine){.kachel:hover img{transform:scale(1.04)}.kachel:hover .mehr i{transform:translateX(4px)}}
.kachel:active{transform:scale(.99);transition:transform 160ms var(--aus)}
@media (max-width:900px){.bento{grid-template-columns:1fr}.kachel,.kachel:nth-child(n){grid-column:auto;grid-row:auto;min-height:380px}}

/* ---------- Zweispalter ---------- */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.zwei .bild{aspect-ratio:4/3}
.zwei .bild.hoch{aspect-ratio:4/5}
.zwei h2{margin:0 0 22px}
.zwei .knoepfe{margin-top:30px}
@media (max-width:900px){.zwei{grid-template-columns:1fr}}

/* ---------- Raumseiten ---------- */
.raumkopf{position:relative;min-height:70dvh;display:flex;align-items:flex-end;padding:140px 0 clamp(46px,6vw,84px);overflow:hidden}
.raumkopf-bg{position:absolute;inset:0;z-index:-1}
.raumkopf-bg picture{position:absolute;inset:0}
.raumkopf-bg img{width:100%;height:112%;object-fit:cover}
.raumkopf-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,11,.62),rgba(9,9,11,.25) 34%,rgba(9,9,11,.86) 82%,var(--bg))}
.raumkopf .pfad{display:flex;gap:10px;font-size:15px;color:var(--text-2);margin-bottom:22px}
.raumkopf .pfad a:hover{color:var(--text)}
.raumkopf h1{font-size:clamp(44px,6.6vw,96px)}
.raumkopf .unter{font:500 clamp(21px,2.3vw,30px)/1.25 var(--disp);letter-spacing:-.02em;color:var(--text-2);margin-top:14px}
.raumkopf .lead{margin-top:22px;max-width:56ch}

/* Lebensweg: ein Faden, der sich beim Rollen füllt */
.lebensweg{position:relative;max-width:860px;padding-left:clamp(26px,3vw,46px)}
.lebensweg::before,.lebensweg .faden{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--line)}
.lebensweg .faden{background:linear-gradient(var(--accent-hell),var(--accent));transform-origin:50% 0}
.lebensweg ol{display:grid;gap:clamp(22px,2.6vw,34px)}
.lebensweg b{display:block;font:600 clamp(20px,1.9vw,25px)/1.25 var(--disp);letter-spacing:-.02em;color:var(--text)}
.lebensweg span{display:block;margin-top:4px;font-size:18px;color:var(--text-2)}

/* Bibliothek: ein Buch groß, zwei daneben */
.buch{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.4vw,70px);align-items:center;padding:clamp(26px,3.4vw,48px)}
.buch h2.disp{font-size:clamp(28px,3.4vw,46px)}
.buch .bild{aspect-ratio:16/10;border-radius:22px}
.buch .meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 18px;font-size:16px;color:var(--muted)}
.buch .knoepfe{margin-top:26px}
.buecher2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.buecher2 .buch{grid-template-columns:1fr;align-items:start;align-content:start}
.buecher2 .buch h2.disp{font-size:clamp(26px,2.8vw,36px)}
@media (max-width:900px){.buch,.buecher2{grid-template-columns:1fr}}

.presse{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,60px);align-items:center}
.presse blockquote{margin-top:20px;font:600 clamp(30px,3.9vw,54px)/1.1 var(--disp);letter-spacing:-.03em}
.presse cite{display:block;margin-top:18px;font:500 16px/1.4 var(--body);font-style:normal;letter-spacing:0;color:var(--muted)}
.presse .bild{aspect-ratio:1400/690;border-radius:22px;background:#fff}
.presse .bild img{object-fit:contain}
@media (max-width:900px){.presse{grid-template-columns:1fr}}

.anklopfen-raster{display:grid;gap:18px}
.weg{display:flex;flex-direction:column;gap:8px;min-height:180px;justify-content:space-between}
.weg small{font:600 15px/1 var(--body);color:var(--muted)}
.weg strong{font:600 clamp(24px,2.7vw,36px)/1.12 var(--disp);letter-spacing:-.026em;overflow-wrap:anywhere}
.weg .tuer{font:600 17px/1 var(--body);color:var(--accent-hell)}
.naechster-name{display:block;font:600 clamp(28px,3.8vw,50px)/1.05 var(--disp);letter-spacing:-.03em;margin:8px 0 4px}
@media (min-width:901px) and (max-height:760px){.held{padding:88px 0 56px}.held h1.disp{font-size:clamp(46px,6vw,84px)}.held .lead{margin-top:20px}.held .knoepfe{margin-top:26px}.held-bild{width:min(100%,400px)}}
@media (max-width:640px){
  .raumkopf{min-height:58dvh;padding-top:120px}
  .raumkopf .pfad a{display:inline-block;padding:10px 8px 10px 0;margin:-10px 0}
  .buch{padding:22px 20px 26px}
  .kachel,.kachel:nth-child(n){min-height:340px}
  .kachel.farbe{min-height:300px}
  .weg{min-height:150px}
  .presse blockquote{font-size:30px}
}
@media (max-width:640px){.kachel:nth-child(1) img{object-position:82% 20%}.held h1.disp{font-size:clamp(46px,13.4vw,56px)}}

/* ---------- Lieferung der Kundin vom 09.10.2026: Bücher mit Cover, Pakete, Termine ---------- */
.buch{grid-template-columns:minmax(190px,.3fr) 1fr;align-items:start}
.buch+.buch{margin-top:18px}
.buch .cover{position:sticky;top:104px}
.buch .cover img{width:100%;height:auto;border-radius:10px;box-shadow:0 34px 60px -30px #000,0 0 0 1px var(--line)}
.buch .prosa p{max-width:none}
.buchfoto{margin:26px 0}
.buchfotos{margin:26px 0}
.buchfotos .paar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.buchfotos .bild{aspect-ratio:1;border-radius:22px}
@media (max-width:640px){.buchfotos .paar{gap:10px}.buchfotos .bild{border-radius:16px}}
.buchfoto .bild{aspect-ratio:16/9;border-radius:22px}
.buchfoto .bild img{object-position:50% 28%}
.teaser2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.teaser{display:grid;grid-template-columns:112px 1fr;gap:24px;align-items:start;padding:clamp(22px,2.6vw,32px)}
.teaser picture{display:block}
.teaser img{width:100%;height:auto;border-radius:8px;box-shadow:0 20px 40px -22px #000,0 0 0 1px var(--line)}
.teaser>span{display:block}
.teaser-t{display:block;font:600 clamp(22px,2.1vw,28px)/1.15 var(--disp);letter-spacing:-.024em;color:var(--text)}
.teaser-p{display:block;margin-top:10px;font-size:18px;line-height:1.5;color:var(--text-2)}
.teaser .mehr{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:600 17px/1 var(--body);color:var(--text)}
.teaser .mehr i{font-style:normal;transition:transform 300ms var(--aus)}
@media (hover:hover) and (pointer:fine){.teaser:hover .mehr i{transform:translateX(4px)}}
.ps{display:grid;gap:18px}
.ps-marke{font:600 clamp(26px,2.6vw,36px)/1 var(--disp);letter-spacing:-.03em;color:var(--accent-hell)}
.ps .prosa p{max-width:72ch}
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.paket{display:flex;flex-direction:column}
.paket h3{font:600 clamp(24px,2.3vw,30px)/1.12 var(--disp);letter-spacing:-.026em}
.paket .was{margin-top:12px;font-size:18px;line-height:1.5;color:var(--text-2)}
.paket-inhalt{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:17.5px;line-height:1.5;color:var(--text-2)}
.paket-inhalt b{display:block;font-weight:600;color:var(--text);margin-bottom:6px}
.paket-inhalt ul{display:grid;gap:6px;margin-bottom:16px}
.paket-inhalt li{position:relative;padding-left:18px}
.paket-inhalt li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1.5px;background:var(--accent-hell)}
.paket .preis{margin-top:auto;padding-top:26px;font:600 clamp(30px,3vw,40px)/1 var(--disp);letter-spacing:-.03em;color:var(--text)}
.paket .preis span{display:block;margin-bottom:8px;font:500 15px/1 var(--body);letter-spacing:0;color:var(--muted)}
/* Termine (10.10.2026): Zeilen wie im Kalender. Der nächste Termin trägt Farbe, vergangene treten zurück (site.js hält das aktuell). */
.termine{display:flex;flex-direction:column;gap:14px}
.termin{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(18px,2.6vw,36px);padding:clamp(18px,2vw,26px) clamp(20px,2.6vw,34px);transition:box-shadow 300ms ease}
.termin-tag{display:grid;justify-items:center;align-content:center;gap:6px;width:clamp(104px,9.6vw,132px);aspect-ratio:1;border-radius:22px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
.termin-tag .t-mon{font:600 14px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hell)}
.termin-tag .t-tage{font:600 clamp(24px,2.3vw,30px)/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.termin-tag .t-jahr{font:500 14px/1 var(--body);color:var(--text-2)}
.termin h3{font:600 clamp(22px,2.2vw,28px)/1.15 var(--disp);letter-spacing:-.024em}
.termin-marke{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 13px;border-radius:9999px;font:600 14px/1.2 var(--body);background:rgba(255,255,255,.08);color:var(--text-2)}
.termin-marke:empty,.termin-frist:empty{display:none}
.termin-ort{margin-top:8px;font-size:18px;color:var(--text-2)}
.termin-ort a{display:inline-block;padding:10px 0;margin:-10px 0;color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1.5px}
.termin-frist{margin-top:6px;font-size:15px;color:var(--text-2)}
.termin.naechster{background:linear-gradient(115deg,rgba(187,45,61,.26),rgba(187,45,61,.06) 62%),var(--card);box-shadow:inset 0 0 0 1.5px var(--accent),0 26px 60px -34px rgba(187,45,61,.75)}
.termin.naechster .termin-tag{background:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.termin.naechster .termin-tag .t-mon,.termin.naechster .termin-tag .t-jahr{color:#fff}
.termin.naechster .termin-marke{background:var(--accent-hell);color:#2A0A0F}
.termin.naechster .termin-marke::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.termin.naechster .termin-frist{color:var(--text)}
.termin.vorbei{order:2}
.termin.vorbei>*{opacity:.5}
.termin.vorbei h3{text-decoration:line-through;text-decoration-thickness:1.5px}
.termin.vorbei .btn{display:none}
.termine-leer{margin-top:18px;font-size:18px;color:var(--text-2)}
@media (max-width:760px){.termin{grid-template-columns:auto minmax(0,1fr);gap:16px 18px}.termin-tag{width:92px;border-radius:18px}.termin-tag .t-tage{font-size:24px}.termin .btn{grid-column:1/-1;width:100%}}
.zwei figure .bild{aspect-ratio:4/3}
.zwei .bild.hoch img{object-position:38% 40%}
.kachel:nth-child(1) img{object-position:50% 24%}
@media (max-width:900px){.pakete,.teaser2{grid-template-columns:1fr}.buch{grid-template-columns:1fr}.buch .cover{position:static;max-width:230px}}
@media (max-width:640px){.teaser{grid-template-columns:84px 1fr;gap:16px}.kachel:nth-child(1) img{object-position:56% 20%}}
.zwei .schreib-bild{aspect-ratio:4/3}
.zwei .schreib-bild img{object-position:40% 40%}
/* 12.10.2026: Preishinweis der Kundin unter den Paketen, neues Foto auf „Anklopfen“ (Gesicht links im Bild halten) */
.preis-hinweis{margin-top:22px;max-width:70ch;font-size:16.5px;line-height:1.55;color:var(--text-2)}
.kontakt-bild img{object-position:22% 40%}