/*
Theme Name: Avada Child
Description: Child Theme für Avada – BrotherSeat / fabsbehrens.de
Author: team;iken
Template: Avada
Version: 1.3.1
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;
  }
}

/* ============================================================
   Mobil-Feinschliff (gemessen bei 375 px)
   ============================================================ */

@media (max-width: 640px) {

  /* 1. Lange deutsche Komposita und URLs sprengten den Container.
     Gemessen: H1 "Datenschutzerklärung" 374px in 315px Spalte,
     H2 "§ 5 Aufrechnung/Zurückbehaltungsrecht" 399px, die
     DataPrivacyFramework-URL 441px. hyphens:auto greift, weil das
     Dokument lang="de" trägt. */
  .post-content h1,
  .post-content h2,
  .post-content h3,
  .post-content h4,
  .fusion-title h1,
  .fusion-title h2,
  .fusion-title h3 {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .bs-legal .fusion-text p,
  .bs-legal .fusion-text li,
  .bs-legal .fusion-text h2,
  .bs-legal .fusion-text h3,
  .bs-legal .fusion-text h4 {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Lange Links hart umbrechen statt trennen */
  .bs-legal .fusion-text a {
    word-break: break-word;
  }

  /* 2. Maßzeichnungen waren auf dem Handy unlesbar: vier Zeichnungen
     in 279px, die Seitenansicht nur 69px breit bei 12px Maßzahlen.
     Größere Grundhöhe skaliert alle vier mit (69 -> 86px breit). */
  .single-angebot .bs-masse {
    --bs-masse-h: 150px;
  }

  .single-angebot .bs-masse__num,
  .single-angebot .bs-masse__vnum {
    font-size: 13px;
  }

  /* 3. Der Kontakt-Button im Header war 34px hoch – zu klein fuer
     den Daumen. 44px ist die gaengige Mindestgroesse. */
  .fusion-tb-header .fusion-button,
  .fusion-header .fusion-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   Mobilmenue: Dropdown wurde vom Header abgeschnitten

   Der Header-Container traegt aus dem Avada-Template inline
   --awb-overflow: hidden (zusammen mit border-radius 0 0 8px 8px
   fuer die abgerundeten unteren Ecken). Der Container ist nur 69px
   hoch, das aufgeklappte Menue 330px – es wurde also komplett
   weggeschnitten. Der Burger reagierte (aria-expanded wechselte,
   das Icon wurde zum X), sichtbar war nichts.

   Das Clipping ist hier entbehrlich: Der Header hat kein
   Hintergrundbild, und border-radius beschneidet den Hintergrund
   ohnehin selbst. overflow:hidden wirkt nur auf Kindelemente –
   und das einzige, was hier herausragt, ist genau das Menue.
   ============================================================ */

@media (max-width: 640px) {
  .fusion-tb-header .fusion-fullwidth {
    overflow: visible !important;
  }
}