/* Add here all your css styles (customizations) */
.logo-footer {
    height: 140px; width: auto;
  }

  /* ===== Navigationshöhe: hier anpassen ===== */
  :root {
    --nav-logo: 48px;        /* Logo-Höhe Desktop (vorher 64px) */
    --nav-logo-mobil: 50px;  /* Logo-Höhe Handy/Tablet (vorher 62-72px) */
    --nav-abstand: 6px;      /* Abstand oben/unten (vorher 10px) */
  }

  #js-header .u-header__section {
    padding-top: var(--nav-abstand) !important;
    padding-bottom: var(--nav-abstand) !important;
  }

  #logo_img {
    max-height: var(--nav-logo);
    width: auto; /* damit das Seitenverhältnis erhalten bleibt */
    height: auto;
  }

  /* Desktop: Menüpunkte ohne zusätzlichen Abstand nach oben */
  @media (min-width: 992px) {
    #navBar { padding-top: 0 !important; }
  }

  /* Mobil: Hamburger auf Logo-Mitte, damit der X-Button beim Öffnen
     des Menüs nicht nach unten rutscht */
  @media (max-width: 991px) {
    #logo {
      padding-top: 0;
      padding-bottom: 0;
    }
    #logo_img {
      max-height: var(--nav-logo-mobil);
      /* Platz für den Menü-Button lassen; bewusst nicht in %, das hat das Logo gestaucht */
      max-width: calc(100vw - 110px);
      height: auto;
    }
    .navbar-toggler {
      top: calc(var(--nav-logo-mobil) / 2) !important;
      transform: translateY(-50%);
    }
  }

  @media (max-width: 576px) {
    .g-width-60 {
      width: 100px !important;
      height: auto !important;
    }
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

   /* WhatsApp Button */


:root {
  --warna-background: #4dc247;
  --warna-bg-chat: #f0f5fb;
  --warna-icon: #fff;
  --warna-text: #505050;
  --warna-text-alt: #989b9f;
  --lebar-chatbox: 320px;
  }

svg{width: 22px;height: 22px;vertical-align: middle;fill: var(--warna-icon)}
.chatMenu, .chatButton .svg-2{display: none}

.chatButton{position: fixed;background-color: var(--warna-background);bottom: 20px;right: 20px;border-radius: 50px;z-index: 20;overflow: hidden;display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;-webkit-transition: all .2s ease-out;transition: all .2s ease-out}
.chatButton {
  position: fixed;
  background-color: var(--warna-background);
  bottom: 20px;
  right: 20px;
  border-radius: 50%;
  z-index: 20;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px; /* vorher 50px → größer */
  height: 70px; /* vorher 50px */
  transition: all 0.2s ease-out;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.chatButton img.svg-1 {
  width: 45px; /* Größe deines SVGs */
  height: 45px;
}

.chatButton .svg-2 {
  width: 55px;
  height: 55px;
  fill: #fff;
  display: none;
}

/* Wenn Checkbox aktiv → WhatsApp-Icon ausblenden, X zeigen */
.chatMenu:checked + .chatButton .svg-1 {
  display: none;
}

.chatMenu:checked + .chatButton .svg-2 {
  display: block;
}

.chatBox {
  position: fixed;
  bottom: 100px; /* Grundabstand – JS ändert diesen Wert */
  right: 20px;
  width: var(--lebar-chatbox);
  transition: all 0.2s ease-out;
  z-index: 21;
  opacity: 0;
  visibility: hidden;
  line-height: normal;
}



.chatContent{border-radius: 15px;background-color: #fff;box-shadow: 0 5px 15px 0 rgba(0,0,0,.05);overflow: hidden; border: 1px solid #b6b6b6;}
.chatHeader{position: relative;display: flex;align-items: center;padding: 15px 20px;background-color: var(--warna-background);overflow: hidden}
.chatHeader svg{width: 32px;height: 32px;flex-shrink: 0;fill: var(--warna-icon)}
.chatHeader .chatTitle{padding-left: 15px;font-size: 14px;color: var(--warna-icon)}
.chatHeader .chatTitle span{font-size: 11.5px;display: block;line-height: 1.58em}

.chatText{display: flex;flex-wrap: wrap;margin: 25px 20px;font-size: 12px;color: var(--warna-text)}
.chatText span{display: inline-block;margin-right: auto;padding: 10px 10px 10px 20px;background-color: var(--warna-bg-chat);border-radius: 3px 15px 15px}
.chatText span:after{content: 'Jetzt';margin-left: 15px;font-size: 9px;color: var(--warna-text-alt)}
.chatText .typing{margin: 15px 0 0 auto;padding: 10px 20px 10px 10px;border-radius: 15px 3px 15px 15px}
.chatText .typing::after{display: none;}

.chatStart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  padding: 16px 20px;
  border-radius: 15px;
  border: 1px solid #b6b6b6;
  background-color: #fff; /* weißer Hintergrund */
  color: var(--warna-background); /* WhatsApp-Grün */
  font-size: 15px;
  font-weight: 400; /* etwas dicker */
  text-decoration: none;
  transition: all 0.2s ease;
}

.chatStartIcon {
  width: 24px;
  height: 24px;
}

.chatStart:hover {
  color: #1DA851; /* etwas dunkleres Grün beim Hover */
  border-color: #1DA851;
}

.chatStart:hover .chatStartIcon {
  filter: brightness(0.85);
}
.chatMenu:checked + .chatButton{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
.chatMenu:checked + .chatButton .svg-1{display: none}
.chatMenu:checked + .chatButton .svg-2{display: block}
.chatMenu:checked ~ .chatBox{bottom: 90px;opacity: 1;visibility: visible}


/* ============================================================
   Westfalia Winterdienst – Farbschema (Logo-Blau statt Grün)
   ============================================================ */
:root {
  --wd-primary: #1f7fc7;
  --wd-primary-dark: #17649e;
  --wd-navy: #103468;
  --wd-ice: #9fd3ff;
}

a { color: var(--wd-primary); }
a:focus, a:hover { color: var(--wd-primary-dark); }

.g-color-primary { color: var(--wd-primary) !important; }
.g-bg-primary { background-color: var(--wd-primary) !important; }
.g-brd-primary { border-color: var(--wd-primary) !important; }
.g-bg-primary-opacity-0_1 { background-color: rgba(31, 127, 199, 0.1) !important; }
.wd-color-ice { color: var(--wd-ice) !important; }

.u-btn-primary { background-color: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
.u-btn-primary:hover, .u-btn-primary:focus, .u-btn-primary.active { background-color: var(--wd-primary-dark); border-color: var(--wd-primary-dark); color: #fff; }
.u-btn-outline-primary { color: var(--wd-primary); border-color: var(--wd-primary); background-color: transparent; }
.u-btn-outline-primary:hover, .u-btn-outline-primary:focus { color: #fff; background-color: var(--wd-primary); border-color: var(--wd-primary); }
.u-btn-white { color: var(--wd-navy); }
.u-btn-white:hover, .u-btn-white:focus { color: var(--wd-primary); }

.u-header__section--light .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:hover,
.u-header__section--light .navbar-nav:not([class*="u-main-nav-v"]) .active > .nav-link { color: var(--wd-primary); }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color: var(--wd-navy); }

/* Overlays der Icon-Blöcke */
.winter-overlay-1::after { background-color: rgba(16, 52, 104, 0.88) !important; }
.winter-overlay-2::after { background-color: rgba(31, 127, 199, 0.88) !important; }
.winter-overlay-3::after { background-color: rgba(40, 160, 210, 0.88) !important; }

/* Leistungs-Karten */
.wd-card {
  border: 1px solid #e6edf4;
  box-shadow: 0 4px 18px rgba(16, 52, 104, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.wd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(16, 52, 104, 0.12);
}

/* Ablauf-Schritte */
.wd-step {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--wd-navy), var(--wd-primary));
  box-shadow: 0 6px 16px rgba(31, 127, 199, 0.3);
}

/* Call to Action */
.wd-cta { background: linear-gradient(120deg, var(--wd-navy) 0%, var(--wd-primary) 100%); }

/* Footer-Logo auf heller Karte (Logo-Schrift ist dunkel) */
.footer-logo-box {
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
}
.footer-logo-box .logo-footer { height: 120px; width: auto; }

/* Rechtstexte */
.wd-legal h2 { margin-top: 30px; margin-bottom: 10px; color: #222; font-weight: 600; }
.wd-legal h3 { margin-top: 24px; margin-bottom: 8px; color: #222; font-weight: 600; }
.wd-legal p { word-wrap: break-word; }

/* Wetterkarte: Spalte auf Mobil nicht zu schmal */
@media (max-width: 991px) {
  #wetter-spalte { min-height: 520px; }
}

/* ============================================================
   Fixierte Navigation beim Scrollen
   ============================================================ */
#js-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow 0.3s;
}
#js-header.is-scrolled {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}
/* Karte und Slider bekommen eigene Ebenen, damit ihre Steuerelemente
   (z-index 1000+) nicht über der Navigation liegen */
#wetter-map,
.rev_slider_wrapper {
  isolation: isolate;
}
#wetter-spalte > div:first-child {
  z-index: 1001; /* Ortsvorschläge weiter über der Karte */
}
/* Sprungziele beim direkten Aufruf (z. B. /#wetter) nicht unter der Navigation verstecken */
section[id], footer[id] { scroll-margin-top: 100px; }

/* Einsatzgebiete: Stadt-Karten */
.wd-stadt-karte { transition: transform 0.2s, box-shadow 0.2s; }
.wd-stadt-karte:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(16, 52, 104, 0.12) !important; }

/* Template-Elemente (Prozess-Punkte, Hover) ebenfalls im Seitenblau */
.g-bg-primary--before::before { background-color: var(--wd-primary) !important; }
.g-bg-primary--hover:hover { background-color: var(--wd-primary) !important; }
.g-color-primary--hover:hover { color: var(--wd-primary) !important; }
.u-accordion-color-primary .u-accordion__control-icon i { color: var(--wd-primary); }

/* Navigation: Menüpunkte nie umbrechen; auf kleinen Desktops Anruf-Button ausblenden */
.navbar-nav .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199px) {
  #navBar .btn { display: none !important; }
}

/* Slider: leichte Farbblende über den Bildern, passend zum Farbverlauf des Slides */
.wd-slider-blende {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* Kontakt: Karte (Leaflet) über die ganze Spaltenhöhe */
#kontakt-map { min-height: 400px; isolation: isolate; }
/* Kontakt-Karte: Punkte der Einsatzgebiete */
.wd-ort-marker {
  background: var(--wd-primary);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s;
}
.wd-ort-marker:hover { transform: scale(1.25); }
/* Kontakt-Karte: Städtenamen, Legende */
.leaflet-tooltip.wd-ort-label {
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  color: #103468;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
}
.leaflet-tooltip.wd-ort-label::before { display: none; }
.wd-karten-legende {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.9;
  color: #333;
}
.wd-karten-legende strong { display: block; font-size: 13px; color: #103468; margin-bottom: 2px; }
.wd-karten-legende span { display: flex; align-items: center; }
.wd-karten-legende a { display: block; margin-top: 4px; font-weight: 600; }
.wd-karten-legende i { display: inline-block; margin-right: 8px; flex-shrink: 0; }
.wd-leg-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--wd-primary); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.wd-leg-flaeche { width: 16px; height: 12px; border-radius: 50%; background: radial-gradient(circle, rgba(31,127,199,0.35) 40%, rgba(31,127,199,0.12) 100%); }
.wd-leg-pin { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: #2a81cb; transform: rotate(-45deg); }
@media (max-width: 575px) {
  #kontakt-map { min-height: 460px; }
  .wd-karten-legende { font-size: 10px; padding: 6px 9px; line-height: 1.6; }
  .wd-karten-legende strong { font-size: 11px; }
  .wd-karten-legende a { display: none; }
  .leaflet-tooltip.wd-ort-label { font-size: 9px; padding: 0 3px; }
}
.wd-legal ul { padding-left: 20px; margin-bottom: 1rem; }
.wd-legal li { margin-bottom: 8px; }

/* Referenzen: Logos einheitlich hoch und mittig.
   Feste Bildbox + object-fit, damit Safari die Logos nicht streckt (Flexbox-Bug) */
#referenzen .slick-track { display: flex; align-items: center; }
.wd-ref-logo {
  display: block;
  height: 110px;
  padding: 10px 0;
}
#referenzen .wd-ref-logo img {
  display: block;
  width: 100%;
  height: 90px;
  max-width: none;
  object-fit: contain;
  object-position: center center;
}
/* Referenzen: das mittlere Logo leuchtet farbig (wie beim Hovern) */
#referenzen .wd-ref-logo img { transition: filter 0.5s, opacity 0.5s, transform 0.5s; }
#referenzen .slick-center .wd-ref-logo img {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  transform: scale(1.15);
}

/* Impressum: Hinweis Design & Umsetzung */
.wd-credit {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 10px 0 30px;
  padding: 24px 28px;
  background: linear-gradient(120deg, #f4f8fc 0%, #ffffff 100%);
  border: 1px solid #e3ecf5;
  border-left: 4px solid var(--wd-primary);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(16, 52, 104, 0.07);
}
.wd-credit__icon {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wd-navy), var(--wd-primary));
  color: #fff;
  font-size: 22px;
  box-shadow: 0 6px 16px rgba(31, 127, 199, 0.3);
}
.wd-credit__text { flex: 1; display: flex; flex-direction: column; line-height: 1.4; }
.wd-credit__label { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--wd-primary); }
.wd-credit__name { font-size: 22px; color: #1a1a1a; margin: 2px 0; }
.wd-credit__desc { font-size: 14px; color: #777; }
.wd-credit__link {
  flex-shrink: 0;
  padding: 10px 22px;
  border: 2px solid var(--wd-primary);
  border-radius: 50px;
  color: var(--wd-primary);
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.wd-credit__link:hover, .wd-credit__link:focus { background: var(--wd-primary); color: #fff; text-decoration: none; }
@media (max-width: 575px) {
  .wd-credit { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .wd-credit__link { align-self: stretch; text-align: center; }
}

/* Titelbereich Stadtseiten / Einsatzgebiete: auf dem Handy weniger Zoom im Parallax-Bild */
@media (max-width: 575px) {
  .wd-hero-parallax > .container { padding-top: 85px !important; padding-bottom: 85px !important; }
  .wd-hero-parallax .dzsparallaxer--target { height: 125% !important; }
  .wd-hero-parallax h1 { font-size: 30px !important; }
  .wd-hero-parallax .h3 { font-size: 1.1rem; }
  .wd-hero-parallax p.g-font-size-18 { font-size: 15px !important; }
}

/* Performance: Platz für den Vollbild-Slider reservieren, bevor er per JavaScript startet
   (Slider-Höhe = Fensterhöhe − 60 px, siehe fullScreenOffset). Verhindert das Springen der Seite. */
#rev_slider_26_1_wrapper { height: calc(100vh - 60px); overflow: hidden; }

/* ============================================================
   Performance & Barrierefreiheit
   ============================================================ */
/* Zitat-Parallax: auf dem Handy die kleinere Bildversion laden */
@media (max-width: 767px) {
  [data-bild-mobil="road-800"] { background-image: url(../img/winter/road-800.webp) !important; }
}
/* Tippflächen mindestens 24 px hoch (Kontakt-Kacheln) */
#kontakt .text-center.g-py-20 a { display: inline-block; line-height: 24px; }
/* Links im Fließtext erkennbar machen (nicht nur über die Farbe) */
main section p > a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }