.elementor-5189 .elementor-element.elementor-element-a2b01c0{--display:flex;}.elementor-5189 .elementor-element.elementor-element-a3c02d1{--display:flex;}.elementor-5189 .elementor-element.elementor-element-a4d03e2{--display:flex;}.elementor-5189 .elementor-element.elementor-element-a5e04f3{--display:flex;}.elementor-5189 .elementor-element.elementor-element-a6f0504{--display:flex;}.elementor-5189 .elementor-element.elementor-element-1bf587b{--display:flex;}.elementor-5189 .elementor-element.elementor-element-b1a0ref{--display:flex;}.elementor-widget-toggle .elementor-toggle-title, .elementor-widget-toggle .elementor-toggle-icon{color:var( --e-global-color-primary );}.elementor-widget-toggle .elementor-toggle-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-toggle .elementor-tab-title.elementor-active a, .elementor-widget-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon{color:var( --e-global-color-accent );}.elementor-widget-toggle .elementor-toggle-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-toggle .elementor-tab-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5189 .elementor-element.elementor-element-59d057c .elementor-tab-title{border-width:1px;border-color:rgba(255,88,0,0.25);padding:20px 22px 20px 22px;}.elementor-5189 .elementor-element.elementor-element-59d057c .elementor-tab-content{border-width:1px;border-block-end-color:rgba(255,88,0,0.25);color:#3a4a63;padding:0px 22px 20px 22px;}.elementor-5189 .elementor-element.elementor-element-59d057c .elementor-toggle-title, .elementor-5189 .elementor-element.elementor-element-59d057c .elementor-toggle-icon{color:#002c77;}.elementor-5189 .elementor-element.elementor-element-59d057c .elementor-toggle-icon svg{fill:#002c77;}.elementor-5189 .elementor-element.elementor-element-59d057c .elementor-tab-title.elementor-active a, .elementor-5189 .elementor-element.elementor-element-59d057c .elementor-tab-title.elementor-active .elementor-toggle-icon{color:#ff5800;}.elementor-5189 .elementor-element.elementor-element-59d057c .elementor-toggle-title{font-family:"PT Sans", Sans-serif;font-size:20px;font-weight:700;}.elementor-5189 .elementor-element.elementor-element-59d057c .elementor-tab-title .elementor-toggle-icon i:before{color:#ff5800;}.elementor-5189 .elementor-element.elementor-element-59d057c .elementor-tab-title .elementor-toggle-icon svg{fill:#ff5800;}.elementor-5189 .elementor-element.elementor-element-59d057c .elementor-tab-title.elementor-active .elementor-toggle-icon i:before{color:#ff5800;}.elementor-5189 .elementor-element.elementor-element-59d057c .elementor-tab-title.elementor-active .elementor-toggle-icon svg{fill:#ff5800;}.elementor-5189 .elementor-element.elementor-element-4969ccd{--display:flex;--min-height:715px;--margin-top:-82px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:48px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-5189 .elementor-element.elementor-element-4969ccd:not(.elementor-motion-effects-element-type-background), .elementor-5189 .elementor-element.elementor-element-4969ccd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #001b4d 0%, #002c77 100%);}.elementor-5189 .elementor-element.elementor-element-9333a1b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:32px 40px;--row-gap:32px;--column-gap:40px;--margin-top:28px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5189 .elementor-element.elementor-element-5ebb5d0{--display:flex;}.elementor-5189 .elementor-element.elementor-element-1484526{margin:54px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5189 .elementor-element.elementor-element-0ec49c7{--display:flex;--overflow:hidden;--border-radius:20px 20px 20px 20px;box-shadow:0px 26px 64px 0px rgba(0,10,40,0.40);}.elementor-5189 .elementor-element.elementor-element-0ec49c7:not(.elementor-motion-effects-element-type-background), .elementor-5189 .elementor-element.elementor-element-0ec49c7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#ffffff;}@media(min-width:768px){.elementor-5189 .elementor-element.elementor-element-9333a1b{--content-width:1180px;}}@media(max-width:767px){.elementor-5189 .elementor-element.elementor-element-4969ccd{--margin-top:-91px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:55px;--padding-bottom:44px;--padding-left:12px;--padding-right:12px;}.elementor-5189 .elementor-element.elementor-element-9333a1b{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:57px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5189 .elementor-element.elementor-element-0ec49c7.e-con{--order:-99999 /* order start hack */;}}/* Start custom CSS *//* ============================================================================
   HUMBURG SANITÄR (Post 5189) — CSS v4, Stand 2026-09-06
   Neufassung zur Sektionsreihenfolge vom 2026-09-06 (Canvas-Fassung 3, abgenommen).

   Stil-Tier: lebendig (Florian-Entscheid 2026-09-06, assets/design-system.md).
   Familien-Konstanten UNVERÄNDERT aus v3: Navy #002c77 · Orange #ff5800 ·
   PT Sans 700/400 · Button r3px · Karten r12px weicher Schatten · Eyebrow w700 versal.

   GEÄNDERT gegenüber v3 und in design-system.md nachgezogen:
   H2 von 28–32px auf 34–38px, Eyebrow von 13px/ls1.5 auf 11.5px/ls.22em,
   neue Display-Stufe 60–82px für Hero und Signature. Grund: Stil-Tier lebendig
   plus die am 2026-09-06 gewählte Richtung „Typografie mutiger".

   Selektor-Regel (Gotcha 20): Container = .elementor-element-<id>, Widget = [data-id="<id>"]

   Stapel-Lage: #hw-water liegt position:fixed auf z-index 50. Sektionen ohne
   eigenen Stapelwert liegen darunter — das ist gewollt, dort ist das Wasser
   sichtbar. Freigestellt wird nur, was Bedienelemente trägt (Kontaktkarte).
   ============================================================================ */

/* --- 1 Sektions-Gründe (Rhythmus Navy / Weiß / Nacht / Hellgrau) ----------- */
.elementor-element-eeb18e6 { background-color:#002c77 !important; }
.elementor-element-a2b01c0 { background-color:#ffffff !important; }
.elementor-element-a3c02d1 { background-color:#001433 !important; }
.elementor-element-a4d03e2 { background-color:#f3f4f6 !important; }
.elementor-element-a5e04f3 { background-color:#002c77 !important; }
.elementor-element-a6f0504 { background-color:#ffffff !important; }
.elementor-element-1bf587b { background-color:#f3f4f6 !important; }
.elementor-element-c1c0158 { background-color:#ffffff !important; }
.elementor-element-04cdf1d { background-color:#f3f4f6 !important; }

/* Tiefe: zwei Lichtquellen je Navy-Grund. Das WebGL-Wasser bricht diese Fläche,
   deshalb bleiben die Verläufe nah an dem, was drawBG() als Textur malt
   (#0a3f90 → #001a45). */
.elementor-element-eeb18e6, .elementor-element-a5e04f3 {
  background-image:
    radial-gradient(120% 90% at 78% 8%, rgba(90,150,235,.30) 0%, rgba(90,150,235,0) 58%),
    radial-gradient(80% 70% at 4% 96%, rgba(255,88,0,.13) 0%, rgba(255,88,0,0) 60%),
    linear-gradient(168deg,#01327f 0%,#002c77 42%,#001a4d 100%) !important;
}
.elementor-element-a3c02d1 {
  background-image:
    radial-gradient(90% 120% at 50% 0%, rgba(60,120,210,.28) 0%, rgba(60,120,210,0) 55%),
    radial-gradient(70% 90% at 88% 100%, rgba(255,88,0,.13) 0%, rgba(255,88,0,0) 60%),
    linear-gradient(180deg,#01204f 0%,#001433 45%,#000d24 100%) !important;
}
.elementor-element-a4d03e2, .elementor-element-1bf587b {
  background-image:linear-gradient(180deg,#f7f8fb 0%,#f3f4f6 55%,#eef1f6 100%) !important;
}

/* --- 2 Vertikaler Rhythmus (gestaffelt, nicht gleichmäßig) ----------------- */
.elementor-element-a2b01c0, .elementor-element-a4d03e2, .elementor-element-a5e04f3,
.elementor-element-a6f0504, .elementor-element-1bf587b, .elementor-element-c1c0158,
.elementor-element-04cdf1d {
  padding:96px 32px !important;
}
.elementor-element-eeb18e6 { padding:104px 32px !important; text-align:left !important; }
/* Die Signature trägt ihr Padding innen, damit das Schaubild volle Breite bekommt. */
.elementor-element-a3c02d1 { padding:0 !important; overflow:hidden; }
.elementor-element-1bf587b { padding-bottom:80px !important; }

/* --- 3 Marken-Schrift (Atomic-Widgets erben PT Sans nicht) ----------------- */
[data-elementor-type="wp-page"] h1, [data-elementor-type="wp-page"] h2,
[data-elementor-type="wp-page"] h3, [data-elementor-type="wp-page"] .e-heading-base,
[data-elementor-type="wp-page"] .hw-kopf {
  font-family:"PT Sans","fpo pt sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
[data-elementor-type="wp-page"] h1, [data-elementor-type="wp-page"] h2 { font-weight:700 !important; }

/* Theme-Seitentitel (2. H1) ausblenden — unverändert aus v3 */
.page-header .entry-title, body.page .site-main > .page-header { display:none !important; }

/* ============================================================================
   GEMEINSAME BAUTEILE der neuen Sektionen
   ============================================================================ */
.hw-x { --hw-navy:#002c77; --hw-navy-tief:#001a4d; --hw-orange:#ff5800;
        --hw-orange-hell:#ff8a45; --hw-linie:#dde2ec; --hw-text:#2c3340;
        --hw-sek:#5b6478; --hw-auf-navy-sek:#a8bde0;
        --hw-kopf:"PT Sans","fpo pt sans",Trebuchet MS,sans-serif;
        max-width:1200px; margin:0 auto; text-align:left;
        font-size:16px; line-height:1.62; color:var(--hw-text);
        font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica Neue,Arial,sans-serif; }
.hw-x *, .hw-x *::before, .hw-x *::after { box-sizing:border-box; }
.hw-x p { margin:0 0 14px; max-width:62ch; }

.hw-x .hw-eyebrow{ font-family:var(--hw-kopf); font-size:11.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--hw-orange);
  margin:0 0 20px; display:flex; align-items:center; gap:12px; }
.hw-x .hw-eyebrow::before{ content:""; width:26px; height:1px; background:var(--hw-orange); opacity:.7; }
.hw-x--dunkel .hw-eyebrow{ color:var(--hw-orange-hell); }

.hw-x h2{ font-family:var(--hw-kopf); font-weight:700;
  font-size:clamp(1.9rem,2.7vw,2.375rem); line-height:1.13; color:var(--hw-navy);
  letter-spacing:-.9px; margin:0 0 16px; }
.hw-x--dunkel h2{ color:#fff; }
.hw-x h3{ font-family:var(--hw-kopf); font-weight:700; font-size:19px;
  color:var(--hw-navy); margin:0 0 7px; line-height:1.3; }
.hw-x--dunkel h3{ color:#fff; }
.hw-x .hw-sub{ font-size:19px; line-height:1.62; color:var(--hw-sek);
  margin:0 0 34px; max-width:56ch; }
.hw-x--dunkel .hw-sub{ color:var(--hw-auf-navy-sek); }

.hw-x .hw-btn{ display:inline-block; font-family:var(--hw-kopf); font-weight:700;
  font-size:16.5px; padding:17px 34px; border-radius:3px; color:#001a4d;
  text-decoration:none;
  background:linear-gradient(180deg,#ff7a2e 0%,#ff5800 55%,#ea4f00 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 2px 0 rgba(140,45,0,.4),
             0 12px 30px rgba(255,88,0,.35); }
.hw-x .hw-btn:hover{ filter:brightness(1.06); }

/* ============================================================================
   S2 — ABLAUF UND PREISZUSAGE (Container a2b01c0)
   WOW: die Achse füllt sich bis zum dritten Schritt, dort rastet die Preis-Fahne
   ein und der Knoten glüht. Zeigt die Zusage, statt sie zu behaupten.
   ============================================================================ */
.hw-s2-achse{ position:relative; margin-top:52px; padding-top:64px; }
.hw-s2-gleis{ position:absolute; left:0; right:0; top:26px; height:4px; border-radius:3px;
  background:linear-gradient(180deg,#e4e9f2,#eef1f7);
  box-shadow:0 1px 2px rgba(0,26,77,.07) inset; }
.hw-s2-fuell{ position:absolute; left:0; top:26px; height:4px; width:0; border-radius:3px;
  background:linear-gradient(90deg,#002c77,#1b4494);
  box-shadow:0 0 16px rgba(27,68,148,.45);
  animation:hwS2fuellen 2.6s cubic-bezier(.3,0,.2,1) .3s forwards; }
@keyframes hwS2fuellen{ to{ width:62%; } }
.hw-s2-schritte{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.hw-s2-schritt{ position:relative; padding-top:6px; }
.hw-s2-schritt::before{ content:""; position:absolute; top:-45px; left:0; width:16px; height:16px;
  border-radius:50%; background:#fff; border:3px solid #002c77; opacity:0;
  animation:hwS2auf .4s forwards; box-shadow:0 2px 6px rgba(0,26,77,.18); }
.hw-s2-schritt:nth-child(1)::before{ animation-delay:.6s; }
.hw-s2-schritt:nth-child(2)::before{ animation-delay:1.2s; }
.hw-s2-schritt:nth-child(3)::before{ animation-delay:2s; }
.hw-s2-schritt:nth-child(4)::before{ animation-delay:2.6s; }
@keyframes hwS2auf{ to{ opacity:1; } }
.hw-s2-schritt.hw-zusage::before{ border-color:#ff5800; width:22px; height:22px; top:-48px; left:-3px;
  background:radial-gradient(circle at 35% 30%,#ffa268,#ff5800);
  box-shadow:0 0 0 7px rgba(255,88,0,.15),0 4px 14px rgba(255,88,0,.5); }
.hw-s2-schritt h3{ font-size:17.5px; }
.hw-s2-schritt p{ font-size:14.5px; color:var(--hw-sek); margin:0; max-width:30ch; }
.hw-s2-fahne{ position:absolute; left:62%; top:-20px; transform:translateX(-50%) scale(.6);
  opacity:0; background:linear-gradient(180deg,#ff7a2e,#ff5800); color:#001a4d;
  font-family:var(--hw-kopf); font-weight:700; font-size:13.5px; padding:7px 16px;
  border-radius:3px; white-space:nowrap; box-shadow:0 8px 22px rgba(255,88,0,.4);
  animation:hwS2rasten .55s cubic-bezier(.2,1.6,.4,1) 2.2s forwards; }
@keyframes hwS2rasten{ to{ opacity:1; transform:translateX(-50%) scale(1); } }
/* Die Einschraenkung der Festpreis-Zusage steht sichtbar unter der Achse, nicht
   kleingedruckt. Auf der Bestandsseite stand dieselbe Zusage viermal - zweimal mit
   dem Vorbehalt "bei planbaren Arbeiten", zweimal absolut. Die absolute Fassung ist
   beim Notfall-Einsatz nicht haltbar (UWG). */
.hw-s2-fussnote{ margin-top:46px; padding-top:22px; border-top:1px solid var(--hw-linie);
  font-size:15px; color:var(--hw-sek); max-width:74ch; }

/* ============================================================================
   S3 — UMFANG, DIE SIGNATURE (Container a3c02d1)
   Genau eine je Seite. Träger (vi) Schaubild: der Schnitt durch die Installation
   über die volle Breite, und der Tropfen folgt dem SCROLL statt einer Uhr.
   ============================================================================ */
.hw-s3-kopf{ max-width:1200px; margin:0 auto; padding:96px 32px 30px; }
.hw-s3-kopf .hw-sub{ color:#9fb6dd; max-width:60ch; margin-bottom:0; }
.hw-s3-display{ font-family:var(--hw-kopf); font-weight:700;
  font-size:clamp(3rem,5.7vw,5.125rem); line-height:.98; letter-spacing:-2.6px;
  color:#fff; margin:0 0 20px; }
/* Kein height-Attribut am SVG: das viewBox-Verhältnis bestimmt die Höhe allein.
   Eine feste Höhe gegen eine skalierte viewBox polstert oben und unten. */
.hw-s3-buehne{ padding:0 0 34px; }
.hw-s3-buehne svg{ display:block; width:100%; height:auto; }
.hw-s3-bahn{ stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:hwS3zeichnen 3s cubic-bezier(.4,0,.2,1) .3s forwards; }
@keyframes hwS3zeichnen{ to{ stroke-dashoffset:0; } }
.hw-s3-stroem{ stroke-dasharray:30 42; animation:hwS3stroemen 2.1s linear 2.8s infinite; }
@keyframes hwS3stroemen{ to{ stroke-dashoffset:-72; } }
.hw-s3-tropfen{ offset-path:path("M0 470 L250 470 L250 392 L560 392 L560 300 L960 300 L960 196 L1500 196 L1500 300 L1900 300 L1900 392 L2160 392");
  offset-distance:0%; offset-rotate:0deg; }
.hw-s3-punkt{ animation:hwS3pochen 3.6s ease-in-out infinite; }
.hw-s3-punkt:nth-of-type(2){ animation-delay:.4s; }
.hw-s3-punkt:nth-of-type(3){ animation-delay:.8s; }
.hw-s3-punkt:nth-of-type(4){ animation-delay:1.2s; }
.hw-s3-punkt:nth-of-type(5){ animation-delay:1.6s; }
.hw-s3-punkt:nth-of-type(6){ animation-delay:2s; }
@keyframes hwS3pochen{ 0%,74%,100%{ r:11; opacity:.92; } 84%{ r:15; opacity:1; } }
.hw-s3-legende{ display:flex; gap:40px; max-width:1200px; margin:0 auto;
  padding:0 32px 22px; font-size:13.5px; color:#7f97c4; flex-wrap:wrap; }
.hw-s3-legende b{ color:var(--hw-orange-hell); font-family:var(--hw-kopf); }
.hw-s3-abgrenzung{ max-width:1200px; margin:0 auto; padding:26px 32px 96px;
  font-size:15px; color:#9fb6dd; border-top:1px solid rgba(140,175,235,.18); }
.hw-s3-abgrenzung strong{ color:#fff; }
.hw-s3-abgrenzung a{ color:#fff; font-weight:700; text-decoration:none;
  box-shadow:inset 0 -2px 0 #ff5800; }
.hw-s3-fortschritt{ position:absolute; left:0; top:0; height:3px; width:0; z-index:4;
  background:linear-gradient(90deg,#ff5800,#ff8a45); }

/* ============================================================================
   S4 — WASSERTECHNIK UND MARKEN (Container a4d03e2)
   WOW: dieselbe Strecke wie in der Signature, nur flach. Die sechs Prozentwerte
   sind aus den x-Koordinaten des Schnitts abgeleitet (160/400/760/1180/1700/2040
   von 2160), auf 9…91 % eingerückt, damit die Randblöcke nicht überstehen.
   Deshalb ist die Form nicht kopierbar: sie funktioniert nur unter diesem Schnitt.
   ============================================================================ */
.hw-s4-strecke{ position:relative; height:400px; margin-top:56px; }
.hw-s4-achse{ position:absolute; left:0; right:0; top:50%; height:8px;
  transform:translateY(-4px); border-radius:5px;
  background:linear-gradient(180deg,#c9d6ea,#aabdd9);
  box-shadow:0 1px 2px rgba(0,26,77,.14) inset; }
.hw-s4-achse::after{ content:""; position:absolute; left:0; top:2px; right:0; height:4px;
  border-radius:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 14px,transparent 14px 26px); }
.hw-s4-st{ position:absolute; width:206px; }
.hw-s4-st::after{ content:""; position:absolute; left:50%; width:1.5px; height:30px;
  background:linear-gradient(180deg,#ff5800,rgba(255,88,0,.25)); }
.hw-s4-st.hw-oben{ bottom:calc(50% + 34px); }
.hw-s4-st.hw-oben::after{ bottom:-32px; }
.hw-s4-st.hw-unten{ top:calc(50% + 34px); }
.hw-s4-st.hw-unten::after{ top:-32px; background:linear-gradient(0deg,#ff5800,rgba(255,88,0,.25)); }
.hw-s4-punkt{ position:absolute; top:50%; width:17px; height:17px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#ffa268,#ff5800);
  box-shadow:0 0 0 6px rgba(255,88,0,.13),0 3px 10px rgba(255,88,0,.45); }
.hw-s4-ort{ font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--hw-orange); font-family:var(--hw-kopf); font-weight:700; margin-bottom:7px; }
.hw-s4-name{ font-family:var(--hw-kopf); font-size:22px; color:var(--hw-navy);
  font-weight:700; line-height:1.12; letter-spacing:-.5px; }
.hw-s4-st p{ font-size:14px; color:var(--hw-sek); margin:8px 0 0; line-height:1.5; }
.hw-s4-schluss{ margin-top:34px; font-size:17px; color:var(--hw-navy); font-weight:700;
  font-family:var(--hw-kopf); max-width:none; }

/* ============================================================================
   S5 — DER BETRIEB (Container a5e04f3)
   WOW: die Belegschaft wird gezeichnet statt behauptet. Meister und Fachkräfte
   stehen als GETRENNTE Gruppen — ob die 4 Meister in den 24 enthalten sind, ist
   nicht belegt, und eine Teilmengen-Darstellung würde das behaupten (§6 Regel 2a).
   530px = 15 Positionen à 26px plus 14 Abstände à 10px. Exakt, damit die 29
   Striche in zwei volle Zeilen fallen statt eine Waise in einer dritten zu lassen.
   ============================================================================ */
.hw-s5{ display:grid; grid-template-columns:1fr 530px; gap:80px; align-items:center; }
.hw-s5-crew{ display:flex; flex-wrap:wrap; gap:10px; width:530px; }
.hw-s5-i{ width:26px; height:50px; border-radius:13px 13px 4px 4px; opacity:0;
  animation:hwS5ein .35s forwards;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.12)); }
.hw-s5-i.hw-meister{ background:linear-gradient(180deg,#ffa268,#ff5800);
  box-shadow:0 0 0 4px rgba(255,88,0,.16),0 4px 14px rgba(255,88,0,.45); }
.hw-s5-luecke{ width:26px; }
@keyframes hwS5ein{ to{ opacity:1; } }
.hw-s5-bu{ margin-top:20px; font-size:14.5px; color:var(--hw-auf-navy-sek);
  display:flex; gap:26px; }
.hw-s5-bu i{ font-style:normal; display:inline-flex; align-items:center; gap:8px; }
.hw-s5-bu i::before{ content:""; width:11px; height:20px; border-radius:6px 6px 2px 2px;
  background:rgba(255,255,255,.28); }
.hw-s5-bu i.hw-m::before{ background:#ff5800; }
.hw-s5-zahlen{ display:flex; gap:64px; align-items:flex-start; margin-top:34px; }
.hw-s5-zahl b{ display:block; font-family:var(--hw-kopf); font-weight:700;
  font-size:clamp(3.6rem,6vw,5.75rem); line-height:.86; color:#fff; letter-spacing:-3.5px; }
.hw-s5-zahl.hw-akz b{ background:linear-gradient(180deg,#ffb184,#ff5800);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hw-s5-zahl span{ display:block; font-size:14.5px; color:var(--hw-auf-navy-sek);
  margin-top:14px; max-width:180px; }
.hw-s5-seit{ margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  font-size:16px; color:var(--hw-auf-navy-sek); max-width:460px; }
.hw-s5-seit b{ color:#fff; font-family:var(--hw-kopf); }

/* ============================================================================
   S6 — WAS SCHIEFGEHEN KANN (Container a6f0504)
   WOW: eine glühende Achse trennt beide Seiten — die einzige Kante der Sektion.
   Kein Wettbewerber wird genannt (UWG).
   ============================================================================ */
.hw-s6-paare{ margin-top:36px; position:relative; }
.hw-s6-mittel{ position:absolute; left:50%; top:0; width:2px; height:100%;
  transform:translateX(-1px);
  background:linear-gradient(180deg,#ff5800,rgba(255,88,0,.35) 40%,rgba(255,88,0,.06));
  box-shadow:0 0 14px rgba(255,88,0,.25); }
.hw-s6-paar{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--hw-linie); }
.hw-s6-paar:last-child{ border-bottom:0; }
.hw-s6-l{ padding:26px 48px 26px 0; color:#98a3b5; font-size:17px; text-align:right;
  font-style:italic; }
.hw-s6-r{ padding:26px 0 26px 48px; color:var(--hw-navy); font-size:17px; font-weight:700;
  letter-spacing:-.2px; }

/* ============================================================================
   S7 — REFERENZEN (Container 1bf587b)
   Bewusst LEER, bis Fotos und Freigaben vorliegen. Kein Platzhalter-Projekt,
   keine erfundene Referenz (§6 Regeln 1/2). Die Ortsliste ist belegt (Einzugsgebiet).
   ============================================================================ */
.hw-s7-leer{ margin-top:32px; border-radius:12px; border:1px solid #dde2ec;
  padding:44px 36px; text-align:center;
  background:linear-gradient(180deg,#fff,#f6f8fc);
  box-shadow:0 2px 6px rgba(0,26,77,.06),0 14px 40px rgba(0,26,77,.08); }
.hw-s7-leer h3{ color:var(--hw-sek); font-size:21px; }
.hw-s7-leer p{ max-width:60ch; margin:12px auto 0; color:#93a0b4; }
.hw-s7-orte{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:22px auto 0; max-width:780px; }
.hw-s7-ort{ border:1px solid #ccd5e3; color:var(--hw-navy); font-size:13.5px;
  font-weight:600; padding:9px 16px; border-radius:8px; background:#fff;
  box-shadow:0 1px 2px rgba(0,26,77,.04); }

/* ============================================================================
   S1 — HERO (Container eeb18e6, ID BEHALTEN)
   Die ID bleibt, weil zwei Dinge daran hängen: der Eintritts-Guard des
   Wasser-Widgets (querySelector '#hw-hero-eyebrow, [data-id="eeb18e6"]') und
   das Widget selbst als Kind. Ein neuer Hero mit neuer ID hätte die Animation
   stillgelegt — ohne Fehlermeldung.

   Neu: zweispaltig statt zentriert. Links die Ansage, rechts der gezeichnete
   Radius. Der frühere Foto-Slot #hw-slot-hero trägt jetzt diese Zeichnung; ein
   späteres Foto kann sie ersetzen, blockiert den Bau aber nicht mehr.
   ============================================================================ */
.elementor-element-eeb18e6 {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 470px;
  column-gap:80px; align-items:center; align-content:center;
  justify-items:start;
}
.elementor-element-eeb18e6 > * { grid-column:1; max-width:640px; }
.elementor-element-eeb18e6 > #hw-slot-hero {
  grid-column:2; grid-row:1 / span 5; align-self:center;
  background:none !important; border:none !important; border-radius:0 !important;
  aspect-ratio:auto !important; max-width:470px !important; width:470px;
  margin:0 !important;
}
/* Das Wasser-Widget rendert ein leeres div — es hängt sein Canvas an den body.
   Ohne diese Regel reißt es eine Leerzeile in die Hero-Spalte. */
.elementor-element-eeb18e6 > [data-id="204fc2b"] { grid-column:1; height:0; overflow:hidden; }

[data-id="26ad1b6"] {
  color:#ff8a4c !important; font-weight:700 !important; letter-spacing:.22em !important;
  font-size:11.5px !important; text-transform:uppercase;
}
[data-id="30aef83"] {
  color:#fff !important; font-size:clamp(2.25rem,4.6vw,3.75rem) !important;
  font-weight:700 !important; line-height:1.03; letter-spacing:-1.6px;
  max-width:none !important; margin:0 0 24px !important; text-align:left !important;
}
[data-id="5ce5e2c"] {
  color:#a8bde0 !important; font-size:19px !important; line-height:1.62;
  max-width:52ch !important; margin-bottom:34px !important; text-align:left !important;
}
[data-id="150f9e7"] { color:#cdd9ef !important; font-weight:600; text-align:left !important; }
.elementor-element-5e9e5b4 { justify-content:flex-start !important; }

/* Buttons — Familienwert r3px. Unveraendert aus CSS v3 uebernommen; beim ersten
   Zusammenstellen von v4 vergessen, in der Vorschau als ungestylte Links sichtbar
   geworden. 1baf6c7 und 56666e1 gehoerten zum gestrichenen Closing-Container und
   sind hier bewusst nicht mehr aufgefuehrt. */
[data-id="09f8e88"] {
  background-color:#ff5800 !important; color:#fff !important; border-radius:3px !important;
  padding:14px 26px !important; font-weight:700 !important; border:none !important;
}
[data-id="0cb3613"] {
  background-color:transparent !important; color:#fff !important;
  border:2px solid rgba(255,255,255,.55) !important; border-radius:3px !important;
  padding:12px 24px !important; font-weight:600 !important;
}
.elementor-element-5e9e5b4 { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

/* Hero-Radius: der gezeichnete Einzugsbereich im früheren Foto-Slot. */
.hw-hero-radius svg{ display:block; width:100%; height:auto; }
.hw-hero-ring{ stroke-dasharray:1200; stroke-dashoffset:1200;
  animation:hwRingZiehen 2s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes hwRingZiehen{ to{ stroke-dashoffset:0; } }
.hw-hero-puls{ animation:hwHeroPuls 4s ease-in-out infinite; }
@keyframes hwHeroPuls{ 0%,100%{ opacity:.2; r:22; } 50%{ opacity:.65; r:34; } }

/* ============================================================================
   S8 — FAQ (Container c1c0158, BEHALTEN)
   Natives elementor-toggle (Widget 59d057c), Mechanik wie /waermepumpen/.
   Block unverändert aus CSS v3 übernommen — dieselbe Sache nutzt site-weit
   dieselbe Mechanik. Nur der Grund wechselt von hellgrau auf weiß, weil die
   Nachbarsektion im neuen Rhythmus hellgrau ist.
   ============================================================================ */
.elementor-element-c1c0158 { text-align:left; }
.elementor-element-c1c0158 > * { max-width:900px; margin-left:auto; margin-right:auto; }
[data-id="c98200e"] {
  color:#ff5800 !important; font-weight:700 !important; letter-spacing:.22em !important;
  font-size:11.5px !important; text-transform:uppercase; text-align:left;
}
[data-id="dac42a4"] {
  color:#002c77 !important; font-size:clamp(1.9rem,2.7vw,2.375rem) !important;
  font-weight:700 !important; line-height:1.13; letter-spacing:-.9px; text-align:left;
}
.elementor-element-59d057c .elementor-toggle-item {
  border-radius:14px; border:1px solid rgba(255,88,0,.25);
  background-color:#ffffff; margin-bottom:14px; overflow:hidden;
}
.elementor-element-59d057c .elementor-tab-title {
  border:none !important; cursor:pointer;
  transition:background-color 180ms ease, color 180ms ease;
}
.elementor-element-59d057c .elementor-tab-title:hover { background-color:rgba(255,88,0,.04); }
.elementor-element-59d057c .elementor-tab-title.elementor-active { background-color:rgba(255,88,0,.06); }
.elementor-element-59d057c .elementor-tab-content { border:none !important; }
.elementor-element-59d057c .elementor-tab-title a,
.elementor-element-59d057c .elementor-toggle-title {
  font-family:"PT Sans","fpo pt sans",sans-serif !important;
}
.elementor-element-59d057c .elementor-tab-content a { color:#002c77; text-decoration:underline; }
.elementor-element-59d057c .elementor-tab-content a:hover { color:#ff5800; }

/* ============================================================================
   S9 — STANDORT (Container 04cdf1d, BEHALTEN)
   Local-SEO-Pflichtbaustein. Block unverändert aus CSS v3, nur linksbündig
   statt zentriert, damit er zum neuen Satz der Nachbarsektionen passt.
   ============================================================================ */
.elementor-element-04cdf1d { text-align:left; }
.elementor-element-04cdf1d > * { max-width:1200px; margin-left:auto; margin-right:auto; }
[data-id="d217382"] {
  color:#ff5800 !important; font-weight:700 !important; letter-spacing:.22em !important;
  font-size:11.5px !important; text-transform:uppercase;
}
[data-id="331eabe"] {
  color:#002c77 !important; font-size:clamp(1.9rem,2.7vw,2.375rem) !important;
  font-weight:700 !important; line-height:1.13; letter-spacing:-.9px;
  max-width:none !important; margin-left:0 !important; margin-right:0 !important;
}
[data-id="35ad24c"] { color:#5b6478 !important; font-size:19px !important; max-width:56ch !important;
  margin-left:0 !important; margin-right:0 !important; }
.elementor-element-61332ee { max-width:1200px; margin:32px auto 0 auto; text-align:left; }
.elementor-element-67007df { flex:1 1 40% !important; min-width:280px; }
.elementor-element-709a422 { flex:1 1 55% !important; min-width:280px; }

.hw-nap { color:#33373d; font-size:1rem; line-height:1.65; }
.hw-nap p { margin:0 0 14px 0; }
.hw-nap-firma { font-weight:700; color:#002c77; font-size:1.1rem; }
.hw-nap-adresse { font-size:1.05rem; }
.hw-nap a { color:#002c77; text-decoration:none; border-bottom:1px solid rgba(0,44,119,.3); }
.hw-nap a:hover { color:#ff5800; border-bottom-color:#ff5800; }
.hw-nap-label { display:block; font-size:13px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:#ff5800; margin-bottom:2px; }
.hw-nap-zeiten { padding-top:6px; border-top:1px solid #e3e9f2; }
.hw-nap-ausstellung { color:#4a5568; }
.hw-nap-btn { display:inline-block; margin-top:6px; background-color:#ff5800; color:#fff !important;
  border-radius:3px; padding:14px 26px; font-weight:700; text-decoration:none;
  border-bottom:none !important; }
.hw-nap-btn:hover { background-color:#e64f00; color:#fff !important; }
.elementor-element-709a422 iframe, .elementor-element-709a422 .rcb-content-blocker {
  width:100% !important; min-height:380px !important; border:0 !important;
  border-radius:12px !important; display:block !important;
}

/* ============================================================================
   S10 — KONTAKT (Container 4969ccd, BEHALTEN)
   Trägt [ws_form id="57"] und die Reiter-Karte. Unverändert übernommen.

   Stapel-Regel aus v3, weiterhin nötig: #hw-water liegt position:fixed auf
   z-index 50 und malt über jedes Element ohne eigenen Stapelwert. Auf den
   Navy-Flächen ist genau das gewollt; auf der weißen Kontaktkarte verdeckte es
   gemessen zwei Kacheln. Nur diese eine Sektion wird freigestellt.
   ============================================================================ */
.elementor-element-4969ccd { position:relative; z-index:51; }

/* ============================================================================
   MOBIL
   ============================================================================ */
@media (max-width:1100px) {
  .elementor-element-eeb18e6 { grid-template-columns:minmax(0,1fr); }
  .elementor-element-eeb18e6 > #hw-slot-hero {
    grid-column:1; grid-row:auto; width:100%; max-width:470px !important; margin-top:32px !important;
  }
  .hw-s5 { grid-template-columns:1fr; gap:44px; }
  .hw-s5-crew { width:100%; max-width:530px; }
}
@media (max-width:900px) {
  .hw-s2-schritte { grid-template-columns:repeat(2,1fr); gap:36px 30px; }
  .hw-s2-fahne { left:50%; }
  /* Die Marken-Strecke ist eine waagerechte Erzählung und trägt schmal nicht.
     Unter 900px wird daraus eine senkrechte Liste — dieselben sechs Stellen,
     dieselbe Reihenfolge, ohne die Achse. */
  .hw-s4-strecke { height:auto; margin-top:36px; }
  .hw-s4-achse { display:none; }
  .hw-s4-punkt { display:none; }
  .hw-s4-st { position:static !important; width:100% !important; transform:none !important;
    padding:22px 0; border-top:1px solid #dde2ec; }
  .hw-s4-st::after { display:none; }
  .hw-s4-st p { max-width:52ch; }
}
@media (max-width:767px) {
  .elementor-element-eeb18e6 { padding:72px 20px !important; }
  .elementor-element-a2b01c0, .elementor-element-a4d03e2, .elementor-element-a5e04f3,
  .elementor-element-a6f0504, .elementor-element-1bf587b, .elementor-element-c1c0158,
  .elementor-element-04cdf1d { padding:64px 20px !important; }
  .hw-s3-kopf { padding:72px 20px 24px; }
  .hw-s3-legende { padding:0 20px 18px; gap:18px; }
  .hw-s3-abgrenzung { padding:22px 20px 64px; }
  /* Das Schaubild ist 2160 Einheiten breit. Auf dem Telefon wird es waagerecht
     scrollbar statt unlesbar klein — die Strecke bleibt begehbar. */
  .hw-s3-buehne { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hw-s3-buehne svg { width:900px; max-width:none; }
  .hw-s2-schritte { grid-template-columns:1fr; gap:30px; }
  .hw-s2-achse { padding-top:44px; }
  .hw-s5-zahlen { gap:36px; }
  .hw-s6-paar { grid-template-columns:1fr; }
  .hw-s6-mittel { display:none; }
  .hw-s6-l { padding:22px 0 8px; text-align:left; }
  .hw-s6-r { padding:0 0 22px; }
  .elementor-element-61332ee { flex-direction:column !important; flex-wrap:nowrap !important;
    gap:28px !important; margin-top:24px; }
  .elementor-element-67007df, .elementor-element-709a422 {
    flex:1 1 100% !important; min-width:0 !important; width:100% !important; }
  .elementor-element-709a422 iframe, .elementor-element-709a422 .rcb-content-blocker {
    min-height:300px !important; }
  .hw-nap-btn { display:block; text-align:center; }
  .elementor-element-59d057c .elementor-tab-title { padding:16px !important; }
  .elementor-element-59d057c .elementor-tab-content { padding:0 16px 16px 16px !important; }
}

/* ============================================================================
   BEWEGUNG ABSCHALTBAR — Pflicht, nicht Kür (BFSG/WCAG 2.3.3).
   Das Wasser-Widget hat seinen eigenen reduced-motion-Zweig; hier stehen nur
   die Sektions-Animationen dieser Seite.
   ============================================================================ */
@media (prefers-reduced-motion:reduce) {
  .hw-s2-fuell { animation:none; width:62%; }
  .hw-s2-schritt::before, .hw-s2-fahne, .hw-s5-i { animation:none; opacity:1; }
  .hw-s2-fahne { transform:translateX(-50%); }
  .hw-s3-bahn, .hw-s3-stroem, .hw-s3-punkt, .hw-hero-ring, .hw-hero-puls { animation:none; }
  .hw-s3-bahn, .hw-hero-ring { stroke-dashoffset:0; }
  .hw-s3-tropfen { opacity:0; }
}

/* ==========================================================================
   EINE KANTE FUER ALLE ZEHN SEKTIONEN
   Florian-Befund 2026-09-08: "die sektionen beginnen noch ueberall unterschiedlich".
   Gemessen bei 1440px Fensterbreite, wo der Text jeder Sektion begann:
     Hero 32px · die fuenf neuen Sektionen 120px · FAQ 270px · Kontakt 336px
   Rechenweg: Container-Padding 32px, darin ein Traeger mit eigener max-width,
   zentriert. Bei 1200px Traeger -> (1440-1200)/2 = 120px; bei 900 -> 270px;
   bei 767 -> 336px. Der Hero hat keinen zentrierten Traeger, sein Inhalt sitzt
   direkt am Padding -> 32px. Vier verschiedene Inhaltsbreiten, vier Kanten.
   Der Fix dreht die Zustaendigkeit um: die KANTE macht ab jetzt der Container
   (eine Formel, ueberall dieselbe), die Traeger begrenzen nicht mehr.
   ========================================================================== */
.elementor-element-eeb18e6, .elementor-element-a2b01c0, .elementor-element-a3c02d1,
.elementor-element-a4d03e2, .elementor-element-a5e04f3, .elementor-element-a6f0504,
.elementor-element-1bf587b, .elementor-element-c1c0158, .elementor-element-04cdf1d,
.elementor-element-4969ccd {
  padding-inline: max(32px, calc((100% - 1200px) / 2)) !important;
}

/* Innere Begrenzungen aufheben - sonst wirkt zweimal dieselbe Einschraenkung
   und die Kante wandert wieder auseinander. */
.hw-x { max-width:none; margin-left:0; margin-right:0; }
.elementor-element-c1c0158 > *, .elementor-element-04cdf1d > * {
  max-width:none; margin-left:0; margin-right:0; }
.elementor-element-4969ccd > .e-con-inner { max-width:none !important; }

/* Der Umfang-Container traegt sein Padding in den Kindern, nicht am Container.
   Ohne diese Zeile addiert sich beides und die Sektion rueckt 32px weiter ein. */
.hw-s3-kopf, .hw-s3-legende, .hw-s3-abgrenzung {
  max-width:none; margin-left:0; margin-right:0;
  padding-left:0 !important; padding-right:0 !important; }

/* Der Hero setzt seine Textspalte weiter auf 640px - schmal ist hier gewollt,
   sie beginnt jetzt nur an derselben Kante wie alles andere. */

/* Zwei Bestandsreste, die die Kante nach dem ersten Fix noch brachen.
   Gemessen live 2026-09-08 bei 1440px: acht Sektionen sassen auf 112px,
   FAQ auf 627px, Kontakt auf 138px.
   FAQ: Eyebrow und H2 standen aus dem Elementor-Bestand ZENTRIERT (je 515px
   bzw. 206px Einzug bei 1200px Traegerbreite), waehrend das Frage-Widget
   darunter linksbuendig sass - die Sektion widersprach sich selbst.
   Kontakt: der innere Container traegt 10px Eigen-Padding. */
.elementor-element-c1c0158 > p, .elementor-element-c1c0158 > h2 {
  text-align:left !important; margin-left:0 !important; margin-right:auto !important; }
.elementor-element-4969ccd > .e-con-inner, .elementor-element-4969ccd > .elementor-element {
  padding-left:0 !important; padding-right:0 !important; }

/* Kontakt-Kante, dritter Anlauf. Die ersten beiden trafen nur die oberen
   Ebenen; gemessen live 2026-09-08 sitzen die Schieber tiefer und sind drei:
     .hw-pitch            padding-left  6px
     [data-id=5ebb5d0]    padding-left 10px
     .e-con-inner         margin-left  10px
   Summe 26px = die Abweichung (139px gegen 113px bei 1440px Fenster).
   Bewusst NICHT als Sammelregel auf alle .elementor-element-Nachkommen -
   die haben ihr Padding zum Teil aus gutem Grund. */
.elementor-element-4969ccd .hw-pitch { padding-left:0 !important; }
.elementor-element-4969ccd [data-id="5ebb5d0"] { padding-left:0 !important; }
.elementor-element-4969ccd .e-con-inner { margin-left:0 !important; }

/* Erste echte Bilder auf der Seite (2026-09-08). Drei Ausstellungsaufnahmen
   unter der Wassertechnik-Strecke. Hochformat 3:4 - so kamen sie von Michelle,
   zehn der zwoelf Aufnahmen sind hochkant. Deshalb ein Dreier-Raster statt
   eines breiten Bands. */
.hw-s4-schau{ margin-top:64px; }
.hw-s4-schau-kopf{ font-size:19px; line-height:1.62; color:var(--hw-sek);
  max-width:60ch; margin:0 0 28px; }
.hw-s4-schau-reihe{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.hw-s4-schau-reihe figure{ margin:0; }
.hw-s4-schau-reihe img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:2px; display:block; background:#e9eef6; }
.hw-s4-schau-reihe figcaption{ font-size:14.5px; line-height:1.55; color:var(--hw-sek);
  margin-top:12px; }
.hw-s4-schau-fuss{ font-size:14px; color:#8a94a6; margin:22px 0 0; }
@media(max-width:860px){
  .hw-s4-schau-reihe{ grid-template-columns:1fr; gap:28px; }
  .hw-s4-schau-reihe img{ aspect-ratio:4/3; }
}

/* Referenz-Geruest, wiederhergestellt 2026-09-08.
   Es stand als ausgeblendeter Container 1bf587b in der Vorfassung und wurde beim
   Umbau ueberschrieben - der Platz, den der Betrieb fuer echte Projektfotos
   reserviert hatte, war damit weg. Kommt jetzt als eigener Container zurueck,
   weiter unsichtbar, mit drei Bildplaetzen.
   display:none ist hier bewusst: das Wasser-Widget ueberspringt Container mit
   height < 8 (measure()), damit bleibt die Motiv-Reihenfolge unberuehrt.
   Sichtbar wird die Sektion, indem die Klasse hw-ref-geruest entfernt wird. */
.hw-ref-geruest{ display:none !important; }
.hw-ref-reihe{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
.hw-ref-platz{ margin:0; }
.hw-ref-bild{ aspect-ratio:4/3; background:#e9eef6; border-radius:2px; }
.hw-ref-platz figcaption{ font-size:14.5px; color:var(--hw-sek); margin-top:12px; }
@media(max-width:860px){ .hw-ref-reihe{ grid-template-columns:1fr; } }

/* Der Geruest-Container selbst muss auch weg, nicht nur sein Inhalt: das Kind
   steht auf display:none, der Container trug aber weiter sein Padding und
   hinterliess 20px Leerraum zwischen Einzugsgebiet und FAQ (gemessen 2026-09-08). */
.elementor-element-b1a0ref { display:none !important; padding:0 !important; }/* End custom CSS */