/*
 * BesserGesehen Frontend 0.1.1
 * Hero + "Was BesserGesehen anders macht"
 */

.bgv2.bgf-managed{--p:#145C63;--d:#111827;--g:#F4B942;font-family:Manrope,Arial,sans-serif;color:var(--d);overflow:hidden;background:#f7f9fa}
.bgv2.bgf-managed *{box-sizing:border-box}
.bgv2.bgf-managed .hero{min-height:820px;padding:78px 6vw 60px;display:grid;grid-template-columns:minmax(540px,46%) 1fr;align-items:center;gap:3vw;background:radial-gradient(circle at 82% 42%,rgba(20,92,99,.12),transparent 29%),linear-gradient(135deg,#fbfcfd,#f4f7f8)}
.bgv2.bgf-managed .copy{max-width:720px;z-index:2}
.bgv2.bgf-managed .kicker{font-size:15px;font-weight:700}
.bgv2.bgf-managed .logo{font-size:48px;font-weight:800;letter-spacing:-2px}
.bgv2.bgf-managed .logo b{color:var(--p)}
.bgv2.bgf-managed .eyebrow{font-size:15px;font-weight:800;color:#B7791F;letter-spacing:.06em;margin:15px 0 32px}
.bgv2.bgf-managed h1{font-size:clamp(48px,3.3vw,67px);line-height:1.05;letter-spacing:-2.8px;margin:0;font-weight:850}
.bgv2.bgf-managed h1 em,.bgv2.bgf-managed .diff h2 em{font-style:normal;color:var(--p)}
.bgv2.bgf-managed .gold{width:232px;height:3px;background:var(--g);margin:48px 0 38px}
.bgv2.bgf-managed .copy>p{font-size:20px;line-height:1.58;color:#374151;max-width:640px}
.bgv2.bgf-managed .actions{display:flex;gap:18px;margin-top:38px}
.bgv2.bgf-managed .actions a{text-decoration:none;border-radius:14px;padding:15px 24px;font-size:14px;font-weight:750;box-shadow:0 10px 24px rgba(17,24,39,.12)}
.bgv2.bgf-managed .primary{background:var(--p);color:#fff}
.bgv2.bgf-managed .secondary{background:#fff;color:var(--d);border:2px solid var(--p)}
.bgv2.bgf-managed .trust{display:flex;gap:28px;margin-top:27px;font-size:13px;color:#165b62;flex-wrap:wrap}
.bgv2.bgf-managed .stage{--mx:58%;--my:45%;height:620px;position:relative;perspective:1400px;transform-style:preserve-3d;z-index:1}
.bgv2.bgf-managed .stage:before{content:"";position:absolute;inset:2% -4% 0 -8%;border-radius:50%;background:radial-gradient(circle at var(--mx) var(--my),rgba(20,92,99,.17),rgba(20,92,99,.06) 28%,transparent 62%);filter:blur(18px);opacity:.78;pointer-events:none;transform:translateZ(-180px)}
.bgv2.bgf-managed .sheet{position:absolute;width:420px;height:510px;border-radius:24px;background:#fff;border:1px solid #e7ecee;box-shadow:0 25px 65px rgba(28,54,59,.12);right:15%;top:60px;padding:28px;color:var(--p);font-size:11px;letter-spacing:.14em;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .65s}
.bgv2.bgf-managed .s3{transform:translate3d(80px,-26px,-120px) rotate(8deg);opacity:.75}
.bgv2.bgf-managed .s2{transform:translate3d(44px,-9px,-65px) rotate(4deg);opacity:.88}
.bgv2.bgf-managed .s1{transform:translate3d(10px,8px,-25px) rotate(1.5deg)}
.bgv2.bgf-managed .app{position:absolute;width:540px;right:12%;top:86px;background:#fff;border:1px solid rgba(20,92,99,.18);border-radius:26px;box-shadow:0 38px 95px rgba(24,58,62,.22);overflow:hidden;transform:rotateY(-7deg) rotateX(2deg) translateZ(55px);z-index:20;transition:transform .18s ease-out,opacity .65s}
.bgv2.bgf-managed .top{display:grid;grid-template-columns:64px 1fr 62px;gap:15px;align-items:center;padding:24px 26px;border-bottom:1px solid #edf0f1;background:linear-gradient(90deg,#fff,#f7fbfb)}
.bgv2.bgf-managed .avatar{width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,var(--p),#0e3f44);color:#fff;display:grid;place-items:center;font-weight:900}
.bgv2.bgf-managed .top small,.bgv2.bgf-managed .float small{font-size:9px;letter-spacing:.13em;color:#7d8a91;font-weight:850}
.bgv2.bgf-managed .top h3{margin:3px 0 1px;font-size:20px}
.bgv2.bgf-managed .top p{margin:0;font-size:12px;color:#64727b}
.bgv2.bgf-managed .score{width:58px;height:58px;border-radius:50%;border:5px solid #cfe8e8;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--p);font-weight:800}
.bgv2.bgf-managed .score span{font-size:8px}
.bgv2.bgf-managed .grid{display:grid;grid-template-columns:1.35fr .85fr;gap:24px;padding:24px 26px}
.bgv2.bgf-managed .grid label{display:block;font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--p);margin-bottom:10px}
.bgv2.bgf-managed .grid p{font-size:11.5px;line-height:1.5;color:#596773;margin:0 0 22px}
.bgv2.bgf-managed .job{border-left:2px solid #e5ecee;padding-left:14px;margin:10px 0}
.bgv2.bgf-managed .job b{display:block;font-size:11px}
.bgv2.bgf-managed .job span{font-size:9.5px;color:#879198}
.bgv2.bgf-managed .chips{display:flex;flex-wrap:wrap;gap:7px}
.bgv2.bgf-managed .chips span{padding:7px 9px;border-radius:8px;background:#edf6f6;color:var(--p);font-size:9px;font-weight:800}
.bgv2.bgf-managed .stitle{margin-top:26px}
.bgv2.bgf-managed .status{font-size:9px;font-weight:700;display:flex;align-items:center;gap:8px}
.bgv2.bgf-managed .status i{width:8px;height:8px;border-radius:50%;background:#29a66f;box-shadow:0 0 0 5px rgba(41,166,111,.11)}
.bgv2.bgf-managed .foot{display:flex;gap:8px;padding:14px 24px;background:#102a2e;color:#fff}
.bgv2.bgf-managed .foot span{font-size:9px;opacity:.7;padding:5px 8px}
.bgv2.bgf-managed .foot span:first-child{opacity:1;background:#1c454a;border-radius:6px}
.bgv2.bgf-managed .float{position:absolute;z-index:90;background:#fff;border:1px solid #e3e9eb;border-radius:16px;box-shadow:0 18px 45px rgba(27,59,62,.17);display:flex;align-items:center;gap:10px;padding:13px 15px;animation:bgf-floaty 4.6s ease-in-out infinite;transform:translateZ(220px);transition:opacity .55s}
.bgv2.bgf-managed .float .ico{width:32px;height:32px;border-radius:10px;background:#e9f4f4;color:var(--p);display:grid;place-items:center;font-weight:900}
.bgv2.bgf-managed .float b{display:block;font-size:10px;margin-top:2px}
.bgv2.bgf-managed .float.ats{left:-6%;top:135px}
.bgv2.bgf-managed .float.ats strong{font-size:16px;color:var(--p);margin-left:8px}
.bgv2.bgf-managed .float.fl{right:5%;bottom:20px;animation-delay:-1.4s}
.bgv2.bgf-managed .float.fl strong{font-size:8px;color:#21845d;background:#eaf7f0;padding:5px 7px;border-radius:7px}
.bgv2.bgf-managed .float.qr{left:-2%;bottom:24px;animation-delay:-2.5s}
.bgv2.bgf-managed .qr:before{
content:"";
width:54px;height:54px;flex:0 0 54px;border:1px solid #dbe3e6;border-radius:8px;background:#fff;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h29v29H0z'/%3E%3Cpath stroke='%23173f44' d='M4 4.5h7m1 0h1m1 0h2m2 0h7M4 5.5h1m5 0h1m4 0h2m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m3 0h1m3 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h1m5 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h7M13 11.5h2M5 12.5h7m3 0h2m2 0h2m3 0h1M6 13.5h1m1 0h1m6 0h1m1 0h1m2 0h5M4 14.5h3m1 0h3m1 0h2m3 0h2m2 0h1m1 0h1M4 15.5h1m2 0h1m3 0h1m5 0h1m1 0h4m1 0h1M4 16.5h1m1 0h2m2 0h2m3 0h1m2 0h1m4 0h1M12 17.5h2m2 0h2m1 0h4m1 0h1M4 18.5h7m1 0h3m2 0h1m3 0h3M4 19.5h1m5 0h1m1 0h1m2 0h1m1 0h1m3 0h2m1 0h1M4 20.5h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m5 0h1M4 21.5h1m1 0h3m1 0h1m1 0h2m2 0h2m1 0h4M4 22.5h1m1 0h3m1 0h1m1 0h1m1 0h2m2 0h1M4 23.5h1m5 0h1m1 0h1m1 0h1m5 0h3M4 24.5h7m2 0h3m5 0h1m1 0h1'/%3E%3C/svg%3E");
background-size:46px 46px;background-repeat:no-repeat;background-position:center;
}
@keyframes bgf-floaty{0%,100%{transform:translateZ(220px) translateY(0)}50%{transform:translateZ(220px) translateY(-10px)}}
.bgv2.bgf-managed.motion .app{opacity:0;transform:rotateY(-2deg) translateZ(20px) translateY(26px) scale(.965)}
.bgv2.bgf-managed.motion .sheet,.bgv2.bgf-managed.motion .float{opacity:0}
.bgv2.bgf-managed.motion.ready .app{opacity:1;transform:rotateY(-7deg) rotateX(2deg) translateZ(55px)}
.bgv2.bgf-managed.motion.ready .s1{opacity:1;transition-delay:.38s}
.bgv2.bgf-managed.motion.ready .s2{opacity:.88;transition-delay:.52s}
.bgv2.bgf-managed.motion.ready .s3{opacity:.75;transition-delay:.66s}
.bgv2.bgf-managed.motion.ready .ats{opacity:1;transition-delay:.92s}
.bgv2.bgf-managed.motion.ready .qr{opacity:1;transition-delay:1.12s}
.bgv2.bgf-managed.motion.ready .fl{opacity:1;transition-delay:1.32s}
.bgv2.bgf-managed .diff{position:relative;padding:115px 6vw 120px;background:linear-gradient(180deg,#edf3f4 0,#f7fbfb 20%,#f7fbfb 82%,#eef4f4 100%);border-top:1px solid rgba(20,92,99,.10)}
.bgv2.bgf-managed .diff-head{max-width:820px;margin:0 auto 72px;text-align:center}
.bgv2.bgf-managed .diff-head>span{font-size:12px;letter-spacing:.16em;color:#B7791F;font-weight:900}
.bgv2.bgf-managed .diff h2{font-size:clamp(42px,4vw,64px);line-height:1.04;letter-spacing:-2.4px;margin:14px 0 22px}
.bgv2.bgf-managed .diff-head p{font-size:18px;line-height:1.65;color:#596773;max-width:720px;margin:auto}
.bgv2.bgf-managed .flow{max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:stretch}
.bgv2.bgf-managed .card{position:relative;background:linear-gradient(180deg,#fff 0%,#fbfdfd 100%);border:1px solid rgba(20,92,99,.26);border-radius:24px;padding:30px;min-height:330px;box-shadow:0 18px 40px rgba(18,66,71,.13),0 0 0 1px rgba(255,255,255,.8) inset;transition:box-shadow .3s,border-color .3s,background .3s}
.bgv2.bgf-managed .card:hover{box-shadow:0 24px 54px rgba(18,66,71,.18),0 0 0 1px rgba(255,255,255,.9) inset;border-color:rgba(20,92,99,.42);background:#fff}
.bgv2.bgf-managed .no{position:absolute;right:22px;top:20px;font-size:44px;font-weight:900;color:rgba(20,92,99,.10)}
.bgv2.bgf-managed .dicon{width:50px;height:50px;border-radius:15px;background:#e4f0f1;color:var(--p);display:grid;place-items:center;font-size:20px;font-weight:900;margin-bottom:26px;border:1px solid rgba(20,92,99,.10)}
.bgv2.bgf-managed .card h3{font-size:22px;margin:0 0 13px}
.bgv2.bgf-managed .card p{font-size:14px;line-height:1.65;color:#64727b;margin:0}
.bgv2.bgf-managed .connector{align-self:center;height:2px;background:linear-gradient(90deg,rgba(20,92,99,.18),rgba(20,92,99,.62),rgba(20,92,99,.18));margin:0 12px;border-radius:2px}
.bgv2.bgf-managed .mini{margin-top:25px;border:1px solid rgba(20,92,99,.18);background:#f3f8f8;border-radius:12px;padding:11px 12px;display:flex;align-items:center;gap:8px;font-size:10px}
.bgv2.bgf-managed .mini .dot{width:8px;height:8px;border-radius:50%;background:#29a66f}
.bgv2.bgf-managed .mini small{margin-left:auto;color:#21845d;font-weight:900}
.bgv2.bgf-managed .linkico{width:25px;height:25px;border-radius:8px;background:#e1eeee;display:grid;place-items:center;color:var(--p);font-weight:900}
.bgv2.bgf-managed .stack{height:58px;margin-top:24px;position:relative}
.bgv2.bgf-managed .stack i{position:absolute;width:66px;height:42px;border:1px solid rgba(20,92,99,.18);border-radius:8px;background:#fff;left:0;top:8px}
.bgv2.bgf-managed .stack i:nth-child(2){left:8px;top:4px}
.bgv2.bgf-managed .stack i:nth-child(3){left:16px;top:0;background:#eaf4f4}
.bgv2.bgf-managed .stack b{position:absolute;left:95px;top:18px;font-size:10px}
.bgv2.bgf-managed .note{max-width:900px;margin:68px auto 0;padding:18px 24px;border-radius:18px;background:#102a2e;color:#fff;display:flex;align-items:center;justify-content:center;gap:20px;font-size:12px;box-shadow:0 18px 45px rgba(16,42,46,.18)}
.bgv2.bgf-managed .note span{opacity:.62}
.bgv2.bgf-managed .note i{font-style:normal;color:var(--g)}
.bgv2.bgf-managed .note em{font-style:normal;color:#b8d7d9}
.bgv2.bgf-managed .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.bgv2.bgf-managed .reveal.in{opacity:1;transform:translateY(0)}
@media(max-width:1200px){
.bgv2.bgf-managed .hero{grid-template-columns:1fr 1fr;padding-left:4vw;padding-right:4vw}
.bgv2.bgf-managed .app{width:465px;right:3%}
.bgv2.bgf-managed .sheet{width:365px;right:5%}
.bgv2.bgf-managed .float.ats{left:-4%}
.bgv2.bgf-managed .float.fl{right:3%}
.bgv2.bgf-managed .copy>p{font-size:18px}
.bgv2.bgf-managed .flow{grid-template-columns:1fr 34px 1fr 34px 1fr}
.bgv2.bgf-managed .diff{padding-left:4vw;padding-right:4vw}
.bgv2.bgf-managed .card{padding:24px}}
@media(max-width:900px){
.bgv2.bgf-managed .hero{display:block;padding-top:60px}
.bgv2.bgf-managed .stage{height:590px;margin-top:35px}
.bgv2.bgf-managed .app{left:50%;right:auto;transform:translateX(-50%) rotateY(-4deg);width:min(540px,82vw)}
.bgv2.bgf-managed .sheet{left:50%;right:auto;width:min(420px,70vw)}
.bgv2.bgf-managed .s3{transform:translateX(-39%) rotate(7deg)}
.bgv2.bgf-managed .s2{transform:translateX(-44%) rotate(3deg)}
.bgv2.bgf-managed .s1{transform:translateX(-48%) rotate(1deg)}
.bgv2.bgf-managed .float.ats{left:3%}
.bgv2.bgf-managed .float.fl{right:3%;bottom:12px}
.bgv2.bgf-managed .flow{grid-template-columns:1fr;gap:20px;max-width:620px}
.bgv2.bgf-managed .connector{display:none}
.bgv2.bgf-managed .note{flex-wrap:wrap;text-align:center}
.bgv2.bgf-managed .diff{padding-top:85px}}
@media(max-width:600px){
.bgv2.bgf-managed .hero{padding:42px 20px 35px}
.bgv2.bgf-managed .kicker{font-size:12px}
.bgv2.bgf-managed .logo{font-size:38px}
.bgv2.bgf-managed h1{font-size:42px}
.bgv2.bgf-managed .copy>p{font-size:16px}
.bgv2.bgf-managed .actions{flex-direction:column}
.bgv2.bgf-managed .actions a{text-align:center}
.bgv2.bgf-managed .stage{height:540px;transform:scale(.88);transform-origin:top center;margin-left:-10%;margin-right:-10%;width:120%}
.bgv2.bgf-managed .float.ats{left:1%;top:105px}
.bgv2.bgf-managed .float.fl{right:2%;bottom:4px}
.bgv2.bgf-managed .float.qr{left:4%;bottom:5px}
.bgv2.bgf-managed .app{top:65px}
.bgv2.bgf-managed .sheet{top:45px}
.bgv2.bgf-managed .diff{padding:70px 20px}
.bgv2.bgf-managed .diff h2{font-size:39px}
.bgv2.bgf-managed .diff-head p{font-size:16px}
.bgv2.bgf-managed .note{display:block}
.bgv2.bgf-managed .note>*{display:block;margin:8px 0}}
@media(prefers-reduced-motion:reduce){
.bgv2.bgf-managed .float{animation:none!important}
.bgv2.bgf-managed .app,.bgv2.bgf-managed .sheet,.bgv2.bgf-managed .float,.bgv2.bgf-managed .reveal{transition:none!important}
.bgv2.bgf-managed .reveal{opacity:1;transform:none}
.bgv2.bgf-managed .stage:before{display:none}}