/* ═══════════════════════════════════════════════════════════════
   HERO + BEWEIS-SECTION
   Die beiden Bloecke, die den ersten Eindruck tragen.
   ═══════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(3rem, 2rem + 5vw, 6rem);
    overflow: hidden;
    isolation: isolate;
}

/* ── Weiche Farbwolken im Hintergrund ── */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.blob-1 {
    width: 46vw; height: 46vw;
    top: -14vw; right: -10vw;
    background: var(--brand-300);
}

.blob-2 {
    width: 34vw; height: 34vw;
    bottom: -14vw; left: -8vw;
    background: var(--teal-light);
}

.blob-3 {
    width: 24vw; height: 24vw;
    top: 34%; left: 42%;
    background: var(--amber-light);
    opacity: 0.4;
}

body.mode-kids .blob-1 { background: var(--teal); opacity: 0.28; }
body.mode-kids .blob-3 { background: var(--amber); opacity: 0.3; }

.hero-content {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
}

.hero-text { text-align: center; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem 1rem;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-strong);
}

.hero-eyebrow .icon { color: var(--emerald); }

.hero h1 {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

.hero-sub {
    font-size: var(--text-lg);
    max-width: 50ch;
    margin-inline: auto;
    margin-bottom: var(--space-6);
}

.hero-cta {
    margin-bottom: var(--space-6);
}

/* Je Modus eine eigene Gruppe – siehe Kommentar in sections/hero.php.
   Die inaktive wird von .for-parents/.for-kids ausgeblendet. */
.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    justify-content: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.hero-trust li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.hero-trust .icon { color: var(--emerald); }

/* ── Zwei versetzte Geraete ── */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Nicht nur vh: auf niedrigen Querformat-Viewports waeren 62vh zu wenig
       fuer die Geraete, auf hohen Handys zu viel fuer den Rest des Heros. */
    min-height: clamp(360px, 62vh, 620px);
}

.hero-visual .phone {
    position: absolute;
}

.hero-visual .phone img {
    width: auto;
    max-height: clamp(340px, 58vh, 580px);
}

.phone--back {
    transform: translateX(-26%) rotate(-7deg) scale(0.88);
    opacity: 0.92;
    z-index: 1;
}

.phone--front {
    transform: translateX(16%) rotate(4deg);
    z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
    .phone--front { animation: float 7s ease-in-out infinite; }
    .phone--back  { animation: float 7s ease-in-out infinite reverse; }
}

/* ── Schwebende Kennzahlen ── */
.hero-chip {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-hover);
    border: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.hero-chip strong {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--accent-strong);
    line-height: 1.1;
}

.hero-chip--xp     { top: 12%; left: 0; }
.hero-chip--streak {
    bottom: 14%; right: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    color: var(--accent-strong);
}

.hero-chip--streak .icon { color: var(--amber); }

/* Auf schmalen Handys wuerden die Chips die Geraete fast vollstaendig
   verdecken – kleiner und dichter an den Rand, statt sie auszublenden. */
@media (max-width: 420px) {
    .hero-chip {
        padding: 0.5rem 0.75rem;
        transform: scale(0.9);
    }

    .hero-chip--xp     { transform-origin: left top; }
    .hero-chip--streak { transform-origin: right bottom; }
}


/* ═══════════════════════════════════════════════════════════════
   BEWEIS-SECTION (Sicherheit)
   ═══════════════════════════════════════════════════════════════ */
.security { background: var(--surface-alt); }

.proof {
    display: grid;
    gap: var(--space-7);
    align-items: center;
    margin-bottom: var(--space-10);
}

.proof-quote {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow);
    border-left: 5px solid var(--rose);
    margin-bottom: var(--space-5);
}

.proof-q {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.proof-question {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--rose);
    margin-bottom: var(--space-5);
}

.proof-answer {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0;
    line-height: var(--leading-snug);
}

.proof-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--text);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
}

.proof-note .icon { color: var(--accent-strong); margin-top: 2px; }

/* Zweiter Block: Elternsicht */
.proof-parent {
    display: grid;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-7);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    margin-bottom: var(--space-8);
}

.proof-parent-visual .phone img { max-height: 44vh; width: auto; }

/* Fuenf Schichten als Reihe */
.security-layers {
    display: grid;
    gap: var(--space-4);
}

.layer {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.layer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.layer-content { display: flex; flex-direction: column; }
.layer-content strong { font-size: var(--text-base); color: var(--text); }
.layer-desc { font-size: var(--text-sm); color: var(--text-muted); }


/* ═══════════════════════════════════════════════════════════════
   AB TABLET
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .security-layers { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .hero-content {
        grid-template-columns: 1.05fr 0.95fr;
    }

    .hero-text { text-align: left; }
    .hero-sub  { margin-inline: 0; }

    /* .hero-cta ist selbst kein Flex-Container – die Ausrichtung muss an
       die Gruppe, sonst blieben die Buttons unter linksbuendigem Text
       weiterhin zentriert. */
    .hero-cta-group,
    .hero-trust { justify-content: flex-start; }

    .proof         { grid-template-columns: 0.85fr 1.15fr; }
    .proof-parent  { grid-template-columns: 1.2fr 0.8fr; }
    .security-layers { grid-template-columns: repeat(5, 1fr); }

    .layer {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}