/* ===== Kreativ-Layer 2.0 ===== */
:root{--grad:linear-gradient(120deg,#1b5e9a,#6fb42c)}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.sky{position:absolute;left:0;right:0;bottom:-1px;height:clamp(70px,11vw,150px);background:url(../skyline-white.svg) center bottom/cover no-repeat;pointer-events:none;z-index:2}
.sky.soft{background-image:url(../skyline-soft.svg)}.sky.navy{background-image:url(../skyline-dark.svg)}
.phead{position:relative;overflow:hidden;padding-bottom:clamp(90px,12vw,150px)}
.phead::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 85% 0,rgba(111,180,44,.35),transparent 70%),radial-gradient(500px 300px at 0 100%,rgba(255,255,255,.08),transparent 70%)}
.phead .wrap{position:relative;z-index:1}

/* Hero 2 */
.hero2{position:relative;color:#e5edf5;background:#0f3f6b;overflow:hidden;isolation:isolate;padding:70px 0 clamp(110px,14vw,190px)}
.hero2::before{content:"";position:absolute;inset:-20%;z-index:-1;background:
 radial-gradient(40% 40% at 20% 30%,rgba(27,94,154,.95),transparent 70%),
 radial-gradient(35% 35% at 80% 20%,rgba(111,180,44,.55),transparent 70%),
 radial-gradient(45% 45% at 70% 90%,rgba(27,94,154,.9),transparent 70%);
 animation:mesh 18s ease-in-out infinite alternate;filter:blur(10px)}
@keyframes mesh{to{transform:translate3d(-4%,3%,0) rotate(6deg) scale(1.08)}}
.hero2::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.hero2 .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero2 h1{color:#fff;font-size:clamp(2.1rem,5vw,3.8rem);line-height:1.08}
.grad-t{background:linear-gradient(90deg,#b7e47f,#7fd1ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.rotor{display:inline-grid;vertical-align:bottom;font-weight:700;color:#b7e47f}
.rotor span{grid-area:1/1;opacity:0;transform:translateY(60%);animation:rot 12s infinite}
.rotor span:nth-child(2){animation-delay:3s}.rotor span:nth-child(3){animation-delay:6s}.rotor span:nth-child(4){animation-delay:9s}
@keyframes rot{0%{opacity:0;transform:translateY(60%)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-60%)}}
.kick{font-size:1.05rem;margin:0 0 14px;color:#cfe0ee}
.hero2 .lead{font-size:1.18rem;color:#fff;max-width:34em}
.hero2 .meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:6px;font-size:.95rem}.hero2 .meta a{color:#fff}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:.85rem;font-weight:600;backdrop-filter:blur(6px);margin-bottom:20px}
.pill i{width:10px;height:10px;border-radius:50%;background:#7bff6a;box-shadow:0 0 0 0 rgba(123,255,106,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(123,255,106,0)}100%{box-shadow:0 0 0 0 rgba(123,255,106,0)}}

/* Mockup-Bühne */
.stage{position:relative;height:430px;perspective:1200px;--mx:0;--my:0}
.win{position:absolute;left:0;top:30px;width:88%;background:#fff;border-radius:16px;box-shadow:0 40px 80px rgba(0,0,0,.35);overflow:hidden;transform:rotateY(calc(-12deg + var(--mx)*6deg)) rotateX(calc(6deg + var(--my)*-5deg));transition:transform .2s;animation:float 7s ease-in-out infinite}
@keyframes float{50%{translate:0 -10px}}
.win .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#eef2f7}
.win .bar i{width:10px;height:10px;border-radius:50%}.win .bar i:nth-child(1){background:#ff6b6b}.win .bar i:nth-child(2){background:#ffd166}.win .bar i:nth-child(3){background:#6fd66f}
.win .bar span{margin-left:10px;flex:1;background:#fff;border-radius:999px;padding:3px 12px;font-size:.72rem;color:#64748b}
.win .pg{padding:18px;color:var(--ink)}
.sk-nav{display:flex;align-items:center;gap:10px;margin-bottom:18px}.sk-nav b{width:70px;height:14px;border-radius:4px;background:var(--grad)}.sk-nav u{width:34px;height:8px;border-radius:4px;background:#e2e8f0;margin-left:auto}.sk-nav u+u{margin-left:0}
.sk-h{font-weight:800;font-size:1.35rem;line-height:1.15;letter-spacing:-.02em;max-width:12em;min-height:3.1em}
.sk-h .typing{border-right:3px solid var(--green);animation:caret .8s steps(1) infinite;padding-right:2px;color:var(--blue)}
@keyframes caret{50%{border-color:transparent}}
.sk-p{height:8px;border-radius:4px;background:#e2e8f0;margin:10px 0 0;width:80%}.sk-p.s{width:55%}
.sk-btn{display:inline-block;margin-top:16px;padding:8px 16px;border-radius:999px;background:var(--green);color:#10260a;font-weight:800;font-size:.75rem}
.sk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.sk-tiles i{height:62px;border-radius:10px;background:#eef6e6}.sk-tiles i:nth-child(2){background:#e6eff8}.sk-tiles i:nth-child(3){background:#f4ecf8}
.phone{position:absolute;right:2%;bottom:0;width:36%;aspect-ratio:9/18.5;background:#0f172a;border-radius:28px;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.4);transform:translate(calc(var(--mx)*-14px),calc(var(--my)*-10px)) rotate(4deg);transition:transform .25s;animation:float 6s ease-in-out -2s infinite}
.phone .scr{height:100%;background:#fff;border-radius:22px;padding:12px;overflow:hidden}
.phone .scr b{display:block;height:12px;width:50%;border-radius:4px;background:var(--grad);margin-bottom:12px}
.phone .scr .hh{font-weight:800;font-size:.8rem;line-height:1.1;color:var(--ink)}
.phone .scr i{display:block;height:46px;border-radius:10px;background:#eef6e6;margin-top:10px}.phone .scr i+i{background:#e6eff8}
.badge{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:#fff;color:var(--ink);font-weight:700;font-size:.85rem;box-shadow:0 18px 40px rgba(0,0,0,.25);animation:float 5s ease-in-out infinite;z-index:3;white-space:nowrap}
.badge small{display:block;font-weight:400;color:var(--muted);font-size:.72rem}
.badge .e{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--soft-g);font-size:1.1rem}
.b1{left:-2%;top:0;animation-delay:-1s}.b2{right:0;top:18px;animation-delay:-3s}.b3{left:4%;bottom:14px;animation-delay:-2s}

/* Marquee */
.marq{background:#0b1b2b;color:#fff;overflow:hidden;padding:18px 0;position:relative;z-index:3}
.marq .track{display:flex;gap:42px;width:max-content;animation:marq 38s linear infinite;font-weight:800;font-size:1.15rem;letter-spacing:-.01em;white-space:nowrap}
.marq .track span{display:inline-flex;align-items:center;gap:42px;opacity:.9}
.marq .track span::after{content:"✦";color:var(--green)}
.marq:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.bn{position:relative;border-radius:24px;padding:30px;overflow:hidden;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--text);display:flex;flex-direction:column;transition:.3s cubic-bezier(.2,.7,.2,1);min-height:240px}
.bn:hover{transform:translateY(-6px) rotate(-.3deg);box-shadow:0 24px 50px rgba(15,23,42,.14);color:var(--text)}
.bn h3{font-size:1.5rem;margin-bottom:.4em;position:relative;z-index:1}.bn p{position:relative;z-index:1;max-width:28em}
.bn .go{margin-top:auto;font-weight:800;position:relative;z-index:1;display:inline-flex;gap:6px;align-items:center;color:var(--blue)}.bn .go::after{content:"→";transition:.2s}.bn:hover .go::after{transform:translateX(6px)}
.bn.a{grid-column:span 4;grid-row:span 2;background:linear-gradient(135deg,#1b5e9a,#0f3f6b);color:#dbe8f3;border:0;min-height:480px}.bn.a:hover{color:#dbe8f3}.bn.a h3{color:#fff;font-size:2.1rem}.bn.a .go{color:#b7e47f}
.bn.a .art{position:absolute;right:-2%;bottom:-3%;width:min(66%,560px);height:auto;transition:.5s;overflow:visible}.bn.a:hover .art{transform:translateY(-6px) scale(1.02)}
.bn.b{grid-column:span 2;background:#0f172a;color:#cbd5e1;border:0}.bn.b:hover{color:#cbd5e1}.bn.b h3{color:#fff}.bn.b .go{color:#b7e47f}
.bn.b code{position:absolute;right:-10px;bottom:10px;font:700 4.5rem/1 monospace;color:rgba(111,180,44,.18)}
.bn.c{grid-column:span 3;background:var(--soft-g);border-color:#dcefc8}
.bn.d{grid-column:span 3;background:#fff}
.bars{display:flex;align-items:flex-end;gap:8px;height:70px;margin:12px 0 18px}
.bars i{flex:1;border-radius:6px 6px 0 0;background:var(--grad);height:var(--h);transform-origin:bottom;animation:grow 2.4s ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes grow{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.live{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;color:#166534;background:#dcfce7;border-radius:999px;padding:4px 12px;margin-bottom:12px;align-self:flex-start}
.live i{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}

/* SERP-Karte */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.serp{background:#fff;border-radius:20px;padding:28px;box-shadow:var(--shadow);border:1px solid var(--line);font-family:Arial,sans-serif;position:relative;transform:rotate(1.5deg);transition:.3s}
.serp:hover{transform:none}
.serp .q{display:flex;align-items:center;gap:10px;border:1px solid #dfe1e5;border-radius:999px;padding:10px 18px;margin-bottom:22px;color:#202124;font-size:.95rem;box-shadow:0 1px 6px rgba(32,33,36,.12)}
.serp .r{padding:12px 14px;border-radius:12px;margin-bottom:8px}.serp .r.top{background:#f1fbe7;outline:2px solid var(--green);position:relative}
.serp .r .u{font-size:.78rem;color:#202124}.serp .r .t{font-size:1.15rem;color:#1a0dab;margin:2px 0}.serp .r .d{font-size:.85rem;color:#4d5156;line-height:1.5}
.serp .r.g{opacity:.5}.serp .r.g i{display:block;background:#e5e7eb;border-radius:4px;height:12px;margin:8px 0}.serp .r.g i:first-child{width:45%;height:16px}.serp .r.g i:last-child{width:80%}
.serp .tag1{position:absolute;right:-12px;top:-14px;background:var(--green);color:#10260a;font-weight:800;font-size:.78rem;padding:4px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(79,143,23,.4);font-family:var(--font)}
.checks{list-style:none;padding:0;margin:20px 0}.checks li{padding-left:34px;position:relative;margin:.8em 0}
.checks li::before{content:"";position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Dunkle Spotlight-Section */
.dark{background:#0b1b2b;color:#b6c4d3;position:relative;overflow:hidden;padding:90px 0 clamp(110px,14vw,170px);isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--sx,70%) var(--sy,20%),rgba(111,180,44,.22),transparent 60%)}
.dark h2{color:#fff;margin-top:0}.dark .eyebrow{color:#b7e47f}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dcard{padding:30px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:.3s}
.dcard:hover{background:rgba(255,255,255,.09);transform:translateY(-4px);border-color:rgba(111,180,44,.5)}
.dcard .big{font-size:3rem;font-weight:800;line-height:1;background:linear-gradient(90deg,#b7e47f,#7fd1ff);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.dcard h3{color:#fff;margin-bottom:.3em}.dcard p{margin:0}

/* Timeline */
.tl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;padding:0;margin:40px 0 0;counter-reset:t}
.tl::before{content:"";position:absolute;left:0;right:0;top:27px;height:4px;border-radius:4px;background:var(--line)}
.tl::after{content:"";position:absolute;left:0;top:27px;height:4px;border-radius:4px;background:var(--grad);width:0;transition:width 1.8s cubic-bezier(.2,.7,.2,1)}
.tl.in::after{width:100%}
.tl li{position:relative;padding-top:70px;margin:0;counter-increment:t}
.tl li::before{content:counter(t);position:absolute;left:0;top:0;width:58px;height:58px;border-radius:50%;background:#fff;border:4px solid var(--blue);color:var(--blue);font-weight:800;font-size:1.3rem;display:grid;place-items:center;z-index:1;transition:.4s}
.tl li:hover::before{background:var(--blue);color:#fff;transform:scale(1.1) rotate(-6deg)}

/* Preis-Glow */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
.price.hot{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--a),#6fb42c,#1b5e9a,#7fd1ff,#6fb42c) border-box;animation:spin 6s linear infinite}
@keyframes spin{to{--a:360deg}}
.price{transition:.3s}.price:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

/* CTA 2 */
.cta2{position:relative;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#1b5e9a,#0f3f6b);color:#e5edf5;padding:72px 40px;text-align:center;isolation:isolate}
.cta2::before,.cta2::after{content:"";position:absolute;border-radius:50%;z-index:-1}
.cta2::before{width:360px;height:360px;right:-80px;top:-120px;background:radial-gradient(closest-side,rgba(111,180,44,.6),transparent)}
.cta2::after{width:300px;height:300px;left:-60px;bottom:-120px;background:radial-gradient(closest-side,rgba(127,209,255,.4),transparent)}
.cta2 h2{color:#fff;font-size:clamp(1.8rem,4vw,2.9rem);margin:0 0 .4em}.cta2 .btns{justify-content:center}
.wiggle{display:inline-block;animation:wig 3s ease-in-out infinite}@keyframes wig{0%,90%,100%{transform:none}93%{transform:rotate(-14deg)}96%{transform:rotate(12deg)}}

@media(max-width:980px){
  .bn.a{min-height:0}.bn.a .art{position:relative;right:auto;bottom:auto;width:100%;max-width:560px;margin:26px auto -34px;display:block}
  .hero2 .wrap,.split{grid-template-columns:1fr}.stage{height:380px;max-width:520px;margin:10px auto 0;width:100%}
  .bento{grid-template-columns:1fr 1fr}.bn.a{grid-column:span 2;min-height:400px}.bn.b,.bn.c,.bn.d{grid-column:span 1}.dgrid{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr 1fr}.tl::before,.tl::after{display:none}
}
@media(max-width:620px){.bento{grid-template-columns:1fr}.bn.a,.bn.b,.bn.c,.bn.d{grid-column:span 1}.tl{grid-template-columns:1fr}.stage{height:340px}.badge{font-size:.75rem;padding:8px 10px}.b2{right:-4px}.cta2{padding:48px 22px}}
@media(prefers-reduced-motion:reduce){.hero2::before,.win,.phone,.badge,.marq .track,.bars i,.rotor span,.price.hot,.sk-h .typing,.wiggle,.pill i,.live i{animation:none!important}.rotor span:first-child{opacity:1;transform:none}.js .rv{opacity:1;transform:none}}
.hint{font-size:.85rem;color:var(--muted);margin:0}