:root {
  --accent-color: #002642;
  --secondary-color: #e50071;
  --tertiary-color: #c0e0ff;
  --hover-color: #5784e6;
  --background-dg-color: #535353;
  --background-lg-color: #f0ecec;
  --background-btn-lg-color: #f0f0f0;
  --text-color-wh: #ffffff;
  --text-color-dk: #444444;
  --headline-color: #121212;
  --btn-lg-color: rgba(0, 4, 8, 0.05);
  --btn-dg-color: rgba(255, 255, 255, 0.1);
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
  --cs-theme-button-border-radius: 2;
}
/* Fonts */
@font-face {
  font-family: "Outfit Light";
  src: url("/assets/fonts/outfit/Outfit-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Outfit Regular";
  src: url("/assets/fonts/outfit/Outfit-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Outfit Medium";
  src: url("/assets/fonts/outfit/Outfit-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Outfit SemiBold";
  src: url("/assets/fonts/outfit/Outfit-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Outfit Bold";
  src: url("/assets/fonts/outfit/Outfit-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Outfit Black";
  src: url("/assets/fonts/outfit/Outfit-Black.ttf") format("truetype");
}
h1.header-title-start,
p.header-title-noh {
  font-family: Outfit Regular, sans-serif !important;
  font-size: 3.75rem !important;
  line-height: 150%rem !important;
  color: var(--text-color-wh) !important;
  padding-bottom: 2rem !important;
}
/* End Fonts */
/* Sektionen */
.section-dk h1,
.section-dk h2,
.section-dk h3,
.section-dk h4,
.section-dk h5,
.section-dk h6,
.section-dk p,
.section-dk a,
.section-dk li {
  color: var(--text-color-wh);
}
.section-lg h1,
.section-lg h2 {
  color: var(--accent-color);
}
.section-lg h2,
.section-lg h3 {
  font-family: Outfit Medium, sans-serif;
  font-size: 2.19rem;
  line-height: 120%;
  color: var(--text-color-dk);
}
.section-lg p,
.section-lg li {
  font-family: Outfit Light, sans-serif;
  font-size: 1.25rem;
  line-height: 120%;
  color: var(--text-color-dk);
}
.section-dk p {
  font-family: Outfit Light, sans-serif;
  font-size: 1.25rem;
  line-height: 120%;
  color: var(--text-color-wh);
}
h1,
h2,
h3 {
  font-family: Outfit Medium, sans-serif;
  font-size: 2.5rem;
  color: var(--accent-color);
}
h1.v-line,
h2.v-line,
h3.v-line {
  font-family: Outfit Medium, sans-serif;
  font-size: 2.5rem;
  color: var(--accent-color);
}
h2.line-alt-p,
h2.line-alt-d,
h3.line-alt-p,
h3.line-alt-d {
  color: var(--text-color-wh);
}
h4 {
  font-family: Outfit Medium, sans-serif;
  font-size: 1.8rem;
  color: var(--text-color-wh);
}
/* Basis: Platz für Linie */
.v-line {
  position: relative;
  padding-left: 23px; /* 5px Linie + 18px Abstand */
}

/* Linie: initial unsichtbar, kein Autostart */
.v-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0; /* volle Höhe der Headline */
  width: 5px;
  background-color: var(--secondary-color);
  transform: scaleY(0); /* zusammengeklappt */
  transform-origin: bottom;
  opacity: 0; /* unsichtbar */
}
.v-line.line-alt-p::before {
  background-color: var(--tertiary-color);
}
.v-line.line-alt-d::before {
  background-color: var(--secondary-color);
}

/* Sichtbar-Zustand: jetzt erst animieren */
.v-line.is-visible::before {
  animation: lineFadeIn 1s ease-out forwards;
}

@keyframes lineFadeIn {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* Optional: Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  .v-line::before,
  .v-line.is-visible::before {
    animation: none;
    transform: scaleY(1);
    opacity: 1;
  }
}

/* End Sektionen */
/* Flex Boxen */
.flex-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* End Flex Boxen */
/* Gradient */
.cs-gradient {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 65, 113, 1) 50%,
    rgba(0, 0, 0, 1) 100%
  );
}
/* Buttons */
.cta-blue-lg {
  background: var(--tertiary-color);
  color: var(--accent-color) !important;
  border: none !important;
  font-family: Outfit Medium, sans-serif;
  font-size: 1.25rem;
  padding: 10px 24px;
}
.cta-blue-dk {
  background: var(--accent-color);
  color: var(--text-color-wh);
  border: none !important;
  font-family: Outfit Medium, sans-serif;
  font-size: 1.25rem;
  padding: 10px 24px;
}
.cta-blue-pk {
  background: var(--secondary-color);
  color: var(--text-color-wh);
  border: none !important;
  font-family: Outfit Medium, sans-serif;
  font-size: 1.25rem;
  padding: 10px 24px;
}
/* Hover (Desktop) */
.cta-blue-dk:hover,
.cta-blue-pk:hover {
  background: var(--hover-color);
}
.cta-blue-lg:hover {
  background: var(--accent-color);
  color: var(--text-color-wh) !important;
}
/* Focus (Barrierefreiheit) */
.section-wh .cta-kontakt:focus {
  background: #00000040;
  outline: 2px solid #f97316; /* kontrastreicher Rahmen */
  outline-offset: 2px;
}

/* Active (Desktop + Mobile Touch) */
.section-wh .cta-kontakt:active {
  background: var(--eyebrow-color);
  color: #fff;
  transform: scale(0.98); /* kleiner gedrückt-Effekt */
}
.section-bl .cta-kontakt {
  background: var(--btn-dg-color);
  color: var(--text-color-wh);
  border: none !important;
  font-family: Outfit SemiBold, sans-serif;
  font-size: 1rem;
  padding: 10px 24px;
}
/* Hover (Desktop) */
.section-bl .cta-kontakt:hover {
  background: #00000040;
}

/* Focus (Barrierefreiheit) */
.section-bl .cta-kontakt:focus {
  background: #00000040;
  outline: 2px solid #f97316; /* kontrastreicher Rahmen */
  outline-offset: 2px;
}

/* Active (Desktop + Mobile Touch) */
.section-bl .cta-kontakt:active {
  background: var(--eyebrow-color);
  color: #fff;
  transform: scale(0.98); /* kleiner gedrückt-Effekt */
}
/* * */
.cta-kontakt-overlay {
  background: var(--text-color-wh);
  color: var(--text-color-bk) !important;
  border: none !important;
  font-family: Outfit SemiBold, sans-serif !important;
  font-size: 1rem;
  padding: 10px 24px;
}
/* Hover (Desktop) */
.cta-kontakt:hover {
  background: #00000040;
}

/* Focus (Barrierefreiheit) */
.cta-kontakt:focus {
  background: #00000040;
  outline: 2px solid #f97316; /* kontrastreicher Rahmen */
  outline-offset: 2px;
}

/* Active (Desktop + Mobile Touch) */
.cta-kontakt:active {
  background: var(--eyebrow-color);
  color: #fff;
  transform: scale(0.98); /* kleiner gedrückt-Effekt */
}

/* End Buttons */
/* Infobox */
.cs-infobox .et_pb_main_blurb_image {
  margin-bottom: 20px;
}
.cs-infobox .et_pb_blurb_description p {
  font-family: Outfit Medium, sans-serif;
  font-size: 1.5rem;
  line-height: 140%;
  color: var(--accent-color);
  padding-bottom: 20px;
}
/* End Infobox */
/* Footer */
img.footer-sm-img {
  width: 60px;
  height: auto;
}
.footer-top h2 {
  font-family: Outfit Medium, sans-serif;
  font-size: 2rem;
  line-height: 140%;
  color: var(--text-color-wh);
}
.footer-top p,
.footer-top a {
  font-family: Outfit Light, sans-serif;
  font-size: 1.25rem;
  line-height: 120%;
  color: var(--text-color-wh);
}
.footer-bottom p,
.footer-bottom a {
  font-family: Outfit Light, sans-serif;
  font-size: 0.9rem;
  line-height: 120%;
  text-align: center;
  color: var(--text-color-wh);
  padding: 0 10px;
}
/* End Footer */
/* Kontakt */
.cs-kontakt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.cs-kontakt-item img {
  width: 40px;
}
/* End Kontakt */
/* Flex Container */
.cs-flex-container {
  display: flex;
  gap: 20px;
}
/* End Flex Container */
/* Counter */
span.percent-value {
  font-family: Outfit SemiBold, sans-serif;
  font-size: 4.5rem;
}
/* End Counter */
/* Nav */
#menu-main > li > a {
  font-family: Outfit Regular, sans-serif;
  font-size: 1.25rem;
  color: var(--text-color-wh);
}
#menu-main > li.current-menu-item > a,
#menu-main > li.current-menu-ancestor > a {
  color: var(--secondary-color) !important;
}
/* End Nav */
/* Mobiles Menu */
/*changing the Divi hamburger menu to X*/
.mobile_nav.opened .mobile_menu_bar:before {
  content: "\4d";
}
/*rotating the Divi Menu icon*/

