/* Float-Animationen — Ersatz für Webflow IX2 */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-22px); }
}

@keyframes float-partner {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(80px); }
}

@keyframes float-horizontal {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(80px); }
}

.b2b-pills {
  animation: float 5s ease-in-out infinite;
}

.pixolith-choice-image {
  animation: float 6s ease-in-out infinite;
  animation-delay: -2s;
}

/* Float-Animation für alle .partner-image (Einleitungs-Visual + Partner-Logos
   im Slider). z-index unten sorgt dafür, dass das wackelnde Bild visuell
   nicht über die Headline rutscht. */
.partner-image {
  animation: float-partner 8s ease-in-out infinite;
  animation-delay: -3s;
}

/* Partner-Slide-Header (Headline + Bild): Headline muss IMMER über dem
   Bild-Wrapper liegen, damit das Bild nicht visuell in die Headline ragt
   (bei 40%/60% Layout + 2.5rem gap rechnen die Items knapp >100%, in
   manchen Viewports überlappen sie sichtbar).
   Safari-Fix: isolation:isolate auf partner-head erzwingt einen eigenen
   Stacking-Context, sodass das transform: translateX(...) auf .partner-image
   nicht einen neuen Stacking-Context erzeugt, der über die Headline rutscht. */
/* Custom-Buttons haben ihre eigenen Focus/Hover-Indikatoren via _bg/_text
   Layern — Browser-Default-Outline auf Hover (Safari/iOS-spezifisch) und
   focus-Outline würde visuell stören. :focus-visible bleibt aktiv für
   Keyboard-Navigation (a11y). */
.button-primary,
.button-secondary,
.button-primary-inverted,
.button-icon,
.faq_heading {
  outline: none;
}
.button-primary:hover,
.button-primary:focus,
.button-secondary:hover,
.button-secondary:focus,
.button-primary-inverted:hover,
.button-primary-inverted:focus,
.button-icon:hover,
.button-icon:focus,
.faq_heading:hover,
.faq_heading:focus {
  outline: none;
}

/* Button-Container: bei zu wenig Platz Buttons untereinander brechen, statt
   den Button-Text zu stauchen oder über den Container zu ragen.
   Greift global auf .button-container — Webflow-Original-Default ist nowrap. */
.button-container {
  flex-wrap: wrap;
}
.button-container > a,
.button-container > button {
  flex-shrink: 0;
}

/* Features-Card-Bilder: Seitenverhältnis 1:1 immer garantieren — nicht stauchen.
   Original-Webflow-CSS hat width:420px + height:420px fest, in schmaleren
   Cards staucht das Bild. object-fit:contain + aspect-ratio sichert das ab. */
.paint-point-image {
  object-fit: contain;
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 1 / 1;
}

.partner-head {
  position: relative;
  isolation: isolate;
}
.heading-2.heading-style-h2.partner {
  position: relative;
  z-index: 2;
}
.partner-img-wrapper {
  position: relative;
  z-index: 1;
}

/* FAQ-Tabs linksbündig: der Swiper-Container selbst wird zentriert.
   Wir erzwingen linksbündig auf allen Ebenen (Container, Wrapper, Flex). */
