/* ==========================================================================
   Komponenten: Buttons, Header, Navigation, Footer, Formulare, FAQ, Schritte, CTA
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:3.1rem;padding:.75rem 1.4rem;border:2px solid transparent;border-radius:10px;font:600 1.05rem/1.15 var(--font-body);text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn .icon{width:1.4rem;height:1.4rem}
.btn > span{display:block;text-align:left}
.btn > span:has(.btn__num){font-size:.88rem;font-weight:600}
.btn__num{display:block;font:700 1.4rem/1.05 var(--font-display);letter-spacing:.01em}
.btn--signal{background:var(--signal);color:var(--ink-on-signal)}
.btn--signal:hover{background:var(--signal-hover)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--ghost-dark{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--ghost-dark:hover{border-color:var(--blau-600);color:var(--link)}
.btn--block{display:flex;width:100%}
.on-blue :focus-visible,.hero :focus-visible,.page-hero :focus-visible,.cta-band :focus-visible{outline-color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;flex:none;line-height:0}
.brand img{display:block;width:auto;height:60px}

.nav{display:flex;align-items:center;margin-left:auto}
.nav__list{display:flex;gap:.1rem;list-style:none}
.nav__item{position:relative}
.nav__item.has-mega{position:static}
.nav__link{display:inline-flex;align-items:center;gap:.3rem;padding:.65rem .8rem;border:0;border-radius:8px 8px 0 0;background:none;color:var(--text);font:600 1rem/1.2 var(--font-body);text-decoration:none;cursor:pointer;white-space:nowrap}
.nav__link:hover,.nav__link[aria-expanded="true"]{background:var(--surface-2)}
.nav__item.is-active > .nav__link{box-shadow:inset 0 -3px 0 var(--signal)}
.nav__chev{width:1rem;height:1rem;transition:transform .15s}
.nav__link[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__cta{display:none}
@media (min-width:1180px) and (max-width:1299px){
  .nav__link{padding:.65rem .55rem;font-size:.95rem}
  .header-wa{padding:.6rem .8rem}
  .site-header__bar{gap:.6rem}
}

.header-wa{display:inline-flex;align-items:center;gap:.55rem;margin-left:.25rem;padding:.6rem 1.05rem;border-radius:10px;background:#25D366;color:#06301B;font:700 1.15rem/1 var(--font-display);letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.header-wa:hover{background:#2EE172}
.header-wa .icon{width:1.4rem;height:1.4rem}
.icon--fill{fill:currentColor;stroke:none}
.nav-toggle{display:none;place-items:center;width:46px;height:46px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--surface);cursor:pointer}
.nav-toggle__close{display:none}
.nav-open .nav-toggle__open{display:none}
.nav-open .nav-toggle__close{display:block}

/* Panels (Desktop) */
.panel{position:absolute;top:calc(100% + .35rem);left:0;z-index:5;display:none;min-width:17rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-l);padding:1.1rem 1.25rem}
.panel::before{content:"";position:absolute;left:0;right:0;top:-.5rem;height:.5rem}
.panel--mega{left:50%;transform:translateX(-50%);width:min(1100px,100vw - 2rem);top:calc(100% - .35rem)}
.panel--cols{min-width:28rem}
@media (hover:hover) and (min-width:1180px){.has-panel:hover > .panel{display:block}}
.has-panel:focus-within > .panel,.nav__link[aria-expanded="true"] + .panel{display:block}
.panel__groups{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.panel__title{margin:0 0 .4rem;font:700 1.1rem/1.2 var(--font-display);color:var(--muted)}
.panel ul{list-style:none}
.panel li a{display:flex;align-items:center;gap:.65rem;padding:.5rem .6rem;margin-inline:-.6rem;border-radius:8px;color:var(--text);text-decoration:none;font-weight:500}
.panel li a:hover{background:var(--blau-100)}
.panel li a .icon{color:var(--icon);width:1.2rem;height:1.2rem}
.panel__list--cols{columns:2;column-gap:1.5rem}
.panel__list--cols li{break-inside:avoid}
.panel__all{display:inline-block;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line);font-weight:700;text-decoration:none;width:100%}
.panel__all:hover{text-decoration:underline}

/* Mobile Navigation */
@media (max-width:1179px){
  .nav-toggle{display:grid;margin-left:.25rem}
  .header-wa{margin-left:auto}
  .nav{position:fixed;inset:var(--header-h) 0 0 0;display:none;flex-direction:column;align-items:stretch;margin:0;padding:.5rem var(--gutter) 7rem;background:var(--surface);overflow-y:auto}
  .nav-open .nav{display:flex}
  .nav-open{overflow:hidden}
  .nav__list{flex-direction:column;gap:0}
  .nav__item.has-mega{position:relative}
  .nav__link{width:100%;justify-content:space-between;padding:1rem .25rem;border-bottom:1px solid var(--line);border-radius:0;font-size:1.2rem}
  .nav__item.is-active > .nav__link{box-shadow:none;color:var(--link)}
  .panel,.panel--mega,.panel--cols{position:static;transform:none;width:auto;min-width:0;border:0;border-radius:0;box-shadow:none;padding:.5rem 0 1rem}
  .panel::before{display:none}
  .panel__groups{grid-template-columns:1fr;gap:1rem}
  .panel__list--cols{columns:1}
  .panel li a{padding:.7rem .6rem;font-size:1.05rem}
  .nav__cta{display:block;margin-top:1.5rem}
}
@media (max-width:520px){
  .header-wa span{display:none}
  .header-wa{padding:.7rem}
}
.no-js .nav{display:flex}
.no-js .panel{position:static;display:block;box-shadow:none}
.no-js .nav-toggle{display:none}

/* ---------- Schnellkontakt-Leiste (Mobil) ---------- */
.cta-bar{display:none}
@media (max-width:760px){
  body{padding-bottom:4.75rem}
  .cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:.5rem;padding:.55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(10,36,64,.14)}
  .cta-bar a{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:3rem;border-radius:10px;font-weight:700;font-size:1rem;text-decoration:none}
  .cta-bar__call{background:var(--signal);color:var(--ink-on-signal)}
  .cta-bar__alt{background:var(--surface-2);color:var(--text)}
  .cta-bar .icon{width:1.3rem;height:1.3rem}
}

/* ---------- Footer ---------- */
.site-footer{margin-top:0;background:var(--blau-950);color:#C7D6E5;font-size:1rem}
.site-footer a{color:#fff;text-decoration-color:rgba(255,255,255,.35)}
.site-footer a:hover{text-decoration-color:var(--signal)}
.site-footer__grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2.5rem;padding-block:4rem 3rem}
.site-footer__logo{display:inline-block;line-height:0}
.site-footer__logo img{display:block;width:240px;max-width:100%;height:auto}
.site-footer address{margin:1rem 0;line-height:1.75}
.site-footer__route{display:inline-flex;align-items:center;gap:.4rem}
.site-footer__title{margin:0 0 .75rem;font:700 1.15rem/1.2 var(--font-display);color:#fff}
.site-footer ul{list-style:none}
.site-footer__col li{margin-bottom:.45rem}
.site-footer__col a{text-decoration:none}
.site-footer__col a:hover{text-decoration:underline}
.site-footer__bottom{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between;padding-block:1.5rem 2rem;border-top:1px solid rgba(255,255,255,.14);font-size:.95rem}
.site-footer__bottom p{margin:0}
.site-footer__bottom ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
@media (max-width:1000px){.site-footer__grid{grid-template-columns:1fr 1fr}.site-footer__brand{grid-column:1/-1}}
@media (max-width:520px){.site-footer__grid{grid-template-columns:1fr}}

/* ---------- Formulare ---------- */
.form{display:block}
.field{display:grid;gap:.3rem;margin-bottom:.95rem}
.field > span{font-weight:600;font-size:.95rem}
.field input,.field select,.field textarea{width:100%;min-height:3rem;padding:.75rem .9rem;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--text)}
.field textarea{resize:vertical;min-height:6rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blau-600);box-shadow:0 0 0 3px rgba(29,111,184,.28)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{margin:.9rem 0 0;font-size:.875rem;line-height:1.45;color:var(--muted)}
.form__status{min-height:1.4em;margin:.6rem 0 0;font-weight:600}
.form__status.is-error{color:var(--danger)}
.form__status.is-ok{color:var(--ok-text)}

/* ---------- Brotkrümel ---------- */
.crumbs{margin-bottom:1.25rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .5rem;list-style:none;font-size:.95rem;color:#BCD3EA}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li + li::before{content:"/";opacity:.55}
.crumbs a{color:#E3EEF8;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:#fff}

/* ---------- Ablauf ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.steps__item{position:relative;padding-top:4.1rem}
.steps__num{position:absolute;top:0;left:0;z-index:1;display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50%;background:var(--blau-800);color:#fff;font:700 1.4rem/1 var(--font-display)}
.steps__item::before{content:"";position:absolute;top:1.5rem;left:3.6rem;right:-.4rem;height:2px;background:repeating-linear-gradient(90deg,var(--blau-300) 0 7px,transparent 7px 14px)}
.steps__item:last-child::before{display:none}
.steps h3{margin-bottom:.4rem}
.steps p{margin:0;color:var(--muted)}
@media (prefers-color-scheme:dark){.steps__num{background:var(--blau-700)}}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:0}
  .steps__item{padding:0 0 1.75rem 4.4rem;min-height:4rem}
  .steps__item::before{top:3.4rem;bottom:.2rem;left:1.5rem;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--blau-300) 0 7px,transparent 7px 14px)}
}

/* Vertikale Variante (z. B. im Fließtext) */
.steps--stack{grid-template-columns:1fr;gap:0}
.steps--stack .steps__item{padding:0 0 1.75rem 4.4rem;min-height:4rem}
.steps--stack .steps__item::before{top:3.4rem;bottom:.2rem;left:1.5rem;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--blau-300) 0 7px,transparent 7px 14px)}

/* ---------- FAQ ---------- */
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem .25rem;font:700 1.3rem/1.2 var(--font-display);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--link)}
.faq summary .icon{width:1.4rem;height:1.4rem;transition:transform .2s;color:var(--icon)}
.faq details[open] summary .icon{transform:rotate(180deg)}
.faq__a{padding:0 .25rem 1.25rem;max-width:70ch;color:var(--muted)}
.faq__a p{margin:0}

