/*
    Theme Name: harter Schaltanlagen
    Theme URI: 
    Author: 
    Author URI: 
    Description: WordPress Theme für harter Schaltanlagen
    Version: 1.0.0
    Requires at least: 6.0
    Tested up to: 6.7
    Requires PHP: 8.2
    Text Domain: harter
    Domain Path: /languages
*/

/* Roboto Font */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter/Inter-VariableFont_opsz,wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Button";
  src: url("assets/fonts/inter/Inter-VariableFont_opsz,wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;

  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}

/* CSS Variables */
:root {
  --maincolor: #0f172b;
  --purple: #312c85;
  --light-purple: #eef2ff;
  --lightgrey: #f8fafc;
  --cyan: #00d3f3;
}

html {
  scrollbar-width: thin;
}

html::-webkit-scrollbar {
  width: 8px;
}

body {
  font-family: "Inter";
  font-size: 18px;
  line-height: 28px;
  display: block;
  margin: 0;
  color: #45556c;
}

body.error404 main {
  padding: 60px 0;
}

h1 {
  font-weight: 700;
  font-size: 72px;
  line-height: 79px;
  letter-spacing: -1.68px;
  margin-bottom: 23px;
  color: var(--maincolor);
}

h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.37px;
  margin-bottom: 16px;
  color: var(--maincolor);
}

h3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.07px;
  margin-bottom: 16px;
  color: var(--maincolor);
  word-break: break-word;
}

header,
footer,
main,
section {
  position: relative;
  display: block;
}

a {
  display: inline-block;
  width: fit-content;
  color: currentColor;
}

p:last-of-type {
  margin-bottom: 0;
}

section {
  padding: 96px 0;
}

img {
  max-width: 100%;
}

hr {
  width: 100%;
}

.container {
  width: 1270px;
  padding: 0 20px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

section.bg-white {
  .accordion-button {
    background-color: #f8fafc;
  }
  .accordion-item {
    border-color: #e2e8f0;
  }
}

.accordion {
  width: 720px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;

  .accordion-header {
    border-radius: 16px;
  }

  .accordion-item {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    font-weight: 600;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
  }

  .accordion-button {
    padding: 20px 24px;
    border-radius: 16px !important;
    background-color: #fff;
    color: #0f172b;
  }

  .accordion-button::after {
    background-size: 15px;
    width: 15px;
    height: 15px;
  }
}

.benefit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 15px;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  margin-top: 30px;

  span {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 17px;
    border-radius: 14px;
  }
}

