/* Keep the constellation beside the content at every desktop width. */
body .lf-app .lf-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:520px;padding:46px 0;background:#031622;color:#e1edf0}
/* Fade on the artwork's own box, so neither edge can end abruptly inside the hero. */
body .lf-app .lf-hero::before{content:"";position:absolute;inset:auto;top:-5%;left:calc(50% + 80px);height:110%;width:auto;aspect-ratio:1672/941;transform:translateX(-50%);z-index:-2;pointer-events:none;background:url('/loesungsfinder/assets/finder-konstellation.webp') center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 78%,transparent)}
body .lf-app .lf-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#031622 0%,rgba(3,22,34,.72) 32%,rgba(3,22,34,.34) 49%,transparent 65%)}
body .lf-app .lf-hero-panel{max-width:560px;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
body .lf-app .lf-hero .lf-eyebrow{color:#a6e5d1;font-size:12px;letter-spacing:.13em}
body .lf-app .lf-hero h1{color:#fff;font-size:clamp(2.5rem,3.6vw,3.4rem);line-height:1.1;letter-spacing:-.025em;max-width:18ch;margin:16px 0 21px;overflow-wrap:break-word;hyphens:auto}
body .lf-app .lf-hero .lf-lead{color:#e1edf0;font-size:1.06rem;line-height:1.7;max-width:540px;margin:0 0 22px}
body .lf-app .lf-hero-stats{gap:8px}
body .lf-app .lf-stat{color:#e1edf0;background:#102d3b;border-color:#4b6972;font-size:13px;padding:8px 12px}
body .lf-app .lf-stat strong{color:#b3ead2}
body .lf-app .lf-hero .tabs{max-width:560px;gap:12px;padding:24px 0 0;overflow:visible}
body .lf-app .lf-hero .tab{min-height:52px;padding:13px 18px;border-radius:10px;border:1px solid #6a9095;background:#102d3b;color:#eff8f5;font-size:16px;line-height:1.4;white-space:normal}
body .lf-app .lf-hero .tab:hover{background:#214857;border-color:#b3ead2}
body .lf-app .lf-hero .tab.active{background:#b3ead2;border-color:#b3ead2;color:#0c302c}
body .lf-app .lf-hero .tab.active:hover{background:#d5f5e7;border-color:#d5f5e7}
body .lf-app .lf-hero .tab:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:1100px){
 body .lf-app .lf-hero{--finder-art-height:clamp(220px,44vw,360px);display:block;min-height:0;padding:calc(var(--finder-art-height) + 8px) 0 32px}
 body .lf-app .lf-hero::before{top:calc(var(--finder-art-height) * -.05);left:calc(50% - 110px);height:calc(var(--finder-art-height) * 1.1)}
 body .lf-app .lf-hero::after{bottom:auto;height:calc(var(--finder-art-height) * 1.05);background:linear-gradient(180deg,transparent 68%,#031622 95%)}
 body .lf-app .lf-hero > .wrap{width:min(680px,calc(100% - 40px))}
 body .lf-app .lf-hero-panel{max-width:680px;margin-inline:auto}
 body .lf-app .lf-hero h1{font-size:clamp(2rem,5.8vw,3rem);max-width:100%}
 body .lf-app .lf-hero .tabs{max-width:680px;margin-inline:auto}
}
@media(max-width:480px){body .lf-app .lf-hero .tab{padding:12px 8px;font-size:15px}body .lf-app .lf-hero .tabs{gap:8px}body .lf-app .lf-hero .lf-lead{font-size:16px}}
@media print{body .lf-app .lf-hero{display:block;min-height:0;padding:20px 0;background:#fff;color:#142f43}body .lf-app .lf-hero::before,body .lf-app .lf-hero::after{display:none}body .lf-app .lf-hero :is(h1,.lf-eyebrow,.lf-lead,.lf-stat,.lf-stat strong){color:#142f43}body .lf-app .lf-stat{background:#fff;border-color:#aaa}}