:root{
  --navy:#061b34;
  --navy2:#092849;
  --gold:#d6a43b;
  --gold2:#f0c866;
  --white:#fff;
  --light:#f6f8fb;
  --text:#0b1d35;
  --muted:#506075;
  --green:#25D366;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--light);color:var(--text)}
a{text-decoration:none;color:inherit}
.header{height:145px;background:#fff;display:grid;grid-template-columns:300px 1fr 360px;align-items:center;padding:0 44px;box-shadow:0 6px 26px rgba(0,0,0,.09);position:sticky;top:0;z-index:100}
.logo img{height:138px;object-fit:contain}
.nav{display:flex;justify-content:center;gap:21px;text-transform:uppercase;font-size:14px;font-weight:900}
.nav a{color:var(--navy);position:relative}
.nav a.active,.nav a:hover{color:var(--gold)}
.nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:3px;background:var(--gold)}
.top-call{justify-self:end;background:var(--navy);color:#fff;border-radius:18px;padding:14px 24px;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.top-call .phone-icon{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));display:grid;place-items:center;color:var(--navy);font-size:28px;font-weight:900}
.top-call span{display:block;color:var(--gold2);font-size:14px;text-transform:uppercase;font-weight:900}
.top-call strong{display:block;font-size:29px;line-height:1}
.top-call small{display:block;font-size:14px;text-transform:uppercase;font-weight:800}

.hero{position:relative;min-height:610px;background:
linear-gradient(90deg,rgba(6,27,52,.97) 0%,rgba(6,27,52,.84) 37%,rgba(6,27,52,.18) 100%),
url('water.jpg') center/cover no-repeat;overflow:hidden;color:#fff;display:flex;align-items:center;padding:55px 54px}
.hero:before{content:"";position:absolute;left:-80px;top:0;width:54%;height:100%;background:rgba(6,27,52,.90);clip-path:polygon(0 0,89% 0,70% 100%,0 100%)}
.hero-content{position:relative;z-index:2;max-width:620px}
.hero h1{margin:0 0 20px;text-transform:uppercase;font-size:58px;line-height:1.02;font-weight:900;font-style:italic;letter-spacing:-1px}
.hero h1 span{display:block;color:var(--gold2);font-size:1.15em}
.hero p{font-size:18px;line-height:1.48;margin:0 0 28px}
.hero-benefits{display:flex;gap:36px;margin-top:30px}
.hero-benefits div{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}
.hero-benefits i{width:44px;height:44px;border:3px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold2);font-style:normal;font-size:22px}
.hero-benefits b{display:block;text-transform:uppercase;color:#fff}
.hero-benefits small{display:block;color:#d9e3ee}

.hero-card{position:absolute;right:54px;top:120px;width:350px;background:var(--navy);border:3px solid var(--gold);border-radius:22px;padding:34px;text-align:center;z-index:2;box-shadow:0 16px 46px rgba(0,0,0,.35)}
.hero-card .wa{width:60px;height:60px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:0 auto 14px;font-size:33px}
.hero-card h2{font-size:20px;text-transform:uppercase;margin:0;color:white}
.hero-card strong{display:block;color:var(--gold2);font-size:34px;margin:8px 0}
.hero-card p{font-size:16px;color:#e8eff8}
.btn{display:inline-block;border-radius:9px;padding:14px 26px;font-weight:900;text-transform:uppercase}
.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--navy)}
.btn-wa{background:var(--green);color:white}

.services{background:#fff;padding:36px 34px 48px}
.section-title{text-align:center;text-transform:uppercase;color:var(--navy);font-size:31px;margin:0 0 26px;position:relative}
.section-title:after{content:"";display:block;width:64px;height:4px;background:var(--gold);margin:9px auto 0;border-radius:4px}
.service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.service-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.12);position:relative}
.service-card .image{height:178px;background-size:cover;background-position:center}
.service-card .icon{width:56px;height:56px;background:var(--navy);border:3px solid white;color:white;border-radius:50%;display:grid;place-items:center;font-size:24px;margin:-28px 16px 8px;position:relative;z-index:2}
.service-card h3{font-size:15px;margin:0 18px 10px;text-transform:uppercase;color:var(--navy);font-weight:900}
.service-card p{font-size:14px;line-height:1.46;margin:0 18px 22px;color:#263b55;min-height:72px}

.promo-row{background:#fff;padding:0 34px 36px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.promo{display:grid;grid-template-columns:1fr 1.05fr;min-height:220px;border-radius:12px;overflow:hidden;background:var(--navy);box-shadow:0 12px 30px rgba(0,0,0,.14)}
.promo .photo{background-size:cover;background-position:center}
.promo .copy{padding:28px 24px;color:#fff}
.promo h3{margin:0 0 12px;color:var(--gold2);font-size:24px;text-transform:uppercase}
.promo p{margin:0 0 18px;line-height:1.5}
.promo .btn{font-size:12px;padding:10px 18px}

.before-after{background:#fff;padding:18px 34px 48px}
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ba-card{height:185px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 12px 28px rgba(0,0,0,.14);position:relative}
.ba-card span{position:absolute;left:16px;bottom:14px;background:var(--gold);color:var(--navy);font-weight:900;text-transform:uppercase;padding:6px 12px;border-radius:4px;font-size:12px}

.contact-strip{background:var(--navy);color:#fff;display:grid;grid-template-columns:1.2fr 1fr 1.5fr;gap:26px;align-items:center;padding:30px 54px}
.contact-main{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center}
.contact-main .big-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--navy);display:grid;place-items:center;font-size:36px}
.contact-main h2{font-size:28px;text-transform:uppercase;margin:0}
.contact-main p{margin:4px 0;color:#e5edf7}
.contact-main strong{display:block;color:var(--gold2);font-size:34px}
.contact-details{border-left:1px solid rgba(214,164,59,.55);padding-left:28px}
.contact-details p{font-size:18px;line-height:1.55}
.trust-boxes{background:#fff;color:var(--navy);border-radius:16px;padding:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.trust-boxes div{border-right:1px solid #ddd;padding:10px}
.trust-boxes div:last-child{border-right:0}
.trust-boxes b{display:block;text-transform:uppercase;font-size:13px}
.trust-boxes span{font-size:12px;color:#526276}
.footer{background:#06111f;color:#c9d3df;text-align:center;padding:16px;font-size:14px}
.whatsapp-float{position:fixed;right:26px;bottom:24px;width:66px;height:66px;border-radius:50%;background:var(--green);color:white;display:grid;place-items:center;font-size:36px;box-shadow:0 12px 30px rgba(0,0,0,.35);z-index:120}

@media(max-width:1250px){
  .header{grid-template-columns:1fr;gap:12px;height:auto;text-align:center;padding:14px}.logo img{margin:auto}.top-call{justify-self:center}.nav{flex-wrap:wrap}
  .hero{padding:60px 24px;display:block}.hero:before{width:100%;clip-path:none}.hero-card{position:relative;right:auto;top:auto;width:100%;max-width:380px;margin:44px auto 0}.hero h1{font-size:42px}.hero-benefits{display:block}.hero-benefits div{margin:15px 0}
  .service-grid{grid-template-columns:repeat(2,1fr)}.promo-row,.ba-grid,.contact-strip{grid-template-columns:1fr}.trust-boxes{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){.service-grid{grid-template-columns:1fr}.promo{grid-template-columns:1fr}.promo .photo{height:180px}.contact-main strong{font-size:28px}}


/* Clean WhatsApp icon, no clover/incorrect symbol */
.whatsapp-mark{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  font-size:27px;
  font-weight:900;
  font-family:Arial,Helvetica,sans-serif;
}
.whatsapp-mark::before{content:"☎"; transform:rotate(-18deg);}
.hero-card .whatsapp-mark{margin:0 auto 14px;width:62px;height:62px;font-size:34px;}
.whatsapp-float .whatsapp-mark{width:66px;height:66px;font-size:36px;}
.whatsapp-float{background:transparent;box-shadow:none;}

.info-hero{
  background:linear-gradient(90deg,rgba(6,27,52,.96),rgba(6,27,52,.78)), url('diary.jpg') center/cover no-repeat;
  color:white;
  padding:90px 54px;
}
.info-hero.insurance-page{background-image:linear-gradient(90deg,rgba(6,27,52,.96),rgba(6,27,52,.78)), url('insurance.jpg');}
.info-hero h1{font-size:56px;line-height:1.05;margin:0 0 18px;text-transform:uppercase;font-style:italic;}
.info-hero p{font-size:20px;max-width:780px;line-height:1.55;}
.info-section{padding:70px 54px;background:#fff;}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.info-card{background:#f6f8fb;border-radius:18px;padding:28px;border-top:5px solid var(--gold);box-shadow:0 12px 28px rgba(0,0,0,.08);}
.info-card h3{margin:0 0 12px;color:var(--navy);font-size:22px;}
.info-card p{margin:0;color:#405169;line-height:1.55;}
.info-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;background:#f6f8fb;padding:70px 54px;}
.info-split img{border-radius:22px;box-shadow:0 16px 36px rgba(0,0,0,.16);}
.info-split h2{font-size:40px;color:var(--navy);margin:0 0 18px;}
.info-split li{margin:12px 0;font-size:18px;}
.page-cta{background:var(--navy);color:white;text-align:center;padding:60px 30px;}
.page-cta h2{font-size:38px;margin:0 0 14px;}
@media(max-width:1050px){
  .info-grid,.info-split{grid-template-columns:1fr}
  .info-hero,.info-section,.info-split{padding:45px 22px}
}

/* Strong damage guide page */
.warning-hero{
  background:linear-gradient(90deg,rgba(6,27,52,.97),rgba(6,27,52,.78)), url('leak.jpg') center/cover no-repeat;
  color:white;
  padding:92px 54px;
}
.warning-hero .eyebrow{display:inline-block;background:#d6a43b;color:#061b34;font-weight:900;padding:8px 16px;border-radius:6px;text-transform:uppercase;margin-bottom:16px;}
.warning-hero h1{font-size:56px;line-height:1.05;text-transform:uppercase;font-style:italic;margin:0 0 18px;}
.warning-hero p{font-size:20px;max-width:820px;line-height:1.55;}
.redline{color:#f0c866;font-weight:900;}
.mistake-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;}
.mistake-card{background:white;border-radius:18px;padding:28px;box-shadow:0 12px 28px rgba(0,0,0,.1);border-top:6px solid #b92323;}
.mistake-card h3{color:#061b34;margin:0 0 12px;font-size:23px;}
.mistake-card p{color:#42526a;line-height:1.6;}
.right-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px;}
.right-card{background:#061b34;color:white;border-radius:18px;padding:24px;border:1px solid rgba(214,164,59,.45);}
.right-card b{display:block;color:#f0c866;font-size:20px;margin-bottom:8px;}
.leckortung-strong{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;background:#f6f8fb;padding:70px 54px;}
.leckortung-strong img{border-radius:22px;box-shadow:0 16px 36px rgba(0,0,0,.18);}
.leckortung-strong h2{font-size:40px;color:#061b34;margin:0 0 18px;}
.leckortung-strong li{margin:12px 0;font-size:18px;}
.trust-strong{background:#fff;padding:70px 54px;}
.trust-strong .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.trust-strong .trust-item{background:#f6f8fb;border-left:5px solid #d6a43b;border-radius:14px;padding:24px;}
.trust-strong h3{margin:0 0 10px;color:#061b34;font-size:22px;}
.urgent-cta{background:#061b34;color:white;text-align:center;padding:64px 30px;border-top:7px solid #d6a43b;}
.urgent-cta h2{font-size:42px;margin:0 0 12px;}
.urgent-cta p{font-size:20px;color:#e6eef7;}
.urgent-cta .phone-large{display:block;font-size:42px;color:#f0c866;font-weight:900;margin:16px 0;}
@media(max-width:1050px){
  .mistake-grid,.right-grid,.leckortung-strong,.trust-strong .trust-grid{grid-template-columns:1fr}
  .warning-hero,.leckortung-strong,.trust-strong{padding:46px 22px}
  .warning-hero h1{font-size:38px}.urgent-cta h2{font-size:32px}.urgent-cta .phone-large{font-size:32px}
}


/* FINAL FIX: visible WhatsApp icon + universal navigation */
.whatsapp-mark{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:46px !important;
  height:46px !important;
  border-radius:50% !important;
  background:#25D366 !important;
  color:#fff !important;
  font-size:28px !important;
  font-weight:900 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  line-height:1 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.whatsapp-mark::before{content:"✆" !important; transform:rotate(-18deg); display:block;}
.hero-card .whatsapp-mark{margin:0 auto 14px !important;width:64px !important;height:64px !important;font-size:38px !important;}
.whatsapp-float{
  position:fixed !important;
  right:26px !important;
  bottom:24px !important;
  width:68px !important;
  height:68px !important;
  border-radius:50% !important;
  background:#25D366 !important;
  color:white !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 12px 30px rgba(0,0,0,.35) !important;
  z-index:9999 !important;
}
.whatsapp-float .whatsapp-mark{width:68px !important;height:68px !important;font-size:40px !important;box-shadow:none !important;}
.header{z-index:999 !important}
.nav a{white-space:nowrap}
@media(max-width:1250px){
  .header{grid-template-columns:1fr !important;height:auto !important;min-height:unset !important;text-align:center !important;padding:14px !important;}
  .logo img{height:120px !important;margin:auto !important;}
  .nav{justify-content:center !important;flex-wrap:wrap !important;gap:14px !important;margin:8px 0 !important;}
  .top-call{justify-self:center !important;}
}


/* FINAL HEADER FIX: Desktop Hotline nicht abgeschnitten */
.header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:22px !important;
  min-height:128px !important;
  height:auto !important;
  padding:10px 34px !important;
}
.logo{
  flex:0 0 auto !important;
}
.logo img{
  height:118px !important;
  max-width:260px !important;
  object-fit:contain !important;
}
.nav{
  flex:1 1 auto !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
}
.nav a{
  font-size:12px !important;
  white-space:nowrap !important;
}
.top-call{
  flex:0 0 auto !important;
  max-width:310px !important;
  padding:10px 14px !important;
  gap:10px !important;
  grid-template-columns:44px 1fr !important;
  overflow:visible !important;
}
.top-call .phone-icon{
  width:44px !important;
  height:44px !important;
  font-size:23px !important;
}
.top-call span{
  font-size:12px !important;
}
.top-call strong{
  font-size:24px !important;
  white-space:nowrap !important;
}
.top-call small{
  font-size:11px !important;
  white-space:nowrap !important;
}
@media(max-width:1250px){
  .header{
    display:block !important;
    text-align:center !important;
    padding:14px !important;
  }
  .logo img{
    height:120px !important;
    margin:auto !important;
  }
  .nav{
    margin:10px 0 !important;
  }
  .top-call{
    margin:10px auto 0 !important;
    max-width:360px !important;
  }
}


/* VORHER/NACHHER SLIDER – Brandschaden */
.ba-slider-section{
  background:#fff;
  padding:70px 34px;
}
.ba-slider-wrap{
  max-width:1100px;
  margin:0 auto;
}
.ba-slider-intro{
  text-align:center;
  max-width:820px;
  margin:0 auto 32px;
}
.ba-slider-intro h2{
  color:var(--navy);
  font-size:36px;
  text-transform:uppercase;
  margin:0 0 12px;
}
.ba-slider-intro p{
  color:#42526a;
  font-size:18px;
  line-height:1.55;
}
.before-after-slider{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 18px 48px rgba(0,0,0,.22);
  background:#111;
  user-select:none;
}
.before-after-slider img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ba-img-after,
.ba-img-before{
  position:absolute;
  inset:0;
}
.ba-img-before{
  width:50%;
  overflow:hidden;
  border-right:4px solid #d6a43b;
}
.ba-img-before img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
}
.ba-img-after img{
  object-position:right center;
}
.ba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
  z-index:5;
}
.ba-handle{
  position:absolute;
  left:50%;
  top:0;
  height:100%;
  width:4px;
  background:#d6a43b;
  transform:translateX(-50%);
  z-index:4;
  pointer-events:none;
}
.ba-handle:before{
  content:"↔";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:58px;
  height:58px;
  border-radius:50%;
  background:#061b34;
  border:3px solid #d6a43b;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:900;
  box-shadow:0 8px 24px rgba(0,0,0,.32);
}
.ba-label{
  position:absolute;
  bottom:18px;
  z-index:3;
  background:rgba(6,27,52,.9);
  color:#fff;
  padding:9px 18px;
  border-radius:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.ba-label.before{left:20px;}
.ba-label.after{right:20px;}
.ba-slider-note{
  margin-top:20px;
  background:#f6f8fb;
  border-left:5px solid #d6a43b;
  border-radius:14px;
  padding:20px 24px;
  color:#263b55;
  font-size:16px;
  line-height:1.55;
}
@media(max-width:700px){
  .ba-slider-section{padding:45px 18px}
  .ba-slider-intro h2{font-size:27px}
  .before-after-slider{aspect-ratio:4/3;border-radius:16px}
  .ba-handle:before{width:48px;height:48px;font-size:22px}
  .ba-label{font-size:12px;padding:7px 12px}
}