/* =========================================================
   ZENTRALE DESIGN-VARIABLEN
   Farben, Schriften und wiederkehrende Basiswerte
   ========================================================= */

:root {
  /* Original-inlingua-Farbvariablen */
  --black: #000000;
  --white: #ffffff;
  --primary: #f0b334;
  --secondary: #37c0aa;
  --blue: #7a93a8;
  --grey-1: #666666;
  --grey-2: #78766d;
  --grey-3: #ededed;

  --button-primary-background-color: #f0b334;
  --button-primary-text-color: #000000;
  --button-primary-hover-background-color: #7494aa;
  --button-primary-hover-text-color: #000000;
  --button-secondary-background-color: #37c0aa;
  --button-secondary-text-color: #103831;
  --button-secondary-hover-background-color: #7494aa;
  --button-secondary-hover-text-color: #ffffff;

  /* Unsere semantischen Aliase */
  --color-text: var(--black);
  --color-text-strong: #111111;
  --color-white: var(--white);
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  --color-hover: var(--button-primary-hover-background-color);

  --color-bg-muted: var(--grey-3);
  --color-bg-soft: #f5f5f5;
  --color-bg-active: #f1f1f1;

  --color-border: #cfcfcf;
  --color-border-focus: #b8b8b8;
  --color-border-light: #d8d8d8;
  --color-border-menu: #e3e3e3;
  --color-footer: var(--grey-1);

  /* Schriften */
  --font-body: "lato-light", "Lato", sans-serif;
  --font-ui: "lato", "Lato", sans-serif;
  --font-button: "Lato", sans-serif;

  /* Typografie */
  --font-size-body: 18px;
  --font-size-body-mobile: 16px;
  --font-size-ui: 16px;
  --font-size-small: 14px;
  --font-size-button: 16px;
  --font-size-button-mobile: 14px;
  --font-size-subheadline: 20px;
  --font-size-subheadline-mobile: 18px;
  --font-weight-button: 700;

  /* Standard-/Hero-CTA: entspricht dem visuellen Original-Button */
  --button-line-height: 1.2;
  --button-letter-spacing: normal;
  --button-word-spacing: 0px;
  --button-text-transform: uppercase;
  --button-padding-y: 6px;
  --button-padding-x: 18px;
  --button-min-height: 40px;
  --button-margin-top: 5px;
  --button-transition: all 0.3s ease;

  /* Kartenraster-CTA: aus den gelieferten Computed Styles des Originals */
  --card-button-font-size: 14px;
  --card-button-line-height: 21px;
  --card-button-padding-y: 10px;
  --card-button-padding-x: 20px;
  --card-button-word-spacing: 0.8px;

  /* Komponenten */
  --form-control-min-height: 52px;
  --form-radius: 4px;
  --section-padding-default: 80px;

  /* Referenzbreiten der Originalseite bei Desktop */
  --content-max-cards: 1368px;
  --content-max-two-cols: 930px;
  --two-cols-gap-small: 60px;
  --two-cols-gap-medium: 110px;
  --two-cols-gap-large: 150px;

  /* Effekte */
  --scroll-animation-duration: 0.8s;
  --dropdown-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   GLOBAL / BASIS
   ========================================================= */

a{
  cursor: pointer;
}
.title-wrapper{
  margin: 0 auto 25px;
}

.text-content{
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 160%;
  margin: 0 auto 25px;
}

.text-black{
  color: var(--color-text);
}

.text-white{
  color: var(--color-white);
}


/* =========================================================
   TYPOGRAFIE / HEADLINES
   ========================================================= */

.title-wrapper h1,
.title-wrapper h2 {
  font-size: 50px;
  font-weight: 400;
}

.title-wrapper h2 {
  line-height: 140%;
}

.title-wrapper h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-subheadline);
  font-weight: 300;
  line-height: 140%;
}