/* ---------- Chips und Linklisten ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none}
.chips a{display:inline-block;padding:.5rem 1rem;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--text);font-weight:600;text-decoration:none}
.chips a:hover{border-color:var(--blau-600);background:var(--blau-100)}
.linklist{list-style:none;display:grid;gap:.5rem}
.linklist a{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);color:var(--text);text-decoration:none}
.linklist a:hover{border-color:var(--blau-600)}
.linklist .icon{margin-top:.15rem;color:var(--icon);width:1.5rem;height:1.5rem}
.linklist strong{display:block;font:700 1.15rem/1.2 var(--font-display)}
.linklist small{display:block;margin-top:.15rem;color:var(--muted);font-size:.95rem;line-height:1.4}

/* ---------- Hinweiskasten ---------- */
.notice{padding:clamp(1.5rem,4vw,2.5rem);border:1.5px dashed var(--line-strong);border-radius:var(--r-l);background:var(--surface)}
.notice h2{font-size:1.7rem}
.notice__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}

/* ---------- Abschluss-Band mit Formular ---------- */
.cta-band{position:relative;color:#fff;background-color:var(--hero-bg);background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;padding-block:var(--section-y)}
.cta-band__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.cta-band h2{color:#fff}
.cta-band p{color:#D5E4F3;max-width:52ch}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 .9rem}
.cta-band__avail{font-weight:600;color:#fff!important}
.cta-band__form{padding:clamp(1.4rem,3vw,2rem);border-radius:var(--r-l);background:var(--surface);color:var(--text);box-shadow:var(--shadow-l)}
.cta-band__form h3{margin-bottom:1rem}
.cta-band .form__note{color:var(--muted)}
@media (max-width:900px){.cta-band__grid{grid-template-columns:1fr}}

/* ---------- Geteilte Bausteine (Startseite und Unterseiten) ---------- */
.blueprint{background-color:var(--hero-bg);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px}
.section__head{max-width:46rem;margin-bottom:2.5rem}
.section__head h2{margin-bottom:.4em}
.section__head p{margin:0;color:var(--muted);font-size:1.15rem}
.area{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.area__map{margin:0;padding:1.25rem 1.25rem .9rem;border-radius:var(--r-l);color:#fff;box-shadow:var(--shadow-l)}
.area__map .map{width:100%;height:auto}
.map__land{fill:rgba(255,255,255,.09);stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.map__dot{fill:var(--signal);stroke:rgba(10,36,64,.55);stroke-width:1}
.map__ring{fill:rgba(10,36,64,.7);stroke:#fff;stroke-width:1.6}
.map__core{fill:#fff}
.map text{fill:#fff;font:700 10px var(--font-display)}
.area__map figcaption{margin-top:.5rem;font-size:.92rem;color:#D5E4F3;text-align:center}
.area .chips{margin:1.5rem 0}
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.faq-grid__intro{position:sticky;top:calc(var(--header-h) + 2rem)}
.faq-grid__intro p{color:var(--muted)}
@media (max-width:1000px){
  .area,.faq-grid{grid-template-columns:1fr}
  .faq-grid__intro{position:static}
}

/* ---------- Video ---------- */
.video{margin:0}
.video__frame{overflow:hidden;border-radius:var(--r-l);background:#000;box-shadow:var(--shadow-m)}
.video video{display:block;width:100%;height:auto;aspect-ratio:640/356}
.video figcaption{margin-top:.6rem;font-size:.92rem;color:var(--muted)}
.video-row{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:clamp(2.5rem,5vw,4rem)}
.video-row h3{margin-bottom:.5rem}
.video-row p{color:var(--muted)}
@media (max-width:900px){.video-row{grid-template-columns:1fr}}
.prose .video{margin:1.25rem 0 1.5rem}