.mobile_menu_bar:before {
  transition: all 0.4s ease;
  transform: rotate(0deg);
  display: block;
}

/*rotate the Divi Menu icon on click*/

.mobile_nav.opened .mobile_menu_bar::before {
  transition: all 0.4s ease;
  transform: rotate(90deg);
  display: block;
}

/* Remove the top line in the mobile menu*/
.et_mobile_menu {
  border-top: 0;
}

/*making the Divi Menu full width*/
.et_pb_menu .et_mobile_menu {
  min-width: 105vw;
  padding-top: 5% !important;
  margin-left: -85vw;
  margin-top: 45px;
}

/*removing the line from the menu items and adding line height*/

.et_mobile_menu li a {
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--secondary-color) !important;
}
/*removing padding of the social media icons*/
.et_mobile_menu li li {
  padding-left: 0% !important;
}
#mobile_menu2 > li:nth-child(odd) > a {
  background: var(--quaternary-color);
}
@media (max-width: 980px) {
  .et_pb_menu .et_mobile_menu,
  .et_pb_menu .et_mobile_menu ul {
    text-align: center;
  }
}
header .mobile_menu_bar:before {
  color: var(--secondary-color) !important;
}
/* End Mobiles Menu */
/* Silbentrennung */
/* Basis: deutsche Silbentrennung überall erlauben */
html {
  word-break: normal;
}