.swiper.faq-swiper {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  width: 100% !important;
}
.swiper.faq-swiper .swiper-wrapper,
.swiper.faq-swiper .swiper-wrapper.faq-swiper-wrapper {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Blog-Bilder im Rich-Text-Container: volle Breite */
.text-rich-text.blog.w-richtext img {
  width: 100%;
  height: auto;
  border-radius: var(--card-radius, 1rem);
  margin: 1rem 0;
}

/* Auszeichnungen — Zweite Card-Reihe (Zertifizierungs-Block) mit nur 8px Abstand zur oberen Reihe.
   Der Parent ".auszeichnungen-container" hat default 2.5rem gap — wir kompensieren
   mit negativem margin-top auf der zweiten Card-Reihe. */
.auszeichnungen-cards.auszeichnungen-cards-row-2 {
  margin-top: calc(-2.5rem + 0.5rem); /* -32px → effektiver Abstand 8px */
}

/* Auszeichnungen — Zertifizierungs-Karte als 2-Spalten-Layout auf Desktop:
   links: Badge + Headline + Beschreibung (zertifizierungen-einleitung)
   rechts: Zertifizierungs-Tags-Grid (zertifizierungen) */
@media screen and (min-width: 992px) {
  .auszeichnungen-card.breit {
    flex-direction: row !important;
    align-items: stretch;
    column-gap: 2.5rem;
  }
  .auszeichnungen-card.breit .zertifizierungen-einleitung {
    flex: 0 0 33%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .auszeichnungen-card.breit .zertifizierungen {
    flex: 1;
    align-content: center;
    align-self: center;
  }
}

/* Mobile/Tablet: Card bleibt vertikal, einleitung stapelt sich oben drüber */
@media screen and (max-width: 991px) {
  .auszeichnungen-card.breit .zertifizierungen-einleitung {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* Safari-Fix Referenzen-Slider:
   .referenz_slider_image_container hat im Tablet/Mobile-Layout `flex: 1` ohne
   explizite Höhe oder aspect-ratio. Safari wächst den Container höher als das
   Bild (das mit object-fit:cover sein aspect respektiert) → leere Lücke unter
   dem Bild. Chrome interpretiert flex:1 hier anders.
   Fix: aspect-ratio 3/2 (Original-Bild-Proportion 2250x1500) auf den Container,
   damit Container exakt so groß ist wie das Bild. */
@media screen and (max-width: 991px) {
  .referenz_slider_image_container {
    flex: 0 0 auto !important;
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
  }
}

/* Jobs-Accordion (.job-text): Bold-Headline + Copy-Pair zusammenrücken.
   Pattern: <p bold>Headline</p><p>Copy</p>.
   .job-text ist flex column mit gap:2.5rem — wir setzen gap:0 und steuern
   den Abstand pro <p> via margin-bottom: Standard 2.5rem, Bold-Headline 0
   (klebt an nachfolgender Copy), letzter <p> 0 (kein Trailing-Gap). */
.faq_accordion.jobs .job-text {
  gap: 0 !important;
}
.faq_accordion.jobs .job-text > p.text-size-regular {
  margin-top: 0 !important;
  margin-bottom: 2.5rem !important;
}
.faq_accordion.jobs .job-text > p.text-size-regular.text-weight-bold {
  margin-bottom: 0 !important;
}
.faq_accordion.jobs .job-text > p.text-size-regular:last-child {
  margin-bottom: 0 !important;
}

/* pixolith-Logo: webflow.css setzt padding-top: 3px (war fürs alte
   kleine SVG gedacht). Neues SVG bringt Hintergrund + Schriftzug
   selbst mit, exakt 100×48 — daher padding nullen.
   Zusätzlich SVG auf display:block setzen, sonst fügt Browser durch
   default inline-Verhalten ~2px Baseline-Spacing dazu → Container
   wirkt 50px statt 48px. */
.pixolith-logo {
  padding-top: 0 !important;
}
.pixolith-logo svg {
  display: block;
}

/* Features-Karten: feste Breite, unabhängig von der Bild-Eigengröße.
   Grund: img{max-width:100%} (components.css) + position:absolute-Karten
   ohne feste Breite ließen die Karte auf die Bildgröße schrumpfen. Das
   Komplexität-Bild ist nur 500px (andere 1280px) → Karte _4 war zu klein.
   Feste Breite macht alle Karten gleich groß. */
.features-card,
.features-card-fix {
  width: 420px;
}
.features-card .paint-point-image,
.features-card-fix .paint-point-image {
  width: 420px;
  height: 420px;
}
@media (max-width: 991px) {
  .features-card,
  .features-card-fix {
    width: 340px;
  }
  .features-card .paint-point-image,
  .features-card-fix .paint-point-image {
    width: 340px;
    height: 340px;
  }
}