/* ATOIO homepage: Umsetzung des freigegebenen visuellen Mockups. */
:root{--container:1270px}
.atoio-home-v2{color:#0D2B4D;background:#fff}
.atoio-home-v2 .wrap{width:min(calc(100% - 48px),1270px)}
.mock-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(111deg,#f6fbff 0%,#edf7fe 43%,#e2f3ff 100%)}
.mock-hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.34;pointer-events:none;background-image:linear-gradient(#beddf6 1px,transparent 1px),linear-gradient(90deg,#beddf6 1px,transparent 1px);background-size:120px 120px;mask-image:linear-gradient(90deg,transparent 10%,#000 65%)}
.mock-hero-inner{position:relative;display:grid;grid-template-columns:455px minmax(0,1fr);gap:0;min-height:426px;align-items:center}
.mock-hero-content{position:relative;z-index:2;padding:27px 0 20px}
.mock-kicker,.mock-section-kicker{display:flex;gap:15px;align-items:center;color:#147DDD;font-size:12px;font-weight:850;letter-spacing:.22em;line-height:1.5}
.mock-kicker:before,.mock-section-kicker:before{content:"";display:block;width:28px;height:1.5px;background:#2391ef;flex:0 0 auto}
.mock-hero h1{font-size:clamp(3.15rem,3.9vw,4.0rem);line-height:.91;letter-spacing:-.064em;font-weight:850;margin:14px 0 18px;color:#0A2141}
.mock-hero h1 em{color:#248BE9;font-style:normal}
.mock-hero-content p{font-size:16px;line-height:1.4;color:#56718f;max-width:455px;margin:0 0 14px}
.mock-hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mock-button{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:45px;border-radius:7px;padding:10px 22px;white-space:nowrap;text-align:center;font-size:14px;line-height:1.15;font-weight:750;transition:transform .18s,box-shadow .18s,color .18s}
.mock-button:hover{transform:translateY(-2px)}
.mock-button svg,.mock-card-link svg,.mock-services-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.mock-button-primary{color:#fff;background:#086AC6;border:1px solid #086AC6;box-shadow:0 6px 18px #1174bd17}
.mock-button-primary:hover{background:#0957a2;color:#fff}
.mock-button-outline{color:#0C4E94;border:1px solid #96BBE2;background:#ffffff9a}
.mock-button-outline:hover{color:#064A80;background:#fff}
.mock-hero-image{position:relative;height:415px;min-width:0;display:flex;align-items:center;justify-content:flex-start;overflow:visible;margin-left:20px}
.mock-hero-image img{display:block;position:relative;width:min(925px,calc(100% + 185px));max-width:none;height:auto;aspect-ratio:925/417;object-fit:contain}
.mock-proof-band{background:#fff;padding:7px 0 14px}
.mock-proof-grid{display:grid;grid-template-columns:1.03fr .99fr;gap:14px}
.mock-proof-card{display:flex;align-items:center;min-height:96px;border-radius:10px;padding:13px 18px;gap:21px}
.mock-proof-location{background:#edf6ff}
.mock-proof-support{background:#fff3f3}
.mock-proof-icon{flex-shrink:0;display:grid;place-items:center;width:58px;height:58px;border-radius:13px}
.mock-location-icon{background:#d8ecfe;color:#1279d6}
.mock-location-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mock-proof-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.mock-proof-copy strong{font-size:18px;line-height:1.25;letter-spacing:-.03em;color:#0A2345}
.mock-proof-copy>span{color:#6983a0;font-size:14px;line-height:1.35}
.mock-swiss-map{width:160px;max-width:28%;height:auto;object-fit:contain;margin-left:auto}
.mock-anydesk-mark{background:#ffe1e2;display:flex;gap:0;justify-content:center;align-items:center}
.mock-anydesk-mark span{width:19px;height:19px;background:#F33339;transform:rotate(45deg);margin-left:-2px;border-radius:2px;clip-path:polygon(0 0,100% 0,100% 100%,80% 100%,0 20%)}
.mock-anydesk-button{margin-left:auto;min-width:210px;background:#e92930;color:#fff;box-shadow:0 9px 22px #dd27271c}
.mock-anydesk-button:hover{color:#fff;background:#cb2128}
.mock-services{padding:7px 0 58px}
.mock-services-header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:13px}
.mock-section-kicker{font-size:11px;letter-spacing:.19em}
.mock-services-header h2{font-size:clamp(1.7rem,2.22vw,2.15rem);line-height:1.14;letter-spacing:-.04em;font-weight:850;color:#0B2244;margin:7px 0 0}
.mock-services-link{display:inline-flex;align-items:center;gap:12px;color:#0865BB;font-size:13px;font-weight:750;padding-bottom:8px}
.mock-services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mock-service-card{display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:218px;border:1px solid #D6EAFB;border-radius:9px;background:linear-gradient(145deg,#F7FBFF,#FBFDFF);padding:12px 16px 14px;color:#102849;transition:transform .18s,border-color .18s,box-shadow .18s}
.mock-service-card:hover,.mock-service-card:focus-visible{transform:translateY(-4px);border-color:#92C6F6;box-shadow:0 12px 30px #1B74B91C}
.mock-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:7px}
.mock-card-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#deefff;color:#0877cf}
.mock-card-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mock-card-number{font-size:11px;font-weight:800;letter-spacing:.12em;color:#93aac4}
.mock-card-title{font-weight:850;letter-spacing:-.025em;font-size:17px;line-height:1.18;margin:0 0 6px}
.mock-card-copy{font-size:13px;line-height:1.32;color:#5f7996}
.mock-card-link{display:inline-flex;align-items:center;gap:10px;color:#0767BA;font-size:13px;font-weight:850;margin-top:auto;padding-top:5px}
.mock-card-link svg{width:17px;height:17px}
.mock-yeastar-note{display:flex;align-items:center;gap:8px;padding:5px 7px;background:#E2F2FF;border-radius:7px;margin-top:5px;font-size:10px;line-height:1.15;color:#28608D}
.mock-yeastar-note strong{font-weight:800}
.mock-star{color:#1689E0;font-size:24px;line-height:1;flex:0 0 auto}
@media(max-width:1230px){
 .mock-hero-inner{grid-template-columns:minmax(360px,41%) minmax(0,59%)}
 .mock-hero-image img{width:min(100%,780px)}
 .mock-proof-card{gap:13px}.mock-anydesk-button{min-width:0;padding:9px 14px;font-size:12px}
 .mock-service-card{padding:14px 14px 17px}.mock-card-title{font-size:16px}
}
@media(max-width:980px){
 .mock-hero-inner{grid-template-columns:1fr;min-height:0;padding-top:42px;padding-bottom:10px}
 .mock-hero-content{padding:0}.mock-hero h1{font-size:clamp(3.3rem,8vw,5.3rem);line-height:.96}
 .mock-hero-content p{max-width:570px}
 .mock-hero-image{height:auto;margin:0 auto;max-width:720px;width:100%;min-height:280px}
 .mock-hero-image img{width:100%}
 .mock-proof-grid{grid-template-columns:1fr}
 .mock-proof-card{min-height:90px}.mock-anydesk-button{min-width:210px}
 .mock-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mock-service-card{min-height:220px}
}
@media(max-width:570px){
 .atoio-home-v2 .wrap{width:calc(100% - 36px)}
 .mock-hero-inner{padding-top:27px;padding-bottom:12px}
 .mock-kicker{font-size:10px}
 .mock-hero h1{font-size:clamp(3.15rem,12.3vw,4.3rem);margin:16px 0 16px}
 .mock-hero-content p{font-size:14.7px;line-height:1.55;margin-bottom:18px}
 .mock-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .mock-hero-actions .mock-button{padding:10px 8px;white-space:normal;font-size:11.8px;min-height:48px;gap:5px}
 .mock-hero-actions svg{width:14px}
 .mock-hero-image{min-height:0;width:calc(100% + 36px);margin:12px -18px 0;overflow:hidden}
 .mock-hero-image img{width:100%;min-width:440px;margin-left:50%;transform:translateX(-50%)}
 .mock-proof-band{padding:11px 0 12px}
 .mock-proof-card{min-height:83px;gap:12px;padding:11px}
 .mock-proof-icon{width:45px;height:45px;border-radius:10px}
 .mock-proof-copy strong{font-size:15px}.mock-proof-copy>span{font-size:12px}
 .mock-swiss-map{width:85px;max-width:22%}
 .mock-proof-support{flex-wrap:wrap}
 .mock-proof-support .mock-proof-copy{flex:1;min-width:180px}
 .mock-proof-support .mock-anydesk-button{margin-left:57px;flex:1;min-width:0;font-size:13px}
 .mock-services{padding:12px 0 45px}
 .mock-services-header{align-items:start;flex-direction:column;gap:8px}
 .mock-services-header h2{font-size:clamp(1.75rem,7.8vw,2.25rem)}
 .mock-services-link{padding:0 0 4px;font-size:12px}
 .mock-services-grid{grid-template-columns:1fr;gap:12px}
 .mock-service-card{min-height:0;padding:17px 17px 18px}
 .mock-card-top{margin-bottom:11px}.mock-card-icon{width:48px;height:48px}
 .mock-card-title{font-size:18px}.mock-card-copy{font-size:14px}
 .mock-card-link{padding-top:13px}
}