/* Eigene Anpassungen – Wohnwagen Gérard
   Bewusst in einer eigenen Datei, damit sie nicht verloren gehen, wenn
   Consent-Tool oder Theme-Dateien ausgetauscht werden. */

/* ------------------------------------------------------------------
   Bewertungs-Badge in der Kopfleiste
   ------------------------------------------------------------------ */
.dj-rating-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;          /* obere Zeile mittig über dem Text */
  line-height: 1.25;
  text-decoration: none;
}
.dj-rb-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dj-rb-score { color: #253c8f; font-size: 15px; font-weight: 700; }
/* zwei Sternreihen übereinander: gefüllter Teil liegt über dem grauen */
.dj-rb-stars {
  position: relative;
  display: inline-block;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}
.dj-rb-stars-bg { color: rgba(37, 60, 143, .25); }
.dj-rb-stars-fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #253c8f;
}
.dj-rb-text { color: #fff; font-size: 12.5px; margin-top: 1px; }
.dj-rb-text strong { font-weight: 700; }

/* Telefonnummer zum Antippen: nur auf kleinen Bildschirmen. Am Rechner
   steht die Nummer bereits im Fließtext der Kopfleiste. */
.dj-tel { display: none; }

/* ------------------------------------------------------------------
   Kopfleiste auf kleinen Bildschirmen
   Aufbau in einer Zeile: Wertung mit Sternen, Telefonnummer zum
   Direktanruf, WhatsApp und die sozialen Netzwerke.
   Der Zusatz "Basierend auf … Bewertungen" entfällt hier zugunsten der
   Telefonnummer – die Sterne allein sagen dasselbe in einem Bruchteil
   des Platzes. Die Mailadresse ist über die fest eingeblendete
   Schaltfläche am linken Rand erreichbar.
   ------------------------------------------------------------------ */
@media (max-width: 800px) {
  .custom-top-header { padding: 7px 12px !important; }
  .custom-top-header .container {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 100% !important;
    width: 100% !important;
  }
  .custom-top-header .w10,
  .custom-top-header .w80,
  .custom-top-header .w102 {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    line-height: 1.2;
  }

  /* Bewertung kompakt: Google-Zeichen, Wertung, Sterne */
  .custom-top-header .w10 { flex: 0 0 auto; }
  .custom-top-header .dj-rating-badge::before {
    content: "\f1a0";                 /* Google */
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    margin-right: 5px;
  }
  .custom-top-header .dj-rating-badge { flex-direction: row; align-items: center; gap: 5px; }
  .custom-top-header .dj-rb-score { font-size: 14px; }
  .custom-top-header .dj-rb-stars { font-size: 12px; letter-spacing: 0; }
  .custom-top-header .dj-rb-text { display: none; }

  /* Direktanruf mit sichtbarer Nummer */
  .custom-top-header .dj-tel {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    color: #fff !important;
    white-space: nowrap;
    flex: 0 0 auto;
    margin-right: 10px;
    text-decoration: none;
  }
  .custom-top-header .dj-tel i { font-size: 12px !important; }
  .custom-top-header .dj-tel .dj-tel-nr { font-size: 12px; font-weight: 600; }

  /* Kontaktzeile: nur WhatsApp behalten, Fliesstext und Mail ausblenden */
  .custom-top-header .w80 {
    font-size: 0 !important;
    gap: 0;
    flex: 0 0 auto;
    margin-left: auto !important;
  }
  .custom-top-header .w80 > a:has(i.fa-envelope) { display: none; }
  .custom-top-header .w80 i.fa-envelope { display: none; }

  /* WhatsApp als rundes Symbol: der Schriftzug belegt 104 px und ließe
     neben Telefon und sozialen Netzwerken keinen Platz mehr. */
  .custom-top-header .w80 a[href*="wa.me"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #25d366;
    color: #fff !important;
    flex: 0 0 auto;
  }
  .custom-top-header .w80 a[href*="wa.me"] img { display: none !important; }
  .custom-top-header .w80 a[href*="wa.me"]::before {
    content: "\f232";
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    color: #fff;                     /* weißes Zeichen auf grünem Grund */
  }

  /* soziale Netzwerke nebeneinander */
  .custom-top-header .w102 { flex: 0 0 auto; gap: 14px; }
  .custom-top-header .w102 a { display: inline-flex; align-items: center; }
  .custom-top-header .w102 i { font-size: 17px !important; margin: 0 !important; padding: 0 !important; }
}

@media (max-width: 400px) {
  .custom-top-header { padding: 6px 9px !important; }
  .custom-top-header .container { gap: 7px; }
  .custom-top-header .dj-rating-badge::before { font-size: 13px; margin-right: 4px; }
  .custom-top-header .dj-rb-score { font-size: 13px; }
  .custom-top-header .dj-rb-stars { font-size: 11px; }
  .custom-top-header .dj-rb-text strong { font-size: 10.5px; }
  .custom-top-header .w80 a[href*="wa.me"] { width: 25px; height: 25px; }
  .custom-top-header .w80 a[href*="wa.me"]::before { font-size: 14px !important; }
  .custom-top-header .dj-tel { margin-right: 7px; gap: 4px; }
  .custom-top-header .dj-tel i { font-size: 11px !important; }
  .custom-top-header .dj-tel .dj-tel-nr { font-size: 11px; }
  .custom-top-header .w102 { gap: 11px; }
  .custom-top-header .w102 i { font-size: 15px !important; }
}

/* ------------------------------------------------------------------
   Google-Bewertungen: mobil eine Karte je Ansicht, durchblätterbar
   ------------------------------------------------------------------ */
@media (max-width: 782px) {
  /* linke Zusammenfassung über die volle Breite */
  .ti-widget.ti-goog.dj-scroll .ti-footer,
  .ti-widget.ti-goog.dj-scroll .ti-reviews-container {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .ti-widget.ti-goog.dj-scroll .ti-footer { text-align: center; margin-bottom: 14px; }
  .ti-widget.ti-goog.dj-scroll .ti-footer .ti-large-logo { justify-content: center; }

  /* genau eine Karte je Ansicht, sauber einrastend */
  .ti-widget.ti-goog.dj-scroll .ti-review-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center;
  }
  .ti-widget.ti-goog.dj-scroll .ti-reviews-container-wrapper {
    scroll-snap-type: x mandatory;
    gap: 0;
  }
  /* Pfeile wieder einblenden – ohne sie käme man mobil nicht weiter */
  .ti-widget.ti-goog.dj-scroll .ti-controls { display: block !important; }
  .ti-widget.ti-goog.dj-scroll .ti-controls .ti-next,
  .ti-widget.ti-goog.dj-scroll .ti-controls .ti-prev {
    width: 34px;
    height: 34px;
    background-color: rgba(255, 255, 255, .95) !important;
  }
  .ti-widget.ti-goog.dj-scroll .ti-controls .ti-prev { left: 2px; }
  .ti-widget.ti-goog.dj-scroll .ti-controls .ti-next { right: 2px; }
}

/* ------------------------------------------------------------------
   Marken-Logos: mobil mehrere gleichzeitig statt nur eines
   ------------------------------------------------------------------ */
@media (max-width: 800px) {
  .logos .fx-carousel-item,
  .logos .swiper-slide,
  .logos .es-carousel li {
    width: 33.333% !important;
    max-width: 33.333% !important;
  }
  .logos img { max-width: 100%; height: auto; }
}
@media (max-width: 480px) {
  .logos .fx-carousel-item,
  .logos .swiper-slide,
  .logos .es-carousel li {
    width: 50% !important;
    max-width: 50% !important;
  }
}


/* ------------------------------------------------------------------
   Schrift in den Aufklappern (Toggles)
   Das Theme setzt dort eine eigene Typografie-Variable, die auf Inter
   zeigt - eine Schrift, die die Seite sonst nirgends verwendet. Der
   Inhalt der Aufklapper soll wie normaler Fließtext aussehen.
   ------------------------------------------------------------------ */
/* Das Theme setzt die Schrift ueber eine Inline-Regel mit
   ID-Selektor (".fx-accordian #accordian-1 .toggle-content"). Dagegen
   kommt man nur mit !important an - eine hoehere Gewichtung waere an
   die zufaellige Nummer der Kennung gebunden. */
.fx-accordian .toggle-content,
.fx-accordian .panel-body,
.fx-faqs-wrapper .fx-accordian .panel-body,
.fx-panel .panel-body,
.fx-panel .panel-body p {
  font-family: inherit !important;
}


/* ------------------------------------------------------------------
   Blogvorschauen: gleiche Höhe
   Die Karten unterscheiden sich nur in der Titelhöhe – zwei bis vier
   Zeilen. Innerhalb einer Zeile gleicht das Raster schon aus, über
   mehrere Zeilen hinweg nicht.

   Reserviert werden vier Zeilen: das ist der längste vorkommende
   Titel, es wird also nichts abgeschnitten. Die Begrenzung greift nur
   als Sicherheit für künftige, noch längere Titel.

   Nur ab 800 px, wo die Karten nebeneinander stehen. Untereinander
   gestapelt wäre reservierter Leerraum sinnlos.
   ------------------------------------------------------------------ */
@media (min-width: 800px) {
  /* 1. Titel: vier Zeilen reservieren (längster vorkommender Titel) */
  .fx-post-grid .entry-title,
  .fx-post-grid .fx-post-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    min-height: 132px;   /* Rückfall: vier Zeilen à 33 px */
    min-height: 4lh;     /* wo die Einheit unterstützt wird */
  }

  /* 2. Vorschaubild: einheitliches Seitenverhältnis. Die Bilder sind
        unterschiedlich proportioniert (204 bis 259 px hoch). */
  .fx-post-grid .fx-flexslider,
  .fx-post-grid .fx-flexslider .slides,
  .fx-post-grid .fx-flexslider .slides > li {
    aspect-ratio: 16 / 9;
    height: auto !important;
    max-height: none;
  }
  .fx-post-grid .fx-flexslider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 3. Anrisstext: leichter Schnitt wie im uebrigen Fliesstext.
        KEINE Mindesthoehe - das Raster gleicht die Karten ohnehin aus.
        Ein frueherer Versuch sprach ".fx-post-content > p" an; das ist
        aber die Zeile mit Autor und Datum, die dadurch auf 72 px
        aufgeblasen wurde. Genau daher der Leerraum nach dem Datum. */
  .fx-post-grid .fx-post-content-container,
  .fx-post-grid .fx-post-content-container p {
    font-family: "Ubuntu Light", Ubuntu, Verdana, Geneva, sans-serif;
    font-weight: 400;
  }
  .fx-post-grid .fx-single-line-meta {
    min-height: 0;
    line-height: 1.5;
  }

  /* 4. Echtes Raster statt Mauerwerk.
        Das Theme setzt die Karten absolut und packt sie bewusst
        ungleich hoch ineinander (Masonry). Damit sind gleiche Höhen
        grundsätzlich nicht erreichbar - auch nicht, wenn Titel, Bild
        und Anriss vereinheitlicht sind: ein Beitrag ohne Titelbild
        bleibt kürzer.

        Deshalb wird die absolute Anordnung aufgehoben und durch ein
        Raster ersetzt. grid-auto-rows: 1fr macht alle Zeilen gleich
        hoch, align-items: stretch alle Karten einer Zeile. */
  .fx-posts-container:has(.fx-post-grid) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 20px;
    height: auto !important;
    /* Der negative Rand gehoerte zur Mauerwerk-Anordnung und wird nicht
       mehr gebraucht. Der Abstand nach unten bleibt erhalten - er
       trennt die Blog-Sektion vom folgenden Bereich. */
    margin: 0 !important;
    padding-bottom: 20px;
    align-items: stretch;
  }
  /* Das Theme haengt ein leeres Aufraeum-Element (.fx-clearfix) an.
     Im Raster belegt es eine ganze Zeile - daher der grosse Leerraum
     unter den Vorschauen. Es wird nicht mehr gebraucht. */
  .fx-posts-container:has(.fx-post-grid) > *:not(article.fx-post-grid) {
    display: none !important;
  }
  .fx-posts-container:has(.fx-post-grid) > article.fx-post-grid {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    /* Der Innenabstand von 20 px je Karte kam aus der Mauerwerk-
       Anordnung (der Behaelter glich ihn mit -20 px aus). Im Raster
       erzeugt er zusaetzlich zum Rasterabstand 55 px Luft zwischen den
       Kaesten. Der Abstand kommt jetzt allein vom Raster. */
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .fx-posts-container:has(.fx-post-grid) > article.fx-post-grid > .fx-post-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /* "Weiterlesen" nach unten schieben, damit es überall auf einer Linie steht */
  .fx-posts-container:has(.fx-post-grid) .fx-post-content-wrapper { flex: 1 1 auto; display: flex; flex-direction: column; }
  .fx-posts-container:has(.fx-post-grid) .fx-meta-info { margin-top: auto; }
}

