/* ============================================================
   CLEAN TECH GEBÄUDEREINIGUNG – Design-System
   Farbwelt aus dem Logo: Wasser, Klarheit, Frische.
   Schriften: Sora (Display) + Manrope (Text), lokal gehostet.
   ============================================================ */

:root{
  --ink:        #0B2836;   /* Tiefsee – Haupttext */
  --ink-soft:   #3D5866;   /* gedämpfter Text */
  --ocean:      #135A7D;   /* Logo-Dunkelblau */
  --ocean-deep: #0C4260;   /* dunkler für Flächen */
  --aqua:       #2AA9E0;   /* Logo-Cyan, Primärakzent */
  --aqua-deep:  #1786BC;   /* Hover/Kontrast auf hell */
  --splash:     #BEE6F7;   /* helles Spritzblau */
  --mist:       #EDF6FB;   /* Blauweiß-Flächen */
  --foam:       #F8FCFE;   /* Karten auf mist */
  --line:       #D9EAF3;   /* Rahmen */
  --white:      #FFFFFF;
  --wa:         #1FAF54;   /* WhatsApp */
  --star:       #F5A623;   /* Bewertungssterne */
  --shadow-sm:  0 1px 2px rgba(11,40,54,.06), 0 2px 8px rgba(11,40,54,.06);
  --shadow-md:  0 2px 6px rgba(11,40,54,.07), 0 12px 32px rgba(11,40,54,.10);
  --shadow-lg:  0 6px 16px rgba(11,40,54,.10), 0 24px 64px rgba(11,40,54,.16);
  --radius:    14px;
  --radius-lg: 22px;
  --font-display:'Sora', 'Segoe UI', Arial, sans-serif;
  --font-body:  'Manrope', 'Segoe UI', Arial, sans-serif;
  --container: 1180px;
  --nav-h: 74px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  font-family:var(--font-body);
  font-size:1.0625rem; line-height:1.7;
  color:var(--ink); background:var(--white);
  overflow-x:hidden;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--aqua-deep); text-decoration:none; }
a:hover{ color:var(--ocean); }
ul{ list-style:none; }
strong{ font-weight:800; }
:focus-visible{ outline:3px solid var(--aqua); outline-offset:2px; border-radius:4px; }

