/* ATOIO / Option B: visuell ruhigere Startseite.
 * Rein additive, nur auf der Startseite eingebundene CSS-Anpassungen.
 * Bestehendes Layout/Unterseiten bleiben unangetastet.
 */

/* Weniger visuelle Bewegung im Hero. */
.mock-hero{background:linear-gradient(112deg,#F9FCFF 0%,#F2F8FC 48%,#EAF5FC 100%)}
.mock-hero:before{opacity:.095;background-size:145px 145px}
.mock-hero-inner{min-height:508px;gap:12px}
.mock-hero-content{padding:42px 0 45px}
.mock-hero h1{margin:22px 0 23px}
.mock-hero-content p{line-height:1.62;margin-bottom:22px}
.mock-hero-actions{gap:14px}
.mock-hero-image{height:442px;margin-left:4px;justify-content:center}
.mock-hero-image img{width:min(814px,calc(100% + 75px));max-width:none}

/* Bewusste Trennung von Einstiegsbereich, Service-Hinweisen und Angeboten. */
.mock-proof-band{padding:19px 0 30px}
.mock-proof-grid{gap:20px}
.mock-proof-card{min-height:111px;padding:17px 22px;gap:18px;border-radius:12px}
.mock-proof-location{background:#EFF7FD}
.mock-proof-support{background:#FCF8F8}
.mock-proof-icon{width:55px;height:55px;background-color:#E0EFFB}
.mock-anydesk-mark{background:#FCEAED}
.mock-anydesk-mark span{background:#DD4A4F;width:16px;height:16px}
.mock-anydesk-button{background:#D93D43;box-shadow:0 5px 14px rgba(178,52,58,.1)}
.mock-anydesk-button:hover{background:#BC2D34}

/* Vier Karten bleiben nebeneinander, erhalten aber Luft zum Lesen. */
.mock-services{padding:26px 0 94px}
.mock-services-header{margin-bottom:25px}
.mock-services-grid{gap:19px}
.mock-service-card{min-height:266px;padding:21px 20px 22px;border-radius:12px;background:#F8FBFD;border-color:#DBEAF6}
.mock-card-top{margin-bottom:15px}
.mock-card-icon{background:#E3F1FC}
.mock-card-title{margin-bottom:10px}
.mock-card-copy{font-size:13.4px;line-height:1.53;color:#5C7690}
.mock-card-link{padding-top:15px}
.mock-yeastar-note{background:#EDF5FA;padding:7px 9px;margin-top:10px;font-size:10.5px;line-height:1.35}
.mock-star{font-size:17px;color:#438DB9}

/* Angenehmes Stacking an mittleren Displays. */
@media(max-width:1230px){
 .mock-hero-image img{width:min(100%,750px)}
 .mock-hero-inner{gap:22px}
 .mock-service-card{padding:19px 17px 21px}
}
@media(max-width:980px){
 .mock-hero-inner{min-height:0;padding-top:52px;padding-bottom:20px;gap:18px}
 .mock-hero-content{padding:0}
 .mock-hero h1{margin:20px 0 24px}
 .mock-hero-image{height:auto;min-height:265px;margin:0 auto;max-width:630px;width:100%}
 .mock-hero-image img{width:100%}
 .mock-proof-band{padding:22px 0 34px}
 .mock-proof-card{min-height:102px}
 .mock-services{padding:24px 0 74px}
 .mock-services-grid{gap:18px}
 .mock-service-card{min-height:253px}
}
@media(max-width:570px){
 .mock-hero-inner{padding-top:31px;padding-bottom:18px;gap:14px}
 .mock-hero h1{margin:16px 0 20px}
 .mock-hero-content p{line-height:1.62;margin-bottom:22px}
 .mock-hero-image{width:calc(100% + 16px);margin:14px -8px 0;min-height:0;overflow:hidden}
 .mock-hero-image img{width:100%;min-width:0;margin:0;transform:none}
 .mock-proof-band{padding:19px 0 29px}
 .mock-proof-grid{gap:14px}
 .mock-proof-card{min-height:91px;padding:16px 14px}
 .mock-proof-support{flex-wrap:wrap}
 .mock-proof-support .mock-anydesk-button{margin-left:57px}
 .mock-services{padding:23px 0 67px}
 .mock-services-header{margin-bottom:23px}
 .mock-services-grid{gap:15px}
 .mock-service-card{min-height:0;padding:21px 19px 23px}
 .mock-card-copy{font-size:14px;line-height:1.55}
 .mock-card-top{margin-bottom:13px}
}


/* Variante B: Hero ohne doppelte CTAs; dezente Vertrauenszeile erhalten. */
.mock-hero-inner{min-height:470px}
.mock-hero-content{padding:30px 0 34px}
.mock-hero-image{height:410px}
.mock-hero-content p{margin-bottom:0}
.mock-hero-trust{display:flex;align-items:center;gap:11px;margin-top:25px;font-size:12.5px;font-weight:600;line-height:1.6;letter-spacing:.012em;color:#285579}
.mock-trust-dot{width:7px;height:7px;display:inline-block;flex:0 0 7px;border-radius:999px;background:#359BDD;box-shadow:0 0 0 5px rgba(58,156,220,.13)}
@media(max-width:980px){
 .mock-hero-inner{min-height:0;padding-top:48px;padding-bottom:12px}
 .mock-hero-content{padding:0}
 .mock-hero-image{height:auto}
 .mock-hero-trust{margin-top:21px}
}
@media(max-width:570px){
 .mock-hero-inner{padding-top:31px;padding-bottom:8px;gap:10px}
 .mock-hero-content p{margin-bottom:0}
 .mock-hero-trust{margin-top:20px;font-size:12px;gap:10px}
 .mock-hero-image{height:auto;margin-top:9px}
}