/* ═══════════════════════════════════════════════════════════════
   LEBENDIGER STIL
   Die erwachsene Schwester der Kinderseite: weiche Aurora-Flächen in
   Lila, Türkis und Pfirsich, Lexi als Begleiter, mehr Bewegung.
   Geladen über $needs_lebendig, Regeln für geteilte Abschnitte hängen
   an body.stil-lebendig – so ändern sich andere Seiten erst, wenn sie
   die Klasse bekommen.
   Farben nur über Tokens. Bewegung nur unter no-preference.
   ═══════════════════════════════════════════════════════════════ */

/* ── Nummerierte Listen ohne Browser-Ziffern ──────────────────
   Das Grund-CSS setzt nur ul zurück. Diese Listen tragen ihre Nummern
   selbst (Kreise, Emojis) – die Browser-Ziffern standen daneben. */
.schritte,
.rang-leiter,
.ds-vorher ol {
    list-style: none;
    padding-left: 0;
}

/* ── Geteilte Abschnitte: Feinschliff ─────────────────────────── */
.stil-lebendig .section-header h2 { font-size: var(--text-4xl); }

.stil-lebendig .section-header .badge {
    background: linear-gradient(120deg, var(--brand-100), var(--teal-light));
    color: var(--brand-800);
    border: 0;
}


/* ── Hero ─────────────────────────────────────────────────────── */
.hero-lebendig {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem) clamp(5rem, 4rem + 4vw, 7.5rem);
    background: var(--surface);
}

.aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* feines Punktraster, nach unten ausgeblendet */
.aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--brand-200) 1.2px, transparent 1.3px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 75%);
    mask-image: linear-gradient(to bottom, black, transparent 75%);
    opacity: 0.6;
}

.aurora-fleck {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.9;
}

.aurora-fleck--lila     { width: 46vmax; height: 46vmax; left: -14vmax; top: -18vmax; background: var(--brand-200); }
.aurora-fleck--tuerkis  { width: 40vmax; height: 40vmax; right: -12vmax; top: -6vmax;  background: var(--teal-light); }
.aurora-fleck--pfirsich { width: 34vmax; height: 34vmax; left: 30%;     bottom: -22vmax; background: var(--peach-light); }

.hero-lebendig-inner {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

.hero-neu {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.hero-neu:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hero-neu .icon { color: var(--accent); }

.hero-neu-marke {
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--gradient);
    color: var(--text-invert);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-lebendig h1 {
    margin-bottom: var(--space-5);
    font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.9rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--heading-color);
}

/* Textmarker hinter „Denken“ */
.marker {
    position: relative;
    white-space: nowrap;
    background-image: linear-gradient(100deg, var(--peach), var(--amber-light));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 38%;
    border-radius: 4px;
}

.hero-lebendig-sub {
    max-width: 52ch;
    margin-bottom: var(--space-6);
    color: var(--text-muted);
    font-size: var(--text-lg);
}

.hero-lebendig-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.hero-lebendig .hero-trust { justify-content: flex-start; }

/* Bühne: Sonne, Telefon, Lexi, Hinweise */
.hero-lebendig-buehne {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 470px;
}

.buehne-sonne {
    position: absolute;
    width: min(420px, 86vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--white) 35%, transparent), transparent 55%),
        linear-gradient(140deg, var(--brand-500), var(--teal));
    box-shadow: 0 30px 80px color-mix(in srgb, var(--brand-600) 35%, transparent);
}

.hero-lebendig-phone {
    position: relative;
    z-index: 1;
    width: min(230px, 52vw);
    rotate: 5deg;
    transform: translate(var(--px, 0), var(--py, 0));
}

.hero-lebendig-lexi {
    position: absolute;
    z-index: 2;
    left: 2%;
    bottom: 0;
    width: min(190px, 38vw);
    height: auto;
    transform: translate(var(--px, 0), var(--py, 0));
    /* das Glühen ist im Original oben/unten abgeschnitten */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 6%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 6%, black 80%, transparent 100%);
}

.hinweis-chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 210px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.3;
    transform: translate(var(--px, 0), var(--py, 0));
}

.hinweis-chip strong { color: var(--heading-color); }
.hinweis-emoji { font-size: 1.4rem; }

.hinweis-chip--1 { right: 0;  top: 10%; }
.hinweis-chip--2 { right: 2%; bottom: 14%; }
.hinweis-chip--3 { left: 0;   top: 18%; }

/* Welle in den nächsten Abschnitt */
.welle {
    position: absolute;
    left: -5%;
    right: -5%;
    height: clamp(36px, 5vw, 70px);
    background: var(--surface-alt);
}

.welle--unten { bottom: -1px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }

@media (max-width: 559px) {
    .hinweis-chip { max-width: 170px; font-size: var(--text-xs); }
    .hinweis-chip--3 { top: 4%; }
    .hero-lebendig-buehne { min-height: 420px; }
}

@media (min-width: 960px) {
    .hero-lebendig-inner { grid-template-columns: 1.08fr 0.92fr; gap: var(--space-8); }
    .hero-lebendig-buehne { min-height: 560px; }
    .hero-lebendig-phone { width: 260px; }
    .hero-lebendig-lexi { width: 220px; left: -4%; }
}


/* ── Zahlenband ───────────────────────────────────────────────── */
.zahlenband {
    padding-block: var(--space-4) var(--space-8);
    background: var(--surface-alt);
}

.zahlen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.zahl {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-5) var(--space-3);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.zahl:last-child { grid-column: 1 / -1; }

.zahl strong {
    font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3rem);
    font-weight: 800;
    line-height: 1;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.zahl-was   { margin-top: var(--space-2); font-weight: 800; color: var(--heading-color); }
.zahl-klein { color: var(--text-muted); font-size: var(--text-xs); }

@media (min-width: 860px) {
    .zahlen { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
    .zahl:last-child { grid-column: auto; }
}


/* ── Vorteile als Bento ───────────────────────────────────────── */
.vorteile { background: var(--surface-alt); padding-top: var(--space-6); }

.bento {
    display: grid;
    gap: var(--space-4);
}

.bento-kachel {
    position: relative;
    overflow: hidden;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.stil-lebendig .bento-kachel:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.bento-kachel h3 { margin-bottom: var(--space-2); font-size: var(--text-xl); color: var(--heading-color); }
.bento-kachel p  { margin-bottom: 0; color: var(--text-muted); }

.bento-kachel--lila     { background: linear-gradient(160deg, var(--brand-50), var(--surface)); }
.bento-kachel--pfirsich { background: linear-gradient(160deg, var(--peach-light), var(--surface)); }
.bento-kachel--tuerkis  { background: linear-gradient(160deg, var(--teal-light), var(--surface)); }

.bento-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 1.7rem;
}

/* Große Kachel mit Beispielgespräch */
.bento-kachel--gross {
    display: grid;
    gap: var(--space-5);
    align-content: space-between;   /* Text oben, Gespräch unten – keine Lücke in der Mitte */
    background:
        radial-gradient(circle at 90% 100%, var(--teal-light), transparent 45%),
        linear-gradient(150deg, var(--brand-100), var(--surface) 70%);
}

.bento-marke {
    display: inline-block;
    margin-bottom: var(--space-3);
    padding: 0.15rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--gradient);
    color: var(--text-invert);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bento-kachel--gross h3 { font-size: var(--text-2xl); }

.bento-gespraech {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 440px;
    padding-right: 90px;           /* Platz für Lexi */
}

.blase {
    max-width: 85%;
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-radius: 18px;
    font-size: var(--text-sm);
    line-height: 1.4;
}

.bento-kachel .blase--kind {   /* .bento-kachel p (grau) sonst stärker */
    align-self: flex-end;
    border-bottom-right-radius: 6px;
    background: var(--brand-600);
    color: var(--text-invert);
}

.bento-kachel .blase--lexi {
    align-self: flex-start;
    border-bottom-left-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.bento-lexi {
    position: absolute;
    right: -10px;
    bottom: -14px;
    width: 130px;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

@media (max-width: 719px) {
    .bento-gespraech { padding-right: 56px; }
    .blase { max-width: 94%; }
    .bento-lexi { width: 96px; }
}

@media (min-width: 720px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento-kachel--gross { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .bento { grid-template-columns: repeat(3, 1fr); }
    .bento-kachel--gross { grid-column: span 2; grid-row: span 2; }
    .bento-lexi { width: 170px; }
    .bento-gespraech { padding-right: 130px; }
}


/* ── Drei Schritte ────────────────────────────────────────────── */
.schritte {
    position: relative;
    display: grid;
    gap: var(--space-5);
    counter-reset: schritt;
}

.schritt {
    position: relative;
    padding: var(--space-6) var(--space-5) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.schritt-nr {
    position: absolute;
    top: -16px;
    left: 50%;
    translate: -50% 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient);
    color: var(--text-invert);
    font-weight: 800;
    box-shadow: var(--shadow-cta);
}

.schritt-emoji { display: block; margin-bottom: var(--space-3); font-size: 2.6rem; line-height: 1; }
.schritt h3 { margin-bottom: var(--space-2); color: var(--heading-color); }
.schritt p  { margin-bottom: 0; color: var(--text-muted); }

@media (min-width: 860px) {
    .schritte { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
    /* gestrichelte Linie, die die Schritte verbindet */
    .schritte::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 16%;
        right: 16%;
        border-top: 2px dashed var(--brand-300);
    }
}


/* ── Abschluss ────────────────────────────────────────────────── */
.home-cta-box {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--space-5);
    align-items: center;
    padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--peach) 45%, transparent), transparent 45%),
        var(--gradient);
    color: var(--text-invert);
    box-shadow: var(--shadow-lift);
    text-align: center;
}

