@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/outfit-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/outfit-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/outfit-latin-700-normal.woff2) format("woff2")}

:root{--petrol:#0E4A5C;--petrol-dark:#082F3B;--petrol-mid:#1D6175;--hell:#E3F1F5;--grund:#F5F7F8;--linie:#DDE4E7;--text:#1B2A30;--text2:#3A4A50;--akzent:#C2410C;--akzent-dark:#9A3412}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;font-size:18px;line-height:1.6;color:var(--text);background:var(--grund)}
img{max-width:100%;height:auto;display:block}
a{color:var(--petrol)}a:hover{color:var(--petrol-dark)}
h1,h2,h3{font-family:Outfit,system-ui,sans-serif;line-height:1.2;margin:0}
h2{font-weight:600;font-size:clamp(28px,4vw,36px);color:var(--petrol)}
h3{font-weight:600;font-size:24px}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:72px 24px}
.weiss{background:#fff}.grau{background:var(--grund)}.hellblau{background:var(--hell)}
.dunkel{background:var(--petrol);color:#fff}.dunkel h2{color:#fff}
.zeile{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.zeile>*{flex:1 1 400px;min-width:0}
.stapel{display:flex;flex-direction:column;gap:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:10px;background:var(--akzent);color:#fff;text-decoration:none;font-weight:600;font-size:18px;border:none;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--akzent-dark);color:#fff}
.btn-rand{background:transparent;border:2px solid #fff}.btn-rand:hover{background:rgba(255,255,255,.12)}
.mehr{font-weight:600}
.platzhalter{border-radius:16px;background:#E8EEF0;border:2px dashed #9FB4BB;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:#4A5A60;font-size:16px;min-height:300px}
.dunkel .platzhalter{background:var(--petrol-mid);border-color:#6FA9B8;color:#D5EBF1}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px 16px;z-index:10}

/* Kopf */
.kopf{background:#fff;border-bottom:1px solid var(--linie)}
.kopf .wrap{padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.marke{text-decoration:none;display:flex;flex-direction:column;line-height:1.2}
.marke b{font-family:Outfit,sans-serif;font-weight:700;font-size:22px;color:var(--petrol)}
.marke span{font-size:14px;color:#4A5A60}
.kopf nav{display:flex;flex-wrap:wrap;gap:24px;font-size:16px;font-weight:500}
.kopf nav a{text-decoration:none}
.kopf .btn{min-height:44px;font-size:16px;padding:0 18px}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;top:0;right:0;bottom:0;width:62%;background:url(../bilder/josef-obermeier-hero.webp) center 20%/cover no-repeat}
.hero-verlauf{position:absolute;inset:0;background:linear-gradient(90deg,#0E4A5C 0%,#0E4A5C 38%,rgba(14,74,92,.75) 50%,rgba(14,74,92,.15) 72%,rgba(14,74,92,0) 100%)}
.hero .wrap{position:relative;z-index:2;display:flex;align-items:center;min-height:520px;padding-top:112px;padding-bottom:112px}
.hero-text{max-width:600px;display:flex;flex-direction:column;gap:24px}
.hero .ueber{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#BFE3EC}
.hero h1{font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1.1}
.hero .unter{font-size:20px;color:#E3F1F5;max-width:600px}
.hero .vertrauen{font-size:15px;color:#BFE3EC}
.knoepfe{display:flex;flex-wrap:wrap;gap:16px}
.hero-bild{flex:1 1 400px;min-width:0}
.hero-bild .platzhalter{min-height:420px}

.foto{width:100%;height:auto;border-radius:16px;object-fit:cover}
.hero-foto{aspect-ratio:3/2}
.vorteile{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vorteile li{background:var(--hell);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:4px}
.vorteile strong{font-family:Outfit,sans-serif;font-size:22px;color:var(--petrol)}
.vorteile span{font-size:16px;color:var(--text2)}
.leitung{display:flex;gap:20px;align-items:center}
.leitung img{width:112px;height:112px;border-radius:50%;object-fit:cover;flex-shrink:0}
@media (max-width:480px){.vorteile{grid-template-columns:1fr}.leitung{flex-direction:column;align-items:flex-start}}

.plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;max-width:760px;background:#fff;border:1px solid var(--linie);border-radius:16px;overflow:hidden}
.plan li{display:flex;gap:20px;padding:16px 24px;border-bottom:1px solid var(--linie);align-items:baseline}
.plan li:last-child{border-bottom:0}
.plan .zeit{font-family:Outfit,sans-serif;font-weight:600;color:var(--petrol);min-width:76px}
.plan li div{display:flex;flex-direction:column}
.plan li div span{font-size:16px;color:var(--text2)}
.plan li.pause{background:var(--grund)}
.plan li.pause strong{font-weight:500;color:var(--text2)}
.liste-box{background:#fff;border-radius:16px;padding:24px 28px;display:flex;flex-direction:column;gap:12px}
.liste-box h3{font-size:20px;color:var(--petrol)}
.punkte{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--text2)}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between;padding-top:56px;padding-bottom:56px}

/* Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.karte{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:16px}
.karte p{color:var(--text2)}
.karte .mehr{margin-top:auto}

/* Ablauf */
.schritte{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.schritte li{display:flex;flex-direction:column;gap:8px}
.schritte .nr{width:44px;height:44px;border-radius:50%;background:var(--hell);color:var(--petrol);display:flex;align-items:center;justify-content:center;font-family:Outfit,sans-serif;font-weight:700;font-size:20px}
.schritte strong{font-size:19px}
.schritte span:last-child{color:var(--text2);font-size:16px}

/* Leistungen */
.haken{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 24px}
.haken li{display:flex;gap:12px;align-items:center}
.haken svg{flex-shrink:0}

/* Preis */
.preisbox{background:#fff;border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:8px}
.preisbox .klein{font-size:16px;color:#4A5A60}
.preisbox .preis{font-family:Outfit,sans-serif;font-weight:700;font-size:40px;color:var(--petrol)}
.preisbox .btn{margin-top:16px}
.hinweis{background:var(--grund);border-radius:12px;padding:20px;color:#4A5A60;font-size:16px}

/* FAQ */
.faq{max-width:860px}
details{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:20px 24px}
summary{cursor:pointer;font-weight:600;font-size:19px;list-style:none;position:relative;padding-right:32px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:-2px;font-size:26px;color:var(--petrol)}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--text2)}

/* Kontakt */
address{font-style:normal;display:flex;flex-direction:column;gap:4px}
.dunkel address a{color:#fff}
.formular{background:#fff;color:var(--text);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:16px}
.formular label{display:flex;flex-direction:column;gap:6px;font-size:16px;font-weight:500}
.formular input,.formular select,.formular textarea{min-height:48px;border:1px solid #9FB4BB;border-radius:8px;padding:10px 14px;font:inherit;font-weight:400;background:#fff;color:var(--text)}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:3px solid #7FB8C8;outline-offset:1px}
.formular .paar{display:flex;flex-wrap:wrap;gap:16px}
.formular .paar label{flex:1 1 180px}
.formular .check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:15px;color:var(--text2)}
.formular .check input{width:22px;height:22px;min-height:0;margin-top:2px;flex-shrink:0}
.formular .hp{position:absolute;left:-9999px}
.karte-laden{min-height:200px;border-radius:12px;background:var(--petrol-mid);border:2px dashed #6FA9B8;color:#D5EBF1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:16px;font-size:16px}
.karte-laden button{min-height:44px;padding:0 18px;border-radius:8px;border:2px solid #fff;background:transparent;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.karte-laden iframe{width:100%;height:300px;border:0;border-radius:12px}

/* Fuss */
.fuss{background:var(--petrol-dark);color:#BFD3D9;font-size:15px}
.fuss .wrap{padding:32px 24px;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between}
.fuss nav{display:flex;flex-wrap:wrap;gap:24px}
.fuss a{color:#fff}

/* Unterseiten */
.text-seite{max-width:860px}
.text-seite h1{font-size:clamp(30px,4vw,42px);color:var(--petrol);margin-bottom:24px}
.text-seite h2{font-size:24px;margin:32px 0 8px}
.text-seite p{margin:0 0 12px}

@media (max-width:760px){.hero-bg{width:100%;opacity:.35}.hero-verlauf{background:rgba(14,74,92,.55)}.hero .wrap{min-height:0;padding-top:64px;padding-bottom:64px}}
@media (max-width:640px){.wrap{padding:48px 20px}.kopf nav{display:none}}