:root{ --index-bg:#f7f7fb; --index-card:#fff; --index-accent:#4fa3ff; --index-gold:#f6c15a; } .index-page{background:linear-gradient(#eef7ff,#fff);overflow:hidden;font-family:Inter,sans-serif} .index-wrap{max-width:1280px;margin:auto;padding:0 24px} .index-section,.index-download,.index-cta{padding:90px 0} .index-hero{padding:90px 0;background: radial-gradient(circle at top,#dff3ff,#fff 70%)} .index-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center} .index-kicker{display:inline-block;padding:.55rem 1rem;border-radius:12px;background:#42eb54;box-shadow:0 10px 30px rgba(0,0,0,.08)} .index-copy h1{font-size:clamp(2.7rem,5vw,5rem);line-height:1} .index-copy p{font-size:1.15rem;color:#555;max-width:640px} .index-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px} .index-btn{padding:16px 28px;border-radius:999px;text-decoration:none;font-weight:700;transition:.35s} .index-btn-primary{background:linear-gradient(135deg,var(--index-accent),#6dd5fa);color:#fff;box-shadow:0 20px 40px rgba(79,163,255,.3)} .index-btn-secondary{background:#fff;color:#222;border:1px solid #ddd} .index-btn:hover{transform:translateY(-4px)} .index-fan{position:relative;height:560px;perspective:1600px} .index-fan img{position:absolute;width:68%;left:18%;border-radius:26px;box-shadow:0 35px 70px rgba(0,0,0,.22);transition:.5s} .c1{transform:rotate(-14deg) translate(-90px,80px)} .c2{transform:rotate(0deg);z-index:2} .c3{transform:rotate(14deg) translate(90px,80px)} .index-fan:hover .c1{transform:rotate(-22deg) translate(-120px,60px)} .index-fan:hover .c3{transform:rotate(22deg) translate(120px,60px)} .index-world-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .index-world{ padding:12px; background:#fff; border-radius:24px; border:1px solid rgba(180,150,90,.25); box-shadow: 0 16px 40px rgba(0,0,0,.08); } .index-world img{ width:100%; display:block; border-radius:16px; } .index-world span{display:block;padding:18px;font-size:1.2rem;font-weight:700;text-align:center} .index-world:hover{transform:translateY(-10px) scale(1.03)} .index-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .index-features div,.index-steps div,details{background:rgba(255,255,255,.75);backdrop-filter:blur(16px);padding:24px;border-radius:24px;box-shadow:0 16px 40px rgba(0,0,0,.08)} .index-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .index-download,.index-cta{text-align:center;background:linear-gradient(135deg,#eff8ff,#fff8ec)} details{margin-bottom:16px} summary{cursor:pointer;font-weight:700} @keyframes indexFloat{50%{transform:translateY(-10px)}} .index-world,.index-btn-primary{animation:indexFloat 6s ease-in-out infinite} @media (max-width:1024px){ .index-hero-grid,.index-world-grid,.index-features,.index-steps{grid-template-columns:1fr 1fr} .index-fan{height:420px} } @media (max-width:700px){ .index-hero-grid,.index-world-grid,.index-features,.index-steps{grid-template-columns:1fr} .index-copy{text-align:center} .index-actions{justify-content:center} .index-fan{height:320px} .index-fan img{width:82%;left:9%} } /* ========================================= PREMIUM DOWNLOAD ========================================= */ .index-download{ padding:7rem 0; background: linear-gradient(180deg,#eef6ff,#fff7ec); } .index-section-head{ text-align:center; max-width:760px; margin:auto auto 4rem; } .index-section-head h2{ font-size:clamp(2.3rem,4vw,3.5rem); margin:1rem 0; } .index-section-head p{ font-size:1.15rem; color:#666; line-height:1.7; } .index-choice-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; } .index-choice-card{ background:#fff; border-radius:34px; overflow:hidden; box-shadow: 0 30px 70px rgba(0,0,0,.10); transition:.45s; display:flex; flex-direction:column; border:1px solid rgba(0,0,0,.05); } .index-choice-card:hover{ transform: translateY(-12px); box-shadow: 0 45px 90px rgba(0,0,0,.16); } .index-choice-image{ padding:14px; background:#fdf9ef; border:1px solid rgba(140,105,35,.22); border-radius:24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 12px 35px rgba(0,0,0,.08); overflow:hidden; } .index-choice-image img{ display:block; width:100%; border-radius:16px; } .index-choice-card:hover img{ transform:scale(1.08); } .index-choice-content{ padding:2rem; } .index-badge{ display:inline-block; padding:.45rem 1rem; border-radius:100px; background:#4aa8ff; color:#fff; font-weight:700; margin-bottom:1rem; } .index-badge.gold{ background:#ffb400; } .index-choice-content h3{ font-size:2rem; margin-bottom:1rem; } .index-choice-content p{ color:#666; line-height:1.7; } .index-choice-list{ list-style:none; margin:2rem 0; padding:0; } .index-choice-list li{ padding:.8rem 0; border-bottom:1px solid #ececec; position:relative; padding-left:2rem; } .index-choice-list li::before{ content:"✓"; position:absolute; left:0; color:#43b049; font-weight:bold; } .index-choice-button{ display:block; text-align:center; padding:1rem; border-radius:100px; background:#3ca8ff; color:#fff; text-decoration:none; font-weight:700; transition:.35s; } .index-choice-button:hover{ transform:translateY(-3px); } .index-choice-button.secondary{ background:#1d2b4b; } /* Tablet */ @media(max-width:950px){ .index-choice-grid{ grid-template-columns:1fr; } } /* iPhone */ @media(max-width:600px){ .index-choice-content{ padding:1.5rem; } .index-choice-content h3{ font-size:1.6rem; } .index-choice-list li{ font-size:.95rem; } } /* ========================================== KARTENFÄCHER – MOBILE FIX ========================================== */ @media (max-width:700px){ .index-fan{ height:auto; min-height:320px; display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden; padding:2rem 0; } .index-fan img{ position:absolute; width:72%; max-width:260px; left:50%; top:50%; transform-origin:center; } .index-fan .c1{ transform: translate(-50%,-50%) rotate(-18deg) translateX(-55px); } .index-fan .c2{ transform: translate(-50%,-50%) rotate(0deg); z-index:2; } .index-fan .c3{ transform: translate(-50%,-50%) rotate(18deg) translateX(55px); } }