/* =========================================================
   Doradoo - Startseite Desktop, neue Fassung
   Pfad: <front>   Breite: ab 1240px

   Warum eine eigene Regel: die alte Regel 'Doradoo - Startseite'
   laedt auf ALLEN Seiten (Bedingung nur 'Theme doradoo'). Diese hier
   gilt nur fuer die Startseite und laesst sich einzeln abschalten,
   ohne die frueheren Anpassungen zu verlieren.

   Alles ist doppelt eingegrenzt:
     .homepage-layout       - nur die Startseite
     @media min-width 1240 - nur Desktop, Handy bleibt unberuehrt
   ========================================================= */

@media screen and (min-width: 1240px) {

/* ---------------------------------------------------------
   dd-feste-kante
   Bis jetzt richteten sich Slider, Konto-Streifen, Shops und
   Neue Anzeigen an der Aussenkante des aeussersten Kategorie-
   Kreises aus. Die wandert aber mit der Fensterbreite, weil die
   Kachel flex: 1 1 0 hat: gemessen 24 px bei 1240, 30 px bei
   1470, 34 px bei 1600. Der Kopfbereich hat seine eigene Logik
   (20 bzw. 15 px) und gilt fuer alle Seiten - er kann die
   gemessenen Variablen nicht lesen, ohne beim Seitenwechsel zu
   springen.
   Darum jetzt eine feste Kante bei 30 px fuer alles. Die
   Variablen werden hier ueberschrieben; !important schlaegt den
   Inline-Wert, den die Kreis-Regel misst. Damit stimmen Banner,
   Konto-Streifen, Shops und Inserate mit einer einzigen Zeile.
   Der aeusserste Kreis steht dann je nach Breite bis zu 6 px
   neben dieser Linie - bewusst in Kauf genommen. */
.layout-container.homepage-layout {
  --dd-bannerrand-links: 30px !important;
  --dd-bannerrand-rechts: 30px !important;
}

/* ---------- 1. Registrieren und Anmelden nur fuer Gaeste ---------- */
/* Das Theme gibt section.auth-form immer aus - auch wenn man laengst
   angemeldet ist. Sie nimmt fast einen ganzen Bildschirm ein.
   Erkennungsmerkmal fuer 'angemeldet' ist .name-user-header im Kopf;
   .register-button taugt nicht, den gibt es auch angemeldet noch. */
.layout-container.homepage-layout:has(.name-user-header) section.auth-form {
  display: none !important;
}

/* ---------- 2. Abschnittskoepfe ---------- */
.homepage-layout .lists-wrapper .titles {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  max-width: 1330px !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
}
.homepage-layout .lists-wrapper .titles .title-left {
  font-family: Montserrat-SemiBold, Montserrat, sans-serif !important;
  font-size: 19px !important;
  margin: 0 !important;
  color: #2f2f34 !important;
}
/* Der zweite Titel ist der Link 'Alle Inserate' / 'Alle Anbieter' -
   der gehoert nach rechts und leiser.

   Hier stand frueher > *:last-child. Das ging schief, sobald in der
   Zeile 'Neue Anzeigen' der Umschalter Raster/Liste (.dd-schalter)
   dazukam: der war dann das letzte Kind, bekam den Zug nach rechts -
   und 'Alle Inserate' blieb neben der Ueberschrift kleben (gemessen
   bei x199 statt rechts aussen). Deshalb jetzt ausdruecklich
   .title-right statt 'das letzte Kind'. */
.homepage-layout .lists-wrapper .titles > .title-right {
  margin-left: auto !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 13px !important;
  color: #8b8b93 !important;
}
/* Der Umschalter folgt direkt danach, ganz rechts. */
.homepage-layout .lists-wrapper .titles > .dd-schalter {
  margin-left: 0 !important;
}

/* ---------- 3. Inserate-Karten: eine ruhige, einheitliche Form ---------- */
/* Die Karte selbst: weisser Kasten, weiche Ecken, feiner Rand statt
   harter Schatten. Hoehe waechst mit dem Inhalt, darum keine feste
   Hoehe - sonst haengt der Preis in der Luft. */
.homepage-layout .adv .items > .item {
  height: auto !important;
  min-height: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e6e6ea !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .15s ease, transform .15s ease !important;
}

/* Beim Darueberfahren nur ein leichtes Anheben - nicht mehr */
.homepage-layout .adv .items > .item:hover {
  border-color: #d0d0d8 !important;
  transform: translateY(-2px) !important;
}

/* ---------- 4. Bild der Inseratkarte ---------- */
/* Feste Bildhoehe, damit alle Karten gleich hoch anfangen.
   Bewusst KEIN aspect-ratio: das Raster (display:grid) rechnet die
   Zeilenhoehe daraus nicht mit und schnitt die Karte unten ab.
   object-fit sorgt dafuer, dass hohe und breite Bilder gleich
   aussehen und nicht verzerrt werden. */
.homepage-layout .adv .items > .item .image {
  position: relative !important;
  width: 100% !important;
  height: 200px !important;
  min-height: 200px !important;
  overflow: hidden !important;
  background: #f2f2f5 !important;
}
.homepage-layout .adv .items > .item .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Herz oben rechts: weisser Kreis, damit es auf jedem Bild lesbar ist */
.homepage-layout .adv .items > .item .image .pin {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.92) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------- 5. Text der Inseratkarte ---------- */
/* Das Theme gibt dem Textteil feste Hoehen mit:
     .adv .item .description    { height: 174px }
     .adv .item .content-section{ height:  88px }
   Damit wurde der Titel abgeschnitten und die untere Zeile ragte
   aus der Karte heraus. Beide duerfen mitwachsen. */
.homepage-layout .adv .items > .item .description,
.homepage-layout .adv .items > .item .description .content-section {
  height: auto !important;
  max-height: none !important;
}

.homepage-layout .adv .items > .item .description {
  padding: 12px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Wichtig: der Theme-Kasten .content-section hat overflow:hidden.
   In einer Flex-Spalte wuerde er zusammenschrumpfen und den Titel
   abschneiden - er war nur noch 5px hoch. flex:0 0 auto haelt ihn
   auf seiner natuerlichen Hoehe. */
.homepage-layout .adv .items > .item .description > .content-section {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* Das Theme setzt 16px Abstand ueber dem Titel - zusammen mit dem
   neuen Innenabstand der Karte wird das zu viel Luft. */
.homepage-layout .adv .items > .item .description .title-category {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Titel: zwei Zeilen, danach drei Puenktchen. So bleiben lange und
   kurze Titel gleich hoch und die Preiszeile steht ueberall gleich. */
.homepage-layout .adv .items > .item .description .title-category > a {
  font-family: Montserrat-SemiBold, Montserrat, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: #1c1c1e !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 40px !important;
  margin: 0 0 8px !important;
}

/* ---------- 6. Untere Zeile: Preis, Anbieter, Datum ---------- */
/* Vorher standen Preis, Logo und Datum unterschiedlich hoch.
   Jetzt: Preis gross und links, Datum klein und rechts,
   das Anbieterlogo davor. margin-top:auto drueckt die Zeile
   immer an den unteren Kartenrand. */
.homepage-layout .adv .items > .item .description .bottom-section {
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid #f0f0f3 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  row-gap: 8px !important;
  column-gap: 8px !important;
}
/* Zeile 1 links: Anbieterlogo, Haken, SHOP-Zeichen.
   Das Theme gibt dem Kasten volle Breite - darum width:auto. */
.homepage-layout .adv .items > .item .bottom-section .logo-button {
  flex: 0 0 auto !important;
  width: auto !important;
  order: 1 !important;
  gap: 6px !important;
}
/* Zeile 1 rechts: der Preis */
.homepage-layout .adv .items > .item .bottom-section .price {
  order: 2 !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  text-align: right !important;
  font-family: Montserrat-Bold, Montserrat, sans-serif !important;
  font-size: 17px !important;
  color: #1c1c1e !important;
  white-space: nowrap !important;
}
/* Waehrung etwas kleiner und leiser als die Zahl */
.homepage-layout .adv .items > .item .bottom-section .price .currency {
  font-family: Montserrat, sans-serif !important;
  font-size: 13px !important;
  color: #6b6b73 !important;
  margin-right: 3px !important;
}
/* Zeile 2: Ort, Merkzettel, Datum - eigene Zeile ueber die volle
   Breite, gleichmaessig verteilt. flex-basis 100% erzwingt den Umbruch. */
.homepage-layout .adv .items > .item .bottom-section .info-node {
  order: 3 !important;
  flex: 1 0 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
}
.homepage-layout .adv .items > .item .bottom-section .info-node .date {
  font-family: Montserrat, sans-serif !important;
  font-size: 12px !important;
  color: #8b8b93 !important;
  white-space: nowrap !important;
}

/* ---------- 7. Shop-Karten: gleiche Form wie die Inserate ---------- */
/* Bisher waren Shop-Karten schmaler und anders geformt als die
   Inseratkarten. Gleiche Rundung, gleicher Rand, gleiche Ruhe. */
.homepage-layout .shops-companies .item {
  background: #ffffff !important;
  border: 1px solid #e6e6ea !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .15s ease, transform .15s ease !important;
}
.homepage-layout .shops-companies .item:hover {
  border-color: #d0d0d8 !important;
  transform: translateY(-2px) !important;
}

/* Kopfbild des Shops flacher als beim Inserat, es ist nur Schmuck */
.homepage-layout .shops-companies .item > .image {
  width: 100% !important;
  height: 104px !important;
  overflow: hidden !important;
  background: #f2f2f5 !important;
}
.homepage-layout .shops-companies .item > .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Der Inhalt darunter, Profilbild ragt ins Kopfbild hinein */
.homepage-layout .shops-companies .item .content-section {
  padding: 12px 13px 8px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
/* ACHTUNG: doradoo-adjusments.css deckelt die Huelle mit
   max-width: 40px (und main.css mit 56px). Ohne max-width: none
   bleibt die Huelle 40px schmal, waehrend das Bild 62px breit ist -
   das Bild steht dann 11px zu weit rechts und sitzt sichtbar
   nicht in der Kartenmitte. min-width haelt sie zusaetzlich fest. */
.homepage-layout .shops-companies .item .content-section .profile-img {
  width: 30px !important;
  min-width: 30px !important;
  max-width: none !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  border: 0 !important;
  background: none !important;
}
/* Nur das Bild traegt den Ring - sonst gibt es zwei Raender */
/* Das Bild muss die Huelle genau ausfuellen. Beim Verkleinern von 62
   auf 30px war zuerst nur die Huelle kleiner - das Bild blieb 62px
   und lag ueber dem Namen (die Huelle hat overflow: visible). Der
   weisse Ring von 3px wuerde bei 30px zu dick wirken, deshalb 2px. */
.homepage-layout .shops-companies .item .content-section .profile-img img {
  width: 30px !important;
  min-width: 30px !important;
  max-width: none !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-sizing: border-box !important;
  border: 2px solid #ffffff !important;
  background: #ffffff !important;
  display: block !important;
}

/* Shopname und Untertitel */
/* Der Textteil steht jetzt rechts neben dem 30px-Kreis, also in einer
   schmalen Spalte. Name und Untertitel bekommen deshalb je eine Zeile
   mit Auslassungspunkten - sonst waechst die Karte ungleich hoch.
   Umgestellt am 30.08. auf Ninos Wahl 'kleiner Kreis wie im Entwurf'. */
.homepage-layout .shops-companies .item .content-section .title-category {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
.homepage-layout .shops-companies .item .content-section .title-category .title-up {
  font-family: Montserrat-SemiBold, Montserrat, sans-serif !important;
  font-size: 12.5px !important;
  color: #1c1c1e !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.homepage-layout .shops-companies .item .content-section .title-category .title-buttom {
  font-family: Montserrat, sans-serif !important;
  font-size: 11px !important;
  color: #8b8b93 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Bewertungssterne mittig und mit Luft */
.homepage-layout .shops-companies .item .review-section {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 0 13px 10px !important;
}

/* Knopf 'Besuchen' auf volle Breite, unten angeklebt.
   Achtung: im Theme ist der UMSCHLIESSENDE Kasten .button selbst gelb
   und nur 40px hoch, der Link darin ist hoeher - dadurch schaute
   ein zweiter gelber Klecks hinter dem Knopf hervor. Darum:
   Kasten farblos und ohne feste Hoehe, die Farbe traegt der Link. */
.homepage-layout .shops-companies .item .button {
  margin-top: auto !important;
  padding: 0 14px 14px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  background: none !important;
  border-radius: 0 !important;
  display: block !important;
}
.homepage-layout .shops-companies .item .button > a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.2 !important;
  text-align: center !important;
  padding: 10px 0 !important;
  border-radius: 10px !important;
  font-family: Montserrat-SemiBold, Montserrat, sans-serif !important;
  font-size: 13px !important;
}

/* ---------- 8. Abstand zwischen den Abschnitten ---------- */
/* Vorher klebten die Bloecke unterschiedlich weit auseinander.
   Ein gleicher Abstand macht die Seite sofort ruhiger. */
.homepage-layout .lists-wrapper {
  margin-bottom: 46px !important;
}
.homepage-layout section.states,
.homepage-layout section.advantages {
  margin-top: 46px !important;
  margin-bottom: 46px !important;
}

/* ---------- 9. Kategorie-Kreise (Desktop) ---------- */
/* Gebaut von der JS-Regel 'doradoo_startseite_kreise_js'. Die Kacheln
   sind Kopien der Handy-Reihe aus dem Kopfbereich; der Klick wird an
   das Original weitergereicht. Hier steht nur Optik - kein Wort. */
.homepage-layout .dd-kreise {
  display: flex !important;
  /* Kein Trennstrich mehr - der Banner sitzt jetzt direkt darunter */
  border-bottom: 0 !important;
  align-items: flex-start !important;
  gap: 4px !important;
  /* Flacher gemacht, damit der Banner darunter hoeher werden kann
     und weiter nach oben rutscht (Wunsch vom 30.08.). */
  padding: 10px 16px 2px !important;
  border-bottom: 1px solid #f0f0f3 !important;
  background: #ffffff !important;
}

/* flex: 1 1 0 statt fester Breite - dann passt die Reihe auf jede
   Fensterbreite ab 1240px, egal wie viele Kategorien es gibt.
   min-width: 0 ist noetig, sonst schiebt der laengste Text auf. */
.homepage-layout .dd-kreise .dd-kreis {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-align: center !important;
  cursor: pointer !important;
}

.homepage-layout .dd-kreise .dd-rund {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 5px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  border: 2px solid #ffffff !important;
  background: #F7E4A8 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.homepage-layout .dd-kreise .dd-rund img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Die drei Sonderkacheln (Shop hinzufuegen, Anzeige hinzufuegen, Alle)
   bleiben hell - genau wie in der Handy-Reihe. */
.homepage-layout .dd-kreise .dd-rund.dd-shop,
.homepage-layout .dd-kreise .dd-rund.dd-anzeige,
.homepage-layout .dd-kreise .dd-rund.dd-alle {
  background: #ffffff !important;
  border-color: #e6e6ea !important;
}

.homepage-layout .dd-kreise .dd-kreis:hover .dd-rund {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.14) !important;
}

/* Beschriftung hoechstens zweizeilig, damit die Reihe nicht
   unterschiedlich hoch wird. Das laengste Wort ist heute
   'Kleidung & Accessoires'. */
.homepage-layout .dd-kreise .dd-wort {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  color: #3a3a3f !important;
  padding: 0 1px !important;
  /* Das Theme bricht Woerter mitten drin um - dadurch stand ein
     einzelnes 'r' von 'Tierzubehoer' auf der zweiten Zeile.
     Hier gilt wieder der normale Wortumbruch. */
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  /* Platz fuer zwei Zeilen reservieren - sonst sind Kacheln mit
     kurzem Wort niedriger als die mit langem und die Reihe wirkt
     unruhig (gemessen: 77px gegen 92px). */
  min-height: 25px !important;
}


/* ---------- 10. Konto-Streifen ---------- */
/* Gebaut von der JS-Regel 'doradoo_startseite_konto_js'.
   Steht zwischen Kopfbereich und Kategorie-Kreisen und nur
   fuer Angemeldete. Hier steht nur Optik - kein Wort.
   Die seitlichen Abstaende kommen aus denselben gemessenen
   Variablen wie beim Banner, damit Streifen, Kreise und
   Banner links und rechts auf einer Linie stehen. */
.homepage-layout .dd-konto {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: #ffffff !important;
  padding: 14px var(--dd-bannerrand-rechts, 20px) 4px var(--dd-bannerrand-links, 20px) !important;
}

/* Begruessung. Wird der Name lang, wird er abgeschnitten statt
   die Kacheln zu verschieben. */
.homepage-layout .dd-konto .dd-konto-gruss {
  font-family: 'Montserrat-SemiBold', 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  color: #2f2f34 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.homepage-layout .dd-konto .dd-konto-kacheln {
  display: flex !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

/* max-width: none ist noetig - das Theme deckelt Links sonst. */
.homepage-layout .dd-konto .dd-kachel {
  display: block !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e9e9ee !important;
  border-radius: 12px !important;
  padding: 8px 15px !important;
  min-width: 108px !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  text-decoration: none !important;
  color: #2f2f34 !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.homepage-layout .dd-konto .dd-kachel:hover {
  border-color: #F5CC5B !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
}

/* Die Zahl. Montserrat ist als eigene Schriftfamilie geladen -
   font-weight wirkt nicht, die Staerke kommt ueber font-family. */
.homepage-layout .dd-konto .dd-kachel-wert {
  display: block !important;
  font-family: 'Montserrat-SemiBold', 'Montserrat', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  color: #2f2f34 !important;
}
.homepage-layout .dd-konto .dd-kachel-wort {
  display: block !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  color: #8b8b93 !important;
  white-space: nowrap !important;
}

/* Erste Kachel (Meine Inserate) hervorgehoben - wie im Entwurf. */
.homepage-layout .dd-konto .dd-kachel-an {
  border-color: #F5CC5B !important;
  background: #FDF3D8 !important;
}

/* ---------- 11. Leerraum aus den Zwischenbloecken ----------
   Das Theme gibt JEDEM Block auf oberster Ebene ein
   padding-top: 125px - gedacht als Platzhalter fuer den fixierten
   Kopfbereich. Gebraucht wird das nur beim ERSTEN Block (der mit
   Konto-Streifen, Kreisen und Banner) - der bleibt unangetastet.

   Nachgemessen auf dem Desktop:
     Block mit .mobile_section_shops  -> 125 px, Inhalt unsichtbar
     Block mit section.auth-form      -> 125 px, Inhalt unsichtbar (angemeldet)
     Block mit section.advantages     -> 125 px unnoetiger Abstand
   Zusammen 375 px Leerraum auf jeder Desktop-Startseite.

   Gesucht wird ueber den Inhalt (:has), nicht ueber :nth-child -
   sonst zeigt die Regel auf den falschen Block, sobald das Theme
   die Reihenfolge aendert. */

/* Handy-Abschnitt 'Shops und Unternehmen' - auf dem Desktop vom Theme
   ausgeblendet, der Platzhalter blieb aber stehen. */
.layout-container.homepage-layout > div:has(> .mobile_section_shops) {
  padding-top: 0 !important;
}

/* shops-companies-abstand
   Das Theme zieht .shops-companies mit margin-top: -100px nach oben.
   Solange der Block darueber seine 125 px Polster hatte, blieben davon
   25 px Abstand uebrig. Seit die Polster weg sind, rutscht die Sektion
   in den Banner hinein und der Titel verschwindet dahinter.
   Darum den Abstand hier direkt setzen - 25 px, genau wie vorher. */
.layout-container.homepage-layout .shops-companies {
  margin-top: 25px !important;
}

/* Registrierbox - NUR wenn jemand angemeldet ist. Fuer Gaeste ist die
   Box sichtbar und braucht ihren Abstand. Dieselbe Erkennung wie in
   Abschnitt 1. */
.layout-container.homepage-layout:has(.name-user-header) > div:has(> section.auth-form) {
  padding-top: 0 !important;
}

/* 'Vorteile nutzen' - der Abschnitt hat Inhalt, der 125-px-Platzhalter
   darueber ist trotzdem unnoetig. Den Abstand zum Abschnitt darueber
   macht Abschnitt 8 (46 px). */
.layout-container.homepage-layout > div:has(> section.advantages) {
  padding-top: 0 !important;
}

/* ---------------------------------------------------------
   12. Shops und Unternehmen - Karussell in Vorlagenbreite
   Die Vorlage zeigt fuenf gleich breite Karten nebeneinander,
   randbuendig. Das Theme-Karussell zeigte 5 ganze und 2 ange-
   schnittene Karten zu je 225 px und hielt 155 Karten im
   Dokument. doradoo_startseite_shops_js kuerzt auf 20 Anbieter
   und stellt Owl neu ein: 5 Karten je Ansicht, Sprung um 5,
   Pfeile ja, Punkte nein, keine Klone. Dasselbe Skript setzt
   die Klasse dd-shops-owl. Owl fuellt den 1430 px breiten
   Behaelter von sich aus genau aus: 5 Karten zu 273.2 px und
   4 Luecken zu 16 px. Eine eigene Breite braucht es nicht.
   --------------------------------------------------------- */

/* Gleiche Breite wie der Slider. Der Slider sitzt mit den
   gemessenen Randwerten der Kreisreihe bei 30..1440 (1410 px),
   die Shops-Reihe fuellte den Inhaltsbereich von .lists-wrapper
   und war mit 20..1450 (1430 px) je 10 px breiter. Statt fester
   10 px werden dieselben Variablen gelesen wie beim Slider und
   beim Konto-Streifen, damit alles auf einer Linie bleibt, wenn
   sich Fensterbreite oder Anzahl Kategorien aendern. Abgezogen
   werden die 20 px Innenabstand von .lists-wrapper. */
.homepage-layout .shops-companies,
.homepage-layout .adv {
  margin-left: calc(var(--dd-bannerrand-links, 30px) - 20px) !important;
  margin-right: calc(var(--dd-bannerrand-rechts, 30px) - 20px) !important;
  /* Das Theme setzt hier eine feste Breite. Ohne width: auto
     wirken die Aussenabstaende nicht - der Block wurde nur nach
     rechts geschoben statt schmaler. Wie ueberall gilt: eine
     Breite gegen Theme-Regeln braucht auch max-width. */
  width: auto !important;
  max-width: none !important;
}

/* dd-titel-buendig
   Das Theme rueckt .titles mit margin: 50px ein - die Ueberschrift
   stand bei x 70..1400, die Karten bei 30..1440. Die Vorlage hat
   Kopfzeile und Karten buendig. Gilt fuer 'Shops und Unternehmen'
   und 'Neue Anzeigen', beide benutzen dieselbe Klasse. width und
   max-width muessen mit, weil das Theme dort 1330 px festschreibt. */
.homepage-layout .lists-wrapper .titles {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* Fuenf Inserate je Reihe statt vier - auf Wunsch, die Vorlage
   hatte hier vier. So stehen Inserate und Shops in derselben
   Rasterbreite untereinander. */
.homepage-layout .adv .items {
  grid-template-columns: repeat(5, 1fr) !important;
}

/* ---------------------------------------------------------
   dd-schild-preis - Anbieterzeile der Inseratkarten
   --------------------------------------------------------- */

/* Der Preis hatte vom Theme width und max-width 182 px. Mit dem
   Anbieterblock davor (78 px) braucht die Zeile 260 px; seit die
   Karten von rund 340 auf 271 px geschrumpft sind, stehen aber nur
   241 px zur Verfuegung - der Preis brach auf eine eigene Zeile um
   und sass dort mitten in der Karte. Ohne feste Breite ist er nur
   noch so breit wie sein Inhalt und steht wieder rechts neben dem
   Logo, das space-between der Zeile erledigt den Rest. */
.homepage-layout .adv .items > .item .bottom-section > .price {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

/* dd-avatar-huelle
   Die Huelle .profile-img hat keine feste Breite und richtet sich
   nach dem Seitenverhaeltnis des Anbieterbildes: gemessen 39 px
   bei fuenf von sechs Karten, aber nur 22 px bei einer. Dort ragte
   das 40-px-Bild heraus und verdeckte 12 der 20 px des Schilds.
   Feste 40 px machen alle Karten gleich; der Avatar bleibt dabei
   genau so gross wie vorher. object-fit: cover, damit hochformatige
   Bilder nicht verzerren. Wie immer gilt: eine Breite gegen
   Theme-Regeln braucht min-width und max-width dazu. */
.homepage-layout .adv .items > .item .bottom-section .profile-img,
.homepage-layout .adv .items > .item .bottom-section .profile-img img {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 0 !important;
  max-height: 40px !important;
}
.homepage-layout .adv .items > .item .bottom-section .profile-img img {
  object-fit: cover !important;
}

/* Das Schild - die gruene Plakette am Avatar - war 32 px und damit
   fast so gross wie das Anbieterbild. Auf 20 px verkleinert.
   Huelle und Bild gehoeren zusammen geaendert, sonst bleibt eines
   von beiden stehen. Der Avatar bleibt auf Ninos Wunsch bei 40 px,
   die Plakette liegt also weiterhin an seinem Rand. */
.homepage-layout .adv .items > .item .bottom-section .shield,
.homepage-layout .adv .items > .item .bottom-section .shield img {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 0 !important;
  max-height: 20px !important;
}

/* Punkte weg - bei vier Ansichten sagen die Pfeile genug. */
.shops-companies .owl-dots {
  display: none !important;
}

/* Pfeile: runde weisse Knoepfe auf Hoehe des Kopfbildes, je
   6 px ueber die Aussenkante der ersten und der letzten Karte
   hinaus. Das Pfeilzeichen steht hier im Stylesheet und nicht
   im Skript. */
.shops-companies .owl-nav {
  margin: 0 !important;
}
.shops-companies .owl-nav button.owl-prev,
.shops-companies .owl-nav button.owl-next {
  position: absolute !important;
  top: 53px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e6e6ea !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important;
  color: #3a3a40 !important;
  font-size: 0 !important;
  z-index: 3 !important;
  opacity: 1 !important;
  transition: box-shadow .15s, border-color .15s !important;
}
.shops-companies .owl-nav button.owl-prev { left: -6px !important; }
.shops-companies .owl-nav button.owl-next { right: -6px !important; }
.shops-companies .owl-nav button.owl-prev::before { content: '\2039'; }
.shops-companies .owl-nav button.owl-next::before { content: '\203A'; }
.shops-companies .owl-nav button.owl-prev::before,
.shops-companies .owl-nav button.owl-next::before {
  display: block;
  font-size: 22px;
  line-height: 34px;
}
.shops-companies .owl-nav button.owl-prev:hover,
.shops-companies .owl-nav button.owl-next:hover {
  border-color: #F5CC5B !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18) !important;
}

} /* Ende @media min-width 1240px */

/* ---------------------------------------------------------
   Ausserhalb der Medienabfrage - mit Absicht.
   Zieht jemand das Fenster von breit auf schmal, bleibt die
   gebaute Kreisreihe im Dokument stehen. Sie darf dann nicht
   sichtbar sein, weil das Theme auf dem Handy seine eigene
   Reihe im Kopfbereich zeigt - sonst stuende alles doppelt da.
   --------------------------------------------------------- */
@media screen and (max-width: 1239px) {
  .dd-kreise { display: none !important; }
  .dd-konto  { display: none !important; }
}