:root{
  --brand:#0a2a31; --brand-2:#0e6b7f; --text:#0a0a0a; --bg:#fff;
  --muted:#e7eef0; --muted-2:#f5fafc; --focus:#ffb703; --link:#094a55;
  --radius:16px; --radius-lg:22px; --shadow:0 8px 28px rgba(0,0,0,.12);
}
/* Base */
html{scroll-behavior:smooth; box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto}
a{color:var(--link)}
.container{max-width:1152px;margin-inline:auto;padding-inline:1rem}
.section{padding:3.25rem 0; scroll-margin-top:96px}
@media (min-width:900px){.section{padding:4.25rem 0}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;margin:-1px}
.skip:focus{position:absolute;left:1rem;top:1rem;background:#fff;padding:.5rem .75rem;border:2px solid var(--focus);border-radius:8px;z-index:999}

/* Buttons */
.btn{position:relative;display:inline-block;border:0;border-radius:999px;padding:.8rem 1.15rem;font-weight:700;text-decoration:none;line-height:1;transition:transform .2s ease, box-shadow .2s ease;background-clip:padding-box;-webkit-background-clip:padding-box;background-origin:padding-box;-webkit-tap-highlight-color:transparent;overflow:hidden;isolation:isolate;z-index:0}
/* Edge-safe gradient for primary CTA */
.btn-primary{background:none;color:#fff;filter:drop-shadow(0 8px 20px rgba(14,107,127,.25))}
.btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,var(--brand-2),#1291aa);transform:translateZ(0);z-index:-1;pointer-events:none}
.btn-outline{background:transparent;border:2px solid var(--brand-2);color:var(--brand-2)}
.btn-invert{background:transparent;border:2px solid #d1f0f7;color:#d1f0f7}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (hover:hover){
  .btn-outline:hover,.btn-invert:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.16)}
  .btn-primary:hover{transform:none}
  .btn-primary:hover::before{filter:brightness(1.05)}
}

/* Grid & Cards */
.grid-2{display:grid;gap:1.25rem}
.grid-3{display:grid;gap:1.25rem}
@media (min-width:720px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--muted);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}
.card h3{margin-top:0}

