/* =====================================================================
   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}

.aus,.aus::before,.aus::after{animation-play-state:paused!important}
@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}

/* die-auto-biografie.de · Thema „Garage am Abend": ruhiges Schwarz, helles Grau, Gold der bisherigen Marke */
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:optional}
:root{
  --bg:#070707;--bg-2:#0E0E0F;--card:#141415;--line:rgba(255,255,255,.12);
  --text:#F5F5F7;--text-2:#D6D6DB;--muted:#A1A1A6;
  --accent:#B8975A;--accent-hover:#C9A96B;--accent-hell:#E2C48A;--accent-ink:#1A1206;
  --bordeaux:#6E1423;
  --schein:rgba(184,151,90,.11);--schein-2:rgba(255,255,255,.03);
  --nav-bg:rgba(7,7,7,.78);
  --schweif:#F0CE8E;--lichtband:rgba(255,232,190,.09);--bluete:rgba(255,220,160,.5);
  --k-oben:#DCC084;--k-unten:#A9864A;--k-rand:#6E5527;--k-schatten:#5A4318;--k-text:0 1px 0 rgba(255,255,255,.28);
}
.b-prim .ar{background:rgba(26,18,6,.16);box-shadow:inset 0 1px 2px rgba(26,18,6,.3),0 1px 0 rgba(255,255,255,.3)}
.marke b i{font-style:normal;color:var(--accent-hell)}

