.elementor-10937 .elementor-element.elementor-element-95722a8{--display:flex;--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:-12px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10937 .elementor-element.elementor-element-6591764{--display:flex;--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:-18px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10937 .elementor-element.elementor-element-6c49b69{--display:flex;--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:-24px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10937 .elementor-element.elementor-element-fe484de{--display:flex;--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:-17px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10937 .elementor-element.elementor-element-c88f83b{--display:flex;--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;}.elementor-10937 .elementor-element.elementor-element-6504ebc{--display:flex;--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;}.elementor-10937 .elementor-element.elementor-element-77c9434 > .elementor-widget-container{padding:-10px 0px 0px 0px;border-style:none;border-radius:0px 0px 0px 0px;}.elementor-10937 .elementor-element.elementor-element-77c9434{text-align:center;}.elementor-10937 .elementor-element.elementor-element-77c9434 .elementor-heading-title{font-size:40px;line-height:1.2em;color:#043953;}.elementor-10937 .elementor-element.elementor-element-32dabd8 > .elementor-widget-container{margin:-10px 0px 0px 0px;padding:0px 0px 0px 0px;border-style:none;border-radius:0px 0px 0px 0px;}.elementor-10937 .elementor-element.elementor-element-32dabd8{text-align:center;}.elementor-10937 .elementor-element.elementor-element-32dabd8 .elementor-heading-title{font-size:23px;line-height:1.2em;color:#043953;}.elementor-10937 .elementor-element.elementor-element-1c04650c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10937 .elementor-element.elementor-element-74d6b1cd{--display:flex;--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;}.elementor-10937 .elementor-element.elementor-element-475ea65f > .elementor-widget-container{margin:-39px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-10937 .elementor-element.elementor-element-4f45d163{--display:flex;--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:-23px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10937 .elementor-element.elementor-element-512af24{--display:flex;--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;}.elementor-10937 .elementor-element.elementor-element-182ce5a > .elementor-widget-container{margin:88px 0px 0px 0px;}@media(min-width:768px){.elementor-10937 .elementor-element.elementor-element-6504ebc{--width:100%;}.elementor-10937 .elementor-element.elementor-element-1c04650c{--content-width:1150px;}.elementor-10937 .elementor-element.elementor-element-74d6b1cd{--width:50%;}.elementor-10937 .elementor-element.elementor-element-4f45d163{--width:44%;}}@media(max-width:767px){.elementor-10937 .elementor-element.elementor-element-95722a8{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10937 .elementor-element.elementor-element-6591764{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10937 .elementor-element.elementor-element-6c49b69{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10937 .elementor-element.elementor-element-fe484de{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10937 .elementor-element.elementor-element-77c9434 .elementor-heading-title{font-size:32px;}.elementor-10937 .elementor-element.elementor-element-32dabd8 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-10937 .elementor-element.elementor-element-32dabd8 .elementor-heading-title{font-size:23px;}.elementor-10937 .elementor-element.elementor-element-512af24{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-7495085 *//* =========================================================
   NEEB – HERO DACHDECKER
========================================================= */

.neeb-dach-hero,
.neeb-dach-hero * {
  box-sizing: border-box;
}

.neeb-dach-hero {
  --neeb-dark: #0c2d3e;
  --neeb-primary: #153d50;
  --neeb-secondary: #24556b;
  --neeb-white: #ffffff;
  --neeb-text-light: rgba(255, 255, 255, 0.78);
  --neeb-border: rgba(255, 255, 255, 0.16);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100vw;
  max-width: none;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: 40px 40px 38px;

  color: var(--neeb-white);
  font-family: inherit;

  background:
    radial-gradient(
      circle at 87% 13%,
      rgba(90, 145, 168, 0.27) 0,
      rgba(90, 145, 168, 0) 34%
    ),
    linear-gradient(
      120deg,
      #0b2b3c 0%,
      #153d50 55%,
      #24566c 100%
    );
}


/* =========================================================
   HINTERGRUND-DEKORATION
========================================================= */

.neeb-dach-hero::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: -310px;
  right: -100px;

  width: 760px;
  height: 760px;

  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 50%;

  box-shadow:
    0 0 0 55px rgba(255, 255, 255, 0.018),
    0 0 0 110px rgba(255, 255, 255, 0.014);

  pointer-events: none;
}

.neeb-dach-hero::after {
  content: "";

  position: absolute;
  z-index: -1;

  right: 5%;
  bottom: 40px;

  width: 360px;
  height: 220px;

  opacity: 0.055;
  transform: rotate(-5deg);

  background:
    linear-gradient(
      135deg,
      transparent 48%,
      #ffffff 49%,
      #ffffff 51%,
      transparent 52%
    ),
    linear-gradient(
      45deg,
      transparent 48%,
      #ffffff 49%,
      #ffffff 51%,
      transparent 52%
    );

  background-size: 74px 74px;

  pointer-events: none;
}


/* =========================================================
   INNERER CONTAINER
========================================================= */

.neeb-dach-hero__inner {
  position: relative;
  z-index: 1;

  width: min(100%, 1420px);
  margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.neeb-dach-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 9px;
  margin: 0 0 48px;

  color: rgba(255, 255, 255, 0.64);

  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.neeb-dach-hero__breadcrumb a,
.neeb-dach-hero__breadcrumb a:visited {
  color: rgba(255, 255, 255, 0.64) !important;
  text-decoration: none;

  transition: color 0.2s ease;
}

.neeb-dach-hero__breadcrumb a:hover,
.neeb-dach-hero__breadcrumb a:focus {
  color: var(--neeb-white) !important;
}

.neeb-dach-hero__breadcrumb span[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.42);
  font-size: 15px;
}

.neeb-dach-hero__breadcrumb span[aria-current="page"] {
  color: var(--neeb-white);
}


/* =========================================================
   HAUPTBEREICH
========================================================= */

.neeb-dach-hero__main {
  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(390px, 0.88fr);

  align-items: center;

  gap: clamp(60px, 7vw, 120px);
}

.neeb-dach-hero__content {
  position: relative;
  z-index: 2;

  max-width: 760px;
}


/* =========================================================
   EYEBROW
========================================================= */

.neeb-dach-hero__eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;
  margin: 0 0 23px;

  color: var(--neeb-white);

  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.neeb-dach-hero__eyebrow::before {
  content: "";

  flex: 0 0 32px;

  width: 32px;
  height: 2px;

  border-radius: 20px;

  background: var(--neeb-white);
}


/* =========================================================
   HAUPTÜBERSCHRIFT
========================================================= */

.neeb-dach-hero h1 {
  max-width: 760px;
  margin: 0;

  color: var(--neeb-white);

  font-size: clamp(48px, 4.6vw, 68px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.045em;

  text-wrap: balance;

  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.neeb-dach-hero h1 span {
  display: block;

  color: var(--neeb-white);

  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}


/* =========================================================
   EINLEITUNG
========================================================= */

.neeb-dach-hero__intro {
  max-width: 680px;
  margin: 27px 0 0;

  color: var(--neeb-text-light);

  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.7;
}


/* Glossar-Links */

.neeb-dach-hero__intro a,
.neeb-dach-hero__intro a:visited {
  color: inherit !important;
  font-weight: inherit;
  text-decoration: none;
}

.neeb-dach-hero__intro a:hover,
.neeb-dach-hero__intro a:focus-visible {
  color: var(--neeb-white) !important;

  text-decoration: underline;
  text-decoration-color: var(--neeb-white);
  text-underline-offset: 3px;
}


/* =========================================================
   CTA
========================================================= */

.neeb-dach-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 22px;
  margin-top: 35px;
}

.neeb-dach-hero__button,
.neeb-dach-hero__button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 15px;

  min-height: 56px;
  padding: 16px 26px;

  border: 1px solid var(--neeb-white);
  border-radius: 7px;

  color: var(--neeb-dark) !important;
  background: var(--neeb-white);

  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;

  box-shadow: 0 14px 30px rgba(3, 22, 32, 0.24);

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.neeb-dach-hero__button svg {
  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  color: currentColor;

  transition: transform 0.25s ease;
}

.neeb-dach-hero__button:hover,
.neeb-dach-hero__button:focus {
  color: var(--neeb-white) !important;
  background: transparent;

  text-decoration: none;

  transform: translateY(-2px);

  box-shadow: 0 18px 38px rgba(3, 22, 32, 0.3);
}

.neeb-dach-hero__button:hover svg,
.neeb-dach-hero__button:focus svg {
  transform: translateX(4px);
}


/* =========================================================
   MICROCOPY
========================================================= */

.neeb-dach-hero__microcopy {
  display: flex;
  align-items: center;

  gap: 11px;

  max-width: 245px;

  color: rgba(255, 255, 255, 0.7);

  font-size: 13px;
  line-height: 1.5;
}

.neeb-dach-hero__microcopy-icon {
  display: inline-flex;
  flex: 0 0 34px;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;

  color: var(--neeb-white);
  background: rgba(255, 255, 255, 0.06);
}

.neeb-dach-hero__microcopy-icon svg {
  width: 15px;
  height: 15px;
}


/* =========================================================
   BILDBEREICH
========================================================= */

.neeb-dach-hero__visual {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: flex-end;
}

.neeb-dach-hero__image-frame {
  position: relative;

  width: min(100%, 455px);
  padding: 9px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 35px;

  background: rgba(255, 255, 255, 0.07);

  box-shadow:
    0 34px 70px rgba(3, 21, 31, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.neeb-dach-hero__image-frame::before {
  content: "";

  position: absolute;
  z-index: -1;

  inset: 12% -10% auto auto;

  width: 70%;
  height: 65%;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.1);

  filter: blur(65px);
}

.neeb-dach-hero__image {
  display: block;

  width: 100%;
  height: auto;
  max-height: 570px;

  border-radius: 27px;

  object-fit: cover;
  object-position: center top;
}


/* =========================================================
   BENEFIT-KARTEN
========================================================= */

.neeb-dach-hero__benefits {
  position: relative;
  z-index: 3;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;
  margin-top: 48px;
}

.neeb-dach-hero__benefit {
  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr);

  align-items: start;

  gap: 16px;

  min-height: 135px;
  padding: 22px;

  border: 1px solid var(--neeb-border);
  border-radius: 13px;

  background: rgba(255, 255, 255, 0.075);

  box-shadow: 0 15px 32px rgba(3, 22, 32, 0.12);

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.neeb-dach-hero__benefit:hover {
  transform: translateY(-3px);

  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.11);
}

.neeb-dach-hero__benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 11px;

  color: var(--neeb-white);
  background: rgba(255, 255, 255, 0.07);
}

.neeb-dach-hero__benefit-icon svg {
  width: 23px;
  height: 23px;
}

.neeb-dach-hero__benefit-content {
  min-width: 0;
}

.neeb-dach-hero__benefit-content h3 {
  margin: 1px 0 6px;

  color: var(--neeb-white);

  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;

  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.neeb-dach-hero__benefit-content p {
  margin: 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: 13.5px;
  line-height: 1.55;
}


/* =========================================================
   TASTATURFOKUS
========================================================= */

.neeb-dach-hero a:focus-visible {
  outline: 3px solid var(--neeb-white);
  outline-offset: 4px;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {
  .neeb-dach-hero {
    padding-right: 32px;
    padding-left: 32px;
  }

  .neeb-dach-hero__main {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(340px, 0.9fr);

    gap: 55px;
  }

  .neeb-dach-hero h1 {
    font-size: clamp(46px, 4.7vw, 58px);
  }

  .neeb-dach-hero__image-frame {
    width: min(100%, 410px);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
  .neeb-dach-hero {
    padding-top: 32px;
  }

  .neeb-dach-hero__breadcrumb {
    margin-bottom: 38px;
  }

  .neeb-dach-hero__main {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(290px, 0.72fr);

    gap: 38px;
  }

  .neeb-dach-hero h1 {
    font-size: clamp(42px, 5.5vw, 51px);
  }

  .neeb-dach-hero__benefit {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding: 18px;
  }

  .neeb-dach-hero__benefit-icon {
    width: 42px;
    height: 42px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .neeb-dach-hero {
    width: 100%;

    margin-right: 0;
    margin-left: 0;

    padding: 24px 18px 32px;
  }

  .neeb-dach-hero::before {
    top: -380px;
    right: -390px;
  }

  .neeb-dach-hero::after {
    display: none;
  }

  .neeb-dach-hero__breadcrumb {
    gap: 7px;
    margin-bottom: 30px;

    font-size: 11.5px;
  }

  .neeb-dach-hero__main {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .neeb-dach-hero__content {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .neeb-dach-hero__eyebrow {
    margin-bottom: 17px;

    font-size: 11px;
    letter-spacing: 0.09em;
  }

  /*
   * Kleinere Schrift und keine automatische Worttrennung.
   * Dadurch bleibt „Dachdeckerbetriebe“ in einer Zeile.
   */
  .neeb-dach-hero h1 {
    width: 100%;
    max-width: 100%;
    margin: 0;

    font-size: clamp(28px, 8.6vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.035em;

    text-wrap: initial;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .neeb-dach-hero h1 span {
    display: block;

    width: 100%;

    white-space: nowrap;

    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .neeb-dach-hero__intro {
    margin-top: 24px;

    font-size: 16.5px;
    line-height: 1.65;
  }

  .neeb-dach-hero__actions {
    align-items: flex-start;
    flex-direction: column;

    gap: 18px;
    margin-top: 29px;
  }

  .neeb-dach-hero__button {
    width: 100%;
  }

  .neeb-dach-hero__microcopy {
    width: 100%;
    max-width: none;
  }

  .neeb-dach-hero__visual {
    justify-content: center;
  }

  .neeb-dach-hero__image-frame {
    width: min(100%, 420px);

    padding: 7px;

    border-radius: 25px;
  }

  .neeb-dach-hero__image {
    max-height: none;

    border-radius: 19px;
  }

  .neeb-dach-hero__benefits {
    grid-template-columns: 1fr;

    gap: 11px;
    margin-top: 32px;
  }

  .neeb-dach-hero__benefit {
    grid-template-columns:
      44px
      minmax(0, 1fr);

    gap: 14px;

    min-height: auto;
    padding: 18px;
  }

  .neeb-dach-hero__benefit-icon {
    width: 44px;
    height: 44px;
  }

  .neeb-dach-hero__benefit-icon svg {
    width: 21px;
    height: 21px;
  }

  .neeb-dach-hero__benefit-content h3 {
    font-size: 16px;
    line-height: 1.35;
  }

  .neeb-dach-hero__benefit-content p {
    font-size: 13px;
    line-height: 1.55;
  }
}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 420px) {
  .neeb-dach-hero {
    padding-right: 15px;
    padding-left: 15px;
  }

  .neeb-dach-hero__breadcrumb {
    font-size: 11px;
  }

  .neeb-dach-hero h1 {
    font-size: clamp(27px, 8.4vw, 35px);
  }

  .neeb-dach-hero__intro {
    font-size: 16px;
  }

  .neeb-dach-hero__benefit {
    padding: 16px;
  }
}


/* =========================================================
   SEHR KLEINE SMARTPHONES
========================================================= */

@media (max-width: 360px) {
  .neeb-dach-hero h1 {
    font-size: 27px;
  }

  .neeb-dach-hero__benefit {
    grid-template-columns:
      40px
      minmax(0, 1fr);

    gap: 12px;
  }

  .neeb-dach-hero__benefit-icon {
    width: 40px;
    height: 40px;
  }
}


/* =========================================================
   ANIMATION
========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .neeb-dach-hero__content {
    animation: neebDachContent 0.65s ease both;
  }

  .neeb-dach-hero__visual {
    animation: neebDachVisual 0.75s 0.08s ease both;
  }

  .neeb-dach-hero__benefits {
    animation: neebDachBenefits 0.65s 0.16s ease both;
  }

  @keyframes neebDachContent {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes neebDachVisual {
    from {
      opacity: 0;
      transform: translateX(22px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes neebDachBenefits {
    from {
      opacity: 0;
      transform: translateY(15px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* =========================================================
   DACHDECKER-HERO – MOBILE OPTIMIERUNG
   Ganz unten in das CSS einfügen
========================================================= */

@media (max-width: 767px) {

  .neeb-dach-hero {
    width: 100% !important;
    max-width: 100% !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding:
      22px
      20px
      42px !important;
  }

  .neeb-dach-hero__inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Breadcrumb */

  .neeb-dach-hero__breadcrumb {
    gap: 7px;

    margin: 0 0 36px !important;

    font-size: 11px;
    line-height: 1.5;
  }

  /* Hauptbereich */

  .neeb-dach-hero__main {
    display: flex !important;
    flex-direction: column !important;

    width: 100%;

    gap: 36px !important;
  }

  .neeb-dach-hero__content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Kleine Überschrift */

  .neeb-dach-hero__eyebrow {
    gap: 11px;

    margin: 0 0 19px !important;

    font-size: 10.5px;
    line-height: 1.45;
    letter-spacing: 0.085em;
  }

  .neeb-dach-hero__eyebrow::before {
    flex-basis: 28px;

    width: 28px;
  }

  /* Hauptüberschrift */

  .neeb-dach-hero h1 {
    width: 100%;
    max-width: 100%;

    margin: 0 0 22px !important;

    font-size: clamp(30px, 8.8vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.032em !important;

    text-wrap: initial !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .neeb-dach-hero h1 span {
    display: block;

    width: 100%;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Einleitung */

  .neeb-dach-hero__intro {
    width: 100%;
    max-width: 100%;

    margin: 0 !important;

    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* CTA */

  .neeb-dach-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;

    gap: 17px;
    margin-top: 31px !important;
  }

  .neeb-dach-hero__button,
  .neeb-dach-hero__button:visited {
    width: 100%;
    min-height: 56px;

    padding: 15px 18px;

    border-radius: 8px;

    font-size: 15px;
    line-height: 1.25;
    text-align: center;
  }

  .neeb-dach-hero__microcopy {
    width: 100%;
    max-width: 100%;

    font-size: 12.5px;
    line-height: 1.55;
  }

  /* Bild */

  .neeb-dach-hero__visual {
    width: 100%;
    justify-content: center;
  }

  .neeb-dach-hero__image-frame {
    width: 100%;
    max-width: 390px;

    padding: 7px;

    border-radius: 24px;
  }

  .neeb-dach-hero__image {
    width: 100%;

    border-radius: 18px;
  }

  /* Vorteile */

  .neeb-dach-hero__benefits {
    grid-template-columns: 1fr;

    gap: 12px;
    margin-top: 30px;
  }

  .neeb-dach-hero__benefit {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    gap: 14px;

    min-height: auto;
    padding: 17px;

    border-radius: 12px;
  }

  .neeb-dach-hero__benefit-icon {
    width: 42px;
    height: 42px;
  }

  .neeb-dach-hero__benefit-icon svg {
    width: 20px;
    height: 20px;
  }

  .neeb-dach-hero__benefit-content h3 {
    margin-bottom: 5px;

    font-size: 16px;
    line-height: 1.35;
  }

  .neeb-dach-hero__benefit-content p {
    font-size: 13px;
    line-height: 1.55;
  }
}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 390px) {

  .neeb-dach-hero {
    padding-right: 17px !important;
    padding-left: 17px !important;
  }

  .neeb-dach-hero__breadcrumb {
    margin-bottom: 32px !important;
  }

  .neeb-dach-hero h1 {
    margin-bottom: 20px !important;

    font-size: clamp(28px, 8.3vw, 33px) !important;
    line-height: 1.1 !important;
  }

  .neeb-dach-hero__intro {
    font-size: 15.5px !important;
  }

  .neeb-dach-hero__button {
    padding-right: 14px;
    padding-left: 14px;

    font-size: 14.5px;
  }
}

/* =========================================================
   REDUZIERTE BEWEGUNGEN
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .neeb-dach-hero__content,
  .neeb-dach-hero__visual,
  .neeb-dach-hero__benefits {
    animation: none;
  }

  .neeb-dach-hero__button,
  .neeb-dach-hero__benefit {
    transition: none;
  }

  .neeb-dach-hero__button:hover,
  .neeb-dach-hero__benefit:hover {
    transform: none;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1a65bfa *//* =========================================================
   NEEB – EINORDNUNG DACHDECKER
   ========================================================= */

.neeb-dach-intro,
.neeb-dach-intro * {
  box-sizing: border-box;
}

.neeb-dach-intro {
  --neeb-dark: #123447;
  --neeb-blue: #1d5067;
  --neeb-blue-light: #e8f0f3;
  --neeb-text: #384b55;
  --neeb-text-light: #657780;
  --neeb-border: #dce5e9;
  --neeb-white: #ffffff;
  --neeb-background: #f5f7f8;

  position: relative;
  overflow: hidden;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding: clamp(75px, 8vw, 120px) 40px;

  color: var(--neeb-dark);
  font-family: inherit;

  background:
    radial-gradient(
      circle at 96% 5%,
      rgba(29, 80, 103, 0.07) 0,
      rgba(29, 80, 103, 0) 28%
    ),
    var(--neeb-background);
}

/* Dezentes grafisches Element */

.neeb-dach-intro::before {
  content: "";

  position: absolute;
  top: -230px;
  right: -240px;

  width: 520px;
  height: 520px;

  border: 1px solid rgba(18, 52, 71, 0.06);
  border-radius: 50%;

  box-shadow:
    0 0 0 48px rgba(18, 52, 71, 0.025),
    0 0 0 96px rgba(18, 52, 71, 0.018);

  pointer-events: none;
}

.neeb-dach-intro__inner {
  position: relative;
  z-index: 1;

  width: min(100%, 1420px);
  margin: 0 auto;
}

/* =========================================================
   KOPFBEREICH
   ========================================================= */

.neeb-dach-intro__header {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.75fr);
  align-items: start;

  gap: clamp(60px, 8vw, 130px);

  margin-bottom: clamp(48px, 6vw, 75px);
}

.neeb-dach-intro__heading {
  max-width: 720px;
}

.neeb-dach-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  color: var(--neeb-blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.neeb-dach-intro__eyebrow::before {
  content: "";

  display: block;
  flex: 0 0 34px;

  width: 34px;
  height: 2px;

  border-radius: 50px;
  background: var(--neeb-blue);
}

.neeb-dach-intro h2 {
  margin: 0;

  color: var(--neeb-dark);
  font-size: clamp(38px, 4.2vw, 61px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;

  text-wrap: balance;
}

.neeb-dach-intro__lead {
  position: relative;

  padding: 7px 0 7px 28px;

  border-left: 2px solid var(--neeb-blue);
}

.neeb-dach-intro__lead p {
  margin: 0;

  color: var(--neeb-text);
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 400;
  line-height: 1.75;
}

.neeb-dach-intro__lead p + p {
  margin-top: 18px;
  color: var(--neeb-text-light);
}

/* =========================================================
   KARTEN
   ========================================================= */

.neeb-dach-intro__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;
}

.neeb-dach-intro__card {
  position: relative;
  overflow: hidden;

  min-height: 330px;
  padding: 32px 30px 34px;

  border: 1px solid var(--neeb-border);
  border-radius: 16px;

  background: var(--neeb-white);

  box-shadow:
    0 18px 42px rgba(18, 52, 71, 0.07),
    0 2px 8px rgba(18, 52, 71, 0.03);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.neeb-dach-intro__card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: var(--neeb-blue);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.3s ease;
}

.neeb-dach-intro__card::after {
  content: "";

  position: absolute;
  right: -75px;
  bottom: -90px;

  width: 185px;
  height: 185px;

  border-radius: 50%;
  background: rgba(29, 80, 103, 0.045);

  pointer-events: none;
}

.neeb-dach-intro__card:hover {
  transform: translateY(-6px);

  border-color: rgba(29, 80, 103, 0.25);

  box-shadow:
    0 25px 55px rgba(18, 52, 71, 0.11),
    0 4px 12px rgba(18, 52, 71, 0.04);
}

.neeb-dach-intro__card:hover::before {
  transform: scaleX(1);
}

/* Nummer */

.neeb-dach-intro__number {
  position: absolute;
  top: 28px;
  right: 28px;

  color: rgba(18, 52, 71, 0.13);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Icon */

.neeb-dach-intro__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  margin-bottom: 28px;

  border: 1px solid rgba(29, 80, 103, 0.12);
  border-radius: 13px;

  color: var(--neeb-blue);
  background: var(--neeb-blue-light);
}

.neeb-dach-intro__icon svg {
  width: 27px;
  height: 27px;
}

/* Kartentexte */

.neeb-dach-intro__card h3 {
  max-width: 290px;
  margin: 0 0 15px;

  color: var(--neeb-dark);
  font-size: clamp(21px, 1.7vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.neeb-dach-intro__card p {
  position: relative;
  z-index: 1;

  margin: 0;

  color: var(--neeb-text-light);
  font-size: 15.5px;
  line-height: 1.7;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
  .neeb-dach-intro {
    padding-right: 32px;
    padding-left: 32px;
  }

  .neeb-dach-intro__header {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
    gap: 55px;
  }

  .neeb-dach-intro__card {
    min-height: 350px;
    padding: 28px 24px 30px;
  }

  .neeb-dach-intro__number {
    top: 25px;
    right: 23px;
  }
}

/* =========================================================
   KLEINES TABLET
   ========================================================= */

@media (max-width: 850px) {
  .neeb-dach-intro__header {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .neeb-dach-intro__heading {
    max-width: 760px;
  }

  .neeb-dach-intro__lead {
    max-width: 760px;
  }

  .neeb-dach-intro__cards {
    grid-template-columns: 1fr;
  }

  .neeb-dach-intro__card {
    min-height: auto;
  }

  .neeb-dach-intro__card h3 {
    max-width: 520px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .neeb-dach-intro {
    width: 100%;
    margin-right: 0;
    margin-left: 0;

    padding: 68px 18px 72px;
  }

  .neeb-dach-intro::before {
    top: -330px;
    right: -340px;
  }

  .neeb-dach-intro__header {
    margin-bottom: 38px;
  }

  .neeb-dach-intro__eyebrow {
    margin-bottom: 16px;

    font-size: 11.5px;
    letter-spacing: 0.11em;
  }

  .neeb-dach-intro h2 {
    font-size: clamp(34px, 9.5vw, 45px);
  }

  .neeb-dach-intro__lead {
    padding-left: 20px;
  }

  .neeb-dach-intro__lead p {
    font-size: 16.5px;
    line-height: 1.7;
  }

  .neeb-dach-intro__cards {
    gap: 14px;
  }

  .neeb-dach-intro__card {
    padding: 25px 22px 27px;
    border-radius: 14px;
  }

  .neeb-dach-intro__number {
    top: 23px;
    right: 21px;

    font-size: 35px;
  }

  .neeb-dach-intro__icon {
    width: 52px;
    height: 52px;

    margin-bottom: 23px;
  }

  .neeb-dach-intro__icon svg {
    width: 24px;
    height: 24px;
  }

  .neeb-dach-intro__card h3 {
    margin-bottom: 12px;
    font-size: 21px;
  }

  .neeb-dach-intro__card p {
    font-size: 15px;
  }
}

@media (max-width: 420px) {
  .neeb-dach-intro {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* =========================================================
   EINORDNUNG DACHDECKER – MOBILE ÜBERSCHRIFTEN-FIX
========================================================= */

@media (max-width: 767px) {

  .neeb-dach-intro__heading,
  .neeb-dach-intro__header,
  .neeb-dach-intro__lead,
  .neeb-dach-intro__card {
    min-width: 0;
  }

  /* Gesamter Bereich etwas luftiger */

  .neeb-dach-intro {
    padding: 64px 20px 72px;
  }

  .neeb-dach-intro__header {
    gap: 28px;
    margin-bottom: 40px;
  }

  /* Kleine Überschrift */

  .neeb-dach-intro__eyebrow {
    gap: 10px;
    margin-bottom: 18px;

    font-size: 10.5px;
    line-height: 1.45;
    letter-spacing: 0.085em;

    white-space: normal;
  }

  .neeb-dach-intro__eyebrow::before {
    flex-basis: 28px;

    width: 28px;
  }

  /* Große Bereichsüberschrift */

  .neeb-dach-intro h2 {
    width: 100%;
    max-width: 100%;
    margin: 0;

    font-size: clamp(29px, 8.2vw, 38px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;

    text-wrap: pretty !important;
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .neeb-dach-intro h2 span,
  .neeb-dach-intro h2 a {
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Einleitung */

  .neeb-dach-intro__lead {
    width: 100%;
    max-width: 100%;

    padding: 4px 0 4px 18px;
  }

  .neeb-dach-intro__lead p {
    font-size: 16px;
    line-height: 1.7;
  }

  .neeb-dach-intro__lead p + p {
    margin-top: 16px;
  }

  /* Karten */

  .neeb-dach-intro__cards {
    gap: 14px;
  }

  .neeb-dach-intro__card {
    min-height: auto;

    padding: 22px 20px 25px;

    border-radius: 14px;
  }

  .neeb-dach-intro__number {
    top: 21px;
    right: 19px;

    font-size: 34px;
  }

  .neeb-dach-intro__icon {
    width: 50px;
    height: 50px;

    margin-bottom: 22px;
  }

  .neeb-dach-intro__icon svg {
    width: 23px;
    height: 23px;
  }

  /* Kartenüberschriften */

  .neeb-dach-intro__card h3 {
    width: 100%;
    max-width: 100%;

    margin: 0 0 12px;
    padding-right: 8px;

    font-size: 19px !important;
    line-height: 1.32 !important;
    letter-spacing: -0.02em !important;

    text-wrap: pretty !important;
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .neeb-dach-intro__card h3 span,
  .neeb-dach-intro__card h3 a {
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .neeb-dach-intro__card p {
    font-size: 15px;
    line-height: 1.65;
  }
}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 390px) {

  .neeb-dach-intro {
    padding-right: 17px;
    padding-left: 17px;
  }

  .neeb-dach-intro h2 {
    font-size: clamp(27px, 7.9vw, 32px) !important;
    line-height: 1.12 !important;
  }

  .neeb-dach-intro__lead {
    padding-left: 16px;
  }

  .neeb-dach-intro__lead p {
    font-size: 15.5px;
  }

  .neeb-dach-intro__card {
    padding: 20px 18px 23px;
  }

  .neeb-dach-intro__card h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
}

/* =========================================================
   ANIMATION
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .neeb-dach-intro__header {
    animation: neebDachIntroHeader 0.65s ease both;
  }

  .neeb-dach-intro__card {
    animation: neebDachIntroCard 0.65s ease both;
  }

  .neeb-dach-intro__card:nth-child(2) {
    animation-delay: 0.08s;
  }

  .neeb-dach-intro__card:nth-child(3) {
    animation-delay: 0.16s;
  }

  @keyframes neebDachIntroHeader {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes neebDachIntroCard {
    from {
      opacity: 0;
      transform: translateY(22px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dc726d8 *//* =========================================================
   NEEB – LEISTUNGEN DACHDECKER – DUNKLE VARIANTE
   ========================================================= */

.neeb-dach-services,
.neeb-dach-services * {
  box-sizing: border-box;
}

.neeb-dach-services {
  --neeb-dark: #0b2c3d;
  --neeb-dark-deep: #082433;
  --neeb-primary: #17465c;
  --neeb-secondary: #28647c;
  --neeb-white: #ffffff;
  --neeb-text: rgba(255, 255, 255, 0.82);
  --neeb-text-light: rgba(255, 255, 255, 0.66);
  --neeb-border: rgba(255, 255, 255, 0.15);
  --neeb-card-background: rgba(255, 255, 255, 0.07);
  --neeb-card-hover: rgba(255, 255, 255, 0.11);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding: clamp(80px, 8vw, 125px) 40px;

  color: var(--neeb-white);
  font-family: inherit;

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(82, 145, 171, 0.27) 0,
      rgba(82, 145, 171, 0) 32%
    ),
    radial-gradient(
      circle at 4% 96%,
      rgba(72, 126, 149, 0.15) 0,
      rgba(72, 126, 149, 0) 30%
    ),
    linear-gradient(
      125deg,
      #082433 0%,
      #0d3447 52%,
      #1e5268 100%
    );
}

/* Hintergrundkreise */

.neeb-dach-services::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: -300px;
  left: -260px;

  width: 620px;
  height: 620px;

  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;

  box-shadow:
    0 0 0 55px rgba(255, 255, 255, 0.018),
    0 0 0 110px rgba(255, 255, 255, 0.012);

  pointer-events: none;
}

.neeb-dach-services::after {
  content: "";

  position: absolute;
  z-index: -1;

  right: -180px;
  bottom: -260px;

  width: 520px;
  height: 520px;

  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 50%;

  box-shadow:
    0 0 0 45px rgba(255, 255, 255, 0.015),
    0 0 0 90px rgba(255, 255, 255, 0.01);

  pointer-events: none;
}

.neeb-dach-services__inner {
  position: relative;
  z-index: 1;

  width: min(100%, 1420px);
  margin: 0 auto;
}

/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.neeb-dach-services__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
  align-items: end;

  gap: clamp(55px, 8vw, 130px);
  margin-bottom: clamp(45px, 5vw, 68px);
}

.neeb-dach-services__heading {
  max-width: 780px;
}

.neeb-dach-services__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  color: var(--neeb-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.neeb-dach-services__eyebrow::before {
  content: "";

  display: block;
  flex: 0 0 34px;

  width: 34px;
  height: 2px;

  border-radius: 20px;
  background: var(--neeb-white);
}

.neeb-dach-services h2 {
  margin: 0;

  color: var(--neeb-white);
  font-size: clamp(38px, 4.3vw, 62px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.042em;

  text-wrap: balance;
}

.neeb-dach-services__intro {
  max-width: 520px;
  padding: 5px 0 5px 26px;

  border-left: 2px solid rgba(255, 255, 255, 0.7);
}

.neeb-dach-services__intro p {
  margin: 0;

  color: var(--neeb-text);
  font-size: clamp(16.5px, 1.3vw, 18px);
  line-height: 1.75;
}

/* =========================================================
   GRID
   ========================================================= */

.neeb-dach-services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* =========================================================
   KARTEN
   ========================================================= */

.neeb-dach-services__card {
  position: relative;
  overflow: hidden;

  min-height: 320px;
  padding: 30px;

  border: 1px solid var(--neeb-border);
  border-radius: 16px;

  background: var(--neeb-card-background);

  box-shadow:
    0 18px 40px rgba(2, 20, 29, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.neeb-dach-services__card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background: var(--neeb-white);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.3s ease;
}

.neeb-dach-services__card::after {
  content: "";

  position: absolute;
  right: -90px;
  bottom: -105px;

  width: 225px;
  height: 225px;

  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.018);

  pointer-events: none;
}

.neeb-dach-services__card:hover {
  transform: translateY(-5px);

  border-color: rgba(255, 255, 255, 0.28);
  background: var(--neeb-card-hover);

  box-shadow:
    0 26px 55px rgba(2, 20, 29, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.neeb-dach-services__card:hover::before {
  transform: scaleX(1);
}

/* Oberer Kartenbereich */

.neeb-dach-services__top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 29px;
}

.neeb-dach-services__number {
  color: rgba(255, 255, 255, 0.16);
  font-size: 43px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.neeb-dach-services__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 13px;

  color: var(--neeb-white);
  background: rgba(255, 255, 255, 0.075);
}

.neeb-dach-services__icon svg {
  width: 26px;
  height: 26px;
}

/* Kartentexte */

.neeb-dach-services__card h3 {
  position: relative;
  z-index: 1;

  max-width: 520px;
  margin: 0 0 15px;

  color: var(--neeb-white);
  font-size: clamp(21px, 1.75vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.neeb-dach-services__card > p,
.neeb-dach-services__wide-text p {
  position: relative;
  z-index: 1;

  margin: 0;

  color: var(--neeb-text-light);
  font-size: 15.5px;
  line-height: 1.72;
}

/* =========================================================
   KARTE 07 – HERVORGEHOBEN
   ========================================================= */

.neeb-dach-services__card--wide {
  grid-column: 1 / -1;

  min-height: auto;

  border-color: rgba(255, 255, 255, 0.19);

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(135, 192, 214, 0.21) 0,
      rgba(135, 192, 214, 0) 34%
    ),
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.105) 0%,
      rgba(255, 255, 255, 0.055) 100%
    );
}

.neeb-dach-services__card--wide::before {
  display: none;
}

.neeb-dach-services__card--wide::after {
  right: -140px;
  bottom: -200px;

  width: 390px;
  height: 390px;

  border: 1px solid rgba(255, 255, 255, 0.075);
  background: transparent;

  box-shadow:
    0 0 0 45px rgba(255, 255, 255, 0.018),
    0 0 0 90px rgba(255, 255, 255, 0.012);
}

.neeb-dach-services__card--wide:hover {
  border-color: rgba(255, 255, 255, 0.3);

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(135, 192, 214, 0.25) 0,
      rgba(135, 192, 214, 0) 34%
    ),
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.07) 100%
    );
}

.neeb-dach-services__wide-content {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1fr);
  align-items: center;

  gap: clamp(50px, 7vw, 110px);
}

.neeb-dach-services__card--wide .neeb-dach-services__number {
  color: rgba(255, 255, 255, 0.2);
}

.neeb-dach-services__card--wide .neeb-dach-services__icon {
  color: var(--neeb-white);

  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.09);
}

.neeb-dach-services__card--wide h3 {
  margin-bottom: 0;
  color: var(--neeb-white);
}

.neeb-dach-services__wide-text p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
}

.neeb-dach-services__wide-text p a {
  color: var(--neeb-white);
  font-weight: 700;

  text-decoration-color: rgba(255, 255, 255, 0.48);
  text-underline-offset: 3px;
}

.neeb-dach-services__wide-text p a:hover {
  text-decoration-color: var(--neeb-white);
}

/* Weiterführender Link */

.neeb-dach-services__more {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  margin-top: 23px;

  color: var(--neeb-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.neeb-dach-services__more svg {
  width: 17px;
  height: 17px;

  transition: transform 0.2s ease;
}

.neeb-dach-services__more:hover svg {
  transform: translateX(4px);
}

/* =========================================================
   FOKUS
   ========================================================= */

.neeb-dach-services a:focus-visible {
  outline: 3px solid var(--neeb-white);
  outline-offset: 4px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
  .neeb-dach-services {
    padding-right: 32px;
    padding-left: 32px;
  }

  .neeb-dach-services__header {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
    gap: 50px;
  }

  .neeb-dach-services__card {
    padding: 27px;
  }

  .neeb-dach-services__wide-content {
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
    gap: 45px;
  }
}

/* =========================================================
   KLEINES TABLET
   ========================================================= */

@media (max-width: 850px) {
  .neeb-dach-services__header {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .neeb-dach-services__intro {
    max-width: 720px;
  }

  .neeb-dach-services__grid {
    grid-template-columns: 1fr;
  }

  .neeb-dach-services__card--wide {
    grid-column: auto;
  }

  .neeb-dach-services__wide-content {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .neeb-dach-services__card {
    min-height: auto;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .neeb-dach-services {
    width: 100%;

    margin-right: 0;
    margin-left: 0;

    padding: 70px 18px 75px;
  }

  .neeb-dach-services::before {
    top: -390px;
    left: -390px;
  }

  .neeb-dach-services::after {
    right: -360px;
    bottom: -360px;
  }

  .neeb-dach-services__header {
    margin-bottom: 38px;
  }

  .neeb-dach-services__eyebrow {
    margin-bottom: 16px;

    font-size: 11.5px;
    letter-spacing: 0.11em;
  }

  .neeb-dach-services h2 {
    font-size: clamp(34px, 9.5vw, 45px);
  }

  .neeb-dach-services__intro {
    padding-left: 20px;
  }

  .neeb-dach-services__intro p {
    font-size: 16px;
  }

  .neeb-dach-services__grid {
    gap: 14px;
  }

  .neeb-dach-services__card {
    padding: 23px 21px 26px;
    border-radius: 14px;
  }

  .neeb-dach-services__top {
    margin-bottom: 24px;
  }

  .neeb-dach-services__number {
    font-size: 36px;
  }

  .neeb-dach-services__icon {
    width: 50px;
    height: 50px;
  }

  .neeb-dach-services__icon svg {
    width: 23px;
    height: 23px;
  }

  .neeb-dach-services__card h3 {
    margin-bottom: 12px;
    font-size: 21px;
  }

  .neeb-dach-services__card > p,
  .neeb-dach-services__wide-text p {
    font-size: 15px;
  }

  .neeb-dach-services__wide-content {
    gap: 20px;
  }
}

@media (max-width: 420px) {
  .neeb-dach-services {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* =========================================================
   ANIMATION
   ========================================================= */
   
   /* =========================================================
   LEISTUNGEN DACHDECKER – MOBILE ÜBERSCHRIFTEN-FIX
   Ganz unten in das CSS einfügen
========================================================= */

@media (max-width: 767px) {

  .neeb-dach-services__heading,
  .neeb-dach-services__card,
  .neeb-dach-services__card-content,
  .neeb-dach-services__wide-content,
  .neeb-dach-services__wide-text {
    min-width: 0;
  }

  /* Große Abschnittsüberschrift */

  .neeb-dach-services h2 {
    width: 100%;
    max-width: 100%;
    margin: 0;

    font-size: clamp(29px, 8.2vw, 38px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;

    text-wrap: pretty !important;
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .neeb-dach-services h2 span {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Überschriften innerhalb der Karten */

  .neeb-dach-services__card h3 {
    width: 100%;
    max-width: 100%;

    margin: 0 0 12px;

    font-size: 19px !important;
    line-height: 1.32 !important;
    letter-spacing: -0.02em !important;

    text-wrap: pretty !important;
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .neeb-dach-services__card h3 span,
  .neeb-dach-services__card h3 a {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Etwas mehr Platz im Kopfbereich */

  .neeb-dach-services__eyebrow {
    margin-bottom: 18px;
  }

  .neeb-dach-services__header {
    gap: 28px;
    margin-bottom: 40px;
  }

  .neeb-dach-services__intro {
    padding-left: 18px;
  }

  /* Karten auf schmalen Displays etwas luftiger */

  .neeb-dach-services__card {
    padding: 22px 20px 25px;
  }

  .neeb-dach-services__top {
    margin-bottom: 22px;
  }
}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 390px) {

  .neeb-dach-services {
    padding-right: 17px;
    padding-left: 17px;
  }

  .neeb-dach-services h2 {
    font-size: clamp(27px, 7.9vw, 32px) !important;
    line-height: 1.12 !important;
  }

  .neeb-dach-services__card h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  .neeb-dach-services__card {
    padding: 20px 18px 23px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .neeb-dach-services__header {
    animation: neebDachServicesHeader 0.65s ease both;
  }

  .neeb-dach-services__card {
    animation: neebDachServicesCard 0.65s ease both;
  }

  .neeb-dach-services__card:nth-child(2) {
    animation-delay: 0.05s;
  }

  .neeb-dach-services__card:nth-child(3) {
    animation-delay: 0.1s;
  }

  .neeb-dach-services__card:nth-child(4) {
    animation-delay: 0.15s;
  }

  .neeb-dach-services__card:nth-child(5) {
    animation-delay: 0.2s;
  }

  .neeb-dach-services__card:nth-child(6) {
    animation-delay: 0.25s;
  }

  .neeb-dach-services__card:nth-child(7) {
    animation-delay: 0.3s;
  }

  @keyframes neebDachServicesHeader {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes neebDachServicesCard {
    from {
      opacity: 0;
      transform: translateY(22px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-983e7b2 *//* =========================================================
   NEEB – ZUSAMMENARBEIT DACHDECKER
   ========================================================= */

.neeb-dach-process,
.neeb-dach-process * {
  box-sizing: border-box;
}

.neeb-dach-process {
  --neeb-dark: #0d3042;
  --neeb-primary: #17465c;
  --neeb-secondary: #28647c;
  --neeb-white: #ffffff;
  --neeb-background: #f4f7f8;
  --neeb-text: #40545e;
  --neeb-text-light: #687b84;
  --neeb-border: #dbe5e9;

  position: relative;
  overflow: hidden;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding: clamp(80px, 8vw, 120px) 40px;

  color: var(--neeb-dark);
  font-family: inherit;

  background:
    radial-gradient(
      circle at 95% 8%,
      rgba(23, 70, 92, 0.07) 0,
      rgba(23, 70, 92, 0) 28%
    ),
    var(--neeb-background);
}

/* Dezente Kreise im Hintergrund */

.neeb-dach-process::before {
  content: "";

  position: absolute;
  top: -250px;
  right: -240px;

  width: 540px;
  height: 540px;

  border: 1px solid rgba(13, 48, 66, 0.055);
  border-radius: 50%;

  box-shadow:
    0 0 0 50px rgba(13, 48, 66, 0.02),
    0 0 0 100px rgba(13, 48, 66, 0.014);

  pointer-events: none;
}

.neeb-dach-process__inner {
  position: relative;
  z-index: 1;

  width: min(100%, 1420px);
  margin: 0 auto;
}

/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.neeb-dach-process__header {
  max-width: 850px;
  margin: 0 auto clamp(48px, 5vw, 70px);

  text-align: center;
}

.neeb-dach-process__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  color: var(--neeb-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.neeb-dach-process__eyebrow::before,
.neeb-dach-process__eyebrow::after {
  content: "";

  display: block;

  width: 30px;
  height: 2px;

  border-radius: 20px;
  background: var(--neeb-primary);
}

.neeb-dach-process h2 {
  margin: 0;

  color: var(--neeb-dark);
  font-size: clamp(38px, 4.3vw, 62px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.042em;

  text-wrap: balance;
}

/* =========================================================
   SCHRITTE
   ========================================================= */

.neeb-dach-process__steps {
  position: relative;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Verbindungslinie */

.neeb-dach-process__steps::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 66px;
  left: 16.5%;
  right: 16.5%;

  height: 1px;

  background:
    repeating-linear-gradient(
      to right,
      rgba(23, 70, 92, 0.2) 0,
      rgba(23, 70, 92, 0.2) 7px,
      transparent 7px,
      transparent 14px
    );
}

.neeb-dach-process__step {
  position: relative;
  z-index: 1;
  overflow: hidden;

  min-height: 340px;
  padding: 31px 29px 34px;

  border: 1px solid var(--neeb-border);
  border-radius: 16px;

  background: var(--neeb-white);

  box-shadow:
    0 18px 42px rgba(13, 48, 66, 0.065),
    0 2px 8px rgba(13, 48, 66, 0.025);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.neeb-dach-process__step::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: var(--neeb-primary);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.3s ease;
}

.neeb-dach-process__step::after {
  content: "";

  position: absolute;
  right: -95px;
  bottom: -110px;

  width: 225px;
  height: 225px;

  border-radius: 50%;
  background: rgba(23, 70, 92, 0.035);

  pointer-events: none;
}

.neeb-dach-process__step:hover {
  transform: translateY(-6px);

  border-color: rgba(23, 70, 92, 0.24);

  box-shadow:
    0 25px 55px rgba(13, 48, 66, 0.1),
    0 4px 12px rgba(13, 48, 66, 0.035);
}

.neeb-dach-process__step:hover::before {
  transform: scaleX(1);
}

/* Oberer Bereich */

.neeb-dach-process__step-top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 29px;
}

.neeb-dach-process__number {
  color: rgba(13, 48, 66, 0.14);
  font-size: 43px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.neeb-dach-process__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  border: 1px solid rgba(23, 70, 92, 0.13);
  border-radius: 50%;

  color: var(--neeb-primary);
  background: #e8f0f3;

  box-shadow: 0 0 0 8px var(--neeb-white);
}

.neeb-dach-process__icon svg {
  width: 26px;
  height: 26px;
}

/* Texte */

.neeb-dach-process__step h3 {
  position: relative;
  z-index: 1;

  margin: 0 0 15px;

  color: var(--neeb-dark);
  font-size: clamp(22px, 1.7vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.neeb-dach-process__step p {
  position: relative;
  z-index: 1;

  margin: 0;

  color: var(--neeb-text-light);
  font-size: 15.5px;
  line-height: 1.72;
}

/* =========================================================
   CTA
   ========================================================= */

.neeb-dach-process__cta {
  display: flex;
  justify-content: center;

  margin-top: clamp(38px, 4vw, 55px);
}

.neeb-dach-process__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  min-height: 56px;
  padding: 16px 27px;

  border: 1px solid var(--neeb-primary);
  border-radius: 7px;

  color: var(--neeb-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;

  background: var(--neeb-primary);

  box-shadow: 0 14px 30px rgba(13, 48, 66, 0.17);

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.neeb-dach-process__button svg {
  width: 18px;
  height: 18px;

  transition: transform 0.25s ease;
}

.neeb-dach-process__button:hover {
  color: var(--neeb-primary);
  background: transparent;

  transform: translateY(-2px);

  box-shadow: 0 18px 38px rgba(13, 48, 66, 0.2);
}

.neeb-dach-process__button:hover svg {
  transform: translateX(4px);
}

.neeb-dach-process__button:focus-visible {
  outline: 3px solid var(--neeb-primary);
  outline-offset: 4px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
  .neeb-dach-process {
    padding-right: 32px;
    padding-left: 32px;
  }

  .neeb-dach-process__step {
    min-height: 370px;
    padding: 27px 24px 30px;
  }

  .neeb-dach-process__steps::before {
    top: 62px;
  }

  .neeb-dach-process__icon {
    width: 54px;
    height: 54px;
  }
}

/* =========================================================
   KLEINES TABLET
   ========================================================= */

@media (max-width: 850px) {
  .neeb-dach-process__steps {
    grid-template-columns: 1fr;
  }

  .neeb-dach-process__steps::before {
    top: 70px;
    bottom: 70px;
    left: 56px;
    right: auto;

    width: 1px;
    height: auto;

    background:
      repeating-linear-gradient(
        to bottom,
        rgba(23, 70, 92, 0.2) 0,
        rgba(23, 70, 92, 0.2) 7px,
        transparent 7px,
        transparent 14px
      );
  }

  .neeb-dach-process__step {
    min-height: auto;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .neeb-dach-process {
    width: 100%;

    margin-right: 0;
    margin-left: 0;

    padding: 70px 18px 75px;
  }

  .neeb-dach-process::before {
    top: -350px;
    right: -350px;
  }

  .neeb-dach-process__header {
    margin-bottom: 38px;
  }

  .neeb-dach-process__eyebrow {
    margin-bottom: 16px;

    font-size: 11.5px;
    letter-spacing: 0.11em;
  }

  .neeb-dach-process__eyebrow::before,
  .neeb-dach-process__eyebrow::after {
    width: 23px;
  }

  .neeb-dach-process h2 {
    font-size: clamp(34px, 9.5vw, 45px);
  }

  .neeb-dach-process__steps {
    gap: 14px;
  }

  .neeb-dach-process__steps::before {
    display: none;
  }

  .neeb-dach-process__step {
    padding: 23px 21px 26px;
    border-radius: 14px;
  }

  .neeb-dach-process__step-top {
    margin-bottom: 24px;
  }

  .neeb-dach-process__number {
    font-size: 36px;
  }

  .neeb-dach-process__icon {
    width: 50px;
    height: 50px;

    box-shadow: none;
  }

  .neeb-dach-process__icon svg {
    width: 23px;
    height: 23px;
  }

  .neeb-dach-process__step h3 {
    margin-bottom: 12px;
    font-size: 21px;
  }

  .neeb-dach-process__step p {
    font-size: 15px;
  }

  .neeb-dach-process__cta {
    margin-top: 31px;
  }

  .neeb-dach-process__button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .neeb-dach-process {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* =========================================================
   ANIMATION
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .neeb-dach-process__header {
    animation: neebDachProcessHeader 0.65s ease both;
  }

  .neeb-dach-process__step {
    animation: neebDachProcessStep 0.65s ease both;
  }

  .neeb-dach-process__step:nth-child(2) {
    animation-delay: 0.08s;
  }

  .neeb-dach-process__step:nth-child(3) {
    animation-delay: 0.16s;
  }

  .neeb-dach-process__cta {
    animation: neebDachProcessCta 0.65s 0.2s ease both;
  }

  @keyframes neebDachProcessHeader {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes neebDachProcessStep {
    from {
      opacity: 0;
      transform: translateY(22px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes neebDachProcessCta {
    from {
      opacity: 0;
      transform: translateY(14px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1c04650c *//* =========================================================
   NEEB KONTAKTBEREICH
   Calendly-CTA und HubSpot-Formular
========================================================= */

.neeb-contact-equal-row,
.neeb-contact-equal-row *,
.neeb-calendly-cta-band,
.neeb-calendly-cta-band *,
.neeb-contact-form-card,
.neeb-contact-form-card * {
  box-sizing: border-box;
}


/* =========================================================
   GEMEINSAME KARTEN
========================================================= */

.neeb-calendly-cta-band,
.neeb-contact-form-card {
  --neeb-dark: #02131c;
  --neeb-mid: #062f40;
  --neeb-light: #084863;
  --neeb-white: #ffffff;

  position: relative;

  width: 100%;
  min-width: 0;
  margin: 0;

  overflow: hidden;

  border-radius: 32px;

  color: var(--neeb-white);

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 255, 255, 0.06),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(8, 72, 99, 0.25),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      var(--neeb-dark) 0%,
      var(--neeb-mid) 45%,
      var(--neeb-light) 100%
    );
}


/* Dezentes Raster */

.neeb-calendly-cta-band::before,
.neeb-contact-form-card::before {
  content: "";

  position: absolute;
  z-index: 0;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px
    );

  background-size: 54px 54px;
  opacity: 0.32;

  pointer-events: none;
}

.neeb-calendly-cta-band > *,
.neeb-contact-form-card > * {
  position: relative;
  z-index: 1;
}


/* =========================================================
   LINKE CALENDLY-KARTE
========================================================= */

.neeb-calendly-cta-band {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  min-height: 560px;

  padding: 58px 30px;
}

.neeb-calendly-cta-band-inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 680px;
  margin: 0 auto;

  text-align: center;

  transform: translateY(-38px);
}


/* Kicker */

.neeb-calendly-cta-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 30px;
  padding: 10px 18px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;

  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);

  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}


/* Überschrift */

.neeb-calendly-cta-band h2 {
  width: 100%;
  max-width: 650px;

  margin: 0 0 34px;

  color: #ffffff;

  font-size: clamp(36px, 2vw, 43px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: 0.035em;

  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}


/* Beschreibung */

.neeb-calendly-cta-band p {
  width: 100%;
  max-width: 640px;

  margin: 0 auto;

  color: rgba(255, 255, 255, 0.76);

  font-size: 17px;
  line-height: 1.7;
}


/* Aktionen */

.neeb-calendly-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  margin-top: 58px;
  gap: 32px;
}


/* Calendly-Button */

.neeb-calendly-cta-btn,
.neeb-calendly-cta-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 56px;
  padding: 0 34px;

  border-radius: 999px;

  color: #02131c !important;
  background: #ffffff;

  text-decoration: none;

  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.neeb-calendly-cta-btn:hover,
.neeb-calendly-cta-btn:focus {
  color: #02131c !important;
  background: #f3f7fa;

  text-decoration: none;

  transform: translateY(-2px);

  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.neeb-calendly-cta-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
}


/* Hinweis unter dem Button */

.neeb-calendly-cta-note {
  display: block;

  width: 100%;
  max-width: 610px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 14px;
  line-height: 1.65;
}


/* =========================================================
   RECHTE HUBSPOT-KARTE
========================================================= */

.neeb-contact-form-card {
  display: flex;
  flex-direction: column;

  height: 100%;
  min-height: 560px;

  padding: 46px 38px;
}


/* Elementor- und HubSpot-Inhalte */

.neeb-contact-form-card > .elementor-element,
.neeb-contact-form-card > .elementor-widget,
.neeb-contact-form-card .elementor-widget-container,
.neeb-contact-form-card .hbspt-form {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: none;
}

.neeb-contact-form-card > .elementor-element,
.neeb-contact-form-card > .elementor-widget {
  transform: translateY(-38px);
}


/* Zusätzliche Hintergründe entfernen */

.neeb-contact-form-card .elementor-widget-container,
.neeb-contact-form-card .hbspt-form,
.neeb-contact-form-card .hs-form,
.neeb-contact-form-card form,
.neeb-contact-form-card fieldset {
  background: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* Überschriften und Texte */

.neeb-contact-form-card h1,
.neeb-contact-form-card h2,
.neeb-contact-form-card h3,
.neeb-contact-form-card h4,
.neeb-contact-form-card .hs-richtext,
.neeb-contact-form-card .hs-richtext p {
  color: #ffffff;
}


/* Feldbeschriftungen */

.neeb-contact-form-card .hs-form label,
.neeb-contact-form-card .hs-form-field > label {
  color: rgba(255, 255, 255, 0.88);
}


/* HubSpot-Eingabefelder */

.neeb-contact-form-card .hs-form input[type="text"],
.neeb-contact-form-card .hs-form input[type="email"],
.neeb-contact-form-card .hs-form input[type="tel"],
.neeb-contact-form-card .hs-form input[type="number"],
.neeb-contact-form-card .hs-form input[type="url"],
.neeb-contact-form-card .hs-form input[type="date"],
.neeb-contact-form-card .hs-form select,
.neeb-contact-form-card .hs-form textarea {
  width: 100%;

  padding: 12px 14px;

  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 10px;
  outline: none;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);

  font-family: inherit;
  font-size: 15px;

  box-shadow: none;
}

.neeb-contact-form-card .hs-form textarea {
  min-height: 100px;
  resize: vertical;
}

.neeb-contact-form-card .hs-form input::placeholder,
.neeb-contact-form-card .hs-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.62);
  opacity: 1;
}

.neeb-contact-form-card .hs-form input:focus,
.neeb-contact-form-card .hs-form select:focus,
.neeb-contact-form-card .hs-form textarea:focus {
  border-color: #ffffff;

  background: rgba(255, 255, 255, 0.08);

  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.1);
}


/* Datenschutz */

.neeb-contact-form-card .legal-consent-container,
.neeb-contact-form-card .legal-consent-container p,
.neeb-contact-form-card .hs-form-booleancheckbox-display,
.neeb-contact-form-card .hs-form-checkbox-display {
  color: rgba(255, 255, 255, 0.8);
}

.neeb-contact-form-card .legal-consent-container a,
.neeb-contact-form-card .legal-consent-container a:visited {
  color: #ffffff !important;

  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Fehlermeldungen */

.neeb-contact-form-card .hs-error-msg,
.neeb-contact-form-card .hs-error-msgs label {
  color: #ffb4b4;
}


/* HubSpot-Button */

.neeb-contact-form-card .hs-button,
.neeb-contact-form-card input[type="submit"] {
  min-height: 50px;

  padding: 0 28px;

  border: 0;
  border-radius: 10px;

  color: #02131c;
  background: #dceafb;

  font-family: inherit;
  font-size: 16px;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.neeb-contact-form-card .hs-button:hover,
.neeb-contact-form-card input[type="submit"]:hover {
  color: #02131c;
  background: #ffffff;

  transform: translateY(-2px);
}


/* HubSpot-iFrame */

.neeb-contact-form-card iframe {
  display: block;

  width: 100%;
  max-width: 100%;

  margin: 0;
  border: 0;

  background: transparent;
}


/* =========================================================
   MODERNE HUBSPOT-FORMULARE
========================================================= */

.neeb-contact-form-card {
  --hsf-background__background-color: transparent;
  --hsf-background__background-image: none;
  --hsf-background__border-width: 0;
  --hsf-background__border-radius: 0;
  --hsf-background__padding: 0;

  --hsf-global__color: #ffffff;
  --hsf-heading__color: #ffffff;
  --hsf-richtext__color: rgba(255, 255, 255, 0.8);

  --hsf-field-label__color: rgba(255, 255, 255, 0.88);
  --hsf-field-description__color: rgba(255, 255, 255, 0.68);

  --hsf-field-input__color: #ffffff;
  --hsf-field-input__background-color: rgba(255, 255, 255, 0.04);
  --hsf-field-input__placeholder-color: rgba(255, 255, 255, 0.62);
  --hsf-field-input__border-color: rgba(255, 255, 255, 0.65);
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: 10px;

  --hsf-field-textarea__color: #ffffff;
  --hsf-field-textarea__background-color: rgba(255, 255, 255, 0.04);
  --hsf-field-textarea__placeholder-color: rgba(255, 255, 255, 0.62);
  --hsf-field-textarea__border-color: rgba(255, 255, 255, 0.65);
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: 10px;

  --hsf-button__color: #02131c;
  --hsf-button__background-color: #dceafb;
  --hsf-button__background-image: none;
  --hsf-button__border-radius: 10px;
}


/* =========================================================
   DESKTOP AB 1025 PX
========================================================= */

@media (min-width: 1025px) {

  .neeb-contact-equal-row {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    align-items: stretch !important;

    width: calc(100% - 80px) !important;
    max-width: 1480px !important;

    margin-right: auto !important;
    margin-left: auto !important;

    padding: 0 !important;

    gap: 20px !important;
  }

  .neeb-contact-equal-row > .e-con-inner,
  .neeb-contact-equal-row > .elementor-container {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    grid-column: 1 / -1;

    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 20px !important;
  }

  .neeb-contact-col-left,
  .neeb-contact-form-card {
    align-self: stretch !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 560px !important;

    margin: 0 !important;
  }

  .neeb-contact-col-left {
    display: flex !important;
    flex-direction: column !important;

    padding: 0 !important;
  }

  .neeb-contact-col-left .elementor-widget-html,
  .neeb-contact-col-left
  .elementor-widget-html
  > .elementor-widget-container {
    display: flex !important;
    flex: 1 1 auto !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .neeb-contact-col-left .neeb-calendly-cta-band {
    flex: 1 1 auto !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 560px !important;

    margin: 0 !important;
  }

  .neeb-contact-form-card {
    display: flex !important;
    flex-direction: column !important;

    padding: 46px 38px !important;
  }

  .neeb-contact-form-card .elementor-widget,
  .neeb-contact-form-card .elementor-widget-container,
  .neeb-contact-form-card .hbspt-form {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
  }
}


/* =========================================================
   LAPTOPS BIS 1440 PX
========================================================= */

@media (min-width: 1025px) and (max-width: 1440px) {

  .neeb-contact-equal-row {
    width: calc(100% - 64px) !important;
    max-width: 1240px !important;

    gap: 18px !important;
  }

  .neeb-contact-equal-row > .e-con-inner,
  .neeb-contact-equal-row > .elementor-container {
    gap: 18px !important;
  }

  .neeb-contact-col-left,
  .neeb-contact-form-card,
  .neeb-contact-col-left .neeb-calendly-cta-band {
    min-height: 510px !important;
  }

  .neeb-calendly-cta-band,
  .neeb-contact-form-card {
    border-radius: 26px;
  }

  .neeb-calendly-cta-band {
    padding: 46px 28px !important;
  }

  .neeb-calendly-cta-band-inner {
    max-width: 560px !important;

    transform: translateY(-24px);
  }

  .neeb-calendly-cta-kicker {
    margin-bottom: 22px;
  }

  .neeb-calendly-cta-band h2 {
    max-width: 540px;

    margin-bottom: 25px;

    font-size: clamp(33px, 2.5vw, 40px);
    line-height: 1.12;
    letter-spacing: 0.02em;
  }

  .neeb-calendly-cta-band p {
    max-width: 550px;

    font-size: 16px;
    line-height: 1.65;
  }

  .neeb-calendly-cta-actions {
    margin-top: 38px;
    gap: 20px;
  }

  .neeb-calendly-cta-btn {
    min-height: 52px;

    padding: 0 28px;

    font-size: 15px;
  }

  .neeb-calendly-cta-note {
    max-width: 530px;

    font-size: 13px;
  }

  .neeb-contact-form-card {
    min-height: 510px !important;

    padding: 38px 30px !important;
  }

  .neeb-contact-form-card > .elementor-element,
  .neeb-contact-form-card > .elementor-widget {
    transform: translateY(-24px);
  }
}


/* =========================================================
   KLEINERE LAPTOPS BIS 1280 PX
========================================================= */

@media (min-width: 1025px) and (max-width: 1280px) {

  .neeb-contact-equal-row {
    width: calc(100% - 40px) !important;
    max-width: 1120px !important;

    gap: 15px !important;
  }

  .neeb-contact-equal-row > .e-con-inner,
  .neeb-contact-equal-row > .elementor-container {
    gap: 15px !important;
  }

  .neeb-contact-col-left,
  .neeb-contact-form-card,
  .neeb-contact-col-left .neeb-calendly-cta-band {
    min-height: 490px !important;
  }

  .neeb-calendly-cta-band,
  .neeb-contact-form-card {
    border-radius: 23px;
  }

  .neeb-calendly-cta-band {
    padding: 40px 23px !important;
  }

  .neeb-calendly-cta-band-inner {
    transform: translateY(-17px);
  }

  .neeb-calendly-cta-kicker {
    margin-bottom: 19px;
  }

  .neeb-calendly-cta-band h2 {
    margin-bottom: 21px;

    font-size: 34px;
  }

  .neeb-calendly-cta-band p {
    font-size: 15.5px;
  }

  .neeb-calendly-cta-actions {
    margin-top: 32px;
    gap: 18px;
  }

  .neeb-contact-form-card {
    min-height: 490px !important;

    padding: 34px 25px !important;
  }

  .neeb-contact-form-card > .elementor-element,
  .neeb-contact-form-card > .elementor-widget {
    transform: translateY(-17px);
  }
}


/* =========================================================
   TABLET BIS 1024 PX
========================================================= */

@media (max-width: 1024px) {

  .neeb-contact-equal-row,
  .neeb-contact-equal-row > .e-con-inner,
  .neeb-contact-equal-row > .elementor-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: calc(100% - 40px) !important;
    max-width: 760px !important;

    margin-right: auto !important;
    margin-left: auto !important;

    gap: 20px !important;
  }

  .neeb-contact-col-left,
  .neeb-calendly-cta-band,
  .neeb-contact-form-card {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
  }

  .neeb-contact-col-left .elementor-widget-html,
  .neeb-contact-col-left
  .elementor-widget-html
  > .elementor-widget-container {
    display: block !important;

    width: 100% !important;
    height: auto !important;
  }

  .neeb-calendly-cta-band,
  .neeb-contact-form-card {
    border-radius: 28px;
  }

  .neeb-calendly-cta-band {
    padding: 58px 30px;
  }

  .neeb-contact-form-card {
    padding: 40px 30px;
  }

  .neeb-calendly-cta-band-inner {
    max-width: 700px;

    transform: none;
  }

  .neeb-contact-form-card > .elementor-element,
  .neeb-contact-form-card > .elementor-widget {
    transform: none;
  }

  .neeb-calendly-cta-band h2 {
    font-size: 40px;
  }

  .neeb-calendly-cta-band p {
    font-size: 17px;
  }
}


/* =========================================================
   MOBILE BIS 767 PX
   NAHEZU VOLLE BILDSCHIRMBREITE
========================================================= */

@media (max-width: 767px) {

  /*
   * Aus dem begrenzten Elementor-Container ausbrechen.
   * Es bleiben 8 px Abstand pro Bildschirmseite.
   */
  .neeb-contact-equal-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    position: relative !important;
    left: 50% !important;

    width: calc(100vw - 16px) !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-50%) !important;

    gap: 14px !important;
  }

  .neeb-contact-equal-row > .e-con-inner,
  .neeb-contact-equal-row > .elementor-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 14px !important;
  }

  .neeb-contact-col-left,
  .neeb-calendly-cta-band,
  .neeb-contact-form-card {
    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
  }

  .neeb-contact-col-left {
    padding: 0 !important;
  }

  .neeb-contact-col-left .elementor-widget-html,
  .neeb-contact-col-left
  .elementor-widget-html
  > .elementor-widget-container {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Karten */

  .neeb-calendly-cta-band,
  .neeb-contact-form-card {
    border-radius: 21px;
  }

  .neeb-calendly-cta-band {
    padding: 48px 24px;
  }

  .neeb-contact-form-card {
    padding: 32px 22px;
  }

  /* Desktop-Verschiebungen entfernen */

  .neeb-calendly-cta-band-inner,
  .neeb-contact-form-card > .elementor-element,
  .neeb-contact-form-card > .elementor-widget {
    transform: none !important;
  }

  .neeb-calendly-cta-band-inner {
    width: 100%;
    max-width: 650px;
  }

  /* Kicker */

  .neeb-calendly-cta-kicker {
    margin-bottom: 17px;
    padding: 9px 15px;

    font-size: 11px;
  }

  /* Überschrift */

  .neeb-calendly-cta-band h2 {
    width: 100%;
    max-width: 100%;

    margin-bottom: 19px;

    font-size: clamp(28px, 7.8vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.035em;

    text-wrap: pretty;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Beschreibung */

  .neeb-calendly-cta-band p {
    width: 100%;
    max-width: 100%;

    font-size: 16px;
    line-height: 1.7;
  }

  /* Aktionen */

  .neeb-calendly-cta-actions {
    width: 100%;

    margin-top: 30px;
    gap: 16px;
  }

  .neeb-calendly-cta-btn {
    width: 100%;
    max-width: 410px;

    min-height: 54px;
    padding: 0 20px;

    font-size: 15px;
  }

  .neeb-calendly-cta-note {
    width: 100%;
    max-width: 410px;

    font-size: 13px;
  }

  /* HubSpot-Formular vollständig ausnutzen */

  .neeb-contact-form-card .elementor-widget,
  .neeb-contact-form-card .elementor-widget-container,
  .neeb-contact-form-card .hbspt-form,
  .neeb-contact-form-card .hs-form,
  .neeb-contact-form-card form,
  .neeb-contact-form-card fieldset {
    width: 100% !important;
    max-width: none !important;
  }

  .neeb-contact-form-card .hs-button,
  .neeb-contact-form-card input[type="submit"] {
    width: 100%;
  }
}


/* =========================================================
   SEHR KLEINE GERÄTE BIS 420 PX
========================================================= */

@media (max-width: 420px) {

  /*
   * Nur noch 6 px Abstand pro Bildschirmseite.
   */
  .neeb-contact-equal-row {
    width: calc(100vw - 12px) !important;
  }

  .neeb-calendly-cta-band,
  .neeb-contact-form-card {
    border-radius: 19px;
  }

  .neeb-calendly-cta-band {
    padding: 43px 20px 47px;
  }

  .neeb-contact-form-card {
    padding: 28px 18px;
  }

  .neeb-calendly-cta-band h2 {
    font-size: clamp(27px, 7.6vw, 31px);
  }

  .neeb-calendly-cta-band p {
    font-size: 15.5px;
  }

  .neeb-calendly-cta-btn {
    font-size: 14.5px;
  }
}


/* =========================================================
   SEHR SCHMALE SMARTPHONES
========================================================= */

@media (max-width: 360px) {

  .neeb-calendly-cta-band {
    padding-right: 17px;
    padding-left: 17px;
  }

  .neeb-contact-form-card {
    padding-right: 16px;
    padding-left: 16px;
  }

  .neeb-calendly-cta-band h2 {
    font-size: 26px;
  }
}


/* =========================================================
   REDUZIERTE BEWEGUNGEN
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .neeb-calendly-cta-btn,
  .neeb-contact-form-card .hs-button,
  .neeb-contact-form-card input[type="submit"] {
    transition: none;
  }

  .neeb-calendly-cta-btn:hover,
  .neeb-contact-form-card .hs-button:hover,
  .neeb-contact-form-card input[type="submit"]:hover {
    transform: none;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-182ce5a *//* =========================================================
   NEEB – FAQ DACHDECKER
   ========================================================= */

.neeb-dach-faq,
.neeb-dach-faq * {
  box-sizing: border-box;
}

.neeb-dach-faq {
  --neeb-dark: #0d3042;
  --neeb-primary: #17465c;
  --neeb-secondary: #28647c;
  --neeb-white: #ffffff;
  --neeb-background: #f4f7f8;
  --neeb-text: #40545e;
  --neeb-text-light: #657982;
  --neeb-border: #d8e3e7;

  position: relative;
  overflow: hidden;

  width: 100vw;
  max-width: none;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);

  padding: clamp(80px, 8vw, 120px) 40px;

  color: var(--neeb-dark);
  font-family: inherit;

  background:
    radial-gradient(
      circle at 95% 5%,
      rgba(23, 70, 92, 0.075) 0,
      rgba(23, 70, 92, 0) 29%
    ),
    var(--neeb-background);
}

/* Hintergrundgrafik */

.neeb-dach-faq::before {
  content: "";

  position: absolute;
  top: -270px;
  right: -250px;

  width: 570px;
  height: 570px;

  border: 1px solid rgba(13, 48, 66, 0.055);
  border-radius: 50%;

  box-shadow:
    0 0 0 52px rgba(13, 48, 66, 0.018),
    0 0 0 104px rgba(13, 48, 66, 0.012);

  pointer-events: none;
}

.neeb-dach-faq__inner {
  position: relative;
  z-index: 1;

  width: min(100%, 1180px);
  margin: 0 auto;
}

/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.neeb-dach-faq__header {
  max-width: 850px;
  margin: 0 auto clamp(45px, 5vw, 65px);

  text-align: center;
}

.neeb-dach-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  color: var(--neeb-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.neeb-dach-faq__eyebrow::before,
.neeb-dach-faq__eyebrow::after {
  content: "";

  display: block;

  width: 30px;
  height: 2px;

  border-radius: 20px;
  background: var(--neeb-primary);
}

.neeb-dach-faq h2 {
  margin: 0;

  color: var(--neeb-dark);
  font-size: clamp(38px, 4.3vw, 62px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.042em;

  text-wrap: balance;
}

/* =========================================================
   FAQ-LISTE
   ========================================================= */

.neeb-dach-faq__list {
  display: grid;
  gap: 14px;
}

.neeb-dach-faq__item {
  position: relative;
  overflow: hidden;

  border: 1px solid var(--neeb-border);
  border-radius: 15px;

  background: var(--neeb-white);

  box-shadow:
    0 12px 30px rgba(13, 48, 66, 0.05),
    0 2px 7px rgba(13, 48, 66, 0.025);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.neeb-dach-faq__item:hover {
  border-color: rgba(23, 70, 92, 0.23);

  box-shadow:
    0 17px 38px rgba(13, 48, 66, 0.075),
    0 3px 9px rgba(13, 48, 66, 0.03);
}

.neeb-dach-faq__item[open] {
  border-color: rgba(23, 70, 92, 0.27);

  box-shadow:
    0 20px 45px rgba(13, 48, 66, 0.085),
    0 3px 10px rgba(13, 48, 66, 0.03);
}

/* Oberer Farbstreifen */

.neeb-dach-faq__item::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  background: var(--neeb-primary);

  transform: scaleY(0);
  transform-origin: top;

  transition: transform 0.3s ease;
}

.neeb-dach-faq__item[open]::before {
  transform: scaleY(1);
}

/* =========================================================
   FRAGE
   ========================================================= */

.neeb-dach-faq__question {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 20px;

  min-height: 104px;
  padding: 23px 26px;

  color: var(--neeb-dark);
  cursor: pointer;
  list-style: none;

  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}

.neeb-dach-faq__question::-webkit-details-marker {
  display: none;
}

.neeb-dach-faq__question::marker {
  display: none;
  content: "";
}

.neeb-dach-faq__question:hover {
  background: rgba(23, 70, 92, 0.025);
}

.neeb-dach-faq__item[open] .neeb-dach-faq__question {
  color: var(--neeb-primary);
  background: rgba(23, 70, 92, 0.035);
}

/* Nummer */

.neeb-dach-faq__number {
  color: rgba(13, 48, 66, 0.18);
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Fragetext */

.neeb-dach-faq__question-text {
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* Plus-/Minus-Button */

.neeb-dach-faq__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  border: 1px solid rgba(23, 70, 92, 0.15);
  border-radius: 50%;

  color: var(--neeb-primary);
  background: #e8f0f3;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.3s ease;
}

.neeb-dach-faq__toggle svg {
  width: 20px;
  height: 20px;
}

.neeb-dach-faq__item[open] .neeb-dach-faq__toggle {
  color: var(--neeb-white);
  border-color: var(--neeb-primary);
  background: var(--neeb-primary);

  transform: rotate(45deg);
}

/* =========================================================
   ANTWORT
   ========================================================= */

.neeb-dach-faq__answer {
  display: grid;
  grid-template-rows: 0fr;

  transition: grid-template-rows 0.35s ease;
}

.neeb-dach-faq__item[open] .neeb-dach-faq__answer {
  grid-template-rows: 1fr;
}

.neeb-dach-faq__answer-inner {
  overflow: hidden;

  margin: 0 26px;
  padding: 0 66px 0 78px;

  border-top: 1px solid transparent;

  transition:
    padding 0.35s ease,
    border-color 0.35s ease;
}

.neeb-dach-faq__item[open] .neeb-dach-faq__answer-inner {
  padding-top: 25px;
  padding-bottom: 30px;

  border-color: var(--neeb-border);
}

.neeb-dach-faq__answer p {
  margin: 0;

  color: var(--neeb-text-light);
  font-size: 16px;
  line-height: 1.75;
}

.neeb-dach-faq__answer p + p {
  margin-top: 17px;
}

/* =========================================================
   FOKUS
   ========================================================= */

.neeb-dach-faq__question:focus-visible {
  outline: 3px solid var(--neeb-primary);
  outline-offset: -3px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
  .neeb-dach-faq {
    padding-right: 32px;
    padding-left: 32px;
  }

  .neeb-dach-faq__question {
    grid-template-columns: 52px minmax(0, 1fr) 44px;
    gap: 17px;

    padding-right: 23px;
    padding-left: 23px;
  }

  .neeb-dach-faq__answer-inner {
    margin-right: 23px;
    margin-left: 23px;
    padding-right: 58px;
    padding-left: 69px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

/* =========================================================
   FAQ DACHDECKER – MOBILE ÜBERSCHRIFTEN-FIX
========================================================= */

@media (max-width: 767px) {

  .neeb-dach-faq__header,
  .neeb-dach-faq__list,
  .neeb-dach-faq__item,
  .neeb-dach-faq__question,
  .neeb-dach-faq__question-text,
  .neeb-dach-faq__answer-inner {
    min-width: 0;
  }

  /* Gesamter Bereich */

  .neeb-dach-faq {
    padding: 64px 20px 72px;
  }

  /* Kopfbereich */

  .neeb-dach-faq__header {
    width: 100%;
    max-width: 100%;

    margin-bottom: 38px;
    padding: 0 2px;
  }

  .neeb-dach-faq__eyebrow {
    gap: 9px;

    margin-bottom: 18px;

    font-size: 10.5px;
    line-height: 1.45;
    letter-spacing: 0.085em;

    white-space: normal;
  }

  .neeb-dach-faq__eyebrow::before,
  .neeb-dach-faq__eyebrow::after {
    width: 20px;
    flex: 0 0 20px;
  }

  /* Große Bereichsüberschrift */

  .neeb-dach-faq h2 {
    width: 100%;
    max-width: 100%;
    margin: 0;

    font-size: clamp(28px, 8vw, 37px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;

    text-wrap: pretty !important;
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .neeb-dach-faq h2 span,
  .neeb-dach-faq h2 a {
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* FAQ-Liste */

  .neeb-dach-faq__list {
    gap: 11px;
  }

  .neeb-dach-faq__item {
    border-radius: 13px;
  }

  /* Frage */

  .neeb-dach-faq__question {
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;

    gap: 11px;

    min-height: 82px;
    padding: 17px 16px;
  }

  .neeb-dach-faq__number {
    display: none;
  }

  .neeb-dach-faq__question-text {
    width: 100%;
    max-width: 100%;

    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.38 !important;
    letter-spacing: -0.015em !important;

    text-wrap: pretty !important;
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .neeb-dach-faq__question-text span,
  .neeb-dach-faq__question-text a {
    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Plus-/Minus-Button etwas kleiner */

  .neeb-dach-faq__toggle {
    width: 38px;
    height: 38px;
  }

  .neeb-dach-faq__toggle svg {
    width: 17px;
    height: 17px;
  }

  /* Antwort */

  .neeb-dach-faq__answer-inner {
    margin-right: 16px;
    margin-left: 16px;

    padding-right: 0;
    padding-left: 0;
  }

  .neeb-dach-faq__item[open]
  .neeb-dach-faq__answer-inner {
    padding-top: 20px;
    padding-bottom: 23px;
  }

  .neeb-dach-faq__answer p {
    font-size: 15px;
    line-height: 1.7;

    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 390px) {

  .neeb-dach-faq {
    padding-right: 17px;
    padding-left: 17px;
  }

  .neeb-dach-faq h2 {
    font-size: clamp(26px, 7.7vw, 31px) !important;
    line-height: 1.12 !important;
  }

  .neeb-dach-faq__question {
    grid-template-columns: minmax(0, 1fr) 36px;

    gap: 9px;

    padding: 16px 14px;
  }

  .neeb-dach-faq__question-text {
    font-size: 15.5px !important;
    line-height: 1.4 !important;
  }

  .neeb-dach-faq__toggle {
    width: 36px;
    height: 36px;
  }

  .neeb-dach-faq__answer-inner {
    margin-right: 14px;
    margin-left: 14px;
  }
}/* End custom CSS */