/*
Theme Name: Avada Child
Description: Child Theme für Avada – BrotherSeat / fabsbehrens.de
Author: team;iken
Template: Avada
Version: 1.2.0
Text Domain: avada-child
*/

/* ============================================================
   Angebote: Bildergalerie mit Thumbnail-Leiste
   (Avada Image Carousel, Pagination-Typ "Thumbnails")

   Seitenverhältnisse zentral über die beiden Variablen unten ändern.
   ============================================================ */

.single-angebot .fusion-image-carousel {
  /* Desktop / Tablet */
  --bs-gallery-ratio: 16 / 9;
  --bs-thumb-ratio: 16 / 9;
  /* Handy – hochformatigere Bilder, damit das Motiv größer wirkt */
  --bs-gallery-ratio-mobile: 4 / 3;
  --bs-thumb-ratio-mobile: 4 / 3;

  --bs-thumb-gap: 12px;
  --bs-thumb-min: 56px;
  --bs-radius: 12px;
}

/* ------------------------------------------------------------
   Hauptbild: festes Seitenverhältnis, mittig beschnitten
   ------------------------------------------------------------ */

.single-angebot .fusion-image-carousel .swiper-slide .fusion-image-wrapper {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--bs-gallery-ratio);
  overflow: hidden;
  border-radius: var(--bs-radius);
}

/* Lightbox-Link auf die volle Bildfläche ziehen.
   Avada legt bei aktiver Lightbox ein <a> um das Bild. Da das Bild absolut
   positioniert ist, bliebe das inline-<a> sonst 0×0 groß – antippbar wäre dann
   nur über Event-Bubbling vom Bild, und Tastatur-Fokus läge auf einem
   unsichtbaren Punkt. */
.single-angebot .fusion-image-carousel .swiper-slide .fusion-image-wrapper > a {
  position: absolute;
  inset: 0;
  display: block;
}

/* Bild absolut im Rahmen positionieren.
   Wichtig: `height: 100%` allein reicht NICHT – die Höhe des Wrappers kommt aus
   `aspect-ratio`, und dagegen löst eine Prozent-Höhe nicht auf. Das Bild fiel
   dann auf seine Eigenhöhe zurück: 16:9-Fotos ließen unten eine Lücke,
   Hochformat-Fotos wurden oben bündig angeschnitten statt mittig.
   Mit position:absolute + inset:0 füllt jedes Bild den Rahmen exakt aus –
   alle Slides sind gleich hoch, egal welches Seitenverhältnis das Original hat. */
.single-angebot .fusion-image-carousel .swiper-slide .fusion-image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* Slides gleich hoch halten, damit der Slider nicht springt */
.single-angebot .fusion-image-carousel .swiper-slide,
.single-angebot .fusion-image-carousel .fusion-carousel-item-wrapper {
  height: auto;
}

/* ------------------------------------------------------------
   Wischen / Ziehen
   Das Bild darf beim Ziehen nicht als Bild-Drag oder Textauswahl
   interpretiert werden, sonst bricht die Geste ab.
   ------------------------------------------------------------ */

