/*
Theme Name: Divi Arealdev Child
Theme URI: https://arealdev.local
Description: Child-Theme von Divi. Enthaelt Estatik-Template-Overrides (Warm-/Kaltmiete) unter /estatik4, damit Anpassungen Plugin- und Theme-Updates ueberleben.
Author: HK IT Design
Template: Divi
Version: 1.1.0
Text Domain: divi-arealdev-child
*/

/* Warm-/Kaltmiete Anzeige in den Listing-Karten der Uebersichtsseite
   (templates/front/property/content-archive.php via
   arealdev_es_render_price_block()). Die Einzelseite hat ihren eigenen,
   ImmoScout24-artigen Stats-Header weiter unten. */

/* Warmmiete-/Kaltmiete-Zeilen: "Label: Betrag" sauber untereinander */
.es-dual-price {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.es-dual-price__line {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 6px;
}

.es-dual-price__line-label {
	flex: 0 0 auto;
	width: 78px;
	font-size: 12px;
	font-weight: 600;
	color: #767676;
	white-space: nowrap;
}

.es-dual-price__line .es-price {
	margin-right: 0;
	white-space: nowrap;
}

.es-dual-price__line .es-badge {
	white-space: nowrap;
}

.es-dual-price__hint {
	margin: 6px 0 0;
	max-width: 320px;
	font-size: 11px;
	line-height: 1.4;
	color: #9a9a9a;
	font-style: italic;
	font-weight: 400;
	white-space: normal;
}

/* ─────────────────────────────────────────────
   Bildergalerie: Estatiks eigene, normale (nicht
   randlose) Breite innerhalb von Divis .container -
   die "volle Fensterbreite" wurde wieder entfernt
   (siehe Verlauf: verursachte auf einigen Geraeten
   ein kaum sichtbares "Zu Vermieten"-Badge, liess
   sich nicht zuverlaessig beheben). Behalten wird nur
   die separate Mobile-Verbesserung direkt darunter
   (echte Vollbild-Lightbox mit Zoom statt Estatiks
   kleiner Bilderliste beim Antippen).
   ───────────────────────────────────────────── */

/*
 * Auf schmalen Bildschirmen zeigt Estatik automatisch (per eigenem
 * JS-Groessenklassen-System) statt der Desktop-Kachel-Galerie sein
 * eigenes "Mobile-Gallery"-Widget: EIN Bild, wischbar durchblaetterbar
 * (Slick-Carousel) - das ist genau das ImmoScout24-Muster und bleibt
 * daher unveraendert Estatiks Standardverhalten (keine Overrides mehr
 * hier).
 *
 * Das einzige, was wir aendern: Antippen des Mobile-Bildes oeffnete
 * bisher nur eine kleine Liste ALLER Fotos untereinander zum Scrollen
 * (#es-mobile-gallery-popup), ohne Vollbild/Wischen/Zoom. Die restylen
 * wir unten zu einem echten, horizontal wischbaren Vollbild-Betrachter -
 * ein Bild pro "Seite", per natives Scroll-Snapping (kein JS/Bibliothek
 * noetig, funktioniert mit echten Wisch-Gesten).
 */
/*
 * Design-Vorlage zeigt auf JEDER Plattform nur EIN Bild + Pfeile + Zaehler
 * statt einer Kachel-Uebersicht mit Vorschaubildern - deshalb Estatiks
 * Desktop-Kachel-Galerie (".es-gallery"/".es-slider") komplett zugunsten
 * der (eigentlich nur fuer schmale Screens gedachten) ".es-mobile-
 * gallery-wrap" abschalten, und zwar bewusst OHNE Breiten-Media-Query
 * (frueher nur fuer Handys/Querformat aktiv - siehe Verlauf).
 */
.es-single .es-gallery,
.es-single .es-slider {
	display: none !important;
}

.es-single .es-mobile-gallery-wrap {
	display: block !important;
}

/*
 * Vollbild-Bilder-Popup: jetzt auf JEDER Plattform erreichbar (da die
 * Karussell-Galerie oben nicht mehr nur auf Handys sichtbar ist), daher
 * bewusst OHNE Breiten-Media-Query (frueher nur <768px/Handy-Querformat).
 *
 * #es-mobile-gallery-popup selbst bleibt der stabile, nicht scrollende
 * Rahmen (Estatiks eigene Basis-Regel macht ihn bereits position:fixed +
 * volle Bildschirmgroesse). Nur der INNERE ".__track" scrollt/snappt
 * horizontal - die Zaehler/Schliessen-Leiste ist ein Geschwister-Element
 * davon, kein Kind der scrollenden Reihe, und rutscht dadurch nicht mit
 * den Bildern mit.
 */
.es-magnific-gallery #es-mobile-gallery-popup {
	padding: 0 !important;
}