/* Überschriftenabstände zentral steuern statt Theme-Default-Margins zu addieren. */
.title-wrapper > h1,
.title-wrapper > h2,
.title-wrapper > h3 {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 1440px) {
  .title-wrapper h2 {
    font-size: 40px !important;
  }

  .title-wrapper h3 {
    font-size: var(--font-size-subheadline) !important;
  }
}


@media (max-width: 768px) {
  .title-wrapper h3 {
    font-size: var(--font-size-subheadline-mobile) !important;
  }
}


/* =========================================================
   BUTTONS
   ========================================================= */

button{
  font-size: var(--font-size-button);
  line-height: var(--button-line-height);
}

/* Gemeinsame Button-Basis.
   WICHTIG: Das Original verwendet je nach Komponente unterschiedliche
   Button-Metriken. Der Hero/Standard-CTA ist groesser als die Buttons
   im Kartenraster. Deshalb hier nur die gemeinsame Basis definieren. */
.custom__button{
  font-family: var(--font-button);
  font-weight: var(--font-weight-button);
  font-size: var(--font-size-button);
  font-style: normal;
  line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing);
  word-spacing: var(--button-word-spacing);
  text-transform: var(--button-text-transform);
  text-align: center;
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 339px;
  min-height: var(--button-min-height);

  margin-top: var(--button-margin-top);
  padding: var(--button-padding-y) var(--button-padding-x);

  box-sizing: border-box;
  border: none;
  cursor: pointer;
  transition: var(--button-transition);
}

.custom__button.is-hidden{
  display: none;
}

.custom__button.align-left{
  margin-left: 0;
  margin-right: auto;
}

.custom__button.align-center{
  margin-left: auto;
  margin-right: auto;
}

.custom__button.align-right{
  margin-left: auto;
  margin-right: 0;
}

.primary_btn{
  background: var(--button-primary-background-color);
  color: var(--button-primary-text-color);
}

.primary_btn:hover{
  background: var(--button-primary-hover-background-color);
  color: var(--button-primary-hover-text-color);
}

.secondary_btn{
  background: var(--button-secondary-background-color);
  color: var(--button-secondary-text-color);
}

.secondary_btn:hover{
  background: var(--button-secondary-hover-background-color);
  color: var(--button-secondary-hover-text-color);
}

.custom__button.primary_btn:link,
.custom__button.primary_btn:visited {
  color: var(--button-primary-text-color);
}

.custom__button.secondary_btn:link,
.custom__button.secondary_btn:visited {
  color: var(--button-secondary-text-color);
}

.custom__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .custom__button{
    font-size: var(--font-size-button-mobile);
  }
}


/* =========================
   inCMS Formular im sb-headline Wrapper
   ========================= */

.incms-form,
.incms-form form {
  width: 100%;
}

/* Feldgruppen */
.myformchild {
  margin-bottom: 22px;
}

/* Labels */
.incms-form-item-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: var(--font-size-ui);
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-text);
}

/* Tooltips neben Labels nicht verschieben */
.incms-form-item-label .tooltip {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

/* Standard-Felder */
.incms-form-field:not([type="checkbox"]):not([type="radio"]),
.incms-form-element textarea.incms-form-field,
.incms-form-element select.incms-form-field {
  width: 100%;
  min-height: var(--form-control-min-height);
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--form-radius);
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--font-size-ui);
  line-height: 1.4;
  color: var(--color-text);
  box-shadow: none;
}

/* Textarea */
textarea.incms-form-field {
  min-height: 180px;
  resize: vertical;
}

/* Fokus */
.incms-form-field:not([type="checkbox"]):not([type="radio"]):focus,
textarea.incms-form-field:focus, select.incms-form-field:focus {
  outline: none;
  border-color: var(--color-border-focus);
  background: var(--color-white);
  box-shadow: none;
}

/* Select sauber halten */
.select-wrapper.incms-form-element {
  width: 100%;
}