.single-angebot .fusion-image-carousel .swiper-wrapper {
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

.single-angebot .fusion-image-carousel .swiper-wrapper:active {
  cursor: grabbing;
}

.single-angebot .fusion-image-carousel .swiper-slide img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ------------------------------------------------------------
   Thumbnail-Leiste
   Passt sich an: wenige Bilder füllen die Breite gleichmäßig,
   viele Bilder machen die Leiste horizontal scrollbar statt die
   Thumbnails unbrauchbar klein zu quetschen.
   ------------------------------------------------------------ */

.single-angebot .fusion-image-carousel .awb-swiper-dots-thumbnails .swiper-pagination {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--bs-thumb-gap);
  width: 100%;
  margin-top: 14px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.single-angebot .fusion-image-carousel .awb-swiper-dots-thumbnails .swiper-pagination::-webkit-scrollbar {
  display: none;
}

.single-angebot .fusion-image-carousel .awb-swiper-dots-thumbnails .swiper-pagination-bullet.awb-swiper-pagination-thumb {
  flex: 1 1 0;
  width: auto !important;
  min-width: var(--bs-thumb-min);
  height: auto;
  aspect-ratio: var(--bs-thumb-ratio);
  margin: 0 !important;
  border-radius: 10px;
  border: 2px solid transparent;
  opacity: 0.55;
  cursor: pointer;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s, border-color .2s;
}

/* Falls Avada ein Thumbnail ausnahmsweise als <img> statt als background-image
   rendert. Achtung: `.awb-swiper-dots-thumbnails` liegt auf dem Carousel-Container
   selbst, nicht um die Thumbnail-Leiste – die Regel muss deshalb zwingend über
   `.swiper-pagination` eingegrenzt werden. Sonst trifft `height: auto` auch das
   Hauptbild und hängelt dessen `height: 100%` aus. */
.single-angebot .fusion-image-carousel .swiper-pagination .swiper-pagination-bullet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.single-angebot .fusion-image-carousel .awb-swiper-dots-thumbnails .swiper-pagination-bullet.awb-swiper-pagination-thumb:hover {
  opacity: 0.85;
}

/* Aktives Thumbnail in der Markenfarbe – --awb-color3 (#e2e2e2) war auf hellem
   Hintergrund praktisch unsichtbar. */
.single-angebot .fusion-image-carousel .awb-swiper-dots-thumbnails .swiper-pagination-bullet-active.awb-swiper-pagination-thumb {
  opacity: 1;
  border-color: var(--awb-color4, #bd1522);
}

/* ------------------------------------------------------------
   Handy (≤ 640px)
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  .single-angebot .fusion-image-carousel {
    --bs-gallery-ratio: var(--bs-gallery-ratio-mobile);
    --bs-thumb-ratio: var(--bs-thumb-ratio-mobile);
    --bs-thumb-gap: 8px;
    --bs-thumb-min: 60px;
  }

  .single-angebot .fusion-image-carousel .awb-swiper-dots-thumbnails .swiper-pagination {
    margin-top: 10px;
  }

  .single-angebot .fusion-image-carousel .awb-swiper-dots-thumbnails .swiper-pagination-bullet.awb-swiper-pagination-thumb {
    border-radius: 8px;
    border-width: 2px;
  }

  /* Pfeile ausblenden: am Handy wird gewischt, die Pfeile würden nur
     das Motiv verdecken und als Touch-Ziel mit der Geste kollidieren. */
  .single-angebot .fusion-image-carousel .awb-swiper-button {
    display: none;
  }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
  .single-angebot .fusion-image-carousel {
    --bs-thumb-min: 52px;
  }
}

/* Nutzer mit reduzierter Bewegung: kein Smooth-Scroll der Leiste */
@media (prefers-reduced-motion: reduce) {
  .single-angebot .fusion-image-carousel .awb-swiper-dots-thumbnails .swiper-pagination {
    scroll-behavior: auto;
  }
}


/* ============================================================
   Angebots-Karten (Avada Post Cards)
   Text bündig unter dem Bild, Button bündig am unteren Rand.

   Warum nötig: Die Kartenspalte steht auf "Content Layout: Row"
   (.fusion-content-layout-row) und ist damit ein UMBRECHENDER Flex-Row mit
   zwei Zeilen – Bild oben, Inhalt unten. Da align-content auf stretch steht,
   verteilt der Browser den freien Platz der gleich hohen Karten JE ZUR
   HÄLFTE auf beide Zeilen. Bei kurzem Text wächst dadurch der Bildbereich
   unter dem Bild mit und schiebt die Überschrift nach unten: gemessen 200 /
   213,6 / 227,2 px Bildbereich bei identisch 200 px hohem Bild.

   Lösung: Spalte auf Column umstellen (Avada setzt row, deshalb
   !important), Bildbereich fix auf Inhaltshöhe, Inhaltszeile bekommt den
   Rest. Deren eigenes align-content: space-between hält Titel/Text oben und
   den Button unten.
   ============================================================ */

.fusion-post-cards li.post-card > .fusion-column-wrapper {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

/* line-height: 0 entfernt die Inline-Lücke unter dem Bild.
   Der Rahmen bleibt bewusst inline-block – als Block würde das Bild aus
   seinem aspect-ratio heraus auf 355 px wachsen und die Karte überlaufen. */
.fusion-post-cards li.post-card > .fusion-column-wrapper > .fusion-image-element {
  flex: 0 0 auto;
  line-height: 0;
}

.fusion-post-cards li.post-card > .fusion-column-wrapper > .fusion-builder-row-inner {
  flex: 1 1 auto;
}

/* ============================================================
   Rechtstexte: Impressum, Datenschutz, AGB

   Die globalen Avada-Groessen sind fuer Marketingseiten gedacht:
   H2 54px, H3 40px bei 16px Fließtext. Bei zwoelf Paragrafen-
   Ueberschriften wirkt das erschlagend.

   Avada setzt die Groessen ueber CSS-Variablen, deshalb reicht es,
   diese auf dem Container mit .bs-legal neu zu belegen. Kein
   !important noetig, der Rest der Seite bleibt unberuehrt. Eine
   weitere Rechtsseite bekommt die Klasse im Builder unter
   Container > CSS-Klasse.

   Korrigiert nebenbei die verdrehten Abstaende: vorher klebte die
   Ueberschrift am Text darueber (20px) und stand weit von ihrem
   eigenen Abschnitt entfernt (59px).
   ============================================================ */

.bs-legal {
  --h2_typography-font-size: 26px;
  --h2_typography-line-height: 1.3;
  --h2_typography-margin-top: 2.6rem;
  --h2_typography-margin-bottom: 0.6rem;

  --h3_typography-font-size: 20px;
  --h3_typography-line-height: 1.35;
  --h3_typography-margin-top: 2rem;
  --h3_typography-margin-bottom: 0.5rem;

  /* H4 war global 30px und damit groesser als die H3 darueber */
  --h4_typography-font-size: 17px;
  --h4_typography-line-height: 1.4;
  --h4_typography-margin-top: 1.5rem;
  --h4_typography-margin-bottom: 0.4rem;
}

/* Erste Ueberschrift ohne Abstand nach oben */
.bs-legal .fusion-text > h2:first-child,
.bs-legal .fusion-text > h3:first-child {
  margin-top: 0;
}

/* Handy: etwas kompakter */
@media (max-width: 640px) {
  .bs-legal {
    --h2_typography-font-size: 22px;
    --h2_typography-margin-top: 2.2rem;
    --h3_typography-font-size: 18px;
    --h3_typography-margin-top: 1.6rem;
    --h4_typography-font-size: 16px;
  }
}

/* ============================================================
   Scroll-Animationen: Rueckfallebene

   Avada blendet animierte Elemente mit .fusion-animated auf
   visibility:hidden und macht sie erst sichtbar, wenn sie in den
   Viewport scrollen. Wer "Bewegung reduzieren" im Betriebssystem
   aktiviert hat, bekommt den Inhalt sofort und ohne Animation.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .fusion-animated {
    visibility: visible !important;
    animation: none !important;
  }
}