.es-mobile-gallery-popup__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.es-mobile-gallery-popup__track img {
	flex: 0 0 100% !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 100vh;
	object-fit: contain !important;
	scroll-snap-align: center !important;
	scroll-snap-stop: always !important;
	margin: 0 !important;
}

/*
 * Leiste mit "1 / X"-Zaehler (links) und "X"-Schliessen-Icon (rechts),
 * fest ueber dem Bild schwebend - wie bei ImmoScout24. Der Zaehler-
 * wert wird per JS beim Wischen aktualisiert (siehe functions.php:
 * arealdev_es_mobile_gallery_counter_script()). "pointer-events:none"
 * auf der Leiste + "auto" auf den Kindern, damit man durch den freien
 * Platz dazwischen trotzdem zum naechsten Bild wischen kann.
 */
.es-mobile-gallery-popup__bar {
	position: fixed;
	top: max(12px, env(safe-area-inset-top));
	left: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
	pointer-events: none;
}

.es-mobile-gallery-popup__bar > * {
	pointer-events: auto;
}

.es-mobile-gallery-popup__counter {
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 20px;
	line-height: 1.4;
}

.es-mobile-gallery-popup__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

/*
 * Vor-/Zurueck-Pfeile im Vollbild-Betrachter - fuer Desktop/Maus ohne
 * Touchscreen (Wischen geht nur auf beruehrungsempfindlichen Geraeten).
 * Auf Touch-Geraeten stoeren sie nicht, bleiben aber sichtbar nutzbar.
 */
#es-mobile-gallery-popup .es-mobile-gallery-popup__arrow {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	z-index: 10;
	padding: 0;
}

#es-mobile-gallery-popup .es-mobile-gallery-popup__arrow:hover {
	background: rgba(0, 0, 0, 0.75);
}

#es-mobile-gallery-popup .es-mobile-gallery-popup__arrow--prev {
	left: max(12px, env(safe-area-inset-left));
}

#es-mobile-gallery-popup .es-mobile-gallery-popup__arrow--next {
	right: max(12px, env(safe-area-inset-right));
}

/*
 * Magnific Popup selbst erzeugt beim Oeffnen dieses Popups (siehe
 * public.js: closeMarkup fuer id === '#es-mobile-gallery-popup')
 * IMMER zusaetzlich sein eigenes natives ".mfp-close" - unabhaengig
 * von unserem Template. Das lag fast an der gleichen Stelle wie
 * unser eigener "X"-Button (.es-mobile-gallery-popup__close) und war
 * als zweites, leicht versetztes "X" im Hintergrund sichtbar. Wird
 * hier ausgeblendet; die Desktop-Bilder-Lightbox nutzt eine andere
 * mainClass (es-property-magnific) und ist davon nicht betroffen.
 */
.es-magnific-gallery .mfp-close {
	display: none !important;
}

