/* CleverFamily – Hero-Szene (Shortcode [cf_hero]) */
.cf-hero,.cf-hero *{box-sizing:border-box}
.cf-hero{position:relative;background:#0069B4;padding:72px 48px 0;overflow:hidden;color:#fff;margin:0}
.cf-hero img{display:block;border:0;border-radius:0!important;box-shadow:none!important;height:auto}
/* Astra: Hero randlos über volle Breite ziehen, auch wenn der Content-Container begrenzt ist */
.cf-hero{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ast-page-builder-template .cf-hero,.ast-full-width-layout .cf-hero{width:auto;margin-left:0;margin-right:0}
.cf-hero__grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:44fr 56fr;gap:48px;align-items:end}
.cf-hero__text{padding-bottom:88px}
.cf-hero__badge{display:inline-flex;background:rgba(255,255,255,.16);color:#fff;padding:7px 15px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:28px}
.cf-hero h1,.entry-content .cf-hero h1{font-family:'DM Serif Display',serif;font-size:clamp(44px,4.8vw,70px);line-height:1.05;letter-spacing:-.025em;margin:0 0 22px;color:#fff}
.cf-hero h1 em{color:#cfe6f7}
.cf-hero .cf-hero__lead{font-size:17px;line-height:1.7;color:rgba(255,255,255,.86);max-width:460px;margin:0 0 40px}
.cf-hero .wp-block-button__link,.cf-hero .wp-block-button__link:visited{display:inline-block;background:#fff!important;color:#0069B4!important;border:1.5px solid #fff!important;border-radius:8px!important;padding:14px 28px!important;font-size:15px!important;font-weight:500!important;line-height:1.2!important;text-decoration:none!important}
.cf-hero .wp-block-button__link:hover{background:#eaf3fb!important}
.cf-hero .wp-block-button__link.is-style-outline,.cf-hero .wp-block-button__link.is-style-outline:visited{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.55)!important}
.cf-hero .wp-block-button__link.is-style-outline:hover{background:rgba(255,255,255,.12)!important}
.cf-scene img{filter:brightness(0) invert(1)}
.cf-hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.cf-scene{position:relative;width:100%;aspect-ratio:10/7;min-height:260px;overflow:hidden}
@supports not (aspect-ratio:1){.cf-scene{height:0;padding-bottom:70%}}
.cf-hero .cf-scene img{position:absolute;max-width:none;margin:0}
.cf-sun{position:absolute;left:36%;top:2%;width:17%;animation:cfBreath 5s ease-in-out infinite}
.cf-hero .cf-sun img{position:static;width:100%;animation:cfSpin 90s linear infinite}
.cf-bird{position:absolute;left:104%;width:6%;animation:cfFly 34s linear infinite}
.cf-hero .cf-bird img{position:static;width:100%;animation:cfFlap .9s ease-in-out infinite}
.cf-smoke{position:absolute;left:19%;bottom:34%;width:4.5%;opacity:.7;animation:cfSmoke 5.5s ease-out infinite}
.cf-hero .cf-smoke img{position:static;width:100%;filter:brightness(0) invert(1) blur(1.2px)}
.cf-house-wrap{position:absolute;left:2%;bottom:11%;width:24%}
.cf-hero .cf-house-wrap .cf-house{position:relative;width:100%;z-index:1;filter:brightness(0) invert(1) blur(1.4px);opacity:.72}
.cf-win{position:absolute;background:#ffd66b;box-shadow:0 0 22px 8px rgba(255,214,107,.45);border-radius:3px;z-index:0;opacity:0}
.cf-hero .cf-tree{right:2%;bottom:11%;width:14%;filter:brightness(0) invert(1) blur(1.4px);opacity:.72;animation:cfSway 7s ease-in-out infinite;transform-origin:50% 100%}
.cf-hero .cf-dog{right:16%;bottom:7.6%;width:13%;animation:cfWag 1.6s ease-in-out infinite;transform-origin:50% 100%}
.cf-fam{position:absolute;left:28%;bottom:7.6%;width:48%;aspect-ratio:3/2}
@supports not (aspect-ratio:1){.cf-fam{height:0;padding-bottom:32%}}
.cf-hero .cf-fam img{left:50%;bottom:0;height:100%;width:auto;opacity:0;transform:translateX(-50%) translateY(10px) scale(.97);transition:opacity 1.1s ease,transform 1.1s ease}
.cf-hero .cf-fam img.is-on{opacity:1;transform:translateX(-50%)}
.cf-moon{position:absolute;left:40%;top:4%;width:11%;aspect-ratio:1;border-radius:50%;background:#f4f1e4;box-shadow:0 0 40px 12px rgba(244,241,228,.25);opacity:0}
.cf-stars{position:absolute;inset:0;pointer-events:none;opacity:0}
.cf-stars span{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;animation:cfTwinkle 3s ease-in-out infinite}

@keyframes cfSpin{to{transform:rotate(360deg)}}
@keyframes cfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes cfFly{0%{left:104%;transform:translateY(0)}25%{transform:translateY(-14px)}50%{transform:translateY(6px)}75%{transform:translateY(-10px)}100%{left:-10%;transform:translateY(0)}}
@keyframes cfFlap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}
@keyframes cfSmoke{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(14px,-90px) scale(1.25)}}
@keyframes cfSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes cfWag{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-3px)}}
@keyframes cfFlicker{0%,100%{opacity:1}50%{opacity:.86}}
@keyframes cfTwinkle{0%,100%{opacity:.35}50%{opacity:1}}

/* ── Nacht: aktiv über Astras Dark Mode (body.astra-dark-mode-enable) ── */
.cf-hero,.cf-hero h1,.cf-hero__badge,.cf-hero__lead,.cf-sun,.cf-fam,.cf-dog,.cf-bird,.cf-house,.cf-tree,.cf-moon,.cf-stars,.cf-win{transition:opacity 1.2s ease,background 1.2s ease,color 1.2s ease,filter 1.2s ease}
body.astra-dark-mode-enable .cf-hero{background:#15243f}
body.astra-dark-mode-enable .cf-hero h1{color:#fff}
body.astra-dark-mode-enable .cf-hero__badge{background:rgba(255,255,255,.14);color:#fff}
body.astra-dark-mode-enable .cf-hero__lead{color:#b9c6da}
body.astra-dark-mode-enable .cf-hero .cf-sun,
body.astra-dark-mode-enable .cf-hero .cf-fam,
body.astra-dark-mode-enable .cf-hero .cf-dog,
body.astra-dark-mode-enable .cf-hero .cf-bird{opacity:0;pointer-events:none}
body.astra-dark-mode-enable .cf-hero .cf-tree,
body.astra-dark-mode-enable .cf-hero .cf-smoke img{filter:brightness(0) invert(.92)}
body.astra-dark-mode-enable .cf-hero .cf-house{filter:brightness(0) invert(.92);opacity:1}
body.astra-dark-mode-enable .cf-hero .cf-moon,
body.astra-dark-mode-enable .cf-hero .cf-stars{opacity:1}
body.astra-dark-mode-enable .cf-hero .cf-win{opacity:1;animation:cfFlicker 3.2s ease-in-out infinite}

@media (max-width:900px){.cf-hero{padding:56px 24px 0}.cf-hero__grid{grid-template-columns:1fr;gap:36px}.cf-hero__text{padding-bottom:0}.cf-scene{max-width:560px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.cf-hero *{animation:none!important}}