ul.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;

  li {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

section:has(.tag-cyan) {
  ul.benefits-list {
    svg path:not(path[stroke]) {
      fill: #cefafe;
    }
    svg path[stroke] {
      stroke: #0092b8;
    }
  }
}

form.wpcf7-form {
  display: flex;
  flex-direction: column;
  width: 800px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #f8fafc;
  border: 1px solid #f1f5f9;
  padding: 32px;
  border-radius: 24px;

  p {
    margin-bottom: 20px;
  }

  p:has(input.wpcf7-submit) {
    margin-left: auto;
    display: flex;
    flex-direction: row-reverse;
  }

  label,
  input:not(.wpcf7-submit, [type="checkbox"], [type="radio"]),
  textarea {
    width: 100%;
    max-width: 100%;
  }
  input:not(.wpcf7-submit, [type="checkbox"], [type="radio"]),
  textarea {
    border-radius: 24px;
    padding: 10px 15px;
    border: 1px solid #45556c;
  }
  span.wpcf7-form-control-wrap {
    margin-top: 5px;
    display: block;
  }
}

a.arrow-link {
  margin-top: 30px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
  font-weight: 600;
  text-decoration: none;
  color: #0f172b;
  display: flex;
  align-items: center;

  &:hover {
    text-decoration: underline;
  }

  &::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("/wp-content/themes/harter/assets/img/arrow_dark.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 5px;
  }
}

a.arrow-link.link-violett {
  color: #432dd7;
}

.wpcf7-submit,
button,
.button {
  font-family: "Inter Button";
  display: inline-block;
  width: fit-content;
  text-decoration: none;
  padding: 18px 32px;
  border-radius: 9999px;
  position: relative;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.44px;
  line-height: 1;
  text-align: center;
  border: 2px solid currentColor;
  transition: all 0.2s ease-in-out;

  &.arrow {
    position: relative;
    padding-right: 60px;
  }

  &.btn-blue,
  &.btn-violett,
  &.btn-transparent {
    &.arrow {
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-image: url("/wp-content/themes/harter/assets/img/arrow_white.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: 8px;
      }

      &:hover::after {
        background-image: url("/wp-content/themes/harter/assets/img/arrow_purple.svg");
      }
    }
  }

  &.btn-cyan,
  &.btn-white {
    &.arrow {
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-image: url("/wp-content/themes/harter/assets/img/arrow_purple.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: 8px;
      }
    }

    &.btn-cyan {
      &.arrow {
        &:hover::after {
          background-image: url("/wp-content/themes/harter/assets/img/arrow_cyan.svg");
        }
      }
    }
  }

  &.btn-transparent {
    border-color: #ffffff4d;
    color: #fff;
    background-color: transparent;
    &:hover {
      background-color: #fff;
      color: var(--purple);
    }
  }

  &.btn-cyan {
    color: #1e1a4d;
    background-color: #00b8db;
    box-shadow: 0px 20px 25px -5px #00b8db33;
    border-color: #00b8db;

    &:hover {
      background-color: #1e1a4d;
      color: #00b8db;
    }
  }

  &.btn-blue {
    color: #fff;
    background-color: var(--purple);
    border-color: var(--purple);
    box-shadow: 0px 10px 15px -3px #312c8533;

    &:hover {
      background-color: #fff;
      color: var(--purple);
    }
  }

  &.btn-violett {
    color: #fff;
    background-color: #372aac;
    border-color: #372aac;
    box-shadow: 0px 10px 15px -3px #312c8533;

    &:hover {
      background-color: #fff;
      color: #372aac;
    }
  }

  &.wpcf7-submit,
  &.btn-white {
    border-color: #e2e8f0;
    background-color: #fff;
    color: var(--purple);

    &:hover {
      background-color: #e2e8f0;
    }
  }

  &.btn-fallback {
    border-color: #e2e8f0;
    background-color: #fff;
    color: #0f172b;

    &:hover {
      background-color: #e2e8f0;
    }
  }

  &.btn-slim {
    font-size: 16px;
    line-height: normal;
    letter-spacing: -0.15px;
    padding: 15px 35px;

    &.arrow {
      padding-right: 50px;
    }
    &.arrow::after {
      width: 16px;
      height: 16px;
    }
  }
}

.dark-bg {
  .button,
  button {
    &.btn-blue {
      background-color: #372aac;
      border-color: #fff;
      &:hover {
        background-color: #fff;
        color: #372aac;
      }
    }
    &.btn-white {
      color: var(--purple);
      border-color: #fff;

      &.arrow {
        &:hover::after {
          background-image: url("/wp-content/themes/harter/assets/img/arrow_purple.svg");
        }
      }
    }
  }
}

.button-group {
  gap: 14px;
}

.small-font {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
}

.has-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;

  &.cyan {
    color: #00d3f3;
  }
  &.violett {
    color: #432dd7;
  }
  &.teal {
    color: #007595;
  }
  &.white {
    color: #fff;
  }

  svg {
    width: 18px;
    height: 18px;
    display: inline-block;
  }

  svg path {
    stroke: currentColor;
  }
}

.tag {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  width: fit-content;
  background-color: #e0e7ff;
  color: #372aac;
  border: 1px solid #c6d2ff;
  padding: 7px 13px;
  border-radius: 33554400px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  font-weight: 600;

  &:not(:has(img))::before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    margin: auto 5px auto auto;
    border-radius: 33554400px;
    opacity: 0.87;
    background-color: #4f39f6;
  }

  img {
    height: 14px;
    width: auto;
  }

  &.tag-cyan {
    background-color: #cefafe;
    color: #007595;
    border: 1px solid #cefafe;
  }
}

.dark-bg {
  .tag {
    background-color: #ffffff1a;
    color: #53eafd;
    border: 1px solid #ffffff33;
    &::before {
      background-color: #53eafd;
    }
  }
}

.uppercase-tag {
  display: block;
  position: relative;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.55px;
  font-weight: 700;
  text-transform: uppercase;
  color: #4f39f6;
  text-align: center;
  margin-bottom: 5px;
}

.textcontent.text-center {
  width: 672px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  margin-bottom: 60px;

  .tag {
    margin-left: auto;
    margin-right: auto;
  }
}