body,
.entry-content,
p,
li,
blockquote,
figcaption {
  hyphens: auto;
  -webkit-hyphens: auto; /* Safari */
  -ms-hyphens: auto; /* älteres Edge/IE (falls relevant) */
  overflow-wrap: break-word; /* Fallback für sehr lange Wörter/URLs */
}

/* Überschriften: nur auf kleinen Screens trennen, damit sie nicht unschön umbrechen */
@media (max-width: 768px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Dinge, die NICHT getrennt werden sollen (Menüs, Buttons, Code, Tabellen etc.) */
a,
nav,
.menu,
button,
.btn,
code,
pre,
kbd,
samp,
th,
td {
  hyphens: none;
  -webkit-hyphens: none;
}

/* End Silbentrennung */
/* Legende Diagramm */
.wrapper-legende {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.legende {
  display: flex;
  align-items: center;
  gap: 10px;
}
.legende > img {
  width: 75px;
  height: auto;
}
.legende > p {
  font-family: Outfit Regular, sans-serif;
  font-size: 2rem;
  color: var(--text-color-dk);
}
/* End Legende Diagramm */
/* Akkordeon */
/* 1) Divi-Standardicon neben dem Titel verbergen */
.sr-accordion .et_pb_toggle_title:before {
  display: none !important;
}

/* 2) Eigener Pfeil: Grundzustand (geschlossen) – zeigt nach unten */
.sr-accordion .et_pb_toggle_title {
  position: relative;
  padding-right: 2rem; /* Platz für den Pfeil rechts */
  cursor: pointer;
}

.sr-accordion .et_pb_toggle_title::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg); /* ↘︎ = Pfeil nach unten */
  transition: transform 200ms ease;
  opacity: 0.9;
  margin-right: 20px;
}

/* 3) Geöffnet: Pfeil nach oben (Rotation) */
.sr-accordion .et_pb_toggle_open .et_pb_toggle_title::after {
  transform: translateY(-50%) rotate(-135deg); /* ↖︎ = Pfeil nach oben */
}
h5.et_pb_toggle_title {
  font-family: Outfit Regular, sans-serif;
  font-size: 1.25rem !important;
  line-height: 150%;
  color: var(--text-color-wh);
  padding: 20px !important;
}
/* Akkordeon mit eigener Klasse */
.sr-acc-color .et_pb_toggle {
  border: 1p solid var(--text-color-wh);
  overflow: hidden;
  margin-bottom: 12px;
  background: transparent !important; /* Divi-Default ausschalten */
}
.et_pb_toggle_close {
  padding: 0;
}
.et_pb_toggle_open {
  padding: 0;
}
/* Titelzeile (geschlossen & geöffnet identisch) */
.sr-acc-color .et_pb_toggle_title {
  display: block;
  background: var(--accent-color); /* Hintergrund Titel */
  color: var(--text-color-wh) !important; /* Textfarbe Titel */
  padding: 16px 20px;
  position: relative;
  transition: background-color 0.2s ease; /* sanfter Übergang */
}

/* Hover-Effekt für die Titelzeile */
.sr-acc-color .et_pb_toggle_title:hover {
  background: var(--hover-color); /* etwas dunkleres Grau bei Hover */
  cursor: pointer;
}

/* Inhaltspanel (nur sichtbar, wenn geöffnet) */
.sr-acc-color .et_pb_toggle_content {
  background: #ffffff; /* Hintergrund Inhalt */
  color: var(--text-color-dk); /* Textfarbe Inhalt */
  padding: 16px 20px 20px;
  border-top: 1px solid #ddd;
}

