/* App-Seiten (Entwurf): Hero mit schwebenden Geräten, Rundgang, Lebensbereiche, Galerie, Funktionen, ax5-Netz */
.sec[id]::before { display: none; }
.app-hero { min-height: calc(100vh - 20px); }
.hero-text .pkg { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; color: var(--dim); font-size: 14px; } .pkg img { border-radius: 10px; }
.cta { align-items: center; } .play img { height: 52px; width: auto; display: block; transition: transform .25s; } .play:hover img { transform: translateY(-2px); }
.soon { display: inline-flex; align-items: center; height: 50px; padding: 0 20px; border: 1px solid var(--line2); border-radius: 13px; background: var(--glass); backdrop-filter: blur(10px); color: #fff; font-size: 14px; } .soon.big { height: 56px; padding: 0 28px; font-size: 16px; }
.center-cta { justify-content: center; margin-top: 44px; }

/* Geräte */
.phone { position: relative; width: 100%; aspect-ratio: 1080 / 2400; border-radius: 9% / 4.1%; padding: 2.2%; background: linear-gradient(160deg, #2b2f6e, #0d0f3a); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 40px 80px -24px rgba(5,5,60,.7), inset 0 1px rgba(255,255,255,.2); }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 7.4% / 3.4%; overflow: hidden; background: #0b0c33; } .phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hstage { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; margin: 0 auto; transform-style: preserve-3d; transform: perspective(1400px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg)); transition: transform .35s ease; }
.hstage .phone { position: absolute; width: 38%; } .hstage .p1 { left: 20%; top: 4%; z-index: 2; animation: fl1 8s ease-in-out infinite; } .hstage .p2 { right: 8%; top: 16%; width: 34%; animation: fl2 9s ease-in-out infinite; opacity: .94; }
@keyframes fl1 { 50% { transform: translateY(-16px) rotate(-1.2deg); } } @keyframes fl2 { 50% { transform: translateY(14px) rotate(1.4deg); } }
.hstage .ring { position: absolute; inset: 6%; border: 1px dashed rgba(235,230,255,.3); border-radius: 50%; animation: spin 60s linear infinite; } .hstage .r2 { inset: 17%; animation-duration: 90s; animation-direction: reverse; border-color: rgba(235,230,255,.2); }
.hstage .dots { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(130,115,255,.45), transparent 62%); filter: blur(30px); animation: breathe 7s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wide-h { aspect-ratio: 1.15 / 1; display: grid; place-items: center; } .wide-h .win { position: relative; width: 94%; animation: fl1 9s ease-in-out infinite; } .hstage .win.p1 { position: relative; left: auto; top: auto; }
.win { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.3); background: #0d0f3a; box-shadow: 0 40px 80px -24px rgba(5,5,60,.7); } .wbar { display: flex; gap: 6px; padding: 10px 12px; background: rgba(255,255,255,.08); } .wbar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); }
.win .shot img { width: 100%; display: block; }

/* Einleitung */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 70px); margin-top: 8px; } .two-col p { margin: 0; color: var(--dim); font-size: 17px; }
.sec { opacity: 1; }

/* Rundgang */
.tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 90px); align-items: center; margin-top: 44px; }
.steps { display: grid; gap: 14px; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; text-align: left; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); backdrop-filter: blur(14px); opacity: .62; transition: opacity .4s, border-color .4s, background .4s, transform .4s; overflow: hidden; }
.step:hover { opacity: .9; } .step.on { opacity: 1; border-color: var(--line2); background: var(--glass2); transform: translateX(6px); }
.step .no { font: 600 13px var(--head); color: var(--accent); padding-top: 3px; } .step .st b { display: block; font: 600 20px var(--head); letter-spacing: -.01em; margin-bottom: 4px; } .step .st span { color: var(--dim); font-size: 15px; line-height: 1.6; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; } .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a70ff, #fff); }
.step.on .bar i, .ctab.on .bar i { animation: prog 5.2s linear forwards; } .ctab.on .bar i { animation-duration: 6.5s; } .tour.hold .step.on .bar i, .ctx.hold .ctab.on .bar i { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }
.stage { position: relative; display: grid; place-items: center; } .stage .glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(140,120,255,.5), transparent 68%); filter: blur(34px); animation: breathe 7s ease-in-out infinite; }
.stage .phone.big { width: min(300px, 62%); animation: fl1 9s ease-in-out infinite; } .stage.wide .win { position: relative; width: 100%; }
.shot { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease, transform .7s ease; transform: scale(1.03); } .shot.on { opacity: 1; transform: none; } .phone .screen .shot img { width: 100%; height: 100%; object-fit: cover; }
.stage.wide .win { display: grid; } .stage.wide .win .shot { position: relative; grid-area: 2 / 1; } .stage.wide .win .wbar { grid-area: 1 / 1; }

