:root{
  --navy:#1e3a5f; --navy-light:#4a7ab5; --navy-dark:#142943;
  --bg:#f7f5f1; --bg-alt:#f2efe9; --card:#efebe4; --card-2:#e6e1d7; --text:#1a1a1a; --muted:#5c5a55;
  --border:#ddd7cc; --border-strong:#c6bfb1; --soft:rgba(30,58,95,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--navy-light)}
p{text-wrap:pretty}
img{max-width:100%}
input,textarea,button{font-family:inherit;font-size:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--navy-light);outline-offset:3px}

/* Hover-Zustände (im Original als style-hover) */
.lnk{color:var(--text)}
.lnk:hover{color:var(--navy)}
.btn:hover{background:var(--navy-dark);color:#fff}
.legal-lnk:hover{color:var(--navy)}

/* Navigation */
[data-burger]{display:none}
[data-menu]{display:none}
[data-menu].is-open{display:flex}
@media (max-width:900px){ [data-navlinks]{display:none!important} [data-burger]{display:grid!important} }
@media (max-width:820px){ [data-portrait]{position:static!important} }
[data-footlinks] a{padding-block:11px}
[data-legal] a{padding-block:11px}
@media (max-width:600px){ [data-navcta]{display:none!important} }
@media (max-width:640px){
  [data-footgrid]{display:flex!important;flex-direction:column;gap:0!important;text-align:center}
  [data-footgrid] > div{display:flex;flex-direction:column;align-items:center;padding:24px 0;border-top:1px solid var(--border)}
  [data-footcol="logo"]{order:0;padding:0 0 26px!important;border-top:none!important}
  [data-footcol="logo"] img{width:168px!important}
  [data-footcol="kontakt"]{order:1}
  [data-footgrid] > div:not([data-footcol]){order:2}
  [data-footlinks]{align-items:center;gap:0!important;margin-top:10px!important}
  [data-footlinks] a{padding-block:12px}
  [data-legal]{flex-direction:column;align-items:center!important;text-align:center;gap:14px!important;margin-top:34px!important}
  [data-legalspacer]{display:none}
  [data-copyright]{order:2}
}
@media (max-width:600px){ [data-step]{padding:22px 0!important} [data-steps]{gap:30px!important} [data-bullets]{gap:9px!important;margin-top:14px!important} }
@media (max-width:600px){
  [data-herocta]{display:flex!important;justify-content:center;width:100%;max-width:420px;margin-top:28px!important}
  header#top{padding-top:30px!important;padding-bottom:40px!important}
  #ablauf,#angebote,#faq,#kontakt{padding-top:44px!important;padding-bottom:44px!important}
}

/* Abschnitts-Themen: hell (Standard) und dunkel */
[data-sec]{--sec-bg:transparent;--sec-fg:var(--text);--sec-muted:var(--muted);--sec-line:var(--border);--sec-accent:var(--navy-light);--sec-card:var(--card-2)}
[data-sec="dark"]{--sec-bg:var(--navy-dark);--sec-fg:#f4f1ea;--sec-muted:#b3c3d6;--sec-line:rgba(255,255,255,.15);--sec-accent:#8fb4dd;--sec-card:rgba(255,255,255,.06)}

/* FAQ – Inhalt steht im HTML, auch ohne JavaScript aufklappbar */
.faq-item{border-bottom:1px solid var(--border-strong)}
.faq-item > summary{list-style:none;display:flex;align-items:center;gap:20px;padding:24px 4px;cursor:pointer;font-size:clamp(17px,2vw,20px);font-weight:600;color:var(--text)}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary::after{content:"+";flex:none;font-size:22px;line-height:1;color:var(--navy-light)}
.faq-item[open] > summary::after{content:"\2013"}
.faq-item > summary > span{flex:1}
.faq-item p{margin:0;padding:0 4px 26px;color:var(--muted);font-size:16px;max-width:760px}