/* =========================================================
   Doradoo - Banner der Startseite, neue Form
   Pfad: <front>   Alle Breiten (Desktop und Handy)

   Gehoert zur JS-Regel 'doradoo_startseite_banner_js'.
   Die Folien kommen aus der View 'Startseite Slider'
   (/slider-folien), diese Datei gibt ihnen nur die Form:
   links Text, rechts Bild, wie im gemeinsamen Entwurf.

   Absichtlich NICHT in einer Medienabfrage eingeklammert:
   den Banner gibt es auch auf dem Handy, und die neuen Folien
   ersetzen die alten auf jeder Breite.
   ========================================================= */

/* ---------- 1. Der alte Kasten wird zurueckgedreht ---------- */
/* Der Handblock (/admin/content/block/4) bringt eigenes CSS mit:
   feste Hoehe 400px, ein weisser Verlauf ueber dem unteren Teil
   jeder Folie und ein absolut gesetzter Knopf. Das passt zur
   alten Vollbild-Optik, nicht zur neuen Karte. */
.homepage-layout .swiper {
  height: auto !important;
  /* Kein seitlicher Innenabstand: overflow:hidden schneidet am
     Rahmen ab, nicht am Innenabstand - sonst lugt rechts ein
     Streifen der naechsten Folie hervor. Der Rand kommt an die
     Karte selbst. */
  /* 7px Luft zwischen Kategorie-Reihe und Banner - ganz ohne
     Abstand war es zu gedraengt (Wunsch vom 30.08.). */
  padding: 7px 0 0 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

/* Der weisse Verlauf ueber dem Bild muss weg - er wuerde jetzt
   mitten durch die Karte laufen. */
.homepage-layout .swiper .swiper-slide.dd-folie::after {
  content: none !important;
  display: none !important;
}

.homepage-layout .swiper .swiper-slide.dd-folie {
  background: none !important;
  background-color: transparent !important;
  height: auto !important;
  display: block !important;
}

/* Waehrend die Folien geholt werden: alte Folien unsichtbar,
   aber der Platz bleibt stehen, damit die Seite nicht springt. */
.homepage-layout .swiper.dd-warten .swiper-slide {
  visibility: hidden !important;
}

/* ---------- 2. Die Karte ---------- */
.homepage-layout .dd-banner {
  /* Der Banner ist buendig mit den Kreisen: linke Kante auf der
     linken Kante des ersten Kreises, rechte auf der rechten Kante
     des letzten. Die beiden Werte misst die Regel
     'doradoo_startseite_kreise_js' und legt sie als Variable ab -
     eine feste Zahl ginge nicht, der Abstand haengt von der
     Fensterbreite und der Anzahl Kategorien ab. Der Wert hinter
     dem Komma greift, falls die Kreise einmal nicht da sind. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: var(--dd-bannerrand-links, 20px) !important;
  margin-right: var(--dd-bannerrand-rechts, 20px) !important;
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #2f2f31, #4a4a4d) !important;
  /* Hoeher als der Entwurf: die Kategorie-Reihe darueber wurde
     flacher gemacht, der Platz kommt dem Banner zugute. */
  min-height: 420px !important;
}

.homepage-layout .dd-banner .dd-banner-text {
  padding: 38px 34px !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Die kleine Zeile darueber - im Admin einfach kursiv schreiben */
.homepage-layout .dd-banner .dd-banner-kicker {
  font-family: Montserrat-SemiBold, Montserrat, sans-serif !important;
  font-size: 11.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #F5CC5B !important;
  margin: 0 0 10px !important;
}

.homepage-layout .dd-banner .dd-banner-titel {
  font-family: Montserrat-SemiBold, Montserrat, sans-serif !important;
  font-size: 27px !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 0 10px !important;
}

.homepage-layout .dd-banner .dd-banner-satz {
  font-family: Montserrat, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #d8d8dc !important;
  margin: 0 0 20px !important;
  max-width: 46ch !important;
}

/* ---------- 3. Zaehler ---------- */
.homepage-layout .dd-banner .dd-banner-uhr {
  display: flex !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
}
.homepage-layout .dd-banner .dd-uhr-fach {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  text-align: center !important;
  min-width: 58px !important;
}
.homepage-layout .dd-banner .dd-uhr-zahl {
  display: block !important;
  font-family: Montserrat-SemiBold, Montserrat, sans-serif !important;
  font-size: 19px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
}
.homepage-layout .dd-banner .dd-uhr-wort {
  font-family: Montserrat, sans-serif !important;
  font-size: 9.5px !important;
  letter-spacing: .1em !important;
  color: #b9b9c0 !important;
}

/* ---------- 4. Knopf ---------- */
/* Eigene Klasse statt .slide-button: die alte Klasse ist im Block
   absolut positioniert (bottom 150px, left 80px) und wuerde in der
   Karte an der falschen Stelle kleben. */
.homepage-layout .dd-banner .dd-banner-knopf {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  background: #F5CC5B !important;
  color: #1d1d1f !important;
  border-radius: 24px !important;
  padding: 12px 24px !important;
  font-family: Montserrat-SemiBold, Montserrat, sans-serif !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  transition: background .15s ease !important;
}
.homepage-layout .dd-banner .dd-banner-knopf:hover {
  background: #E7B93F !important;
}

/* ---------- 5. Bild ---------- */
/* Der Kasten ist absichtlich durchsichtig: das Bild soll in den
   dunklen Farbverlauf der Karte hineinlaufen, nicht auf einer
   zweiten Flaeche liegen. */
.homepage-layout .dd-banner .dd-banner-bild {
  position: relative !important;
  overflow: hidden !important;
  background: none !important;
  min-height: 420px !important;
}
.homepage-layout .dd-banner .dd-banner-bild img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  /* Weicher Uebergang statt harter Kante: das Bild wird nach links
     hin durchsichtig und verschmilzt mit der Textflaeche. mask statt
     einer aufgelegten Flaeche - so passt es zu JEDEM Bild, egal
     welche Farbe es hat. -webkit- fuer Safari. */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 16%, rgba(0,0,0,0.75) 34%, #000 52%) !important;
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 16%, rgba(0,0,0,0.75) 34%, #000 52%) !important;
}

/* ---------- 6. Punkte und Pfeile ---------- */
/* Im Block sitzen die Punkte 100px ueber dem unteren Rand - das
   war fuer die alte Vollbildfolie gedacht. Jetzt gehoeren sie
   unter die Karte. */
.homepage-layout .swiper .swiper-pagination {
  position: static !important;
  bottom: auto !important;
  margin-top: 14px !important;
  padding-bottom: 4px !important;
}
.homepage-layout .swiper .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;
  border: 0 !important;
  background: #d4d4da !important;
  margin: 0 4px !important;
}
.homepage-layout .swiper .swiper-pagination-bullet-active {
  background: #2f2f31 !important;
  width: 20px !important;
  border-radius: 20px !important;
}