/*
 * Die Lightbox selbst (.mfp-wrap.es-property-magnific) setzt in
 * public.min.css feste Rand-Prozentwerte fuers Bild - margin:0 12%
 * (bzw. 15% unter 460px). Auf grossen Screens kaum sichtbar, auf einem
 * schmalen Handy-Display bleibt dadurch nur ein winziges Bild in der
 * Mitte uebrig. Auf schmalen Viewports deutlich reduzieren, damit das
 * Foto wirklich die Bildschirmbreite ausnutzt.
 */
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
	.mfp-wrap.es-property-magnific .mfp-content {
		margin: 0 8px !important;
		padding-top: 56px !important;
	}

	.mfp-wrap.es-property-magnific .mfp-img {
		max-width: 100% !important;
	}
}

/* ─────────────────────────────────────────────
   "Eckdaten" (Basic Facts) auf der Immobilien-Einzelseite: wie in der
   Design-Vorlage areal-objektkarte.html (.ic-spec) - EINE Spalte auf
   JEDER Bildschirmgroesse, Label links (grau, normal), Wert rechtsbuendig
   (fett, dunkel), duenne Trennlinie pro Zeile. Bewusst kein 2-Spalten-
   Layout mehr auf breiteren Screens (frueher ImmoScout24-Stil) - die
   Vorlage will explizit diese einspaltige Label/Wert-Zeile ueberall.
   Bewusst nur auf "basic-facts" beschraenkt - andere Abschnitte
   (Beschreibung, Ausstattung, ...) nutzen dasselbe
   <ul class="es-entity-fields"> Markup, aber mit Freitext/Listen statt
   kurzer Werte.
   ───────────────────────────────────────────── */
.es-property_section--basic-facts .es-property-fields.es-entity-fields {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-entity-field {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid #eef1f4;
	background: none;
	font-size: 15px;
}

.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-entity-field:last-child {
	border-bottom: none;
}

.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-property-field__label {
	color: #767676;
	font-weight: 400;
}

.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-property-field__sep {
	display: none;
}

.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-entity-field__value {
	color: #1a1a1a;
	font-weight: 600;
	text-align: right;
}

/*
 * Flaeche & Grundstuecksgroesse: Estatik gibt beide Werte als
 * "<b>64.28</b> <span>m²</span>" aus. Die Zahl soll fett bleiben (kommt
 * ohnehin vom <b>), die Einheit "m²" NICHT - hier gezielt nur fuer diese
 * beiden Zeilen die Basis-Fettschrift zuruecksetzen und stattdessen nur
 * dem <b> die Fettung geben, statt global etwas an den anderen
 * Eckdaten-Zeilen zu aendern.
 */
.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-entity-field--area .es-entity-field__value,
.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-entity-field--lot_size .es-entity-field__value {
	font-weight: 400;
}

.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-entity-field--area .es-entity-field__value b,
.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-entity-field--lot_size .es-entity-field__value b {
	font-weight: 700;
}

/* ─────────────────────────────────────────────
   Einzelseiten-Header im ImmoScout24-Stil: Titel,
   Adresse, dann eine Statistik-Zeile (hervorgehobene
   Kaltmiete + Preis/m², Zimmer, Flaeche, Warmmiete).
   Siehe estatik4/front/property/partials/header.php
   und functions.php: arealdev_es_render_stats_row().
   ───────────────────────────────────────────── */
.es-single__header--immo {
	/* Estatik setzt .es-single__header selbst auf display:flex (das
	   urspruengliche Titel-links/Preis-rechts-Layout) - ohne !important
	   gewinnt das bei gleicher Spezifitaet je nach Ladereihenfolge und
	   die Adresse landet bei genug Platz (z.B. breite Desktop-Screens)
	   neben statt unter dem Titel. */
	display: block !important;
}

.es-single__header--immo .property-title {
	margin-bottom: 12px;
}

.es-immo-address {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: #002952;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 20px;
}

.es-immo-address__icon {
	width: 14px;
	height: 14px;
}

.es-immo-address__icon {
	flex: 0 0 auto;
	margin-top: 2px;
}

.es-immo-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 32px;
	row-gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #e4e8ee;
}