/* Galerie */
.gal { display: flex; gap: 26px; overflow-x: auto; padding: 14px 4px 30px; scroll-snap-type: x proximity; cursor: grab; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; user-select: none; } .gal.drag { cursor: grabbing; scroll-snap-type: none; }
.gi { margin: 0; flex: none; width: 210px; scroll-snap-align: start; text-align: center; transition: transform .35s; } .gi:hover { transform: translateY(-8px); } .gi figcaption { margin-top: 16px; font-size: 14px; color: var(--dim); line-height: 1.5; }
.gal img { -webkit-user-drag: none; pointer-events: none; }
.gal.panel .gi { width: 250px; } .pnl { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.28); background: #fff; box-shadow: 0 30px 60px -24px rgba(5,5,60,.7); } .pnl img { width: 100%; display: block; }
.rv.gi { transition: opacity .7s, transform .7s; }

/* Funktionen */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 36px; } .app.feat { padding: 26px 28px; } .app.feat p { margin: 8px 0 0; }
.checks { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 4px 40px; }
.checks li { position: relative; padding: 11px 0 11px 34px; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(248,247,244,.92); font-size: 15px; opacity: 0; transform: translateX(-14px); transition: opacity .6s, transform .6s; transition-delay: calc(var(--i) * 70ms); } .checks li.in { opacity: 1; transform: none; }
.checks li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 14px; height: 8px; margin-top: -7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) scale(0); transition: transform .5s .25s; } .checks li.in::before { transform: rotate(-45deg) scale(1); }
.legal { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; color: var(--dim); } .legal a { border-bottom: 1px solid rgba(255,255,255,.35); } .legal a:hover { color: #fff; } .legal code { color: #fff; font-size: 13px; }

/* Übersicht: Lebensbereiche */
.ctx { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; margin-top: 40px; }
.ctabs { display: grid; align-content: start; gap: 12px; } .ctab { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); backdrop-filter: blur(12px); opacity: .62; overflow: hidden; transition: opacity .4s, background .4s, border-color .4s; } .ctab.on { opacity: 1; background: var(--glass2); border-color: var(--line2); } .ctab .no { font: 600 13px var(--head); color: var(--accent); } .ctab b { font: 600 18px var(--head); }
.cstage { position: relative; min-height: 440px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line2); }
.cbg { position: absolute; inset: -2%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; animation: ken 22s ease-in-out infinite alternate; } .cbg.on { opacity: 1; } @keyframes ken { to { transform: scale(1.08) translate(-1%, -1%); } }
.cshade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,14,90,.82), rgba(14,14,90,.35) 70%, rgba(14,14,90,.1)); }
.cpanel { position: absolute; inset: 0; padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; max-width: 560px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .6s, transform .6s; } .cpanel.on { opacity: 1; transform: none; pointer-events: auto; }
.cpanel h3 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; } .cpanel p { color: rgba(248,247,244,.9); margin: 0 0 20px; } .cpanel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .cpanel li { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,10,70,.45); backdrop-filter: blur(10px); font-size: 14.5px; } .cpanel li b { display: block; color: var(--accent); font: 600 13px var(--head); margin-bottom: 2px; }

/* ax5-Netz und App-Karten */
.hub { position: relative; height: clamp(320px, 42vw, 460px); margin-top: 26px; } .hub canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hubnote { text-align: center; margin: 0; color: var(--dim); font-size: 14px; letter-spacing: .06em; }
.apps.four { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } a.app { color: inherit; } .chips.mini { margin: 4px 0 18px; gap: 8px; } .chips.mini li { padding: 5px 12px; font-size: 13px; }
.app.next { border-style: dashed; } .nextic { width: 64px; height: 64px; border-radius: 17px; margin-bottom: 18px; display: grid; place-items: center; border: 1px dashed rgba(255,255,255,.55); font-size: 30px; color: rgba(255,255,255,.8); }
.apps .app.rv { opacity: 0; transition: opacity .7s, transform .7s, border-color .3s, background .3s; } .apps .app.rv.in { opacity: 1; }
.feats .app.rv { opacity: 0; transition: opacity .7s, transform .35s, border-color .3s, background .3s; } .feats .app.rv.in { opacity: 1; }
.gi.rv { opacity: 0; } .gi.rv.in { opacity: 1; }