/* ---------- Startansicht ---------- */
.held{position:relative;min-height:100dvh;display:flex;align-items:flex-end;padding:150px 0 clamp(60px,8vw,110px);overflow:hidden}
.held-bg{position:absolute;inset:0;z-index:-1}
.held-bg picture{position:absolute;inset:0}
.held-bg img{width:100%;height:100%;object-fit:cover;object-position:18% 50%;animation:zoom 18s ease-out both}
@keyframes zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.held-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,9,9,.10),rgba(11,9,9,.30) 26%,rgba(11,9,9,.82) 50%,rgba(11,9,9,.93)),linear-gradient(180deg,rgba(11,9,9,.55),transparent 26%,rgba(11,9,9,.5) 70%,var(--bg))}
.held-text{margin-left:auto;max-width:760px}
.held h1{font-size:clamp(40px,5.4vw,76px);line-height:1.04;margin-top:22px}
.held>.wrap{position:relative;z-index:1}
.held .lead{margin-top:22px;max-width:44ch;color:var(--text)}
.held .knoepfe{margin-top:32px}
.plakette{display:inline-flex;flex-direction:column;gap:4px;background:var(--accent);color:var(--accent-ink);padding:14px 20px 13px;border-radius:4px;box-shadow:0 24px 60px -24px #000}
.plakette b{font:600 25px/1 var(--body);letter-spacing:-.03em}
.plakette span{font:600 9.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;border-top:1px solid rgba(26,18,6,.35);padding-top:7px;margin-top:5px}
@media (max-width:767px){
  .held{align-items:flex-end;padding-bottom:54px}
  .held-bg img{object-position:50% 30%}
  .held-bg::after{background:linear-gradient(180deg,rgba(11,9,9,.5),rgba(11,9,9,.12) 20%,rgba(11,9,9,.66) 42%,rgba(11,9,9,.86) 62%,var(--bg) 96%)}
  .held-text{margin-left:0}
}

/* ---------- Einband: Buch in drei Leinenfarben ---------- */
.einband{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,80px);align-items:center}
.buch-buehne{position:relative;display:grid;place-items:center;min-height:500px;perspective:1500px;border-radius:30px;background:radial-gradient(closest-side at 50% 46%,rgba(184,151,90,.16),transparent 72%),var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.buch-buehne::after{content:"";position:absolute;left:50%;bottom:66px;width:250px;height:34px;translate:-46% 0;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(8px)}
.b3{--kx:-24deg;--ky:8deg;--t:40px;--leinen:#6E1423;--leinen-2:#4E0D18;--glanz:0;position:relative;z-index:1;width:236px;height:326px;transform-style:preserve-3d;transform:rotateX(var(--ky)) rotateY(var(--kx));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.b3[data-buch=nachtblau]{--leinen:#17223F;--leinen-2:#0E162B}
.b3[data-buch=silbergrau]{--leinen:#A8ACB1;--leinen-2:#868A90;--glanz:.5}
.b3 i{position:absolute;display:block}
.b3 .deckel,.b3 .rueck,.b3 .ruecken{background-color:var(--leinen);background-image:linear-gradient(105deg,rgba(255,255,255,calc(.07 + var(--glanz)*.3)),transparent 34%,rgba(0,0,0,.2)),repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);transition:background-color .6s}
.b3 .deckel{inset:0;border-radius:2px 7px 7px 2px;transform:translateZ(calc(var(--t)/2));box-shadow:inset 9px 0 12px -8px rgba(0,0,0,.6),inset 0 0 0 14px transparent,inset 0 0 0 15px rgba(255,255,255,.10)}
.b3 .deckel::after{content:"";position:absolute;left:50%;top:27%;translate:-50% 0;width:92px;height:54px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 2px 6px rgba(0,0,0,.35)}
.b3 .rueck{inset:0;border-radius:7px 2px 2px 7px;transform:translateZ(calc(var(--t)/-2)) rotateY(180deg)}
.b3 .ruecken{left:0;top:0;width:var(--t);height:100%;transform:translateX(calc(var(--t)/-2)) rotateY(-90deg);background-color:var(--leinen-2);border-radius:3px}
.b3 .schnitt{right:0;top:5px;width:calc(var(--t) - 6px);height:calc(100% - 10px);transform:translateX(calc((var(--t) - 6px)/2 - 3px)) rotateY(90deg);background:repeating-linear-gradient(90deg,#efe7d8 0 1px,#cfc5b2 1px 2px)}
.b3 .oben{left:3px;top:0;width:calc(100% - 8px);height:calc(var(--t) - 6px);transform:translateY(calc((var(--t) - 6px)/-2 + 4px)) rotateX(90deg);background:repeating-linear-gradient(0deg,#efe7d8 0 1px,#cfc5b2 1px 2px)}
.leinen{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.leinen button{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:10px 22px 10px 12px;border-radius:9999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line);font:600 17px/1 var(--body);color:var(--text-2);transition:background-color 200ms ease,box-shadow 200ms ease,color 200ms ease,transform 160ms var(--aus)}
.leinen button:active{transform:scale(.97)}
.leinen button i{width:30px;height:30px;border-radius:50%;background:var(--f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 -6px 10px rgba(0,0,0,.35)}
@media (hover:hover) and (pointer:fine){.leinen button:hover{color:var(--text);background:rgba(255,255,255,.1)}}
.leinen button[aria-pressed=true]{background:rgba(184,151,90,.14);box-shadow:inset 0 0 0 1.5px var(--accent-hell);color:var(--text)}
.einband-notiz{margin-top:18px}
@media (max-width:900px){.einband{grid-template-columns:1fr}.buch-buehne{min-height:430px}}

/* ---------- Film ---------- */
.film{position:relative;aspect-ratio:16/9;border-radius:26px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px var(--line)}
.film picture{position:absolute;inset:0}
.film img,.film iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.film button{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;background:linear-gradient(180deg,transparent 40%,rgba(11,9,9,.8))}
.film .spiel{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 14px rgba(184,151,90,.18),0 30px 70px -20px #000;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}
.film button:hover .spiel{transform:scale(1.08);box-shadow:0 0 0 22px rgba(184,151,90,.14),0 30px 70px -20px #000}
.film .hinweis{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:13px;color:var(--text-2);padding:0 20px}

/* ---------- Moin ---------- */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.zwei .bild{aspect-ratio:4/3}
.zwei h2{margin:0 0 22px}
@media (max-width:900px){.zwei{grid-template-columns:1fr}}
.hoeren{margin-top:30px;padding:22px 24px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.hoeren b{display:block;font-weight:600;margin-bottom:4px}

/* ---------- Fragen ---------- */
.fragen{display:grid;gap:12px}
details.frage{background:var(--card);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s}
details.frage[open]{box-shadow:inset 0 0 0 1px rgba(226,196,138,.4)}
details.frage summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;font:600 clamp(19px,1.6vw,22px)/1.35 var(--body);letter-spacing:-.016em}
details.frage summary::-webkit-details-marker{display:none}
details.frage summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.6px solid var(--accent-hell);border-bottom:1.6px solid var(--accent-hell);transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s cubic-bezier(.22,1,.36,1)}
details.frage[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.antwort{padding:0 28px 26px;max-width:72ch}

/* Reise über echte, teils helle Fotos: Text auf einer Glasfläche */
.reise.pin .station-text{padding:clamp(26px,3vw,42px);border-radius:28px;max-width:560px;background:color-mix(in srgb,var(--bg) 66%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1);box-shadow:inset 0 0 0 1px var(--line),0 40px 90px -40px #000}
.reise.pin .reise-schleier{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent 20%,transparent 60%,var(--bg))}
/* ---------- Lesbarkeit und einladender Film- und Hörknopf ---------- */
.antwort{color:var(--text);font-size:19px}
.einband-notiz{font-size:16px;color:var(--muted)}
.leinen button{font-size:17px;color:var(--text)}
.plakette span{font-size:10.5px}
.film button{background:linear-gradient(180deg,rgba(11,9,9,.18),rgba(11,9,9,.30) 45%,rgba(11,9,9,.88))}
.film picture img{transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.film:hover picture img{transform:scale(1.04)}
.spiel-gruppe{display:flex;flex-direction:column;align-items:center;gap:26px}
.film .spiel{position:relative;width:128px;height:128px;box-shadow:0 30px 70px -20px #000,inset 0 0 0 1px rgba(255,255,255,.4)}
.film .spiel::before,.film .spiel::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--accent-hell);animation:welle 2.6s cubic-bezier(.2,.7,.3,1) infinite;pointer-events:none}
.film .spiel::after{animation-delay:1.3s}
@keyframes welle{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.85);opacity:0}}
.film button:hover .spiel{transform:scale(1.1);box-shadow:0 30px 70px -20px #000,inset 0 0 0 1px rgba(255,255,255,.6),0 0 60px var(--schweif)}
.spiel-text{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.spiel-text b{font:600 clamp(32px,4.2vw,56px)/1 var(--disp);letter-spacing:-.034em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.7)}
.spiel-text em{font:500 clamp(16px,1.5vw,19px)/1.3 var(--body);font-style:normal;color:var(--text);text-shadow:0 1px 16px rgba(0,0,0,.9)}
.film .hinweis{font-size:14px;color:var(--text)}

.hoeren{display:flex;align-items:center;gap:20px;padding:20px 24px}
.hoeren-knopf{position:relative;flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:0 14px 36px -14px var(--accent),inset 0 0 0 1px rgba(255,255,255,.35);transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.hoeren-knopf:hover{transform:scale(1.08);box-shadow:0 18px 46px -12px var(--accent),inset 0 0 0 1px rgba(255,255,255,.55)}
.hoeren-knopf::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--accent-hell);animation:welle 2.6s cubic-bezier(.2,.7,.3,1) infinite;pointer-events:none}
.hoeren.laeuft .hoeren-knopf::after{animation:none;opacity:0}
.hoeren .i-pause,.hoeren.laeuft .i-spiel{display:none}
.hoeren.laeuft .i-pause{display:block}
.hoeren-text{flex:1;min-width:0}
.hoeren-text b{font-size:18px;margin-bottom:2px}
.hoeren-text>span{font-size:15.5px;color:var(--text-2);margin-bottom:12px}
.hoeren-balken{height:5px;border-radius:5px;background:rgba(255,255,255,.16);overflow:hidden;cursor:pointer}
.hoeren-balken i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--accent-hell))}
.hoeren .hoeren-zeit{display:block;margin:9px 0 0;font:600 13px/1 var(--body);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--text-2)}
@media (min-width:901px) and (max-height:760px){.held{padding-bottom:84px}.held h1{font-size:clamp(38px,4.8vw,62px)}}
/* Handy: der Film braucht Höhe, sonst liegen Knopf, Titel und Hinweis übereinander */
@media (max-width:640px){
  .film{aspect-ratio:1/1;border-radius:22px}
  .film img{object-position:38% 50%}
  .film button{align-content:center;padding:0 0 84px}
  .spiel-gruppe{gap:16px}
  .film .spiel{width:88px;height:88px}
  .film .spiel svg{width:28px;height:28px}
  .spiel-text b{font-size:30px}
  .spiel-text em{font-size:16px;max-width:24ch}
  .film .hinweis{bottom:16px;font-size:14px;line-height:1.4;padding:0 18px}
  .held{padding-top:120px}
  .held h1{font-size:clamp(38px,10.6vw,46px)}
  .plakette b{font-size:22px}
  .buch-buehne{min-height:400px}
  .leinen button{flex:1 1 100%;justify-content:flex-start}
  .hoeren{padding:18px;gap:16px}
  .hoeren-knopf{width:64px;height:64px}
  details.frage summary{padding:20px 20px}
  .antwort{padding:0 20px 22px}
  .zwei .bild{aspect-ratio:1/1}
}
.hoeren .hoeren-zeit{font-size:14px}
/* Kapitel 1 (Wunsch der Kundin, 11.10.2026): Textkasten rechts über dem Garagentor, damit der Oldtimer frei bleibt.
   Die Kapitelliste rückt dafür nach oben rechts, der Bedienhinweis nach links. Gilt nur für die gepinnte Bühne. */
.reise.pin .station:first-child .station-text{left:66vw;width:min(560px,calc(34vw - 28px));max-width:none}
.reise.pin .station:first-child h3.disp{font-size:clamp(30px,3.5vw,56px)}
.reise.pin .reise-schiene{top:96px;translate:none}
.reise.pin .reise-hinweis{right:auto;left:max(28px,calc((100vw - 1200px)/2 + 28px));text-align:left}
/* Niedrige Fenster bis 780 px Höhe: Kapitelliste ausblenden, sonst berührt sie den Textkasten von Kapitel 1
   (gemessen 1023 × 705 und 1181 × 720). Kopfzeile „Kapitel 1 von 4“ und die Knöpfe Zurück/Weiter bleiben. */
@media (max-height:780px){.reise.pin .reise-schiene{display:none}}