img.box-icon {
  aspect-ratio: 1;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  &.violett {
    background-color: #e0e7ff;
  }
  &.cyan {
    background-color: #cefafe;
  }
  &.white {
    background-color: #ffffff1a;
    border: 1px solid #ffffff1a;
  }
  &.green {
    background-color: #d0fae5;
  }
}

header {
  background-color: #f8fafccc;
  padding: 13px 0;
  font-size: 14px;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  /* backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); */
  z-index: 999;

  .logo {
    width: 136px;
  }

  a.navbar-brand {
    height: 100%;
    display: flex;
    align-items: center;
  }

  #main-nav {
    ul {
      margin: auto !important;
    }
    a {
      color: #45556c;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      letter-spacing: -0.15px;
      text-decoration: none;
      padding: 16px;
      position: relative;
    }
    a:hover,
    li.current-menu-item a,
    li.current-menu-parent a {
      font-weight: 600;
    }

    li.current-menu-parent li:not(.current-menu-item) a {
      font-weight: 500;
    }

    .sub-menu {
      position: absolute;
      background-color: #fff;
      padding: 12px 0;
      list-style-type: none;
      display: none;
      top: 100%;
      left: 0;
      z-index: 999;
    }

    li {
      position: relative;
    }

    li:hover .sub-menu {
      display: block;
    }

    .sub-menu li a {
      display: block;
      padding: 10px;
    }
  }

  nav {
    padding: 0;
    height: 100%;
  }

  .buttons-wrap {
    height: 100%;
    align-items: center;
  }
  .button {
    font-size: 14px;
    padding: 10px 24px 11px;
  }

  .button.arrow {
    padding-right: 46px;
  }

  .button.arrow:after {
    right: 18px;
    bottom: 8px;
  }

  .header-link {
    font-weight: 600;
    padding: 10px 16px 11px;
    margin-right: 16px;
    text-decoration: none;
    color: #314158;
  }
}

