/* ==========================================================================
   Custom Styles (nicht Teil des Sage-Builds)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bauerfeind Design System – Info-Tab / Eyebrow Headline
   https://design.bauerfeind.de/typografie/info-tab/
   -------------------------------------------------------------------------- */

/* Info-Tab / eyebrow headline styling */
.infotab {
  /* Display & Box */
  width: fit-content;
  height: 12px;
  padding: 12px 0 0 12px;

  /* Border */
  border-top: 1px solid;
  border-left: 1px solid;
  border-top-left-radius: 12px;
  border-color: #133e8f;

  /* Typography */
  font-size: 16px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  /* Color */
  color: #133e8f;
}

.infotab::after {
  /* Content (Pseudo-Element zuerst) */
  content: "";

  /* Position */
  display: inline-block;
  position: relative;
  top: -12px;

  /* Box */
  width: 68px;
  height: 12px;
  margin-left: 11px;

  /* Border */
  border-left: 1px solid;
  border-color: #133e8f;
}

/* --------------------------------------------------------------------------
   Head-Section-Flagline als Info-Tab
   Selektoren bewusst mit hoher Spezifitaet, da main.css die Flagline ueber
   ".head-section .headline-wrap .head-section-flagline" (0,3,0) stylt.
   Live am 13.07.2026 per Browser-Injection auf apps.bauerfeind.com verifiziert.
   -------------------------------------------------------------------------- */

.head-section .headline-wrap .head-section-flagline.infotab {
  width: fit-content;
  height: 12px;
  padding: 12px 0 0 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 1.5px;
  margin: 0 0 24px;
  max-width: none;
  white-space: nowrap;
  /* Text haengt designbedingt unter der 12px-Box: ueber die Headline-
     Textbalken (weisse box-shadows) heben, sonst wird er abgeschnitten */
  position: relative;
  z-index: 5;
}

.head-section .headline-wrap .head-section-flagline.infotab span {
  background-color: transparent;
  box-shadow: none;
  color: inherit;
}

/* Abstand Infotab -> Headline (nur fuer den Head-Section-Usecase) */
.head-section .headline-wrap .head-section-flagline.infotab + .head-section-headline {
  margin-top: 45px;
}

@media screen and (max-width: 39.9375em) {
  .head-section .headline-wrap .head-section-flagline.infotab + .head-section-headline {
    margin-top: 33px;
  }
}

/* --------------------------------------------------------------------------
   Hero-Bild mit abgerundeten Ecken
   -------------------------------------------------------------------------- */

.head-section .video-wrap {
  border-radius: 20px;
  overflow: hidden;
}

.head-section .video-wrap img {
  border-radius: 20px;
}

/* --------------------------------------------------------------------------
   Badge 3 im Desktop-Header (#app-dl-1)
   -------------------------------------------------------------------------- */

.app-dl .header-badge {
  display: inline-block;
  margin-left: 15px;
  padding-right: 0;
  vertical-align: top;
}

/* --------------------------------------------------------------------------
   Utility: Elemente auf Mobilgeraeten ausblenden
   (Breakpoint = Foundation "small only", wie im Theme ueblich)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 39.9375em) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Info-Box: Listen-Styling nach Design-System
   Figma: Handover, Node 1-57643 ("List")
   Specs: Lead 19/26 SemiBold #133e8f | Item 17/26 Regular #4c5466
          Icon 24x24 Chevron, 8px Abstand Icon->Text, 8px zwischen Items,
          16px Abstand Lead->Liste
   -------------------------------------------------------------------------- */

.info-box ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.info-box ul li {
  position: relative;
  padding-left: 32px; /* 24px Icon + 8px Abstand */
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 26px;
}

.info-box ul li:last-child {
  margin-bottom: 0;
}

.info-box ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px; /* (26px Zeilenhoehe - 24px Icon) / 2 */
  width: 24px;
  height: 24px;
  background: url('../images/icon-chevron-right.svg') no-repeat center / 24px 24px;
}

/* Lead-Zeile direkt vor einer Liste */
.info-box p:has(+ ul) {
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  color: #133e8f;
  margin-bottom: 0; /* die Liste bringt ihre 16px margin-top mit */
}

/* Abstand, wenn nach der Liste weiterer Text folgt */
.info-box ul + p {
  margin-top: 16px;
}

/* Nummerierte Listen: Standard-Styling (Reset aus main.css aufheben) */
.info-box ol {
  list-style: decimal outside;
  margin: 0 0 1em;
  padding-left: 1.4em;
}

.info-box ol li {
  margin-bottom: 0.35em;
}

/* --------------------------------------------------------------------------
   H1 Font-Size Override fuer Sprache es-ES (Desktop 3.5rem / Mobile 2.5rem)
   Theme setzt font-size fuer h1 an mehreren Stellen (verschiedene Font-Stacks
   und Breakpoints) -> !important noetig, um sicher zu ueberschreiben.
   -------------------------------------------------------------------------- */

html[lang="es-ES"] h1 {
  font-size: 3.5rem !important;
}

@media screen and (max-width: 39.9375em) {
  html[lang="es-ES"] h1 {
    font-size: 2.5rem !important;
  }
}