/* autour.me – neue Seite im App-Stil (Nov. 2026) */
:root{--grund:#f3efe8;--sand:#e9e3d9;--dunkel:#1c1a18;--nacht:#0f0e0d;--karte:#2a2724;--text:#1c1a18;--leise:#6b6259;--hell:#f4efe8;--hellleise:#b5aca2;--akzent:#ef6a2a;--gruen:#2f9e58}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font:19px/1.55 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:1.08;margin:0}
img,video{max-width:100%}
a{color:var(--akzent)}
.huelle{max-width:1180px;margin:0 auto;padding:0 28px}
.dach{text-transform:uppercase;letter-spacing:.14em;font-size:14px;font-weight:700;color:var(--akzent);margin:0 0 14px}
.mitte{text-align:center}
.knopf{display:inline-flex;align-items:center;gap:14px;background:var(--akzent);color:#fff;text-decoration:none;border-radius:999px;padding:12px 30px 12px 12px;box-shadow:0 10px 30px rgba(239,106,42,.35);border:0;font:inherit;cursor:pointer;transition:transform .2s}
.knopf:hover{transform:translateY(-2px)}
.knopf i{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-style:normal;font-size:20px;flex:none}
.knopf b{display:block;font-size:21px;line-height:1.2}.knopf small{display:block;font-size:15px;opacity:.9;text-align:left}
.knopf.glas{background:rgba(255,255,255,.14);box-shadow:none;border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.knopf.weiss{background:#fff;color:var(--text);box-shadow:none}
.knopf.weiss i{background:var(--akzent);color:#fff}

/* Handy-Rahmen mit Film */
.telefon{position:relative;box-sizing:content-box;width:calc(100% - 20px);max-width:310px;aspect-ratio:1322/2873;border-radius:48px;border:10px solid #111;box-shadow:0 40px 80px rgba(0,0,0,.35);overflow:hidden;background:#111}
.telefon img,.telefon video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.telefon video{opacity:0;transition:opacity .4s}
.telefon video.laeuft{opacity:1}

/* Erscheinen beim Scrollen */
.auf{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.auf.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.auf{opacity:1;transform:none;transition:none}}

/* Kopf */
nav.oben{position:absolute;top:0;left:0;right:0;z-index:5}
nav.oben .huelle{display:flex;align-items:center;gap:14px;padding-top:24px}
.marke{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:6px 18px 6px 6px;color:#fff;text-decoration:none;font-weight:800;font-size:22px}
.marke img{width:38px;height:38px;border-radius:50%}
nav.oben .rechts{margin-left:auto;display:flex;gap:26px;font-size:17px}
nav.oben .rechts a{color:#fff;text-decoration:none;opacity:.92}
.held{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:var(--hell);overflow:hidden;background:#13201a}
.held video,.held .standbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,13,12,.86),rgba(14,13,12,.45) 50%,rgba(14,13,12,.05)),linear-gradient(0deg,rgba(14,13,12,.5),transparent 30%)}
.held .huelle{position:relative;z-index:2;width:100%;padding-top:110px;padding-bottom:70px}
.held h1{font-size:clamp(50px,7vw,92px);margin-bottom:22px}
.held h1 span{color:var(--akzent)}
.held p.ein{font-size:23px;max-width:580px;color:#eae2d7;margin:0 0 30px}
.knoepfe{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.vertrauen{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;max-width:640px}
.vertrauen span{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:9px 16px;font-size:16px}
.vertrauen b{color:var(--akzent);margin-right:4px}
.runter{position:absolute;left:50%;bottom:22px;z-index:3;color:#fff;opacity:.7;font-size:28px;transform:translateX(-50%);animation:hopsen 2s infinite}
@keyframes hopsen{50%{transform:translate(-50%,8px)}}

/* Eine App statt zwölf */
.eine{background:var(--dunkel);color:var(--hell);padding:100px 0;text-align:center}
.eine h2{font-size:clamp(44px,5.5vw,76px)}
.eine p.ein{color:var(--hellleise);font-size:22px;margin:16px auto 44px;max-width:720px}
/* Eine App statt zwölf: Apps stehen im Kreis und fliegen beim Runterscrollen nach innen in autour (seite.js). Ohne JS/Bewegung: Kreis um autour. */
.eine{position:relative;overflow:clip}
.eine::before{content:"";position:absolute;left:50%;top:64%;width:900px;height:900px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(239,106,42,.22),transparent 60%);opacity:0;transition:opacity 1.2s;pointer-events:none}
.eine.fertig::before{opacity:1}
.eine .zeile{position:relative;height:34px;margin:0 0 18px;font-size:22px;font-weight:600}
.eine .zeile span{position:absolute;inset:0;transition:opacity .6s,transform .6s}
.eine .zeile .vor{color:var(--hellleise)}.eine .zeile .nach{opacity:0;transform:translateY(12px);color:var(--hell)}.eine .zeile .nach b{color:var(--akzent)}
.eine.fertig .zeile .vor{opacity:0;transform:translateY(-12px)}.eine.fertig .zeile .nach{opacity:1;transform:none}
.buehne{position:relative;width:min(640px,100%);aspect-ratio:1;margin:0 auto;--rx:262px;--ry:262px}
.buehne .app{position:absolute;left:50%;top:50%;width:110px;margin:-55px 0 0 -55px;text-align:center;color:var(--hell);font-size:16px;font-weight:600;line-height:1.3;
 transform:translate(calc(sin(var(--i)*30deg)*var(--rx)),calc(cos(var(--i)*30deg)*var(--ry)*-1));transition:transform .8s cubic-bezier(.3,.7,.2,1),opacity .5s;will-change:transform}
.buehne .app em{position:relative;display:grid;place-items:center;width:70px;height:70px;margin:0 auto 7px;border-radius:19px;font-style:normal;font-size:36px;background:var(--f);box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.buehne .app em i{position:absolute;top:-8px;right:-8px;min-width:26px;height:26px;padding:0 7px;border-radius:13px;background:#ff3b30;color:#fff;font:700 14px/26px -apple-system,sans-serif;box-shadow:0 0 0 3px var(--dunkel);transition:all .4s}
.buehne.chaos .app{animation:wackel .28s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-37ms)}
@keyframes wackel{from{rotate:-2.5deg}to{rotate:2.5deg}}
.buehne .mitte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;transition:transform .7s cubic-bezier(.2,1.4,.4,1),opacity .5s;z-index:2}
.buehne.chaos .mitte{transform:translate(-50%,-50%) scale(.4);opacity:0}
.buehne .ikon{position:relative;width:150px;height:150px;margin:0 auto}
.buehne .ikon img{width:150px;height:150px;border-radius:38px;box-shadow:0 0 0 12px rgba(239,106,42,.14),0 0 0 26px rgba(239,106,42,.06),0 24px 70px rgba(239,106,42,.55);transition:transform .15s}
.buehne .mitte.puls img{transform:scale(1.08)}
.buehne .zahl{position:absolute;top:-12px;right:-14px;min-width:46px;height:46px;padding:0 10px;border-radius:23px;background:var(--akzent);color:#fff;font:800 22px/46px -apple-system,sans-serif;box-shadow:0 0 0 4px var(--dunkel)}
.buehne .mitte b{display:block;font-family:Georgia,serif;font-size:38px;margin-top:12px}
.buehne .mitte small{display:block;color:var(--hellleise);font-size:16px;transition:opacity .6s .4s}
.buehne.chaos .mitte small,.buehne.sog .mitte small{opacity:0}
.buehne .bahn{position:absolute;inset:calc(50% - var(--ry)) calc(50% - var(--rx));border-radius:50%;border:2px dashed rgba(239,106,42,.4);transition:opacity 1s .6s}
.buehne.chaos .bahn,.buehne.sog .bahn{opacity:0;transition-delay:0s}
.eine.scroll{padding:0;height:260vh}
.eine.scroll .kleber{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:40px 0}
.eine.scroll .buehne{width:min(600px,100%);aspect-ratio:auto;height:min(600px,calc(100vh - 250px));height:min(600px,calc(100svh - 250px))}
.eine.scroll p.ein{display:none}
.eine.scroll:not(.fertig) .mitte small{opacity:0;transition:none}
.eine.scroll h2{font-size:clamp(36px,5vw,64px)}
.eine.scroll .mitte,.eine.scroll .app{transition:none}
.eine.scroll .marken{position:absolute;left:0;right:0;bottom:6vh;margin:0;padding:0 20px}
.eine .marken{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px;opacity:0;transform:translateY(14px);transition:all .7s .5s}
.eine.fertig .marken{opacity:1;transform:none}
.eine .marken span{background:var(--karte);border-radius:999px;padding:10px 18px;font-size:17px;color:var(--hell)}.eine .marken b{color:var(--gruen)}

/* Hintergrund */
.hinter{padding:110px 0;text-align:center;overflow:hidden}
.hinter h2{font-size:clamp(40px,4.8vw,62px)}
.hinter p.ein{font-size:21px;color:var(--leise);max-width:640px;margin:16px auto 50px}
.wolke{position:relative;max-width:1100px;margin:0 auto;height:760px}
.wolke .telefon{position:absolute;left:50%;top:0;transform:translateX(-50%);max-width:300px}
.chip{position:absolute;background:#fff;border-radius:999px;padding:12px 20px;font-size:17px;box-shadow:0 12px 30px rgba(0,0,0,.10);white-space:nowrap;opacity:0;transform:translateY(16px) scale(.96);transition:all .5s ease}
.chip.da{opacity:1;transform:none}
.chip i{font-style:normal;margin-right:8px}
.chip small{color:var(--gruen);font-weight:700;margin-left:8px;font-size:15px}

/* Momente */
.momente{background:var(--sand);padding:110px 0}
.momente h2{font-size:clamp(40px,4.8vw,62px);text-align:center}
.momente p.ein{font-size:21px;color:var(--leise);text-align:center;max-width:640px;margin:16px auto 50px}
.moment-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.moment{background:#fff;border-radius:30px;overflow:hidden;display:flex;flex-direction:column}
.moment .frage{background:var(--dunkel);color:var(--hell);padding:30px 28px;min-height:190px;position:relative}
.moment .frage em{font-style:normal;font-size:40px;display:block;margin-bottom:10px}
.moment .frage h3{font-size:30px}
.moment .frage span{color:var(--hellleise);font-size:16px;display:block;margin-top:8px}
.moment .antwort{padding:24px 28px 28px;font-size:18px}
.moment .antwort b{display:block;color:var(--akzent);font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}

/* Kapitel */
.kapitel{padding:110px 0}
.kapitel.dunkel{background:var(--dunkel);color:var(--hell)}
.kap-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center}
.kap-raster.dreh .text{order:2}
.kapitel h2{font-size:clamp(40px,4.8vw,62px);margin-bottom:20px}
.kapitel p.ein{font-size:21px;color:var(--leise);margin:0 0 28px;max-width:520px}
.kapitel.dunkel p.ein{color:var(--hellleise)}
.punkte{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.punkte li{background:#fff;border-radius:20px;padding:16px 20px;font-size:18px;display:flex;gap:14px;align-items:center}
.kapitel.dunkel .punkte li{background:var(--karte)}
.punkte li em{font-style:normal;font-size:24px;width:30px;text-align:center;flex:none}
.punkte li b{display:block}.punkte li span{color:var(--leise);font-size:16px}
.kapitel.dunkel .punkte li span{color:var(--hellleise)}
.kapitel .telefon{margin:0 auto}
.paar{display:flex;gap:22px;justify-content:center}
.paar .telefon{max-width:270px;margin:0}
.paar .telefon:last-child{margin-top:60px}

/* Satz ausprobieren */
.probier{background:#fff;border-radius:28px;padding:26px;margin-top:30px;box-shadow:0 20px 50px rgba(0,0,0,.07)}
.probier label{font-weight:700;font-size:17px;display:block;margin-bottom:10px}
.probier .zeile{display:flex;gap:10px}
.probier input{flex:1;min-width:0;font:inherit;font-size:18px;border:2px solid #e3dcd2;border-radius:999px;padding:14px 20px;outline:none}
.probier input:focus{border-color:var(--akzent)}
.probier button{font:inherit;font-weight:700;background:var(--akzent);color:#fff;border:0;border-radius:999px;padding:0 24px;cursor:pointer}
.vorschlaege{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.vorschlaege button{font:inherit;font-size:15px;background:var(--grund);border:0;border-radius:999px;padding:8px 14px;cursor:pointer;color:var(--text)}
.ergebnis{margin-top:20px;display:none}
.ergebnis.da{display:block}
.ergebnis h4{font-family:Georgia,serif;font-size:24px;margin:0 0 4px}
.ergebnis .info{color:var(--leise);font-size:16px;margin-bottom:14px}
.etappe{display:flex;gap:14px;align-items:center;padding:10px 0;border-top:1px solid #efe9e0;opacity:0;transform:translateX(-12px);transition:all .4s ease}
.etappe.da{opacity:1;transform:none}
.etappe .nr{width:32px;height:32px;border-radius:50%;background:var(--akzent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.etappe b{display:block;font-size:17px}.etappe span{color:var(--leise);font-size:15px}
.ergebnis .fuss{font-size:14px;color:var(--leise);margin-top:12px}

/* Kino */
.film-band{padding:0 0 110px}
.kino{position:relative;border-radius:30px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.35);aspect-ratio:16/9;background:#13201a;cursor:pointer}
.kino video,.kino img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kino .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 50%)}
.kino .play b{width:100px;height:100px;border-radius:50%;background:var(--akzent);color:#fff;display:grid;place-items:center;font-size:38px;box-shadow:0 0 0 16px rgba(239,106,42,.3);transition:transform .2s}
.kino:hover .play b{transform:scale(1.07)}
.kino .titel{position:absolute;left:30px;bottom:24px;color:#fff;font-family:Georgia,serif;font-size:28px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.filmhinweis{text-align:center;color:var(--leise);font-size:14px;margin:16px 0 0}
.kino.spielt .play,.kino.spielt .titel{display:none}

/* Datenschutz */
.schutz{background:var(--nacht);color:var(--hell);padding:120px 0}
.schutz-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.schutz h2{font-size:clamp(46px,5.6vw,76px);margin-bottom:24px}
.schutz p.ein{font-size:21px;color:var(--hellleise);margin:0 0 20px}
.schutz .meldung{border-left:4px solid var(--akzent);padding:6px 0 6px 20px;margin:0 0 26px;font-size:20px;color:#e9e1d6}
.null{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.null div{background:var(--karte);border-radius:24px;padding:24px}
.null b{display:block;font-size:68px;line-height:1;color:var(--akzent);font-family:-apple-system,"Inter",sans-serif}
.null span{color:var(--hellleise);font-size:17px}
.null .breit{grid-column:1/-1;background:var(--akzent)}
.null .breit span{color:#fff}.null .breit b{color:#fff;font-size:30px;font-family:Georgia,serif;margin-bottom:6px}
.umzug{background:var(--akzent);color:#fff;padding:64px 0}
.umzug .huelle{display:flex;align-items:center;gap:40px;justify-content:space-between;flex-wrap:wrap}
.umzug h2{font-size:clamp(32px,3.6vw,48px)}
.umzug p{margin:8px 0 0;font-size:20px;opacity:.95;max-width:640px}

/* Preise */
.preise{padding:100px 0;background:var(--dunkel);color:var(--hell);text-align:center}
.preise h2{font-size:clamp(38px,4.4vw,58px);margin-bottom:40px}
.preis-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.preis{background:var(--karte);border-radius:28px;padding:30px}
.preis.plus{background:var(--akzent);transform:translateY(-10px);box-shadow:0 30px 60px rgba(239,106,42,.25)}
.preis h3{font-size:28px}
.preis .betrag{font-size:46px;font-weight:800;margin:10px 0 8px;font-family:-apple-system,"Inter",sans-serif}
.preis .betrag span{font-size:18px;font-weight:500;opacity:.85}
.preis p{margin:0;font-size:17px;color:var(--hellleise)}
.preis.plus p{color:#fff3ea}
.preis-raster.zwei{grid-template-columns:repeat(2,1fr);max-width:860px;margin:0 auto}
.preis .test{margin-top:14px!important;font-weight:700;color:#fff!important}
.kontingent{display:flex;gap:30px;align-items:center;text-align:left;max-width:860px;margin:28px auto 0;background:var(--karte);border:1px solid #3a352f;border-radius:28px;padding:28px 30px}
.kontingent h3{font-size:26px;margin-bottom:10px}
.kontingent p{margin:0;font-size:17px;color:var(--hellleise)}
.kontingent p b{color:var(--hell)}
.kontingent p.klein{margin-top:10px;font-size:15px}
.kontingent-preis{flex:none;text-align:center;background:var(--akzent);border-radius:22px;padding:18px 22px}
.kontingent-preis b{display:block;font-size:36px;font-family:-apple-system,"Inter",sans-serif;color:#fff}
.kontingent-preis span{font-size:14px;color:#fff3ea}
@media (max-width:860px){.kontingent{flex-direction:column;align-items:flex-start}}
.nachschlag{margin-top:26px;color:var(--hellleise);font-size:17px}

/* Mehr */
.mehr{padding:100px 0}
.mehr h2{font-size:clamp(34px,4vw,50px);text-align:center;margin-bottom:12px}
.mehr p.ein{text-align:center;color:var(--leise);font-size:20px;margin:0 0 36px}
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kacheln a,.kacheln div{background:#fff;border-radius:22px;padding:22px;text-decoration:none;color:var(--text)}
.kacheln em{font-style:normal;font-size:28px}
.kacheln b{display:block;font-size:20px;margin-top:8px}
.kacheln span{color:var(--leise);font-size:16px}
.alle{text-align:center;margin-top:30px;font-size:20px}
.alle a{font-weight:700;text-decoration:none}

/* Wir */
.wir{padding:20px 0 100px}
.wir-karte{display:flex;gap:30px;align-items:center;background:#fff;border-radius:32px;padding:32px;max-width:900px;margin:0 auto}
.wir-karte img{width:110px;height:110px;border-radius:28px;flex:none}
.wir-karte h3{font-size:30px;margin-bottom:8px}
.wir-karte p{margin:0;color:var(--leise)}
.wir-karte a{font-weight:700;text-decoration:none}

/* Schluss */
.schluss{position:relative;color:#fff;text-align:center;padding:130px 0;overflow:hidden;background:#13201a}
.schluss .standbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.schluss .huelle{position:relative}
.schluss h2{font-size:clamp(42px,5.2vw,70px);margin-bottom:28px}
.schluss p{color:#ddd3c7;font-size:20px;margin:20px 0 0}
footer{background:var(--dunkel);color:var(--hellleise);padding:40px 0;font-size:16px}
footer .huelle{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
footer a{color:var(--hellleise);text-decoration:none}
footer b{color:#fff}

/* Unterseiten */
.unterkopf{background:var(--dunkel);color:var(--hell);padding:130px 0 70px}
.unterkopf h1{font-size:clamp(42px,5.5vw,72px)}
.unterkopf p{color:var(--hellleise);font-size:21px;max-width:720px}
.gruppe{padding:70px 0 10px}
.gruppe h2{font-size:clamp(32px,3.8vw,46px);margin-bottom:24px}
.gruppe .kacheln{grid-template-columns:repeat(3,1fr)}
.marke-plus{display:inline-block;background:var(--akzent);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:middle;letter-spacing:.04em}

@media (max-width:860px){
 body{font-size:18px}
 .huelle{padding:0 20px}
 nav.oben .rechts{display:none}
 .held{min-height:0}
 .held .huelle{padding-top:110px;padding-bottom:80px}
 .held p.ein{font-size:20px}
 .held::after{background:linear-gradient(0deg,rgba(14,13,12,.9),rgba(14,13,12,.55) 60%,rgba(14,13,12,.35))}
 .buehne{width:min(370px,100%);aspect-ratio:auto;height:500px;--rx:min(150px,calc(50vw - 58px));--ry:min(150px,calc(50vw - 58px))}
 .buehne .app{width:76px;margin:-38px 0 0 -38px;font-size:13px}.buehne .app em{width:52px;height:52px;font-size:27px;border-radius:14px}
 .buehne .app em i{top:-7px;right:-7px;min-width:22px;height:22px;font-size:12px;line-height:22px;padding:0 6px}
 .buehne .ikon,.buehne .ikon img{width:96px;height:96px;border-radius:25px}.buehne .zahl{min-width:36px;height:36px;font-size:17px;line-height:36px;right:-12px;top:-10px}
 .eine.scroll .buehne{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);height:min(520px,calc(100vh - 200px));height:min(520px,calc(100svh - 200px))}
 .eine.scroll h2{font-size:32px}.eine.scroll .zeile{font-size:16px;height:48px;margin-bottom:6px}.eine.scroll .kleber{padding:24px 0}
 .buehne .app{width:72px;margin:-36px 0 0 -36px;font-size:12px}.buehne .app em{width:46px;height:46px;border-radius:13px;margin-bottom:5px}
 .buehne .mitte b{font-size:26px;margin-top:8px}.buehne .mitte small{font-size:13px}.eine .zeile{font-size:18px;height:56px}
 .wolke{height:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
 .wolke .telefon{position:relative;left:auto;transform:none;max-width:240px;margin-bottom:16px}
 .chip{position:static;white-space:normal}
 .moment-raster,.kap-raster,.schutz-raster,.preis-raster,.preis-raster.zwei{grid-template-columns:minmax(0,1fr)}
 .kap-raster{gap:44px}
 .kap-raster.dreh .text{order:0}
 .kapitel,.hinter,.momente,.eine{padding:76px 0}
 .paar .telefon{max-width:calc(47% - 20px)}
 .paar .telefon:last-child{margin-top:40px}
 .kapitel .telefon{max-width:260px}
 .probier .zeile{flex-direction:column}
 .probier button{padding:14px}
 .preis.plus{transform:none}
 .kacheln,.gruppe .kacheln{grid-template-columns:1fr 1fr}
 .wir-karte{flex-direction:column;text-align:center}
 .kino .titel{font-size:20px;left:18px;bottom:14px}
 .kino .play b{width:76px;height:76px;font-size:28px}
 .moment .frage{min-height:0}
}

/* Eigene Linien-Symbole statt Emojis (3.11.) */
.sym{display:inline-grid;place-items:center;font-style:normal}
.sym svg{width:1em;height:1em}
.buehne .app em{color:#fff;overflow:visible}
.buehne .app em::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 55%);pointer-events:none}
.buehne .app em svg{width:52%;height:52%;position:relative;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.chip i.sym{color:var(--akzent);margin-right:8px;font-size:19px;vertical-align:-3px}
.moment .frage em.sym{display:grid;width:64px;height:64px;border-radius:18px;background:linear-gradient(160deg,#ff8a4c,#e0531a);color:#fff;font-size:34px;margin-bottom:16px;box-shadow:0 10px 24px rgba(239,106,42,.35)}
.punkte li em.sym{color:var(--akzent);font-size:24px}
.kacheln em.sym{display:grid;width:48px;height:48px;border-radius:14px;background:rgba(239,106,42,.12);color:var(--akzent);font-size:26px}

/* Satz-Planer (satz.js): autour denkt mit, kleine Routenkarte */
.ergebnis .denkt{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;transition:opacity .4s}
.ergebnis .denkt.zu{display:none}
.schritt{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--leise);opacity:0;transform:translateY(6px);transition:all .3s}
.schritt.an{opacity:1;transform:none}
.schritt i{width:18px;height:18px;border-radius:50%;border:2px solid var(--akzent);border-right-color:transparent;animation:dreh .7s linear infinite;flex:none}
.schritt.fertig i{animation:none;border:0;background:var(--gruen);position:relative}
.schritt.fertig i::after{content:"✓";position:absolute;inset:0;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;font-style:normal}
.schritt b{color:var(--text)}
@keyframes dreh{to{transform:rotate(360deg)}}
.ergebnis .plan{opacity:0;transform:translateY(10px);transition:all .5s}
.ergebnis .plan.da{opacity:1;transform:none}
.minikarte{display:block;width:100%;height:auto;margin:4px 0 10px}
.minikarte .linie{fill:none;stroke:var(--akzent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:zeichnen 2.4s ease .2s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.minikarte .pin circle{fill:var(--akzent);stroke:#fff;stroke-width:3}
.minikarte .pin text{fill:#fff;font:800 12px -apple-system,Inter,sans-serif;text-anchor:middle}
.minikarte .pin{opacity:0;animation:pin .4s ease forwards;animation-delay:calc(.3s + var(--n) * .25s)}
.minikarte .pin.start{opacity:1;animation:none}.minikarte .pin.start circle{fill:var(--dunkel)}
.minikarte .pin.start .name{fill:var(--text);font-size:15px;font-weight:700;paint-order:stroke;stroke:#f4efe6;stroke-width:4px;text-anchor:middle}
.minikarte{border-radius:18px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.probier .vorschlaege button{padding:8px 14px;font-size:15px;font-weight:500}
@keyframes pin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.etappe.anreise .nr{background:var(--dunkel)}
.ergebnis .nochmal{margin-top:10px}
@media (prefers-reduced-motion:reduce){.minikarte .linie{animation:none;stroke-dashoffset:0}.minikarte .pin{opacity:1;animation:none}}
.ergebnis .hinweis{background:#fff4ec;color:#9a4413;border-radius:14px;padding:10px 14px;font-size:15px;margin:2px 0 10px}

/* ===== Maximum 2 (3.11., Entwurf) ===== */
/* Kopf: Filmzeile unten rechts */
.held .filmzeile{position:absolute;right:22px;bottom:18px;z-index:3;margin:0;font-size:13px;color:rgba(255,255,255,.75);background:rgba(0,0,0,.35);border-radius:999px;padding:6px 12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* Eine App statt zwölf: Name weicht den einfliegenden Apps */
.buehne .mitte b{transition:opacity .3s}
.buehne .mitte.sog b{opacity:0}
/* Handy-Paare: zwei und drei */
.paar.drei .telefon{max-width:230px}
.paar.drei .telefon:nth-child(2){margin-top:50px}
.paar.drei .telefon:last-child{margin-top:0}
/* Kino mit Filmwahl */
.film-band{padding:0 0 110px}
.film-band h2{font-size:clamp(36px,4.4vw,56px);text-align:center;margin-bottom:12px}
.film-band p.ein{text-align:center;color:var(--leise);font-size:20px;max-width:680px;margin:0 auto 28px}
.filmwahl{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.filmwahl button{font:inherit;text-align:left;display:flex;flex-direction:column;gap:2px;background:#fff;border:2px solid transparent;border-radius:20px;padding:12px 20px;cursor:pointer;color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.06);transition:transform .2s,border-color .2s,background .2s}
.filmwahl button b{font-size:18px}.filmwahl button small{font-size:14px;color:var(--leise)}
.filmwahl button.an{border-color:var(--akzent);background:#fff5ee}
.filmwahl button.an b{color:var(--akzent)}
.filmwahl button:hover{transform:translateY(-2px)}
.kino .titel{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.kino .titel small{font-family:-apple-system,"Inter",sans-serif;font-size:14px;opacity:.85}
.kino.wechsel img{opacity:0}.kino img{transition:opacity .35s}
/* Handy-Leiste: Tester werden (erscheint nach dem Kopf, lässt sich wegtippen) */
.leiste{display:none}
@media (max-width:860px){
 .held .filmzeile{right:auto;left:50%;transform:translateX(-50%);bottom:62px;white-space:nowrap;font-size:12px}
 .leiste{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(28,26,24,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
 .leiste.da{transform:none}
 .leiste[hidden]{display:none}
 .leiste .knopf{flex:1;padding:8px 18px 8px 8px;box-shadow:none}
 .leiste .knopf i{width:38px;height:38px;font-size:18px}
 .leiste .knopf b{font-size:18px}.leiste .knopf small{font-size:13px}
 .leiste button{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;cursor:pointer}
 body.leiste-an{padding-bottom:84px}
 /* Fleißig dahinter: Laufband statt Kärtchen-Stapel */
 .wolke{gap:0}
 .wolke .telefon{max-width:230px;margin-bottom:22px}
 .wolke .chips{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;display:grid;gap:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
 .wolke .band{display:flex;gap:10px;width:max-content;animation:band 46s linear infinite}
 .wolke .band.zurueck{animation-direction:reverse;animation-duration:52s}
 .wolke .band .chip{position:static;opacity:1;transform:none;white-space:nowrap;font-size:16px;padding:11px 18px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
 .wolke:hover .band,.wolke:active .band{animation-play-state:paused}
 @keyframes band{to{transform:translateX(-50%)}}
 /* Handys: wischen statt winzig */
 .paar{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 20px 18px;margin:0 -20px;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .paar::-webkit-scrollbar{display:none}
 .paar .telefon,.paar.drei .telefon{flex:0 0 68%;max-width:none;scroll-snap-align:center;margin:0!important}
 .paar::after{content:"";flex:0 0 1px}
 .punkte-wisch{display:flex;justify-content:center;gap:7px;margin-top:-6px}
 .punkte-wisch i{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.18);transition:all .3s}
 .kapitel.dunkel .punkte-wisch i{background:rgba(255,255,255,.25)}
 .punkte-wisch i.an{background:var(--akzent);width:22px;border-radius:4px}
 .wisch-tipp{text-align:center;font-size:14px;color:var(--leise);margin:6px 0 0}
 .kapitel.dunkel .wisch-tipp{color:var(--hellleise)}
 .filmwahl{gap:8px}
 .filmwahl button{padding:10px 14px;flex:1 1 30%}
 .filmwahl button b{font-size:16px}.filmwahl button small{font-size:12px}
 .film-band p.ein{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.wolke .band{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.wolke .chips{-webkit-mask-image:none;mask-image:none;width:auto;margin:0}.leiste{transition:none}}
/* Satz-Karte: sichtbare Grenzen, Ländernamen, Meer */
.minikarte .grenze{fill:none;stroke:#b9a98f;stroke-width:1.1}
.minikarte .landname{fill:#9a8d7a;font:700 11px -apple-system,Inter,sans-serif;letter-spacing:.12em;text-anchor:middle;text-transform:uppercase;pointer-events:none}

.minikarte .see{fill:#d6e8ee;stroke:#c3d9e1;stroke-width:.8}
/* Drei Handys als Fächer auf dem Computer */
@media (min-width:861px){
 .paar.drei{justify-content:center;align-items:flex-start;padding:20px 0 30px}
 .paar.drei .telefon{flex:0 0 250px;width:250px;margin:0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
 .paar.drei .telefon:nth-child(1){transform:rotate(-8deg) translateY(36px);z-index:1}
 .paar.drei .telefon:nth-child(2){z-index:3;margin:0 -95px}
 .paar.drei .telefon:nth-child(3){transform:rotate(8deg) translateY(36px);z-index:2}
 .paar.drei .telefon.lebt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
 .paar.drei .telefon:nth-child(1).lebt{transform:rotate(-8deg) translateY(calc(36px + var(--ty,0px)))}
 .paar.drei .telefon:nth-child(3).lebt{transform:rotate(8deg) translateY(calc(36px + var(--ty,0px)))}
 .paar.drei .telefon:hover{z-index:4;transform:scale(1.05)!important}
 .punkte-wisch,.wisch-tipp{display:none}
}
}
.minikarte .pin.buendel .name{fill:var(--text);font-size:14px;font-weight:700;paint-order:stroke;stroke:#f1ebe1;stroke-width:4px;text-anchor:middle}
.minikarte .pin.buendel text:not(.name){font-size:15px}

/* ===== Entwurf 3 (3.11.) ===== */
/* Kopf: Routenlinie zeichnet sich, Worte kommen nacheinander */
.held .route{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.held .route path{fill:none;stroke:var(--akzent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;pathLength:1;filter:drop-shadow(0 0 10px rgba(239,106,42,.8));opacity:.55;animation:zeichnen 3.2s cubic-bezier(.4,0,.2,1) .4s forwards}
.held h1 .z{display:inline-block;font-style:normal;opacity:0;transform:translateY(.45em);animation:wort .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.25s + var(--n)*.35s)}
@keyframes wort{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.held .route path{animation:none;stroke-dashoffset:0}.held h1 .z{animation:none;opacity:1;transform:none}}

/* Ein Tag mit autour: Scroll-Geschichte */
.tag{position:relative;background:var(--grund)}
.tag-schritte{list-style:none;margin:0;padding:0}
.tag-buehne{display:none}
.tag.lebt{height:calc(6 * 120vh)}
.tag.lebt .tag-schritte{position:absolute;inset:0;visibility:hidden}
.tag.lebt .tag-buehne{display:block;position:sticky;top:0;height:100vh;height:100svh;overflow:clip;color:var(--text);transition:color .8s}
.himmel{position:absolute;inset:0;background:linear-gradient(180deg,var(--h1),var(--h2) 55%,var(--h3));--h1:#dfe9f0;--h2:#f1ece3;--h3:#f3efe8;transition:--h1 1.2s,--h2 1.2s,--h3 1.2s;}
.sonne{position:absolute;width:300px;height:300px;border-radius:50%;left:var(--sx,70%);top:var(--sy,70%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(239,106,42,.55),rgba(239,106,42,.18) 45%,transparent 70%);filter:blur(10px);opacity:.8;transition:left 1.4s cubic-bezier(.3,.7,.3,1),top 1.4s cubic-bezier(.3,.7,.3,1),background 1.2s,opacity 1.2s;pointer-events:none}
.tag.nacht .tag-buehne{color:var(--hell)}
.tag.nacht .sonne{background:radial-gradient(circle,rgba(244,239,232,.85),rgba(244,239,232,.15) 40%,transparent 65%);width:160px;height:160px}
.tag.abend .tag-buehne{color:#fff}.tag.abend .tag-text .uhr b{color:#fff}.tag.abend .tag-text p.ein{color:#fff3ea}.tag.abend .tag-chips .chip{background:rgba(255,255,255,.94);color:var(--text)}.tag.abend .tag-text .dach{color:#fff3ea}.tag.abend .tag-punkte i.an{background:#fff}
.tag-raster{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:50px;align-items:center;transition:grid-template-columns 1.1s cubic-bezier(.3,.7,.2,1)}
.tag-text .uhr{display:flex;align-items:baseline;gap:14px;margin:4px 0 14px}
.tag-text .uhr b{font:800 clamp(26px,2.6vw,34px)/1.1 -apple-system,"Inter",sans-serif;letter-spacing:-.01em;color:var(--akzent)}
.tag-text .uhr span{font-size:18px;opacity:.75}
.tag-text h2{font-size:clamp(36px,4.2vw,56px);margin-bottom:16px;min-height:2.2em}
.tag-text p.ein{font-size:21px;margin:0 0 22px;max-width:520px;opacity:.85;min-height:3.2em}
.tag.nacht .tag-text p.ein{color:var(--hellleise)}
.tag-text .wechselt{animation:tausch .6s ease}
@keyframes tausch{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
.tag-chips{display:flex;flex-wrap:wrap;gap:8px;min-height:50px}
.tag-chips .chip{position:static;white-space:normal;opacity:0;transform:translateY(10px) scale(.96);transition:all .45s cubic-bezier(.2,.8,.2,1);font-size:16px;padding:10px 16px}
.tag-chips .chip.da{opacity:1;transform:none}
.tag-chips .chip small{color:var(--gruen);font-weight:700;margin-left:6px}
.tag.nacht .tag-chips .chip{background:rgba(255,255,255,.1);color:var(--hell);box-shadow:none;border:1px solid rgba(255,255,255,.15)}
.tag-handy{display:grid;place-items:center;perspective:1600px}
.telefon.gross{max-width:320px;width:100%;transition:transform 1.1s cubic-bezier(.3,.7,.2,1),box-shadow 1.1s;transform:rotate(0deg) scale(1)}
.telefon.gross video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s}
.telefon.gross video.laeuft{opacity:1}
.telefon.gross img{transition:opacity .4s}
.telefon.gross .film-innen[hidden]{display:none}
.telefon.gross .film-innen{position:absolute;inset:0;background:#000;display:grid;place-items:center}
.telefon.gross .film-innen video{position:absolute;left:50%;top:50%;width:217.3%;height:46%;max-width:none;max-height:none;object-fit:contain;opacity:1;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;background:#000}
.tag.nacht .sonne{opacity:0;transition:opacity .8s}
.tag.quer .telefon.gross{transform:rotate(90deg) scale(.93);box-shadow:0 30px 90px rgba(0,0,0,.5)}
@media (min-width:861px){.tag.quer .tag-raster{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}
.tag-punkte{position:absolute;right:26px;top:50%;transform:translateY(-50%);z-index:3;display:grid;gap:10px}
.tag-punkte i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.3;transition:all .3s}
.tag-punkte i.an{opacity:1;height:24px;border-radius:4px;background:var(--akzent)}
.tag-fuss{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:14px;opacity:.55;z-index:3}
/* ohne JS oder bei „Bewegung reduzieren“: sechs Karten untereinander */
.tag:not(.lebt){padding:90px 0 40px}
.tag:not(.lebt) .tag-schritte{max-width:1180px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tag:not(.lebt) .tag-schritte li{background:#fff;border-radius:24px;padding:22px 24px}
.tag:not(.lebt) .tag-schritte li::before{content:attr(data-uhr) " · " attr(data-ort);display:block;color:var(--akzent);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.tag:not(.lebt) .tag-schritte h3{font-size:24px;margin-bottom:8px}.tag:not(.lebt) .tag-schritte p{margin:0;color:var(--leise);font-size:17px}
@media (max-width:860px){
 .tag.lebt{height:calc(6 * 110vh)}
 .tag-raster{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;align-items:start;padding-top:14px;padding-bottom:70px}
 .tag-handy{order:1;perspective:1200px;height:min(46vh,430px);align-items:center}
 .telefon.gross{max-width:min(200px,42vw)}
 .tag.quer .telefon.gross{transform:rotate(90deg) scale(1.02)}
 .tag-text{order:2}
 .tag-text .dach{display:none}
 .tag-text .uhr{margin:0 0 6px}.tag-text .uhr b{font-size:22px}.tag-text .uhr span{font-size:15px}
 .tag-text h2{font-size:26px;min-height:0;margin-bottom:8px}
 .tag-text p.ein{font-size:17px;min-height:0;margin-bottom:12px}
 .tag-chips .chip{font-size:14px;padding:8px 12px}
 .tag-chips .chip:nth-child(n+3){display:none}
 .tag-punkte{right:12px}
 .tag:not(.lebt) .tag-schritte{grid-template-columns:1fr;padding:0 20px}
}

/* Datenfluss */
.fluss-und-null{display:grid;gap:16px}
.fluss{width:100%;height:auto;background:var(--karte);border-radius:24px;padding:10px}
.fluss .ader{fill:none;stroke:#4a4440;stroke-width:3}
.fluss .ader.tot{stroke-dasharray:6 6;stroke:#55504a}
.fluss .punkt circle{filter:drop-shadow(0 0 6px rgba(239,106,42,.9))}
.fluss .sperre{animation:sperre 2.4s ease-in-out infinite}
@keyframes sperre{0%,60%,100%{transform:translate(372px,186px) scale(1)}70%{transform:translate(372px,186px) scale(1.25)}}
@media (prefers-reduced-motion:reduce){.fluss .punkt{display:none}.fluss .sperre{animation:none}}
@media (max-width:860px){.schutz-raster{gap:34px}}

.schutz p.ein b{color:var(--hell)}
.null .breit u{text-decoration:underline;text-underline-offset:3px}
.fluss .ader.frage{stroke:#6b6259;stroke-dasharray:4 5}

/* v8: weiche Übergänge, weniger Ruckeln */
@property --h1{syntax:'<color>';inherits:true;initial-value:#f3efe8}
@property --h2{syntax:'<color>';inherits:true;initial-value:#ebe4d8}
@property --h3{syntax:'<color>';inherits:true;initial-value:#f3efe8}
.himmel{transition:--h1 1.4s ease,--h2 1.4s ease,--h3 1.4s ease}
.telefon.gross .schicht{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background:#111}
.telefon.gross .schicht.an{opacity:1}
.telefon.gross .schicht img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:none}
.telefon.gross .schicht video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s}
.telefon.gross .schicht video.laeuft{opacity:1}
.telefon.gross .film-innen{opacity:0;transition:opacity .7s ease .25s}
.telefon.gross .film-innen.an{opacity:1}
.telefon.lebt,.telefon.gross,.buehne .app{will-change:transform}
.tag-text .wechselt{animation:tausch .6s ease both}
#tag-titel.wechselt{animation-delay:.07s}#tag-satz.wechselt{animation-delay:.14s}
@media (prefers-reduced-motion:reduce){.tag-text .wechselt{animation:none}}
@media (max-width:860px) and (max-height:520px){.eine.scroll .buehne{height:calc(100svh - 110px)}.eine.scroll .kleber{padding:8px 0}.eine.scroll .zeile{display:none}}