.home-cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(color-mix(in srgb, var(--white) 30%, transparent) 1.2px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to left, black, transparent 70%);
    mask-image: linear-gradient(to left, black, transparent 70%);
}

.home-cta-text h2 { color: var(--text-invert); font-size: var(--text-4xl); }
.home-cta-text p  { color: color-mix(in srgb, var(--white) 88%, transparent); max-width: 50ch; margin-inline: auto; }

.home-cta-knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-block: var(--space-5) var(--space-3);
}

.home-cta-notiz {
    display: block;                 /* Häkchen bleibt beim Umbruch am Text */
    margin: 0;
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--white) 80%, transparent);
}

.home-cta-notiz .icon { display: inline; vertical-align: -3px; margin-right: var(--space-1); }

.home-cta-lexi { justify-self: center; width: 180px; height: auto; }

@media (min-width: 860px) {
    .home-cta-box { grid-template-columns: 1fr auto; text-align: left; }
    .home-cta-text p { margin-inline: 0; }
    .home-cta-knoepfe { justify-content: flex-start; }
    .home-cta-lexi { width: 260px; margin-block: -1rem -3.5rem; }
}


/* ── Seitenkopf der Unterseiten ───────────────────────────────── */
.stil-lebendig .page-hero {
    padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
    background: var(--surface);
}

/* leiser als im Startseiten-Hero und nach unten ausgeblendet */
.aurora--leise {
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
    mask-image: linear-gradient(to bottom, black 55%, transparent);
}
.aurora--leise .aurora-fleck { opacity: 0.75; }

.page-hero-inner {
    display: grid;
    gap: var(--space-4);
    align-items: center;
    justify-items: center;
}

.stil-lebendig .page-hero h1 {
    font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--heading-color);
}

.page-hero-lexi {
    order: -1;                       /* am Handy über dem Text */
    filter: drop-shadow(0 16px 26px color-mix(in srgb, var(--brand-900) 30%, transparent));
}

.page-hero-lexi img {
    width: 120px;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 6%, black 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 6%, black 78%, transparent 100%);
}

@media (min-width: 860px) {
    .page-hero--lexi .page-hero-inner {
        grid-template-columns: 1fr auto;
        justify-items: start;
        gap: var(--space-8);
        text-align: left;
    }
    .page-hero--lexi .crumbs { justify-content: flex-start; }
    .page-hero--lexi .lead   { margin-inline: 0; }
    .page-hero-lexi { order: 0; }
    .page-hero-lexi img { width: 230px; }
}


/* ── Vorteilskarten (Für Eltern) ──────────────────────────────── */
.stil-lebendig .benefits-grid { gap: var(--space-4); }

@media (min-width: 900px) {
    .stil-lebendig .benefits-grid { grid-template-columns: repeat(3, 1fr); }
}

.stil-lebendig .benefit-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}

.stil-lebendig .benefit-card:nth-child(3n + 1) { background: linear-gradient(160deg, var(--brand-50), var(--surface)); }
.stil-lebendig .benefit-card:nth-child(3n + 2) { background: linear-gradient(160deg, var(--teal-light), var(--surface)); }
.stil-lebendig .benefit-card:nth-child(3n + 3) { background: linear-gradient(160deg, var(--peach-light), var(--surface)); }

.stil-lebendig .benefit-card:hover { box-shadow: var(--shadow-hover); }


/* ── Funktionen: weiche Sonne hinter jedem Telefon ────────────── */
.stil-lebendig .feature-image { position: relative; isolation: isolate; }

.stil-lebendig .feature-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: min(340px, 80vw);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--brand-200), var(--teal-light) 60%, var(--peach-light));
}


/* ── Preise ───────────────────────────────────────────────────── */
.stil-lebendig .pricing-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

/* Beliebtester Plan: Verlaufsrahmen statt einfarbiger Linie */
.stil-lebendig .pricing-card--featured {
    border: 2px solid transparent;
    background:
        linear-gradient(160deg, var(--brand-50), var(--surface)) padding-box,
        linear-gradient(140deg, var(--brand-600), var(--teal), var(--peach)) border-box;
    box-shadow: var(--shadow-lift);
}

