/* ===========================================================================
   Brücke zwischen WP-ImmoMakler (Skin bootstrap3) und dem Design-System.

   WP-ImmoMakler lädt seine eigene Bootstrap-3-Basis mit. Diese Datei löscht
   davon nichts, sondern zieht nur die sichtbaren Werte auf unsere Marke:
   Schrift, Farbe, Radien, Schaltflächen, Tabellen. Objektlisten und
   Objektseiten bleiben damit voll funktionsfähig — es ändert sich nur, wie
   sie aussehen.

   Ladeweg: ImmoMakler_Skin::add_scripts_styles() bindet diese Datei als
   Handle "immomakler-custom" ein, sobald sie unter
   themes/witten-makler/immomakler/css/immomakler.css liegt. Sie hängt vom
   Plugin-CSS ab und wird deshalb danach geladen.
   =========================================================================== */

.wm-immomakler .immomakler,
.wm-immomakler .immomakler-single,
.wm-immomakler .immomakler-archive {
	font-family: var(--wm-schrift-text);
	font-size: var(--wm-t-body);
	line-height: var(--wm-zh-body);
	color: var(--wm-tinte);
}

/* Bootstrap-Container innerhalb unserer Bahn nicht doppelt einschnüren. */
.wm-immomakler .immomakler .container,
.wm-immomakler .immomakler-single .container {
	inline-size: 100%;
	max-inline-size: var(--wm-bahn);
	margin-inline: auto;
	padding-inline: var(--wm-saum);
}

/* --- Überschriften -------------------------------------------------------- */
.wm-immomakler .immomakler h1,
.wm-immomakler .immomakler h2,
.wm-immomakler .immomakler h3,
.wm-immomakler .immomakler-single h1,
.wm-immomakler .immomakler-single h2,
.wm-immomakler .immomakler-single h3 {
	font-family: var(--wm-schrift-display);
	font-weight: var(--wm-g-halb);
	color: var(--wm-tinte);
	letter-spacing: -0.01em;
}
.wm-immomakler .immomakler h1, .wm-immomakler .immomakler-single h1 { font-size: var(--wm-t-h1); line-height: var(--wm-zh-display); }
.wm-immomakler .immomakler h2, .wm-immomakler .immomakler-single h2 { font-size: var(--wm-t-h2); line-height: var(--wm-zh-h2); }
.wm-immomakler .immomakler h3, .wm-immomakler .immomakler-single h3 { font-size: var(--wm-t-h3); line-height: var(--wm-zh-h3); }

/* --- Verweise ------------------------------------------------------------- */
.wm-immomakler .immomakler a,
.wm-immomakler .immomakler-single a { color: var(--wm-blau); }
.wm-immomakler .immomakler a:focus-visible,
.wm-immomakler .immomakler-single a:focus-visible { color: var(--wm-blau-tief); }
@media (hover: hover) and (pointer: fine) {
	.wm-immomakler .immomakler a:hover,
	.wm-immomakler .immomakler-single a:hover { color: var(--wm-blau-tief); }
}
.wm-immomakler .immomakler :focus-visible,
.wm-immomakler .immomakler-single :focus-visible {
	outline: 2px solid var(--wm-fokus);
	outline-offset: 2px;
	border-radius: var(--wm-rad-1);
}

/* --- Objektkacheln in der Liste ------------------------------------------ */
.wm-immomakler .immomakler .thumbnail,
.wm-immomakler .immomakler .panel,
.wm-immomakler .immomakler .immomakler-item {
	background: var(--wm-grund);
	border: 1px solid var(--wm-linie);
	border-radius: var(--wm-rad-3);
	box-shadow: none;
	overflow: hidden;
}
.wm-immomakler .immomakler .thumbnail img,
.wm-immomakler .immomakler .immomakler-item img { inline-size: 100%; block-size: auto; display: block; }

.wm-immomakler .immomakler .caption { padding: 1.25rem; }

/* Preis und Kennwerte im Zahlenstil der Marke. */
.wm-immomakler .immomakler .immomakler-price,
.wm-immomakler .immomakler .price,
.wm-immomakler .immomakler-single .immomakler-price {
	font-family: var(--wm-schrift-display);
	font-weight: var(--wm-g-halb);
	font-size: var(--wm-t-zahl);
	font-variant-numeric: tabular-nums;
	color: var(--wm-tinte);
}