/* Sticky Header */
.site-header{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg,#0a2a31 0%,#0d3942 100%);color:#fff}
.site-header.is-stuck{ box-shadow:0 10px 28px rgba(0,0,0,.18) }
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:#fff}
.logo img{width:40px;height:40px;border-radius:50%;background:#fff}
.burger{order:2;background:transparent;border:2px solid #fff;color:#fff;border-radius:10px;padding:.45rem .65rem}
.burger:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
nav[aria-label="Hauptnavigation"] ul{list-style:none;margin:0;padding:0}
nav a{color:#fff;text-decoration:none;padding:.6rem .75rem;border-radius:8px;display:block}
nav a:focus-visible{outline:3px solid var(--focus);outline-offset:3px;background:rgba(255,255,255,.08)}
nav a[aria-current="page"]{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.nav-wrap{order:3;width:100%;overflow:hidden;max-height:0;transition:max-height .28s ease}
.nav-wrap[data-open="true"]{max-height:360px}
nav[aria-label="Hauptnavigation"] ul{display:grid;gap:.25rem}
@media (min-width:980px){
  .topbar{flex-wrap:nowrap}
  .burger{display:none}
  .nav-wrap{order:2;width:auto;max-height:none}
  nav[aria-label="Hauptnavigation"] ul{display:flex;gap:.5rem}
}

/* CTA-Link im Header-Navi */
nav a.nav-cta{
  border:2px solid #fff;
  border-radius:999px;
  padding:.5rem .9rem;
  background:transparent;
  color:#fff;
  text-align:center;
  font-weight:700;
}
@media (hover:hover){
  nav a.nav-cta:hover{background:rgba(255,255,255,.1)}
}
nav a.nav-cta:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  background:rgba(255,255,255,.08);
}


/* HERO – full-bleed background */
.hero{position:relative;background:linear-gradient(180deg,#0a2a31 0%, #0d3942 100%);color:#fff;padding:2.2rem 0 1.8rem}
.hero h1{color:#fff;font-size:clamp(2rem,3.6vw,3rem);line-height:1.15;margin:.4rem 0 .6rem}
.kicker{color:#d1f0f7;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .35rem}
.lead{color:#e7f7fb;max-width:68ch}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 1rem}
.hero-bullets{list-style:none;margin:0;padding:0;display:flex;gap:1rem;flex-wrap:wrap;color:#e4f6fa}
.hero-grid{display:grid;gap:1.25rem;align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate}
.hero-media img{display:block;border-radius:var(--radius-lg)}
.media-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,42,49,.12),rgba(10,42,49,.55));mix-blend-mode:multiply;border-radius:var(--radius-lg)}
.hero-bg-dots{position:absolute;inset:auto 0 0 0;height:24px;background:radial-gradient(circle at 12px 12px, rgba(209,240,247,.7) 2px, transparent 3px) 0 0/24px 24px;opacity:.35;pointer-events:none}
@media (prefers-reduced-motion: reduce){.hero-bg-dots{display:none}}

/* Breadcrumbs */
.breadcrumbs{background:var(--muted-2);border-top:1px solid var(--muted);border-bottom:1px solid var(--muted);color:#1a1a1a}
.breadcrumbs nav{overflow:auto}
.breadcrumbs ol{list-style:none;margin:0;padding:.35rem 0;display:flex;gap:.25rem .25rem;white-space:nowrap;font-size:.9rem}
.breadcrumbs li{display:flex;align-items:center}
.breadcrumbs li+li::before{content:"/";margin:0 .5rem;opacity:.6}
.breadcrumbs a{color:#0a2a31;text-decoration:none}
.breadcrumbs a:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}

/* Services & Features with pictograms */
.service .icon, .feature .icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#eaf6f9,#d6eef4);color:#0e6b7f;margin-bottom:.35rem;box-shadow:inset 0 0 0 1px #cfe7ee}
.service svg, .feature svg{width:28px;height:28px;fill:currentColor}
.service:hover .icon, .feature:hover .icon{transform:translateY(-1px) scale(1.02)}
.services .service-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.services .icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#eaf6f9,#d6eef4);color:#0e6b7f;box-shadow:inset 0 0 0 1px #cfe7ee}
.services h3{margin:.25rem 0 .25rem}
.services .service-list{margin:.5rem 0 0;padding-left:1.05rem}
.services .service-list li{margin:.25rem 0}
.services .service-cta{margin-top:.85rem}
.services .service-cta .btn{padding:.6rem 1rem}

.service-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.chip{display:inline-block;padding:.35rem .6rem;border-radius:999px;background:#f1f7f9;border:1px solid #d8e9ee;color:#0e4d5a;font-weight:600;font-size:.9rem}


@media (prefers-reduced-motion: reduce){.service:hover .icon,.feature:hover .icon{transform:none}}

/* Timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:#cfe7ee}
.timeline li{position:relative;padding-left:2rem;margin:1rem 0}
.timeline .dot{position:absolute;left:2px;top:.4rem;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#0e6b7f,#1291aa);box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* Lists */
.check{list-style:none;padding:0;margin:0}
.check li{padding-left:1.6rem;position:relative;margin:.35rem 0}
.check li::before{content:"✓";position:absolute;left:0;top:0;color:#1a7f37;font-weight:700}

/* Forms */
form{display:grid;gap:.75rem}
.form-group{display:grid;gap:.35rem}
label{font-weight:600}
input, textarea, select{width:100%;padding:.8rem;border:1.5px solid var(--muted);border-radius:12px;background:#fff;color:#0a0a0a}
input::placeholder, textarea::placeholder{color:#6b7c80}
input:focus-visible, textarea:focus-visible, select:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:#b6e8f3}
.newsletter{display:flex;gap:.5rem;flex-wrap:wrap}
.newsletter .form-group{flex:1;min-width:220px}

/* === Kontaktbereich Layout === */
.contact .contact-grid{align-items:flex-start}

/* Formular-Grid behält volle Breite der Inputs */
.contact-form{display:grid;gap:1rem;justify-items:stretch}
.contact-form .grid-2{display:grid;gap:1rem}
@media (min-width:720px){.contact-form .grid-2{grid-template-columns:repeat(2,1fr)}}

.form-group{display:grid;gap:.35rem}
.form-group label{font-weight:700}

/* Inputs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{
  width:100%;padding:.7rem .8rem;border:1.5px solid var(--muted,#e7eef0);
  border-radius:12px;background:#fff;font:inherit
}
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible{
  outline:3px solid var(--focus,#ffb703);outline-offset:2px
}

/* Consent Checkbox: linksbündig & hübsch */
.form-consent{margin-top:.25rem}
.checkbox{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start}
.checkbox input{inline-size:1.1rem;block-size:1.1rem;margin-top:.2rem}
.checkbox span{line-height:1.45}
.form-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.25rem}

/* Honeypot bleibt unsichtbar */
.honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Fehlerdarstellung (falls dein JS sie setzt) */
.form-error{color:#8b0000;font-weight:700}
/* Feldhinweise: reservieren Höhe, ohne Layoutsprung */
.field-hint{
  min-height: 1.1rem;         /* Platz für eine Zeile */
  font-size: .9rem;
  line-height: 1.1rem;
  color: #8b0000;              /* Fehlerfarbe */
}

/* Wenn leer, unsichtbar aber platzhaltend */
.field-hint:empty{ visibility: hidden; }

/* Fehlerzustand am Feld (nur Farbe, keine andere Border-Breite) */
.field-error{
  border-color:#8b0000 !important;
  box-shadow: 0 0 0 2px rgba(139,0,0,.08); /* optischer Fokus ohne Layoutshift */
}

/* Grid bleibt stabil */
.contact-form .grid-2{ align-items:flex-start; }

/* Basis: kein background, kein border-color -> nichts überschreiben */
.contact-form .alert{
  grid-column: 1 / -1;
  display: none;              /* unsichtbar bis Inhalt da ist */
  padding: .75rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

/* Sichtbar, sobald Text vorhanden ist */
.contact-form .alert:not(:empty){ display: block; }

/* Zustände definieren ALLES Relevante */
.alert--success{
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.alert--error{
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #9f1239;
}




/* Kontakt-Info-Karte */
.contact-card p{margin:.25rem 0 .6rem}



/* Footer spacing & layout */
footer .container{padding-inline:1rem}
@media (max-width:640px){footer .container{padding-inline:1.25rem}}
footer, footer .footer-grid, footer .foot-meta{overflow-wrap:anywhere;word-break:break-word}
footer .footer-grid>*{min-width:0}
footer{background:#0a2a31;color:#f2fbfd}
footer a{color:#cfeff6}
.footer-grid{display:grid;gap:1.25rem}
@media (min-width:960px){.footer-grid{grid-template-columns:2fr 1.3fr 1.3fr 1.4fr}}
.footer-col h3{margin-top:0;font-size:1.05rem}
.foot-nav{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.foot-meta{border-top:1px solid rgba(255,255,255,.15);margin-top:1rem;padding-top:1rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;align-items:center}
.back-top{display:inline-block;border:2px solid #cfeff6;color:#cfeff6;border-radius:999px;padding:.5rem .9rem;text-decoration:none}
.back-top:focus-visible{outline:3px solid var(--focus);outline-offset:3px;background:rgba(255,255,255,.06)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* Trust bar */
.trust{display:flex;align-items:center;gap:.75rem;margin-top:1rem}
.trust-label{color:#d1f0f7;font-weight:600}
.trust ul{display:flex;gap:.75rem;list-style:none;margin:0;padding:0}
.trust li span{display:inline-block;width:84px;height:28px;border-radius:6px;background:linear-gradient(180deg,#dfeff3,#cfe7ee);box-shadow:inset 0 0 0 1px #bddbe4}
@media (max-width:520px){.trust li span{width:64px}}

/* === Über mich === */
.about .about-list{margin:.35rem 0 .6rem;padding-left:1.15rem}
.about .about-quals{margin-top:1rem}
.about-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

.about-figure{position:relative}
.about-photo{display:block;border-radius:16px;box-shadow:0 12px 28px rgba(0,0,0,.12)}
.about-badges{position:absolute;left:.75rem;bottom:.75rem;display:flex;gap:.4rem}
.badge{display:inline-block;background:rgba(10,42,49,.9);color:#e7f7fb;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.25rem .55rem;font-weight:700;font-size:.85rem}

.about-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.chip{display:inline-block;padding:.35rem .6rem;border-radius:999px;background:#f1f7f9;border:1px solid #d8e9ee;color:#0e4d5a;font-weight:600;font-size:.9rem}

.more-link {
  margin-left:.35rem;
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.more-link:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-bottom-color:transparent;
}

/* === Warum wir === */
.why .why-intro{max-width:70ch;margin:.25rem 0 1rem}
.why .feature .icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#eaf6f9,#d6eef4);color:#0e6b7f;box-shadow:inset 0 0 0 1px #cfe7ee;margin-bottom:.35rem}
.why .feature svg{width:28px;height:28px}
.why .why-cta{margin-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap}


/* === Prozess / Steps === */
.prozess .prozess-intro{max-width:70ch;margin:.25rem 0 1rem}
.steps-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:step}
@media (min-width:900px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
.step-item{padding:1rem}
.step-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}
.step-badge{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#0e6b7f,#1291aa);
  color:#fff;display:inline-grid;place-items:center;font-weight:700;
}
.step-badge::before{counter-increment:step;content:counter(step)}
.prozess-cta{margin-top:1rem}


/* === Regionen kompakt === */
.regions .regions-intro{max-width:70ch;margin:.25rem 0 1rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{display:inline-block;padding:.35rem .6rem;border-radius:999px;background:#f1f7f9;border:1px solid #d8e9ee;color:#0e4d5a;font-weight:600;font-size:.9rem}
.regions .regions-note{margin-top:.6rem}



/* FAQ Akkordeon (nur Klassen, kein [data-open] mehr stylen) */
.faq .accordion-trigger{
  appearance:none;border:0;background:none;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  text-align:left;font:inherit;font-weight:700;padding:0;cursor:pointer;
}
.faq .accordion-trigger:focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;border-radius:8px;
}
.faq .indicator{
  flex:0 0 auto;width:28px;height:28px;display:inline-grid;place-items:center;
  border:1.5px solid #cfe7ee;border-radius:8px;font-weight:800;line-height:1;
  color:#0e6b7f;background:#f6fbfd;
}

/* Zustände – nur über .is-open */
.faq .accordion-item .indicator::before{content:"+";}
.faq .accordion-item.is-open .indicator::before{content:"–";}
.faq .accordion-item.is-open{
  border-color:#cfe7ee;box-shadow:0 8px 28px rgba(0,0,0,.08);
}

.faq .accordion-panel{margin-top:.5rem}

/* FAQ-Container: unabhängige Höhen je Card */
.faq .accordion{
  display:flex;               /* statt grid */
  flex-wrap:wrap;
  gap:1.25rem;
  align-items:flex-start;     /* << verhindert gleich hohe Zeilen */
}

/* 2 Spalten ab ~980px, sonst 1 Spalte */
.faq .accordion-item{
  flex:1 1 520px;             /* bevorzugte Breite */
  max-width:calc(50% - .625rem);
  align-self:flex-start;      /* Sicherheit: Card bleibt oben ausgerichtet */
}
@media (max-width: 980px){
  .faq .accordion-item{
    flex-basis:100%;
    max-width:100%;
  }
}







/* kleine Verfeinerungen auf schmalen Screens */
@media (max-width:640px){
  .about .about-quals{grid-template-columns:1fr}
}