/* EastAutoNews – App-Seite /app (Claude, 29.10.2026) */
.appx{--ax-blue:#2f8ff0;--ax-cyan:#2fc4c6;--ax-mint:#7cf5c8;--ax-ink:#0f141c;--ax-soft:#4a5463;--ax-line:#e5eaf0;--ax-card:#fff;--ax-bg:#f5f7fa;background:var(--ax-bg);color:var(--ax-ink);font-family:Inter,system-ui,sans-serif}
:root[data-theme="dark"] .appx{--ax-ink:#eef2f6;--ax-soft:#a3adba;--ax-line:rgba(255,255,255,.09);--ax-card:#11161e;--ax-bg:#0a0d12}
.appx-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(18px,3.4vw,40px)}

/* Hero */
.appx-hero{position:relative;overflow:hidden;background:#070a10;color:#fff;padding:clamp(40px,6vw,84px) 0 clamp(44px,6vw,80px)}
.appx-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 60% at 78% 45%,rgba(47,143,240,.32),transparent 70%),radial-gradient(30% 40% at 92% 85%,rgba(124,245,200,.16),transparent 70%),radial-gradient(40% 50% at 8% 0%,rgba(47,143,240,.14),transparent 70%)}
.appx-glow::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(127,180,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(127,180,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(70% 70% at 70% 50%,#000,transparent)}
.appx-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.appx-icon{display:block;width:112px;height:112px;border-radius:26px;box-shadow:0 24px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08),0 0 60px rgba(47,143,240,.35);margin-bottom:26px;animation:axFloat 6s ease-in-out infinite}
@keyframes axFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.appx-kicker{display:inline-block;font:700 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ax-mint);margin-bottom:14px}
.appx-hero h1{font-family:var(--font-display,'Space Grotesk',sans-serif);font-size:clamp(2.4rem,5vw,4.1rem);line-height:1.02;letter-spacing:-.025em;margin:0 0 18px;color:#fff}
.appx-lead{font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.6;color:#c4cedb;max-width:560px;margin:0 0 28px}
.appx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:28px}
.appx-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border:0;border-radius:14px;cursor:pointer;font:700 15.5px/1 Inter,sans-serif;transition:transform .15s,box-shadow .15s}
.appx-btn svg{width:20px;height:20px}
.appx-btn-primary{color:#fff;background:linear-gradient(135deg,#0b6edb,#1f9fd0 60%,#2fc4c6);box-shadow:0 12px 30px rgba(11,110,219,.45)}
.appx-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(11,110,219,.55)}
.appx-done{color:var(--ax-mint);font-weight:600}
.appx-qr{display:inline-flex;align-items:center;gap:16px;padding:12px 18px 12px 12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);max-width:440px}
.appx-qr img{width:104px;height:104px;border-radius:10px;background:#fff;padding:6px;flex:0 0 auto}
.appx-qr b{display:block;font-size:15px;margin-bottom:5px;color:#fff}
.appx-qr span{font-size:13.5px;line-height:1.45;color:#aeb9c7}

/* Umschalter */
.appx-demo{display:flex;flex-direction:column;align-items:center}
.appx-tabs{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);margin-bottom:22px}
.appx-tabs button{border:0;background:none;color:#c4cedb;font:600 14px/1 Inter,sans-serif;padding:10px 20px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.appx-tabs button.on{background:linear-gradient(135deg,#0b6edb,#2fa3e0);color:#fff;box-shadow:0 6px 16px rgba(11,110,219,.4)}

/* Telefon */
.appx-phone{--w:288px;width:var(--w);aspect-ratio:9/19.3;position:relative;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
.appx-frame{position:absolute;inset:0;border-radius:46px;background:#05070b;padding:11px;box-shadow:inset 0 0 0 2px #2a313c,inset 0 0 0 5px #0c0f14,0 0 0 1px #3a4350;overflow:hidden}
.appx-frame::before{content:"";position:absolute;inset:11px;border-radius:36px;background:#0b1018;z-index:0}
.appx-island{position:absolute;top:20px;left:50%;width:92px;height:27px;margin-left:-46px;border-radius:20px;background:#000;z-index:9}
.appx-status{position:absolute;top:22px;left:34px;right:30px;display:flex;justify-content:space-between;z-index:8;font:600 12px/1 Inter,sans-serif;color:#10141b;transition:color .3s}
.appx-phone[data-step="3"] .appx-status{color:#fff}
.appx-status .appx-sig{background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 6px,currentColor 6px 10px,transparent 10px 12px,currentColor 12px 16px,transparent 16px 22px,currentColor 22px 38px)}
.appx-sig{width:38px;height:11px;background:linear-gradient(90deg,#fff 0 4px,transparent 4px 6px,#fff 6px 10px,transparent 10px 12px,#fff 12px 16px,transparent 16px 22px,#fff 22px 38px);border-radius:2px;opacity:.95}
.appx-screen{position:absolute;inset:11px;border-radius:36px;overflow:hidden;z-index:1;transition:opacity .45s ease,transform .45s ease}
.appx-site{background:#f4f6f9;display:flex;flex-direction:column;padding-top:52px}
.appx-abar{display:flex;align-items:center;justify-content:space-between;font:600 11px/1 Inter,sans-serif;color:#1d2530}
.appx-abar-top{margin:0 12px 10px;height:30px;padding:0 12px;border-radius:10px;background:#e6eaf0}
.appx-url{flex:1;text-align:center;opacity:.8}
.appx-dots{width:16px;text-align:center;font-size:15px;opacity:0;transition:opacity .3s}
.appx-site-head{background:#0a0c10;padding:10px 14px}
.appx-site-head img{height:12px;display:block}
.appx-site-hero{position:relative;height:150px;margin:0;background:linear-gradient(180deg,rgba(5,8,13,.1),rgba(5,8,13,.85)),url(/assets/cat-ev.jpg) center/cover;padding:14px}
.appx-site-hero span{position:absolute;left:14px;top:14px;width:46px;height:9px;border-radius:5px;background:#7cf5c8}
.appx-site-hero b{position:absolute;left:14px;right:40px;bottom:36px;height:12px;border-radius:4px;background:rgba(255,255,255,.92)}
.appx-site-hero b.s{right:90px;bottom:18px;background:rgba(255,255,255,.6)}
.appx-site-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.appx-site-cards i{height:78px;border-radius:12px;background:linear-gradient(180deg,#d9e1ea 0 58%,#fff 58%);box-shadow:0 2px 6px rgba(0,0,0,.06)}
.appx-site-cards i:nth-child(2){background:linear-gradient(180deg,#c8d6e6 0 58%,#fff 58%)}
.appx-site-cards i:nth-child(3){background:linear-gradient(180deg,#d4dde0 0 58%,#fff 58%)}
.appx-abar-bottom{margin-top:auto;height:56px;padding:0 22px 10px;background:rgba(244,246,249,.96);border-top:1px solid #dde3ea;font-size:17px;color:#0b6edb}
.appx-share svg{width:20px;height:20px;display:block}
.appx-phone[data-os="android"] .appx-abar-bottom{display:none}
.appx-phone[data-os="android"] .appx-dots{opacity:1}
.appx-phone[data-os="android"] .appx-site{padding-bottom:12px}

/* iPhone-Teilen-Menü */
.appx-sheet{position:absolute;left:11px;right:11px;bottom:11px;z-index:5;border-radius:26px 26px 36px 36px;background:rgba(28,31,38,.97);padding:10px 12px 26px;color:#fff;transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.appx-grab{display:block;width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);margin:0 auto 10px}
.appx-sheet-app{display:flex;align-items:center;gap:10px;padding:4px 4px 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.appx-sheet-app img{width:34px;height:34px;border-radius:8px}
.appx-sheet-app b{display:block;font-size:12.5px}.appx-sheet-app small{font-size:10.5px;opacity:.6}
.appx-sheet ul,.appx-menu ul{list-style:none;margin:0;padding:0}
.appx-sheet li{display:flex;justify-content:space-between;align-items:center;font:500 12.5px/1 Inter,sans-serif;padding:12px 12px;border-radius:11px;background:rgba(255,255,255,.05);margin-bottom:6px}
.appx-sheet li em{font-style:normal;opacity:.7}
.appx-sheet li.hl,.appx-menu li.hl{transition:background .3s,box-shadow .3s}
.appx-phone[data-step="2"] .appx-sheet li.hl,.appx-phone[data-step="1"][data-os="android"] .appx-menu li.hl{background:linear-gradient(135deg,#0b6edb,#2fa3e0);box-shadow:0 6px 18px rgba(11,110,219,.45);color:#fff}

/* Android-Menü + Dialog */
.appx-menu{position:absolute;top:92px;right:20px;width:62%;z-index:5;border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.35);padding:6px;transform-origin:top right;transform:scale(.6);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.appx-menu li{font:500 12.5px/1 Inter,sans-serif;color:#1d2530;padding:11px 12px;border-radius:9px}
.appx-dialog{position:absolute;left:28px;right:28px;top:38%;z-index:6;border-radius:24px;background:#fff;color:#1d2530;padding:20px 18px 14px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.5);transform:scale(.85);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.appx-dialog img{width:52px;height:52px;border-radius:13px;display:block;margin:0 auto 10px}
.appx-dialog b{display:block;font-size:15px;margin-bottom:4px}
.appx-dialog small{display:block;font-size:11px;color:#6b7480;margin-bottom:14px}
.appx-dialog div{display:flex;justify-content:flex-end;gap:16px;font:600 12.5px/1 Inter,sans-serif;color:#0b6edb}
.appx-dialog .hl{background:#0b6edb;color:#fff;padding:9px 14px;border-radius:999px;margin:-9px 0}
.appx-phone::after{content:"";position:absolute;inset:11px;border-radius:36px;background:rgba(0,0,0,.45);opacity:0;transition:opacity .35s;z-index:4;pointer-events:none}

/* Startbildschirm */
.appx-home{background:radial-gradient(120% 80% at 20% 10%,#2b5ea8 0%,#16264a 45%,#0a1020 100%);opacity:0;transform:scale(1.06);padding:64px 18px 0;z-index:7}
.appx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 10px}
.appx-ghost i{display:block;aspect-ratio:1;border-radius:13px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.appx-ghost:nth-child(3n) i{background:rgba(124,245,200,.18)}.appx-ghost:nth-child(4n) i{background:rgba(255,255,255,.22)}
.appx-new{display:flex;flex-direction:column;align-items:center;gap:5px;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .35s}
.appx-new img{width:100%;aspect-ratio:1;border-radius:13px;box-shadow:0 0 0 2px rgba(124,245,200,.0),0 8px 18px rgba(0,0,0,.4)}
.appx-new small{font:600 8.5px/1 Inter,sans-serif;color:#fff;white-space:nowrap}
.appx-dock{position:absolute;left:12px;right:12px;bottom:14px;height:64px;border-radius:24px;background:rgba(255,255,255,.16);display:flex;justify-content:space-around;align-items:center;padding:0 10px}
.appx-dock i{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.22)}

/* Tipp-Punkt */
.appx-tap{position:absolute;z-index:10;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.9);opacity:0;pointer-events:none;left:50%;top:50%}
.appx-tap.go{animation:axTap .9s ease-out}
@keyframes axTap{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(1.3)}}

/* Schritte */
.appx-phone[data-os="ios"][data-step="2"] .appx-sheet{transform:none}
.appx-phone[data-os="ios"][data-step="2"]::after{opacity:1}
.appx-phone[data-os="android"][data-step="1"] .appx-menu{transform:none;opacity:1}
.appx-phone[data-os="android"][data-step="2"] .appx-dialog{transform:none;opacity:1}
.appx-phone[data-os="android"][data-step="2"]::after{opacity:1}
.appx-phone[data-step="3"] .appx-home{opacity:1;transform:none}
.appx-phone[data-step="3"] .appx-new{transform:scale(1)}
.appx-phone[data-step="3"] .appx-new img{animation:axGlow 1.6s ease-out .8s}
@keyframes axGlow{0%{box-shadow:0 0 0 0 rgba(124,245,200,.8),0 8px 18px rgba(0,0,0,.4)}100%{box-shadow:0 0 0 14px rgba(124,245,200,0),0 8px 18px rgba(0,0,0,.4)}}
.appx-phone[data-os="ios"] .appx-and-only,.appx-phone[data-os="android"] .appx-ios-only{display:none}

/* Bildunterschrift */
.appx-caption{list-style:none;margin:22px 0 0;padding:0;min-height:48px;text-align:center;counter-reset:none}
.appx-caption li{display:none;font:600 15px/1.4 Inter,sans-serif;color:#dfe6ef;max-width:320px}
.appx-caption li.on{display:block;animation:axIn .4s ease}
.appx-caption li::before{content:attr(data-n);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;margin-right:8px;background:rgba(124,245,200,.16);color:var(--ax-mint);font-size:12px;vertical-align:1px}
@keyframes axIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Vorteile */
.appx-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:-34px;position:relative;z-index:2}
.appx-perk{background:var(--ax-card);border:1px solid var(--ax-line);border-radius:18px;padding:22px 22px 20px;box-shadow:0 14px 36px rgba(15,25,40,.08)}
.appx-perk span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,rgba(11,110,219,.12),rgba(47,196,198,.16));color:#0b6edb;margin-bottom:14px}
.appx-perk span svg{width:22px;height:22px}
.appx-perk b{display:block;font-size:16.5px;margin-bottom:6px;color:var(--ax-ink)}
.appx-perk p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ax-soft)}

/* Schritt für Schritt */
.appx-steps,.appx-faq{padding-top:clamp(48px,6vw,80px)}
.appx-steps h2,.appx-faq h2{font-family:var(--font-display,'Space Grotesk',sans-serif);font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.02em;margin:0 0 22px;color:var(--ax-ink)}
.appx-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.appx-step{position:relative;background:var(--ax-card);border:1px solid var(--ax-line);border-radius:18px;padding:22px}
.appx-step.mine{border-color:rgba(11,110,219,.45);box-shadow:0 0 0 3px rgba(11,110,219,.12)}
.appx-step header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.appx-step-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:rgba(11,110,219,.1);color:#0b6edb;flex:0 0 auto}
.appx-step-ic svg{width:21px;height:21px}
.appx-step header b{display:block;font-size:16.5px;color:var(--ax-ink)}
.appx-step header small{display:block;font-size:12.5px;color:var(--ax-soft);margin-top:3px;line-height:1.4}
.appx-you{margin-left:auto;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:#0b6edb;background:rgba(11,110,219,.1);padding:6px 9px;border-radius:999px;white-space:nowrap}
.appx-step ol{margin:0;padding:0;list-style:none;counter-reset:s}
.appx-step li{position:relative;counter-increment:s;padding:0 0 12px 34px;font-size:14.5px;line-height:1.5;color:var(--ax-soft)}
.appx-step li b{color:var(--ax-ink)}
.appx-step li::before{content:counter(s);position:absolute;left:0;top:-1px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font:700 11.5px/1 Inter,sans-serif;background:var(--ax-bg);border:1px solid var(--ax-line);color:var(--ax-ink)}

/* FAQ */
.appx-faq{max-width:860px;padding-bottom:clamp(56px,7vw,96px)}
.appx-faq details{border-bottom:1px solid var(--ax-line);padding:4px 0}
.appx-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:600;font-size:16px;color:var(--ax-ink)}
.appx-faq summary::-webkit-details-marker{display:none}
.appx-faq summary::after{content:"+";font-size:22px;font-weight:400;color:#0b6edb;transition:transform .2s}
.appx-faq details[open] summary::after{transform:rotate(45deg)}
.appx-faq p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ax-soft)}

@media (max-width:980px){
  .appx-hero-grid{grid-template-columns:1fr}
  .appx-demo{order:2}
  .appx-perks,.appx-steps-grid{grid-template-columns:1fr}
  .appx-perks{margin-top:24px}
}
@media (max-width:520px){
  .appx-icon{width:88px;height:88px;border-radius:21px}
  .appx-phone{--w:250px}
  .appx-qr{display:none}
  .appx-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.appx-icon{animation:none}.appx-screen,.appx-sheet,.appx-menu,.appx-dialog,.appx-new{transition:none}}