@media (min-width: 800px) and (max-width: 1099px) {
  .fx-posts-container:has(.fx-post-grid) { grid-template-columns: repeat(2, 1fr); }
}


/* ------------------------------------------------------------------
   Kontaktformular: aktives Feld hervorheben
   Das Feld, in dem gerade geschrieben wird, bekommt den Blauton der
   Überschriften (#283e75). Ohne diese Kennzeichnung ist beim Ausfüllen
   längerer Formulare nicht erkennbar, wo man sich befindet.

   :focus-visible allein reicht nicht - das greift bei Mausklick in ein
   Textfeld nicht überall. Deshalb :focus, und der eigene Fokusrahmen
   des Browsers wird durch den farbigen Rahmen ersetzt.
   ------------------------------------------------------------------ */
.djcf-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.djcf-form textarea:focus,
.djcf-form select:focus,
form.djcf-form input:focus,
.fx-form-form-wrapper input:not([type="submit"]):focus,
.fx-form-form-wrapper textarea:focus,
.fx-form-form-wrapper select:focus,
.post-content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.post-content textarea:focus,
.post-content select:focus {
  border-color: #283e75 !important;
  box-shadow: 0 0 0 1px #283e75 !important;
  outline: none !important;
}

/* Ankreuzfelder und Auswahlknöpfe bekommen einen Ring statt eines
   Rahmens - bei ihnen ist der Rahmen oft vom Browser gezeichnet. */
