/* ════════════════════════════════════════════════════════════════
   /dev/home/ — Homepage-Redesign (scoped via body.dev-home)
   Lädt ZUSÄTZLICH zu /includes/site.css. Live-Site unangetastet.
   Motion läuft über GSAP (transform/opacity = Compositor, kein CPU-Loop).
   ════════════════════════════════════════════════════════════════ */

/* ── Dev-Preview-Badge ──────────────────────────────────────────── */
.dev-home .dev-ribbon{
    position:fixed;z-index:9999;bottom:1rem;left:1rem;
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.4rem .75rem;border-radius:999px;
    background:rgba(29,29,27,.9);color:#f5f3ee;
    font:600 .7rem/1 var(--font-mono);letter-spacing:.04em;
    backdrop-filter:blur(8px);box-shadow:0 4px 20px rgba(0,0,0,.25);pointer-events:none;
}
.dev-home .dev-ribbon::before{content:"";width:7px;height:7px;border-radius:50%;background:#E62145;box-shadow:0 0 8px #E62145;}

/* ── Hintergrund: tieferer/kühlerer Dark-Ton wie /dev/pro/home (mehr Kontrast) ──
   Greift nur im Dark-Mode; Light bleibt #f6f6f4 (site.css light-override ist spezifischer). */
body.dev-home{ --base:#0F0F12; --surface:#17171b; --surface-2:#1f1f24; }

/* ── Hero = volle erste Viewport-Höhe, Banderole absolut ans Bottom gepinnt ── */
.dev-home .hero{ min-height:calc(100svh - 70px); max-height:calc(100svh - 70px); padding-bottom:5.5rem; }
.dev-home .hero .disc-marquee{ position:absolute; left:0; right:0; bottom:0; width:100%; height:5.5rem; margin:0; padding:0; display:flex; align-items:center; z-index:2; }
.dev-home .hero-scroll-hint{ display:none; }    /* Scroll-Cue weg — Banderole ist der Cue */
.dev-home .hero-mark-caption{ display:none; }
/* Load-More-Button verschwindet, wenn alle (kuratierten) Kacheln gezeigt sind */
.dev-home [data-loadmore].is-done{ display:none; }
@media (max-width:720px){
  .dev-home .hero{ display:block; min-height:auto; max-height:none; padding-bottom:0; }
  .dev-home .hero .disc-marquee{ position:static; height:auto; width:100%; display:block; padding:1.25rem 0; margin-top:2.5rem; }
}

/* ── Reveal-Grundzustände (nur wenn JS animiert) ────────────────── */
.js-anim .dev-home [data-reveal]{opacity:0;}

/* ═══════════════════════════ HERO ═══════════════════════════════ */
.dev-home .hero{position:relative;overflow:hidden;}

/* Brand-Mark-Visual (kein WebGL — Logo + Brand-Marker, GSAP-animiert) */
.dev-home .hero-mark-v2{
    position:relative;aspect-ratio:1/1;width:100%;max-width:480px;margin-inline:auto;
    display:grid;place-items:center;
}
.dev-home .hero-mark-aura{
    position:absolute;inset:6%;border-radius:50%;
    background:
        radial-gradient(circle at 50% 42%, rgba(230,33,69,.14), transparent 60%),
        conic-gradient(from 200deg, rgba(180,90,220,.10), rgba(212,168,77,.10), rgba(91,160,230,.10), rgba(230,33,69,.10), rgba(180,90,220,.10));
    filter:blur(22px);opacity:.9;
    animation:auraSpin 26s linear infinite;
}
@keyframes auraSpin{to{transform:rotate(360deg);}}
.dev-home .hero-mark-ring{
    position:absolute;inset:11%;border-radius:50%;
    border:1px solid var(--tdeco);
}
.dev-home .hero-mark-ring--2{inset:2%;border-style:dashed;opacity:.6;}
.dev-home .hero-mark-logo{
    position:relative;width:52%;height:auto;z-index:2;
    filter:drop-shadow(0 12px 30px rgba(29,29,27,.18));
    will-change:transform;
}
.dev-home .hero-mark-logo--dark{display:none;}
[data-theme-pref="dark"] .dev-home .hero-mark-logo--light{display:none;}
[data-theme-pref="dark"] .dev-home .hero-mark-logo--dark{display:block;}

/* Brand-Marker (echtes Brand-Element: rotes Quadrat · Magenta-Kreis · Gold-Stern) */
.dev-home .bm{position:absolute;z-index:3;will-change:transform;pointer-events:none;}
.dev-home .bm--square{width:14px;height:14px;background:var(--accent);top:14%;right:20%;border-radius:2px;}
.dev-home .bm--circle{width:16px;height:16px;border-radius:50%;background:#B45ADC;bottom:18%;left:16%;}
.dev-home .bm--star{color:var(--gold);font-size:1.5rem;line-height:1;top:24%;left:12%;}
[data-theme-pref="dark"] .dev-home .bm--star{color:#D4A84D;}
.dev-home .bm--dot{width:7px;height:7px;border-radius:50%;background:#5BA0E6;bottom:26%;right:16%;}

.dev-home .hero-mark-caption{
    position:absolute;left:0;right:0;bottom:-1.6rem;text-align:center;
    font:500 .7rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);
}
@media (max-width:720px){.dev-home .hero-mark-v2{max-width:300px;}}

/* Hero-Trust-Zahlen: Tabular für sauberes Count-Up */
.dev-home .hero-trust-num{font-variant-numeric:tabular-nums;}

/* ═══════════════ W-FRAGEN-STORYTELLING (Section-Intros) ═════════ */
/* Mono-Eyebrow + große User-POV-Frage, sectionsweit konsistent. */
.dev-home .wq{display:block;}
.dev-home .wq-kicker{
    display:inline-flex;align-items:center;gap:.6rem;
    font:600 .72rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t3);
    margin-bottom:1rem;
}
.dev-home .wq-kicker::before{content:"";width:24px;height:1px;background:var(--accent);}
.dev-home .wq-q{
    font-family:var(--font-serif);font-style:italic;font-weight:500;
    font-size:clamp(1.05rem,1.4vw + .7rem,1.5rem);line-height:1.35;color:var(--t2);
    max-width:34ch;margin:.2rem 0 0;
}
.dev-home .wq-q em{color:var(--link);font-style:italic;}

/* ═══════════════ DISZIPLIN-FARBEN auf Service-Cards ═════════════ */
.dev-home .services-grid .service-card{--disc:var(--accent);position:relative;overflow:hidden;
    transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),border-color .4s ease;}
.dev-home .services-grid .service-card:nth-child(1){--disc:#D4A84D;}
.dev-home .services-grid .service-card:nth-child(2){--disc:#5BA0E6;}
.dev-home .services-grid .service-card:nth-child(3){--disc:#E0843C;}
.dev-home .services-grid .service-card:nth-child(4){--disc:#2D9F5C;}
.dev-home .services-grid .service-card:nth-child(5){--disc:#B45ADC;}
.dev-home .services-grid .service-card:nth-child(6){--disc:#7A6FD0;}
.dev-home .service-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--disc);transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.dev-home .service-icon{transition:transform .5s cubic-bezier(.16,1,.3,1),color .4s ease;}
.dev-home .service-num{transition:color .4s ease,letter-spacing .4s ease;}
.dev-home .service-cta{transition:transform .4s cubic-bezier(.16,1,.3,1);}
@media (hover:hover){
    .dev-home .service-card:hover{transform:translateY(-6px);
        box-shadow:0 22px 48px -22px color-mix(in srgb,var(--disc) 55%,transparent);
        border-color:color-mix(in srgb,var(--disc) 45%,transparent);}
    .dev-home .service-card:hover::before{transform:scaleY(1);}
    .dev-home .service-card:hover .service-icon{transform:translateY(-2px) scale(1.07);color:var(--disc);}
    .dev-home .service-card:hover .service-num{color:var(--disc);letter-spacing:.08em;}
    .dev-home .service-card:hover .service-cta{transform:translateX(4px);}
}

/* ═══════════════ ARBEITEN / Bento-Tiefe ════════════════════════ */
.dev-home .bento-tile{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),border-color .4s ease;will-change:transform;}
@media (hover:hover){
    .dev-home .bento-tile:hover{transform:translateY(-6px);box-shadow:0 24px 52px -20px rgba(29,29,27,.45);}
    .dev-home a.bento-tile:hover{border-color:rgba(230,33,69,.55);}
}
.dev-home a.bento-tile::after{content:"";position:absolute;top:14px;right:14px;width:7px;height:7px;border-radius:50%;
    background:var(--accent);opacity:0;transform:scale(.4);transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1);z-index:3;}
@media (hover:hover){.dev-home a.bento-tile:hover::after{opacity:1;transform:scale(1);}}

/* ═══════════════ DISZIPLIN-MARQUEE (zwischen Hero & Arbeiten) ═══ */
.dev-home .disc-marquee{position:relative;overflow:hidden;padding:1.5rem 0;
    border-block:1px solid var(--tdeco);margin-block:1rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.dev-home .disc-track{display:inline-flex;gap:2.5rem;white-space:nowrap;will-change:transform;animation:discScroll 32s linear infinite;}
.dev-home .disc-track span{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.1rem,2vw,1.7rem);color:var(--t2);display:inline-flex;align-items:center;gap:2.5rem;}
.dev-home .disc-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);}
@keyframes discScroll{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.dev-home .disc-track{animation:none;}.dev-home .hero-mark-aura{animation:none;}}

/* ═══════════════ REVIEWS / Trust ════════════════════════════════ */
.dev-home .review-card{position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1);}
.dev-home .review-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tdeco);transition:background .4s ease;}
.dev-home .review-card:has([data-source="google"])::before{background:linear-gradient(90deg,#4285F4,#34A853,#FBBC05,#EA4335);}
.dev-home .review-card:has([data-source="facebook"])::before{background:#1877F2;}
.dev-home .review-card:has([data-source="fiverr"])::before{background:#1DBF73;}
@media (hover:hover){.dev-home .review-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px -22px rgba(29,29,27,.45);}}
.dev-home .review-quote{font-size:clamp(1rem,1.05vw + .6rem,1.12rem);line-height:1.6;}
.dev-home .reviews-summary{padding:.9rem 1.2rem;border-radius:14px;background:color-mix(in srgb,var(--accent) 6%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);}
.dev-home .reviews-stars-row{color:var(--gold);}
[data-theme-pref="dark"] .dev-home .reviews-stars-row{color:#D4A84D;}
.dev-home .reviews-stars-numeric{color:var(--t1);font-weight:700;}
.dev-home .reviews-foot-link{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;}
@media (hover:hover){.dev-home .reviews-foot-link:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(29,29,27,.4);}.dev-home .reviews-foot-link:hover .reviews-foot-arrow{transform:translateX(4px);}}
.dev-home .reviews-foot-arrow{transition:transform .4s cubic-bezier(.16,1,.3,1);}

/* ═══════════════ PROZESS / scrub-Linie ══════════════════════════ */
.dev-home .process{position:relative;}
.dev-home .process-step{transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.dev-home .process-step.is-active .process-step-num{color:var(--link);font-weight:600;}


/* ═══════════════ MID-CTA (Conversion-Anker mittendrin) ═══════════════ */
.dev-home .home-midcta{padding:clamp(3.5rem,8vh,6rem) clamp(1.5rem,4vw,3rem);border-block:1px solid var(--tdeco);text-align:center;}
.dev-home .home-midcta-inner{max-width:660px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.3rem;}
.dev-home .home-midcta-eyebrow{font:600 .72rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t3);}

.dev-home .home-midcta-title{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.01em;color:var(--t1);margin:0;}


/* ═══════════════ WEBSITE-CHECK — schmaler Banner ═══════════════ */
.dev-home .check-banner{ padding:clamp(2.2rem,5vh,3.5rem) clamp(1.5rem,4vw,3rem); border-block:1px solid var(--tdeco); }
.dev-home .check-banner-inner{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:2rem 2.5rem; flex-wrap:wrap; }
.dev-home .check-banner-text{ max-width:64ch; }
.dev-home .check-banner-eyebrow{ font:600 .7rem/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--t3); margin:0 0 .6rem; }
.dev-home .check-banner-title{ font-family:var(--font-serif); font-weight:400; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.12; letter-spacing:-.01em; color:var(--t1); margin:0 0 .5rem; }
.dev-home .check-banner-title em{ font-style:italic; color:var(--link); }
.dev-home .check-banner-sub{ font-family:var(--font-sans); font-size:.95rem; line-height:1.55; color:var(--t2); margin:0; }


/* ══ Stimmen: integrierter "Drei Gründe"-Trust-Block (ex-Warum-Sektion) ══ */
.dev-home .reviews-reasons{ margin-top:clamp(3rem,6vh,5rem); padding-top:clamp(2.5rem,5vh,4rem); border-top:1px solid var(--tdeco); }
.dev-home .reviews-reasons-title{ font-family:var(--font-serif); font-weight:400; font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.12; letter-spacing:-.01em; color:var(--t1); margin:0 0 clamp(1.6rem,3vh,2.4rem); }