/*
 * Alle 4 Kacheln sollen auf JEDEM Geraet in EINER Zeile bleiben (nicht
 * umbrechen). "nowrap" + Groesse/Abstand, die unten in der Media Query
 * fuer schmale Screens eng genug geschrumpft werden, damit die Zeile
 * tatsaechlich passt, statt anzuschneiden oder umzubrechen.
 */
.es-immo-stats {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	column-gap: 24px;
}

.es-single__header-actions {
	/* Sorgt zusammen mit justify-content:space-between auf .es-immo-header-row
	   dafuer, dass der Button auch bei nur 1-2 Stats-Kacheln (wenig Inhalt
	   links) nicht direkt daneben klebt, sondern mindestens diesen Abstand
	   haelt bzw. nach rechts rutscht. */
	margin-left: auto;
	padding-left: 24px;
}

.es-immo-stat {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 5px;
}

.es-immo-stat__value {
	font-size: 26px;
	font-weight: 700;
	color: #0d1b2a;
	line-height: 1.2;
	white-space: nowrap;
}

/*
 * Flaeche soll genauso fett sein wie Zimmer/Warmmiete/Kaltmiete (700),
 * nicht schwerer. Der "area"-Formatter von Estatik liefert die Zahl
 * bereits in einem eigenen <b> zurueck (z.B. "<b>64.28</b> m²"); ohne
 * diese Regel addiert sich dessen browser-eigenes "bolder" zur
 * Elternregel und die Flaeche wirkt schwerer/dicker als die anderen
 * Kacheln. Beide explizit auf denselben Wert (700) fixieren.
 */
.es-immo-stat--area .es-immo-stat__value,
.es-immo-stat--area .es-immo-stat__value b {
	font-weight: 700;
}

.es-immo-stat__value--highlight {
	/* Gerahmter Preis-Kasten wie in der Design-Vorlage
	   areal-objektkarte.html (.ic-price) - AREAL-Navy als Rahmen-/
	   Schriftfarbe statt gefuellter Flaeche. */
	display: inline-block;
	background: transparent;
	border: 1.5px solid #002952;
	color: #002952;
	padding: 6px 10px;
	border-radius: 3px;
}

/*
 * Bewusst OHNE white-space:nowrap: ein Label wie "Kaltmiete 14,00 €/m²"
 * ist deutlich breiter als sein Wert ("900 €") - mit nowrap hat das die
 * ganze Kachel (und damit die gesamte Stats-Zeile) unnoetig breit
 * gemacht, sodass auf schmalen Screens nicht mehr alle 4 Kacheln
 * nebeneinander passten. Darf jetzt auf eine 2. Zeile umbrechen, die
 * Kachel richtet sich dann nach der (schmaleren) Wert-Breite.
 */
.es-immo-stat__label {
	font-size: 13px;
	color: #6b7a8d;
	max-width: 120px;
}

@media (max-width: 480px) {
	.es-immo-stats {
		column-gap: 10px;
	}

	.es-immo-stat__value {
		font-size: 17px;
	}

	.es-immo-stat__value--highlight {
		padding: 4px 7px;
	}

	.es-immo-stat__label {
		font-size: 10px;
		max-width: 76px;
	}
}

/* Sehr schmale Screens (z.B. iPhone SE, 375px und kleiner): noch etwas
   enger, damit alle 4 Kacheln zuverlaessig in einer Zeile bleiben. */
@media (max-width: 390px) {
	.es-immo-stats {
		column-gap: 7px;
	}

	.es-immo-stat__value {
		font-size: 15px;
	}

	.es-immo-stat__value--highlight {
		padding: 4px 6px;
	}

	.es-immo-stat__label {
		font-size: 9px;
		max-width: 64px;
	}
}

