/* /90-tage-challenge · Paket 39 € · nach Mockup v11.1 (13.11.2026) */
@font-face{font-family:'C90 Cormorant';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/challenge90/fonts/cormorant-600.woff2?v=ab8fca1a85) format('woff2')}
@font-face{font-family:'C90 Oswald';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/challenge90/fonts/oswald-600.woff2?v=af2235ccd9) format('woff2')}
@font-face{font-family:'C90 Playfair';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/challenge90/fonts/playfair-700.woff2?v=28453852ea) format('woff2')}
@font-face{font-family:'C90 Cond';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/challenge90/fonts/roboto-condensed-700.woff2?v=548c11ba63) format('woff2')}
@font-face{font-family:'C90 Inter';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/challenge90/fonts/inter-400.woff2?v=096dc8282a) format('woff2')}
@font-face{font-family:'C90 Inter';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/challenge90/fonts/inter-600.woff2?v=425f0d5533) format('woff2')}
@font-face{font-family:'C90 Inter';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/challenge90/fonts/inter-700.woff2?v=b4cc42a098) format('woff2')}

:root{
  --navy:#16283a;--navy2:#1f3a55;--navy3:#23405a;
  --gold:#e3b862;--gold-hell:#f6d79a;--gold-text:#8f681c;
  --hell:#f5f7f9;--hell2:#e9eff4;
  --text:#16283a;--grau:#4d6072;--weiss:#f5f2e9;--bleu:#e4edf5;
  --serif:'C90 Cormorant','Cormorant Garamond',Georgia,serif;
  --cond:'C90 Cond','Roboto Condensed','Arial Narrow',sans-serif;
  --sans:'C90 Inter',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.c90{margin:0;background:var(--navy);color:var(--text);font:400 19px/1.4 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.c90 img,.c90 video{display:block;max-width:100%}
:where(.c90) :where(h1,h2,h3,p,ul,ol,figure,blockquote){margin:0;padding:0}
:where(.c90) a{color:inherit}
.c90 a.knopf{color:var(--navy)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:100;background:#fff;color:var(--navy);padding:8px 12px;border-radius:6px}
.wrap{max-width:1440px;margin:0 auto;position:relative}

/* Sektionen: dunkel / hell, weiche Übergänge (Brücken) */
.dunkel{background:linear-gradient(180deg,#16283a 0%,#1d3550 100%);color:var(--weiss)}
.hell{background:#f2f5f8;color:var(--text)}
.bruecke{height:80px}
.bruecke.d-h{background:linear-gradient(180deg,#1d3550,#f2f5f8)}
.bruecke.h-d{background:linear-gradient(180deg,#f2f5f8,#16283a)}
.bruecke.d-d{height:0}

/* Überschriften mit Goldstrich */
.titel{position:relative;font:600 60px/1.08 var(--serif);letter-spacing:-.005em;padding-top:26px;color:var(--text)}
.titel::before{content:"";position:absolute;left:0;top:0;width:42px;height:1px;background:#c9a256}
.dunkel .titel{color:#fff}

/* Goldknopf */
.kauf{display:block}
.knopf{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;height:60px;border-radius:11px;
  background:linear-gradient(180deg,#fcdb92 0%,#f0c46e 55%,#e1ad45 100%);color:var(--navy);text-decoration:none;
  font:700 22px/1 var(--sans);letter-spacing:-.005em;box-shadow:0 8px 22px rgba(90,57,0,.22),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;overflow:hidden;isolation:isolate}
.knopf::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%);transform:translateX(-120%);transition:transform .7s ease;z-index:-1}
.knopf:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(90,57,0,.28),inset 0 1px 0 rgba(255,255,255,.6);filter:saturate(1.05)}
.knopf:hover::after{transform:translateX(120%)}
.knopf:active{transform:translateY(1px)}
.knopf:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hell .knopf:focus-visible{outline-color:var(--navy)}
.knopf .pfeil{font-weight:700;transition:transform .18s ease}
.knopf:hover .pfeil{transform:translateX(3px)}
.dunkel .knopf{box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.55)}
.vertrauen{margin-top:14px;font-size:17px;line-height:1.3;color:var(--grau)}
.dunkel .vertrauen,.hero .vertrauen{color:var(--weiss)}

/* Glas-Karten mit goldener Haarlinie */
.glas{position:relative;border-radius:14px;border:1px solid rgba(180,146,78,.55);
  background:linear-gradient(180deg,rgba(245,247,249,.92),rgba(227,235,242,.92));box-shadow:0 6px 16px rgba(15,38,62,.09)}
.dunkel .glas,.glas.dk{background:linear-gradient(180deg,rgba(28,50,72,.9),rgba(35,63,86,.9));border-color:rgba(214,178,98,.6);box-shadow:0 8px 24px rgba(6,16,28,.28)}

/* ===================== HERO ===================== */
.hero{background:#16283a;color:#fff;overflow:hidden}
.hero .wrap:first-child{min-height:685px}
.hero-szene{position:absolute;top:0;right:0;width:860px;height:685px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 180px);mask-image:linear-gradient(90deg,transparent 0,#000 180px)}
.hero-szene img{width:100%;height:100%;object-fit:cover;object-position:left top}
.hero-text{position:relative;z-index:2;padding:55px 0 0 40px;width:900px}
.kicker{font:700 19px/1.2 var(--cond);letter-spacing:.005em;color:var(--gold);text-transform:uppercase}
.hero h1{margin-top:16px;font:700 66px/1.06 'C90 Playfair',Georgia,serif;letter-spacing:-.01em;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.hero h1 .g{display:block;white-space:nowrap;background:linear-gradient(112deg,#e6c06f 0%,#f5dea4 38%,#e2bb6a 62%,#c99c4e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(255,236,190,.16)) drop-shadow(0 3px 3px rgba(4,12,22,.45))}
.etappen-kurz br{display:none}
.hero-linie{width:535px;height:1px;background:var(--gold);margin-top:14px}
.etappen-kurz{margin-top:12px;font:700 18px/1.2 var(--cond);color:var(--gold);text-transform:uppercase}
.hero-copy{position:relative;z-index:2;width:540px;margin:33px 0 0 40px}
.szene-box{position:static}
.versprechen{font:700 38px/1.1 var(--cond);color:#fff}
.versprechen em{display:block;font-style:normal;color:var(--gold)}
.versprechen u{text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 2px no-repeat;padding-bottom:1px}
.hero .unter{margin-top:19px;font-size:19px;line-height:1.38;color:var(--bleu)}
.hero .kauf{margin-top:22px}
.hero .knopf{font-size:19px;font-weight:600;height:58px;border-radius:9px}
.portraet{position:absolute;z-index:3;left:580px;top:318px;width:210px;height:210px;border-radius:50%;
  box-shadow:0 0 0 2px #e2b765,0 10px 34px rgba(8,22,38,.55);overflow:hidden;background:#20364c}
.portraet img{width:100%;height:100%;object-fit:cover}

/* Route Tag 1 bis Tag 90 */
.route{position:relative;z-index:2;background:#16283a;border-top:1px solid #8f753d;margin:0 40px 0;padding:14px 0 38px}
.route{margin:0;padding:14px 40px 38px;border-top:0}
.route::before{content:"";position:absolute;left:40px;right:40px;top:0;height:1px;background:#8f753d}
.route-kopf{font:700 20px/1.3 var(--sans);color:#fff}
.route-pille{display:inline-block;margin-top:10px;margin-left:var(--pille-x,0px);background:var(--gold);color:var(--navy);font:700 16px/1.2 var(--cond);padding:5px 9px 4px;border-radius:14px;transition:margin-left .6s ease}
.route ol{list-style:none;display:grid;grid-template-columns:repeat(10,136px);margin-top:14px}
.route li{position:relative;padding-top:20px}
.route li::before{content:"";position:absolute;left:0;top:4px;width:128px;height:2px;background:#65809a}
.route li::after{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#abc0d3}
.route li.fertig::before,.route li.jetzt::before{background:linear-gradient(90deg,var(--gold) var(--anteil,100%),#65809a var(--anteil,100%))}
.route li.fertig::after,.route li.jetzt::after{background:var(--gold)}
.route li.jetzt::after{box-shadow:0 0 0 4px rgba(227,184,98,.25)}
.versprechen br.d{display:inline}
.route .nr{display:flex;align-items:center;gap:22px;height:40px;font:700 22px/1 var(--cond);color:var(--gold)}
.route svg{width:40px;height:40px;stroke:#c9a256;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.route .name{display:block;margin-top:12px;font:700 17px/1.2 var(--cond);color:#fff;padding-right:14px}

/* ===================== LIVE ===================== */
.live{padding:36px 0 36px}
.live .wrap{padding:0 130px}
.live .kicker{font:700 17px/1.3 var(--sans);text-transform:uppercase}
.live h2{margin-top:12px;font:600 62px/1.08 var(--serif);color:#fff}
.live-raster{display:grid;grid-template-columns:460px 650px;gap:60px;margin-top:28px;align-items:start}
.ring-box{display:flex;flex-direction:column;align-items:center}
.ring{position:relative;width:360px;height:360px}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .spur{fill:none;stroke:#49677e;stroke-width:3}
.ring .bogen{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:butt;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.rucksack{position:absolute;left:50%;top:50%;width:225px;height:270px;transform:translate(-50%,-50%)}
.rucksack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.rucksack .gold{clip-path:inset(var(--leer,96%) 0 0 0);transition:clip-path 1.6s cubic-bezier(.2,.7,.2,1);animation:glimmen 4.5s ease-in-out infinite}
@keyframes glimmen{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.18) saturate(1.15)}}
.ring-tag{margin-top:18px;font:700 23px/1.2 var(--sans);color:var(--gold);text-align:center}
.ring-rest{margin-top:6px;font-size:19px;color:var(--weiss);text-align:center}
.tagkarte{padding:17px 18px 18px}
.tagkarte h3{font:700 25px/1.3 var(--sans);color:var(--gold);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tagkarte h3 .haken{width:20px;height:20px;stroke:var(--gold);stroke-width:2.6;fill:none}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.kachel{position:relative;aspect-ratio:1/1;border-radius:9px;overflow:hidden;background:#20364c;pointer-events:none;cursor:default}
.kachel img,.kachel video{width:100%;height:100%;object-fit:cover}
.tagkarte p{margin-top:16px;font-size:19px;line-height:1.3;color:var(--weiss)}
.jetztkarte{margin-top:18px;padding:17px 18px 18px}
.jetztkarte .wo{display:flex;align-items:center;gap:12px;font:700 20px/1.3 var(--sans);color:var(--gold)}
.puls{position:relative;width:10px;height:10px;border-radius:50%;background:var(--gold);flex:0 0 10px;margin-left:5px}
.puls::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:rgba(239,186,85,.32);animation:puls 2.4s ease-in-out infinite}
@keyframes puls{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.15);opacity:1}}
.jetztkarte p{margin-top:12px;font-size:19px;color:var(--weiss)}
.naechste{list-style:none;margin-top:22px}
.naechste li{border-top:1px solid #496277;padding:12px 0 15px;font-size:19px;line-height:1.3;color:#a6bacb}
.naechste li:last-child{padding-bottom:0}
.einstieg{margin-top:34px;font:700 22px/1.3 var(--sans);color:var(--gold)}

/* ===================== PAKET ===================== */
.paket{padding:56px 0 56px}
.paket .wrap{padding:0 160px}
.paket-raster{display:grid;grid-template-columns:550px 535px;gap:55px;margin-top:26px;align-items:start}
.paket-raster{grid-template-columns:600px 535px;gap:5px;margin-left:-20px}
.stapel{position:relative;width:100%;aspect-ratio:1100/1530;max-width:600px;margin-top:-8px}
.stapel .teil{position:absolute;filter:drop-shadow(8px 18px 18px rgba(25,39,50,.26));will-change:transform}
.stapel .ratgeber{left:2.7%;top:2.4%;width:50%;transform:rotate(-2deg)}
.stapel .tablet{left:50.5%;top:9.5%;width:48.2%}
.stapel .heft{left:2.7%;top:54.2%;width:40%}
.stapel .blaetter{left:38.6%;top:67.6%;width:60%;transform:rotate(2deg)}
.stapel .teil img{width:100%;height:auto}
.tablet .bildschirm{position:absolute;left:9.8%;top:7.7%;width:80.3%;height:84.7%;border-radius:4.2%/3.4%;overflow:hidden;background:#23374a;display:flex;align-items:center;justify-content:center;pointer-events:none}
.tablet .bildschirm video,.tablet .bildschirm img.poster{width:100%;height:auto;aspect-ratio:300/260;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .stapel .teil{animation:schweben 7s ease-in-out infinite alternate}
  .stapel .ratgeber{--r:-2deg;animation-delay:-1s}
  .stapel .tablet{--r:0deg;animation-delay:-3.5s;animation-duration:8s}
  .stapel .heft{--r:0deg;animation-delay:-2s;animation-duration:9s}
  .stapel .blaetter{--r:2deg;animation-delay:-5s;animation-duration:7.5s}
}
@keyframes schweben{from{transform:translateY(0) rotate(var(--r,0deg))}to{transform:translateY(-7px) rotate(var(--r,0deg))}}
.liste{list-style:none}
.liste li{position:relative;padding-left:26px;margin-bottom:22px;font-weight:700;font-size:19px;line-height:1.26;color:var(--text)}
.liste li::before{content:"";position:absolute;left:1px;top:3px;width:12px;height:7px;border-left:2px solid var(--gold-text);border-bottom:2px solid var(--gold-text);transform:rotate(-45deg) skewX(-8deg);transform-origin:left top;top:10px}
.liste li span{display:block;margin-top:8px;font-weight:400}
.preis{margin-top:4px;font:700 62px/1.15 var(--sans);color:var(--gold-text);letter-spacing:-.01em}
.anker{margin-top:8px;font-size:19px;line-height:1.3;color:var(--text)}
.paket .kauf{margin-top:22px}

/* ===================== KONTOSTAND / BEHÖRDEN ===================== */
.konto{position:relative;color:#fff;background:#1d3550;overflow:hidden}
.konto-bild{position:absolute;inset:0 0 auto 0;height:1000px}
.konto-bild img{width:100%;height:100%;object-fit:cover;object-position:73% 50%}
.konto-bild::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,40,58,.88) 0%,rgba(22,40,58,.51) 100%);z-index:1}
.konto-bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,rgba(29,53,80,0),#1d3550);z-index:1}
.konto .wrap{position:relative;z-index:2;padding:56px 160px 40px}
.konto .titel{color:#fff;max-width:650px}
.konto .txt{margin-top:18px;max-width:620px;font-size:19px;line-height:1.3;color:var(--weiss)}
.konto .zweit{margin-top:96px}
.konto .zweit .titel{max-width:none}
.konto .zweit .txt{max-width:820px}
.laender{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.land{padding:18px 22px 22px;min-height:190px}
.land .k{font:700 17px/1.3 var(--sans);color:var(--gold)}
.land .wert{margin-top:6px;font:600 48px/1.25 var(--serif);color:var(--gold)}
.land .amt{margin-top:6px;font-size:17px;line-height:1.3;color:var(--weiss)}
.zitat{margin-top:24px;max-width:900px;font:700 19px/1.3 var(--sans);color:var(--gold)}

/* ===================== NACH 90 TAGEN ===================== */
.ergebnis{padding:56px 0 36px}
.ergebnis .wrap{padding:0 160px}
.ergebnis-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.ergebnis figure{display:block}
.ergebnis .bild{aspect-ratio:360/330;overflow:hidden;border-radius:2px}
.ergebnis .bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ergebnis figure:hover .bild img{transform:scale(1.03)}
.ergebnis figcaption{position:relative;margin-top:20px;padding-top:16px;font:600 32px/1.3 var(--serif);color:var(--text)}
.ergebnis figcaption::before{content:"";position:absolute;left:0;top:0;width:40px;height:1px;background:#c9a256}

/* ===================== UND WENN ===================== */
.einwand{padding:20px 0 44px}
.einwand .wrap{padding:0 160px}
.einwand-raster{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;margin-top:26px}
.einwand article{border-top:1px solid #c3a768;padding:20px 0 32px}
.einwand h3{font:600 36px/1.3 var(--serif);color:var(--text)}
.einwand p{margin-top:14px;font-size:19px;line-height:1.3;color:var(--text)}

/* ===================== ÜBER MICH ===================== */
.ueber{padding:30px 0 36px}
.ueber .wrap{padding:0 160px;display:grid;grid-template-columns:220px 1fr;gap:60px;align-items:start}
.ueber .rund{width:220px;height:220px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #dfb860,0 12px 30px rgba(15,38,62,.14)}
.ueber .rund img{width:100%;height:100%;object-fit:cover}
.ueber .k{font:700 17px/1.3 var(--sans);color:var(--gold-text);text-transform:uppercase}
.ueber h2{margin-top:12px;font:600 56px/1.25 var(--serif);color:var(--text)}
.ueber blockquote{margin:18px 0 0;font:600 29px/1.3 var(--serif);color:var(--text)}
.ueber p.t{margin-top:18px;font-size:19px;line-height:1.3;color:var(--text)}

/* ===================== FAQ ===================== */
.faq{padding:36px 0 40px}
.faq .wrap{max-width:820px;padding:0}
.faq-liste{margin-top:26px}
.faq details{margin-bottom:14px;border-radius:14px;border:1px solid rgba(180,146,78,.55);background:linear-gradient(180deg,rgba(245,247,249,.95),rgba(227,235,242,.95));box-shadow:0 6px 16px rgba(15,38,62,.09);transition:box-shadow .2s ease}
.faq details:hover{box-shadow:0 10px 24px rgba(15,38,62,.13)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:17px 20px 24px;font:600 31px/1.3 var(--serif);color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--gold-text);outline-offset:-4px;border-radius:14px}
.faq summary .zeichen{flex:0 0 auto;position:relative;width:14px;height:14px;margin-top:14px;margin-right:6px}
.faq summary .zeichen::before,.faq summary .zeichen::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--gold-text);transition:transform .25s ease}
.faq summary .zeichen::after{transform:rotate(90deg)}
.faq details[open] summary .zeichen::after{transform:rotate(0)}
.faq details[open] summary{padding-bottom:10px}
.faq .antwort{padding:0 20px 20px;font-size:19px;line-height:1.3;color:var(--text)}

/* ===================== FINALE ===================== */
.finale{position:relative;padding:0;overflow:hidden}
.finale .wrap{min-height:500px}
.finale .wrap{position:relative}
.finale-text{position:static;padding:56px 0 40px 160px;width:700px}
.finale-text .titel,.finale-text .kauf{position:relative;z-index:2;max-width:540px}
.finale .titel{font-size:60px;line-height:1.3}
.finale .kauf{margin-top:30px}
.finale-bild{position:absolute;top:0;right:0;bottom:0;width:680px}
.finale-bild img{width:100%;height:100%;object-fit:cover}
.finale-bild::before{content:"";position:absolute;inset:0 auto 0 0;width:1px;background:transparent}

/* ===================== FUSS (Inhalt 1:1 alexhausmann.com, Hintergrund navy wie neu.alexhausmann.com) ===================== */
body.c90 .ahk-foot.ahk-foot{background:linear-gradient(180deg,#16283a,#1b334b);border-top:0;color:#f5f2e9;padding:56px 0 36px;font-family:var(--sans)}
body.c90 .ahk-foot .ahk-shell{max-width:1440px;padding:0 160px}
body.c90 .ahk-foot .ahk-grid{grid-template-columns:repeat(4,255px);gap:0 33px;margin-bottom:28px}
body.c90 .ahk-foot h4.ahk-h{font:700 19px/1.3 var(--sans);letter-spacing:normal;text-transform:none;color:#f5f2e9;margin:0 0 14px}
body.c90 .ahk-foot li.ahk-li{font:400 17px/1.3 var(--sans);letter-spacing:normal;padding:0;margin:0 0 9px;color:#dfb860}
body.c90 .ahk-foot li.ahk-li a,body.c90 .ahk-foot li.ahk-li a:visited{color:#dfb860}
body.c90 .ahk-foot li.ahk-li a:hover{color:#f6d79a}
body.c90 .ahk-foot .ahk-disc{font:400 17px/1.3 var(--sans);letter-spacing:normal;color:#c1cbd3;border-top:1px solid #64717d;padding-top:24px;max-width:none}
body.c90 .ahk-foot .ahk-bottom{display:block;border-top:0;margin-top:28px;padding-top:0;font:400 17px/1.3 var(--sans);letter-spacing:normal;color:#f5f2e9}
body.c90 .ahk-foot .ahk-bottom > div{margin-bottom:8px}
body.c90 .ahk-foot .ahk-bottom .ahk-logo-s{font:400 17px/1.3 var(--sans);letter-spacing:normal;color:#f5f2e9}

/* ===================== Telefon-Leiste ===================== */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;background:var(--navy);border-top:1px solid var(--gold);padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .3s ease}
.leiste.an{transform:none}
.leiste .n{font:700 17px/1.3 var(--sans);color:#fff}
.leiste a{margin-top:8px;display:flex;align-items:center;justify-content:center;height:40px;border-radius:10px;background:linear-gradient(180deg,#f6d38a,#e3b862);color:var(--navy);font:700 19px/1 var(--sans);text-decoration:none}

/* Einblenden beim Scrollen */
@media (prefers-reduced-motion:no-preference){
  .js .auf{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .auf.da{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.rucksack .gold,.puls::before{animation:none}}

/* ===================== bis 1439 px: fließend ===================== */
@media (max-width:1439px) and (min-width:901px){
  .hero-szene{width:60vw}
  .hero-text{width:auto;padding-right:40px}
  .hero h1{font-size:min(66px,4.6vw)}
  .hero-copy{width:min(540px,38vw)}
  .portraet{left:min(580px,40vw);width:min(210px,15vw);height:min(210px,15vw)}
  .route{overflow-x:auto}
  .live .wrap,.paket .wrap,.konto .wrap,.ergebnis .wrap,.einwand .wrap,.ueber .wrap{padding-left:5vw;padding-right:5vw}
  .live-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:4vw}
  .ring-box{padding-left:0}
  .paket-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3vw;margin-left:0}
  .finale-text{padding-left:5vw;width:52vw}
  body.c90 .ahk-foot .ahk-shell{padding:0 5vw}
  body.c90 .ahk-foot .ahk-grid{grid-template-columns:repeat(4,1fr);gap:0 24px}
  .finale-text .titel,.finale-text .kauf{max-width:44vw}
  .finale-bild{width:46vw}
}
@media (min-width:1441px){
  .hero-szene{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 180px,#000 calc(100% - 140px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 180px,#000 calc(100% - 140px),transparent)}
  .finale-bild{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 140px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 140px),transparent)}
}

/* ===================== Telefon ===================== */
@media (max-width:900px){
  body.c90{font-size:17px}
  .bruecke{height:48px}
  .titel{font-size:38px;line-height:1.3;padding-top:15px}
  .knopf{font-size:19px;height:58px;border-radius:10px}
  .vertrauen{font-size:17px}
  .hero .wrap:first-child{min-height:0}
  .hero-text{width:auto;padding:12px 20px 0}
  .kicker{font-size:17px;line-height:1.15}
  .hero h1{margin-top:8px;font-size:min(35px,8.9vw);line-height:1.1}
  .etappen-kurz .sep{display:none}
  .hero-linie{width:auto;margin:8px 0 0}
  .etappen-kurz{font-size:17px;line-height:1.12;margin-top:10px}
  .etappen-kurz br{display:inline}
  .szene-box{position:relative;margin-top:14px}
  .hero-szene{position:relative;width:auto;height:260px;-webkit-mask-image:none;mask-image:none}
  .hero-szene img{object-position:center 40%}
  .portraet{left:auto;right:1px;top:2px;width:120px;height:120px}
  .hero-copy{width:auto;margin:12px 20px 0}
  .versprechen{font-size:34px;line-height:1.1}
  .versprechen br.d{display:none}
  .hero .unter{font-size:17px;line-height:1.2;margin-top:12px}
  .hero .kauf{margin-top:18px}
  .route{padding:14px 20px 26px;margin-top:22px;overflow-x:auto;scrollbar-width:none}
  .route::-webkit-scrollbar{display:none}
  .route::before{left:20px;right:20px}
  .route ol{grid-template-columns:repeat(10,112px)}
  .route li::before{width:104px}
  .route .nr{gap:14px}
  .live{padding:36px 0 30px}
  .live .wrap{padding:0 20px}
  .live h2{font-size:38px;line-height:1.3}
  .live-raster{display:block;margin-top:28px}
  .ring-box{padding:0}
  .ring{width:264px;height:264px}
  .rucksack{width:165px;height:198px}
  .ring-rest{font-size:17px}
  .tagkarte,.jetztkarte{margin-top:26px}
  .jetztkarte{margin-top:18px}
  .tagkarte h3{font-size:20px}
  .tagkarte p,.jetztkarte p,.naechste li{font-size:17px}
  .einstieg{font-size:18px;margin-top:24px}
  .paket{padding:36px 0}
  .paket .wrap{padding:0 20px}
  .paket-raster{display:block;margin:20px 0 0}
  .stapel{margin:0 -20px 18px;max-width:none;width:calc(100% + 40px)}
  .liste li{font-size:17px}
  .preis{font-size:62px}
  .anker{font-size:17px}
  .konto .wrap{padding:36px 20px 30px}
  .konto-bild{height:1020px}
  .konto-bild::before{background:rgba(22,40,58,.73)}
  .konto .txt{font-size:17px}
  .konto .zweit{margin-top:32px}
  .laender{grid-template-columns:1fr;gap:16px}
  .ergebnis{padding:36px 0 12px}
  .ergebnis .wrap{padding:0 20px}
  .ergebnis-raster{grid-template-columns:1fr;gap:12px;margin-top:20px}
  .ergebnis figure{margin-bottom:20px}
  .ergebnis .bild{aspect-ratio:350/310}
  .ergebnis figcaption{font-size:29px;margin-top:20px}
  .einwand{padding:16px 0 30px}
  .einwand .wrap{padding:0 20px}
  .einwand-raster{display:block}
  .einwand h3{font-size:30px}
  .einwand p{font-size:17px}
  .ueber .wrap{padding:0 20px;display:block}
  .ueber .rund{margin-bottom:24px}
  .ueber h2{font-size:40px}
  .ueber blockquote{font-size:23px}
  .ueber p.t{font-size:17px}
  .faq .wrap{padding:0 20px}
  .faq summary{font-size:26px;padding:17px 18px 22px}
  .faq .antwort{font-size:17px;padding:0 18px 18px}
  .finale .wrap{min-height:0}
  .finale-text{width:auto;padding:36px 20px 36px}
  .finale .titel{font-size:38px}
  .finale-bild{position:relative;width:auto;height:300px;margin:22px -20px 0}
  .finale-text .titel,.finale-text .kauf{max-width:none}
  .finale .kauf{margin-top:22px}
  .leiste{display:block}
  body.c90 .ahk-foot.ahk-foot{padding:36px 0 110px}
  body.c90 .ahk-foot .ahk-shell{padding:0 20px}
  body.c90 .ahk-foot .ahk-grid{grid-template-columns:1fr;gap:20px 0}
  body.c90 .ahk-foot .ahk-bottom{text-align:left}
}

/* ===================== Runde 2 · Alex 13.11.2026 01:12 ===================== */
/* Preis: nur Paket */
.paket .druck{margin-top:14px;padding-left:16px;border-left:3px solid var(--gold);font:600 19px/1.4 var(--sans);color:var(--text)}

/* Meldung · 53 Staaten mit Weltkarte */
.meldung{position:relative;color:var(--weiss);background:radial-gradient(120% 80% at 50% 0%,#244566 0%,#1d3550 45%,#16283a 100%);overflow:hidden}
.meldung .wrap{padding:64px 160px 56px}
.meldung .eil{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border:1px solid rgba(226,183,101,.55);border-radius:30px;background:rgba(22,40,58,.55);font:700 15px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.meldung .eil .puls{position:relative;width:10px;height:10px;border-radius:50%;background:#f0c56f}
.meldung .eil .puls::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #f0c56f;opacity:0;animation:eilpuls 1.8s ease-out infinite}
@keyframes eilpuls{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.meldung .titel{margin-top:22px;color:#fff;max-width:1000px}
.meldung .txt{margin-top:18px;max-width:860px;font-size:19px;line-height:1.4;color:var(--weiss)}
.meldung .karte{margin:34px 0 0;position:relative}
.meldung .karte img{width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(8,20,34,.45))}
.meldung .karte figcaption{display:flex;align-items:center;gap:10px;margin-top:10px;font:600 16px/1.3 var(--sans);color:#d6dee6}
.meldung .punkt-gold{width:14px;height:14px;border-radius:3px;background:linear-gradient(180deg,#f6dc9c,#b98b3e)}
.meldung .laender{margin-top:30px}
.meldung .reihe{margin-top:32px;max-width:900px;font:600 34px/1.25 var(--serif);color:#fff}
.meldung .zitat{margin-top:18px}

/* Und wenn … : dunkel, Glas, Goldrand */
.einwand{background:linear-gradient(180deg,#16283a 0%,#1d3550 100%);color:var(--weiss);padding:40px 0 56px}
.einwand .titel{color:#fff}
.einwand-raster{gap:22px;column-gap:22px;margin-top:30px}
.einwand article.glas{position:relative;border:1px solid rgba(226,183,101,.6);border-radius:18px;padding:28px 30px 30px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:0 18px 40px rgba(6,16,28,.35),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(6px);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.einwand article.glas:hover{transform:translateY(-4px);border-color:#f0c56f;box-shadow:0 26px 50px rgba(6,16,28,.45),inset 0 1px 0 rgba(255,255,255,.16)}
.einwand .nr{font:600 15px/1 var(--sans);letter-spacing:.2em;color:var(--gold)}
.einwand article h3{margin-top:12px;font:600 32px/1.2 var(--serif);color:#fff}
.einwand article p:not(.nr){position:relative;margin-top:18px;padding-top:16px;font-size:19px;line-height:1.4;color:var(--weiss)}
.einwand article p:not(.nr)::before{content:"";position:absolute;left:0;top:0;width:44px;height:2px;background:linear-gradient(90deg,#f6dc9c,#b98b3e)}

/* Über mich: Namensschild leuchtend */
.ueber .rund{width:240px;height:240px;box-shadow:0 0 0 3px #e2b765,0 0 0 9px rgba(226,183,101,.18),0 18px 40px rgba(15,38,62,.2)}
.ueber .wrap{grid-template-columns:240px 1fr}
.ueber h2.namensschild{display:inline-block;margin-top:14px;padding:14px 30px 16px;border-radius:16px;border:1px solid #e2b765;background:linear-gradient(180deg,#24456a 0%,#16283a 100%);box-shadow:0 0 0 4px rgba(226,183,101,.14),0 14px 30px rgba(15,38,62,.3),0 0 34px rgba(240,197,111,.35),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -6px 14px rgba(0,0,0,.25);font:600 50px/1.1 var(--serif)}
.ueber h2.namensschild span{background:linear-gradient(180deg,#fff5d6 0%,#f6dc9c 45%,#c99a48 75%,#f0cf86 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(246,215,154,.45))}

/* FAQ kompakter */
.faq summary{font-size:24px;padding:13px 18px 15px;gap:16px}
.faq summary .zeichen{margin-top:10px}
.faq details{margin-bottom:10px;border-radius:12px}
.faq details[open] summary{padding-bottom:6px}
.faq .antwort{font-size:17px;padding:0 18px 16px}
.faq-liste{margin-top:22px}

/* Finale: längerer Satz */
.finale .titel{font-size:50px;line-height:1.15}

/* Fuß: nur die untere Zeile wie neu.alexhausmann.com */
.fuss90{background:#16283a;color:#c1cbd3;padding:22px 0 24px;border-top:1px solid rgba(226,183,101,.25)}
.fuss90 .fuss-zeile{max-width:1440px;margin:0 auto;padding:0 160px;display:flex;align-items:center;justify-content:space-between;gap:20px;font:400 15px/1.4 var(--sans)}
.fuss90 nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px}
.fuss90 a,.fuss90 button{color:#dfb860;text-decoration:none;font:inherit;background:none;border:0;padding:0;cursor:pointer}
.fuss90 a:hover,.fuss90 button:hover{color:#f6d79a}
.fuss90 .mahaon-studio-badge{display:inline-flex;align-items:center;gap:7px;color:#a9b4bf;font:400 12px/1.4 var(--sans);letter-spacing:.02em;white-space:nowrap}
.fuss90 .mahaon-studio-badge img{width:14px;height:13px;opacity:.75}
.fuss90 .mahaon-studio-badge strong{font-weight:600;letter-spacing:.06em}

@media (max-width:1439px) and (min-width:901px){
  .meldung .wrap,.fuss90 .fuss-zeile{padding-left:5vw;padding-right:5vw}
}
@media (max-width:900px){
  .meldung .wrap{padding:40px 20px 36px}
  .meldung .eil{font-size:13px}
  .meldung .txt{font-size:17px}
  .meldung .karte{margin:24px -12px 0}
  .meldung .karte figcaption{margin-left:12px;font-size:14px}
  .meldung .reihe{font-size:26px}
  .einwand{padding:28px 0 40px}
  .einwand-raster{display:grid;grid-template-columns:1fr;gap:14px}
  .einwand article.glas{padding:22px 20px 22px}
  .einwand article h3{font-size:27px}
  .einwand article p:not(.nr){font-size:17px}
  .ueber .rund{width:180px;height:180px}
  .ueber h2.namensschild{font-size:34px;padding:12px 20px 13px}
  .faq summary{font-size:21px;padding:12px 16px 14px}
  .faq .antwort{font-size:16px;padding:0 16px 14px}
  .finale .titel{font-size:34px}
  .fuss90{padding:20px 0 96px}
  .fuss90 .fuss-zeile{padding:0 20px;flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:900px){
  .meldung .laender{grid-template-columns:repeat(3,1fr);gap:8px}
  .meldung .land{min-height:0;padding:12px 10px 14px}
  .meldung .land .k{font-size:13px}
  .meldung .land .wert{font-size:26px;line-height:1.1}
  .meldung .land .amt{display:none}
  .meldung .karte img{width:118%;max-width:none;margin-left:-9%}
}

/* ===================== Runde 3 · Alex 13.11.2026 01:34 ===================== */
/* Hero: Blau der Szene bis zum linken Rand, Bild bis zum rechten Rand */
.hero{position:relative;background:linear-gradient(180deg,#083c76 0,#083c76 640px,#0c3561 790px,#16283a 100%)}
.route{background:transparent}
.route::before{background:rgba(227,184,98,.55)}
.hero .route li::before{background:#7f9bbb}
.hero .route li.fertig::before,.hero .route li.jetzt::before{background:linear-gradient(90deg,var(--gold) var(--anteil,100%),#7f9bbb var(--anteil,100%))}
@media (min-width:1441px){
  .hero-szene{right:calc(720px - 50vw);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px);mask-image:linear-gradient(90deg,transparent 0,#000 70px)}
  .portraet{left:calc(580px + 50vw - 720px)}
}
@media (max-width:1439px) and (min-width:901px){
  .hero-szene{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px);mask-image:linear-gradient(90deg,transparent 0,#000 70px)}
}

/* Ring: helle Scheibe, Silhouette füllt sich golden, Neigung und Vorschau Tag 90 */
.ring{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1);cursor:pointer;outline:none;border-radius:50%}
.ring:focus-visible{box-shadow:0 0 0 3px rgba(246,215,154,.8)}
.ring .scheibe{position:absolute;inset:16px;border-radius:50%;background:radial-gradient(circle at 50% 36%,#ffffff 0%,#eef4fa 42%,#d6e5f2 78%,#bcd3e8 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -14px 30px rgba(120,160,200,.25),0 18px 50px rgba(110,165,220,.32),0 0 90px rgba(150,195,240,.22)}
.ring .scheibe::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 100%,rgba(240,197,111,.45) 0%,rgba(240,197,111,0) 60%);opacity:var(--glut,.35);transition:opacity 1.6s ease}
.ring .spur{stroke:rgba(205,224,242,.38)}
.ring .rucksack{z-index:2;filter:drop-shadow(0 10px 14px rgba(40,70,100,.22))}
.ring .rucksack .sil{opacity:1}
.ring.vorschau .rucksack .gold{clip-path:inset(0 0 0 0)}
.ring.vorschau .scheibe{--glut:1}
.ring.vorschau .bogen{stroke-dashoffset:0}
.ring-box .ring-tag{transition:color .3s}

/* Paket: v12-Komposition links, mitlaufend */
.paket-raster{grid-template-columns:minmax(0,1fr) 520px;gap:44px;margin-left:0;align-items:start}
.paket-bild{position:sticky;top:70px;margin:6px 0 0 -40px}
.paket-bild img{width:100%;height:auto;filter:drop-shadow(0 26px 34px rgba(25,45,70,.22))}
@media (prefers-reduced-motion:no-preference){.paket-bild img{animation:schweben 8s ease-in-out infinite alternate}}

/* Nach 90 Tagen: Blätterleiste mit sechs Karten */
.blaettern{position:relative;margin-top:30px}
.spur{display:flex;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:160px;margin:0 -160px;padding:14px 160px 30px;scrollbar-width:none;perspective:1800px;cursor:grab;-webkit-user-select:none;user-select:none}
.spur::-webkit-scrollbar{display:none}
.spur.zieht{cursor:grabbing;scroll-snap-type:none}
.spur:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.blatt{flex:0 0 340px;scroll-snap-align:start;transform-origin:left center;transform:rotateY(var(--dreh,0deg));transition:box-shadow .3s ease;will-change:transform}
.blatt .bild{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#dfe7ef;box-shadow:0 18px 38px rgba(22,40,58,.16),0 2px 0 rgba(255,255,255,.7) inset}
.blatt .bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,40,58,var(--schatten,0)) 0%,rgba(22,40,58,0) 70%);pointer-events:none}
.blatt img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.blatt:hover img{transform:scale(1.04)}
.blatt .reiter{position:absolute;left:16px;top:16px;padding:7px 12px 6px;border-radius:30px;background:rgba(22,40,58,.78);border:1px solid rgba(240,197,111,.75);font:700 15px/1 var(--sans);letter-spacing:.12em;color:#f6d79a;backdrop-filter:blur(4px)}
.blatt figcaption{margin-top:18px}
.blatt figcaption strong{display:block;font:600 28px/1.18 var(--serif);color:var(--text)}
.blatt figcaption span{display:block;margin-top:10px;font-size:18px;line-height:1.38;color:var(--grau)}
.steuer{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.pfeilknopf{width:52px;height:52px;border-radius:50%;border:1px solid #c9a256;background:#fff;color:var(--navy);font:600 22px/1 var(--sans);cursor:pointer;box-shadow:0 6px 16px rgba(22,40,58,.1);transition:transform .2s ease,background .2s ease,opacity .2s}
.pfeilknopf:hover{background:linear-gradient(180deg,#fcdb92,#e9b95a);transform:translateY(-1px)}
.pfeilknopf:disabled{opacity:.35;cursor:default;transform:none;background:#fff}
.punkte{display:flex;gap:8px}
.punkte i{display:block;width:8px;height:8px;border-radius:8px;background:#b9c6d2;transition:width .3s ease,background .3s ease}
.punkte i.an{width:28px;background:linear-gradient(90deg,#f6d79a,#c99a48)}

/* Über mich: Name als kleines leuchtendes Schild */
.ueber h2.namensschild{margin-top:12px;padding:10px 18px 9px;border-radius:40px;font:700 17px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 0 3px rgba(226,183,101,.14),0 8px 20px rgba(15,38,62,.22),0 0 24px rgba(240,197,111,.38),inset 0 1px 0 rgba(255,255,255,.25)}
.ueber h2.namensschild span{filter:drop-shadow(0 0 5px rgba(246,215,154,.5))}

@media (max-width:1439px) and (min-width:901px){
  .paket-raster{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:3vw}
  .paket-bild{margin-left:-2vw}
  .spur{margin:0 -5vw;padding:14px 5vw 30px;scroll-padding-inline:5vw}
  .blatt{flex-basis:min(340px,30vw)}
}
@media (max-width:900px){
  .paket-bild{position:relative;top:0;margin:0 -20px 18px}
  .spur{margin:0 -20px;padding:10px 20px 24px;scroll-padding-inline:20px;gap:14px}
  .blatt{flex-basis:78vw}
  .blatt figcaption strong{font-size:25px}
  .blatt figcaption span{font-size:17px}
  .ueber h2.namensschild{font-size:15px;padding:9px 15px 8px}
}
@media (prefers-reduced-motion:reduce){.blatt{transform:none!important}.ring{transform:none!important}}
@media (min-width:901px){
  .hero-szene{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px),linear-gradient(180deg,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 70px),linear-gradient(180deg,#000 82%,transparent 100%);mask-composite:intersect}
}
.ergebnis .blatt figcaption{margin-top:18px;padding-top:14px;font:400 18px/1.38 var(--sans);color:var(--grau)}
.ergebnis .blatt figcaption span{font:400 18px/1.38 var(--sans);color:var(--grau)}
@media (max-width:900px){.ergebnis .blatt figcaption,.ergebnis .blatt figcaption span{font-size:17px}}

/* ===================== Sprechender Kreis · Alex 13.11.2026 01:57 ===================== */
.portraet{overflow:visible;background:none}
.kreis{position:absolute;inset:0;z-index:30}
.kreis-video{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;border-radius:50%;overflow:hidden;cursor:pointer;background:#16283a;box-shadow:0 0 0 3px #e2b765,0 0 0 9px rgba(226,183,101,.16),0 18px 40px rgba(4,12,22,.45)}
.kreis-video video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.kreis-video:focus-visible{outline:3px solid #fff;outline-offset:4px}
.kreis-ton{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 10px;border-radius:30px;background:linear-gradient(135deg,#f6dc9c,#e2b765 55%,#c99a48);color:#16283a;font:700 14px/1 var(--sans);white-space:nowrap;box-shadow:0 6px 16px rgba(4,12,22,.35);transition:transform .2s ease}
.kreis-ton svg{width:16px;height:16px;fill:#16283a;stroke:#16283a;stroke-width:1.6;stroke-linecap:round}
.kreis-ton svg .w{fill:none}
.kreis-video:hover .kreis-ton{transform:translateX(-50%) scale(1.06)}
.kreis.laut .kreis-ton{background:rgba(22,40,58,.82);color:#f6dc9c}
.kreis.laut .kreis-ton svg{fill:#f6dc9c;stroke:#f6dc9c}
@media (prefers-reduced-motion:no-preference){.kreis:not(.laut) .kreis-ton{animation:tonpuls 2.6s ease-in-out infinite}}
@keyframes tonpuls{0%,100%{box-shadow:0 6px 16px rgba(4,12,22,.35),0 0 0 0 rgba(246,220,156,.55)}50%{box-shadow:0 6px 16px rgba(4,12,22,.35),0 0 0 9px rgba(246,220,156,0)}}
.kreis-zu{display:none;position:absolute;right:-4px;top:-4px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(226,183,101,.8);background:#16283a;color:#f6dc9c;font:400 20px/1 var(--sans);cursor:pointer;box-shadow:0 4px 10px rgba(4,12,22,.4)}
/* Schwebend: rechts unten, fährt mit */
.kreis.schwebt{position:fixed;inset:auto 28px 28px auto;width:190px;height:190px;animation:kreisein .45s cubic-bezier(.2,.7,.2,1)}
.kreis.schwebt .kreis-zu{display:block}
.kreis.schwebt .kreis-ton{font-size:13px;padding:6px 10px 6px 8px}
@keyframes kreisein{from{opacity:0;transform:translateY(24px) scale(.85)}to{opacity:1;transform:none}}
.kreis.klein{width:64px!important;height:64px!important}
.kreis.klein .kreis-ton,.kreis.klein .kreis-zu{display:none}
@media (max-width:900px){
  .kreis-ton{font-size:12px;padding:5px 9px 5px 7px;bottom:7%}
  .kreis-ton svg{width:13px;height:13px}
  .kreis.schwebt{inset:auto 12px 92px auto;width:112px;height:112px}
  .kreis.schwebt .kreis-ton{font-size:11px;padding:4px 8px 4px 6px}
  .kreis.schwebt .kreis-zu{width:26px;height:26px;font-size:17px}
  .kreis.klein{width:52px!important;height:52px!important}
}

/* Runde 4: sprechender Kreis größer (Alex 13.11 02:12) */
.portraet{top:296px;width:270px;height:270px}
@media (max-width:900px){.portraet{top:2px}}
.kreis.schwebt{width:240px;height:240px}
.kreis-ton{font-size:15px;padding:8px 14px 8px 11px}
.kreis.schwebt .kreis-ton{font-size:14px;padding:7px 12px 7px 9px}
@media (max-width:1439px) and (min-width:901px){.portraet{width:min(270px,19vw);height:min(270px,19vw)}}
@media (max-width:900px){
  .portraet{width:150px;height:150px}
  .kreis-ton{font-size:12px;padding:5px 9px 5px 7px}
  .kreis.schwebt{width:140px;height:140px}
  .kreis.schwebt .kreis-ton{font-size:11px;padding:4px 8px 4px 6px}
}

/* Wischleisten am Telefon (13.11.2026): Karten flach und fest, nur seitlich; Geste bleibt in der Leiste */
.route,.spur{overscroll-behavior-x:contain;touch-action:pan-x pan-y}
@media (hover:none),(max-width:900px){
  .spur{perspective:none}
  .blatt{transform:none!important;opacity:1!important;will-change:auto}
  .blatt .bild::after{display:none}
}

/* Seite steht fest (13.11.2026): nie seitlich verschiebbar, kein Gummi-Effekt am Rand.
   html hidden + body clip: body wird kein eigener Scroll-Container (wichtig für Telegram-Browser). */
html{overflow-x:hidden;overscroll-behavior:none}
body{overflow-x:clip;overscroll-behavior:none}