@media (max-width: 960px) { .tour, .ctx, .two-col { grid-template-columns: 1fr; } .ctabs { grid-auto-flow: column; overflow-x: auto; } .hstage { max-width: 440px; } .step.on { transform: none; } .cstage { min-height: 520px; } }
@media (prefers-reduced-motion: reduce) { .hstage .p1, .hstage .p2, .stage .phone.big, .wide-h .win, .ring, .dots, .glow, .cbg { animation: none; } .checks li, .rv { opacity: 1 !important; transform: none !important; } .checks li::before { transform: rotate(-45deg) scale(1); } }
.hstage .win .shot { position: relative; opacity: 1; transform: none; }
.foot .links { flex-wrap: wrap; align-items: center; } .foot .pk { opacity: .75; font-size: 13px; } .foot .pk code { color: #fff; }

/* Handys: Metallrahmen, schwarzer Rand, Kamera-Loch, Glasglanz, Tasten */
.phone { padding: 0; border: 0; border-radius: 12% / 5.4%; background: linear-gradient(135deg, #c9cce0 0%, #6d7090 14%, #2b2e4d 38%, #14162c 62%, #5a5d7c 86%, #b3b6cc 100%); box-shadow: 0 2px 0 rgba(255,255,255,.28) inset, 0 -2px 0 rgba(0,0,0,.5) inset, 0 50px 70px -28px rgba(3,3,50,.85), 0 18px 30px -12px rgba(3,3,50,.6); }
.phone::before { content: ""; position: absolute; inset: 1.9%; border-radius: 10.4% / 4.7%; background: #04050d; box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset; }
.phone .screen { position: absolute; inset: 3.8%; width: auto; height: auto; border-radius: 8.2% / 3.7%; background: #04050d; }
.phone .screen::before { content: ""; position: absolute; z-index: 4; top: 1.5%; left: 50%; width: 3.6%; aspect-ratio: 1; margin-left: -1.8%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3050, #05060d 55%); box-shadow: 0 0 0 1.5px #0b0c18; }
.phone .screen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 22%, transparent 38%), linear-gradient(0deg, rgba(255,255,255,.05), transparent 14%); }
.pb { position: absolute; z-index: 5; width: 1.1%; border-radius: 2px; background: linear-gradient(90deg, #8f92ab, #3a3d58); }
.pb1 { right: -.6%; top: 22%; height: 9%; } .pb2 { left: -.6%; top: 18%; height: 6%; } .pb3 { left: -.6%; top: 26%; height: 11%; }

/* Galerie läuft von selbst; Klick öffnet die vergrößerte Ansicht */
.gal { scroll-snap-type: none; padding-left: 0; padding-right: 0; scrollbar-width: none; } .gal::-webkit-scrollbar { display: none; } .gi { cursor: zoom-in; } .gal.drag .gi { cursor: grabbing; }
.lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(8,8,60,.82); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .3s; } .lb.on { opacity: 1; pointer-events: auto; }
.lb figure { margin: 0; text-align: center; transform: scale(.94); transition: transform .35s; } .lb.on figure { transform: scale(1); }
.lb img { max-height: 82vh; max-width: min(88vw, 520px); border-radius: 26px; box-shadow: 0 50px 90px -20px rgba(3,3,50,.9), 0 0 0 1px rgba(255,255,255,.25); display: block; margin: 0 auto; } .lb figcaption { margin-top: 18px; color: #fff; font-size: 15px; }
.lbx, .lbn { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line2); background: var(--glass2); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; } .lbx { top: 22px; right: 22px; } .lbn { top: 50%; margin-top: -23px; } .lbp { left: clamp(10px, 4vw, 50px); } .lbf { right: clamp(10px, 4vw, 50px); } .lbn:hover, .lbx:hover { background: rgba(255,255,255,.25); }

/* Handys als Glas: durchscheinender Rahmen mit Lichtkante, dünner Rand ums Display, Glanzlinie */
.phone { background: linear-gradient(140deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 26%, rgba(170,160,255,.16) 62%, rgba(255,255,255,.42) 100%); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28), inset 0 0 26px rgba(255,255,255,.22), inset 2px 3px 6px rgba(255,255,255,.45), inset -2px -3px 8px rgba(110,90,255,.28), 0 40px 70px -26px rgba(3,3,60,.75), 0 0 46px -8px rgba(160,140,255,.45); }
.phone::before { inset: 2.3%; background: linear-gradient(160deg, rgba(8,10,48,.9), rgba(4,5,26,.96)); box-shadow: 0 0 0 1px rgba(255,255,255,.35), inset 0 0 10px rgba(130,120,255,.25); }
.phone .screen { inset: 4.3%; }
.phone .screen::after { background: linear-gradient(112deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 20%, transparent 34%), linear-gradient(0deg, rgba(255,255,255,.06), transparent 16%); }
.pb { background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(190,180,255,.35)); box-shadow: 0 0 6px rgba(255,255,255,.35); }
.gal { gap: 0; } .gi { margin: 0 13px; }

/* Handys: sehr dünner Glasrahmen, rundum gleich breit (Maße in cqw = Prozent der Handybreite, damit oben, unten, links, rechts identisch sind) */
.phone { container-type: inline-size; border-radius: 12cqw; }
.phone::before { inset: 0; border-radius: inherit; background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 1.6cqw rgba(255,255,255,.25); pointer-events: none; z-index: 6; }
.phone .screen { inset: 1.7cqw; border-radius: 10.3cqw; box-shadow: 0 0 0 .5cqw #04050d; }
.phone .screen::before { top: 3.4cqw; width: 3.4cqw; margin-left: -1.7cqw; }
.pb { width: 1cqw; } .pb1 { right: -.5cqw; } .pb2, .pb3 { left: -.5cqw; }
.phone { border-radius: 12% / 5.4%; } .phone::before { border-radius: 12% / 5.4%; }

/* Galerie: weiche Ränder statt harter Kante (Bilder tauchen links ein und rechts wieder auf); Panels ohne weißen Rahmen */
.gal { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.pnl { background: transparent; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 60px -24px rgba(5,5,60,.7); } .pnl img { display: block; border-radius: 13px; }

/* Fenster mit gleichen Maßen; die Farbversionen des Plugins wechseln durch */
.win .shot { aspect-ratio: 1400 / 880; overflow: hidden; } .win .shot > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.cycle { position: relative; width: 100%; height: 100%; } .cycle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; animation: cyc 14s infinite; animation-delay: calc(var(--k) * 2s); } .cycle img:first-child { opacity: 1; }
@keyframes cyc { 0% { opacity: 0; } 4% { opacity: 1; } 14% { opacity: 1; } 18% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cycle img { animation: none; } }
.gal { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.gi > * { will-change: transform, filter, opacity; }
.win .shot { aspect-ratio: 1400 / 852; } .win .shot > img, .cycle img { object-position: top center; }

/* App-Auftritt im Hero: gross, mit Icon und Name */
.appid { position: relative; display: inline-flex; align-items: center; gap: 20px; padding: 14px 30px 14px 14px; margin: 0 0 30px; border: 1px solid var(--line2); border-radius: 26px; background: var(--glass2); backdrop-filter: blur(14px); box-shadow: 0 18px 50px -18px rgba(5,5,80,.8), 0 0 40px -10px rgba(150,130,255,.5); overflow: hidden; }
.appid img { width: 92px; height: 92px; border-radius: 24px; box-shadow: 0 14px 34px -8px rgba(20,10,120,.8), 0 0 28px rgba(150,130,255,.45); }
.appid b { display: block; font: 600 clamp(30px, 3.4vw, 44px)/1.05 var(--head); letter-spacing: -.03em; } .appid span span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--accent); }
.appid::after { content: ""; position: absolute; left: -40%; top: 0; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation: run 7s linear infinite; }
@media (max-width: 560px) { .appid img { width: 68px; height: 68px; border-radius: 18px; } .appid { gap: 14px; padding-right: 20px; } }