/* --- Schaltflächen -------------------------------------------------------- */
.wm-immomakler .immomakler .btn,
.wm-immomakler .immomakler-single .btn {
	display: inline-flex; align-items: center; gap: .5rem;
	min-block-size: 48px;
	padding-inline: 1.25rem;
	border-radius: var(--wm-rad-pille);
	font-family: var(--wm-schrift-display);
	font-weight: var(--wm-g-halb);
	font-size: var(--wm-t-klein);
	text-shadow: none;
	box-shadow: none;
	background-image: none;
	transition: background-color var(--wm-zeit-klein) var(--wm-kurve-aus);
}
/* --wm-signal-text (#b83417 hell, #ff9c85 dunkel) ist die Schriftfarbe
   der Koralle AUF WEISSEM GRUND, nicht die Beschriftung auf der
   Signalfüllung. Gemessen stand hier 1,99:1 hell und 1,47:1 dunkel; im
   Überfahren waren Füllung und Schrift zusätzlich vertauscht (2,98:1).
   Richtig ist --wm-signal-auf (#2b1109) = 5,93:1, auf der Hover-Füllung
   --wm-signal-rand 4,69:1. Betroffen: „Direktanfrage",
   „zum Kontaktformular", „Anfrage senden", „Treffer anzeigen".
   Gemessen 2026-09-20. */
.wm-immomakler .immomakler .btn-primary,
.wm-immomakler .immomakler-single .btn-primary {
	background: var(--wm-signal);
	border: 1px solid var(--wm-signal-rand);
	color: var(--wm-signal-auf);
}
.wm-immomakler .immomakler .btn-primary:focus-visible,
.wm-immomakler .immomakler-single .btn-primary:focus-visible {
	background: var(--wm-signal-rand);
	color: var(--wm-signal-auf);
}
@media (hover: hover) and (pointer: fine) {
	.wm-immomakler .immomakler .btn-primary:hover,
	.wm-immomakler .immomakler-single .btn-primary:hover {
		background: var(--wm-signal-rand);
		color: var(--wm-signal-auf);
	}
}
.wm-immomakler .immomakler .btn-default,
.wm-immomakler .immomakler-single .btn-default {
	background: transparent;
	border: 1px solid var(--wm-linie-kraeftig);
	color: var(--wm-tinte);
}
.wm-immomakler .immomakler .btn-default:focus-visible,
.wm-immomakler .immomakler-single .btn-default:focus-visible { background: var(--wm-flaeche); }
@media (hover: hover) and (pointer: fine) {
	.wm-immomakler .immomakler .btn-default:hover,
	.wm-immomakler .immomakler-single .btn-default:hover { background: var(--wm-flaeche); }
}