/*
 * Auf schmalen Screens bricht ".es-immo-header-row" (flex-wrap:wrap) die
 * Stats-Kacheln und den Kontakt-Button auf eigene Zeilen um. Bei wenigen
 * Kacheln (z.B. Verkaufs-Objekte ohne "Warmmiete": nur Kaltmiete+Preis/m²,
 * Zimmer, Flaeche) bleibt die Stats-Zeile dadurch deutlich schmaler als
 * der verfuegbare Platz und haengt links, waehrend der Button wegen
 * seines eigenen "margin-left:auto" (fuer die Desktop-Ausrichtung neben
 * den Kacheln gedacht) auf seiner eigenen Zeile nach rechts rutscht -
 * beides wirkt unausgewogen. "flex-direction:column" + "align-items:
 * center" zentriert beide Zeilen stattdessen als Block; der eigentliche
 * "margin-left:auto" wird dafuer zurueckgesetzt.
 */
@media (max-width: 767px) {
	.es-immo-header-row {
		flex-direction: column;
		align-items: center;
	}

	/*
	 * "align-items:center" oben zentriert ".es-immo-stats" nur als Block
	 * auf seiner EIGENEN (auf Inhalt geschrumpften) Breite - bei z.B. nur
	 * 3 statt 4 Kacheln (Verkaufsobjekte ohne Warmmiete) blieb dadurch
	 * auf breiten Handys viel Platz links/rechts ungenutzt. "width:100%"
	 * + "justify-content:space-between" spannt die Zeile stattdessen
	 * ueber die volle verfuegbare Breite und verteilt die Kacheln
	 * gleichmaessig - bei 3 UND bei 4 Kacheln.
	 */
	.es-immo-stats {
		width: 100%;
		justify-content: space-between;
	}

	.es-single__header-actions {
		margin-left: 0;
		padding-left: 0;
	}
}

/* ─────────────────────────────────────────────
   Abschnitts-Ueberschriften auf der Immobilien-Einzelseite
   (Eckdaten, Beschreibung, Ausstattung & Merkmale, Lage, ...):
   Titel + durchgehende Linie, wie in der Design-Vorlage
   areal-objektkarte.html (.ic-section-head). Greift automatisch
   fuer JEDEN Abschnitt, da estatik4/front/property/section.php
   (das Template, das ALLE Abschnitte gemeinsam nutzen) dafuer
   ueberschrieben wurde - nicht einzeln pro Abschnitt.

   Estatiks eigener Linien-Trick (.es-property-section__title:after,
   absolut positioniert, grau) rendert auf dieser Seite unsichtbar -
   wird hier deaktiviert und durch eine einfache Flexbox-Linie
   ersetzt.
   ───────────────────────────────────────────── */
.es-property-section .es-property-section__title:after {
	display: none;
}

.es-property-section__title-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.es-property-section .es-property-section__title {
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.3;
	color: #0d1b2a;
	overflow: visible;
}

.es-property-section__title-rule {
	flex-grow: 1;
	height: 2px;
	border-radius: 1px;
	background: #002952;
}

/* ═════════════════════════════════════════════
   Design-Vorlage (areal-objektkarte.html) auf der Immobilien-
   EINZELSEITE (NICHT auf der Uebersichtsseite - siehe
   estatik4/front/property/content-archive.php, das ist bewusst wieder
   auf Estatiks Standard zurueckgesetzt).

   Uebernommen: die einfache Karussell-Galerie (ein Bild + Pfeile +
   Zaehler, siehe weiter oben - ersetzt Estatiks Kachel-Ansicht komplett,
   auf JEDER Bildschirmgroesse); navy Badge/Icon-Buttons; CTA-Button-
   Feinschliff; Poppins durchgaengig; Eckdaten als Label-links/Wert-
   rechts-Zeilen; volle Breite ueber einen verbreiterten Divi-Container
   (1600px statt 1080px, siehe weiter unten).

   BEWUSST NICHT uebernommen: die weisse Karten-Box (Rand+Schatten) um
   Galerie/Header/Abschnitte - auf einer kompletten Seite (statt einer
   kleinen Vorschau-Karte) wirkte das wie einzelne "Kacheln" und verhinderte
   genau die gewuenschte volle Breite (eine Box mit Rand hat immer
   sichtbaren Abstand zum Seitenrand). Layout ist jetzt offen/randlos,
   Abschnittstrennung kommt allein aus der Titel+Linie-Ueberschrift.
   ───────────────────────────────────────────── */