/* ---------- Typografie ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.15; color:var(--ink); text-wrap:balance; }
h1{ font-size:clamp(2.1rem, 4.6vw, 3.55rem); font-weight:800; letter-spacing:-.02em; }
h2{ font-size:clamp(1.65rem, 3.2vw, 2.5rem); font-weight:800; letter-spacing:-.015em; }
h3{ font-size:clamp(1.15rem, 2vw, 1.4rem); font-weight:700; }
.lead{ font-size:clamp(1.1rem, 1.6vw, 1.25rem); line-height:1.75; color:var(--ink-soft); max-width:62ch; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--aqua-deep); margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:2.2em; height:3px; border-radius:2px; background:var(--aqua); }
.center .eyebrow::before{ display:none; }
.hl{ position:relative; white-space:nowrap; }
.hl > span{ position:relative; z-index:1; }
.hl::after{
  content:""; position:absolute; left:-.06em; right:-.06em; bottom:.06em; height:.34em;
  background:linear-gradient(90deg, var(--splash), rgba(42,169,224,.45));
  border-radius:.12em; z-index:0;
  transform:scaleX(0); transform-origin:left center;
  animation:hl-in .9s .5s cubic-bezier(.22,.8,.24,1) forwards;
}
@keyframes hl-in{ to{ transform:scaleX(1); } }

/* ---------- Layout ---------- */
.container{ width:min(var(--container), 92vw); margin-inline:auto; }
.section{ padding-block:clamp(3.6rem, 7.5vw, 6rem); }
.section--mist{ background:var(--mist); }
.section--dark{ background:linear-gradient(150deg, var(--ocean-deep), var(--ocean) 60%, #17719c); color:#E7F4FB; }
.section--dark h2,.section--dark h3{ color:#fff; }
.section-head{ max-width:760px; margin-bottom:clamp(2rem,4vw,3.2rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ margin-top:.9rem; }
.grid{ display:grid; gap:clamp(1.1rem, 2.4vw, 1.8rem); }
@media (min-width:700px){ .grid-2{ grid-template-columns:1fr 1fr; } .grid-3{ grid-template-columns:repeat(3,1fr);} .grid-4{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .grid-4{ grid-template-columns:repeat(4,1fr);} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  padding:.95em 1.7em; border-radius:999px; border:0; cursor:pointer;
  background:linear-gradient(135deg, var(--aqua), var(--aqua-deep));
  color:#fff; box-shadow:0 6px 18px rgba(23,134,188,.35);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(23,134,188,.45); color:#fff; }
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn--ghost{
  background:transparent; color:var(--ocean); box-shadow:none;
  border:2px solid var(--line);
}
.btn--ghost:hover{ border-color:var(--aqua); color:var(--aqua-deep); box-shadow:none; }
.section--dark .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.section--dark .btn--ghost:hover{ border-color:#fff; color:#fff; }
.btn--white{ background:#fff; color:var(--ocean); box-shadow:0 6px 18px rgba(4,32,48,.25); }
.btn--white:hover{ color:var(--ocean-deep); }
.btn--lg{ font-size:1.12rem; padding:1.05em 2em; }

/* ---------- Topbar & Navigation ---------- */
.topbar{
  background:var(--ocean-deep); color:#CBE7F6; font-size:.86rem; font-weight:600;
}
.topbar__in{
  width:min(var(--container),94vw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.42rem 0;
}
.topbar a{ color:#fff; display:inline-flex; align-items:center; gap:.45em; }
.topbar a:hover{ color:var(--splash); }
.topbar svg{ width:1em; height:1em; }
.topbar__group{ display:flex; gap:1.4rem; align-items:center; }
@media (max-width:760px){ .topbar__hours{ display:none; } }

.nav{
  position:sticky; top:0; z-index:900; background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.nav.is-scrolled{ box-shadow:var(--shadow-sm); }
.nav__in{
  width:min(var(--container),94vw); margin-inline:auto; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; }
.nav__brand img{ height:52px; width:auto; }
.nav__brand-name{ font-family:var(--font-display); font-weight:800; font-size:1.12rem; color:var(--ocean); line-height:1.1; }
.nav__brand-name small{ display:block; font-family:var(--font-body); font-weight:700; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua-deep); }
.nav__links{ display:flex; align-items:center; gap:clamp(.9rem,1.8vw,1.7rem); font-weight:700; font-size:.98rem; }
.nav__links > a{ color:var(--ink); padding:.4em 0; }
.nav__links > a:hover, .nav__links > a[aria-current="page"]{ color:var(--aqua-deep); }
.nav__cta{ font-size:.92rem; padding:.7em 1.35em; }

/* Dropdown Leistungen */
.dd{ position:relative; }
.dd__btn{
  display:inline-flex; align-items:center; gap:.4em; font:inherit; font-weight:700;
  background:none; border:0; cursor:pointer; color:var(--ink); padding:.4em 0;
}
.dd__btn svg{ width:.85em; height:.85em; transition:transform .2s; }
.dd.open .dd__btn svg{ transform:rotate(180deg); }
.dd__menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:560px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:1rem;
  display:grid; grid-template-columns:1fr 1fr; gap:.15rem;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.dd.open .dd__menu{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dd__menu a{
  display:block; padding:.5em .8em; border-radius:8px; color:var(--ink); font-weight:600; font-size:.95rem;
}
.dd__menu a:hover{ background:var(--mist); color:var(--aqua-deep); }
.dd__all{ grid-column:1/-1; text-align:center; border-top:1px solid var(--line); margin-top:.5rem; padding-top:.7rem !important; color:var(--aqua-deep) !important; }

.nav__lservices{ display:none; }
.nav__burger{ display:none; background:none; border:0; cursor:pointer; padding:.5rem; }
.nav__burger span{ display:block; width:26px; height:3px; border-radius:2px; background:var(--ocean); margin:5px 0; transition:.25s; }
@media (max-width:1080px){
  .nav__links{
    position:fixed; inset:calc(var(--nav-h)) 0 auto 0; z-index:899;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
    padding:.6rem 6vw 1.2rem; display:none; max-height:calc(100dvh - var(--nav-h)); overflow:auto;
  }
  .nav__links.open{ display:flex; }
  .nav__links > a{ padding:.8em 0; border-bottom:1px solid var(--mist); }
  /* Mobil: statt Aufklapp-Menü ein direkter Link zur Leistungsübersicht */
  .dd{ display:none; }
  .nav__lservices{ display:block; }
  .nav__cta{ margin-top:.9rem; justify-content:center; }
  .nav__burger{ display:block; }
  .nav__burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav__burger.open span:nth-child(2){ opacity:0; }
  .nav__burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}

/* ---------- Hero (Startseite) ---------- */
.hero{
  position:relative; overflow:clip;
  background:
    radial-gradient(1100px 500px at 88% -10%, rgba(42,169,224,.16), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(42,169,224,.12), transparent 55%),
    linear-gradient(180deg, #FDFEFF, var(--mist));
}
.hero__in{
  width:min(var(--container),92vw); margin-inline:auto;
  display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center;
  padding-block:clamp(3rem,6vw,5.2rem) clamp(4.2rem,8vw,6.4rem);
}
@media (min-width:960px){ .hero__in{ grid-template-columns:1.05fr .95fr; } }
.hero__rating{
  display:inline-flex; align-items:center; gap:.55em; font-weight:800; font-size:.92rem;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:.45em 1em;
  box-shadow:var(--shadow-sm); margin-bottom:1.3rem; color:var(--ink);
}
.hero__rating .stars{ color:var(--star); letter-spacing:.08em; font-size:.95em; }
.hero h1{ margin-bottom:1.1rem; }
.hero__sub{ font-size:clamp(1.08rem,1.7vw,1.3rem); color:var(--ink-soft); max-width:56ch; margin-bottom:1.6rem; }
.hero__checks{ display:grid; gap:.55rem; margin-bottom:2rem; font-weight:700; font-size:1rem; }
@media (min-width:560px){ .hero__checks{ grid-template-columns:1fr 1fr; } }
.hero__checks li{ display:flex; align-items:flex-start; gap:.6em; }
.hero__checks svg{ width:1.25em; height:1.25em; flex:none; color:var(--aqua); margin-top:.15em; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hero__note{ font-size:.88rem; color:var(--ink-soft); font-weight:600; margin-top:.9rem; }

.hero__media{ position:relative; }
.hero__frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:4/3; isolation:isolate;
}
.hero__frame > img{ width:100%; height:100%; object-fit:cover; }
/* Wisch-Effekt: milchige Schicht wird vom Abzieher freigezogen */
.wipe{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.wipe__haze{
  position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(214,235,246,.92), rgba(199,228,242,.88));
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  clip-path:inset(0 0 0 0);
}
.wipe__blade{
  position:absolute; top:-4%; bottom:-4%; left:0; width:14px; border-radius:8px;
  background:linear-gradient(180deg, var(--aqua), var(--ocean));
  box-shadow:0 0 0 3px rgba(255,255,255,.65), 0 6px 18px rgba(12,66,96,.4);
  opacity:0;
}
.wipe.done{ display:none; }
.hero__badge{
  position:absolute; z-index:3; left:clamp(.7rem,1.6vw,1.1rem); bottom:clamp(.7rem,1.6vw,1.1rem);
  background:rgba(255,255,255,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:10px; box-shadow:var(--shadow-sm);
  padding:.45rem .8rem; display:flex; align-items:center; gap:.55rem; max-width:80%;
}
.hero__badge svg{ width:1.25rem; height:1.25rem; color:var(--aqua-deep); flex:none; }
.hero__badge b{ display:block; font-size:.82rem; line-height:1.25; }
.hero__badge span{ font-size:.72rem; color:var(--ink-soft); font-weight:600; line-height:1.25; }

/* Wellen-Divider */
.wave{ display:block; width:100%; height:clamp(38px,6vw,74px); }
.wave--mist{ color:var(--mist); }
.wave--white{ color:#fff; }
.wave--dark{ color:var(--ocean-deep); }

/* ---------- USP-Bar ---------- */
.usps{ display:grid; gap:1rem; }
@media (min-width:660px){ .usps{ grid-template-columns:1fr 1fr; } }
@media (min-width:1020px){ .usps{ grid-template-columns:repeat(4,1fr); } }
.usp{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.3rem; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:.55rem;
}
.usp svg{ width:2.1rem; height:2.1rem; color:var(--aqua-deep); }
.usp h3{ font-size:1.05rem; }
.usp p{ font-size:.93rem; color:var(--ink-soft); line-height:1.55; }

/* ---------- Leistungs-Karten ---------- */
.services{ display:grid; gap:1.3rem; }
@media (min-width:640px){ .services{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .services{ grid-template-columns:repeat(3,1fr); } }
.scard{
  position:relative; background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.scard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.scard__media{ aspect-ratio:16/10; overflow:hidden; background:var(--mist); }
.scard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.scard:hover .scard__media img{ transform:scale(1.05); }
.scard__body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.scard h3{ color:var(--ink); }
.scard ul{ display:grid; gap:.3rem; font-size:.94rem; color:var(--ink-soft); font-weight:600; }
.scard ul li{ display:flex; gap:.5em; align-items:baseline; }
.scard ul li::before{ content:"✓"; color:var(--aqua); font-weight:800; }
.scard__link{
  margin-top:auto; padding-top:.6rem; font-weight:800; font-size:.97rem; color:var(--aqua-deep);
  display:inline-flex; align-items:center; gap:.4em;
}
.scard__link::after{ content:"→"; transition:transform .2s; }
.scard:hover .scard__link::after{ transform:translateX(4px); }
.scard > a.scard__cover{ position:absolute; inset:0; z-index:1; }

/* ---------- Vorher/Nachher-Slider ---------- */
.ba{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-md); user-select:none; touch-action:pan-y;
  aspect-ratio:var(--ba-ratio, 16/10); background:var(--mist);
  cursor:ew-resize;
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba__after{ clip-path:inset(0 0 0 var(--pos,50%)); }
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px; margin-left:-1.5px;
  background:#fff; box-shadow:0 0 12px rgba(0,0,0,.4); z-index:2;
}
.ba__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center; color:var(--ocean);
}
.ba__knob svg{ width:22px; height:22px; }
.ba__tag{
  position:absolute; top:.9rem; z-index:2; font-weight:800; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; background:rgba(11,40,54,.72);
  padding:.35em .9em; border-radius:999px; backdrop-filter:blur(4px);
}
.ba__tag--before{ left:.9rem; }
.ba__tag--after{ right:.9rem; background:rgba(23,134,188,.85); }
.ba-caption{ margin-top:.8rem; font-weight:700; font-size:.95rem; color:var(--ink-soft); text-align:center; }

/* Statische Vorher/Nachher-Karte */
.ba-static{ display:grid; grid-template-columns:1fr 1fr; gap:4px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.ba-static figure{ position:relative; aspect-ratio:3/4; }
.ba-static img{ width:100%; height:100%; object-fit:cover; }
.ba-static figcaption{
  position:absolute; left:.7rem; top:.7rem; font-weight:800; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; background:rgba(11,40,54,.72); padding:.3em .8em; border-radius:999px;
}
.ba-static figure:last-child figcaption{ background:rgba(23,134,188,.85); }

/* ---------- Zahlen-Band ---------- */
.stats{ display:grid; gap:2rem 1rem; text-align:center; }
@media (min-width:640px){ .stats{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .stats{ grid-template-columns:repeat(4,1fr);} }
.stat b{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,4vw,3.1rem);
  display:block; line-height:1.1; color:#fff; font-variant-numeric:tabular-nums;
}
.stat b small{ font-size:.55em; font-weight:800; }
.stat span{ font-weight:700; color:var(--splash); font-size:.98rem; }

/* ---------- Referenzen ---------- */
.refs{ display:grid; gap:1.3rem; }
@media (min-width:800px){ .refs{ grid-template-columns:repeat(3,1fr); } }
.ref{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  aspect-ratio:4/5; background:var(--ocean-deep);
}
.ref img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.ref:hover img{ transform:scale(1.05); }
.ref figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.4rem 1.3rem 1.2rem;
  background:linear-gradient(transparent, rgba(7,33,48,.88)); color:#fff;
}
.ref figcaption b{ font-family:var(--font-display); font-size:1.06rem; display:block; }
.ref figcaption span{ font-size:.88rem; color:var(--splash); font-weight:600; }

/* ---------- Mitgliedschaften ---------- */
.members{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.6rem,5vw,3.6rem); }
.members img{ height:56px; width:auto; filter:grayscale(1) opacity(.62); transition:filter .25s; }
.members img:hover{ filter:none; }

/* ---------- Testimonials ---------- */
.quotes{ display:grid; gap:1.3rem; }
@media (min-width:800px){ .quotes{ grid-template-columns:1fr 1fr; } }
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.6rem 1.6rem 1.4rem; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:.9rem;
}
.quote__stars{ color:var(--star); font-size:1.05rem; letter-spacing:.12em; }
.quote p{ color:var(--ink-soft); font-size:.99rem; line-height:1.65; }
.quote footer{ font-weight:800; font-size:.95rem; }
.quote footer span{ display:block; font-weight:600; font-size:.84rem; color:var(--ink-soft); }

/* ---------- Zertifikate & Versicherung ---------- */
.certs{ display:grid; gap:1.3rem; }
@media (min-width:800px){ .certs{ grid-template-columns:1fr 1fr; } }
.cert{
  display:grid; grid-template-columns:96px 1fr; gap:1.1rem; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm);
}
.cert img{ border-radius:8px; border:1px solid var(--line); }
.cert h3{ font-size:1.02rem; margin-bottom:.25rem; }
.cert p{ font-size:.9rem; color:var(--ink-soft); line-height:1.55; }
.insurance{
  margin-top:1.3rem;
  background:linear-gradient(135deg, var(--ocean-deep), var(--ocean));
  color:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:clamp(1.5rem,3vw,2.2rem); display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap;
}
.insurance svg{ width:3rem; height:3rem; color:var(--splash); flex:none; }
.insurance b{ font-family:var(--font-display); font-size:clamp(1.15rem,2vw,1.45rem); display:block; }
.insurance span{ color:var(--splash); font-weight:600; font-size:.97rem; }

/* ---------- Prozess ---------- */
.steps{ display:grid; gap:1.3rem; counter-reset:step; }
@media (min-width:800px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.7rem 1.5rem 1.5rem; box-shadow:var(--shadow-sm);
}
.step::before{
  counter-increment:step; content:counter(step);
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  display:inline-flex; width:2.4em; height:2.4em; align-items:center; justify-content:center;
  border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--aqua),var(--aqua-deep));
  box-shadow:0 6px 14px rgba(23,134,188,.35); margin-bottom:1rem;
}
.step h3{ margin-bottom:.4rem; }
.step p{ font-size:.95rem; color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:.8rem; }
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.05rem 1.3rem; font-family:var(--font-display); font-weight:700; font-size:1.02rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-size:1.5rem; font-weight:400; color:var(--aqua-deep); line-height:1;
  transition:transform .25s; flex:none;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > div{ padding:0 1.3rem 1.2rem; color:var(--ink-soft); font-size:.98rem; }

/* ---------- CTA-Band ---------- */
.cta-band{
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(190,230,247,.25), transparent 60%),
    linear-gradient(135deg, var(--aqua-deep), var(--ocean) 55%, var(--ocean-deep));
  color:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:clamp(2rem,5vw,3.4rem); text-align:center;
}
.cta-band h2{ color:#fff; margin-bottom:.7rem; }
.cta-band p{ color:var(--splash); font-weight:600; max-width:56ch; margin:0 auto 1.7rem; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; }
.cta-band__phone{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:#fff; }
.cta-band__phone svg{ width:1.2em; height:1.2em; }

/* ---------- Kontakt / Formular ---------- */
.contact{ display:grid; gap:1.6rem; align-items:start; }
@media (min-width:960px){ .contact{ grid-template-columns:1.05fr .95fr; } }
.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:clamp(1.5rem,3.5vw,2.3rem);
}
.form-card h3{ font-size:1.35rem; margin-bottom:.3rem; }
.form-card > p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:1.4rem; }
.fgrid{ display:grid; gap:1rem; }
@media (min-width:640px){ .fgrid-2{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-weight:800; font-size:.86rem; margin-bottom:.35rem; }
.field label small{ color:var(--ink-soft); font-weight:600; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-weight:600; color:var(--ink);
  background:var(--foam); border:2px solid var(--line); border-radius:10px;
  padding:.72em .95em; transition:border-color .2s, background .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--aqua); background:#fff;
}
.field textarea{ min-height:120px; resize:vertical; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:.9rem; }
.form-status{ display:none; margin-top:1rem; font-weight:700; padding:.9em 1.1em; border-radius:10px; }
.form-status.ok{ display:block; background:#E8F8EE; color:#136B34; border:1px solid #BFE8CE; }
.form-status.err{ display:block; background:#FDECEC; color:#8E1B1B; border:1px solid #F2C6C6; }

.contact-aside{ display:grid; gap:1.3rem; }
.info-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:1.5rem 1.6rem;
}
.info-card h3{ margin-bottom:.9rem; }
.info-card ul{ display:grid; gap:.85rem; }
.info-card li{ display:flex; gap:.8em; align-items:flex-start; font-weight:600; font-size:.98rem; }
.info-card li svg{ width:1.3em; height:1.3em; color:var(--aqua-deep); flex:none; margin-top:.18em; }
.info-card li a{ color:var(--ink); }
.info-card li a:hover{ color:var(--aqua-deep); }
.info-card li small{ display:block; color:var(--ink-soft); font-weight:600; }

/* ---------- Leistungsseiten ---------- */
.vhero{
  position:relative; display:grid; align-items:end; overflow:clip;
  min-height:clamp(420px, 62vh, 620px); background:var(--ocean-deep); isolation:isolate;
}
.vhero__media, .vhero__media img, .vhero__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.vhero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(185deg, rgba(7,33,48,.18) 30%, rgba(7,33,48,.82) 88%);
}
.vhero__in{
  width:min(var(--container),92vw); margin-inline:auto;
  padding:clamp(5rem,9vw,7rem) 0 clamp(2.2rem,4.5vw,3.4rem); color:#fff;
}
.vhero .crumbs{ font-size:.88rem; font-weight:700; color:var(--splash); margin-bottom:.8rem; display:flex; flex-wrap:wrap; gap:.5em; }
.vhero .crumbs a{ color:#fff; opacity:.85; } .vhero .crumbs a:hover{ opacity:1; color:#fff; }
.vhero h1{ color:#fff; max-width:18ch; margin-bottom:1rem; }
.vhero__sub{ max-width:62ch; color:#DFF1FA; font-size:clamp(1.02rem,1.5vw,1.18rem); font-weight:600; margin-bottom:1.4rem; }
.vhero__chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.6rem; }
.vhero__chips span{
  font-size:.85rem; font-weight:700; color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:.4em 1em; backdrop-filter:blur(6px);
}
.vhero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; padding-bottom:.4rem; }

.split{ display:grid; gap:clamp(1.8rem,4vw,3.2rem); align-items:center; }
@media (min-width:920px){ .split{ grid-template-columns:1fr 1fr; } .split--rev > :first-child{ order:2; } }
.split__media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.split__media img, .split__media video{ width:100%; height:100%; object-fit:cover; }
.split h2{ margin-bottom:.9rem; }
.split p + p{ margin-top:.9rem; }
.split .lead{ font-size:1.05rem; }

.checklist{ display:grid; gap:.6rem; margin-top:1.2rem; }
@media (min-width:640px){ .checklist--2{ grid-template-columns:1fr 1fr; } }
.checklist li{ display:flex; gap:.65em; align-items:flex-start; font-weight:700; font-size:.99rem; }
.checklist li svg{ width:1.3em; height:1.3em; color:var(--aqua); flex:none; margin-top:.16em; }
.checklist li small{ display:block; font-weight:600; color:var(--ink-soft); }

/* ---------- Sticky-Kontakt (Desktop seitlich / Mobil unten) ---------- */
.sticky-side{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:850;
  display:flex; flex-direction:column; gap:.6rem; padding:.5rem;
}
.sticky-side a{
  width:52px; height:52px; border-radius:14px 0 0 14px; display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:var(--shadow-md); transition:transform .2s;
}
.sticky-side a:hover{ transform:translateX(-4px); color:#fff; }
.sticky-side svg{ width:24px; height:24px; }
.sticky-side .s-call{ background:var(--ocean); }
.sticky-side .s-wa{ background:var(--wa); }
.sticky-side .s-mail{ background:var(--aqua-deep); }
.bottom-bar{ display:none; }
@media (max-width:760px){
  .sticky-side{ display:none; }
  .bottom-bar{
    position:fixed; inset:auto 0 0 0; z-index:850; display:grid; grid-template-columns:1fr 1fr 1fr;
    background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(11,40,54,.12);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottom-bar a{
    display:flex; flex-direction:column; align-items:center; gap:.15rem;
    padding:.55rem .3rem .6rem; font-size:.72rem; font-weight:800; color:var(--ocean);
  }
  .bottom-bar svg{ width:22px; height:22px; }
  .bottom-bar .b-wa{ color:var(--wa); }
  body{ padding-bottom:64px; }
}

/* ---------- Footer ---------- */
.footer{ background:var(--ocean-deep); color:#B9D9E9; font-size:.96rem; }
.footer a{ color:#DFF1FA; } .footer a:hover{ color:#fff; }
.footer__grid{
  display:grid; gap:2.4rem; padding:clamp(3rem,6vw,4.4rem) 0 2.4rem;
}
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.2fr 1fr 1fr; } }
@media (min-width:1020px){ .footer__grid{ grid-template-columns:1.25fr 1fr 1fr 1.05fr; } }
.footer h4{ color:#fff; font-size:1rem; letter-spacing:.04em; margin-bottom:1rem; }
.footer__brand img{ width:150px; background:#fff; padding:.7rem; border-radius:var(--radius); }
.footer__brand p{ margin-top:1rem; line-height:1.65; font-size:.93rem; }
.footer ul{ display:grid; gap:.5rem; }
.footer__contact li{ display:flex; gap:.6em; align-items:flex-start; }
.footer__contact svg{ width:1.15em; height:1.15em; flex:none; margin-top:.25em; color:var(--aqua); }
.footer__legal{
  border-top:1px solid rgba(255,255,255,.14); padding:1.2rem 0 1.4rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between; font-size:.86rem;
}
.footer__legal nav{ display:flex; gap:1.4rem; }

/* ---------- Consent-Banner ---------- */
.consent{
  position:fixed; z-index:990; inset:auto 1rem 1rem 1rem; max-width:520px; margin-inline:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:1.4rem 1.5rem; display:none;
}
.consent.show{ display:block; }
.consent h3{ font-size:1.05rem; margin-bottom:.4rem; }
.consent p{ font-size:.88rem; color:var(--ink-soft); margin-bottom:1rem; }
.consent p a{ font-weight:700; }
.consent__actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.consent__actions .btn{ font-size:.9rem; padding:.65em 1.3em; }

/* ---------- Reveal-Animationen (JS setzt .is-in) ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.24,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hl::after{ animation:none; transform:scaleX(1); }
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* ---------- 404 ---------- */
.err-page{ min-height:60vh; display:grid; place-items:center; text-align:center; padding:4rem 6vw; }
.err-page b{ font-family:var(--font-display); font-size:clamp(4rem,10vw,7rem); color:var(--splash); display:block; line-height:1; }
.err-page h1{ margin:.4rem 0 .8rem; }
.err-page p{ color:var(--ink-soft); margin-bottom:1.6rem; }

/* ---------- Kleinkram ---------- */
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.tac{ text-align:center; }
.legal-body{ max-width:820px; }
.legal-body h1{ margin-bottom:1.6rem; }
.legal-body h2{ font-size:1.35rem; margin:2.2rem 0 .7rem; }
.legal-body h3{ font-size:1.08rem; margin:1.6rem 0 .5rem; }
.legal-body p{ margin-bottom:.9rem; color:var(--ink-soft); }
.legal-body ul{ list-style:disc; padding-left:1.4em; color:var(--ink-soft); margin-bottom:.9rem; }