footer {
  background-color: #0f172b;
  color: #fff;

  img.footer-logo {
    width: 145px;
  }

  a {
    color: #cad5e2;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  h3.footer-col-title,
  h3.footer-col-title > a {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
  }

  h3.footer-col-title {
    margin-bottom: 20px;
  }

  ul.footer-contact {
    svg path {
      fill: #7c86ff;
    }
  }

  ul.footer-sub-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-social a {
    padding: 10px;
    background-color: #1d293d;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  li.footer-contact-item {
    margin-bottom: 14px;
  }

  .footer-text {
    color: #90a1b9;
  }

  .footer-top {
    padding-top: 80px;
    padding-bottom: 30px;
    color: #cad5e2;
  }

  .footer-bottom {
    padding: 30px 0;
    color: #62748e;

    .footer-legal-menu {
      justify-content: end;
    }

    .row {
      row-gap: 14px;
    }

    a {
      color: #62748e;
    }
  }
}

/* TEMPLATE PARTS */

section.bg-grey {
  background-color: #f8fafc;
}

section.bg-lightblue {
  background-color: #eef2ff;
}

section.block-header-mit-bild {
  background-color: #f8fafc;

  &::before {
    content: "";
    background-image: url("/wp-content/themes/harter/assets/img/blur-bottom-left.png");
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: contain; */
    width: 528px;
    height: 528px;
    max-width: 100%;
    max-height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  &::after {
    content: "";
    background-image: url("/wp-content/themes/harter/assets/img/blur-top-right.png");
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: contain; */
    width: 662px;
    height: 528px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }

  .container {
    z-index: 2;
  }

  .row {
    row-gap: 45px;
  }

  .btn-white {
    color: #0f172b;
  }

  h1 {
    span {
      background:
        linear-gradient(90deg, #432dd7 0%, #0092b8 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }

  .img-fluid {
    border-top-left-radius: 96px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 96px;
    box-shadow: 0px 25px 50px -12px #0f172b1a;
  }

  .image-overlay-box {
    padding: 25px 25px 30px 25px;
    box-shadow: 0px 20px 25px -5px #0000001a;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    position: absolute;
    bottom: 30px;
    background-color: #fff;
    left: -47px;

    .overlay-icon {
      padding: 12px;
      background-color: #cefafe;
      border-radius: 33554400px;
      flex-shrink: 0;
    }

    strong {
      font-size: 24px;
      line-height: 1;
      letter-spacing: 0.07px;
      display: block;
    }
    span {
      color: #62748e;
    }
  }

  ul.benefits-list {
    margin-top: 37px;
    gap: 20px;
    flex-direction: row;

    li span {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    li span::before {
      content: "";
      width: 18px;
      height: 18px;
      background-image: url("/wp-content/themes/harter/assets/img/benefits.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  .button-group {
    padding-top: 30px;
  }

  .tag {
    margin-bottom: 22px;
  }
}

section.block-drei-linkboxen {
  .row {
    row-gap: 30px;
  }
  .box-item {
    border-radius: 24px;
    overflow: clip;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;

    &:hover .has-arrow {
      text-decoration: underline;
    }

    &.shadow-,
    &.shadow-shadow {
      box-shadow: 0px 1px 3px 0px #0000001a;
    }

    &.display-normal {
      background-color: #f8fafc;
      h3 {
        color: #0f172b;
      }
    }
    &.display-white {
      background-color: #fff;
      border: 1px solid #e2e8f0;
      h3 {
        color: #0f172b;
      }
    }
    &.display-blue {
      background-color: #312c85;
      color: #e0e7ff;
      h3 {
        color: #fff;
      }
    }

    span.has-arrow {
      margin-top: 23px;
    }

    .thin-tag {
      color: #53eafd;
      font-weight: 500;
      padding-bottom: 10px;
      padding-top: 5px;
      z-index: 2;
      position: relative;
    }

    img.box-icon {
      padding: 12px;
      border-radius: 16px;
      margin-bottom: 30px;
      z-index: 2;
      position: relative;
    }

    h3 {
      margin-bottom: 0;
      z-index: 2;
      position: relative;
    }

    .text-wrap {
      padding: 14px 32px 32px 32px;
      font-size: 16px;
      line-height: 26px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      height: 100%;
    }

    .box-head.has-image + .text-wrap {
      padding: 32px;
    }

    .box-head.has-image {
      padding: 108px 32px 24px 32px;

      h3 {
        color: #fff;
      }

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          0deg,
          rgba(15, 23, 43, 0.8) 0%,
          rgba(15, 23, 43, 0.2) 50%,
          rgba(0, 0, 0, 0) 100%
        );
        z-index: 1;
      }

      img.box-icon {
        margin-bottom: 15px;
      }
    }

    &.display-textoverimage {
      .box-head.has-image {
        aspect-ratio: 395/360;
        &::before {
          content: "";
          display: block;
          position: absolute;
          height: 100%;
          width: 100%;
          background-color: #0f172bb2;
        }
      }
    }

    .box-head {
      position: relative;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 32px 32px 0 32px;
      display: flex;
      flex-direction: column;
      justify-content: end;

      .text-wrap {
        margin-top: 10px;
        padding: 0;
        color: #cad5e2;
        z-index: 2;
        position: relative;
        height: fit-content;
        display: block;
      }

      h3 {
        margin-bottom: 0;
        z-index: 2;
        position: relative;
      }
    }
  }
}

section.block-blaue-infobox {
  background-color: #0f172b;
  color: #90a1b9;

  h1,
  h2,
  h3 {
    color: #fff;
  }

  &::before {
    content: "";
    background-image: url("/wp-content/themes/harter/assets/img/blur-bottom-left-blue.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 600px;
    height: 400px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
  }
  &::after {
    content: "";
    background-image: url("/wp-content/themes/harter/assets/img/blur-top-right-purple.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 800px;
    height: 500px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
  }

  .uppercase-tag {
    color: #00d3f3;
  }

  .textcontent {
    color: #cad5e2;
    position: relative;
    z-index: 2;
  }

  .box-item {
    border: 1px solid #ffffff1a;
    border-radius: 24px;
    padding: 33px;
    height: 100%;
    background: #ffffff0d;

    &.box-right {
      display: flex;
      flex-direction: column;
      gap: 30px;
      justify-content: space-between;
      -webkit-justify-content: space-between;
    }

    img.box-icon {
      margin-bottom: 22px;
      height: 32px;
      width: auto;
      flex-grow: 0;
    }

    img.img-fluid {
      border-radius: 16px;
    }
  }

  .row {
    row-gap: 30px;
  }

  .row > :nth-child(even) .box-item:not(.box-right) {
    background: #312c8566;
    border-color: #615fff33;
  }
}

section.block-iconboxen {
  background-color: #f8fafc;

  .row {
    row-gap: 30px;
  }

  .box-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 33px;
    height: 100%;

    img.box-icon {
      padding: 12px;
      border-radius: 16px;
      margin-bottom: 22px;
    }
  }
}

section.block-zahlen-fakten {
  .row {
    row-gap: 30px;
  }
  .img-fluid {
    border-radius: 24px;
    box-shadow: 0px 25px 50px -12px #00000040;
  }
  .data-item {
    background-color: #f8fafc;
    border-radius: 24px;
    padding: 32px;
    border: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    gap: 10px;

    .data-number,
    .plus {
      font-weight: 800;
      font-size: 48px;
      line-height: 1;
      letter-spacing: -2.05px;
      color: var(--purple);
    }

    .plus {
      margin-top: -7px;
    }

    .data-title {
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      letter-spacing: -0.31px;
    }

    .data-text {
      color: #90a1b9;
    }
  }
}

section.block-kundenstimmen {
  background-color: #f8fafc;

  .row {
    row-gap: 30px;
  }
  span.star {
    font-size: 22px;
  }
  span.star path {
    fill: #fff;
  }
  span.star.star--filled path {
    fill: #ffb900;
  }
  .fst-italic {
    color: #314158;
  }
  .desc {
    color: #62748e;
  }
  .review-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    box-shadow: 0px 10px 15px -3px #e2e8f080;
    border-radius: 24px;
    padding: 32px;
    font-size: 16px;
    line-height: 24px;

    .review-author {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      img.review-image {
        width: 48px;
        height: 48px;
        object-fit: cover;
      }
    }
  }
}

section.block-kontaktbox {
  .row {
    row-gap: 45px;
  }
  .contactbox {
    background-color: #312c85;
    padding: 80px;
    color: #c6d2ff;
    border-radius: 48px;
    overflow: hidden;
    position: relative;
  }
  .contactbox::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("/wp-content/themes/harter/assets/img/circles.webp");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 100%;

    opacity: 0.1;
    pointer-events: none;
  }

  .contactbox > * {
    position: relative;
    z-index: 1;
  }
  h1,
  h2,
  h3 {
    color: #fff;
  }
  iframe {
    border-radius: 24px;
  }
  .button-group {
    margin-top: 30px;
  }
  h2 {
    font-size: 48px;
    line-height: normal;
  }
  button,
  .button {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
  }
}

section.block-blauer-header {
  background:
    linear-gradient(135deg, #312c85 0%, #1e1a4d 50%, #0f172b 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  color: #e0e7ff;

  h1,
  h2,
  h3 {
    color: #fff;
  }

  .tag {
    margin-bottom: 38px;

    &::before {
      display: none;
    }
  }

  .textcontent.text-center {
    max-width: 100%;
    width: 896px;
    margin-left: auto;
    margin-right: auto;
  }

  .button-group {
    margin-top: 38px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}

section.block-drei-bildboxen {
  .row {
    row-gap: 30px;
  }
  .textbox-wrap {
    .textbox {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      background-color: #e0e7ff;
      color: #fff;
      padding: 60px 32px;
      border-radius: 40px;
      display: flex;
      flex-direction: column;
      justify-content: end;
      position: relative;
      font-size: 24px;
      line-height: 30px;
      font-weight: 700;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
      }

      > * {
        position: relative;
        z-index: 2;
      }
    }

    &:nth-child(1) .textbox::before {
      background: linear-gradient(
        0deg,
        rgba(49, 44, 133, 0.8) 0%,
        rgba(15, 23, 43, 0.4) 50%,
        rgba(0, 0, 0, 0) 100%
      );
    }

    &:nth-child(2) .textbox::before {
      background: linear-gradient(
        0deg,
        rgba(16, 78, 100, 0.8) 0%,
        rgba(15, 23, 43, 0.4) 50%,
        rgba(0, 0, 0, 0) 100%
      );
    }

    &:nth-child(3) .textbox::before {
      background: linear-gradient(
        0deg,
        rgba(15, 23, 43, 0.8) 0%,
        rgba(15, 23, 43, 0.4) 50%,
        rgba(0, 0, 0, 0) 100%
      );
    }
  }
}

section.block-portfolio {
  background-color: #f8fafc;

  .row {
    row-gap: 20px;
  }

  .portfolio-item {
    text-decoration: none;
    border-radius: 40px;
    overflow: hidden;
    border: 1px solid #e0e7ff;
    padding: 33px;
    height: 100%;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;

    &:not(.index-0, .index-1) h3 {
      font-size: 20px;
      line-height: 28px;
      letter-spacing: -0.45px;
    }

    h3 {
      margin-bottom: 12px;
    }

    button,
    .button {
      margin-top: 18px;

      &.btn-transparent {
        padding: 0;
      }

      &.btn-white {
        box-shadow: 0px 1px 3px 0px #0000001a;
        border-color: #fff;
      }

      &.btn-white:hover {
        border-color: #fff;
      }
      &.btn-transparent {
        &:hover {
          background-color: transparent;
        }
      }
    }

    &.bg-white {
      box-shadow: 0px 1px 3px 0px #0000001a;
    }

    &.bg-blue,
    &.bg-green {
      img.box-icon {
        background-color: #fff;
      }
    }

    &.bg-green {
      background-color: #ecfeff;
      border-color: #cefafe;

      .btn-transparent,
      .btn-white {
        color: #007595;
      }
      .btn-transparent::after {
        background-image: url("/wp-content/themes/harter/assets/img/arrow_green.svg");
      }
      .btn-white {
        &.arrow {
          &::after {
            background-image: url("/wp-content/themes/harter/assets/img/arrow_green.svg");
          }
        }
      }
    }

    &.bg-blue {
      background-color: #e0e7ff;
      color: #372aaccc;

      .btn-transparent {
        color: var(--purple);
      }
      .btn-transparent::after {
        background-image: url("/wp-content/themes/harter/assets/img/arrow_purple.svg");
      }
    }
  }
  .portfolio-item:has(> img:only-child) {
    padding: 0;
  }
  .img-fluid {
    border-radius: 16px;
    height: 100%;
    object-fit: cover;
  }
  a.portfolio-item:has(.img-fluid) {
    display: flex;
    gap: 20px;
    align-items: start;
    flex-wrap: wrap;
  }
  a.portfolio-item:has(.img-fluid) > * {
    min-width: 0;
    flex: 1 1 0;

    &.img-fluid {
      flex: 1 0 0;
    }
  }

  img.box-icon {
    padding: 12px;
    border-radius: 16px;
    margin-bottom: 15px;
    background-color: #f1f5f9;
    box-shadow: 0px 1px 3px 0px #0000001a;
  }
}

section.block-bild-und-text {
  .row {
    row-gap: 60px;
  }
  .tag {
    margin-bottom: 20px;
  }
  h2 {
    margin-bottom: 20px;
  }
  .image-wrap {
    border-radius: 48px;

    img {
      border-radius: 40px;
      box-shadow: 0px 25px 50px -12px #00000040;
      /* aspect-ratio: 552/414; */
    }

    &.ratio-rectangle img,
    &.ratio- img {
      aspect-ratio: 1;
      object-fit: cover;
    }

    &.frame-frame,
    &.frame- {
      padding: 16px;
    }
  }
  &:has(.tag-cyan) {
    .image-wrap:not(.frame-noframe) {
      background-color: #ecfeff;
    }
  }
  &:has(.tag-violett) {
    .image-wrap:not(.frame-noframe) {
      background-color: #eef2ff;
    }
  }
  p + ul {
    margin-top: 30px;
  }
}

section.block-faq {
  a.button {
    margin-top: 15px;
  }
  .textcontent.text-center.mb-0 {
    margin-top: 45px;
    width: 720px;
  }
  .textbox {
    background-color: #eef2ff;
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    text-align: left;

    p.footer-text {
      font-weight: 700;
      color: #0f172b;
      margin-bottom: 5px;
    }

    p.footer-textarea {
      margin-bottom: 0;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.31px;
      font-weight: 400;
    }

    a.button {
      margin-top: 0;
    }
  }
}

section.block-image-portfolio {
  img.box-icon {
    padding: 12px;
    border-radius: 16px;
    margin-bottom: 15px;
    background-color: #f1f5f9;
  }

  .row {
    row-gap: 48px;
  }

  h3 {
    margin-bottom: 10px;
  }

  .img-fluid {
    border-radius: 48px;
    box-shadow: 0px 25px 50px -12px #00000040;
  }
}

@media (min-width: 992px) {
  .container {
    --bs-gutter-x: 30px;
  }

  .row {
    --bs-gutter-x: 30px;
  }

  section.block-header-mit-bild {
    .row,
    .container {
      --bs-gutter-x: 55px;
    }
  }
  section.block-zahlen-fakten {
    .row,
    .container {
      --bs-gutter-x: 45px;
    }
  }
  section.block-bild-und-text {
    .container,
    .row {
      --bs-gutter-x: 60px;
    }
  }
  section.block-image-portfolio {
    .container,
    .row:not(.benefits-list) {
      --bs-gutter-x: 60px;
    }
  }
}

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
  h1 {
    font-size: 44px;
    line-height: 53px;
    word-break: break-word;
    letter-spacing: -0.85px;
  }

  h2 {
    font-size: 30px;
    line-height: 37.5px;
    letter-spacing: 0.4px;
  }

  main {
    margin-top: 83px;
  }

  /* body:has(button.navbar-toggler[aria-expanded="true"]) {
    overflow: hidden;
    height: 100vh;
  } */

  header:has(button.navbar-toggler[aria-expanded="true"]) {
    background-color: #fff;
  }

  header {
    position: fixed;
    width: 100%;
    height: 82px;
    display: flex;
    align-items: center;
    padding: 12px 0;

    button.navbar-toggler {
      padding: 0;
      border: none;
      height: 40px;
      width: 40px;
    }

    .navbar-toggler[aria-expanded="false"] {
      .navbar-toggler-icon {
        display: none;
      }
    }

    .navbar-toggler[aria-expanded="true"] {
      img.menu-toggler {
        display: none;
      }
      .navbar-toggler-icon {
        background-image: none;
        position: relative;
      }

      .navbar-toggler-icon::before,
      .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 24px;
        height: 2px;
        background-color: currentColor;
        transform-origin: center;
      }

      .navbar-toggler-icon::before {
        transform: translate(-50%, -50%) rotate(45deg);
      }

      .navbar-toggler-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }

    a.navbar-brand,
    button.navbar-toggler {
      z-index: 99;
      position: relative;
    }
    #main-nav {
      position: fixed;
      top: 82px;
      max-height: calc(100vh - 82px);
      left: 0;
      width: 100%;
      overflow: auto;
      z-index: 98;
      padding: 15px 20px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #0f172b;
      color: #cad5e2;
      border-bottom: 1px solid #cad5e2;

      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

      &.show {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      ul.navbar-nav {
        gap: 25px;
      }

      ul:not(.sub-menu) {
        height: fit-content;
        width: 100%;
        padding: 12.5px 16px;
      }

      ul:not(.sub-menu) > li > a {
        font-size: 20px;
      }

      .sub-menu li a {
        padding: 10px 0;
      }

      .sub-menu {
        position: relative;
        display: block;
        top: unset;
        left: unset;
        background-color: #0f172b;
        padding: 12px 0 0 0;
      }

      li.current-menu-item a,
      li.current-menu-parent a {
        text-decoration: underline;
      }

      a:not(.button) {
        width: 100%;
        padding: 0;
        line-height: normal;
        color: #cad5e2;
      }
    }
  }

  footer {
    ul.footer-sub-menu {
      gap: 15px;
    }
    .footer-col {
      margin-top: 45px;
    }
    .footer-top {
      padding-bottom: 45px;
    }
    .footer-bottom {
      padding: 30px 0 40px 0;
    }
    .mb-2 {
      margin-bottom: 15px !important;
    }
  }

  section.block-kontaktbox {
    h2 {
      font-size: 36px;
      line-height: 40px;
      letter-spacing: 0.37px;
    }
  }

  section.block-kontaktbox {
    .contactbox {
      padding: 48px;
    }
  }
}

@media (max-width: 767.98px) {
  section.block-header-mit-bild {
    padding-bottom: 45px;

    button,
    .button {
      width: 100%;
    }
    .image-wrapper {
      padding-bottom: 30px;
    }
    .img-fluid {
      border-top-left-radius: 24px;
      border-bottom-right-radius: 24px;
    }
    .image-overlay-box {
      left: -20px;
      bottom: 0;
    }
  }
  section.block-blauer-header {
    button,
    .button {
      width: 100%;
    }
  }
  section.block-zahlen-fakten {
    .row.data-items-row {
      margin-bottom: 15px;
    }
    .data-item {
      flex-direction: column;
      justify-content: start;
      align-items: start;
    }
  }
  section.block-portfolio {
    a.portfolio-item:has(.img-fluid) {
      flex-direction: column;
    }
  }
  section.block-faq {
    .textbox {
      a.button {
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}

@media (max-width: 575.98px) {
}