/* ==========================================================================
   Drei neue, frei kombinierbare Mask-Elemente: Split-Content-Section
   (Bild + frei befuellbare Spalte, Mask-CE "splitcontent"), Akkordeon
   ("akkordeon"/"akkordeonpunkt") und Tabs ("tabs"/"tab"). Gedacht zum
   Ineinanderschachteln (Split-Content-Spalte -> Tabs -> je Tab ein
   Akkordeon), siehe Kunden-Screenshot "GUT ZU WISSEN".
   ========================================================================== */

/* --- Split-Content-Section --------------------------------------------- */

.split-section {
  width: 100%;
}

.split-section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 26rem;
}

.split-section-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.75rem, 6vw, 6rem);
  color: var(--color-gray-100, #0e1729);
}

.split-section-content > *:first-child {
  margin-top: 0;
}

.split-section-content > *:last-child {
  margin-bottom: 0;
}

.split-section-image {
  position: relative;
  overflow: hidden;
  min-height: 20rem;
  /* Bild links per Default (order:-1) - "Bild rechts"-Checkbox hebt das
     wieder auf, siehe Modifier-Klasse unten. Gleiches Prinzip wie bei
     .usp-section--image-left, nur mit vertauschter Grund-Richtung. */
  order: -1;
}

.split-section--image-right .split-section-image {
  order: 0;
}

.split-section-image picture,
.split-section-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rundes Icon-Badge, straddled den Spaltenuebergang zur Content-Spalte -
   sitzt an der Bild-Kante, die an die Content-Spalte angrenzt (rechts bei
   Bild-links/Default, links bei "Bild rechts"), vertikal mittig. */