.post-content input[type="checkbox"]:focus,
.post-content input[type="radio"]:focus,
.djcf-form input[type="checkbox"]:focus,
.djcf-form input[type="radio"]:focus {
  outline: 2px solid #283e75 !important;
  outline-offset: 1px;
}

/* Marken-Logo-Leiste (Tab, Santander, Knaus, Fendt ...) unter den
   Bewertungen: der Slider positioniert die Kacheln per Transform und
   faehrt automatisch weiter. Auf schmalen Bildschirmen lief sich diese
   Positionierung fest - die Leiste blieb leer, obwohl die Bilder
   laengst geladen waren (per Skript nachgeprueft: Bilder vorhanden,
   nur weit ausserhalb des sichtbaren Bereichs verschoben).
   Statt den Fehler im Slider-Skript zu suchen, bekommt die Leiste auf
   Mobilgeraeten/Tablets eine eigene, vom Skript unabhaengige
   Positionierung: normales Scrollen statt Transform, kein Autoplay,
   dafuer zuverlaessig und mit dem Finger wischbar. */
@media (max-width: 1023px) {
  .logos .uxb-swiper {
    overflow: visible !important;
    height: auto !important;
  }
  .logos .swiper-wrapper {
    transform: none !important;
    position: static !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 !important;
  }
  .logos .swiper-wrapper::-webkit-scrollbar { display: none; }
  .logos .swiper-slide {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    scroll-snap-align: center;
  }
}

/* Punkte unter der Logo-Leiste (siehe site.js) - nur dort sichtbar,
   wo die Leiste normal scrollt statt per Slider-Skript zu fahren. */
.dj-logo-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 0 6px;
}
@media (max-width: 1023px) {
  .dj-logo-dots { display: flex; }
}
.dj-logo-dots .dj-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}
.dj-logo-dots .dj-dot.is-active {
  background: #ffffff;
  transform: scale(1.25);
}