/* Dateifeld-Wrapper */
.from-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Das sichtbare deaktivierte Dateifeld */
.from-file > input.incms-form-field[disabled] {
  flex: 1 1 auto;
  width: auto;
  min-height: var(--form-control-min-height);
  background: var(--color-white);
  border-radius: var(--form-radius);
  color: var(--color-text);
  opacity: 1;
}

/* Fake Upload Button */
.from-file > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  background: var(--color-bg-soft);
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  line-height: 1.2;
  color: var(--color-text);
  white-space: nowrap;
  box-sizing: border-box;
}

/* Das echte File-Input unsichtbar drüberlegen */
.from-file > input.incms-fake-input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Checkboxen und Radios NICHT wie Textfelder behandeln */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: 0;
  margin: 0 8px 0 0;
  box-shadow: none;
  vertical-align: middle;
}

/* Checkbox-/Radio-Zeilen */
.checkbox label,
.radio label,
.terms-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Radiogruppe nicht in grauem Balken lassen */
.input-radio .incms-form-field {
  width: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}


/* Button-Container */
.submit_container,
.incms-button-container {
  margin-top: 36px;
  text-align: center !important;
}

/* inCMS Button-Wrapper neutralisieren */
.incms-button {
  max-width: none !important;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Echten Button an eure globale Buttonlogik hängen */
.incms-button button {
  font-family: var(--font-button);
  font-weight: var(--font-weight-button);
  font-size: var(--font-size-button);
  font-style: normal;
  line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing);
  word-spacing: var(--button-word-spacing);
  text-transform: var(--button-text-transform);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 6px 60px;
  min-height: var(--button-min-height);
  width: fit-content;

  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  border: none;
  background: var(--button-primary-background-color);
  color: var(--button-primary-text-color);
  cursor: pointer;
  transition: var(--button-transition);
}

.incms-button button:hover {
  background: var(--button-primary-hover-background-color);
  color: var(--button-primary-hover-text-color);
}

/* AGB-Link */
.terms-field a {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 768px) {
  .incms-form-field:not([type="checkbox"]):not([type="radio"]),
  .incms-form-element textarea.incms-form-field,
  .incms-form-element select.incms-form-field {
    font-size: var(--font-size-ui);
  }

  .from-file {
    flex-direction: column;
    align-items: stretch;
  }

  .from-file > span {
    width: 100%;
  }

  .incms-button button {
    width: 100%;
    box-sizing: border-box;
    font-size: var(--font-size-button-mobile);
  }
}
.select-wrapper {
  position: relative;
}


/* LANGUAGE DROPDOWN */
#menulangtop {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* Trigger */
#menulangtop .sb-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  background: var(--color-white);
  cursor: pointer;
  font: inherit;
  color: var(--color-text-strong);
  line-height: 1;
  white-space: nowrap;
}

#menulangtop .sb-lang-toggle:focus-visible {
  outline: 2px solid var(--color-text-strong);
  outline-offset: 2px;
}

#menulangtop .sb-lang-toggle-caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.2s ease;
}

#menulangtop.is-open .sb-lang-toggle-caret {
  transform: rotate(225deg) translateY(-1px);
}

/* Dropdown hart von Menü-Styles lösen */
#menulangtop > ul {
  position: absolute !important;
  top: calc(100% + 8px);
  right: 0 !important;
  left: auto !important;
  transform: none !important;

  z-index: 1000;
  width: 180px !important;
  max-width: calc(100vw - 16px) !important;

  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;

  margin: 0 !important;
  padding: 10px !important;
  list-style: none !important;

  background: var(--color-white) !important;
  border: 1px solid var(--color-border-menu) !important;
  border-radius: 16px !important;
  box-shadow: var(--dropdown-shadow) !important;
  box-sizing: border-box !important;
}

#menulangtop:not(.is-open) > ul {
  display: none !important;
}

