/* ==========================================================================
   Hero „KI-Kopf" (GEO-Seite, 02.10.2026) — Schwester des Webdesign-Heros
   „Projekte + Farbexplosion": gleiche Bühne (dunkel, Farbwolken, Körnung),
   eigenes Motiv: ein Marmorprofil aus Lichtpunkten, das zum Text schaut.
   Register: hero-bauen/references/hero-register.md
   ========================================================================== */

.kk-hero{position:relative;overflow:hidden;background:#04140b;color:#fff;
 min-height:min(92svh,880px);display:flex;align-items:center;padding:0}
.kk-hero .fx-canvas{opacity:.42}
.kk-hero .fx-poster{opacity:.38}
.kk-stage{position:absolute;top:0;right:0;bottom:0;width:64%;z-index:1;pointer-events:none}
.kk-stage canvas{display:block;width:100%;height:100%;
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%)}
.kk-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(90deg,rgba(4,20,11,.94) 0%,rgba(4,20,11,.82) 30%,rgba(4,20,11,.2) 56%,rgba(4,20,11,0) 70%),
            linear-gradient(0deg,rgba(4,20,11,.75) 0%,rgba(4,20,11,0) 26%)}
.kk-hero > .container{position:relative;z-index:3;width:100%;padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:clamp(3rem,6vw,4.5rem)}
.kk-text{max-width:640px;display:flex;flex-direction:column;align-items:flex-start}
.kk-hero .hero-title{display:inline-block;font-family:var(--font-body);font-size:clamp(.68rem,.85vw,.82rem);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--color-dark-2);background:var(--color-light-3);padding:.35rem .8rem;border-radius:999px;margin:0 0 1.1rem;line-height:1.4}
.kk-hero .hero-hook{font-family:var(--font-headline);color:#fff;font-size:clamp(2.3rem,4vw,3.6rem);line-height:1.04;letter-spacing:-.025em;max-width:18ch;margin:0 0 1.4rem}
.kk-hero .hero-hook .neon{background:linear-gradient(92deg,var(--color-neon-1),var(--color-neon-3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Kennzahlen als Glas-Kacheln, Zahl bleibt unter 2/3 der Hook-Größe */
.kk-hero .hero-stats-3{margin:0 0 1.5rem;max-width:610px;gap:.65rem}
.kk-hero .hero-stats-3 > div{background:rgba(8,30,18,.55);border:1px solid rgba(61,224,41,.3);border-radius:14px;
 -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);box-shadow:0 4px 16px rgba(0,0,0,.22);text-align:left;padding:.9rem .85rem;
 transition:border-color .25s,background .25s}
.kk-hero .hero-stats-3 > div:hover{border-color:var(--color-neon-1);background:rgba(8,30,18,.7)}
.kk-hero .hero-cta-row{margin:0}
.kk-hero .hero-trust-badge{margin-top:1.25rem;max-width:100%}
/* Handy: Badge einzeilig halten — engerer Innenabstand statt Umbruch */
@media (max-width:420px){.kk-hero .hero-trust-badge{gap:.5rem;padding:.65rem .8rem}.kk-hero .hero-trust-badge .meta{gap:.3rem}}

/* Einblenden beim Laden */
.kk-rise{opacity:0;transform:translateY(22px);animation:kk-rise .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes kk-rise{to{opacity:1;transform:none}}
.kk-d1{animation-delay:.1s}.kk-d2{animation-delay:.22s}.kk-d3{animation-delay:.34s}.kk-d4{animation-delay:.46s}.kk-d5{animation-delay:.58s}
@media (prefers-reduced-motion:reduce){.kk-rise{opacity:1;transform:none;animation:none}}

/* Tablet: Kopf weiter nach rechts, Text schmaler */
@media (max-width:1100px) and (min-width:768px){
 .kk-stage{width:72%;opacity:.8}
 .kk-text{max-width:540px}
}

/* Handy: Kopf als Band oben, Text darunter auf ruhiger Fläche (nie Text übers Gesicht).
   Reihenfolge der Anzeige: Pill → Hook → Knopf → Bewertung → Kennzahlen; HTML bleibt gleich. */
@media (max-width:767px){
 .kk-hero{display:block;min-height:0}
 .kk-hero .fx-canvas{display:none}
 .kk-hero .fx-poster{display:block}
 .kk-stage{position:relative;width:auto;height:230px;margin:0 0 -40px}
 .kk-scrim{background:linear-gradient(0deg,rgba(4,20,11,.97) 0%,rgba(4,20,11,.9) 60%,rgba(4,20,11,.1) 82%,rgba(4,20,11,0) 100%)}
 .kk-hero > .container{padding-top:0;padding-bottom:2.5rem}
 .kk-hero .hero-hook{font-size:clamp(2rem,9vw,2.5rem);max-width:none}
 .kk-text > *{order:6}
 .kk-text > .hero-title{order:1}
 .kk-text > .hero-hook{order:2}
 .kk-text > .hero-cta-row{order:3}
 .kk-text > .hero-trust-badge{order:4;margin:0 0 1.4rem}
 .kk-text > .hero-stats-3{order:5;margin:0}
 .kk-hero .hero-cta-row{margin-bottom:1rem}
}

/* Der frühere Hero-Kasten (KI-Logos → echte ChatGPT-Antwort → Ergebnis) lebt jetzt
   im Problem-Block neben dem Text, als dunkle Beleg-Tafel. */
.kk-problem{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
@media (min-width:1000px){.kk-problem{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.kk-problem .prose{max-width:none;margin:0}
.kk-beleg{background:radial-gradient(70% 60% at 50% 0%,rgba(61,224,41,.16),rgba(4,20,11,0) 70%),#071b10;
 border:1px solid rgba(61,224,41,.28);border-radius:22px;padding:1.6rem 1.4rem 1.5rem;box-shadow:0 24px 60px rgba(4,20,11,.28)}
.kk-beleg-label{display:block;margin:0 0 1.1rem;text-align:center;font-size:.82rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--color-neon-3)}
.kk-beleg .hero-kette{position:static;transform:none;width:100%;max-width:none;margin:0;animation:none;z-index:auto}
.kk-beleg .kl{width:56px;height:56px}.kk-beleg .kl svg{width:29px;height:29px}
.kk-beleg .eb-wort{font-size:1.2rem}
@media (max-width:359px){.kk-beleg .kl{width:46px;height:46px}.kk-beleg .kl svg{width:24px;height:24px}}
@media (max-width:767px){.kk-beleg{padding:1.3rem 1rem 1.2rem}.kk-beleg .hero-kette .kette-linien{height:80px !important}}

/* Kennzahl-Kacheln mobil: keine automatische Trennung („Ge-mini“, „kos-tenlos“) */
.kk-hero .hero-stats-3 span{-webkit-hyphens:manual !important;hyphens:manual !important}

/* Ergebnisband in der Tafel: Fläche mit Rand statt Vollton — sieht sonst aus wie der Haupt-Knopf (Adrian 02.10.2026) */
.kk-beleg .ergebnis-band{background:rgba(61,224,41,.08);border:2px solid var(--color-neon-1);box-shadow:0 0 24px rgba(61,224,41,.18)}
.kk-beleg .eb-wort{color:var(--color-neon-1)}