.split-section-icon-badge {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  width: clamp(3.25rem, 5vw, 4.5rem);
  height: clamp(3.25rem, 5vw, 4.5rem);
  border-radius: 50%;
  background: var(--color-steelblue, #1f9cdb);
  color: var(--color-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5rem 1.5rem rgba(14, 23, 41, 0.25);
  z-index: 2;
}

.split-section--image-right .split-section-icon-badge {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

@media (max-width: 900px) {
  .split-section-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* Bild auf schmalen Breiten immer oben, unabhaengig von der
     "Bild rechts"-Einstellung (gleiche Konvention wie .usp-section). */
  .split-section-image {
    order: -1 !important;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .split-section-content {
    padding: clamp(2.5rem, 9vw, 3.5rem) clamp(1.25rem, 7vw, 2rem);
  }

  /* Badge dockt jetzt an der Bildunterkante (dem horizontalen Uebergang
     zum gestapelten Content darunter) statt an einer seitlichen Kante. */
  .split-section-icon-badge {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translate(-50%, 50%);
  }
}

/* --- Akkordeon ----------------------------------------------------------- */

.akkordeon {
  width: 100%;
}

.akkordeon-punkt {
  border-bottom: 1px solid var(--color-gainsboro-200, #d9d9d9);
}

.akkordeon-punkt:first-child {
  border-top: 1px solid var(--color-gainsboro-200, #d9d9d9);
}

.akkordeon-punkt-titel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: none;
  border: none;
  margin: 0;
  cursor: pointer;
  padding: 1.25rem 0.25rem;
  text-align: left;
  font-family: var(--font-figtree, sans-serif);
  font-weight: 700;
  font-size: var(--fs-18, 1.125rem);
  color: var(--color-gray-100, #0e1729);
}

/* Animiertes Plus-/Minus-Icon in den Standardfarben (hellgrauer Kreis mit
   dunkelblauem Plus im Ruhezustand, dunkelblauer Kreis mit weissem Minus
   wenn geoeffnet) - zwei Balken per ::before/::after, der senkrechte
   verschwindet beim Oeffnen (scaleY(0)) und macht so aus dem Plus ein
   Minus, ohne ein zweites Icon/SVG zu brauchen. */
.akkordeon-punkt-icon {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #f0f0f0;
  transition: background-color 0.3s ease;
}

.akkordeon-punkt-icon::before,
.akkordeon-punkt-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-gray-100, #0e1729);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.akkordeon-punkt-icon::before {
  width: 0.9rem;
  height: 2px;
  transform: translate(-50%, -50%);
}

.akkordeon-punkt-icon::after {
  width: 2px;
  height: 0.9rem;
  transform: translate(-50%, -50%);
}

.akkordeon-punkt.is-open .akkordeon-punkt-icon {
  background: var(--color-gray-100, #0e1729);
}

.akkordeon-punkt.is-open .akkordeon-punkt-icon::before,
.akkordeon-punkt.is-open .akkordeon-punkt-icon::after {
  background: var(--color-white, #fff);
}

.akkordeon-punkt.is-open .akkordeon-punkt-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Auf-/Zuklappen rein per CSS (grid-template-rows: 0fr -> 1fr) - animiert
   sauber auf/von "auto"-Hoehe, ohne dass JS die Pixel-Hoehe messen muss.
   Das umschliessende Init-Script (Akkordeon.html) toggelt nur die Klasse
   "is-open" am Wurzelelement. */
.akkordeon-punkt-inhalt {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.akkordeon-punkt.is-open .akkordeon-punkt-inhalt {
  grid-template-rows: 1fr;
}

.akkordeon-punkt-inhalt-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 0.25rem 1.25rem;
}

.akkordeon-punkt-inhalt-inner > *:first-child {
  margin-top: 0;
}

.akkordeon-punkt-inhalt-inner > *:last-child {
  margin-bottom: 0;
}

/* --- Tabs ------------------------------------------------------------- */

.tabs {
  width: 100%;
}

.tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid var(--color-gainsboro-200, #d9d9d9);
  margin-bottom: 2rem;
}

.tabs-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin: 0 0 -1px;
  padding: 0 0 1rem;
  cursor: pointer;
  font-family: var(--font-figtree, sans-serif);
  font-weight: 700;
  font-size: var(--fs-18, 1.125rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(14, 23, 41, 0.45);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.tabs-tab-btn:hover,
.tabs-tab-btn:focus-visible {
  color: var(--color-gray-100, #0e1729);
}

.tabs-tab-btn.is-active {
  color: var(--color-gray-100, #0e1729);
  border-bottom-color: var(--color-steelblue, #1f9cdb);
}

.tabs-panel {
  display: none;
}

.tabs-panel.is-active {
  display: block;
}

.tabs-panel > *:first-child {
  margin-top: 0;
}

/* --- Icon-Überschrift -------------------------------------------------- */
/* Rundes Icon-Badge + große Überschrift nebeneinander - eigenständiges,
   frei platzierbares Element (z.B. im Inhaltsbereich der Split-Content-
   Section, siehe Splitcontent.html). Gleiches Icon-Set/Partial wie das
   Split-Content-Icon (Icon.html), gleiche Signalfarbe. */
.icon-headline {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.icon-headline-badge {
  flex: none;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--color-steelblue, #1f9cdb);
  color: var(--color-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-headline-badge svg {
  width: 2.25rem;
  height: 2.25rem;
}

.icon-headline-text {
  margin: 0;
  font-family: var(--font-din-2014, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-gray-100, #0e1729);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
}

@media (max-width: 480px) {
  .icon-headline {
    gap: 1rem;
  }

  .icon-headline-badge {
    width: 3.75rem;
    height: 3.75rem;
  }

  .icon-headline-badge svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* Freier Text im Split-Content-Inhaltsbereich (Standard-Textelement): an
   die Typografie der USP-Section-Texte angeglichen (line-height:1.7,
   gedämpfte Textfarbe statt vollem Schwarz - siehe .usp-section-text in
   usp-sections.css). Zusätzlich, anders als bei USP (dort bewusst KEINE
   Breiten-Deckelung, siehe Kommentar dort): auf großen Displays (ab
   992px, Bootstrap-lg-Breakpoint) läuft der Text nur über max-width:75%
   der Spalte, damit Zeilen bei einer breiten Content-Spalte nicht zu
   lang/schwer lesbar werden. Unterhalb 992px (schmalere/gestapelte
   Ansicht) volle Breite, da dort ohnehin schon weniger Platz ist. */
.split-section-content .frame-type-text {
  color: rgba(14, 23, 41, 0.75);
  line-height: 1.7;
}

.split-section-content .frame-type-text p {
  margin: 0 0 1.75rem;
}

.split-section-content .frame-type-text p:last-child {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .split-section-content .frame-type-text {
    max-width: 75%;
  }
}