/* Layout: ein Jahr als Geschichte. Farbiges Kino-Bild, dann eine echte Manga-Seite auf Papier, dann der Hof als Herzstück mit Wochen-Regler, dann das Duell der Lager. */
:root { color-scheme: dark; --ground:#0B0B0D; --card:#141418; --paper:#F2EEE8; --text2:#B7B3AD; --muted:#86837E; --amber:#FF5C78; --amber-text:#FF7A92; --gold:#D9B46A; --ink:#16100D; --jade:#7FB8A0; --seal:#FF5C78; --line:rgba(242,238,232,.14); --display:"Zen Old Mincho", "Hiragino Mincho ProN", Georgia, serif; --body:"Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ground); color:var(--paper); font-family:var(--body); }
a { color:var(--amber-text); } a:hover { color:var(--paper); }
.qr { background:var(--ground); color:var(--paper); font-family:var(--body); line-height:1.6; overflow-x:hidden; }
.qr img { display:block; max-width:100%; height:auto; }
.wrap { max-width:1200px; margin:0 auto; padding-inline:24px; }
.disp { font-family:var(--display); font-weight:900; line-height:1.08; text-wrap:balance; margin:0; }
.week { display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:18px; color:var(--amber-text); }
.lead { color:var(--text2); font-size:18px; max-width:34em; margin:0; }
.pill { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 30px; border-radius:28px; font-weight:700; font-size:16px; text-decoration:none; }
.pill-paper { background:var(--paper); color:var(--ink); box-shadow:0 0 0 6px rgba(242,238,232,.08), 0 12px 40px rgba(255,92,120,.25); }
.pill-glass { color:var(--paper); border:1px solid var(--line); background:rgba(26,26,29,.5); backdrop-filter:blur(10px); }
.pill:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }

/* Aufmacher: Kino */
.hero { position:relative; min-height:820px; overflow:hidden; display:flex; align-items:center; }
.hero .bg { position:absolute; inset:-4% -4% 0; width:108%; height:104%; object-fit:cover; object-position:center 42%; max-width:none; }
.hero .shade { position:absolute; inset:0; background:radial-gradient(60% 70% at 72% 60%, rgba(255,92,120,.18), transparent 70%), linear-gradient(90deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.55) 42%, rgba(11,11,13,0) 70%), linear-gradient(180deg, rgba(11,11,13,.5) 0%, transparent 25%, transparent 70%, #0B0B0D 100%); }
.hero .fig { position:absolute; right:6%; bottom:0; height:86%; width:auto; max-width:none; filter:drop-shadow(0 0 40px rgba(255,92,120,.25)) drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.hero .enso { position:absolute; right:3%; top:12%; width:min(620px, 52vw); height:auto; opacity:.9; }
.fog { position:absolute; left:-50%; width:200%; height:180px; bottom:8%; background:radial-gradient(40% 60% at 30% 50%, rgba(242,238,232,.16), transparent 70%), radial-gradient(35% 55% at 75% 50%, rgba(242,238,232,.12), transparent 70%); pointer-events:none; }
.ember { position:absolute; width:5px; height:5px; border-radius:50%; background:#FF9AAE; box-shadow:0 0 10px 2px rgba(255,92,120,.7); bottom:-10px; opacity:0; pointer-events:none; }
.ember:nth-child(1){left:58%;} .ember:nth-child(2){left:66%;} .ember:nth-child(3){left:74%;} .ember:nth-child(4){left:81%;} .ember:nth-child(5){left:88%;} .ember:nth-child(6){left:62%;} .ember:nth-child(7){left:93%;} .ember:nth-child(8){left:70%;}
.hero h1 { font-size:clamp(56px, 9.5vw, 132px); letter-spacing:-.01em; }
.brush { display:block; width:min(340px, 60vw); height:auto; margin-top:6px; }

/* Manga-Seite auf Papier */
.page { background:var(--paper); color:var(--ink); padding-block:88px; position:relative; }
.page .lead { color:#3A332D; }
.page .week { color:#9A5B14; }
.mpage { display:grid; gap:12px; grid-template-columns:repeat(12, minmax(0,1fr)); }
.p { position:relative; background:#000; overflow:hidden; border:4px solid #000; }
.p img { width:100%; height:100%; object-fit:cover; }
.p1 { grid-column:span 12; aspect-ratio:1400/520; clip-path:polygon(0 0,100% 0,100% 88%,0 100%); }
.p2 { grid-column:span 7; aspect-ratio:7/5.6; margin-top:-38px; clip-path:polygon(0 7%,100% 0,94% 100%,0 100%); }
.p3 { grid-column:span 5; margin-top:-20px; clip-path:polygon(6% 4%,100% 0,100% 100%,0 100%); background:#000; color:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:44px 34px; font-family:var(--display); font-weight:700; font-size:26px; line-height:1.5; white-space:pre-line; }
.p4 { grid-column:span 5; aspect-ratio:4/4.4; }
.p5 { grid-column:span 7; background:#fff; border-color:#000; display:flex; align-items:center; justify-content:center; padding:40px; position:relative; overflow:hidden; }
.speed { position:absolute; inset:-40%; background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(0,0,0,.85) 0deg 1.2deg, transparent 1.2deg 7deg); -webkit-mask:radial-gradient(circle at 50% 50%, transparent 26%, #000 46%); mask:radial-gradient(circle at 50% 50%, transparent 26%, #000 46%); }
.cap { position:absolute; background:var(--paper); color:var(--ink); font-size:15px; line-height:1.45; padding:10px 14px; max-width:270px; border:2.5px solid #000; z-index:2; }
.bub { position:absolute; background:#fff; color:#111; font-size:16px; line-height:1.45; padding:16px 22px; border-radius:50%/46%; max-width:240px; text-align:center; border:3px solid #000; z-index:2; }
.bub::after { content:""; position:absolute; left:44px; bottom:-18px; border:11px solid transparent; border-top:18px solid #000; border-bottom:0; }
.sfx { font-family:var(--display); font-weight:900; font-size:clamp(46px, 7vw, 92px); color:#000; position:relative; transform:rotate(-7deg); text-shadow:4px 4px 0 var(--paper), -4px -4px 0 var(--paper), 4px -4px 0 var(--paper), -4px 4px 0 var(--paper); text-align:center; line-height:1.05; }

/* Hof */
.hofgrid { display:grid; gap:48px; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; }
.hofframe { position:relative; aspect-ratio:390/540; max-width:460px; width:100%; margin:0 auto; border-radius:32px; overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 100px rgba(0,0,0,.65), 0 0 0 10px rgba(242,238,232,.03); }
.hofframe .bg { position:absolute; left:0; top:-18.519%; width:100%; height:127.83%; max-width:none; }
.hofframe .veil { position:absolute; left:0; top:0; width:100%; height:33.3%; background:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.3) 50%, rgba(0,0,0,0)); pointer-events:none; }
.hofframe .fig { position:absolute; left:45%; bottom:16.296%; transform:translateX(-50%); height:43.52%; width:auto; max-width:none; }
.hofframe .figshadow { position:absolute; left:45%; bottom:16.296%; width:30%; height:4.1%; transform:translate(-50%, 45%); border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.25) 55%, transparent); }
.hofframe .sprite { position:absolute; max-width:none; }
.hofframe .shadow { position:absolute; border-radius:50%; }
.newlist { display:flex; flex-wrap:wrap; gap:8px; }
.newitem { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:13px; font-weight:700; }
.newitem img { width:28px; height:28px; object-fit:contain; }
.newitem span { color:var(--muted); font-weight:500; }
.hud { position:absolute; left:14px; right:14px; top:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; background:rgba(11,11,13,.6); backdrop-filter:blur(8px); font-size:13px; font-weight:700; color:var(--paper); }
.ring { position:absolute; right:16px; bottom:16px; width:86px; height:86px; }
.ring b { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--display); font-size:24px; line-height:1; color:var(--paper); }
.ring b small { font-family:var(--body); font-size:10px; color:var(--text2); margin-top:3px; }
.petal { position:absolute; top:-12px; width:9px; height:7px; border-radius:60% 0 60% 0; background:#F4B6C2; opacity:0; pointer-events:none; }
.petal:nth-of-type(1){left:12%;} .petal:nth-of-type(2){left:30%;} .petal:nth-of-type(3){left:52%;} .petal:nth-of-type(4){left:70%;} .petal:nth-of-type(5){left:86%;}
.sys { border-radius:14px; padding:18px 20px; background:linear-gradient(180deg, rgba(217,180,106,.16), rgba(217,180,106,.05)); border:1px solid rgba(217,180,106,.7); box-shadow:0 0 0 4px rgba(217,180,106,.08), 0 0 40px rgba(217,180,106,.15); display:flex; align-items:center; gap:16px; }
.sys small { display:block; color:var(--gold); font-weight:700; font-size:13px; }
.sys b { font-family:var(--display); font-size:26px; color:var(--paper); }
.slider { width:100%; accent-color:var(--amber); height:44px; cursor:pointer; }
.scale { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
.times { display:flex; gap:8px; flex-wrap:wrap; }
.time { all:unset; box-sizing:border-box; cursor:pointer; min-height:44px; padding:0 18px; display:inline-flex; align-items:center; border-radius:22px; border:1px solid var(--line); font-size:14px; font-weight:700; color:var(--text2); }
.time.on { background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* Duell der Lager */
.versus { position:relative; min-height:560px; overflow:hidden; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
.side { position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:40px; min-height:560px; }
.side.jade { background:radial-gradient(90% 80% at 30% 100%, rgba(127,184,160,.4), transparent 65%), #0F1715; clip-path:polygon(0 0,100% 0,88% 100%,0 100%); }
.side.blade { background:radial-gradient(90% 80% at 70% 100%, rgba(184,67,47,.45), transparent 65%), #1A0F0D; clip-path:polygon(12% 0,100% 0,100% 100%,0 100%); margin-left:-12%; text-align:right; align-items:flex-end; }
.side img { position:absolute; bottom:0; height:88%; width:auto; max-width:none; }
.side.jade img { left:16%; } .side.blade img { right:14%; }
.side .t { position:relative; z-index:1; max-width:300px; }
.vs { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-8deg); font-family:var(--display); font-weight:900; font-size:clamp(60px, 9vw, 120px); color:var(--paper); text-shadow:0 0 30px rgba(0,0,0,.8); z-index:2; pointer-events:none; }

.seal { display:inline-flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:10px; background:var(--seal); color:var(--paper); font-family:var(--display); font-weight:900; font-size:22px; transform:rotate(-7deg); box-shadow:inset 0 0 0 3px rgba(242,238,232,.2); flex:none; }
.invite { border-radius:16px; background:var(--card); border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; gap:18px; }
.coderow { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 18px; border-radius:12px; background:var(--ground); border:1px solid var(--line); flex-wrap:wrap; }
.facts { display:grid; gap:14px; grid-template-columns:repeat(3, minmax(0,1fr)); }
.fact { border-top:2px solid var(--amber); padding-top:14px; }
.fact b { display:block; font-size:17px; margin-bottom:4px; }
.fact p { margin:0; color:var(--text2); font-size:15px; }
.stage { position:relative; height:620px; display:flex; align-items:center; justify-content:center; }
.stage .glow { position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,92,120,.28), transparent 65%); }
.phone { position:absolute; width:clamp(170px, 19vw, 262px); border-radius:36px; border:7px solid #26262A; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.65); }
/* Dynamic Island: für alle Handyrahmen gleich gezeichnet, deckt eine im Screenshot vorhandene genau ab (Maße vom 600 px breiten Screenshot: x 207–392, y 21–74) */
.phone::after { content:""; position:absolute; top:0; left:50%; z-index:3; width:32.5%; aspect-ratio:3.3; margin-top:3.2%; transform:translateX(-50%); border-radius:999px; background:#000; pointer-events:none; }
.phone.back { transform:translateX(-46%) rotate(-7deg); opacity:.88; }
.phone.front { transform:translateX(40%) rotate(5deg) translateY(24px); z-index:2; }
.callout { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:rgba(11,11,13,.78); backdrop-filter:blur(10px); border:1px solid rgba(255,92,120,.5); font-size:14px; font-weight:700; white-space:nowrap; }
.callout i { width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px var(--amber); }
.faq details { border-top:1px solid var(--line); padding:18px 0; }
.faq summary { cursor:pointer; font-weight:700; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--amber-text); font-size:22px; line-height:1; }
.faq details[open] summary::after { content:"–"; }
.faq p { color:var(--text2); margin:10px 0 0; max-width:40em; }

@media (prefers-reduced-motion: no-preference) {
  .hero .bg { animation:drift 30s ease-in-out infinite alternate; }
  .fog { animation:fog 26s linear infinite; }
  .ember { animation:rise 7s linear infinite; }
  .ember:nth-child(2){animation-delay:1.1s;} .ember:nth-child(3){animation-delay:2.4s;} .ember:nth-child(4){animation-delay:3.2s;} .ember:nth-child(5){animation-delay:4.5s;} .ember:nth-child(6){animation-delay:5.3s;} .ember:nth-child(7){animation-delay:.6s;} .ember:nth-child(8){animation-delay:6.1s;}
  .hero .enso path.draw { stroke-dasharray:1200; stroke-dashoffset:1200; animation:ink 2.4s .3s cubic-bezier(.6,.1,.2,1) forwards; }
  .petal { animation:fall 9s linear infinite; }
  .petal:nth-of-type(2){animation-delay:2s;} .petal:nth-of-type(3){animation-delay:4.5s;} .petal:nth-of-type(4){animation-delay:6s;} .petal:nth-of-type(5){animation-delay:7.5s;}
  .hofframe .bg { transition:opacity .35s; }
}
@keyframes drift { from { transform:scale(1) translateX(0); } to { transform:scale(1.04) translateX(-1.5%); } }
@keyframes fog { from { transform:translateX(0); } to { transform:translateX(25%); } }
@keyframes rise { 0% { transform:translateY(0) translateX(0); opacity:0; } 10% { opacity:.9; } 100% { transform:translateY(-700px) translateX(-60px); opacity:0; } }
@keyframes ink { to { stroke-dashoffset:0; } }
@keyframes fall { 0% { transform:translateY(0) rotate(0); opacity:0; } 10% { opacity:.9; } 100% { transform:translateY(720px) translateX(-80px) rotate(540deg); opacity:0; } }
@media (max-width: 860px) {
  .hero { min-height:760px; align-items:flex-end; }
  .hero .fig { right:-14%; height:62%; opacity:.55; }
  .hero .enso { width:90vw; top:6%; right:-20%; opacity:.5; }
  .hofgrid, .facts { grid-template-columns:minmax(0,1fr); }
  .stage { height:min(560px, 128vw); }
  .phone { width:42vw; }
  .callout { font-size:12px; }
  .mpage > * { grid-column:span 12 !important; margin-top:0 !important; clip-path:none !important; }
  .p3 { font-size:21px; padding:28px; }
  .cap, .bub { font-size:14px; max-width:200px; }
  .versus { grid-template-columns:minmax(0,1fr); }
  .side { min-height:420px; }
  .side.jade, .side.blade { clip-path:none; margin-left:0; }
  .vs { top:50%; }
}

/* Lern-Modus: Kamerabild mit Skelett wie in der App */
.learn { position:relative; width:min(100%, 400px); margin:0 auto; border-radius:34px; background:var(--card); border:1px solid var(--line); box-shadow:0 40px 100px rgba(0,0,0,.6); padding:22px 18px 18px; display:flex; flex-direction:column; gap:14px; }
.learn .ltop { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding-inline:6px; }
.learn .ltop b { font-family:var(--display); font-weight:900; font-size:22px; line-height:1.2; }
.learn .ltop small { display:block; color:var(--text2); font-size:13px; margin-top:4px; }
.learn .dots { display:flex; gap:6px; flex:none; padding-bottom:6px; }
.learn .dots i { width:22px; height:5px; border-radius:3px; background:rgba(242,238,232,.18); }
.learn .dots i.done { background:var(--jade); } .learn .dots i.now { background:var(--amber); }
.cam { position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/4.3; background:radial-gradient(80% 70% at 50% 40%, #2A2A30, #121214); }
.cam::before, .cam::after { content:""; position:absolute; width:34px; height:34px; border:2px solid rgba(242,238,232,.35); }
.cam::before { left:14px; top:14px; border-right:0; border-bottom:0; border-radius:10px 0 0 0; }
.cam::after { right:14px; bottom:14px; border-left:0; border-top:0; border-radius:0 0 10px 0; }
.cam .body { position:absolute; left:50%; bottom:3%; height:90%; aspect-ratio:494/600; transform:translateX(-50%); }
.cam .body img { width:100%; height:100%; opacity:.9; }
.cam .body svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cam .hint { position:absolute; left:50%; top:16px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:8px 16px 8px 8px; border-radius:999px; background:rgba(11,11,13,.72); backdrop-filter:blur(8px); font-weight:700; font-size:16px; }
.cam .hint span { width:26px; height:26px; border-radius:50%; background:var(--jade); color:var(--ground); display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.lbar { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.lbar > div { min-width:0; overflow:hidden; border-radius:18px; background:rgba(242,238,232,.05); padding:12px 14px; display:flex; align-items:center; gap:10px; }
.lbar > div > div { min-width:0; }
.lbar svg { flex:none; width:36px; height:36px; }
.lbar b { display:block; font-family:var(--display); font-weight:900; font-size:30px; line-height:1; white-space:nowrap; }
.lbar small { display:block; color:var(--text2); font-size:12px; line-height:1.3; margin-top:4px; }
.hold { stroke-dasharray:113; stroke-dashoffset:0; }
.stars { display:flex; gap:4px; color:var(--amber); font-size:22px; letter-spacing:0; }
@media (prefers-reduced-motion: no-preference) {
  .hold { animation:hold 20s linear infinite; }
  .cam .skel { animation:breathe 4s ease-in-out infinite; }
}
@keyframes hold { from { stroke-dashoffset:113; } to { stroke-dashoffset:0; } }
@keyframes breathe { 50% { opacity:.65; } }

/* Website: Hof-Ebenen und Kleinkram, den die Design-Seite inline hatte */
.hofframe .layer { position:absolute; inset:0; }
.hofframe .veil, .hofframe .petals { display:none; }
.hofframe.bright .veil, .hofframe.bright .petals { display:block; }
.time .thumb { width:32px; height:32px; object-fit:cover; object-position:top; border-radius:50%; background:#2A2A2E; }
.top { position:absolute; left:0; right:0; top:0; z-index:6; }
.top nav a { color:var(--paper); text-decoration:none; }
.top nav .hide-s { display:none; }
@media (min-width: 700px) { .top nav .hide-s { display:inline; } }
.pill[aria-disabled="true"] { cursor:default; }

/* Startseite 2.0: feste Leiste, Zahlen im Aufmacher, Laufband, Kino-Video, Pfad, Alltag, Tarife, Finale */
.skip { position:absolute; left:16px; top:-60px; z-index:20; background:var(--paper); color:var(--ink); padding:10px 16px; border-radius:10px; font-weight:700; }
.skip:focus { top:12px; }
.top { position:fixed; transition:background .35s, border-color .35s, backdrop-filter .35s; border-bottom:1px solid transparent; }
.top.solid { background:rgba(11,11,13,.72); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); border-bottom-color:var(--line); }
.topin { display:flex; align-items:center; gap:14px; padding-top:16px; padding-bottom:16px; transition:padding .35s; }
.top.solid .topin { padding-top:10px; padding-bottom:10px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--paper); text-decoration:none; }
.brand img { width:38px; height:38px; border-radius:10px; }
.brand .disp { font-size:22px; }
.topnav { margin-left:auto; display:flex; gap:24px; align-items:center; font-size:15px; }
.topnav a:not(.pill) { position:relative; }
.topnav a:not(.pill)::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.topnav a:not(.pill):hover::after { transform:scaleX(1); }
.top nav .pill-s { min-height:40px; padding:0 18px; font-size:14px; color:var(--ink); box-shadow:none; }
.top nav .pill-s:hover { color:var(--ink); }
.pill { gap:10px; transition:transform .25s, box-shadow .25s, background .25s; }
.pill:hover { transform:translateY(-2px); }
.pill-paper:hover { color:var(--ink); box-shadow:0 0 0 8px rgba(242,238,232,.1), 0 18px 50px rgba(255,92,120,.4); }
.pill-glass:hover { background:rgba(242,238,232,.12); color:var(--paper); }
.h2 { font-size:clamp(34px, 4.8vw, 58px); }
.sechead { display:flex; flex-direction:column; gap:16px; margin-bottom:48px; }
.stack { display:flex; flex-direction:column; gap:18px; }
.small { margin:0; color:var(--text2); font-size:15px; }

/* Aufmacher */
.hero { min-height:max(760px, 100svh); }
.herotext { position:relative; width:100%; padding-top:130px; padding-bottom:120px; display:flex; flex-direction:column; gap:20px; z-index:3; }
.tagline { font-size:clamp(24px, 2.8vw, 34px); max-width:17ch; font-weight:700; }
.ctas { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:6px; }
.kanji { position:absolute; left:-2vw; bottom:-8vw; font-family:var(--display); font-weight:900; font-size:clamp(320px, 46vw, 720px); line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(255,92,120,.16); pointer-events:none; user-select:none; z-index:1; }
.cue { position:absolute; left:50%; bottom:26px; width:26px; height:42px; margin-left:-13px; border:2px solid rgba(242,238,232,.45); border-radius:14px; z-index:4; }
.cue span { position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--paper); }
.hero .bg, .hero .fig, .hero .enso, .kanji, .finbg { translate:0 var(--py, 0px); will-change:translate; }

/* Laufband */
.marquee { overflow:hidden; border-block:1px solid var(--line); background:#121214; padding:18px 0; }
.mq { display:flex; width:max-content; gap:28px; align-items:center; font-family:var(--display); font-weight:700; font-size:20px; color:var(--text2); white-space:nowrap; }
.mq i { width:7px; height:7px; background:var(--amber); transform:rotate(45deg); flex:none; }

/* Kino */
.cine { position:relative; min-height:min(92vh, 860px); display:flex; align-items:flex-end; overflow:hidden; background:#0b0b0d; }
.cinevid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 40%; }
.cineshade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,11,13,.9) 0%, rgba(11,11,13,.55) 38%, rgba(11,11,13,0) 65%), linear-gradient(180deg, #0B0B0D 0%, rgba(11,11,13,0) 22%, rgba(11,11,13,0) 62%, #0B0B0D 100%); }
.cinetext { position:relative; z-index:2; width:100%; padding-top:160px; padding-bottom:110px; display:flex; flex-direction:column; gap:18px; }
.cinetext .h2 { max-width:13ch; }
.cinetext .lead { max-width:28em; }
.cinemeta { display:flex; align-items:center; gap:14px; margin-top:8px; }
.vidbtn { all:unset; box-sizing:border-box; cursor:pointer; width:52px; height:52px; border-radius:50%; border:1px solid rgba(242,238,232,.4); background:rgba(11,11,13,.5); backdrop-filter:blur(8px); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.vidbtn:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.vidbtn .ic { width:14px; height:16px; border-left:4px solid var(--paper); border-right:4px solid var(--paper); }
.vidbtn.paused .ic { width:0; height:0; border-left:14px solid var(--paper); border-right:0; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px; }

/* Pfad */
.path { padding-top:120px; padding-bottom:120px; background:radial-gradient(60% 50% at 80% 0%, rgba(127,184,160,.08), transparent 70%), var(--ground); border-top:1px solid var(--line); }
.track { position:relative; height:4px; border-radius:2px; background:rgba(242,238,232,.1); margin:0 0 40px; }
.trackfill { position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:2px; background:linear-gradient(90deg, #4F9D6B, #4C7FC0 30%, #E2C04F 55%, var(--amber) 80%, var(--paper)); transform-origin:left; }
.tick { position:absolute; top:50%; left:var(--x); width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--ground); border:2px solid rgba(242,238,232,.6); }
.tick.big { width:16px; height:16px; margin:-8px 0 0 -8px; border-color:var(--amber); box-shadow:0 0 14px rgba(255,92,120,.6); }
.phases { list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(4, minmax(0,1fr)); }
.phase { position:relative; overflow:hidden; border-radius:22px; background:linear-gradient(180deg, #1C1C20, #141416); border:1px solid var(--line); padding:26px 22px 24px; display:flex; flex-direction:column; gap:8px; min-height:340px; transition:transform .35s, border-color .35s; }
.phase:hover { transform:translateY(-4px); border-color:rgba(255,92,120,.45); }
.phase .num { position:absolute; right:-6px; top:-22px; font-family:var(--display); font-weight:900; font-size:150px; line-height:1; color:rgba(242,238,232,.07); pointer-events:none; }
.phase small { color:var(--amber-text); font-weight:700; font-size:13px; letter-spacing:.04em; }
.phase h3 { font-size:30px; }
.phase p { margin:0; color:var(--text2); font-size:15px; }
.ranks, .animals { margin-top:auto; padding-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.sash { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; padding:6px 12px 6px 8px; border-radius:999px; background:rgba(242,238,232,.06); border:1px solid var(--line); }
.sash::before { content:""; width:22px; height:6px; border-radius:3px; background:var(--s); transform:rotate(-12deg); }
.animals span { display:flex; flex-direction:column; font-size:12px; color:var(--muted); padding:6px 10px; border-radius:10px; background:rgba(242,238,232,.05); line-height:1.3; }
.animals b { color:var(--paper); font-size:13px; }
.rhythm { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:28px; }
.rhythm div { border-top:2px solid var(--jade); padding-top:12px; display:flex; flex-direction:column; }
.rhythm b { font-size:16px; } .rhythm span { color:var(--text2); font-size:14px; }

/* Freunde */
.friends { padding-top:120px; padding-bottom:120px; border-bottom:1px solid var(--line); }
.ticks { list-style:none; margin:4px 0; padding:0; display:flex; flex-direction:column; gap:12px; color:var(--text2); }
.ticks li { position:relative; padding-left:30px; }
.ticks li::before { content:""; position:absolute; left:0; top:.45em; width:16px; height:16px; border-radius:5px; background:var(--seal); transform:rotate(-7deg); box-shadow:inset 0 0 0 2px rgba(242,238,232,.2); }
.ticks b { color:var(--paper); }
.clipstage { position:relative; display:flex; justify-content:center; padding:30px 0; }
.clipstage .glow { position:absolute; top:50%; left:50%; width:90%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(127,184,160,.25), transparent 65%); }
.clipphone { position:relative; width:min(300px, 70vw); transform:rotate(3deg); }
.clipphone video { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:#000; }
.clipstage .c1 { left:4%; top:22%; } .clipstage .c2 { right:2%; bottom:18%; border-color:rgba(127,184,160,.6); }
.clipstage .c2 i { background:var(--jade); box-shadow:0 0 10px var(--jade); }

/* Alltag */
.daily { padding-top:120px; padding-bottom:110px; }
.bento { display:grid; gap:16px; grid-template-columns:repeat(6, minmax(0,1fr)); }
.tile { position:relative; overflow:hidden; border-radius:22px; background:var(--card); border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; gap:8px; grid-column:span 2; min-height:220px; transition:border-color .3s; }
.tile:hover { border-color:rgba(255,92,120,.4); }
.tile.t-watch, .tile.t-island { grid-column:span 3; }
.tile svg { width:44px; height:44px; fill:none; stroke:var(--amber); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:auto; }
.tile.t-health svg { stroke:#E07A62; } .tile.t-siri svg, .tile.t-cam svg { stroke:var(--jade); }
.tile h3 { margin:14px 0 0; font-size:19px; }
.tile p { margin:0; color:var(--text2); font-size:15px; }
.t-watch { background:radial-gradient(70% 90% at 100% 0%, rgba(255,92,120,.16), transparent 70%), var(--card); }
.island { margin-bottom:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:12px; padding:10px 14px 10px 12px; border-radius:999px; background:#000; border:1px solid rgba(242,238,232,.12); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.island .dot { width:24px; height:24px; border-radius:50%; background:url(/icon.png) center/cover; }
.island .ring2 { width:20px; height:20px; border-radius:50%; border:3px solid rgba(255,92,120,.25); border-top-color:var(--amber); }

/* Tarife */
.fair { padding-top:110px; padding-bottom:64px; border-top:1px solid var(--line); }
.plans { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-bottom:44px; }
.plan { border-radius:24px; padding:30px; background:var(--card); border:1px solid var(--line); }
.plan small { color:var(--muted); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.plan h3 { font-size:36px; margin:6px 0 18px; }
.plan ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.plan li { position:relative; padding-left:28px; color:var(--text2); }
.plan li::before { content:""; position:absolute; left:2px; top:.5em; width:12px; height:7px; border-left:2.5px solid var(--jade); border-bottom:2.5px solid var(--jade); transform:rotate(-45deg); }
.plan.gold { background:linear-gradient(160deg, rgba(217,180,106,.18), rgba(217,180,106,.03) 60%), var(--card); border-color:rgba(217,180,106,.6); box-shadow:0 0 0 4px rgba(217,180,106,.06), 0 30px 80px rgba(0,0,0,.4); }
.plan.gold small { color:var(--gold); } .plan.gold li::before { border-color:var(--gold); }
.faqsec { padding-top:24px; padding-bottom:96px; }

/* Finale */
.finale { position:relative; padding-top:170px; padding-bottom:170px; overflow:hidden; }
.finbg { position:absolute; inset:-10% 0; width:100%; height:120%; object-fit:cover; object-position:center 30%; opacity:.6; max-width:none; }
.finshade { position:absolute; inset:0; background:radial-gradient(50% 40% at 50% 55%, rgba(255,92,120,.18), transparent 70%), linear-gradient(180deg, #0B0B0D 0%, rgba(11,11,13,.3) 40%, rgba(11,11,13,.55) 75%, #0B0B0D 100%); }
.fintext { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.fintext h2 { font-size:clamp(40px, 6.4vw, 84px); max-width:13ch; }
.storebtn { min-height:62px; padding:0 34px; border-radius:16px; }
.storebtn > span { display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; font-size:22px; font-weight:700; }
.storebtn small { font-size:11px; font-weight:500; letter-spacing:.02em; }
.lanterns span { position:absolute; bottom:-30px; width:14px; height:18px; border-radius:6px 6px 8px 8px; background:radial-gradient(circle at 50% 60%, #FFD58A, #FF5C78 50%, #B8432F); box-shadow:0 0 22px 6px rgba(255,92,120,.45); opacity:0; }
.lanterns span:nth-child(1){left:12%;} .lanterns span:nth-child(2){left:24%;} .lanterns span:nth-child(3){left:41%;} .lanterns span:nth-child(4){left:63%;} .lanterns span:nth-child(5){left:78%;} .lanterns span:nth-child(6){left:90%;}

/* Fuß */
.foot { border-top:1px solid var(--line); padding-top:40px; padding-bottom:48px; color:var(--muted); font-size:14px; }
.footin { display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; }
.footin .brand img { width:30px; height:30px; border-radius:8px; }
.footin .brand .disp { font-size:18px; }
.footin p { margin:0; }
.footin nav { display:flex; flex-wrap:wrap; gap:8px 18px; margin-left:auto; }
.footin nav a { color:var(--muted); }
.footin nav a:hover { color:var(--paper); }

/* Erscheinen beim Scrollen (nur mit JS und ohne reduzierte Bewegung) */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s); }
  .js .rv.in { opacity:1; transform:none; }
  .js .p.rv { transform:translateY(34px) scale(.97); }
  .js .p.rv.in { transform:none; }
  .js .trackfill { transform:scaleX(0); transition:transform 2.2s cubic-bezier(.3,.7,.2,1) .2s; }
  .js .track.in .trackfill { transform:scaleX(1); }
  .ink { animation:inkin 1.4s .1s cubic-bezier(.2,.7,.2,1) both; }
  .mq { animation:mq 60s linear infinite; }
  .marquee:hover .mq { animation-play-state:paused; }
  .cue span { animation:cue 2s ease-in-out infinite; }
  .lanterns span { animation:lantern 12s linear infinite; }
  .lanterns span:nth-child(2){animation-delay:2s;} .lanterns span:nth-child(3){animation-delay:5s;} .lanterns span:nth-child(4){animation-delay:7s;} .lanterns span:nth-child(5){animation-delay:3.5s;} .lanterns span:nth-child(6){animation-delay:9s;}
  .island .ring2 { animation:spin 1.6s linear infinite; }
}
@keyframes inkin { from { opacity:0; filter:blur(14px); letter-spacing:.08em; } to { opacity:1; filter:blur(0); letter-spacing:-.01em; } }
@keyframes mq { to { transform:translateX(-50%); } }
@keyframes cue { 0% { transform:translateY(0); opacity:1; } 70% { transform:translateY(14px); opacity:0; } 100% { opacity:0; } }
@keyframes lantern { 0% { transform:translateY(0) translateX(0); opacity:0; } 10% { opacity:.9; } 100% { transform:translateY(-760px) translateX(30px); opacity:0; } }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 1000px) {
  .phases { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rhythm { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bento .tile, .bento .tile.t-watch, .bento .tile.t-island { grid-column:span 3; }
}
@media (max-width: 860px) {
  .herotext { padding-top:110px; padding-bottom:90px; }
  .kanji { font-size:96vw; left:-10vw; bottom:20%; }
  .cue { display:none; }
  .cine { min-height:auto; flex-direction:column; align-items:stretch; }
  .cinevid { position:relative; inset:auto; height:auto; aspect-ratio:16/10; object-position:center; }
  .cineshade { background:linear-gradient(180deg, #0B0B0D 0%, rgba(11,11,13,0) 15%, rgba(11,11,13,0) 30%, #0B0B0D 42%); }
  .cinetext { padding-top:0; margin-top:-40px; padding-bottom:80px; }
  .path, .friends, .daily { padding-top:88px; padding-bottom:88px; }
  .plans { grid-template-columns:minmax(0,1fr); }
  .footin nav { margin-left:0; }
  .clipstage .c1 { left:0; } .clipstage .c2 { right:0; }
}
@media (max-width: 560px) {
  .phases, .rhythm { grid-template-columns:minmax(0,1fr); }
  .phase { min-height:0; }
  .bento .tile, .bento .tile.t-watch, .bento .tile.t-island { grid-column:span 6; min-height:0; }
  .sechead { margin-bottom:32px; }
  .mq { font-size:17px; }
}

/* Kino auf breiten Schirmen: Video rechts, Text links daneben statt darüber */
@media (min-width: 861px) {
  .cine { min-height:min(calc(70vw * 9 / 16), 820px); align-items:center; }
  .cinevid { left:auto; right:0; width:70%; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 32%); mask-image:linear-gradient(90deg, transparent 0%, #000 32%); }
  .cineshade { background:linear-gradient(180deg, #0B0B0D 0%, rgba(11,11,13,0) 14%, rgba(11,11,13,0) 86%, #0B0B0D 100%); }
  .cinetext { padding-top:90px; padding-bottom:90px; }
  .cinetext > * { max-width:440px; }
}
.t-island { order:1; } .t-health { order:2; } .t-widget { order:3; } .t-siri { order:4; } .t-cam { order:5; }
.bento .tile.t-cam { grid-column:span 6; min-height:0; }
@media (max-width: 860px) {
  .hero .shade { background:radial-gradient(80% 50% at 70% 30%, rgba(255,92,120,.14), transparent 70%), linear-gradient(180deg, rgba(11,11,13,.45) 0%, rgba(11,11,13,.62) 30%, rgba(11,11,13,.86) 62%, #0B0B0D 100%); }
  .hero .fig { opacity:.42; }
}
@media (max-width: 560px) {
}
@media (min-width: 700px) { .top nav .pill.hide-s { display:inline-flex; } }
.pill .apple { width:18px; height:18px; flex:none; margin-top:-2px; }
.storebtn { gap:12px; }
.storebtn .apple { width:30px; height:30px; margin-top:-3px; }

/* Echte App-Screens als Galerie */
.appsec { padding-top:110px; padding-bottom:110px; border-top:1px solid var(--line); background:radial-gradient(50% 60% at 50% 100%, rgba(255,92,120,.08), transparent 70%), var(--ground); overflow:hidden; }
.apphead { flex-direction:row; align-items:flex-end; justify-content:space-between; gap:24px; }
.galnav { display:flex; gap:10px; flex:none; }
.galbtn { all:unset; box-sizing:border-box; cursor:pointer; width:48px; height:48px; border-radius:50%; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:20px; color:var(--paper); transition:background .25s, border-color .25s; }
.galbtn:hover { background:rgba(242,238,232,.1); border-color:rgba(242,238,232,.35); }
.galbtn:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.gallery { list-style:none; margin:0; display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(24px, calc((100vw - 1200px) / 2 + 24px)); padding:10px max(24px, calc((100vw - 1200px) / 2 + 24px)) 30px; scrollbar-width:none; }
.gallery::-webkit-scrollbar { display:none; }
.shot { flex:none; width:clamp(220px, 22vw, 280px); scroll-snap-align:start; display:flex; flex-direction:column; gap:6px; }
.shot .phone { position:relative; width:100%; transform:none; margin-bottom:14px; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.shot:hover .phone { transform:translateY(-8px); box-shadow:0 40px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,92,120,.35); }
.shot b { font-size:17px; }
.shot span { color:var(--text2); font-size:14px; line-height:1.45; }
@media (max-width: 560px) { .apphead { flex-direction:column; align-items:flex-start; } .galnav { display:none; } .shot { width:68vw; } }

/* Was du freischaltest: Figuren, Schärpen der Ränge, Outfits, Auren und Deko (Daten aus der App). Auf dem Handy wischbar. */
.unlock { padding-top:110px; padding-bottom:30px; border-top:1px solid var(--line); background:radial-gradient(45% 40% at 85% 10%, rgba(127,184,160,.08), transparent 70%), var(--ground); overflow:hidden; }
.unl-block { margin-bottom:56px; }
.unl-h { font-family:var(--display); font-weight:700; font-size:22px; margin:0 0 18px; }
.unl-note { margin:16px 0 0; color:var(--text2); font-size:15px; max-width:44em; }
.unl-figs { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:16px; }
.unl-fig { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; }
.unl-fig img { width:100%; max-width:120px; aspect-ratio:1; object-fit:cover; border-radius:50%; border:3px solid var(--jade); margin-bottom:8px; }
.unl-fig.yin img { border-color:#E07A62; }
.unl-fig b { font-size:15px; }
.unl-fig span { color:var(--text2); font-size:13px; line-height:1.35; }
.unl-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:16px; }

.unl-item { display:flex; flex-direction:column; gap:4px; }
.unl-item .pic { position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:radial-gradient(60% 50% at 50% 60%, color-mix(in srgb, var(--a1, #FF5C78) 45%, transparent), color-mix(in srgb, var(--a2, #1A1A1D) 35%, transparent) 60%, transparent 85%), var(--card); display:flex; align-items:flex-end; justify-content:center; padding:14px 10px 0; margin-bottom:10px; transition:border-color .3s; }
.unl-item:hover .pic { border-color:rgba(255,92,120,.4); }
.unl-item.aura .pic { background:radial-gradient(50% 55% at 50% 55%, var(--a1) 0%, color-mix(in srgb, var(--a2) 70%, transparent) 45%, transparent 75%), var(--card); }
.unl-item.deco .pic { background:radial-gradient(55% 30% at 50% 92%, rgba(255,92,120,.18), transparent 80%), var(--card); padding:18px 18px 12px; align-items:center; }
.unl-item img { width:auto; max-width:100%; max-height:100%; object-fit:contain; }
.unl-item.deco img { max-height:88%; }
.unl-item b { font-size:16px; }
.unl-item span { color:var(--text2); font-size:14px; line-height:1.4; }
.unl-item em { display:block; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--jade); }
.unl-item.shop em { color:var(--amber-text); }
.unl-facts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; margin-top:8px; }
@media (max-width: 1000px) {
  .unl-figs { grid-template-columns:repeat(4, minmax(0,1fr)); row-gap:24px; }
  .unl-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .unlock { padding-top:84px; }
  /* Figuren und Kacheln als Wischleiste innerhalb der Seitenbreite */
  .unl-figs, .unl-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-24px; padding:0 24px 6px; scroll-padding-inline:24px; scrollbar-width:none; }
  .unl-figs::-webkit-scrollbar, .unl-grid::-webkit-scrollbar { display:none; }
  .unl-fig { flex:none; width:96px; scroll-snap-align:start; }
  .unl-item { flex:none; width:40vw; scroll-snap-align:start; }
  .unl-facts { grid-template-columns:1fr; }
}

/* Einstieg zum Pferdestand-Test im Browser (/pferdestand, /en/horse-stance) */
.mbteaser { padding-top:104px; padding-bottom:104px; }
.mbt-card { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:stretch; border-radius:16px; overflow:hidden; background:radial-gradient(60% 80% at 100% 0%, rgba(255,92,120,.12), transparent 70%), var(--card); border:1px solid var(--line); }
.qr .mbt-card img { width:100%; height:100%; min-height:300px; object-fit:cover; object-position:center 32%; }
.mbt-text { padding:36px 40px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:16px; }
.mbt-text h2 { font-size:clamp(28px, 3.4vw, 42px); max-width:16ch; }
.mbt-text .lead { font-size:17px; }
.mbt-text .pill { margin-top:4px; }
@media (max-width: 860px) {
  .mbteaser { padding-top:72px; padding-bottom:88px; }
  .mbt-card { grid-template-columns:minmax(0,1fr); }
  .qr .mbt-card img { min-height:0; height:auto; aspect-ratio:16/10; }
  .mbt-text { padding:24px 22px 28px; }
}

/* Zahlen unter dem Aufmacher */
.proof { background:linear-gradient(180deg, #121214, var(--ground)); border-bottom:1px solid var(--line); padding:64px 0 60px; }
.proofin { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.pf { display:flex; flex-direction:column; gap:10px; padding:4px 28px; border-left:1px solid var(--line); }
.pf:first-child { border-left:0; padding-left:0; }
.pf b { font-size:clamp(48px, 5.6vw, 76px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; background:linear-gradient(180deg, #FBE3B0 0%, var(--gold) 55%, #A9772E 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pf span { color:var(--text2); font-size:15px; line-height:1.5; max-width:22em; }
.extras { margin:28px 0 0; color:var(--text2); font-size:16px; line-height:1.6; max-width:52em; }
.extras b { color:var(--paper); }
@media (max-width: 860px) {
  .proof { padding:44px 0 40px; }
  .proofin { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:30px; }
  .pf { padding:0 0 0 18px; }
  .pf:nth-child(odd) { border-left:0; padding-left:0; }
  .pf span { font-size:14px; }
}

/* Kapitel 6: Manga-Panel statt Handy */
.k6panel { position:relative; z-index:1; margin:0; width:min(360px, 76vw); border:5px solid #000; outline:1px solid rgba(242,238,232,.22); outline-offset:6px; transform:rotate(2deg); box-shadow:0 30px 70px rgba(0,0,0,.55); background:#000; }
.k6panel img { display:block; width:100%; height:auto; }

/* Lern-Modus: Foto füllt das Kamerabild, Skelett liegt passgenau darüber (gleiches Seitenverhältnis 896:1120) */
.cam:has(.photo) { aspect-ratio:896/1120; }
.cam:has(.photo) .hint { left:12px; top:12px; transform:none; }
.cam .body.photo svg { z-index:2; }
.cam .body.photo { left:0; right:0; top:0; bottom:0; height:100%; width:100%; aspect-ratio:auto; transform:none; }
.cam .body.photo img { opacity:1; object-fit:cover; }
.cam .body.photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,13,.35), transparent 25%, transparent 80%, rgba(11,11,13,.4)); pointer-events:none; }
.cam .aitag { position:absolute; left:12px; bottom:12px; z-index:3; font-size:11px; color:rgba(242,238,232,.75); background:rgba(11,11,13,.6); padding:3px 8px; border-radius:999px; }

/* Pfad, Hof, Belohnungen als Tabs (weniger Scrollen). Ohne JS stehen alle drei untereinander. */
.tabsec { padding:104px 0 0; border-top:1px solid var(--line); scroll-margin-top:-40px; }
.tabhead { display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
.tabs { display:inline-flex; gap:6px; padding:6px; max-width:100%; overflow-x:auto; border-radius:999px; background:var(--card); border:1px solid var(--line); scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { all:unset; box-sizing:border-box; cursor:pointer; padding:12px 24px; border-radius:999px; font-family:var(--body); font-weight:700; font-size:15px; color:var(--text2); white-space:nowrap; transition:background .25s, color .25s; }
.tab:hover { color:var(--paper); }
.tab[aria-selected="true"] { background:var(--paper); color:var(--ink); }
.tab:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
.tabbed [data-tabpanel] { padding-top:56px !important; border-top:0 !important; }
.tabbed [data-tabpanel][hidden] { display:none !important; }
@media (max-width: 860px) {
  .tabsec { padding-top:80px; }
  .tabs { gap:2px; padding:4px; }
  .tab { padding:9px 11px; font-size:13px; }
  .tabbed [data-tabpanel] { padding-top:40px !important; }
}

/* Hero: Live-Kamera-Karte mit echten Personen (zeigt, dass es echtes Training ist) */
.livecard { position:absolute; z-index:4; right:3%; bottom:8%; width:clamp(240px, 23vw, 340px); aspect-ratio:600/750; border-radius:22px; overflow:hidden; background:#000; border:1px solid rgba(242,238,232,.28); box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 6px rgba(11,11,13,.35); transform:rotate(2.5deg); }
.lc-slide { position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
.lc-slide.on { opacity:1; }
.lc-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.lc-slide svg { position:absolute; inset:0; width:100%; height:100%; }
.lc-slide svg path { fill:none; stroke:#7FB8A0; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; opacity:.95; }
.lc-slide svg circle { fill:#F2EEE8; stroke:#7FB8A0; stroke-width:4; }
.lc-name { position:absolute; left:12px; right:12px; bottom:12px; font-size:13px; font-weight:700; color:var(--paper); background:rgba(11,11,13,.72); padding:5px 9px; border-radius:999px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-live { position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--paper); background:rgba(11,11,13,.72); padding:4px 8px; border-radius:999px; }
.lc-live i { width:6px; height:6px; border-radius:50%; background:#E5484D; box-shadow:0 0 8px #E5484D; }
.lc-ok { position:absolute; left:10px; top:36px; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--paper); background:rgba(11,11,13,.72); padding:4px 9px 4px 4px; border-radius:999px; }
.lc-ok b { width:16px; height:16px; border-radius:50%; background:var(--jade); color:var(--ground); display:inline-flex; align-items:center; justify-content:center; font-size:10px; }
.lc-ai { position:absolute; right:8px; top:10px; font-size:9px; color:rgba(242,238,232,.7); background:rgba(11,11,13,.55); padding:2px 6px; border-radius:999px; }
@media (prefers-reduced-motion: no-preference) {
  .lc-live i { animation:lcblink 1.6s ease-in-out infinite; }
  @keyframes lcblink { 50% { opacity:.25; } }
}
@media (max-width: 860px) {
  .hero .herotext { padding-top:calc(76px + min(46vw, 190px) * 1.25 + 28px); }
  .livecard { top:76px; bottom:auto; right:16px; width:min(46vw, 190px); border-radius:18px; transform:rotate(2deg); }
  .lc-ai { font-size:9px; }
  .lc-name { font-size:12px; }
}

/* Ruhigere Fassung (Oktober 2026): weniger Spielerei, gleiche Gestaltungs-DNA (Farben, Schriften, Manga, Kino-Bilder) */
.hero .enso { opacity:.4; }
.hero .enso path { stroke-width:10; }
.livecard, .k6panel, .clipphone { transform:none; }
.phone.back { transform:translateX(-46%); }
.phone.front { transform:translateX(40%) translateY(24px); }
.vs { transform:translate(-50%,-50%); }
.ticks li::before { transform:none; border-radius:50%; width:10px; height:10px; top:.6em; }
@media (prefers-reduced-motion: no-preference) {
  .hero .bg { animation:none; }
}
@media (max-width: 860px) {
  .livecard { transform:none; }
}

/* Hero, moderne Fassung: zentrierte Aussage, darunter der Avatar zwischen zwei echten Trainierenden */
.hero2 { position:relative; overflow:hidden; padding-top:118px; background:var(--ground); text-align:center; isolation:isolate; }
.h2bg { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 45%; opacity:.32; }
.h2shade { position:absolute; inset:0; z-index:-1; background:radial-gradient(55% 45% at 50% 78%, rgba(255,92,120,.18), transparent 70%), linear-gradient(180deg, rgba(11,11,13,.75) 0%, rgba(11,11,13,.35) 45%, var(--ground) 100%); }
.h2text { display:flex; flex-direction:column; align-items:center; gap:20px; }
.h2eyebrow { display:inline-flex; align-items:center; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(26,26,29,.55); backdrop-filter:blur(10px); font-size:14px; font-weight:500; color:var(--text2); }
.hero2 h1 { font-size:clamp(42px, 5.6vw, 84px); line-height:1.02; letter-spacing:-.015em; }
.hero2 .lead { max-width:34em; text-align:center; }
.hero2 .ctas { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px; }
.h2stage { position:relative; max-width:1200px; height:clamp(380px, calc(100svh - 440px), 620px); margin:24px auto 0; display:flex; justify-content:center; align-items:flex-end; }
.h2stage::after { content:""; position:absolute; left:0; right:0; bottom:0; height:90px; z-index:4; background:linear-gradient(180deg, transparent, var(--ground)); pointer-events:none; }
.h2fig { position:relative; z-index:2; height:100%; }
.h2fig img { display:block; height:100%; width:auto; filter:drop-shadow(0 0 50px rgba(255,92,120,.22)) drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
.h2cam { position:absolute; z-index:3; bottom:12%; margin:0; width:clamp(170px, 17vw, 240px); aspect-ratio:600/750; border-radius:22px; overflow:hidden; background:#000; border:1px solid rgba(242,238,232,.2); box-shadow:0 30px 70px rgba(0,0,0,.55); }
.h2cam.left { left:calc(50% - 470px); } .h2cam.right { right:calc(50% - 470px); }
.h2cam img { width:100%; height:100%; object-fit:cover; display:block; }
.h2cam svg { position:absolute; inset:0; width:100%; height:100%; }
.h2cam svg path { fill:none; stroke:#7FB8A0; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.h2cam svg circle { fill:#F2EEE8; stroke:#7FB8A0; stroke-width:4; }
.h2cam figcaption { position:absolute; left:10px; right:10px; bottom:10px; font-size:12px; font-weight:700; color:var(--paper); background:rgba(11,11,13,.72); padding:5px 9px; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h2ai { position:absolute; right:8px; top:8px; font-size:9px; color:rgba(242,238,232,.75); background:rgba(11,11,13,.55); padding:2px 6px; border-radius:999px; }
@media (max-width: 860px) {
  .hero2 { padding-top:112px; }
  .hero2 .ctas { flex-direction:column; align-items:stretch; width:100%; max-width:320px; }
  .h2stage { height:min(118vw, 470px); margin-top:36px; }
  .h2fig { height:86%; }
  .h2cam { width:31vw; bottom:6%; border-radius:14px; }
  .h2cam.left { left:12px; } .h2cam.right { right:12px; }
  .hero2 .h2stage { height:min(118vw, 470px); }
  .h2cam figcaption { font-size:9px; left:5px; right:5px; bottom:5px; padding:3px 5px; }
  .h2ai { font-size:7px; right:5px; top:5px; padding:1px 4px; }
}

/* Hero: App-Ansicht im Handy statt loser Karten */
.h2phone { position:absolute; z-index:3; bottom:0; left:calc(50% - 420px); height:94%; aspect-ratio:9/19; border-radius:40px; border:8px solid #26262A; background:#0B0B0D; overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(242,238,232,.08); }
.h2phone::after { content:""; position:absolute; top:10px; left:50%; width:32%; aspect-ratio:3.3; transform:translateX(-50%); border-radius:999px; background:#000; }
.ph-screen { position:absolute; inset:0; padding:46px 12px 12px; display:flex; flex-direction:column; gap:8px; text-align:left; }
.ph-sub { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--jade); padding-inline:4px; }
.ph-slide { position:absolute; left:12px; right:12px; top:64px; opacity:0; transition:opacity 1s ease; }
.ph-slide.on { opacity:1; }
.ph-title { display:block; font-family:var(--display); font-weight:900; font-size:17px; line-height:1.2; color:var(--paper); padding:0 4px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-cam { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:600/750; background:#000; }
.ph-cam img { width:100%; height:100%; object-fit:cover; display:block; }
.ph-cam svg { position:absolute; inset:0; width:100%; height:100%; }
.ph-cam svg path { fill:none; stroke:#7FB8A0; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.ph-cam svg circle { fill:#F2EEE8; stroke:#7FB8A0; stroke-width:4; }
.ph-stats { position:absolute; left:12px; right:12px; bottom:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ph-stats > div { border-radius:14px; background:rgba(242,238,232,.06); padding:9px 10px; text-align:left; }
.ph-stats b { display:block; font-family:var(--display); font-weight:900; font-size:20px; color:var(--paper); line-height:1; }
.ph-stats > div:first-child b { color:var(--jade); }
.ph-stats small { font-size:10px; color:var(--text2); }
.hero2 .h2fig { translate:14% 0; }
@media (max-width: 860px) {
  .h2phone { left:4%; height:88%; border-width:6px; border-radius:30px; }
  .ph-screen { padding:34px 8px 8px; }
  .ph-slide { left:8px; right:8px; top:50px; }
  .ph-title { font-size:12px; padding-bottom:6px; }
  .ph-sub { font-size:8px; }
  .ph-stats { left:8px; right:8px; bottom:8px; gap:5px; }
  .ph-stats > div { padding:6px; border-radius:10px; }
  .ph-stats b { font-size:14px; } .ph-stats small { font-size:8px; }
  .hero2 .h2fig { translate:22% 0; }
}
/* Handy: Inhalte im Fluss statt absolut, damit nichts überlappt */
.h2phone { height:auto; width:clamp(230px, 19vw, 280px); bottom:-14%; }
.ph-screen { position:relative; display:grid; grid-template-columns:100%; align-content:start; gap:10px; padding:44px 12px 14px; }
.ph-sub { grid-row:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-slide { position:static; grid-row:2; grid-column:1; }
.ph-title { font-size:16px; }
.ph-stats { position:static; grid-row:3; }
@media (max-width: 860px) {
  .h2phone { width:42vw; bottom:-10%; height:auto; }
  .ph-screen { padding:32px 8px 10px; gap:6px; }
  .ph-title { font-size:12px; }
}
.h2phone { bottom:auto; top:64px; }
@media (max-width: 860px) { .h2phone { top:40px; bottom:auto; } }

/* Hero: zwei gleich große Kacheln, links echtes Training, rechts der Avatar */
.h2duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1000px; margin:56px auto 0; padding-bottom:96px; }
.duo-tile { position:relative; aspect-ratio:4/4.6; border-radius:28px; overflow:hidden; background:#121214; border:1px solid var(--line); box-shadow:0 40px 90px rgba(0,0,0,.5); }
.duo-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.duo-slide.on { opacity:1; }
.duo-slide img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
.duo-slide svg { position:absolute; inset:0; width:100%; height:100%; }
.duo-slide svg path { fill:none; stroke:#7FB8A0; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.duo-slide svg circle { fill:#F2EEE8; stroke:#7FB8A0; stroke-width:3; }
.duo-av { background:#0b0b0d; }
.duo-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 40%; opacity:.55; }
.duo-av::before { content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(60% 50% at 50% 70%, rgba(255,92,120,.25), transparent 70%), linear-gradient(180deg, rgba(11,11,13,.2), rgba(11,11,13,.1) 50%, rgba(11,11,13,.85)); }
.duo-fig { position:absolute; z-index:2; left:50%; bottom:0; height:84%; transform:translateX(-50%); }
.duo-fig img { height:100%; width:auto; display:block; filter:drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.duo-cap { position:absolute; z-index:3; left:18px; right:18px; bottom:16px; display:flex; flex-direction:column; gap:2px; text-align:left; font-size:13px; color:var(--text2); }
.duo-cap b { font-family:var(--display); font-weight:900; font-size:20px; color:var(--paper); }
.duo-cam::after { content:""; position:absolute; inset:auto 0 0 0; height:40%; z-index:2; background:linear-gradient(180deg, transparent, rgba(11,11,13,.85)); pointer-events:none; }
.duo-slide .duo-cap { z-index:3; }
.duo-cam .h2ai { z-index:4; right:14px; top:14px; font-size:10px; }
@media (max-width: 860px) {
  .h2duo { gap:10px; margin-top:36px; padding-bottom:64px; }
  .duo-tile { border-radius:18px; aspect-ratio:3/4.4; }
  .duo-cap { left:10px; right:10px; bottom:10px; font-size:10px; }
  .duo-cap b { font-size:14px; }
}
.qr .duo-av .duo-bg { height:100%; max-width:none; }
.duo-fig { height:92%; }
.qr .duo-fig img { height:100%; width:auto; max-width:none; }
.qr .duo-slide img { height:100%; }

/* Hero (Entwurf B): Text links, rechts groß der Avatar, klein darüber das echte Training */
.hero3 { position:relative; min-height:100svh; display:flex; align-items:center; padding:120px 0 64px; background:radial-gradient(45% 55% at 78% 55%, rgba(255,92,120,.14), transparent 70%), var(--ground); overflow:hidden; }
.h3grid { display:grid; grid-template-columns:1.05fr .95fr; gap:4vw; align-items:center; width:100%; }
.h3text { display:flex; flex-direction:column; gap:26px; }
.h3ey { font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-text); }
.hero3 h1 { font-size:clamp(44px, 5.4vw, 84px); line-height:1.02; letter-spacing:-.01em; }
.hero3 h1 em { font-style:normal; color:var(--amber-text); }
.hero3 .lead { max-width:30em; }
.hero3 .ctas { display:flex; flex-wrap:wrap; gap:12px; }
.h3stats { display:flex; gap:36px; margin-top:6px; }
.h3stats b { display:block; font-size:30px; line-height:1.1; color:var(--paper); }
.h3stats span { font-size:14px; color:var(--text2); }
.h3vis { position:relative; height:min(76svh, 720px); }
.h3big { position:absolute; right:0; top:0; height:100%; aspect-ratio:4/5; max-width:100%; border-radius:32px; overflow:hidden; background:#0b0b0d; box-shadow:0 40px 90px rgba(0,0,0,.6); }
.qr .h3big .h3bg { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:60% 40%; opacity:.6; }
.h3big::before { content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(60% 45% at 50% 72%, rgba(255,92,120,.25), transparent 70%), linear-gradient(180deg, rgba(11,11,13,.15), transparent 40%, rgba(11,11,13,.55)); }
.h3big picture { position:absolute; z-index:2; left:50%; bottom:0; height:90%; transform:translateX(-50%); }
.qr .h3big .h3fig { height:100%; width:auto; max-width:none; filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
.h3small { position:absolute; z-index:3; left:0; bottom:7%; width:38%; aspect-ratio:4/5; margin:0; border-radius:22px; overflow:hidden; border:1px solid rgba(242,238,232,.2); box-shadow:0 30px 70px rgba(0,0,0,.65); background:#121214; }
.qr .h3small img { width:100%; height:100%; object-fit:cover; }
.h3small figcaption { position:absolute; left:12px; bottom:12px; font-size:12px; font-weight:700; color:var(--paper); background:rgba(11,11,13,.72); padding:5px 11px; border-radius:999px; }
.h3ai { position:absolute; right:10px; top:10px; font-size:10px; color:rgba(242,238,232,.75); background:rgba(11,11,13,.55); padding:2px 7px; border-radius:999px; }
@media (max-width: 860px) {
  .hero3 { min-height:auto; padding:104px 0 56px; }
  .h3grid { grid-template-columns:1fr; gap:40px; }
  .hero3 .ctas { flex-direction:column; align-items:stretch; max-width:340px; }
  .h3stats { gap:28px; }
  .h3vis { height:auto; aspect-ratio:1/1.08; }
  .h3big { left:12%; right:0; width:auto; aspect-ratio:auto; border-radius:24px; }
  .h3small { width:44%; bottom:6%; border-radius:16px; }
}
/* Desktop wie mobil: echte Karte weiter links heraus, tiefer, größer */
@media (min-width: 861px) {
  .h3big { left:14%; right:0; width:auto; aspect-ratio:auto; }
  .h3small { left:0; bottom:-2%; width:44%; }
}
.h3skel { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.h3skel path { fill:none; stroke:#7FB8A0; stroke-width:12; stroke-linecap:round; stroke-linejoin:round; opacity:.95; }
.h3skel circle { fill:#F2EEE8; stroke:#7FB8A0; stroke-width:7; }
.h3small figcaption, .h3ai { z-index:2; }
/* Offizielles EU-Icon für KI-generierte Inhalte (Code of Practice, Juni 2026), unten rechts im Bild */
.qr img.euai { position:absolute; z-index:2; right:12px; bottom:12px; width:auto; height:22px; max-width:none; filter:drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
.cam .aitag { left:auto; right:12px; bottom:12px; top:auto; background:none; padding:0; }
.cam .aitag img.euai { position:static; height:22px; }
@media (min-width: 861px) { .h3small { width:52%; bottom:-4%; } }
@media (max-width: 860px) { .h3small { width:52%; } .qr img.euai { height:18px; right:8px; bottom:8px; } }