@font-face{font-family:"Poppins";src:url(../fonts/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:"Poppins";src:url(../fonts/poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:"Poppins";src:url(../fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:"Poppins";src:url(../fonts/poppins-700.woff2) format("woff2");font-weight:700;font-display:swap}
/* ═══════════════════════════════════════════════════════════
   Dörig Schwimmbadtechnik — Designvorschau
   Farben und Schriften nach Brand Manual V1.0 (2026)
   ═══════════════════════════════════════════════════════════ */

:root{
  --navy:#0057B8;
  --deep:#003A63;
  --accent:#3A8DFF;
  --water:#E6F2FA;
  --ink:#222222;
  --grey:#D9D9D9;
  --white:#FFFFFF;
  --abyss:#00182B;          /* Gestaltungston, aus Tiefenblau abgeleitet */
  --muted:#5A6672;

  --ff-d:"Poppins",system-ui,'Segoe UI',sans-serif;
  --ff-b:'PoppinsLocal',system-ui,'Segoe UI',sans-serif;

  --wrap:1240px;
  --gut:clamp(1.25rem, 4vw, 3rem);
  --sec:clamp(5rem, 11vw, 9.5rem);
  --r:14px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--ff-b); font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
main{overflow-x:clip}                    /* Netz auf main, nicht auf html/body */
img,svg,canvas,video{max-width:100%; display:block}
/* 🔴 Ohne height:auto bleibt die Höhe beim height-Attribut stehen (z. B. 1280 px)
   und das Bild wird riesig — max-width allein genügt nicht. Stellen, die eine
   Höhe brauchen (.phero__img, .ref__img, .gal), setzen sie mit höherer
   Spezifität selbst und bleiben davon unberührt. */
img{height:auto}
h1,h2,h3{font-family:var(--ff-d); margin:0; line-height:1.06; letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:.75rem 1.25rem;
}
.skip:focus{left:.5rem; top:.5rem}

/* ── Marke ───────────────────────────────────────────────── */
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--deep)}
.brand__mark{width:38px; height:38px; flex:none; color:currentColor}
.brand__wave1{fill:var(--navy)}
.brand__wave2{fill:#8FA0AE; opacity:.75}
.brand__txt{display:flex; flex-direction:column; line-height:1}
.brand__txt strong{font-family:var(--ff-d); font-weight:700; font-size:1.18rem; letter-spacing:.16em}
.brand__txt em{
  font-family:var(--ff-d); font-style:normal; font-weight:500;
  font-size:.545rem; letter-spacing:.235em; text-transform:uppercase;
  color:var(--navy); margin-top:.3rem;
}

/* ── Kopfzeile ───────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  /* Deckend von Anfang an — auch bevor das Skript läuft, sonst blitzt
     die durchsichtige Fassung kurz auf. Siehe app.js, onScroll(). */
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 rgba(0,24,43,.09), 0 10px 40px -24px rgba(0,24,43,.4);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.hdr__in{
  max-width:var(--wrap); margin-inline:auto; padding:1.15rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:padding .4s var(--ease);
}
.hdr--solid{
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 rgba(0,24,43,.09), 0 10px 40px -24px rgba(0,24,43,.4);
}
.hdr--solid .hdr__in{padding-block:.7rem}
.hdr--top .brand{color:#fff}
.hdr--top .brand__txt em{color:#9CC8FF}
.hdr--top .brand__wave2{fill:rgba(255,255,255,.55)}
.hdr--top .nav>a{color:#fff}

.nav{display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem)}
.nav>a{
  font-family:var(--ff-d); font-weight:500; font-size:.875rem;
  letter-spacing:.02em; text-decoration:none; position:relative; padding:.3rem 0;
}
.nav>a:not(.btn)::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav>a:not(.btn):hover::after{transform:scaleX(1)}

.burger{
  display:none; width:44px; height:44px; border:0; background:none; cursor:pointer;
  padding:0; position:relative; z-index:2;
}
.burger span{
  display:block; height:2px; width:24px; margin:5px auto; background:var(--deep);
  transition:transform .4s var(--ease), opacity .3s;
}
.hdr--top .burger span{background:#fff}

/* ── Schaltflächen ───────────────────────────────────────── */
.btn{
  --bg:var(--navy); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--ff-d); font-weight:600; font-size:.9rem; letter-spacing:.01em;
  text-decoration:none; padding:.85rem 1.6rem; border-radius:999px;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bg);
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .35s;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--deep); transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(0,87,184,.65)}
.btn:hover::before{transform:translateY(0)}
.btn--sm{padding:.62rem 1.15rem; font-size:.82rem}
.btn--lg{padding:1.05rem 2.1rem; font-size:.95rem}
.btn--ghost{--bg:transparent; --fg:currentColor; border-color:currentColor}
.btn--ghost:hover{color:#fff; box-shadow:none}
.btn--ghost::before{background:var(--navy)}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:clamp(7rem,14vh,10rem) 0 clamp(3rem,7vh,5rem);
  background:var(--abyss); color:#fff; overflow:hidden;
}
.hero__bg{position:absolute; inset:0}
.hero__bg::after{                          /* Fallback, falls WebGL fehlt */
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 70% 15%, #0A6CC9 0%, #00365E 45%, var(--abyss) 100%);
}
#water{width:100%; height:100%; display:block}
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,24,43,.78) 0%, rgba(0,24,43,.22) 30%, rgba(0,24,43,.72) 62%, rgba(0,24,43,.94) 100%),
    /* Leseband unter Fliesstext und Schaltflächen — sonst 3.62:1 auf hellen Kaustiken */
    radial-gradient(95% 62% at 8% 76%, rgba(0,24,43,.82), transparent 72%);
}
.hero__in{position:relative; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ff-d); font-weight:600; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:#A9D0FF;
  margin-bottom:1.6rem;
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(58,141,255,.7); animation:pulse 2.6s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(58,141,255,0)}100%{box-shadow:0 0 0 0 rgba(58,141,255,0)}}