/* End Akkordeon */
/* Feature Liste */
.feature-list-title {
  font-family: Outfit Medium, sans-serif;
  font-size: 1.56rem !important;
  text-align: center;
  line-height: 120% !important;
  color: var(--accent-color);
}
.feature-list-text {
  font-family: Outfit Regular, sans-serif !important;
  font-size: 1.25rem !important;
  line-height: 120% !important;
  color: var(--accent-color);
  text-align: center;
}
/* End Feature Liste */
/* Custom List */
.custom-ordered-list {
  display: flex;
  gap: 10px;
}
.custom-ol-count {
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  background: var(--accent-color);
}
.custom-ol-count p {
  font-family: Outfit Bold, sans-serif;
  color: var(--text-color-wh);
}
.custom-ol-content {
  display: flex;
  height: 50px;
  align-items: center;
  background: var(--secondary-color);
  width: 100%;
}
.custom-ol-content p {
  color: var(--text-color-wh);
  line-height: 110% !important;
  padding-left: 15px;
  padding-right: 10px;
}
/* End Custom List */
/* Aktion */
p.header-aktion {
  font-family: Outfit Bold, sans-serif;
  font-size: 1.56rem;
  color: var(--text-color-wh);
  background: var(--secondary-color);
  padding: 4px 6px;
  margin-bottom: 15px;
}
.section-lg h1.xl-headline,
.section-lg h2.xl-headline {
  font-size: 3.75rem !important;
}

.slash-diag {
  position: relative;
  display: inline-block; /* passt sich der Ziffernbreite an */
  line-height: 1; /* saubere Ausrichtung */
}

.slash-diag::after {
  content: "";
  position: absolute;
  left: -10%; /* etwas überstehen lassen */
  right: -10%;
  top: 50%;
  height: 2px; /* Strichdicke */
  background: var(--secondary-color);
  transform: rotate(-18deg); /* Neigung des Strichs */
  transform-origin: center;
  pointer-events: none;
}
.aktionspr-wrapper {
  display: flex;
  gap: 20px;
  align-items: center;
}
p.aktionspr-item1 {
  padding-bottom: 0;
  font-family: Outfit Light, sans-serif;
  font-size: 1.56rem;
  color: var(--accent-color);
}
p.aktionspr-item2 {
  font-family: Outfit Bold, sans-serif;
  font-size: 2.8rem;
  color: var(--text-color-wh);
  background: var(--secondary-color);
  padding: 5px 12px 6px !important;
}
.aktionscta-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
/* End Aktion */
/* Filter */
div.acf-view__field {
  font-size: 0.75rem !important;
  margin-bottom: 12px;
}
a.dp-dfg-filter-link.a {
  border-left: none !important;
}
a.dp-dfg-filter-link.z {
  border-right: none !important;
}

a.dp-dfg-filter-link {
  border-top: none !important;
  border-bottom: none !important;
  background: var(--accent-color) !important;
  color: var(--text-color-wh) !important;
}
.dp-dfg-filters a {
  font-family: Outfit Bold !important;
  font-size: 0.7rem !important;
}
p.acf-view__erklaerung-field.acf-view__field {
  font-size: 1.1rem !important;
}
/* End Filter */
/* Flyout Buttons */
#btn1 img {
  width: 60px !important;
  height: auto !important;
  padding: 12px 12px 12px 12px;
}
#btn2 img {
  width: 60px !important;
  height: auto !important;
  padding: 10px 10px 10px 10px;
}
#btn3 img {
  width: 60px !important;
  height: auto !important;
  padding: 10px 10px 10px 10px;
}
#btn1 {
  top: 25%;
  background-color: #c0e0ff;
  margin-bottom: 6px;
}
#btn1 p {
  color: var(--accent-color);
}
#btn2 {
  top: calc(25% + 66px);
  background-color: #c0e0ff;
  margin-bottom: 6px;
}
#btn2 p {
  color: var(--accent-color);
}
#btn3 {
  top: calc(25% + 132px);
  background-color: var(--accent-color);
}
#btn3 p {
  color: var(--text-color-wh);
}
div.button-f {
  z-index: 999;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* background-color: #4E5055; */
  color: #fff;
  width: 340px;
  height: 60px;
  position: fixed;
  right: -281px;
  transition: 0.7s ease;
}
div.button-f p {
  font-family: OpenSans Bold, sans-serif;
  font-style: normal;
  font-size: 16px;
  color: #fff;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0;
}
div.button-f:hover {
  background-color: #4e5055;
  color: #fff;
  position: fixed;
  right: -50px;
  width: 300px;
  height: 60px;
  border-radius: 0px;
}
div.button-f:active {
  background-color: #2c3e50;
  transition: 0s;
  color: #fff;
}
@media all and (max-width: 980px) {
  a.flyout-btn {
    display: none;
  }
}
/* End Flyout Buttons */