/* final_21: Startseite – Einstieg mit animiertem Handy, Idee, Drop-Arten, „So funktioniert's“, „Für wen“, Live-Angebot, Vorteile.
   Animationen laufen nur, solange ein Bereich im Bild ist (.is-play, gesetzt von start.js), nie bei „Bewegung reduzieren“
   und nicht, wenn „Animation pausieren“ gedrückt ist (html.motion-paused). Ohne JavaScript steht jeder Bereich als ruhiges Bild. */
:root{--k-message:#7B8CFF;--k-help:#66CA91;--k-camera:#4A90E2;--k-meet:#ff79b7;--k-secret:#B18AFF;--k-group:#60D2CE;--k-gold:#FEC601;--k-coffee:#FFA75C;--k-meal:#FEC601;--k-ad:#FF9E57;--k-festival:#b18aff;--k-reward:#FEC601}
.k-message{--k:var(--k-message)}.k-help{--k:var(--k-help)}.k-camera{--k:var(--k-camera)}.k-meet{--k:var(--k-meet)}.k-secret{--k:var(--k-secret)}.k-group{--k:var(--k-group)}
.k-gold{--k:var(--k-gold)}.k-coffee{--k:var(--k-coffee)}.k-meal{--k:var(--k-meal)}.k-ad{--k:var(--k-ad)}.k-festival{--k:var(--k-festival)}.k-reward{--k:var(--k-reward)}

/* scroll reveal – only with JavaScript, IntersectionObserver and normal motion */
.reveal-on [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}
.reveal-on [data-reveal="2"]{transition-delay:.08s}.reveal-on [data-reveal="3"]{transition-delay:.16s}.reveal-on [data-reveal="4"]{transition-delay:.24s}
.reveal-on [data-reveal="5"]{transition-delay:.32s}.reveal-on [data-reveal="6"]{transition-delay:.4s}
html.motion-paused :is(.hero21,.kinds21,.how21,.live21,.usecases,.why21) :is(*,*::before,*::after){animation-play-state:paused!important;transition:none!important}
/* paused: nothing fades in any more – everything is simply there */
html.motion-paused.reveal-on [data-reveal]{transition:none;opacity:1;transform:none}

/* a drop as on the map: dark disc, coloured ring, glyph */
.dz{position:relative;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#101312;box-shadow:0 0 0 2px var(--k,#FEC601),0 0 22px color-mix(in srgb,var(--k,#FEC601) 55%,transparent);flex:none}
.dz img{width:62%;height:62%;display:block}
.dz:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--k,#FEC601);opacity:0;pointer-events:none}
.is-play .dz.is-pulse:after{animation:dz-pulse 2.2s ease-out infinite}
@keyframes dz-pulse{0%{opacity:.75;transform:scale(.9)}100%{opacity:0;transform:scale(1.32)}}

/* phone frame (hero and examples) */
.phone21{position:relative;width:min(300px,76vw);aspect-ratio:9/18.6;margin:0 auto;border-radius:46px;padding:11px;background:linear-gradient(150deg,#353b33,#0b0d0c 55%,#20251f);box-shadow:0 0 0 1px #4a5340,0 34px 90px #000d,0 0 140px #fec6011f}
@supports not (aspect-ratio:1/1){.phone21{width:290px;height:600px}}
.phone21:before{content:"";position:absolute;left:50%;top:19px;width:86px;height:24px;margin-left:-43px;border-radius:14px;background:#040504;z-index:20}
.phone21-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#141716 url('../images/beispielkarte.svg') 32% 50%/cover no-repeat;isolation:isolate}
.phone21-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b0d0ccc 0,#0b0d0c22 22%,#0b0d0c00 55%,#0b0d0caa 100%);z-index:0;pointer-events:none}
.ph-bar{position:absolute;left:14px;right:14px;top:50px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:6}
.ph-bar b{font-size:15px;color:#fec601;letter-spacing:-.02em}
.ph-bar span{padding:4px 10px;border-radius:99px;background:#111310e6;border:1px solid #3b4333;color:#d9ddd0;font-size:11px;white-space:nowrap}

/* ---------------------------------------------------------------- HERO */
.hero21{position:relative;overflow:hidden;padding:56px 0 64px}
.hero21:before{content:"";position:absolute;inset:-30% -20% auto;height:90%;background:radial-gradient(ellipse at 70% 40%,#fec60126 0,transparent 60%),radial-gradient(ellipse at 15% 20%,#4a90e21a 0,transparent 55%);pointer-events:none}
.hero21-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.hero21 .hero-claim{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#fec601;margin:0 0 18px;font-weight:700}
.hero21 h1{font-size:clamp(2.7rem,6.2vw,5.2rem);line-height:1.02;letter-spacing:-.045em;margin:0 0 22px}
.hero21 h1 .accent{color:#fec601}
.hero21-lead{font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.55;color:#dfe3d6;max-width:34rem;margin:0 0 28px}
.hero21 .hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px;margin:0 0 22px}
.hero21-proof{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 14px;padding:0;color:#c7ccbd;font-size:14px}
.hero21-proof li{display:flex;align-items:center;gap:8px}
.hero21-proof li:before{content:"";width:16px;height:16px;border-radius:50%;background:#66ca91 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23111310' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.hero21 .hero-micro{margin:0;font-size:13px;color:#a9af9d}
.hero21-visual{position:relative;display:grid;justify-items:center;gap:12px}
.hero21-caption{margin:0;font-size:12px;color:#a9af9d;text-align:center}
.hero21-pause{min-height:44px;padding:8px 16px;border-radius:99px;border:1px solid #3b4333;background:#111310;color:#d9ddd0;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.hero21-pause[hidden]{display:none}
.hero21-pause:focus-visible{outline:2px solid #fec601;outline-offset:2px}
/* the scene in the phone */
.h-me{position:absolute;left:22%;top:74%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#4a90e2;border:3px solid #fff;box-shadow:0 0 0 7px #4a90e244,0 4px 12px #0008;z-index:5;transition:left 1.9s cubic-bezier(.45,.05,.35,1),top 1.9s cubic-bezier(.45,.05,.35,1)}
.h-radius{position:absolute;left:22%;top:74%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;border:2px dashed #fec601aa;background:#fec60108;z-index:1;transition:left 1.9s cubic-bezier(.45,.05,.35,1),top 1.9s cubic-bezier(.45,.05,.35,1)}
.h-drop{position:absolute;margin:-26px 0 0 -26px;z-index:4;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .4s}
.h-drop.k-coffee{left:62%;top:44%}.h-drop.k-meet{left:30%;top:33%}.h-drop.k-reward{left:72%;top:66%}
.h-drop.k-meet{opacity:0;transform:translateY(-140px) scale(.6)}
.h-done{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:#66ca91 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23111310' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.h-tap{position:absolute;left:30%;top:33%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:3px solid #fff;opacity:0;z-index:6}
.h-chip{position:absolute;left:50%;top:92px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:#111310ee;border:1px solid var(--k,#fec601);color:#f3f4ee;font-size:12px;font-weight:700;white-space:nowrap;z-index:6;transition:border-color .3s}
.h-chip i{font-style:normal;color:var(--k,#fec601)}
.h-toast{position:absolute;left:12px;right:12px;bottom:14px;display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:#111310f2;border:1px solid var(--k,#fec601);box-shadow:0 -6px 30px #0009,0 0 30px color-mix(in srgb,var(--k,#fec601) 30%,transparent);z-index:8;opacity:0;visibility:hidden;transform:translateY(40px);transition:opacity .35s,transform .45s cubic-bezier(.2,1.3,.4,1),visibility 0s .45s}
.h-toast .dz{width:44px;height:44px}
.h-toast b{display:block;font-size:17px;color:#fff;letter-spacing:-.01em}
.h-toast span{display:block;font-size:12px;color:#c7ccbd;line-height:1.35}
.h-confetti{position:absolute;left:var(--cx,50%);top:var(--cy,50%);width:0;height:0;z-index:7}
.h-confetti i{position:absolute;left:0;top:0;width:8px;height:12px;border-radius:2px;background:var(--c);opacity:0}
.h-confetti i.is-round{width:10px;height:10px;border-radius:50%}
.h-confetti.is-burst i{animation:conf21 1.35s cubic-bezier(.15,.7,.3,1) var(--d,0s) forwards}
@keyframes conf21{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(.6)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(1)}}
.phone21.is-buzz{animation:buzz21 .42s linear}
@keyframes buzz21{0%,100%{transform:none}20%{transform:translateX(-3px) rotate(-.6deg)}40%{transform:translateX(3px) rotate(.6deg)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
/* acts: 1 coffee collected, 2 heart set, 3 money collected (classes set by start.js) */
.hero21 [data-act] .h-drop.is-open{transform:scale(1.22)}
.hero21 [data-act] .h-drop.is-got{opacity:.55;transform:scale(.9)}
.hero21 [data-act] .h-drop.is-got .h-done{opacity:1;transform:none}
.hero21 [data-act] .h-drop.k-meet.is-in{opacity:1;transform:none}
.hero21 [data-act] .h-tap.is-on{animation:tap21 .7s ease-out}
@keyframes tap21{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.3)}}
.hero21 [data-act] .h-toast.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .5s cubic-bezier(.2,1.3,.4,1)}
.hero21 .is-play .dz.is-pulse:after{animation:dz-pulse 2.2s ease-out infinite}
/* without JavaScript or with reduced motion: the coffee is collected, the toast shows it */
.hero21 .phone21:not([data-act]) .h-drop.k-coffee .h-done{opacity:1;transform:none}
.hero21 .phone21:not([data-act]) .h-toast{opacity:1;visibility:visible;transform:none}
.hero21 .phone21:not([data-act]) .h-me{left:57%;top:52%}
.hero21 .phone21:not([data-act]) .h-radius{left:57%;top:52%}

/* ---------------------------------------------------------------- IDEA */
.idea21-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:idea}
.idea21-card{position:relative;padding:28px 26px 26px;border-radius:24px;border:1px solid #3b4333;background:linear-gradient(170deg,#1f241c,#151815);overflow:hidden}
.idea21-card:before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#fec6012a,transparent 70%)}
.idea21-num{display:inline-block;margin-bottom:16px;font-size:13px;font-weight:800;letter-spacing:.18em;color:#fec601}
.idea21-card h3{margin:0 0 12px;font-size:23px;line-height:1.2}
.idea21-card p{margin:0;color:#c7ccbd;font-size:15px;line-height:1.7}
.idea21-who{margin-top:28px;padding:24px 26px;border-radius:24px;border:1px solid #3b4333;background:#151815;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 28px;align-items:center}
.idea21-who h3{margin:0;font-size:20px}
.idea21-who ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.idea21-who li{padding:8px 14px;border-radius:99px;border:1px solid #3b4333;background:#1c2019;font-size:14px;color:#dfe3d6}
.idea21-who li b{color:#fff}
.idea21-why{margin:22px 0 0;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.5;font-weight:700;max-width:52rem}
.idea21-why span{color:#fec601}

/* ---------------------------------------------------------------- KINDS */
.kinds21-group{margin:34px 0 14px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#a9af9d}
.kinds21-group:first-of-type{margin-top:0}
.kinds21-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kind21{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;align-items:start;padding:20px;border-radius:20px;border:1px solid #3b4333;background:linear-gradient(160deg,color-mix(in srgb,var(--k) 9%,#171a16),#151815 60%);transition:transform .25s,border-color .25s}
.kind21:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--k) 60%,#3b4333)}
.kind21 .dz{grid-row:span 3}
.kind21 h4{margin:2px 0 0;font-size:18px;line-height:1.25}
.kind21 p{margin:0;font-size:14px;line-height:1.55;color:#c7ccbd}
.kind21 .kind21-who{font-size:12px;color:#a9af9d}
.kind21-try{grid-column:2;justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0 2px;color:var(--k);font-weight:700;font-size:14px;text-decoration:none}
.kind21-try:hover{text-decoration:underline}
.kinds21 .is-play .kind21 .dz.is-pulse:after{animation:dz-pulse 2.6s ease-out infinite}
.kinds21 .is-play .kind21:nth-child(2) .dz:after{animation-delay:.4s}.kinds21 .is-play .kind21:nth-child(3) .dz:after{animation-delay:.8s}
.kinds21 .is-play .kind21:nth-child(4) .dz:after{animation-delay:1.2s}.kinds21 .is-play .kind21:nth-child(5) .dz:after{animation-delay:1.6s}
.kinds21 .is-play .kind21:nth-child(6) .dz:after{animation-delay:2s}
.kind21:hover .dz img{animation:hop21 .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop21{0%{transform:none}40%{transform:translateY(-6px) scale(1.12)}100%{transform:none}}
.kinds21-note{margin:18px 0 0;font-size:13px;color:#a9af9d}

/* ---------------------------------------------------------------- HOW IT WORKS */
.how21-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.how21-card{display:flex;flex-direction:column;gap:12px;padding:16px 16px 20px;border-radius:22px;border:1px solid #3b4333;background:#151815}
.how21-card h3{margin:4px 4px 0;font-size:19px;display:flex;align-items:center;gap:10px}
.how21-card h3 span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fec601;color:#111310;font-size:14px;flex:none}
.how21-card p{margin:0 4px;font-size:14px;line-height:1.6;color:#c7ccbd}
.how21-stage{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#141716 url('../images/beispielkarte.svg') center/cover no-repeat;isolation:isolate}
@supports not (aspect-ratio:1/1){.how21-stage{height:190px}}
.how21-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,#0000 0,#0b0d0c99 85%);z-index:0}
.how21-stage>*{position:absolute;z-index:1}
.how21-stage .dz{width:34px;height:34px;margin:-17px 0 0 -17px}
.how21-stage .lbl{padding:4px 10px;border-radius:99px;background:#111310ee;border:1px solid #fec601;color:#f3f4ee;font-size:11px;font-weight:700;white-space:nowrap}
.how21-stage .alt{visibility:hidden}
.st-me{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#4a90e2;border:2px solid #fff;box-shadow:0 0 0 6px #4a90e244}
/* radius: the circle grows, more drops come into it */
.st-radius .st-me{left:50%;top:55%}
.st-radius .r-ring{left:50%;top:55%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px dashed #fec601;background:#fec6010d}
.st-radius .dz.n1{left:40%;top:44%}.st-radius .dz.n2{left:70%;top:68%}.st-radius .dz.n3{left:20%;top:72%}.st-radius .dz.n4{left:82%;top:30%}
.st-radius .lbl{left:12px;top:12px}
.is-play .st-radius .r-ring{animation:r21-ring 7s infinite}
.is-play .st-radius .dz.n2{animation:r21-n2 7s infinite}.is-play .st-radius .dz.n3,.is-play .st-radius .dz.n4{animation:r21-n3 7s infinite}
.is-play .st-radius .lbl.l1{animation:r21-l1 7s infinite}.is-play .st-radius .lbl.l2{animation:r21-l2 7s infinite}.is-play .st-radius .lbl.l3{animation:r21-l3 7s infinite}
@keyframes r21-ring{0%,28%{transform:scale(.42)}36%,62%{transform:scale(.72)}70%,94%{transform:scale(1)}100%{transform:scale(.42)}}
@keyframes r21-n2{0%,30%{opacity:0;transform:scale(.4)}38%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r21-n3{0%,64%{opacity:0;transform:scale(.4)}72%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r21-l1{0%,30%{visibility:visible}31%,100%{visibility:hidden}}
@keyframes r21-l2{0%,30%{visibility:hidden}31%,64%{visibility:visible}65%,100%{visibility:hidden}}
@keyframes r21-l3{0%,64%{visibility:hidden}65%,98%{visibility:visible}99%,100%{visibility:hidden}}
/* on site: walk there, then the button turns on */
.st-site .dz{left:76%;top:42%}
.st-site .st-me{left:68%;top:50%}
.st-site .lbl{left:12px;top:12px}
.st-site .btn{left:12px;right:12px;bottom:12px;padding:8px;border-radius:10px;text-align:center;font-size:12px;font-weight:800;background:#2a2f27;color:#d9ddd0;border:1px solid #3b4333}
.st-site .btn.on{background:#fec601;color:#111310;border-color:#fec601}
.is-play .st-site .st-me{animation:s21-walk 6.5s infinite}
.is-play .st-site .lbl.l1{animation:s21-l1 6.5s infinite}.is-play .st-site .lbl.l2{animation:s21-l2 6.5s infinite}
.is-play .st-site .btn.off{animation:s21-l1 6.5s infinite}.is-play .st-site .btn.on{animation:s21-l2 6.5s infinite}
.is-play .st-site .dz{animation:s21-pop 6.5s infinite}
@keyframes s21-walk{0%,10%{left:16%;top:70%}55%,100%{left:68%;top:50%}}
@keyframes s21-l1{0%,55%{visibility:visible}56%,100%{visibility:hidden}}
@keyframes s21-l2{0%,55%{visibility:hidden}56%,98%{visibility:visible}99%,100%{visibility:hidden}}
@keyframes s21-pop{0%,56%{transform:none}62%{transform:scale(1.35)}70%,100%{transform:scale(1.1)}}
/* photo: picked, made smaller, location data gone, onto the drop */
.st-photo .ph{left:50%;top:50%;width:46%;aspect-ratio:4/3;margin:0;transform:translate(-50%,-50%);border-radius:10px;border:3px solid #fff;background:linear-gradient(180deg,#7fb3e8 0 55%,#4f8a4f 55% 100%);box-shadow:0 10px 30px #0009;overflow:hidden}
.st-photo .ph:before{content:"";position:absolute;left:60%;top:16%;width:22%;aspect-ratio:1;border-radius:50%;background:#ffd54a}
.st-photo .ph:after{content:"";position:absolute;left:-10%;right:-10%;bottom:20%;height:40%;background:#3c6e3c;border-radius:50% 50% 0 0}
.st-photo .gps{left:12px;top:12px;border-color:#ff79b7}
.st-photo .ok{left:12px;top:12px;border-color:#66ca91}
.st-photo .dz{left:78%;top:70%}
.is-play .st-photo .ph{animation:p21-ph 7s infinite}
.is-play .st-photo .gps{animation:p21-a 7s infinite}.is-play .st-photo .ok{animation:p21-b 7s infinite}
@keyframes p21-ph{0%{transform:translate(-50%,40%) scale(.9);opacity:0}12%,40%{transform:translate(-50%,-50%) scale(1);opacity:1}55%{transform:translate(-50%,-50%) scale(.7)}75%,92%{transform:translate(48%,25%) scale(.32);opacity:1}100%{transform:translate(48%,25%) scale(.32);opacity:0}}
@keyframes p21-a{0%,10%{visibility:hidden}11%,44%{visibility:visible}45%,100%{visibility:hidden}}
@keyframes p21-b{0%,44%{visibility:hidden}45%,96%{visibility:visible}97%,100%{visibility:hidden}}
/* QR code: printed, hung up, scanned – the drop opens to look at */
.st-qr .sign{left:14%;top:22%;width:38%;aspect-ratio:3/4;padding:8px;border-radius:6px;background:#f6f3ea;box-shadow:0 8px 24px #000a;display:grid;place-items:center}
.st-qr .sign svg{width:100%;height:auto;display:block}
.st-qr .mini{left:56%;top:30%;width:30%;aspect-ratio:9/16;border-radius:12px;border:3px solid #2c312a;background:#0c0e0d;overflow:hidden}
.st-qr .mini{transform:translateX(-36%)}
.st-qr .mini i{position:absolute;left:8%;right:8%;top:20%;height:2px;background:#66ca91;box-shadow:0 0 10px #66ca91;opacity:0}
.st-qr .mini .dz{left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px}
.st-qr .lbl{right:10px;bottom:10px;border-color:#66ca91}
.is-play .st-qr .mini{animation:q21-mini 6.5s infinite}
.is-play .st-qr .mini i{animation:q21-scan 6.5s infinite}
.is-play .st-qr .mini .dz{animation:q21-open 6.5s infinite}
.is-play .st-qr .lbl{animation:q21-lbl 6.5s infinite}
@keyframes q21-mini{0%,8%{transform:translateX(60%);opacity:0}20%,92%{transform:translateX(-36%);opacity:1}100%{transform:translateX(-36%);opacity:0}}
@keyframes q21-scan{0%,20%{top:18%;opacity:0}22%{opacity:1}30%{top:78%}38%{top:18%}46%{top:78%;opacity:1}48%,100%{opacity:0}}
@keyframes q21-open{0%,48%{opacity:0;transform:scale(.3)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes q21-lbl{0%,50%{visibility:hidden}51%,94%{visibility:visible}95%,100%{visibility:hidden}}

/* ---------------------------------------------------------------- WHO */
.who21-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px}
.who21-card{padding:26px;border-radius:24px;border:1px solid #3b4333;background:#151815}
.who21-card.is-maker{background:linear-gradient(165deg,#272514,#151815 55%)}
.who21-card.is-finder{background:linear-gradient(165deg,#14222c,#151815 55%)}
.who21-kicker{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fec601}
.who21-card.is-finder .who21-kicker{color:#7fb3e8}
.who21-card h3{margin:0 0 16px;font-size:24px;line-height:1.2}
.who21-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.who21-tabs[hidden]{display:none}
.who21-tabs button{min-height:44px;padding:8px 16px;border-radius:99px;border:1px solid #3b4333;background:transparent;color:#c7ccbd;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.who21-tabs button[aria-selected=true]{background:#fec601;border-color:#fec601;color:#111310}
.who21-tabs button:focus-visible{outline:2px solid #fec601;outline-offset:2px}
.who21-panel h4{margin:0 0 10px;font-size:17px}
.who21-on .who21-panel h4{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.who21-panel+.who21-panel{margin-top:18px}
.who21-on .who21-panel+.who21-panel{margin-top:0}
.who21-panel[hidden]{display:none}
.who21-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.who21-list li{position:relative;padding-left:28px;font-size:15px;line-height:1.55;color:#dfe3d6}
.who21-list li:before{content:"";position:absolute;left:2px;top:6px;width:14px;height:14px;border-radius:50%;background:#fec601;box-shadow:0 0 0 4px #fec60122}
.who21-card.is-finder .who21-list li:before{background:#4a90e2;box-shadow:0 0 0 4px #4a90e222}
.who21-quote{margin:0;padding:12px 14px;border-left:3px solid #fec601;background:#1c2019;border-radius:0 12px 12px 0;font-size:14px;color:#dfe3d6}
.who21-quote span{display:block;margin:0 0 3px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a9af9d}
.who21-steps{margin:0 0 16px;padding-left:22px;display:grid;gap:8px;color:#dfe3d6;font-size:15px;line-height:1.55}
.who21-steps li::marker{color:#7fb3e8;font-weight:800}

/* ---------------------------------------------------------------- LIVE OFFER (businesses) */
.live21{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:center;margin-bottom:34px;padding:22px;border-radius:28px;border:1px solid #3b4333;background:linear-gradient(140deg,#1d1a10,#121513 60%)}
.live21-stage{position:relative;aspect-ratio:16/12;border-radius:20px;overflow:hidden;background:#141716 url('../images/beispielkarte.svg') center/cover no-repeat;isolation:isolate}
@supports not (aspect-ratio:1/1){.live21-stage{height:340px}}
.live21-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,#0000 0,#0b0d0caa 80%);z-index:0}
.live21-stage>*{position:absolute;z-index:1}
.l-ring{left:50%;top:52%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed #ffa75c;background:#ffa75c10}
@supports not (aspect-ratio:1/1){.l-ring{height:62%;width:auto}}
.l-shop{left:50%;top:52%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;z-index:3}
.l-shop .dz{width:50px;height:50px}
.l-shop small{padding:2px 8px;border-radius:99px;background:#111310ee;color:#f3f4ee;font-size:11px;font-weight:700}
.l-offer{left:50%;top:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:#111310f0;border:1px solid #ffa75c;color:#fff;font-size:13px;font-weight:700;white-space:nowrap;z-index:4;box-shadow:0 0 24px #ffa75c44}
.l-offer b{color:#ffa75c;font-size:16px}
.l-p{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#4a90e2;border:2px solid #fff;z-index:2;transition:left 1.6s cubic-bezier(.45,.05,.35,1),top 1.6s cubic-bezier(.45,.05,.35,1),opacity .4s}
.l-p.far{background:#6b7280}
.l-p:after{content:"!";position:absolute;left:10px;top:-14px;width:16px;height:16px;border-radius:50%;background:#ffa75c;color:#111310;font-size:11px;font-weight:900;line-height:16px;text-align:center;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s}
.live21-stage[data-live-phase~=offer] .l-p.near:after{opacity:1;transform:none}
.l-p.p1{left:24%;top:30%}.l-p.p2{left:72%;top:28%}.l-p.p3{left:30%;top:74%}.l-p.p4{left:66%;top:78%}.l-p.p5{left:8%;top:12%}.l-p.p6{left:94%;top:86%}.l-p.p7{left:92%;top:20%}
.live21-stage[data-live-phase~=walk1] .l-p.p1{left:46%;top:50%}.live21-stage[data-live-phase~=walk2] .l-p.p4{left:54%;top:56%}
.live21-stage[data-live-phase~=gone1] .l-p.p1,.live21-stage[data-live-phase~=gone2] .l-p.p4{opacity:0}
.l-scan{left:50%;top:52%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:14px;border:3px solid #66ca91;opacity:0;z-index:4}
.live21-stage[data-live-phase~=scan] .l-scan{animation:scan21 .7s ease-out}
@keyframes scan21{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(1.4)}}
.l-tag{right:12px;bottom:12px;padding:4px 10px;border-radius:99px;background:#111310ee;border:1px solid #3b4333;color:#c7ccbd;font-size:11px}
.live21-text h3{margin:0 0 14px;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15}
.live21-text ol{margin:0 0 16px;padding-left:22px;display:grid;gap:10px;font-size:15px;line-height:1.55;color:#dfe3d6}
.live21-text ol b{color:#fff}
.live21-text .uc-tag{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;vertical-align:1px}
.live21-text .uc-tag.is-now{background:#66ca9122;color:#8be0ae;border:1px solid #66ca9166}
.live21-text .uc-tag.is-later{border:1px solid var(--color-line);color:var(--color-muted)}
.live21-text p{margin:0 0 10px;font-size:14px;line-height:1.6;color:#c7ccbd}
/* concepts that can be done */
.idee21-grid{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.idee21{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;border:1px solid #3b4333;background:#151815}
.idee21 header{display:flex;align-items:center;gap:12px}
.idee21 .dz{width:40px;height:40px}
.idee21 h4{margin:0;font-size:17px;line-height:1.25}
.idee21 ol{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14px;line-height:1.5;color:#dfe3d6}
.idee21 p{margin:0;font-size:13px;line-height:1.55;color:#a9af9d}
.idee21 p b{color:#dfe3d6}
.concepts21-title{margin:0 0 14px;font-size:20px}

/* ---------------------------------------------------------------- WHY */
.why21-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:24px;overflow:hidden;border:1px solid #3b4333}
.why21-compare>div{padding:22px 24px}
.why21-compare .is-old{background:#151815;color:#a9af9d}
.why21-compare .is-new{background:linear-gradient(160deg,#2a2610,#171a12);color:#f3f4ee}
.why21-compare h3{margin:0 0 14px;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.why21-compare .is-new h3{color:#fec601}
.why21-compare ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.why21-compare li{position:relative;padding-left:28px;font-size:15px;line-height:1.55}
.why21-compare .is-old li:before{content:"–";position:absolute;left:4px;color:#6b7280;font-weight:800}
.why21-compare .is-new li:before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:#fec601 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23111310' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.why21-tiles{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.why21-tiles li{padding:20px;border-radius:20px;border:1px solid #3b4333;background:#151815}
.why21-tiles b{display:block;margin-bottom:8px;font-size:17px;color:#fff}
.why21-tiles span{font-size:14px;line-height:1.55;color:#c7ccbd}

/* ---------------------------------------------------------------- DEMO GUIDE */
.guide21{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:g21}
.guide21 li{counter-increment:g21;position:relative;padding:16px 16px 16px 58px;border-radius:16px;border:1px solid #3b4333;background:#151815;font-size:14px;line-height:1.5;color:#c7ccbd}
.guide21 li:before{content:counter(g21);position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fec601;color:#111310;font-weight:800}
.guide21 b{display:block;color:#fff;font-size:15px;margin-bottom:2px}

/* ---------------------------------------------------------------- EXAMPLES: the scene in a phone */
.usecases .uc-show{display:grid;justify-items:center}
.usecases .uc-phone{width:min(320px,80vw);aspect-ratio:9/16;margin:0 auto}
.usecases .uc-phone[hidden]{display:none}
.usecases .uc-phone .uc-stage{aspect-ratio:auto;width:100%;height:100%;border-radius:36px;border:0;background-position:40% 50%}
.uc-phone .uc-stage:after{content:"uown.me";position:absolute;left:18px;top:52px;z-index:7;font-weight:800;font-size:14px;color:#fec601}
.uc-phone .uc-walk span{width:30px;height:30px;margin:-15px 0 0 -15px;background:#4a90e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='11' r='5' fill='%23fff'/%3E%3Cpath d='M6 25c1.5-6 5-8 9-8s7.5 2 9 8' fill='%23fff'/%3E%3C/svg%3E") center/100% no-repeat;border:2px solid #fff;box-shadow:0 0 0 7px #4a90e244,0 6px 14px #0009}
.uc-phone .uc-radius{width:200px;height:200px;margin:-100px 0 0 -100px}
.uc-phone .uc-card{bottom:16px;min-width:82%;padding:14px 16px;border-radius:18px;font-size:15px}
.uc-phone .uc-card b{font-size:17px}
.uc-phone .uc-burst b{font-size:16px;padding:5px 14px}
.uc-dist{position:absolute;left:50%;top:88px;transform:translateX(-50%);padding:6px 12px;border-radius:99px;background:#111310ee;border:1px solid var(--glow);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;z-index:7;visibility:hidden}
.uc-stage[data-step="2"] .uc-dist,.uc-stage[data-step="3"] .uc-dist{visibility:visible}
.uc-confetti{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:6}
.uc-confetti i{position:absolute;left:0;top:0;width:8px;height:12px;border-radius:2px;background:var(--c);opacity:0}
.uc-confetti.is-burst i{animation:conf21 1.4s cubic-bezier(.15,.7,.3,1) var(--d,0s) forwards}
.uc-phone.is-buzz{animation:buzz21 .42s linear}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){.how21-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.why21-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.guide21{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.kinds21-grid,.idee21-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.hero21-grid{grid-template-columns:minmax(0,1fr);gap:36px}.hero21{padding:36px 0 48px}.idea21-flow{grid-template-columns:minmax(0,1fr)}.who21-grid,.live21{grid-template-columns:minmax(0,1fr)}.idea21-who{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.kinds21-grid,.idee21-grid,.how21-grid,.why21-tiles,.guide21{grid-template-columns:minmax(0,1fr)}.why21-compare{grid-template-columns:minmax(0,1fr)}
  .hero21 .hero-actions .button{flex:1 1 100%}.live21{padding:14px}.who21-card,.idea21-card{padding:20px}.l-offer{font-size:12px;padding:7px 10px}}
@media (prefers-reduced-motion:reduce){.kind21,.kind21:hover{transition:none;transform:none}.kind21:hover .dz img{animation:none}}
/* phones: show the animated phone right under the headline; the pause button moves below the hero text,
   so the visual order stays the same as the keyboard order (links first, then the pause button) */
@media (max-width:700px){.hero21-grid{gap:0}.hero21-text,.hero21-visual{display:contents}.hero21 .hero-claim{order:1}.hero21 h1{order:2}.hero21 .phone21{order:3;width:min(264px,72vw);margin:4px auto 10px}.hero21-caption{order:4;margin:0 0 26px}.hero21-lead{order:5}.hero21 .hero-actions{order:6}.hero21-proof{order:7}.hero21 .hero-micro{order:8}.hero21-pause{order:9;justify-self:start;margin-top:18px}}
/* tablets and small laptops: the menu has one more entry („So geht’s“) – a bit tighter so it stays on one line */
@media (min-width:761px) and (max-width:1100px){.nav-links{gap:8px 11px}.nav-links a{font-size:13px}.nav-links .nav-cta{padding:9px 14px}}
/* phones: the guide before the demo stays short, so the demo (and the real map) comes right after it */
@media (max-width:640px){.guide21{gap:6px;margin-bottom:16px}.guide21 li{padding:9px 12px 9px 46px;font-size:13px;line-height:1.45;border-radius:12px}
.guide21 li:before{left:12px;top:9px;width:24px;height:24px;font-size:13px}.guide21 b{display:inline;font-size:14px;margin:0 6px 0 0}}

/* final_23: Warum uown.me („Zurück ins Echte“) und sechzehn Alltagsbeispiele */
.echt23-head{max-width:52rem}
.echt23-head h2{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.035em;margin:10px 0 16px}
.echt23-lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.6;color:#dfe3d6;max-width:44rem;margin:0}
.echt23-strike{margin:30px 0;font-weight:800;font-size:clamp(1.7rem,4.6vw,3.1rem);letter-spacing:-.02em;line-height:1.2}
.echt23-sr{position:absolute;left:0;right:0;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}   /* for screen readers only; as wide as the section, so no text sticks out sideways */
.echt23-words{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px}
.echt23-words s{position:relative;text-decoration:none;color:#8f9685}
.echt23-words s:after{content:"";position:absolute;left:-4%;right:-4%;top:54%;height:.12em;border-radius:4px;background:#ff6b5a;transform-origin:left center}
.echt23-words b{color:#fec601}
@media (prefers-reduced-motion:no-preference){
.echt23.is-play .echt23-words s:after{animation:strike23 6s cubic-bezier(.6,0,.3,1) infinite}
.echt23.is-play .echt23-words s:nth-child(2):after{animation-delay:.35s}.echt23.is-play .echt23-words s:nth-child(3):after{animation-delay:.7s}
.echt23.is-play .echt23-words s:nth-child(4):after{animation-delay:1.05s}
.echt23.is-play .echt23-words b{display:inline-block;animation:pop23 6s ease-out infinite}}
@keyframes strike23{0%{transform:scaleX(0);opacity:1}14%{transform:scaleX(1)}90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes pop23{0%,30%{opacity:.35;transform:scale(.92)}38%{opacity:1;transform:scale(1.14)}46%,90%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.92)}}
.echt23-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.echt23-grid li{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid #3b4333;border-radius:20px;background:#151815}
.echt23-grid b{font-size:20px;color:#fff}.echt23-grid span{color:#c7ccbd;line-height:1.55}
.echt23-rules{margin:22px 0 0;padding:22px 24px;border:1px dashed #4a5340;border-radius:20px;background:#121512}
.echt23-rules h3{display:inline;margin:0 12px 0 0;font-size:20px}
.echt23-rules ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px}
.echt23-rules li{position:relative;padding-left:22px;color:#c7ccbd;line-height:1.5}
.echt23-rules li:before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:#66ca91}
.echt23-rules li b{color:#fff}
.echt23-note{margin:16px 0 0;font-size:13px;color:#a9af9d;max-width:46rem}
.echt23-cta{margin:22px 0 0}
.alltag23-steps{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:10px;counter-reset:a23}
.alltag23-steps li{counter-increment:a23;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px 8px 10px;border:1px solid #3b4333;border-radius:99px;background:#151815;font-weight:700;color:#fff}
.alltag23-steps li:before{content:counter(a23);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fec601;color:#111310;font-weight:800}
.alltag23-group{margin:30px 0 12px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#a9af9d}
.alltag23-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.alltag23-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:4px 14px;align-content:start;padding:18px;border:1px solid #3b4333;border-radius:18px;background:#151815;transition:border-color .2s}
.alltag23-card:hover{border-color:#5b6650}
.alltag23-card .dz{grid-row:span 3;width:46px;height:46px}
.alltag23-wo{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fec601;font-weight:700}
.alltag23-card b{font-size:17px;line-height:1.3;color:#fff}
.alltag23-card p{margin:0;font-size:15px;line-height:1.55;color:#c7ccbd}
.alltag23-cta{margin:34px 0 0;padding:26px;border:1px solid #fec60155;border-radius:22px;background:linear-gradient(135deg,#fec60117,#15181500 70%);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 26px}
.alltag23-cta h3{margin:0 0 6px;font-size:24px}.alltag23-cta p{margin:0;color:#c7ccbd;max-width:40rem}
.alltag23-actions{display:flex;flex-wrap:wrap;gap:12px}
html.motion-paused .echt23 :is(*,*::before,*::after){animation-play-state:paused!important;transition:none!important}
@media (max-width:1000px){.echt23-grid,.alltag23-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.echt23-grid,.alltag23-grid,.echt23-rules ul{grid-template-columns:minmax(0,1fr)}.alltag23-cta{padding:20px}.echt23-rules{padding:18px}}
@media (prefers-reduced-motion:reduce){.alltag23-card{transition:none}}

/* final_24: Schritt für Schritt – Film im Handy (assets/js/ablauf.js). Ohne JavaScript: Liste der sechs Schritte. */
.ab24-sr{position:absolute;left:0;right:0;top:0;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}
.ablauf24{position:relative}
.ab24-pick{display:flex;flex-wrap:wrap;gap:10px;grid-area:pick}
.ab24-kind{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 20px 6px 7px;border-radius:99px;border:1px solid var(--color-line);background:transparent;color:var(--color-text);font-weight:700;font-size:15px;transition:border-color .25s,background-color .25s}
.ab24-kind .dz{width:38px;height:38px}
.ab24-kind:hover{border-color:var(--k)}
.ab24-kind[aria-pressed=true]{border-color:var(--k);background:color-mix(in srgb,var(--k) 15%,transparent)}
.ab24-body{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.ab24.is-on .ab24-body{grid-template-columns:320px minmax(0,1fr);grid-template-areas:"film pick" "film steps" "film now";grid-template-rows:auto auto 1fr;gap:22px 56px;align-items:start}
.ab24.is-on .ab24-film{grid-area:film}.ab24.is-on .ab24-steps{grid-area:steps}.ab24.is-on .ab24-now{grid-area:now}
.ab24-film{display:grid;justify-items:center;gap:16px;min-width:0}
.ab24-ctrl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ab24-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ab24-steps li{border:1px solid var(--color-line);border-radius:18px;background:var(--color-surface);padding:14px 18px;transition:border-color .3s,background-color .3s}
.ab24-steps h3{margin:0;font-size:18px;letter-spacing:-.01em}
.ab24-st{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;width:100%;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-align:left}
.ab24-st .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--color-line);font-size:14px;flex:none;transition:background-color .3s,border-color .3s,color .3s}
.ablauf24 .uc-tag{display:inline-block;padding:2px 9px;border-radius:99px;border:1px solid var(--color-line);color:var(--color-muted);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:1.6}
.ab24-st .uc-tag{margin:0 0 0 auto}
.ab24-cap{margin:6px 0 2px 46px;color:var(--color-muted);font-size:15px;line-height:1.65}
.ab24.is-on .ab24-steps li{padding:7px 16px}
.ab24.is-on .ab24-steps li:not(.is-now) .ab24-cap{display:none}
.ab24-steps li.is-now{border-color:var(--k);background:color-mix(in srgb,var(--k) 9%,var(--color-surface))}
.ab24-steps li.is-now .n{background:var(--k);border-color:var(--k);color:#111310}
.ab24-steps li.is-now .ab24-cap{color:var(--color-text)}
.ab24-steps li.is-done .n{border-color:var(--k);color:var(--k)}
.ab24-now{border:1px solid var(--k);border-radius:18px;background:color-mix(in srgb,var(--k) 9%,var(--color-surface));padding:14px 16px}
.ab24-now b{display:block;font-size:16px;margin-bottom:4px}
.ab24-now p{margin:0;font-size:15px;line-height:1.6}
.ab24.is-on .ab24-now{display:none}
.ab24-note{max-width:820px;margin:26px 0 0}
.ab24-note a{padding:6px 0}
/* the phone */
.ab24-phone{position:relative;width:300px;height:620px;border-radius:46px;padding:11px;background:linear-gradient(150deg,#353b33,#0b0d0c 55%,#20251f);box-shadow:0 0 0 1px #4a5340,0 34px 90px #000d,0 0 120px color-mix(in srgb,var(--k) 16%,transparent);transition:box-shadow .5s}
.ab24-phone:before{content:"";position:absolute;left:50%;top:19px;width:86px;height:24px;margin-left:-43px;border-radius:14px;background:#040504;z-index:20}
.ab24-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#141716 url('../images/beispielkarte.svg') 50% 46%/cover no-repeat;isolation:isolate;font-family:var(--font-body);color:#f3f4ee}
.ab24-phone[data-instant] *,.ab24-phone[data-instant] *:before,.ab24-phone[data-instant] *:after{transition:none!important;animation:none!important}
.ab-map{position:absolute;inset:0;z-index:1}
.ab-map:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b0d0ccc 0,#0b0d0c22 24%,#0b0d0c00 55%,#0b0d0caa 100%)}
.ab-top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:42px 14px 10px;background:linear-gradient(#0b0d0cf2 72%,#0b0d0c00)}
.ab-brand{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:900;letter-spacing:-.5px;color:#fec601;flex:none}
.ab-brand img{width:18px;height:18px;border-radius:5px}
.ab-brand em{font-style:normal;color:#f3f4ee}
.ab-who{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:68%;padding:3px 10px 3px 3px;border-radius:99px;background:#1c2019;border:1px solid #3b4333;font-size:11px;font-weight:700;color:#dfe3d6;white-space:nowrap}
.ab-who>span{overflow:hidden;text-overflow:ellipsis}
.ab-who i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--k);color:#111310;font-style:normal;font-weight:800;font-size:11px;flex:none}
.ab-who.fx-flip{animation:ab-flip .55s cubic-bezier(.2,1.3,.4,1)}
@keyframes ab-flip{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.ab-chip{position:absolute;left:50%;top:84px;visibility:hidden;z-index:5;display:flex;align-items:center;gap:8px;max-width:calc(100% - 28px);padding:7px 12px;border-radius:99px;background:#111310eb;border:1px solid var(--k);font-size:12px;font-weight:700;color:#fff;white-space:nowrap;transform:translateX(-50%);opacity:0;transition:opacity .3s}
.ab-chip.is-on{opacity:1;visibility:visible}
.ab-chip span{overflow:hidden;text-overflow:ellipsis}
.ab-chip i{font-style:normal;color:var(--k);font-variant-numeric:tabular-nums}
.ab-pin{position:absolute;left:var(--px,50%);top:var(--py,40%);width:0;height:0;z-index:3;opacity:0}
.ab-pin.is-in{opacity:1}
.ab-pin.fx-drop{animation:ab-drop .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes ab-drop{0%{transform:translateY(-90px) scale(.5);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.ab-pin .dz{position:absolute;left:-25px;top:-25px;width:50px;height:50px;--k:inherit}
.ab-pin .dz:after{animation:none}
.ablauf24.is-play .ab-pin.is-in .dz:after{animation:dz-pulse 2.2s ease-out infinite}
.ab-pin.is-open .dz{box-shadow:0 0 0 3px var(--k),0 0 40px var(--k)}
.ab-pin.fx-open .dz{animation:ab-pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes ab-pop{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
.ab-pin.fx-shake .dz{animation:ab-shake .5s linear}
@keyframes ab-shake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.ab-lock{position:absolute;left:10px;top:8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#111310;border:2px solid var(--k);color:var(--k)}
.ab-lock svg{width:12px;height:12px}
.ab-lock .sh-open,.ab-pin.is-open .ab-lock .sh-closed{display:none}
.ab-pin.is-open .ab-lock .sh-open{display:inline}
.ab-pin.is-open .ab-lock{background:var(--k);color:#111310}
.ab-ring{position:absolute;left:var(--px,50%);top:var(--py,40%);z-index:2;width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;border:2px dashed var(--k);background:color-mix(in srgb,var(--k) 12%,transparent);opacity:0;transform:scale(0);transition:transform .6s cubic-bezier(.2,1.3,.4,1),opacity .3s}
.ab-ring.is-on{opacity:1;transform:none}
.ab-ring b{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);white-space:nowrap;font-size:10px;font-weight:700;color:var(--k);background:#111310e0;padding:2px 8px;border-radius:99px}
.ab-place{position:absolute;left:var(--px,50%);top:var(--py,40%);z-index:4;transform:translate(-50%,-56px);white-space:nowrap;padding:3px 9px;border-radius:99px;background:#111310e6;border:1px solid #3b4333;font-size:11px;font-weight:700;color:#fff;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.ab-place.is-on{opacity:1;visibility:visible;transition:opacity .4s}
.ab-me{position:absolute;left:20%;top:60%;z-index:4;width:0;height:0;opacity:0;transition:left var(--walk,2.6s) cubic-bezier(.45,.05,.4,1),top var(--walk,2.6s) cubic-bezier(.45,.05,.4,1),opacity .3s}
.ab-me.is-on{opacity:1}
.ab-me i{position:absolute;left:-14px;top:-14px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2f6fc0;border:3px solid #fff;box-shadow:0 0 0 6px #4a90e240;color:#fff;font-style:normal;font-size:11px;font-weight:800}
.ab-me.m2 i{background:#5160d8}.ab-me.m3 i{background:#66ca91;color:#111310}
.ablauf24.is-play .ab-me.is-walk i{animation:ab-bob .45s ease-in-out infinite alternate}
@keyframes ab-bob{to{transform:translateY(-4px)}}
/* setting up the drop */
.ab-form{position:absolute;left:10px;right:10px;top:84px;bottom:10px;z-index:5;display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:24px;background:#111310f7;border:1px solid #3b4333;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .35s,transform .45s,visibility 0s .45s}
.ab24-phone[data-scene=form] .ab-form{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .45s}
.ab-fhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ab-fhead b{font-size:17px;color:#fff}
.ab-fhead span{font-size:11px;color:#9aa192}
.ab-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ab-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:78px;padding:8px 4px;border-radius:14px;border:1px solid #3b4333;background:#1c2019;font-size:10.5px;font-weight:700;color:#dfe3d6;text-align:center;line-height:1.2;transition:border-color .3s,background-color .3s,transform .3s,opacity .3s}
.ab-tile i{font-style:normal}
.ab-tile .dz{width:34px;height:34px}
.ab-tile.is-sel{border-color:var(--k);background:color-mix(in srgb,var(--k) 20%,#1c2019);transform:scale(1.04)}
.ab-tile.is-dim{opacity:.45}
.ab-field{display:block;min-height:44px;padding:6px 10px;border-radius:12px;background:#1c2019;border:1px solid #3b4333;transition:border-color .3s}
.ab-field small{display:block;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:#9aa192}
.ab-field b{display:block;min-height:1.3em;font-size:12.5px;line-height:1.3;color:#fff}
.ab-field.is-typing{border-color:var(--k)}
.ab-field.is-typing b:after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--k)}
.ablauf24.is-play .ab-field.is-typing b:after{animation:ab-caret .8s steps(1) infinite}
@keyframes ab-caret{50%{opacity:0}}
.ab-btn{display:flex;align-items:center;justify-content:center;min-height:42px;padding:8px 14px;border-radius:99px;background:var(--k);color:#111310;font-weight:800;font-size:13px;line-height:1.2;text-align:center;transition:background-color .3s,color .3s,transform .15s}
.ab-btn.is-off{background:#2a3026;color:#9aa192}
.ab-btn.is-press{transform:scale(.93)}
.ab-btn:empty{display:none}
.ab-form .ab-btn{margin-top:auto}
/* the sheet at the bottom */
.ab-sheet{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:24px;background:#111310f5;border:1px solid var(--k);box-shadow:0 -10px 40px #000a;visibility:hidden;transform:translateY(calc(100% + 40px));transition:transform .5s cubic-bezier(.2,1.2,.4,1),visibility 0s .5s}
.ab24-phone[data-sheet=on] .ab-sheet{visibility:visible;transform:none;transition:transform .5s cubic-bezier(.2,1.2,.4,1)}
.ab-stitle{font-size:15px;line-height:1.25;color:#fff}
.ab-stext{font-size:12px;line-height:1.4;color:#c7ccbd}
.ab-stext:empty{display:none}
.ab-give .g{display:none}
.ab24-phone[data-give=code] .g-code,.ab24-phone[data-give=tasks] .g-tasks,.ab24-phone[data-give=photo] .g-photo,.ab24-phone[data-give=group] .g-group,.ab24-phone[data-give=ok] .g-ok{display:grid;gap:8px}
.g-code{justify-items:center;text-align:center}
.g-code small{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#9aa192}
.ab-code{display:block;padding:8px 14px;border-radius:12px;border:2px dashed var(--k);font-family:ui-monospace,'Courier New',monospace;font-size:24px;letter-spacing:3px;color:var(--k)}
.ab-code.fx-pulse{animation:ab-pop .8s ease-in-out 2}
.ab-item{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:99px;background:#1c2019;border:1px solid var(--k);font-size:12.5px;font-weight:700;opacity:0;transform:translateX(40px);transition:opacity .4s,transform .5s cubic-bezier(.2,1.3,.4,1)}
.ab-item.is-on{opacity:1;transform:none}
.ab-item .dz{width:30px;height:30px}
.ab-task{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#dfe3d6}
.ab-task i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;border:2px solid #4a5340;flex:none;transition:background-color .3s,border-color .3s}
.ab-task.is-done{color:#fff}
.ab-task.is-done i{background:var(--k);border-color:var(--k)}
.ab-task.is-done i:after{content:"";width:5px;height:9px;margin-top:-2px;border:solid #111310;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ab-view{position:relative;display:grid;place-items:center;align-content:center;gap:6px;height:104px;border-radius:14px;background:linear-gradient(160deg,#25313a,#151a1d);border:2px solid #4a5340;overflow:hidden;transition:border-color .3s}
.ab-view:before{content:"";position:absolute;inset:10px;border:2px solid #ffffff55;border-radius:8px;clip-path:polygon(0 0,22% 0,22% 4px,4px 4px,4px 22%,0 22%,0 78%,4px 78%,4px calc(100% - 4px),22% calc(100% - 4px),22% 100%,78% 100%,78% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 78%,100% 78%,100% 22%,calc(100% - 4px) 22%,calc(100% - 4px) 4px,78% 4px,78% 0,100% 0,100% 100%,0 100%)}
.ab-view em{font-style:normal;font-size:11px;color:#c7ccbd}
.ab-view.is-shot{border-color:var(--k)}
.ab-view.is-shot em:before{content:"Foto · "}
.ab-snap{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.ab-snap.fx-flash{animation:ab-flash .5s ease-out}
@keyframes ab-flash{0%{opacity:.95}100%{opacity:0}}
.g-group{justify-items:center}
.ab-heads{display:flex;gap:10px}
.ab-heads i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px dashed #4a5340;color:#8f9786;font-style:normal;font-weight:800;font-size:14px;transition:background-color .3s,border-color .3s,color .3s,transform .4s cubic-bezier(.2,1.6,.4,1)}
.ab-heads i.is-on{background:var(--k);border:2px solid var(--k);color:#111310;transform:scale(1.08)}
.ab-count3{font-size:14px;color:var(--k)}
.g-ok{justify-items:center;text-align:center}
.ab-check{width:52px;height:52px;color:var(--k)}
.ab-check circle{stroke-dasharray:145;stroke-dashoffset:0}
.ab-check path{stroke-dasharray:40;stroke-dashoffset:0}
.ab-check.fx-draw circle{animation:ab-draw .6s ease-out both}
.ab-check.fx-draw path{animation:ab-draw2 .45s .35s ease-out both}
@keyframes ab-draw{from{stroke-dashoffset:145}}
@keyframes ab-draw2{from{stroke-dashoffset:40}}
.ab-ok{font-size:20px;color:#fff;line-height:1.2}
.ab-okd{font-size:11.5px;line-height:1.4;color:#c7ccbd}
/* toast, confetti, finger */
.ab-toast{position:absolute;left:12px;right:12px;top:84px;z-index:7;display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;background:#111310f2;border:1px solid var(--k);box-shadow:0 10px 30px #0009;opacity:0;visibility:hidden;transform:translateY(-20px);transition:opacity .3s,transform .4s,visibility 0s .4s}
.ab-toast.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .45s cubic-bezier(.2,1.3,.4,1)}
.ab-toast .dz{width:38px;height:38px}
.ab-toast b{display:block;font-size:15px;color:#fff}
.ab-toast div span{display:block;font-size:11.5px;line-height:1.35;color:#c7ccbd}
.ab-confetti{position:absolute;left:var(--cx,50%);top:var(--cy,50%);width:0;height:0;z-index:8}
.ab-confetti i{position:absolute;left:0;top:0;width:8px;height:12px;border-radius:2px;background:var(--c);opacity:0}
.ab-confetti i.is-round{width:10px;height:10px;border-radius:50%}
.ab-confetti.is-burst i{animation:conf21 1.35s cubic-bezier(.15,.7,.3,1) var(--d,0s) forwards}
.ab-tap{position:absolute;left:0;top:0;z-index:9;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#ffffff38;border:2px solid #fff;opacity:0;pointer-events:none}
.ab-tap.fx-tap{animation:ab-tap .6s ease-out}
@keyframes ab-tap{0%{opacity:0;transform:scale(1.7)}30%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.25)}}
html.motion-paused .ablauf24 :is(*,*::before,*::after){animation-play-state:paused!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.ablauf24 :is(*,*::before,*::after){transition:none!important;animation:none!important}}
@media (max-width:899px){
  .ab24.is-on .ab24-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"pick" "film" "steps" "now";grid-template-rows:none;gap:16px}
  .ab24-phone{width:276px;height:572px;border-radius:42px;padding:10px}
  .ab24-screen{border-radius:33px}
  .ab-tile{min-height:68px;gap:4px;padding:6px 4px}.ab-tile .dz{width:30px;height:30px}
  .ab-form{gap:7px;padding:12px}
  .ab24.is-on .ab24-steps{display:flex;justify-content:space-between;gap:2px}
  .ab24.is-on .ab24-steps li{flex:0 0 44px;padding:0;border:0;background:none}
  .ab24.is-on .ab24-steps h3{display:flex;justify-content:center}
  .ab24.is-on .ab24-st{width:44px;justify-content:center}
  .ab24.is-on .ab24-st .n{width:40px;height:40px}
  .ab24.is-on .ab24-st b,.ab24.is-on .ab24-st .uc-tag{display:none}   /* the name stays in aria-label */
  .ab24.is-on .ab24-cap{display:none!important}
  .ab24.is-on .ab24-now{display:block}
}
@media (max-width:640px){
  .ab24-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .ab24-kind{flex-direction:column;justify-content:center;gap:4px;min-height:76px;padding:8px 2px;border-radius:18px;font-size:13px}
  .ab24-kind .dz{width:34px;height:34px}
}

/* final_25: Folgen & Favoriten – Konzept für die App (assets/js/folgen.js); ohne JavaScript und mit „Bewegung reduzieren“ ein ruhiges Bild. */
.folgen25-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.folgen25-lead{font-size:18px;line-height:1.7;color:var(--color-muted);max-width:620px}
.folgen25-steps{list-style:none;counter-reset:fo;margin:22px 0;padding:0;display:grid;gap:10px;max-width:620px}
.folgen25-steps li{counter-increment:fo;position:relative;padding:12px 16px 12px 58px;border:1px solid var(--color-line);border-radius:16px;background:var(--color-surface);font-size:15px;line-height:1.5;color:var(--color-muted)}
.folgen25-steps li:before{content:counter(fo);position:absolute;left:14px;top:50%;width:30px;height:30px;margin-top:-15px;display:grid;place-items:center;border-radius:50%;background:var(--color-brand);color:#111310;font-weight:800;font-size:14px}
.folgen25-steps b{color:var(--color-text)}
.folgen25-note{font-size:13px;line-height:1.7;color:var(--color-muted);max-width:620px}
.folgen25 .uc-tag{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:99px;border:1px solid var(--color-line);color:var(--color-muted);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:1.6;vertical-align:1px}
.folgen25-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.folgen25-visual{display:grid;justify-items:center;gap:12px}
.fo-caption{margin:0;font-size:12px;color:var(--color-muted)}
.fo-phone{position:relative;width:280px;height:572px;border-radius:44px;padding:10px;background:linear-gradient(150deg,#353b33,#0b0d0c 55%,#20251f);box-shadow:0 0 0 1px #4a5340,0 30px 80px #000d,0 0 120px #ff79b71a}
.fo-phone:before{content:"";position:absolute;left:50%;top:18px;width:80px;height:22px;margin-left:-40px;border-radius:12px;background:#040504;z-index:20}
.fo-phone.fx-buzz{animation:fo-buzz .45s linear}
@keyframes fo-buzz{0%,100%{transform:none}20%{transform:translateX(-3px) rotate(-.6deg)}40%{transform:translateX(3px) rotate(.6deg)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.fo-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#141716 url('../images/beispielkarte.svg') 40% 50%/cover no-repeat;color:#f3f4ee;isolation:isolate}
.fo-screen:after{content:"";position:absolute;inset:0;background:#0b0d0cd9;z-index:1;transition:opacity .6s}
.fo-phone[data-phase=karte] .fo-screen:after{opacity:.15}
/* profile of the shop */
.fo-profile{position:absolute;left:12px;right:12px;top:60px;z-index:3;display:grid;justify-items:center;gap:6px;padding:20px 14px 16px;border-radius:24px;background:#111310f7;border:1px solid #3b4333;text-align:center;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s,transform .45s,visibility 0s .45s}
.fo-phone:is([data-phase=profil],[data-phase=folgt]) .fo-profile{opacity:1;visibility:visible;transform:none;transition:opacity .4s,transform .45s}
.fo-avatar.dz{width:64px;height:64px}
.fo-profile>b{font-size:20px;color:#fff;margin-top:4px}
.fo-sub{font-size:12px;color:#9aa192}
.fo-actions{display:flex;gap:8px;margin:8px 0 6px}
.fo-follow{position:relative;display:grid;place-items:center;min-width:132px;height:42px;padding:0 16px;border-radius:99px;background:#fec601;color:#111310;font-weight:800;font-size:14px;transition:background-color .3s,color .3s}
.fo-follow i{font-style:normal;grid-area:1/1;transition:opacity .25s}
.fo-follow .fo-done{opacity:0}
.fo-phone[data-phase=folgt] .fo-follow,.fo-phone:not([data-phase=profil]) .fo-follow{background:#1c2019;color:#fec601;box-shadow:inset 0 0 0 2px #fec601}
.fo-phone:not([data-phase=profil]) .fo-plus{opacity:0}.fo-phone:not([data-phase=profil]) .fo-done{opacity:1}
.fo-fav{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid #ff79b7;color:#ff79b7}
.fo-fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;transition:fill .3s,transform .3s}
.fo-phone:not([data-phase=profil]) .fo-fav svg{fill:currentColor}
.fo-phone[data-phase=folgt] .fo-fav svg{animation:fo-heart .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes fo-heart{0%{transform:scale(.6)}50%{transform:scale(1.35)}100%{transform:none}}
.fo-drops{display:flex;gap:8px;margin-top:6px}.fo-drops .dz{width:36px;height:36px}
.fo-hint{font-size:11px;color:#9aa192}
/* lock screen with the notification */
.fo-lock{position:absolute;left:0;right:0;top:78px;z-index:2;display:grid;justify-items:center;opacity:0;transition:opacity .5s}
.fo-phone:is([data-phase=zeit],[data-phase=meldung]) .fo-lock{opacity:1}
.fo-day{font-size:14px;color:#c7ccbd}
.fo-time{font-size:62px;font-weight:300;letter-spacing:-2px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.fo-note{position:absolute;left:12px;right:12px;top:208px;z-index:4;display:grid;gap:4px;padding:12px 14px;border-radius:20px;background:#1c2019f2;border:1px solid #ff79b7;box-shadow:0 12px 34px #000a,0 0 30px #ff79b733;opacity:0;visibility:hidden;transform:translateY(-30px) scale(.96);transition:opacity .35s,transform .5s cubic-bezier(.2,1.3,.4,1),visibility 0s .5s}
.fo-phone:is([data-phase=meldung],[data-phase=tipp]) .fo-note{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .5s cubic-bezier(.2,1.3,.4,1)}
.fo-phone[data-phase=tipp] .fo-note{transform:scale(.97)}
.fo-app{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#c7ccbd}
.fo-app img{width:20px;height:20px;border-radius:6px}
.fo-app i{margin-left:auto;font-style:normal;font-weight:400;color:#9aa192}
.fo-note b{font-size:15px;color:#fff}
.fo-note>span:last-child{font-size:12.5px;line-height:1.35;color:#dfe3d6}
/* the map with the new drop */
.fo-map{position:absolute;inset:0;z-index:0}
.fo-ring{position:absolute;left:58%;top:42%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px dashed #FEC601;background:#fec6011a;opacity:0;transform:scale(.3);transition:opacity .4s,transform .6s cubic-bezier(.2,1.3,.4,1)}
.fo-pin.dz{position:absolute;left:58%;top:42%;width:52px;height:52px;margin:-26px 0 0 -26px;opacity:0;transform:translateY(-60px);transition:opacity .4s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.fo-pin.dz:after{animation:none}
.folgen25.is-play .fo-phone[data-phase=karte] .fo-pin.dz:after{animation:dz-pulse 2.2s ease-out infinite}
.fo-me{position:absolute;left:30%;top:66%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#2f6fc0;border:3px solid #fff;box-shadow:0 0 0 6px #4a90e240;opacity:0;transition:opacity .4s}
.fo-chip{position:absolute;left:12px;right:12px;bottom:14px;display:grid;gap:2px;padding:12px 14px;border-radius:18px;background:#111310f2;border:1px solid #FEC601;opacity:0;transform:translateY(30px);transition:opacity .4s,transform .5s}
.fo-chip b{font-size:15px;color:#fff}.fo-chip i{font-style:normal;font-size:12.5px;color:#FEC601}
.fo-phone[data-phase=karte] :is(.fo-ring,.fo-pin.dz,.fo-me,.fo-chip){opacity:1;transform:none}
.fo-tap{position:absolute;left:0;top:0;z-index:9;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#ffffff38;border:2px solid #fff;opacity:0;pointer-events:none}
.fo-tap.fx-tap{animation:ab-tap .6s ease-out}
html.motion-paused .folgen25 :is(*,*::before,*::after){animation-play-state:paused!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.folgen25 :is(*,*::before,*::after){transition:none!important;animation:none!important}}
@media (max-width:899px){.folgen25-grid{grid-template-columns:minmax(0,1fr);gap:32px}.folgen25-visual{order:-1}}
@media (max-width:360px){.fo-phone{width:262px;height:540px}}

/* final_26: Einlöse-Stufen unter dem Film, Blockieren bei „Folgen“ */
.ab24-stufen{margin-top:30px;padding:22px;border:1px solid var(--color-line);border-radius:22px;background:var(--color-surface)}
.ab24-stufen-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:14px}
.ab24-stufen-head h3{margin:0;font-size:20px}
.ab24-stufen-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ab24-stufen-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-content:start;padding:14px;border-radius:16px;background:var(--color-bg);border:1px solid var(--color-line)}
.st-badge{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--color-brand);color:#111310;font-weight:800}
.ab24-stufen-list b{font-size:15px}
.ab24-stufen-list li>span:last-child{grid-column:2;font-size:13.5px;line-height:1.55;color:var(--color-muted)}
.ab24-stufen-geld{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--color-muted)}
.ab24-stufen-geld b,.folgen25-block b{color:var(--color-text)}
.folgen25-block{max-width:620px;margin:0 0 14px;padding:12px 16px;border-left:3px solid #ff79b7;border-radius:0 14px 14px 0;background:var(--color-surface);font-size:14px;line-height:1.6;color:var(--color-muted)}
@media (max-width:1000px){.ab24-stufen-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ab24-stufen-list{grid-template-columns:minmax(0,1fr)}.ab24-stufen{padding:16px}}

/* final_27: Viele Fragen */
.fragen27-lead{max-width:780px;margin:0 0 26px;font-size:17px;line-height:1.7;color:var(--color-muted)}
.fragen27-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px;align-items:start}
.fragen27-group{padding:16px 20px 6px;border:1px solid var(--color-line);border-radius:20px;background:var(--color-surface)}
.fragen27-group h3{margin:0 0 4px;font-size:18px;color:var(--color-brand)}
.fragen27-group details{border-top:1px solid var(--color-line)}
.fragen27-group h3+details{border-top:0}
.fragen27-group summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;list-style:none;font-weight:700;line-height:1.4}
.fragen27-group summary::-webkit-details-marker{display:none}
.fragen27-group summary:after{content:'+';margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--color-bg);color:var(--color-brand);font-weight:800}
.fragen27-group details[open] summary:after{content:'–'}
.fragen27-group details p{margin:0 0 14px;font-size:14.5px;line-height:1.65;color:var(--color-muted)}
@media(max-width:820px){.fragen27-grid{grid-template-columns:minmax(0,1fr)}}

/* final_29: Startseite ohne Doppeltes, mit gleicher Optik */
/* gleiche Karten: Rand, Ecken, Grund */
main :is(.idea21-card,.alltag23-card,.how21-card,.echt23-grid li,.biz-card,.who21-card,.fragen27-group,.folgen25 li,.gain29-grid li,.num29-grid li,.num29-near,.list29){border:1px solid #3b4333;border-radius:20px}
main :is(.alltag23-card,.how21-card,.echt23-grid li,.who21-card,.folgen25 li,.gain29-grid li,.num29-grid li,.num29-near,.fragen27-group){background:#151815}
main :is(.idea21-card,.alltag23-card,.echt23-grid li,.gain29-grid li,.num29-grid li){padding:22px}
.alltag29{margin-top:56px}
.alltag29-title,.gain29-title{margin:0 0 16px;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.2}
.alltag29-title span{color:var(--color-muted);font-weight:400;font-size:.7em}
.alltag29-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}
.who21-more{margin:12px 0 0}.who21-more a{color:#fec601;font-weight:700}
/* Film: Hinweis auf die weiteren Schritte */
.ab24-hint{flex-basis:100%;grid-column:1/-1;margin:2px 0 0;font-size:14px;line-height:1.5;color:#c7ccbd}.ab24-hint b{color:#fff}
.ab24-more{display:none;margin:4px 0 6px;min-height:44px;padding:8px 16px;border-radius:99px;border:1px solid #fec601;background:#fec60118;color:#fec601;font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-align:left}
.is-now>.ab24-more,.ab24-steps .is-now>.ab24-more,.ab24-now>.ab24-more{display:inline-flex;align-items:center;max-width:100%}
.ab24-now>.ab24-more{margin-top:10px}
@media (max-width:899px){.ab24.is-on .ab24-steps .ab24-more{display:none!important}}   /* the steps are 44 px chips there */
.ab24-more:hover{background:#fec60130}
@media (prefers-reduced-motion:no-preference){.ablauf24.is-play .is-nudge,.biz29:has(.biz29-stage.is-play) .is-nudge{animation:nudge29 2.4s ease-in-out infinite}}   /* only while on screen */
@keyframes nudge29{0%,100%{box-shadow:0 0 0 0 #fec60100}50%{box-shadow:0 0 0 7px #fec60133}}
html.motion-paused .is-nudge{animation:none}
/* Kein weiterer Feed: Zahlen */
.num29{margin:26px 0 0}
.num29-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:end;margin-bottom:16px}
.num29-head h3{margin:0;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15}
.num29-head p{margin:0;color:#c7ccbd;line-height:1.6;font-size:15px}
.num29-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.num29-grid li{display:flex;flex-direction:column;gap:6px}
.num29-k{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted)}
.num29-n{font-size:clamp(2rem,4vw,2.8rem);line-height:1.05;color:#fec601;letter-spacing:-.02em}
.num29-n.is-word{font-size:clamp(1.4rem,2.4vw,1.8rem)}
.num29-t{color:#dfe3d6;line-height:1.55;font-size:15px}
.num29-q{display:block;margin-top:auto;padding-top:8px;font-size:12px;line-height:1.5;color:#a9af9d}
.num29-q a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.num29-also{margin:14px 0 0;padding:16px 20px;border-radius:20px;border:1px dashed #4a5340;color:#dfe3d6;line-height:1.55}
.num29-also>b{color:#fec601;font-size:1.3em;margin-right:4px}
.num29-near{margin:14px 0 0;padding:22px 24px}
.num29-near h3{margin:0 0 12px;font-size:20px}
.num29-near ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px}
.num29-near li{position:relative;padding-left:22px;color:#c7ccbd;line-height:1.55}
.num29-near li:before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:#fec601}
.num29-near li b{color:#fff}
.num29-end{margin:16px 0 0;color:#fff;font-weight:700;line-height:1.55}
.echt29{margin:56px 0 0}
.echt29-title{margin:0 0 12px;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.08;letter-spacing:-.03em}
.list29{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin:22px 0 0;padding:22px 24px;background:linear-gradient(140deg,#2a1f26,#151815 60%)}
.list29 h3{margin:4px 0 8px;font-size:clamp(1.2rem,2vw,1.5rem)}
.list29 p{margin:0 0 10px;color:#c7ccbd;line-height:1.6}
.list29 a{color:#fec601;font-weight:700}
.list29-art{position:relative;width:74px;height:74px;display:grid;place-items:center}
.list29-art .dz{width:56px;height:56px}
.list29-heart{position:absolute;right:-4px;top:-4px;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ff79b7;color:#111310;font-weight:900}
/* Für Geschäfte: die Geschichte */
.biz29{margin:0 0 30px;padding:22px;border-radius:28px;border:1px solid #3b4333;background:linear-gradient(140deg,#1d1a10,#121513 60%)}
.biz29-pick{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.biz29-pick button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px 6px 6px;border-radius:99px;border:1px solid #3b4333;background:#151815;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.biz29-pick button .dz{width:36px;height:36px}
.biz29-pick button[aria-pressed=true]{border-color:#fec601;background:#fec60118}
.biz29-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
.biz29-stage{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#141716 url('../images/beispielkarte.svg') center/cover no-repeat;isolation:isolate}
@supports not (aspect-ratio:1/1){.biz29-stage{height:340px}}
.biz29-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 54%,#0000 0,#0b0d0caa 80%);z-index:0}
.biz29-stage>*{position:absolute;z-index:1}
.biz29-stage .b-ring{left:50%;top:54%;width:64%;aspect-ratio:1;border-radius:50%;border:2px dashed #ffa75c;background:#ffa75c12;transform:translate(-50%,-50%) scale(.1);opacity:0;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .5s}
.biz29-stage[data-kind=meal] .b-ring{border-color:#fec601;background:#fec60110}
.biz29-stage[data-ring] .b-ring{transform:translate(-50%,-50%) scale(1);opacity:1}
.b-p{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#4a90e2;border:2px solid #fff;z-index:2;transition:left 1.5s cubic-bezier(.45,.05,.35,1),top 1.5s cubic-bezier(.45,.05,.35,1),opacity .4s}
.b-p.far{background:#6b7280}
.b-p:after{content:"!";position:absolute;left:10px;top:-14px;width:16px;height:16px;border-radius:50%;background:#ffa75c;color:#111310;font-size:11px;font-weight:900;line-height:16px;text-align:center;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s}
.biz29-stage[data-badge] .b-p.near:after{opacity:1;transform:none}
.b-p.p1{left:28%;top:36%}.b-p.p2{left:70%;top:34%}.b-p.p3{left:32%;top:74%}.b-p.p4{left:66%;top:76%}.b-p.p5{left:8%;top:14%}.b-p.p6{left:93%;top:88%}.b-p.p7{left:92%;top:20%}
.biz29-stage:is([data-walk="1"],[data-walk="2"],[data-walk="3"]) .b-p.p1,.biz29-stage:is([data-walk="2"],[data-walk="3"]) .b-p.p2,.biz29-stage[data-walk="3"] .b-p.p4{left:50%;top:56%}
.biz29-stage:is([data-scan="1"],[data-scan="2"],[data-scan="3"],[data-walk="3"]:not([data-scan])) .b-p.p1,.biz29-stage:is([data-scan="2"],[data-scan="3"],[data-walk="3"]:not([data-scan])) .b-p.p2,.biz29-stage:is([data-scan="3"],[data-walk="3"]:not([data-scan])) .b-p.p4{opacity:0}
.b-shop{left:50%;top:54%;transform:translate(-50%,-50%) scale(0);display:grid;justify-items:center;gap:4px;z-index:3;transition:transform .5s cubic-bezier(.2,1.6,.4,1),filter .6s}
.biz29-stage[data-pin] .b-shop{transform:translate(-50%,-50%) scale(1)}
.biz29-stage[data-end] .b-shop{filter:grayscale(1) brightness(.7)}
.b-shop .dz{width:50px;height:50px}
.biz29:not(.is-held) .biz29-stage.is-play[data-pin]:not([data-end]) .b-shop .dz{animation:pulse29 2.2s ease-out infinite}
@keyframes pulse29{0%{box-shadow:0 0 0 0 #ffa75c88}70%,100%{box-shadow:0 0 0 18px #ffa75c00}}
.b-shop small,.b-rest small{padding:2px 8px;border-radius:99px;background:#111310ee;color:#f3f4ee;font-size:11px;font-weight:700;white-space:nowrap}
.b-rest{left:72%;top:52%;transform:translate(-50%,-50%) scale(0);display:grid;justify-items:center;gap:4px;z-index:3;transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.biz29-stage[data-rest] .b-rest{transform:translate(-50%,-50%) scale(1)}
.b-rest .dz{width:40px;height:40px}
.b-clock{left:14px;top:14px;padding:5px 11px;border-radius:99px;background:#111310f0;border:1px solid #3b4333;color:#fff;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;z-index:5}
.b-offer{right:14px;top:14px;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:#111310f0;border:1px solid #ffa75c;color:#fff;font-size:12px;font-weight:700;white-space:nowrap;z-index:5;opacity:0;transition:opacity .4s}
.biz29-stage[data-pin] .b-offer{opacity:1}
.biz29-stage[data-end] .b-offer{opacity:.5}
.b-offer b{color:#ffa75c;font-size:15px;font-variant-numeric:tabular-nums}
.biz29-stage[data-kind=meal] .b-offer{border-color:#fec601}.biz29-stage[data-kind=meal] .b-offer b{color:#fec601}
.b-toast{left:50%;top:52px;transform:translate(-50%,-12px);display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:16px;background:#1b1f19f5;border:1px solid #4a5340;box-shadow:0 10px 30px #0008;opacity:0;z-index:6;transition:opacity .35s,transform .35s;white-space:nowrap}
.biz29-stage[data-toast] .b-toast{opacity:1;transform:translate(-50%,0)}
.b-toast .dz{width:32px;height:32px}
.b-toast b{display:block;font-size:12px;color:#fec601}.b-toast em{display:block;font-style:normal;font-size:13px;font-weight:700;color:#fff}
.b-sheet{left:6%;right:6%;bottom:6%;display:grid;gap:6px;padding:12px;border-radius:18px;background:#1b1f19f8;border:1px solid #4a5340;box-shadow:0 14px 40px #000a;z-index:7;transform:translateY(120%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.biz29-stage[data-sheet] .b-sheet{transform:none;opacity:1}
.b-sheet-h{font-size:14px;color:#fff}
.b-f{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px;align-items:baseline;padding:5px 8px;border-radius:10px;background:#111310;font-size:12px}
.b-f i{font-style:normal;color:#a9af9d;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.b-f span{color:#fff;font-weight:700}
.b-btn{justify-self:stretch;margin-top:2px;padding:8px;border-radius:99px;background:#ffa75c;color:#111310;font-size:13px;font-weight:800;text-align:center;transition:transform .15s}
.biz29-stage[data-kind=meal] .b-btn{background:#fec601}
.biz29-stage[data-tap] .b-btn{transform:scale(.94)}
.b-tap{left:50%;bottom:calc(6% + 22px);width:34px;height:34px;margin-left:-17px;border-radius:50%;border:3px solid #fff;opacity:0;z-index:8}
.biz29-stage[data-tap] .b-tap{animation:tap29 .45s ease-out}
@keyframes tap29{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
.b-scan{left:50%;top:54%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:16px;border:3px solid #66ca91;opacity:0;z-index:4}
.biz29-stage[data-scan="1"] .b-scan{animation:scan29a .6s ease-out}.biz29-stage[data-scan="2"] .b-scan{animation:scan29b .6s ease-out}.biz29-stage[data-scan="3"] .b-scan{animation:scan29a .6s ease-out}
@keyframes scan29a{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.3)}}
@keyframes scan29b{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.3)}}
.b-ok{left:50%;bottom:8%;transform:translate(-50%,16px);display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:16px;background:#14251bf5;border:1px solid #66ca91;color:#fff;opacity:0;z-index:6;transition:opacity .35s,transform .35s;max-width:88%}
.biz29-stage[data-ok] .b-ok{opacity:1;transform:translate(-50%,0)}
.b-ok .b-check{width:30px;height:30px;flex:none;color:#66ca91}
.b-ok b{display:block;font-size:14px}.b-ok small{display:block;font-size:12px;color:#c7ccbd}
.b-tag{right:12px;bottom:10px;padding:3px 10px;border-radius:99px;background:#111310cc;color:#c7ccbd;font-size:11px;z-index:5}
.biz29-stage[data-ok] .b-tag{opacity:0}
.biz29-stage[data-instant] *{transition:none!important}
.biz29-ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.biz29-ctrl .button{min-height:44px}
.biz29-text h3{margin:0 0 14px;font-size:clamp(1.3rem,2.3vw,1.8rem);line-height:1.15}
.biz29-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.biz29-steps>li{padding:6px 14px;border-radius:18px;border:1px solid #3b4333;background:#151815}
.biz29-steps>li.is-now{border-color:#fec601;background:#2a2610}
.biz29-steps h4{margin:0}
.biz29-st{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:4px 0;border:0;background:none;color:#fff;font:inherit;font-weight:800;font-size:16px;text-align:left;cursor:pointer}
.biz29-st .n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid #4a5340;font-size:13px}
.biz29-steps .is-now .biz29-st .n{background:#fec601;border-color:#fec601;color:#111310}
.biz29-steps .is-done .biz29-st .n{border-color:#66ca91;color:#66ca91}
.biz29-st .uc-tag{margin-left:auto;font-size:10px;padding:2px 8px;border-radius:99px;border:1px solid var(--color-line);color:var(--color-muted);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.biz29-cap{margin:0 0 8px 42px;color:#dfe3d6;line-height:1.55;font-size:15px}
.biz29.is-on .biz29-steps>li:not(.is-now) .biz29-cap{display:none}
.biz29-more{margin-left:42px}
.biz29-res{margin:0 0 12px;font-weight:700;color:#fff}
.biz29-now{margin:0 0 8px;font-size:14px;line-height:1.6;color:#c7ccbd}
.biz29-now .uc-tag,.gain29 .uc-tag,.list29 .uc-tag{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;vertical-align:1px}
.biz29-now .uc-tag.is-now,.gain29 .uc-tag.is-now{background:#66ca9122;color:#8be0ae;border:1px solid #66ca9166}
.biz29-now .uc-tag.is-later,.gain29 .uc-tag.is-later,.list29 .uc-tag.is-later{border:1px solid var(--color-line);color:var(--color-muted)}
.biz29-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.gain29{margin:0 0 34px}
.gain29-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gain29-grid li{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.gain29-grid .dz{width:44px;height:44px}
.gain29-grid b{font-size:18px;color:#fff;line-height:1.25}
.gain29-grid span:not(.dz):not(.uc-tag){color:#c7ccbd;line-height:1.55;font-size:15px}
.gain29-grid .uc-tag{margin-top:auto}
.gain29-cost{margin:14px 0 0;color:#dfe3d6;line-height:1.6}
.gain29-cost a{color:#fec601;font-weight:700}
html.motion-paused .biz29 :is(*,*::before,*::after){animation-play-state:paused!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.biz29 :is(*,*::before,*::after){animation:none!important;transition:none!important}}
@media (max-width:1000px){.alltag29-grid,.num29-grid,.gain29-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.num29-head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.biz29-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.alltag29-grid,.num29-grid,.gain29-grid,.num29-near ul{grid-template-columns:minmax(0,1fr)}.biz29{padding:14px}.list29{grid-template-columns:minmax(0,1fr)}
  .b-offer{font-size:11px;padding:5px 9px}.b-toast{top:48px}.b-f{font-size:11px}.biz29-cap{margin-left:0}.biz29-more{margin-left:0}
  .biz29-pick{flex-wrap:nowrap}.biz29-pick button{flex:1 1 0;min-width:0;padding-right:10px;font-size:14px}.biz29-pick button .dz{width:30px;height:30px;flex:none}}

/* final_31: Folgen & Favoriten – clearly a lock screen */
.fo-padlock{display:block;width:16px;height:16px;margin:0 auto 4px;color:#f3f4ee;opacity:.85}
.fo-push-note{margin-top:4px;font-size:12px;opacity:.85}

/* final_32: „Wer gerade da ist“ – Beispiel-Animation (assets/js/umkreis.js); ohne JavaScript und mit „Bewegung reduzieren“ das Bild mit dem Chat */
.umk32-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.umk32-lead{font-size:18px;line-height:1.7;color:var(--color-muted);max-width:620px}
.umk32-steps{list-style:none;counter-reset:um;margin:22px 0;padding:0;display:grid;gap:10px;max-width:620px}
.umk32-steps li{counter-increment:um;position:relative;padding:12px 16px 12px 58px;border:1px solid #3b4333;border-radius:20px;background:#151815;font-size:15px;line-height:1.5;color:var(--color-muted)}
.umk32-steps li:before{content:counter(um);position:absolute;left:14px;top:50%;width:30px;height:30px;margin-top:-15px;display:grid;place-items:center;border-radius:50%;background:var(--color-brand);color:#111310;font-weight:800;font-size:14px}
.umk32-steps b,.umk32-block b{color:var(--color-text)}
.umk32-block{max-width:620px;margin:0 0 14px;padding:12px 16px;border-left:3px solid #4A90E2;border-radius:0 14px 14px 0;background:var(--color-surface);font-size:14px;line-height:1.6;color:var(--color-muted)}
.umk32-note{font-size:13px;line-height:1.7;color:var(--color-muted);max-width:620px}
.umk32 .uc-tag{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:99px;border:1px solid var(--color-line);color:var(--color-muted);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:1.6;vertical-align:1px}
.umk32-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.umk32-visual{display:grid;justify-items:center;gap:12px}
.um-map{position:absolute;inset:0;z-index:0}
.um-ring{position:absolute;left:50%;top:36%;width:206px;height:206px;margin:-103px 0 0 -103px;border-radius:50%;border:2px dashed #FEC601;background:#fec60112}
.um-me{position:absolute;left:50%;top:36%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#2f6fc0;border:3px solid #fff;box-shadow:0 0 0 6px #4a90e240;z-index:2}
.um-me i{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;z-index:-1;background:conic-gradient(from -30deg,#4a90e2b0 0deg 60deg,transparent 60deg);-webkit-mask:radial-gradient(circle closest-side,transparent 0 13px,#000 14px,transparent 100%);mask:radial-gradient(circle closest-side,transparent 0 13px,#000 14px,transparent 100%);transform:rotate(35deg)}
.um-p{position:absolute;display:grid;justify-items:center;gap:3px;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s cubic-bezier(.2,1.3,.4,1)}
.um-p i{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,#ff79b7aa 0 28%,#ff79b733 55%,transparent 72%);border:1px dashed #ff79b799}
.um-p b{padding:2px 6px;border-radius:6px;background:#111310e6;color:#ffd1e6;font-size:9.5px;font-weight:700;white-space:nowrap}
.um-p1{left:24%;top:22%}.um-p2{left:63%;top:16%}.um-p3{left:66%;top:44%}
.um-shop{position:absolute;left:14%;top:46%;width:34px;height:34px}
.um-shop img{width:100%;height:100%}
.um-phone:not([data-phase=karte]) .um-p,.um-phone[data-phase=karte] .um-p{opacity:1;transform:none}
.um-top{position:absolute;left:12px;right:12px;top:40px;z-index:3;display:grid;justify-items:center;gap:6px}
.um-toggle{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:#111310f0;border:1px solid #3b4333;color:#f3f4ee;font-size:12px;font-weight:700}
.um-toggle i{position:relative;width:30px;height:17px;border-radius:99px;background:#3b4333;transition:background .3s}
.um-toggle i:after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform .3s}
.um-phone:not([data-phase=karte]) .um-toggle i{background:#4A90E2}
.um-phone:not([data-phase=karte]) .um-toggle i:after{transform:translateX(13px)}
.um-fuzzy{padding:3px 9px;border-radius:8px;background:#111310e6;color:#b9d6f5;font-size:10.5px;opacity:0;transition:opacity .4s}
.um-phone[data-phase=sichtbar] .um-fuzzy{opacity:1}
.um-chat{position:absolute;left:8px;right:8px;bottom:8px;z-index:4;display:grid;gap:6px;padding:12px 12px 10px;border-radius:22px;background:#151a11f5;border:1px solid #FEC601;opacity:0;transform:translateY(40px);transition:opacity .4s,transform .5s}
.um-phone:is([data-phase=chat],[data-phase=direkt],[data-phase=ja]) .um-chat{opacity:1;transform:none}
.um-chat-head{display:flex;justify-content:space-between;margin:0;font-size:12px;color:#b0b6a5}
.um-chat-head b{color:#fff;font-size:14px}
.um-msg{margin:0;max-width:88%;padding:7px 10px;border-radius:14px 14px 14px 4px;background:#262c22;color:#f3f4ee;font-size:12px;line-height:1.35;display:grid;gap:1px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.um-msg b{font-size:9.5px;color:#ffd1e6}
.um-msg.is-me{justify-self:end;border-radius:14px 14px 4px 14px;background:#FEC601;color:#111310}
.um-msg.is-me b{color:#5b4a00}
.um-phone:is([data-phase=chat],[data-phase=direkt],[data-phase=ja]) .um-msg{opacity:1;transform:none}
.um-phone[data-phase=chat] .um-m2{transition-delay:.9s}.um-phone[data-phase=chat] .um-m3{transition-delay:1.8s}
.um-chat-foot{margin:0;font-size:10px;color:#8a9180;text-align:center}
.um-dm{position:absolute;left:14px;right:14px;top:150px;z-index:5;display:grid;gap:4px;padding:12px 14px;border-radius:18px;background:#1c2019f5;border:1px solid #ff79b7;opacity:0;visibility:hidden;transform:scale(.95);transition:opacity .35s,transform .4s}
.um-dm b{color:#fff;font-size:13px}
.um-dm span{font-size:12px}
.um-wait{color:#ffd1e6}.um-yes{display:none;color:#66CA91;font-weight:700}
.um-phone:is([data-phase=direkt],[data-phase=ja]) .um-dm{opacity:1;visibility:visible;transform:none}
.um-phone[data-phase=ja] .um-wait{display:none}.um-phone[data-phase=ja] .um-yes{display:block}
.um-push{position:absolute;left:10px;right:10px;top:84px;z-index:6;display:grid;gap:3px;padding:12px 14px;border-radius:20px;background:#1c2019f5;border:1px solid #FEC601;box-shadow:0 12px 34px #000a;opacity:0;visibility:hidden;transform:translateY(-30px) scale(.96);transition:opacity .25s,transform .25s,visibility 0s .25s}
.um-push b{font-size:14px;color:#fff}
.um-push>span:not(.fo-app){font-size:12.5px;color:#dfe3d6}
.um-push em{justify-self:start;margin-top:3px;padding:2px 8px;border-radius:99px;background:#fec6012e;color:#FEC601;font-size:10.5px;font-style:normal;font-weight:700}
.um-phone[data-phase=push] .um-push{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .5s cubic-bezier(.2,1.3,.4,1)}
.um-screen:after{opacity:.5}
.um-phone:is([data-phase=karte],[data-phase=sichtbar]) .um-screen:after{opacity:.12}
.um-phone:not([data-phase=karte]) .um-me:before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;background:#4a90e224;border:1px dashed #4a90e2b0}   /* only roughly: ±200 m */
html.motion-paused .umk32 :is(*,*::before,*::after){animation-play-state:paused!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.umk32 :is(*,*::before,*::after){transition:none!important;animation:none!important}}
@media (max-width:899px){.umk32-grid{grid-template-columns:minmax(0,1fr);gap:32px}.umk32-visual{order:-1}}