.hero__h1{
  font-size:clamp(2.9rem, 11.2vw, 8.5rem); font-weight:800;
  letter-spacing:-.035em; margin-bottom:1.5rem;
}
.hero__h1 .line{display:block; overflow:hidden; padding-bottom:.04em}
.hero__h1 .w{display:inline-block; will-change:transform}
.hero__h1 .w--accent{
  background:linear-gradient(100deg,#7FBBFF 0%,#3A8DFF 40%,#0057B8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{
  max-width:44ch; font-size:clamp(1.02rem,1rem + .35vw,1.24rem);
  color:rgba(255,255,255,.96); margin-bottom:2.3rem;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:clamp(2.5rem,6vh,4.5rem)}

.pillars{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,2vw,1.5rem);
  border-top:1px solid rgba(255,255,255,.22); padding-top:1.4rem;
}
.pillars li{
  min-width:0; font-family:var(--ff-d); font-weight:600;
  font-size:clamp(.78rem,.7rem + .35vw,1rem); letter-spacing:.01em;
  display:flex; flex-direction:column; gap:.45rem;
}
/* icons.js ersetzt den Platzhalter-Span durch <svg class="ico"> —
   Klassen am Platzhalter überleben das nicht. Deshalb hier ansetzen. */
.pillars li>.ico{color:var(--accent)}
.pcard>.ico{color:var(--navy); margin-bottom:1.1rem}
.pcard .pcard__n{margin-bottom:.9rem}

