/* ===== Design: weich & freundlich – Foto im Rahmen, Pillen-Buttons, sanfte Karten ===== */
:root{--light:#f7f5fc;--header-bg:#ffffff;--soft:#ece7fb}
header{background:rgba(255,255,255,.97);border-radius:0 0 30px 30px;box-shadow:0 8px 30px rgba(73,56,137,.10)}
header.is-scrolled{box-shadow:0 8px 26px rgba(73,56,137,.14)}
.links a{font-size:21px;padding:9px 18px;border-radius:999px}
.links a:hover,.links a:focus-visible{text-decoration:none;background:var(--soft)}
header.is-scrolled .links a{font-size:18px;padding:6px 14px}

.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;min-height:0;overflow:visible;background:none;
  padding:56px max(34px,calc((100% - 1200px)/2)) 90px}
.hero:before{content:"";position:absolute;z-index:0;right:-8%;top:-60px;width:62%;height:120%;background:radial-gradient(closest-side,rgba(168,152,220,.35),rgba(168,152,220,0));}
.hero-content{padding:0;margin:0;width:auto}
.hero-media{position:relative;inset:auto;order:2;z-index:2;aspect-ratio:5/4;border-radius:18px;overflow:hidden;box-shadow:0 34px 60px -26px rgba(73,56,137,.55)}
.hero-media img{object-position:35% center}
.hero h1{font-weight:300}
.cta{border-radius:999px;padding:14px 28px;box-shadow:0 10px 22px -10px rgba(89,67,155,.7)}
.cta:hover{transform:translateY(-2px)}
.outline{border-radius:999px;padding:13px 27px;background:#fff;border-color:#cfc5ee}
.outline:hover{background:var(--soft)}

main section{padding:84px 32px}
#leistungen{padding-top:40px}
.card{border-radius:26px;border:none;box-shadow:0 14px 34px -18px rgba(73,56,137,.35)}
.cards .card:before{height:5px;background:linear-gradient(90deg,#8a74d0,#c4b8ee)}
.cards .card:hover{box-shadow:0 26px 44px -18px rgba(73,56,137,.45);border-color:transparent}
.card .num{background:var(--soft);padding:4px 13px;border-radius:999px;margin-bottom:14px}
.cards .card:hover .num{letter-spacing:.12em;background:#ddd5f6}
.white{margin:0 clamp(12px,3vw,40px);border-radius:48px;box-shadow:0 20px 50px -30px rgba(73,56,137,.35)}
.portrait{border-radius:32px;background:var(--soft)}
.line{background:#e3ddf3}
#einsatzgebiet .card{border-radius:30px}
.contact{margin:30px clamp(12px,3vw,40px) 40px;border-radius:48px;background:linear-gradient(135deg,#5a44a0,#8068c8);color:#fff;padding:90px 32px}
.contact .eyebrow{color:#e0d8fa}
.contact h2,.contact p{color:#fff}
.contact-items a{color:#fff;background:rgba(255,255,255,.16);padding:10px 22px;border-radius:999px;text-decoration:none;transition:background-color .25s}
.contact-items a:hover{background:rgba(255,255,255,.28)}
footer{background:none;color:var(--muted)}
@media(max-width:850px){
  .hero{grid-template-columns:1fr;padding:34px 22px 60px;gap:34px}
  .hero-media{order:2;aspect-ratio:4/3;border-radius:16px}
  .hero-media img{object-position:35% center}
  .hero-content{align-self:auto}
  .white,.contact{border-radius:28px}
}
@media(max-width:720px){header{border-radius:0 0 22px 22px}}
@media(max-width:520px){.hero{min-height:0}.hero-content{padding:0}}
#leistungen{scroll-margin-top:70px}

/* Kopfzeile: größere Schrift auch auf Tablet/Handy */
@media(max-width:1100px){.links a{font-size:19px;padding:8px 14px}.nav{gap:18px}}
@media(max-width:950px){.links a{font-size:18px;padding:7px 12px}header.is-scrolled .links a{font-size:17px}}
@media(max-width:720px){.links a{font-size:18px;padding:7px 14px}.links{gap:4px 6px}header.is-scrolled .links a{font-size:15px;padding:5px 9px}}
@media(max-width:380px){.links a{font-size:16px;padding:6px 10px}header.is-scrolled .links a{font-size:14px;padding:4px 7px}}
footer{padding:26px 32px}
footer .footer-links a{color:var(--ink)}