/*
 * KEIN Kachel-/Karten-Rahmen (weisse Box mit Rand+Schatten) mehr um
 * Galerie, Header-Block oder Abschnitte - das wirkte auf der vollen
 * Seitenbreite wie einzelne "Kacheln" statt einem offenen, durchgehenden
 * Layout und hat genau deshalb verhindert, dass Inhalte wirklich die
 * volle Breite ausnutzen (eine Box mit Rand/Schatten hat immer einen
 * sichtbaren Innenabstand zum Seitenrand). Nur das Bild selbst behaelt
 * dezent abgerundete Ecken; alles andere liegt offen auf dem
 * Seitenhintergrund, Trennung zwischen Abschnitten kommt allein aus der
 * Titel+Linie-Ueberschrift (siehe oben) und normalem vertikalem Abstand.
 */
.es-single .es-gallery,
.es-single .es-mobile-gallery-wrap {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 24px;
}

/*
 * Mobile, NICHT-Vollbild-Ansicht: Bild randlos ueber die volle
 * Geraetebreite statt eingerueckt mit abgerundeten Ecken - die
 * Vollbild-Ansicht (Antippen des Bildes) ist davon nicht betroffen,
 * die bleibt ohnehin schon randlos. "calc(50% - 50vw)" statt 100vw +
 * left:50% + margin-left:-50vw: eine einzelne Rechnung statt zwei
 * getrennter vw-Werte, dadurch kein Rundungs-/Scrollbar-Versatz.
 */
@media (max-width: 767px) {
	.es-single .es-mobile-gallery-wrap {
		border-radius: 0;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: 100vw;
	}
}

/* ── Navy-Badge (statt Estatiks Pro-Term-Farbe) - konsistent mit dem
   Rest der Seite (Kaltmiete-Hervorhebung, CTA-Button, Navigation). ── */
.es-single .es-badges .es-badge,
.es-single .es-mobile-gallery-wrap .es-badge {
	background: #002952 !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}

/* ── Teilen/Merken/Vergleichen auf der Galerie: runde weisse
   Icon-Buttons statt rechteckiger Buttons mit sichtbarem Text-Label -
   wie der Teilen-Button in der Design-Vorlage. ── */
.es-single .es-gallery .es-control .es-btn,
.es-single .es-mobile-gallery-wrap .es-control .es-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 41, 82, 0.14);
	color: #002952;
	padding: 0;
}

.es-single .es-gallery .es-control .es-btn__label,
.es-single .es-mobile-gallery-wrap .es-control .es-btn__label {
	display: none;
}

/* ── Kontakt-Button: Feinschliff auf die Vorlage (Buchstabenabstand,
   deutlicherer Schatten, Hover-Anhebung, Pfeil-Icon - siehe
   header.php). Estatik liefert Grundfarbe/Form bereits passend. ── */
.es-single__header-actions .es-btn--request-info {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 22px !important;
	height: auto;
	line-height: 1.2;
	letter-spacing: 0.07em;
	font-family: 'Poppins', sans-serif;
	box-shadow: 0 3px 12px rgba(0, 41, 82, 0.18);
	transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
}

.es-single__header-actions .es-btn--request-info:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 41, 82, 0.22);
}

/* ── Poppins durchgaengig auf der Einzelseite (Titel, Adresse,
   Meta-Zeile, Kennzahlen, Eckdaten) - wie in der Design-Vorlage
   vorgegeben. Bewusst nur innerhalb ".es-single", der Rest der Seite
   (Navigation, andere Seiten) behaelt Divis Schriftart. ── */