/* --- Datentabelle der Objektseite ---------------------------------------- */
.wm-immomakler .immomakler-single table,
.wm-immomakler .immomakler table {
	inline-size: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.wm-immomakler .immomakler-single table :where(th, td),
.wm-immomakler .immomakler table :where(th, td) {
	padding: .7rem .85rem;
	border-block-end: 1px solid var(--wm-linie);
	text-align: start;
	vertical-align: top;
}
.wm-immomakler .immomakler-single table th { font-weight: var(--wm-g-halb); color: var(--wm-tinte-2); }
.wm-immomakler .immomakler-single .table-striped > tbody > tr:nth-of-type(odd) { background: var(--wm-flaeche); }

/* --- Formulare (Suche, Kontaktformular am Objekt) ------------------------- */
.wm-immomakler .immomakler :where(input, select, textarea).form-control {
	min-block-size: 48px;
	padding: .65rem .85rem;
	border: 1px solid var(--wm-linie-kraeftig);
	border-radius: var(--wm-rad-2);
	background: var(--wm-grund);
	color: var(--wm-tinte);
	font-family: inherit;
	font-size: var(--wm-t-body);
	box-shadow: none;
}
.wm-immomakler .immomakler :where(input, select, textarea).form-control:focus {
	outline: 2px solid var(--wm-fokus);
	outline-offset: 1px;
	border-color: var(--wm-blau);
}
.wm-immomakler .immomakler label { font-weight: var(--wm-g-mittel); color: var(--wm-tinte-2); }

/* --- Hinweise und Marken -------------------------------------------------- */
.wm-immomakler .immomakler .label,
.wm-immomakler .immomakler .badge {
	border-radius: var(--wm-rad-pille);
	padding: .25em .7em;
	font-weight: var(--wm-g-mittel);
	font-size: var(--wm-t-meta);
}
.wm-immomakler .immomakler .alert {
	border-radius: var(--wm-rad-3);
	border: 1px solid var(--wm-linie);
	background: var(--wm-flaeche);
	color: var(--wm-tinte);
}

/* --- Abstand zum Kopf und zur Fußzeile ------------------------------------ */
.wm-immomakler .wm-inhalt > .immomakler,
.wm-immomakler .wm-inhalt > .immomakler-single { padding-block: var(--wm-takt); }

/* --- Dunkelmodus ---------------------------------------------------------- */
/* Die Token wechseln ihren Wert selbst; hier muss nur das aufgehoben werden,
   was Bootstrap fest verdrahtet. */
@media (prefers-color-scheme: dark) {
	:root:not([data-thema="hell"]) .wm-immomakler .immomakler :where(.panel, .thumbnail, .well, .property-container, .immomakler-item) {
		background: var(--wm-flaeche);
		border-color: var(--wm-linie);
		color: var(--wm-tinte);
	}
	:root:not([data-thema="hell"]) .wm-immomakler .immomakler :where(input, select, textarea).form-control {
		background: var(--wm-grund);
		color: var(--wm-tinte);
	}
}
:root[data-thema="dunkel"] .wm-immomakler .immomakler :where(.panel, .thumbnail, .well, .property-container, .immomakler-item) {
	background: var(--wm-flaeche);
	border-color: var(--wm-linie);
	color: var(--wm-tinte);
}
:root[data-thema="dunkel"] .wm-immomakler .immomakler :where(input, select, textarea).form-control {
	background: var(--wm-grund);
	color: var(--wm-tinte);
}

/* =========================================================================
   NACHTRÄGE AUS DER NACHMESSUNG VOM 20.09.2026
   ========================================================================= */

/* --- Seitensaum und Überhang der Objektseiten ----------------------------
   Bootstrap setzt .row auf margin: 0 -15px. Der Block .immomakler-single
   liegt direkt in <main> ohne Gegenpolsterung: gemessen 405 px Dokument in
   einem 390-px-Fenster (+15) und ein Seitensaum von 0 bis 1 px — Überschrift
   und Text klebten am Displayrand. --wm-saum ist mindestens 20 px, deckt die
   15 px also ab; Bootstraps Rastermathematik bleibt dabei unangetastet. */
.wm-immomakler .wm-inhalt > .immomakler,
.wm-immomakler .wm-inhalt > .immomakler-single,
.wm-immomakler .wm-inhalt > .immomakler-archive {
	inline-size: 100%;
	max-inline-size: var(--wm-bahn);
	margin-inline: auto;
	padding-inline: var(--wm-saum);
}
/* Innen liegende Bootstrap-Container dürfen dann nicht noch einmal polstern. */
.wm-immomakler .wm-inhalt > :where(.immomakler, .immomakler-single, .immomakler-archive) .container {
	padding-inline: 0;
	max-inline-size: none;
}

/* --- Panel-Kopf ----------------------------------------------------------
   Bootstrap verdrahtet .panel-default > .panel-heading auf #f5f5f5 mit #333.
   Im dunklen Thema stand die Überschrift „Objektbeschreibung" / „Lage" /
   „Kontaktdaten" dadurch bei 1,03:1.
   Die Gegenregel des Plugins lautet ".immomakler .panel-default >
   .panel-heading" (0-3-0, über CDP ausgelesen). Klassennamen deshalb
   ausgeschrieben statt in :where() — :where() setzt seinen Inhalt auf
   null und hätte die Regel auf 0-2-0 gedrückt. Jetzt 0-4-0, eindeutig,
   ohne !important. */
.wm-immomakler .immomakler .panel > .panel-heading,
.wm-immomakler .immomakler .panel > .panel-footer,
.wm-immomakler .immomakler-single .panel > .panel-heading,
.wm-immomakler .immomakler-single .panel > .panel-footer {
	background: var(--wm-flaeche);
	border-color: var(--wm-linie);
	color: var(--wm-tinte);
}
.wm-immomakler .immomakler .panel > .panel-heading :where(h1, h2, h3, h4, .panel-title),
.wm-immomakler .immomakler-single .panel > .panel-heading :where(h1, h2, h3, h4, .panel-title) {
	color: var(--wm-tinte);
}

/* --- Objektkacheln im Archiv --------------------------------------------
   .property-container trägt vom Plugin ein festes #ffffff. Im dunklen Thema
   standen dadurch auf dem Archiv 162 Textknoten auf Weiß: Untertitel
   1,13:1, Objekttitel 2,27:1 — 152 bzw. 10 Treffer je Ansicht.
   Dieselbe Behandlung wie .panel/.thumbnail: hell die Seitenfarbe, dunkel
   die Fläche, damit die Kachel sich vom Grund abhebt. */
.wm-immomakler .immomakler .property-container,
.wm-immomakler .immomakler-archive .property-container {
	background: var(--wm-grund);
}

/* --- Galerie-Überlagerung „+ 12" ----------------------------------------
   Weiße Schrift ohne eigene Fläche über einem Bild: gemessen 1,00:1, weil
   der Messpunkt auf einem hellen Bildbereich lag. Sie bekommt eine eigene
   deckende Fläche statt sich auf das Bild zu verlassen. */
.wm-immomakler .immomakler :where(.property-overlay-open, .property-overlay, .opengallery),
.wm-immomakler .immomakler-single :where(.property-overlay-open, .property-overlay, .opengallery) {
	background: rgba(12, 21, 28, 0.72);
	color: #ffffff;                 /* auf rgba(12,21,28,.72) über Bild: > 7:1 */
	padding: .35rem .7rem;
	border-radius: var(--wm-rad-2);
	font-weight: var(--wm-g-halb);
	text-shadow: none;
}

/* --- Panel-Köpfe, die das Plugin über eine ID einfärbt -------------------
   #immomakler-search-agents-panel .panel-heading setzt background-color
   auf #ffffff (Auswahlschärfe 1-1-0). Im dunklen Thema stand die Zeile
   „Erstellen Sie hier ein Suchprofil …" dadurch bei 1,13:1. Eine ID lässt
   sich nur mit einer ID schlagen. */
.wm-immomakler :is(#immomakler-search-agents-panel,
                   #immomakler-search-advanced,
                   #shortcode-immomakler-search-advanced,
                   #immomakler-contactform-panel) .panel-heading {
	background: var(--wm-flaeche);
	color: var(--wm-tinte);
	border-color: var(--wm-linie);
}
/* Bildflächen der Galerie-Rahmen: feste Hellwerte, im Dunkeln zwei helle
   Balken um das Bild. */
.wm-immomakler #immomakler-galleria,
.wm-immomakler #immomakler-galleria .galleria-container,
.wm-immomakler #immomakler-galleria .galleria-container.galleria-theme-azur,
.wm-immomakler #immomakler-galleria .galleria-theme-folio .galleria-thumbnails-container,
.wm-immomakler #immomakler-slider-pro {
	background: var(--wm-flaeche);
}