#menulangtop > ul > li {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#menulangtop > ul > li > a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;

  margin: 0 !important;
  padding: 10px 14px 10px 42px !important;

  text-align: left !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  color: var(--color-text-strong) !important;

  border-radius: 10px !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 16px 16px !important;
}

#menulangtop > ul > li > a:hover,
#menulangtop > ul > li > a:focus-visible {
  background-color: var(--color-bg-soft) !important;
  outline: none !important;
}

#menulangtop > ul > li.active > a {
  background-color: var(--color-bg-active) !important;
  font-weight: 600 !important;
}


/* AKKORDEON */

/* --- Schriftart erzwingen ------------------------------- */
.flexi-accordionitem,
.flexi-accordionitem dt,
.flexi-accordionitem dt > a,
.flexi-accordionitem dd {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* --- Wrapper: keine Rahmen, kein Hintergrund ------------ */
.flexi-accordionitem {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* --- dt: nur Klickfläche, keine eigene Optik ------------ */
.flexi-accordionitem dt {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* --- Link: inCMS-Linkfarben & Unterstreichung killen ---- */
.flexi-accordionitem dt > a,
.flexi-accordionitem dt > a:link,
.flexi-accordionitem dt > a:visited,
.flexi-accordionitem dt > a:hover,
.flexi-accordionitem dt > a:active,
.flexi-accordionitem dt > a:focus {
  color: inherit;
  text-decoration: none;
  background: none;
  outline: none;
}

/* Tastatur-Fokus trotzdem sichtbar lassen (Accessibility) */
.flexi-accordionitem dt > a:focus-visible {
  outline: 2px solid var(--color-text-strong);
  outline-offset: 4px;
}

/* Titel darf umbrechen, Chevron bleibt rechts */
.flexi-accordionitem dt > a {
  cursor: pointer;
  text-align: left;
  hyphens: auto;
}

/* --- dd: Fließtext ------------------------------------- */
.flexi-accordionitem dd {
  margin: 0;
  background: none;
  border: none;
}

.flexi-accordionitem dd p {
  margin: 0 0 1em;
  font-family: var(--font-body);
  line-height: 1.6;
}

.flexi-accordionitem dd p:last-child,
.flexi-accordionitem dd ul:last-child,
.flexi-accordionitem dd ol:last-child {
  margin-bottom: 0;
}

.flexi-accordionitem dd a {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* --- Mobile -------------------------------------------- */
@media (max-width: 768px) {
  .flexi-accordionitem dd p {
    line-height: 1.55;
  }
}


/* =========================================================
   ANIMATIONEN
   ========================================================= */

/* Animation */

.has-scroll-animation {
  opacity: 0;
  transition: opacity var(--scroll-animation-duration) ease, transform var(--scroll-animation-duration) ease;
  will-change: opacity, transform;
}

/* Startzustände */
.has-scroll-animation.fade-up {
  transform: translateY(30px);
}

.has-scroll-animation.fade-left {
  transform: translateX(-40px);
}

.has-scroll-animation.fade-right {
  transform: translateX(40px);
}

.has-scroll-animation.fade-down {
  transform: translateY(-30px);
}

/* Endzustand */
.has-scroll-animation.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   inCMS Backend: animierte Inhalte immer sichtbar
   ========================================================= */

.view-edit .has-scroll-animation {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}


/* =========================================================
   SMARTBOX BASIS V3
   Gemeinsamer Full-Width-Rahmen + frei wählbare Abstände
   ========================================================= */

.sb-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  box-sizing: border-box;
  padding-top: var(--sb-padding-top, var(--section-padding-default));
  padding-bottom: var(--sb-padding-bottom, var(--section-padding-default));
}


/* =========================================================
   HERO – Referenzabstaende
   ========================================================= */

/* Das Original hat zwischen Beschreibung und CTA nur den
   Button-Margin. Der Absatz selbst bringt unten keinen
   zusaetzlichen Abstand mit. */
.sb-hero__subtitle {
  margin-bottom: 0;
}

.sb-hero .custom__button {
  /* Hero-CTA ist im Original groesser als die Karten-CTAs.
     16px / 1.2 / 6x18px / min. 40px ergibt bei einer Zeile ca. 40px
     und bei der langen deutschen CTA ca. 50px Hoehe – passend zur Referenz. */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  word-spacing: 0;
  padding: 6px 18px;
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}


/* =========================================================
   KARTENRASTER – ORIGINAL BUTTON-METRIKEN
   Computed-Style-Referenz: 14px / 700 / 21px / 10x20px.
   Der Abstand zum Button kommt bei unserer SmartBox bereits ueber
   .sb-five-cols__body { gap: 24px; }, deshalb hier kein zweiter margin-top.
   ========================================================= */

.sb-five-cols__button-wrap .custom__button {
  font-size: var(--card-button-font-size);
  font-weight: 700;
  line-height: var(--card-button-line-height);
  word-spacing: var(--card-button-word-spacing);
  padding: var(--card-button-padding-y) var(--card-button-padding-x);
  min-height: auto;
  max-width: none;
  margin-top: 0;
  display: block;
  box-sizing: content-box;
}

/* =========================================================
   SMARTBOX: 2 SPALTEN – VISUELLE STYLES
   Das reine Layout/Gerüst bleibt in der SmartBox.
   ========================================================= */

.sb-two-cols.bg-white {
  background: var(--color-white);
}

.sb-two-cols.bg-grey {
  background: var(--color-bg-muted);
}

/* Optionale Bereichsüberschrift */
.sb-two-cols__headline {
  margin: 0 0 32px;
  font-size: 50px;
  line-height: 140%;
  font-weight: 400;
  color: var(--color-text);
}

.sb-two-cols__headline.align-left {
  text-align: left;
}

.sb-two-cols__headline.align-center {
  text-align: center;
}

.sb-two-cols__headline.align-right {
  text-align: right;
}

/* Überschrift innerhalb einer Spalte */
.sb-two-cols__col-headline {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 140%;
  font-weight: 400;
  color: var(--color-text);
}

/* Fließtext */
.sb-two-cols__text-content {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 300;
  line-height: 160%;
  color: var(--color-text);
}

.sb-two-cols__text-content p:first-child {
  margin-top: 0;
}

.sb-two-cols__text-content p:last-child {
  margin-bottom: 0;
}

/* Button-Abstand */
.sb-two-cols__text .custom__button {
  margin-top: 24px;
}

/* Bilder */
.sb-two-cols__media-image,
.sb-two-cols__media-image-right {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   INCMS CAROUSEL – NAVIGATION IM ERFOLGSGESCHICHTEN-STIL
   ========================================================= */

.owl-carousel.incms-theme {
  position: relative;

  --incms-carousel-nav-bg: #ffffff;
  --incms-carousel-pagination-active: #111111;
  --incms-carousel-pagination-inactive: #c7c7c7;
}


/* =========================================================
   PFEILE
   ========================================================= */

.owl-carousel.incms-theme .owl-nav {
  margin: 0;
}


/* =========================================================
   BUTTON-BASIS

   Die Buttons liegen komplett außerhalb der Carousel-Fläche,
   damit die Slides beim Wechsel nicht hinter ihnen laufen.
   ========================================================= */

.owl-carousel.incms-theme .owl-nav button.owl-prev,
.owl-carousel.incms-theme .owl-nav button.owl-next {
  position: absolute;

  top: 50%;

  width: 42px;
  height: 42px;

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

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

  background:
    var(
      --incms-carousel-nav-bg,
      #ffffff
    ) !important;

  box-shadow:
    0 2px 10px
    rgba(0, 0, 0, 0.12);

  display: flex !important;
  align-items: center;
  justify-content: center;

  color: #111111 !important;

  cursor: pointer;

  z-index: 3;

  line-height: 1;

  transform: translateY(-50%) !important;

  transition:
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}


/* =========================================================
   POSITION

   54px Abstand sorgt dafür, dass der 42px große Button
   vollständig außerhalb der eigentlichen Carousel-Fläche sitzt.
   ========================================================= */

.owl-carousel.incms-theme .owl-nav button.owl-prev {
  left: -54px;
}

.owl-carousel.incms-theme .owl-nav button.owl-next {
  right: -54px;
}


/* =========================================================
   VORHANDENE INCMS / FONT-AWESOME-PFEILE ENTFERNEN
   ========================================================= */

.owl-carousel.incms-theme
.owl-nav
button
i {
  display: none !important;
}

.owl-carousel.incms-theme
.owl-nav
button::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   EIGENE PFEILSYMBOLE
   ========================================================= */

.owl-carousel.incms-theme
.owl-nav
button::before {
  display: block !important;

  position: static !important;

  width: auto !important;
  height: auto !important;

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

  background: none !important;

  color: #111111 !important;

  font-family: var(--font-ui) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  transform: translateY(-2px);
}

.owl-carousel.incms-theme
.owl-nav
button.owl-prev::before {
  content: "‹" !important;
}

.owl-carousel.incms-theme
.owl-nav
button.owl-next::before {
  content: "›" !important;
}


/* =========================================================
   HOVER / FOCUS / ACTIVE

   Keine Positions- oder Größenänderung. Der Button bleibt bei
   Maus, Tastatur und Klick exakt an derselben Stelle.
   ========================================================= */

.owl-carousel.incms-theme
.owl-nav
button.owl-prev:hover,
.owl-carousel.incms-theme
.owl-nav
button.owl-next:hover,
.owl-carousel.incms-theme
.owl-nav
button.owl-prev:focus,
.owl-carousel.incms-theme
.owl-nav
button.owl-next:focus,
.owl-carousel.incms-theme
.owl-nav
button.owl-prev:active,
.owl-carousel.incms-theme
.owl-nav
button.owl-next:active {
  background:
    var(
      --incms-carousel-nav-bg,
      #ffffff
    ) !important;

  color: #111111 !important;

  transform: translateY(-50%) !important;

  opacity: 1;

  box-shadow:
    0 4px 14px
    rgba(0, 0, 0, 0.16);
}

.owl-carousel.incms-theme
.owl-nav
button.owl-prev:focus-visible,
.owl-carousel.incms-theme
.owl-nav
button.owl-next:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 3px;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.owl-carousel.incms-theme .owl-dots {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  transform: none !important;

  margin-top: 18px !important;

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

  gap: 13px;
}


/* Button selbst neutralisieren */
.owl-carousel.incms-theme .owl-dots button.owl-dot {
  appearance: none;
  -webkit-appearance: none;

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

  width: 13px;
  min-width: 13px;
  height: 13px;
  min-height: 13px;

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

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  cursor: pointer;
}


/* Inaktiver Punkt */
.owl-carousel.incms-theme .owl-dots button.owl-dot span {
  display: block;

  width: 9px;
  height: 9px;

  margin: 0 !important;

  border: 0;
  border-radius: 50%;

  background:
    var(
      --incms-carousel-pagination-inactive,
      #c7c7c7
    ) !important;

  opacity: 1;

  box-sizing: border-box;

  transition:
    opacity 0.2s ease,
    width 0.2s ease,
    height 0.2s ease;
}


/* Aktiver Punkt */
.owl-carousel.incms-theme
.owl-dots
button.owl-dot.active
span {
  width: 13px;
  height: 13px;

  background: transparent !important;

  border:
    2px solid
    var(
      --incms-carousel-pagination-active,
      #111111
    );

  border-radius: 50%;
}


.owl-carousel.incms-theme
.owl-dots
button.owl-dot:hover
span {
  opacity: 0.5;
}


.owl-carousel.incms-theme
.owl-dots
button.owl-dot:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 3px;
  border-radius: 50%;
}

/*===========================ENDE=========================== */

@media (max-width: 1440px) {
  .sb-two-cols__headline {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .sb-two-cols__headline {
    font-size: 32px;
    margin-bottom: 24px;
  }

  .sb-two-cols__col-headline {
    font-size: 20px;
  }

  .sb-two-cols__text-content {
    font-size: var(--font-size-body-mobile);
    line-height: 155%;
  }

  .sb-two-cols__text .custom__button {
    margin-top: 18px;
  }
}

/* Übergangshilfe: alte sichtbare Buttons aus 2-Spalten/Hero bleiben bis zur manuellen Prüfung gestaltet. */
.sb-two-cols .custom__button:not(.is-hidden):not(.primary_btn):not(.secondary_btn),
.sb-hero .custom__button:not(.is-hidden):not(.primary_btn):not(.secondary_btn) {
  background: var(--color-primary);
  color: var(--color-text);
}

/* =========================================================
   ORIGINAL-REFERENZ: GEMESSENE DESKTOP-WERTE
   Abgleich anhand der bereitgestellten Original-Screenshots.
   ========================================================= */

/* Kartenraster:
   Original bei ~1900px Viewport: 4 Bilder à ca. 300px, dazwischen ca. 40px.
   1368px Innenbreite - 48px Seitenpadding = 1320px Gridbreite.
   (1320px - 3 * 40px) / 4 = 300px je Karte. */
.sb-section.sb-five-cols .sb-five-cols__inner {
  max-width: var(--content-max-cards);
}

/* Bei der Originalreferenz liegen einzeilige Kartentitel nicht künstlich
   in einem reservierten Zwei-Zeilen-Feld. Breitere Karten verhindern bei
   den üblichen Titeln ohnehin unnötige Umbrüche. */
.sb-section.sb-five-cols .sb-five-cols__content .sb-five-cols__item-title {
  min-height: 0;
}

/* 2 Spalten – flexibel:
   Referenz bei 1904px Viewport gemessen:
   Bild ca. 409px, Textspalte ca. 409px, Abstand ca. 111px.
   930px Gesamtbreite mit 110px Gap ergibt zwei Spalten à 410px. */
.sb-section.sb-two-cols .sb-two-cols__inner {
  max-width: var(--content-max-two-cols);
}

.sb-section.sb-two-cols .sb-two-cols__grid.gap-small {
  gap: var(--two-cols-gap-small);
}

.sb-section.sb-two-cols .sb-two-cols__grid.gap-medium {
  gap: var(--two-cols-gap-medium);
}

.sb-section.sb-two-cols .sb-two-cols__grid.gap-large {
  gap: var(--two-cols-gap-large);
}

/* Erfolgsgeschichten:
   Die Originalseite nutzt für die Namensleiste dasselbe Gelb wie die CTAs.
   Die bisherige lokale Standardfarbe #d8a229 war sichtbar dunkler. */
.sb-success-stories .sb-success-stories__customer {
  background: var(--color-primary);
  padding: 14px 20px;
}

/* Referenz-CTA: Computed Style der Originalseite.
   Außenhöhe ergibt sich aus 21px Zeilenhöhe + 10px Padding oben/unten = 41px. */

@media (max-width: 768px) {
  /* Mobil wieder kompakter; Desktop-Referenzwerte nicht erzwingen. */
  .sb-section.sb-two-cols .sb-two-cols__grid.gap-small,
  .sb-section.sb-two-cols .sb-two-cols__grid.gap-medium,
  .sb-section.sb-two-cols .sb-two-cols__grid.gap-large {
    gap: 32px;
  }

  .sb-section.sb-five-cols .sb-five-cols__inner {
    max-width: 100%;
  }
}