.es-single__header--immo .property-title,
.es-single__header-terms .es-listing__terms li a,
.es-immo-address,
.es-immo-stat__value,
.es-immo-stat__label,
.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-property-field__label,
.es-property_section--basic-facts .es-property-fields.es-entity-fields .es-entity-field__value {
	font-family: 'Poppins', sans-serif;
}


/*
 * Divi rendert automatisch seinen eigenen Post-Titel (".entry-title" in
 * ".et_post_meta_wrapper") oberhalb des eigentlichen Seiteninhalts - bei
 * Immobilien-Einzelseiten erscheint der Titel dadurch ZWEIMAL: einmal
 * hier (oberhalb der Bildergalerie) und einmal in unserem eigenen
 * Header-Block unterhalb der Galerie (".property-title", siehe
 * header.php - wie in der Design-Vorlage: Titel NACH den Bildern).
 * "body.single-properties" ist der von WordPress automatisch gesetzte
 * Body-Klassenname fuer den Post-Type "properties" - betrifft dadurch
 * ausschliesslich Immobilien-Einzelseiten, nicht Blog-Beitraege oder
 * andere Seiten, die Divis Titel weiterhin normal zeigen sollen.
 */
body.single-properties .et_post_meta_wrapper {
	display: none;
}

/*
 * Pfeile + Zaehler auf der (jetzt ueberall sichtbaren) Karussell-Galerie
 * ".es-mobile-gallery-wrap": runde weisse Buttons statt Estatiks
 * schlichter weisser Pfeil-Glyphen, Zaehler-Pille unten RECHTS statt
 * zentriert - wie in der Design-Vorlage (.ic-icon-btn--prev/--next,
 * .ic-counter). Der Zaehler-Text selbst ("1/12") wird bereits von
 * Estatiks eigenem JS gepflegt (public.js: ".js-es-mobile-gallery__pager"
 * beim Slick-"afterChange"-Event) - hier nur restyled, keine neue Logik.
 */
.es-single .es-mobile-gallery-wrap .slick-arrow {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: #002952;
	font-size: 1em;
	box-shadow: 0 2px 8px rgba(0, 41, 82, 0.14);
}

.es-single .es-mobile-gallery-wrap .slick-arrow:hover {
	background: #fff;
}

.es-single .es-mobile-gallery-wrap .es-mobile-gallery__pager {
	left: auto;
	right: 14px;
	bottom: 14px;
	transform: none;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
}

/*
 * Volle Breite auf der Immobilien-Einzelseite: Divis ".container" ist
 * site-weit auf 1080px begrenzt - auf grossen Monitoren (1920px+) bleibt
 * dadurch auf jeder Seite ca. 400px Leerraum ungenutzt. Nur fuer
 * Immobilien-Einzelseiten ("body.single-properties") deutlich verbreitert,
 * damit Galerie/Karten den verfuegbaren Platz ausnutzen - der Rest der
 * Website (andere Seiten, mit Divi im Page Builder bewusst auf 1080px
 * ausgelegt) bleibt unveraendert. Divis eigenes responsives Padding
 * greift unterhalb von 1600px weiterhin normal (kein 100vw/full-bleed -
 * das hatte hier frueher schon mal ein anderes Problem verursacht, siehe
 * Badge-Groesse gleich im Anschluss).
 */
body.single-properties .container {
	max-width: 1600px;
}

/*
 * Feste Badge-Schriftgroesse (statt Estatiks "font-size: 1.1em", die sich
 * an ".es-single { font-size: 10px }" bemisst): bei der breiteren Galerie
 * oben wirkte das Badge dadurch schon einmal unproportional winzig -
 * diesmal von vornherein mit einer festen px-Groesse abgesichert.
 */
.es-single .es-badges .es-badge,
.es-single .es-mobile-gallery-wrap .es-badge {
	font-size: 13px !important;
	padding: 7px 14px !important;
}