/* App-Tour — Gerät + Liste (vitalkultur, 27.10.2026). Farben über --at-akzent je Marke. */
[data-app-tour] { --at-akzent: #3ECFB2; --at-text: rgb(235,230,220); --at-ease: cubic-bezier(.2,.7,.2,1); }

/* Gerät: Apples Gehäuse über dem Bildschirmfenster (gemessen: 75/66 px in 1470 × 3000) */
/* Breite UND Höhe begrenzen: auf dem 16 Pro Max füllte das Gerät sonst den ganzen Schirm (Jan, 27.10.) */
.at-device { position: relative; width: min(360px, 78vw, calc((100svh - 200px) * 0.49)); aspect-ratio: 1470 / 3000; isolation: isolate; }
/* Schatten ruhend auf eigener Ebene — drop-shadow am Gerät rechnete jedes Videobild neu */
.at-device::before { content: ""; position: absolute; inset: .7% 2% .8%; border-radius: 18.4% / 8.8%; box-shadow: 0 34px 55px rgba(0,0,0,.6); z-index: -1; pointer-events: none; }
.at-screen { position: absolute; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; overflow: hidden; background: #000; border-radius: 11% / 5%; touch-action: pan-y; }
.at-bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.at-scr { position: absolute; inset: 0; opacity: 0; transform: scale(1.015); transition: opacity .638s var(--at-ease), transform .638s var(--at-ease); pointer-events: none; }
.at-scr.on { opacity: 1; transform: none; pointer-events: auto; }
.at-scr > img, .at-scr > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-scroll .at-head { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 2; }
.at-scroll .at-scroller { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.at-scroll .at-scroller::-webkit-scrollbar { display: none; }
.at-scroll .at-scroller img { width: 100%; height: auto; display: block; }

/* Liste: Zeile klappt auf, Fortschritt als Linie */
[data-tour-liste] { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
[data-tour-liste] li { position: relative; }
[data-tour-liste] button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 13px 21px; border-radius: 13px; transition: background .383s var(--at-ease); }
[data-tour-liste] button:hover { background: rgba(255,255,255,.025); }
[data-tour-liste] button:focus-visible { outline: 2px solid var(--at-akzent); outline-offset: 2px; }
[data-tour-liste] b { display: block; font-weight: 500; font-size: 17px; color: rgba(235,230,220,.55); transition: color .383s var(--at-ease); }
[data-tour-liste] span { display: block; font-size: 14.5px; color: rgba(235,230,220,.75); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .51s var(--at-ease), opacity .51s var(--at-ease), margin .51s var(--at-ease); }
[data-tour-liste] .fort { position: absolute; left: 21px; right: 21px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(235,230,220,.08); overflow: hidden; opacity: 0; transition: opacity .383s; }
[data-tour-liste] .fort::after { content: ""; position: absolute; inset: 0; width: var(--fort, 0%); background: var(--at-akzent); }
[data-tour-liste] li.on button { background: rgba(62,207,178,.06); }
[data-tour-liste] li.on b { color: var(--at-text); }
[data-tour-liste] li.on span { max-height: 64px; opacity: 1; margin-top: 3px; }
[data-tour-liste] li.on .fort { opacity: 1; }

/* Vollbild: Knopf am Gerät, Gerät wandert in eine Ebene über der Seite */
.at-voll-btn { position: absolute; right: -12px; bottom: 9%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: rgb(235,230,220); background: rgba(2,2,2,.78); border: 1px solid rgba(235,230,220,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.at-voll-btn:focus-visible { outline: 2px solid #3ECFB2; outline-offset: 2px; }
.at-voll-btn svg { width: 18px; height: 18px; }
/* Abspielen/Anhalten (29.10.2026): über dem Vollbild-Knopf; angehalten = Fortschritt der Station ruht sichtbar */
.at-auto-btn { bottom: calc(9% + 54px); }
.at-auto-btn svg { width: 15px; height: 15px; }
.at-voll .at-auto-btn { top: calc(env(safe-area-inset-top, 0px) + 60px); }
.at-angehalten [data-tour-liste] li.on .fort { opacity: .35; }
.at-voll { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background: rgba(2,2,2,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* Sichtbare Höhe (dvh) — svh war in Browsern mit eingeblendeten Leisten zu groß (Jan, 16 Pro Max) */
.at-voll .at-device { width: min(88vw, calc(84vh * 0.49)); }
@supports (height: 1dvh) { .at-voll .at-device { width: min(88vw, calc(84dvh * 0.49)); } }
/* Vollbild-Schließen wie Apple (28.10., Jan: „Knopf nicht schön“): klein, ruhig, in der Bildschirmecke statt auf
   der Geräteecke. .at-voll füllt den Bildschirm, ist also der Bezug für position: fixed (backdrop-filter). */
.at-voll .at-voll-btn { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); right: calc(env(safe-area-inset-right, 0px) + 14px);
  bottom: auto; width: 36px; height: 36px; background: rgba(235,230,220,.12); border: none; color: rgba(235,230,220,.9); }
.at-voll .at-voll-btn svg { width: 15px; height: 15px; }

/* Erklärungen der WEBSITE, nicht der App (27.10.2026, Jan: Punkte/Kästen in Markenfarbe wirkten wie App-Elemente):
   Scheinwerfer — der App-Bildschirm wird abgedunkelt, nur der erklärte Bereich bleibt hell (feiner weißer Rahmen);
   der Text steht UNTER dem Gerät in der Schrift der Seite. Kein backdrop-filter (Videos darunter malen jedes Bild neu). */
.at-call { display: none; }
.at-spot { position: absolute; z-index: 3; pointer-events: none; opacity: 0; border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.7), 0 0 22px rgba(255,255,255,.14);
  transition: opacity .45s ease, left .7s cubic-bezier(.2,.9,.25,1), top .7s cubic-bezier(.2,.9,.25,1), width .7s cubic-bezier(.2,.9,.25,1), height .7s cubic-bezier(.2,.9,.25,1); }
.at-spot.zeigen { opacity: 1; }
.at-cap { position: absolute; left: 50%; top: calc(100% + 18px); width: min(125%, 88vw); transform: translate(-50%, 6px); text-align: center; pointer-events: none;
  font-size: 17px; line-height: 1.35; font-weight: 500; letter-spacing: -.005em; color: var(--t, #f2f2f2); opacity: 0; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.9,.25,1); }
.at-cap.zeigen { opacity: 1; transform: translate(-50%, 0); }
.at-cap::before { content: ""; display: block; width: 1px; height: 12px; margin: 0 auto 8px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.55)); }
.tour-phone .at-device, .at-voll .at-device { margin-bottom: 64px; }
@media (prefers-reduced-motion: reduce) { .at-spot, .at-cap { transition: opacity .2s; } }

/* Spickzettel-Station (29.10.2026, Jan: Mehrwert erkennbar machen, aber nur an geprüften Beispielen —
   RMSSD, SD1, SDNN; Texte gegen Task Force 1996 / Brennan 2001 geprüft): echte Kacheln der App, ein Finger tippt; das echte Erklärblatt der App
   fährt wie ein iOS-Blatt von unten herein. Abdunkelung 51,5 % = an der App gemessen (Blatt in halber Höhe). */
.at-spick .at-kachel { position: absolute; z-index: 2; border-radius: 6% / 14%; pointer-events: none; }
.at-spick .at-kachel.ruf::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 1.5px solid rgba(62,207,178,.85); animation: atRuf 1.6s cubic-bezier(.2,.7,.3,1) infinite; pointer-events: none; }
@keyframes atRuf { 0% { opacity: .9; transform: scale(.98); } 70%, 100% { opacity: 0; transform: scale(1.08); } }
.at-spick .at-dimm { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,.515); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.at-spick .at-blatt { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 4; transform: translateY(102%); transition: transform .5s cubic-bezier(.32,.72,0,1); pointer-events: none; }
.at-spick.offen .at-dimm { opacity: 1; }
.at-spick.offen .at-blatt { transform: none; }
.at-finger { position: absolute; z-index: 5; width: 13%; aspect-ratio: 1; margin: -6.5% 0 0 -6.5%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: rgba(255,255,255,.26); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(0,0,0,.5); transition: opacity .3s ease, transform .2s ease, left .6s cubic-bezier(.2,.9,.25,1), top .6s cubic-bezier(.2,.9,.25,1); }
.at-finger.an { opacity: 1; } .at-finger.druck { transform: scale(.82); background: rgba(255,255,255,.42); }

/* Scroll-Stationen: sichtbar machen, DASS es weitergeht (Jan 29.10.: „man erkennt nicht, dass man scrollen kann“) */
.at-scroll .at-leiste { position: absolute; right: 1.6%; top: 14%; bottom: 3%; width: 3px; z-index: 3; border-radius: 3px; background: rgba(255,255,255,.08); pointer-events: none; }
.at-scroll .at-leiste i { position: absolute; left: 0; right: 0; top: 0; height: 12%; border-radius: 3px; background: rgba(235,230,220,.6); }
.at-scroll .at-mehr { position: absolute; left: 50%; bottom: 3.2%; z-index: 3; transform: translateX(-50%); padding: 6px 12px 7px 10px; border-radius: 999px; pointer-events: none;
  font: 600 11.5px/1 -apple-system, system-ui, sans-serif; letter-spacing: .01em; color: #fff; background: rgba(40,40,40,.86); border: .5px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 20px rgba(0,0,0,.45); display: flex; align-items: center; gap: 6px; transition: opacity .4s ease; }
.at-scroll .at-mehr svg { width: 12px; height: 12px; animation: atMehr 1.4s ease-in-out infinite; }
.at-scroll .at-mehr.weg { opacity: 0; }
@keyframes atMehr { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .at-spick .at-blatt { transition: none; } .at-spick .at-kachel.ruf::after, .at-scroll .at-mehr svg { animation: none; } }

/* Uhr statt iPhone (29.10.2026, Breathwork): Apples Ultra-3-Gehäuse 600 × 960, Displayloch 89/223–511/737 gemessen
   (dasselbe Loch wie in den Store-Bildern). Bildschirm leicht größer als das Loch – das Gehäuse deckt die Kante. */
.at-device.at-uhr { width: min(330px, 74vw, calc((100svh - 160px) * 0.625)); aspect-ratio: 600 / 960; }
.at-device.at-uhr::before { inset: 17% 7% 17% 6%; border-radius: 28% / 18%; box-shadow: 0 34px 70px rgba(0,0,0,.65); }
.at-uhr .at-screen { left: 14.6%; top: 23.05%; width: 70.8%; height: 53.9%; border-radius: 19% / 15.6%; }
.at-uhr .at-voll-btn { right: -40px; bottom: 30%; }   /* neben die Krone, nicht darauf */
.at-uhr .at-auto-btn { bottom: calc(30% + 54px); }
.at-voll .at-device.at-uhr { width: min(88vw, calc(84vh * 0.625)); }
@supports (height: 1dvh) { .at-voll .at-device.at-uhr { width: min(88vw, calc(84dvh * 0.625)); } }