:root{--blau:#386cb0;--hell:#6eaefb;--text:#222;--grau:#444;--bg:#f7f7f7}
*{box-sizing:border-box}
body{margin:0;font-family:"Source Sans 3","Source Sans Pro",Segoe UI,Arial,sans-serif;color:var(--grau);line-height:1.7;font-size:18px;background:#fdfdfd}
h1,h2,h3{font-family:Arial,Helvetica,sans-serif;color:var(--text);line-height:1.25;margin:.2em 0 .5em}
h1{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:400}h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.eyebrow{font-family:Arial,Helvetica,sans-serif;color:var(--blau);margin:0}
img{max-width:100%;display:block}a{color:var(--blau)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;background:var(--hell);color:#fff;font-family:Montserrat,Arial,sans-serif;font-weight:700;text-decoration:none;padding:16px 42px;border-radius:40px;border:0;cursor:pointer;font-size:1rem}
.btn.dunkel{background:var(--blau)}.btn:hover{filter:brightness(.92)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
header{position:fixed;top:0;left:0;right:0;z-index:50;background:#fff;box-shadow:0 2px 10px #0000000f}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px;gap:16px;flex-wrap:wrap}
.logo{font-family:Montserrat,Arial,sans-serif;font-weight:700;font-size:1.4rem;color:#1c3d6b;text-decoration:none}
nav{display:flex;gap:10px;flex-wrap:wrap}
nav a{background:var(--bg);color:var(--text);text-decoration:none;font-family:Montserrat,Arial,sans-serif;font-weight:600;font-size:.95rem;padding:10px 22px;border-radius:30px}
nav a:hover,nav a.aktiv{background:var(--blau);color:#fff}
.hero{background:linear-gradient(120deg,#eef1f4,#fafafa);padding:150px 0 80px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero p{max-width:34em;color:var(--text)}.hero .btns{display:flex;gap:40px;flex-wrap:wrap;margin-top:28px}
.hero-bilder{position:relative;min-height:520px}
.hero-bilder .rund{width:88%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.hero-bilder .klein{position:absolute;right:0;bottom:0;width:60%;border-radius:4px}
section{padding:80px 0}.grau{background:var(--bg)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.zwei img{border-radius:6px;width:100%}
blockquote{margin:24px 0;padding:22px 34px;border-left:2px solid var(--blau);font-style:italic;background:#fafafa}
.haken{list-style:none;padding:0;columns:2;gap:30px;margin:28px 0}
.haken li{padding-left:36px;position:relative;break-inside:avoid;margin-bottom:12px}
.haken li:before{content:"✓";position:absolute;left:0;top:4px;width:22px;height:22px;background:var(--blau);color:#fff;border-radius:4px;font-size:.85rem;line-height:22px;text-align:center}
.leistungen{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);padding:0}
.leistungen .text{padding:80px 60px 80px max(24px,calc((100vw - 1200px)/2))}
.leistungen img{width:100%;height:100%;object-fit:cover}
.vorteile{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.vorteile img{border-radius:6px;width:100%}.vorteile h3{font-size:1.05rem;margin:14px 0 4px}
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px}
.schritt img{width:206px;height:206px;object-fit:cover;border-radius:50% 50% 50% 0}
.schritt{display:block}.schritt .z{display:flex;gap:18px;margin-top:22px;align-items:flex-start}
.schritt .n{font-family:Montserrat,Arial,sans-serif;font-weight:800;font-size:4rem;color:var(--blau);line-height:1}
.schritt h3{font-weight:400;font-size:1.3rem;margin:0}.schritt p{margin:0}
.mitte{text-align:center;max-width:640px;margin:0 auto}
.ueber{display:grid;grid-template-columns:1fr 1.3fr;gap:50px;align-items:center}
.ueber .bilder{display:grid;grid-template-columns:1fr 1fr;gap:40px}.ueber .bilder img{border-radius:6px;height:100%;object-fit:cover}
.kontakt{background:url(images/detail.jpg) center/cover;padding:40px 0}
.karte{background:var(--bg);display:grid;grid-template-columns:1fr 1.1fr;gap:50px;padding:60px}
.tel{display:flex;gap:16px;align-items:center;margin-top:34px}
.tel span{background:var(--blau);color:#fff;width:68px;height:68px;border-radius:6px;display:grid;place-items:center;font-size:1.8rem}
.tel a{font-family:Montserrat,Arial,sans-serif;font-weight:700;font-size:1.9rem;text-decoration:none}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
form label{font-family:Montserrat,Arial,sans-serif;font-weight:600;font-size:.95rem;color:var(--text);display:block}
form .voll{grid-column:1/-1}
input,select,textarea{width:100%;font:inherit;padding:14px;border:0;background:#fff;box-shadow:0 1px 3px #0003;margin-top:6px}
textarea{min-height:110px}.hp{position:absolute;left:-9999px}
.meldung{grid-column:1/-1;padding:14px;background:#e6f0ff;border-left:4px solid var(--blau)}
footer{background:var(--bg);padding:40px 0}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px 40px}
footer .block{font-size:.95rem;line-height:1.7}
footer .block a{color:var(--text);text-decoration:none}
footer .block a:hover{color:var(--blau)}
footer nav{display:flex;flex-direction:column;gap:6px}
footer nav a{background:none;padding:4px 8px;color:var(--text);text-decoration:none;border-radius:18px;margin-left:-8px;width:max-content}
footer nav a:hover{color:#fff;padding-left:10px;padding-right:10px;margin-left:-10px}
@media(max-width:600px){footer .wrap{flex-direction:column;gap:22px}}
.seitenkopf{background:linear-gradient(120deg,#eef1f4,#fafafa);padding:140px 0 40px}
@media(max-width:860px){.hero .wrap,.zwei,.vorteile,.ueber,.karte,.leistungen,.schritte{grid-template-columns:1fr}
.hero{padding-top:190px}.hero-bilder{min-height:0}.leistungen .text{padding:60px 24px}.karte{padding:30px 22px}
.haken{columns:1}.ueber .bilder{gap:14px}form{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.logo img{height:92px;width:auto;display:block;image-rendering:auto}
@media(max-width:860px){.logo img{height:68px}}
.rechtstext{max-width:800px}
.rechtstext h2{font-family:Arial,Helvetica,sans-serif;font-size:1.3rem;font-weight:700;margin:2em 0 .5em;padding-bottom:.35em;color:var(--blau);border-bottom:2px solid var(--bg)}
.rechtstext h2:first-of-type{margin-top:1em}
.rechtstext h3{font-family:Arial,Helvetica,sans-serif;font-size:1.05rem;font-weight:700;margin:1.4em 0 .3em;color:var(--text)}
.rechtstext p{margin:0 0 .9em}
.rechtstext ul.haken{margin:0 0 1.1em}
.rechtstext address,.rechtstext .block{font-style:normal;background:var(--bg);padding:18px 22px;border-radius:6px;margin:0 0 1.1em;line-height:1.6}
.rechtstext .hinweis{background:#eef3fb;padding:16px 20px;border-left:3px solid var(--blau);font-size:.95rem;border-radius:0 4px 4px 0}
.rechtstext strong.tag,.rechtstext .tag{color:var(--blau);font-family:Montserrat,Arial,sans-serif;font-size:.85rem}
.rechtstext hr{border:0;border-top:1px solid #e2e2e2;margin:2.4em 0}
.rechtstext .stand{color:#888;font-size:.95rem}

/* Kontakt: Auswahlfeld und geöffnete Leistungsliste bündig halten */
#service{box-sizing:border-box;}

/* Kontakt – Leistungs-Dropdown: Fokusrahmen innerhalb der tatsächlichen
   Select-Breite. Dadurch sind Auswahlfeld und native geöffnete Liste
   links/rechts exakt bündig. */
#service:focus,
#service:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--blau), 0 1px 3px #0003;
}