@media (min-width: 900px) {
    .stil-lebendig .pricing-card--featured { scale: 1.04; }
    .stil-lebendig .pricing-card--featured:hover { scale: 1.04; }
}


/* ── FAQ ──────────────────────────────────────────────────────── */
/* Gruppenköpfe: helle Karten statt schwerer lila Balken */
.stil-lebendig .faq-section-header {
    padding: var(--space-4) var(--space-5);
    margin-top: var(--space-3);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--heading-color);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: 0;
    transition: background var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.stil-lebendig .faq-section-header:hover { opacity: 1; box-shadow: var(--shadow); }
.stil-lebendig .faq-section-header.open  { background: linear-gradient(120deg, var(--brand-100), var(--teal-light)); }
.stil-lebendig .faq-section-header svg   { color: var(--accent); }

.stil-lebendig .faq-section-body { padding: var(--space-2) var(--space-2) 0; }

.stil-lebendig .faq-item {
    margin-bottom: var(--space-2);
    padding-inline: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.stil-lebendig .faq-item.active { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.stil-lebendig .faq-question { font-size: var(--text-base); color: var(--text); }
.stil-lebendig .faq-question svg { color: var(--accent); flex-shrink: 0; margin-left: var(--space-3); }
.stil-lebendig .faq-answer p { color: var(--text-muted); }

/* Lange Antworten (z. B. Schulfragen) wurden bei 200 px abgeschnitten */
.faq-item.active .faq-answer { max-height: 900px; }


/* ═══════════════════════════════════════════════════════════════
   BEWEGUNG
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

    .aurora-fleck--lila     { animation: aurora-treiben 16s ease-in-out infinite alternate; }
    .aurora-fleck--tuerkis  { animation: aurora-treiben 20s ease-in-out -4s infinite alternate-reverse; }
    .aurora-fleck--pfirsich { animation: aurora-treiben 24s ease-in-out -8s infinite alternate; }

    .marker { animation: marker-ziehen 0.9s var(--ease-out) 0.5s both; }

    .btn-leuchten { animation: leuchten 3s ease-in-out infinite; }

    .buehne-sonne { animation: sonne-atmen 7s ease-in-out infinite; }
    .hero-lebendig-lexi { animation: schweben-sanft 5s ease-in-out infinite; }
    .hinweis-chip { animation: schweben-sanft 6s ease-in-out infinite; }
    .hinweis-chip--2 { animation-delay: -2s; }
    .hinweis-chip--3 { animation-delay: -4s; }

    /* Beispielgespräch: Blasen poppen nacheinander auf, sobald die Kachel erscheint */
    .js-anim .bento .blase { opacity: 0; translate: 0 10px; scale: 0.96; }
    .js-anim .bento.is-visible .blase {
        opacity: 1; translate: 0 0; scale: 1;
        transition: opacity 0.4s ease, translate 0.4s var(--ease-out), scale 0.4s var(--ease-out);
    }
    .js-anim .bento.is-visible .blase:nth-child(1) { transition-delay: 0.5s; }
    .js-anim .bento.is-visible .blase:nth-child(2) { transition-delay: 1.3s; }
    .js-anim .bento.is-visible .blase:nth-child(3) { transition-delay: 2.3s; }
    .js-anim .bento.is-visible .blase:nth-child(4) { transition-delay: 3.1s; }

    .bento-lexi { animation: schweben-sanft 5.5s ease-in-out infinite; }
    .page-hero-lexi img { animation: schweben-sanft 5s ease-in-out infinite; }

    .schritt:hover .schritt-emoji { animation: huepfen 0.6s var(--ease-out); }

    .home-cta-lexi { animation: winken-sanft 3.5s ease-in-out infinite; transform-origin: 50% 90%; }
}

@keyframes aurora-treiben { to { translate: 6vmax 5vmax; scale: 1.1; } }
@keyframes marker-ziehen  { from { background-size: 0% 38%; } to { background-size: 100% 38%; } }
@keyframes leuchten       { 0%, 100% { box-shadow: var(--shadow-cta); } 50% { box-shadow: var(--shadow-cta-hover), 0 0 0 6px color-mix(in srgb, var(--brand-600) 15%, transparent); } }
@keyframes sonne-atmen    { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes schweben-sanft { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes huepfen        { 0%, 100% { translate: 0 0; } 40% { translate: 0 -10px; } }
@keyframes winken-sanft   { 0%, 100% { rotate: 0deg; } 20% { rotate: -5deg; } 40% { rotate: 4deg; } 60% { rotate: -2deg; } }