.hero__scroll{
  position:absolute; right:var(--gut); bottom:clamp(3rem,7vh,5rem);
  writing-mode:vertical-rl; font-family:var(--ff-d); font-size:.66rem;
  letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.6);
  display:flex; align-items:center; gap:.9rem;
}
.hero__scroll span{width:1px; height:56px; background:rgba(255,255,255,.35); position:relative; overflow:hidden}
.hero__scroll span::after{
  content:''; position:absolute; inset:0; background:#fff;
  animation:trickle 2.4s var(--ease) infinite;
}
@keyframes trickle{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ── Laufband ────────────────────────────────────────────── */
.ticker{
  background:var(--deep); color:#fff; overflow:hidden; padding:.95rem 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ticker__track{
  display:flex; align-items:center; gap:2rem; width:max-content;
  font-family:var(--ff-d); font-weight:600; font-size:.82rem;
  letter-spacing:.19em; text-transform:uppercase; white-space:nowrap;
}
.ticker__track i{color:var(--accent); font-style:normal; font-size:.6rem}

/* ── Abschnitte allgemein ────────────────────────────────── */
.sec{padding:var(--sec) 0}
.sec--dark{background:var(--abyss); color:#fff}
.sec--water{background:var(--water)}
.sec__head{max-width:62ch; margin-bottom:clamp(2.8rem,6vw,4.5rem)}
.sec__head--center{margin-inline:auto; text-align:center}
.kicker{
  font-family:var(--ff-d); font-weight:700; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--navy);
  margin-bottom:1.1rem;
}
.sec--dark .kicker{color:var(--accent)}
.h2{
  font-size:clamp(1.85rem,1.3rem + 2.6vw,3.5rem); font-weight:700;
  margin-bottom:1.4rem;
}
.sec__lead{color:var(--muted); font-size:clamp(1rem,.97rem + .3vw,1.15rem); max-width:56ch}
.sec--dark .sec__lead{color:rgba(255,255,255,.74)}
.sec__head--center .sec__lead{margin-inline:auto}

/* ── Leistungskarten ─────────────────────────────────────── */
.grid4{
  display:grid; gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));
}
.pcard{
  min-width:0; position:relative; padding:2.1rem 1.8rem 1.9rem;
  border:1px solid var(--grey); border-radius:var(--r); background:#fff;
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.pcard::before{
  content:''; position:absolute; inset:auto 0 0 0; height:3px; z-index:-1;
  background:linear-gradient(90deg,var(--navy),var(--accent));
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.pcard:hover{
  transform:translateY(-6px); border-color:#B9CEDE;
  box-shadow:0 26px 50px -30px rgba(0,58,99,.45);
}
.pcard:hover::before{transform:scaleX(1)}
.pcard__n{
  font-family:var(--ff-d); font-weight:700; font-size:.72rem; letter-spacing:.2em;
  color:var(--accent); display:block; margin-bottom:1.5rem;
}
.pcard h3{font-size:1.22rem; font-weight:700; margin-bottom:.75rem; color:var(--deep)}
.pcard p{color:var(--muted); font-size:.96rem}

.tags{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:clamp(1.8rem,4vw,2.8rem)}
.tags span{
  font-family:var(--ff-d); font-size:.8rem; font-weight:500;
  padding:.5rem 1rem; border-radius:999px;
  background:var(--water); color:var(--deep); border:1px solid #CFE3F5;
}

/* ── Aussagenband ────────────────────────────────────────── */
.band{background:var(--deep); color:#fff; padding:clamp(3rem,6vw,4.5rem) 0}
.band__in{
  display:grid; gap:clamp(1.6rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.band__item{min-width:0; padding-left:1.3rem; border-left:2px solid var(--accent)}
.band__k{font-family:var(--ff-d); font-weight:700; font-size:1.06rem; margin-bottom:.4rem}
.band__v{color:rgba(255,255,255,.72); font-size:.94rem}

/* ── Ablauf ──────────────────────────────────────────────── */
.steps{
  display:grid; gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  counter-reset:s;
}
.steps li{
  min-width:0; padding:1.9rem 1.4rem; border-radius:var(--r);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  transition:background .45s var(--ease), transform .45s var(--ease);
}
.steps li:hover{background:rgba(58,141,255,.13); transform:translateY(-5px)}
.steps__n{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--navy); font-family:var(--ff-d); font-weight:700; font-size:.95rem;
  margin-bottom:1.3rem;
}
.steps h3{font-size:1.05rem; font-weight:700; margin-bottom:.55rem}
.steps p{font-size:.9rem; color:rgba(255,255,255,.7)}

/* ── Einsatzgebiet ───────────────────────────────────────── */
.gebiet{display:grid; gap:clamp(2.5rem,6vw,5rem); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){.gebiet{grid-template-columns:1.05fr .95fr}}
.gebiet__txt{min-width:0}
.gebiet__map{min-width:0; display:grid; place-items:center}
.radar{width:100%; max-width:440px; height:auto; overflow:visible}
.radar .ring{fill:none; stroke:#9EC4E6; stroke-width:1; stroke-dasharray:5 7; opacity:.85}
.radar__lbl text{
  font-family:var(--ff-d); font-size:12px; font-weight:600; fill:var(--muted);
  letter-spacing:.12em; text-transform:uppercase;
}
.radar__home{font-family:var(--ff-d); font-size:14px; font-weight:700; fill:var(--deep)}
.pin{fill:var(--accent)}
.pin--home{fill:var(--navy); stroke:#fff; stroke-width:3}
.regions{
  display:flex; flex-wrap:wrap; gap:.5rem .55rem; margin:1.9rem 0 2.2rem;
}
.regions li{
  font-family:var(--ff-d); font-size:.82rem; font-weight:500; color:var(--deep);
  padding:.42rem .9rem; border:1px solid var(--grey); border-radius:999px;
}

/* ── Werte ───────────────────────────────────────────────── */
.values{
  display:grid; gap:clamp(1.5rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.values>div{min-width:0; padding-top:1.4rem; border-top:2px solid var(--navy)}
.values h3{font-size:1.1rem; font-weight:700; color:var(--deep); margin-bottom:.5rem}
.values p{color:var(--muted); font-size:.95rem}

/* ── Split / Sauna ───────────────────────────────────────── */
.split__in{display:grid; gap:clamp(2.2rem,5vw,4.5rem); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){.split__in{grid-template-columns:1fr 1fr}}
.split__media,.split__txt{min-width:0}
.ph{
  position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(150deg,#0A6CC9,var(--deep) 60%,var(--abyss));
  display:grid; place-items:end stretch;
}
.ph svg{width:100%; height:auto; fill:rgba(255,255,255,.13)}
.ph__lbl{
  position:absolute; left:1rem; bottom:1rem; font-family:var(--ff-d);
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.8); background:rgba(0,24,43,.45);
  padding:.45rem .8rem; border-radius:999px; backdrop-filter:blur(4px);
}

/* ── Kontakt ─────────────────────────────────────────────── */
.cta{
  background:
    radial-gradient(110% 80% at 20% 0%, #0A6CC9 0%, var(--deep) 48%, var(--abyss) 100%);
  color:#fff; padding:var(--sec) 0 clamp(3.5rem,7vw,5.5rem);
}
.cta__in{max-width:920px; text-align:center}
.cta .kicker{color:var(--accent)}
.cta__h{
  font-family:var(--ff-d); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(2.1rem,1.4rem + 3.6vw,4.4rem); margin-bottom:1.4rem;
}
.cta__lead{color:rgba(255,255,255,.8); max-width:52ch; margin:0 auto 2.4rem}
.cta__row{display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center}
.cta__meta{
  display:grid; gap:1.5rem; margin-top:clamp(3rem,7vw,4.5rem);
  padding-top:2.2rem; border-top:1px solid rgba(255,255,255,.2);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  text-align:left;
}
.cta__meta div{min-width:0; font-size:.94rem; color:rgba(255,255,255,.82); overflow-wrap:anywhere}
.cta__meta span{
  display:block; font-family:var(--ff-d); font-weight:700; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem;
}

/* ── Fusszeile ───────────────────────────────────────────── */
.ft{background:var(--abyss); color:rgba(255,255,255,.6); padding:3.2rem 0 2.4rem; font-size:.88rem}
.ft__in{display:grid; gap:1.8rem}
@media(min-width:760px){.ft__in{grid-template-columns:auto 1fr; align-items:center}}
.ft__brand{display:flex; align-items:center; gap:.9rem; min-width:0}
.ft__brand .brand__mark{width:34px; height:34px; color:#fff}
.ft__brand p{font-family:var(--ff-d); font-weight:600; color:#fff; line-height:1.4}
.ft__brand span{font-family:var(--ff-b); font-weight:400; color:rgba(255,255,255,.55); font-size:.83rem}
.ft__nav{display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:flex-start}
@media(min-width:760px){.ft__nav{justify-content:flex-end}}
.ft__nav a{text-decoration:none; font-family:var(--ff-d); font-weight:500; font-size:.86rem}
.ft__nav a:hover{color:#fff}
.ft__note{
  grid-column:1/-1; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.13);
  font-size:.8rem; color:rgba(255,255,255,.74);   /* AA gegen --abyss */
}

/* ── Animations-Startzustände (nur wenn JS aktiv) ────────── */
.js [data-rise]{opacity:0; transform:translateY(26px)}
.js [data-split]{visibility:hidden}          /* bis die Zeilen gemessen sind */
.js [data-split].ready{visibility:visible}
.js [data-split] .ln{display:block; overflow:hidden}
.js [data-split] .ln>span{display:block; will-change:transform}

/* ── Mobile ──────────────────────────────────────────────── */
@media(max-width:860px){
  .burger{display:block}
  .nav{
    position:fixed; inset:0; z-index:1;
    background:var(--abyss); color:#fff;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.4rem; padding:5.5rem var(--gut) 3rem;
    clip-path:circle(0% at calc(100% - 3.2rem) 2.6rem);
    transition:clip-path .6s var(--ease); pointer-events:none;
  }
  .nav.open{clip-path:circle(150% at calc(100% - 3.2rem) 2.6rem); pointer-events:auto}
  .nav>a{color:#fff !important; font-size:1.75rem; font-weight:600; padding:.5rem 0}
  .nav>a.btn{margin-top:1.4rem; font-size:.95rem; padding:.95rem 1.8rem}
  .hdr--open .burger span{background:#fff}
  .hdr--open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .hdr--open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

  .pillars{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem}
  .hero__scroll{display:none}
  .hero{align-items:center; min-height:96svh}
}

@medianot all{
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js [data-rise]{opacity:1; transform:none}
}

/* Logo 2026-09-24: farbiges Querlogo, auf dunklem Kopf in heller Kapsel */
.brand{min-width:0}
.hdr--top .brand img{background:#fff;border-radius:10px;padding:6px 10px;box-shadow:0 6px 20px -8px rgba(0,0,0,.4)}
.ft__brand{flex-wrap:wrap;min-width:0}
.ft__brand img{max-width:100%}