/* --- Maklerseite: Objektliste in der Kachelspalte ------------------------
   Auf /immobilienmakler/…/ steht die Objektliste in einer schmaleren Bahn.
   Dort reicht der Seitensaum nicht mehr aus, um Bootstraps
   .row { margin: 0 -15px } aufzufangen: gemessen 402 px in einem 390er
   Fenster (+12) und 782 in 768 (+14). Zusätzlich sprengen lange Labels in
   .dt.col-xs-5 ihre Spalte (176 px Inhalt in 158 px).
   Beides zusammen ergibt den Überhang; beides ist hier abgestellt, ohne
   Bootstraps Raster anzufassen, wo es passt. */
.wm-immomakler .immomakler .properties .row,
.wm-immomakler .immomakler-archive .properties .row { margin-inline: 0; }
.wm-immomakler .immomakler [class*="col-"] {
	min-inline-size: 0;
	overflow-wrap: break-word;
}

/* --- Klarschrift 20.09.2026 ----------------------------------------------
   Die Preiszeile trug die Zahlengroesse auf der ganzen Zeile - auch auf der
   Beschriftung in der schmalen linken Spalte. "Kaution" brach dadurch mitten
   im Wort um ("Kautio / n"). Gross gehoert die Zahl, nicht das Wort davor.
   -------------------------------------------------------------------------- */
.price .dt,
.immomakler .price .dt {
	font-family: var(--wm-schrift-text);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	color: #000000;
	hyphens: auto;
}
.price .dd,
.immomakler .price .dd {
	font-family: var(--wm-schrift-display);
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: #000000;
}
.price { font-size: inherit; }