/* ---------- 7. Handy und Tablet ---------- */
/* Unter 1240px wird aus den zwei Spalten eine: Bild oben,
   Text darunter. Der Text bleibt lesbar, das Bild bleibt Bild. */
@media screen and (max-width: 1239px) {
  .homepage-layout .swiper {
    padding: 14px 0 0 !important;
  }
  .homepage-layout .dd-banner {
    margin: 0 14px !important;
  }
  .homepage-layout .dd-banner {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border-radius: 14px !important;
    /* Swiper macht alle Folien so hoch wie die laengste. Ohne
       height:100% blieb unter den kuerzeren Karten eine weisse
       Luecke stehen (gemessen: Karte endete bei 603px, die Punkte
       standen erst bei 698px). */
    height: 100% !important;
    align-content: start !important;
  }
  /* Bild zuerst - erst das Bild, dann die Worte */
  .homepage-layout .dd-banner .dd-banner-bild {
    order: 1 !important;
    min-height: 0 !important;
    height: 190px !important;
  }
  /* Auf dem Handy sitzt das Bild oben - der Uebergang gehoert
     deshalb nach unten, nicht nach links. */
  .homepage-layout .dd-banner .dd-banner-bild img {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0.55) 82%, rgba(0,0,0,0) 100%) !important;
    mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0.55) 82%, rgba(0,0,0,0) 100%) !important;
  }
  .homepage-layout .dd-banner .dd-banner-text {
    order: 2 !important;
    padding: 20px 18px 22px !important;
  }
  .homepage-layout .dd-banner .dd-banner-titel {
    font-size: 20px !important;
  }
  .homepage-layout .dd-banner .dd-banner-satz {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }
  .homepage-layout .dd-banner .dd-uhr-fach {
    min-width: 48px !important;
    padding: 7px 9px !important;
  }
  .homepage-layout .dd-banner .dd-uhr-zahl {
    font-size: 17px !important;
  }
  .homepage-layout .dd-banner .dd-banner-knopf {
    padding: 11px 20px !important;
    font-size: 13px !important;
  }
}

/* Ganz schmale Geraete: der Zaehler darf umbrechen */
@media screen and (max-width: 400px) {
  .homepage-layout .dd-banner .dd-banner-uhr {
    flex-wrap: wrap !important;
    gap: 7px !important;
  }
}

/* ---------- 8. Der Abschnitt darunter ---------- */
/* Das Theme zieht die Anbieter-Reihe mit margin-top: -220px nach
   oben - sie sollte auf dem alten Vollbild-Banner liegen, dafuer
   war auch der weisse Verlauf gedacht. Mit der neuen Karte frisst
   dieser Zug den unteren Kartenrand und die Punkte weg.
   Nachgemessen: Karte endet bei 687px, die Reihe begann bei 628px. */
.homepage-layout .shops-companies {
  margin-top: 8px !important;
}

/* Auf dem Desktop liegt zwischen Banner und Anbieter-Reihe noch ein
   leerer Block von 125px Hoehe aus dem Theme. Mit 8px Abstand klaffte
   dort ein weisses Band von 133px. Ein Stueck zurueckziehen. */
@media screen and (min-width: 1240px) {
  .homepage-layout .shops-companies {
    margin-top: -100px !important;
  }
}