/* ============================================================
   CTP Child-Skin – Stylesheet
   Wird vom Plugin nach dem Parent-CSS geladen.
   Layout-Vorlage: _input/CTP_landingpage#2.jpg
   Markup:         single/single-property.php (Override)
   ============================================================ */

:root {
	--ctp-orange:     #e94e1b;
	--ctp-orange-dk:  #c43e10;
	--ctp-sand:       #f4ecdd;
	--ctp-ink:        #1d1d1b;
	--ctp-grey:       #6d6d6d;
	--ctp-line:       #e6e2d8;
	--ctp-line-dot:   #b8d4bd;
	--ctp-bg-soft:    #f7f4ed;
	--ctp-max:        1280px;
	/* Content-Container ist hart 1280 breit, ohne seitliche Ränder
	   auf großen Screens. Auf schmalen Viewports (<1280) bleibt ein
	   Sicherheitsabstand, damit Text nicht am Rand klebt. */
	--ctp-pad:        17px;

	/* Zwei-Spalten-Raster (Mockup lage-ziel.jpg):
	   schmale Keyfacts-Spalte links, breite Content-Spalte rechts.
	   Verhältnis 1 : 3, Gap ~72px. */
	--ctp-col-left:   minmax(0, 1fr);
	--ctp-col-right:  minmax(0, 3fr);
	--ctp-col-gap:    clamp(40px, 5.5vw, 72px);
}

/* Listen-Marker (Bullets/Nummern) global in CTP-Orange. */
li::marker {
	color: var(--ctp-orange);
}

/* Visuell versteckt, aber für Screenreader/Suchmaschinen vorhanden.
   Standard-"sr-only"-Pattern (display:none wäre für Screenreader unsichtbar,
   deshalb per Clip aus dem sichtbaren Bereich geschoben statt ausgeblendet).
   Genutzt für das H1 auf der Archivseite (archive/title.php) — Kundenwunsch
   war kein SICHTBARER Zwischentitel, SEO/A11y brauchen aber weiterhin ein H1. */
.ctp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Plugin-Default Reset ---------- */
/* Container darf full-bleed werden, Plugin setzt max-width inline (1300px),
   wir brauchen es 100% damit Sand-/Hero-Blöcke full-width werden können. */
.ctp-detail.immomakler-single {
	max-width: none !important;
	margin: 0;
	padding: 0;
	font-family: 'Styrene A Web', "Open Sans", "Figtree", system-ui, -apple-system, sans-serif;
	color: var(--ctp-ink);
	line-height: 1.75;
}

/* Bootstrap-Panels glätten (kommen aus den eingebundenen Sub-Templates) */
.ctp-detail .panel,
.ctp-detail .panel-default {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}
.ctp-detail .panel-heading {
	background: transparent !important;
	border: none !important;
	border-bottom: none !important;
	padding: 0 !important;
	margin: 0 0 16px !important;
	box-shadow: none !important;
}
.ctp-detail .panel-heading h2 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ctp-orange);
	letter-spacing: 0;
	margin: 0;
	padding: 0;
}
.ctp-detail .panel-body {
	padding: 0 !important;
	background: transparent !important;
}
.ctp-detail .list-group {
	border: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
}
.ctp-detail .list-group-item {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--ctp-line);
	padding: 12px 0;
}

.ctp-container {
	/* Bis 1280 + 2*pad volle Breite minus Sicherheitsabstand,
	   darüber hart 1280 — Ergebnis: kein seitlicher Rand mehr
	   auf großen Screens, wie in lage-ziel.jpg. */
	width: min(100% - calc(var(--ctp-pad) * 2), var(--ctp-max));
	margin-inline: auto;
	box-sizing: border-box;
}

/* ---------- Atoms ---------- */
.ctp-detail a {
	color: var(--ctp-ink);
	text-decoration: none;
	transition: color .15s ease;
}
.ctp-detail a:hover { color: var(--ctp-orange); }

.ctp-detail img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ctp-eyebrow {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ctp-orange);
	margin: 0 0 24px;
}
/* Sektion-Headlines — eine Optik für alle, egal ob aus unserem Template
   (.ctp-section-title) oder aus Plugin-Sub-Templates (.panel-heading h2,
   z. B. "Lage", "Objektbeschreibung", "Kontaktdaten"): schwarz, 17px, 700.
   Ausnahme: die Galerie-Headlines sind orange (s. weiter unten). */
.ctp-section-title,
.ctp-detail .panel-heading h2 {
	color: var(--ctp-ink);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 18px;
}
/* Galerie-Headline ("Impressionen"), falls verwendet: links, orange —
   wie der Keyfacts-Akzent. Die Sektions-HLs (Lage/Features/Flächen/
   Grundrisse) laufen über .ctp-row__hl .ctp-section-title (s. Abschnitt 3). */
.ctp-detail .ctp-gallery__headline {
	color: var(--ctp-orange);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 18px;
}
/* Keyfacts-Headline ist die einzige, die orange bleibt — Akzent in der
   linken Spalte. Hohe Spezifität + h2-Tag, um Elementors globale
   h2-Regeln zu überschreiben. */
.ctp-detail .ctp-keyfacts h2.ctp-section-title {
	color: var(--ctp-orange);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
	margin: 0 0 2rem;
}
/* Buttons analog Elementor-Theme-Primary
   .elementor-button { background: var(--e-global-color-primary); padding: 8px 20px; } */
.ctp-btn {
		background: var(--ctp-orange) !important;
color: #fff !important;
	display: inline-block;
	padding: 7px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: inherit;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	border: none;
	cursor: pointer;
	transition: background-color .15s, color .15s;
border-radius: 4px 4px 4px 4px;
}
.ctp-btn--primary {
	background: var(--ctp-orange);
	color: #fff;
	fill: #fff;
}
.ctp-btn--primary:hover {
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
text-decoration: none !important;
}
.ctp-btn--ghost {
	background: transparent;
	color: var(--ctp-ink);
	border-color: var(--ctp-ink);
}
.ctp-btn--ghost:hover {
	background: var(--ctp-ink);
	color: #fff;
}
/* PDF-Button leicht vergrößert (Schrift 18px, Innenabstand proportional). */
.ctp-btn--pdf {
	font-size: 18px;
	padding: 9px 21px;
	border-radius: 6px;
}

/* Plugin-eigene Buttons in unsere Optik bringen */
.ctp-detail .btn-primary,
.ctp-detail .property-contact-form-cta-button {
	background: var(--ctp-orange);
	border-color: var(--ctp-orange);
	color: #fff;
	border-radius: 0;
	padding: 8px 20px;
	font-weight: inherit;
	letter-spacing: 0;
	text-transform: none;
	font-size: inherit;
	line-height: inherit;
}
.ctp-detail .btn-primary:hover {
	background: var(--ctp-orange-dk);
	border-color: var(--ctp-orange-dk);
	color: #fff;
}

/* Alle Plugin-Primary-Buttons (auch außerhalb .ctp-detail, z. B. in der
   Suchmaske und im Archiv): CTP-Orange + abgerundete Ecken. */
.immomakler .btn-primary {
	color: #fff;
	background-color: var(--ctp-orange) !important;
	border-color: var(--ctp-orange) !important;
	padding: 7px 16px;
	font-size: 14px;
	border-radius: 4px;
}


/* ============================================================
   ZURÜCK-BUTTON (oben rechts, fixiert)
   Führt von der Detailseite zurück zur Objekt-Übersicht (Archivseite).
   Markup: single/single-property.php.

   Position hängt von der WP-Admin-Bar ab (nur für eingeloggte Redakteure
   sichtbar, 32px hoch auf Desktop/46px mobil) — ohne sie (normale Besucher)
   rückt der Button höher, damit er nicht im Leerraum "schwebt".
   ============================================================ */
.ctp-detail a.ctp-back-nav {
	position: fixed;
	top: 32px;
	right: 30px;
	background: #434d4b;
	color: #fff !important;
	z-index: 99999999;
	padding: 5px 15px;
	font-family: "Open Sans", Sans-serif;
	font-size: .98rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none !important;
	border-radius: 3px;
}
/* Eingeloggt (Admin-Bar sichtbar, s. wp_body_open()/body_class() „admin-bar"):
   Button unter der Admin-Bar statt darüber. NUR ab 768px — unter 768px
   klappt die Admin-Bar-Höhe selbst um (WP-Standard, 46px statt 32px) UND
   unsere eigene Mobile-Position soll unabhängig von der Admin-Bar gelten,
   sonst gewinnt diese Regel wegen höherer Selektor-Spezifität gegen die
   @media-Regel unten, auch wenn die Media-Query bereits aktiv ist. */
@media (min-width: 768px) {
	body.admin-bar .ctp-detail a.ctp-back-nav {
		top: 65px;
		right: 20px;
	}
}
.ctp-detail a.ctp-back-nav:hover,
.ctp-detail a.ctp-back-nav:focus {
	background: #2d3433;
	color: #fff !important;
	text-decoration: none !important;
}
@media (max-width: 767px) {
	.ctp-detail a.ctp-back-nav {
		top: 16px;
		right: 83px;
	}
	/* Mobile Admin-Bar ist 46px hoch (WP-Standard, ab 782px erst 32px) —
	   eigene Position, sonst sitzt der Button in der Admin-Bar statt darunter. */
	body.admin-bar .ctp-detail a.ctp-back-nav {
		top: 62px;
		right: 83px;
	}
}

/* ============================================================
   STICKY KONTAKT-FAHNE (rechter Rand)
   Vertikale orange Lasche, ~30% von oben fixiert. Klick scrollt zur
   Kontakt-Sektion (#ctp-kontakt). Markup: single/single-property.php.
   ============================================================ */
/* .immomakler a { background-color: transparent } (Plugin) würde den orangen
   Hintergrund schlucken → hier mit !important durchsetzen. */
.ctp-detail a.ctp-contact-tab {
	position: fixed;
	top: 30%;
	right: 0;
	z-index: 1000;
	/* Text vertikal (von unten nach oben lesbar). */
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	transform-origin: center;
	background-color: var(--ctp-orange) !important;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 14px 10px 14px 13px;
	border-radius: 4px;           /* rundum 4px */
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
	transition: background-color .15s ease, padding-right .15s ease;
}
.ctp-detail a.ctp-contact-tab:hover,
.ctp-detail a.ctp-contact-tab:focus {
	background-color: var(--ctp-orange-dk) !important;
	color: #fff !important;
	text-decoration: none !important;   /* kein Underline bei Hover */
	padding-right: 12px;                /* fährt leicht raus beim Hover */
}
/* Sanftes Scrollen + Anker nicht unter einer fixen Theme-Leiste verstecken. */
html { scroll-behavior: smooth; }
#ctp-kontakt { scroll-margin-top: 80px; }
/* Auf sehr schmalen Screens etwas kompakter. */
@media (max-width: 600px) {
	.ctp-contact-tab {
		font-size: 11px;
		padding: 10px 6px;
	}
}


/* ============================================================
   1. HERO
   ============================================================ */
.ctp-hero {
	width: 100%;
	height: clamp(320px, 48vw, 620px);
	overflow: hidden;
	background: #222;
}
/* Imagify wandelt das <img> von the_post_thumbnail() in <picture><source>
   (WebP) + <img>…</picture> um und setzt die Bild-Klasse (hier .ctp-hero__image)
   dabei auf BEIDE Elemente. object-fit/object-position wirken aber nur auf
   <img> selbst, nicht auf den umschließenden <picture>-Wrapper — ohne die
   <picture>-Regel unten bleibt <picture> in seiner nativen (verzerrten/
   "verschobenen") Darstellung, während <img> zwar korrekt gecovert wäre, aber
   vom <picture>-Element bereits falsch dimensioniert eingebettet ist.
   Bekanntes Imagify-Verhalten, s. https://imagify.io/documentation/images-not-aligned-webp/ */
.ctp-hero__image,
picture.ctp-hero__image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
}
.ctp-hero__image img,
img.ctp-hero__image {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
}
.ctp-hero__image--placeholder {
	background: linear-gradient(135deg, #ddd 0%, #aaa 100%);
}


/* ============================================================
   2. TITLE-BLOCK – Sand
   ============================================================ */
.ctp-titleblock {
	background: var(--ctp-sand);
	padding: clamp(48px, 7vw, 96px) 0;
}
.ctp-titleblock__grid {
	display: grid;
	/* 50/50: Intro (Name/Adresse/PDF) links, Beschreibung rechts. */
	grid-template-columns: 1fr 1fr;
	gap: var(--ctp-col-gap);
	align-items: start;
}
.ctp-titleblock__intro { grid-column: 1; min-width: 0; }
.ctp-titleblock__lead  { grid-column: 2; min-width: 0; }

/* Kompakter Header-Kontakt (functions.php → ctp_render_header_contact):
   Eyebrow + Foto + Datenliste, ohne große HL / Button / Newsletter. */
.ctp-headcontact__photo {
	margin: 12px 0 16px;
	max-width: 150px;
}
/* <picture>-Wrapper-Fall wie beim .ctp-contact-Fotoblock oben — ohne das
   bricht das Bild aus max-width aus und legt sich über die Datenliste. */
.ctp-headcontact__photo picture,
.ctp-headcontact__photo img {
	width: 100%;
	height: auto;
	max-width: none;
	display: block;
}
/* Datenliste exakt wie im unteren Kontaktblock: Labels (.dt) ausgeblendet,
   nur die Werte (.dd) untereinander; erste Zeile (Name) fett/größer. */
.ctp-headcontact__data {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
}
.ctp-headcontact__data .list-group-item {
	display: block;
	background: transparent;
	border: none;
	padding: 0;
	margin-bottom: 2px;
}
.ctp-headcontact__data .dt {
	display: none;
}
.ctp-headcontact__data .dd {
	display: block;
	font-size: 15px;
	font-weight: 400;
	color: var(--ctp-ink);
	line-height: 1.5;
}
.ctp-headcontact__data .dd a { color: var(--ctp-ink); }
.ctp-headcontact__data .dd a:hover { color: var(--ctp-orange); }
/* Erste Zeile (Name) fett & größer – wie unten. */
.ctp-headcontact__data .list-group-item:first-child .dd {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 6px;
}
/* Plugin-Heading "Kontaktdaten" taucht hier nicht auf (eigenes Markup),
   aber zur Sicherheit ausblenden, falls ein Hook es injiziert. */
.ctp-headcontact .panel-heading { display: none; }
.ctp-title {
	font-size: clamp(40px, 4vw, 3rem);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	color: var(--ctp-ink);
}
/* Brand-Wörter ("ctPark", …) werden im PHP via ctp_bold_brand()
   in <strong> gewrappt — Rest des Titels bleibt leicht. */
.ctp-title strong {
	font-weight: 700;
}
.ctp-address {
	font-style: normal;
	font-size: 17px;
	line-height: 1.5;
	margin: 0 0 8px;
}
.ctp-subtitle {
	font-size: 14px;
	color: var(--ctp-grey);
	margin: 0 0 28px;
}
.ctp-titleblock__lead {
	font-size: 16px;
	line-height: 1.65;
}
.ctp-titleblock__lead p {
	margin: 0 0 14px;
	font-size: inherit;
	font-weight: 400;
}
.ctp-titleblock__lead p:last-child { margin-bottom: 0; }
.ctp-titleblock__lead strong {
	display: inline;
	font-size: inherit;
	font-weight: 700;
}

@media (max-width: 767px) {
	/* Alle Detailseiten-Grids auf eine Spalte: H2/HL einfach über dem Inhalt,
	   linke und rechte Spalte stapeln untereinander. HÖHERE Spezifität als die
	   Desktop-Grid-Regel (.immomakler-single zusätzlich), weil diese Query im
	   File VOR der Desktop-Regel steht — bei gleicher Spezifität + !important
	   würde sonst die spätere Desktop-Regel auch auf mobil gewinnen. */
	.immomakler-single.ctp-detail .ctp-row {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}
	.ctp-titleblock__grid,
	.ctp-description .property-description,
	.ctp-gallery__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	/* Title-Block-Spalten auf mobil untereinander. */
	.ctp-titleblock__intro,
	.ctp-titleblock__lead,
	.ctp-gallery__headline,
	.ctp-gallery__body {
		grid-column: 1;
	}
	/* Etwas Abstand zwischen den gestapelten Sektionen auf mobil. */
	.ctp-rows {
		gap: 40px;
	}
}


/* ============================================================
   3. INHALT – Folge zweispaltiger Einzelsektionen
   ============================================================
   .ctp-rows = vertikale Liste unabhängiger .ctp-row-Sektionen.
   Jede .ctp-row ist EIN eigenes 2-Spalten-Grid (links schmal = HL/Specs |
   rechts breit = Inhalt), align-items:start → linke und rechte Spalte
   beginnen je Sektion auf gleicher Höhe. Die nächste Sektion (mit ihrer
   H2 links) startet erst nach Ende der vorigen → klare, eigene Höhe je Block.
   Mobil (≤767px, s. Media-Query oben): einspaltig, H2/HL einfach über dem
   Inhalt. */
.ctp-rows {
	display: flex;
	flex-direction: column;
	gap: clamp(45px, 4vw, 95px);
	padding: clamp(56px, 8vw, 112px) 0;
}
/* Hohe Spezifität (.ctp-detail vorangestellt) + !important auf den
   Grid-Properties, damit weder Plugin-/Theme-Resets noch ältere
   .ctp-description-Regeln das 2-Spalten-Raster der Sektionen 2–5 auf eine
   Spalte zurückdrücken können. */
.ctp-detail .ctp-row {
	display: grid !important;
	/* Werte direkt (nicht über --ctp-col-*), damit das Raster auch dann gilt,
	   wenn die Variablen im Detailseiten-Kontext nicht aufgelöst werden — sonst
	   wäre grid-template-columns ungültig, das Grid fiele auf eine implizite
	   Spalte zurück und HL/Body (mit grid-column:1/2) würden sich überlagern. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) !important;
	gap: clamp(40px, 5.5vw, 72px);
	align-items: start;
	min-width: 0;
}
/* KEINE expliziten grid-column-Angaben: Bei genau zwei Kindern platziert das
   Grid sie automatisch in Spalte 1 und 2. Das vermeidet den Konflikt, bei dem
   die Mobile-Query (grid-column:1) und die Desktop-Angabe (grid-column:2) je
   nach Reihenfolge gegeneinander gewannen und die Items sich überlagerten. */
.ctp-detail .ctp-row > .ctp-row__hl {
	min-width: 0;
}
.ctp-detail .ctp-row > .ctp-row__body {
	min-width: 0;
	overflow: hidden; /* Galerie/Karte dürfen die Spalte nicht sprengen */
}
/* Section-Überschriften (alle gleich, inkl. Flächen): Eyebrow-Optik — 16px,
   orange, versal/uppercase, gesperrt. */
.ctp-row__hl .ctp-section-title {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ctp-orange);
	line-height: 1.3;
	margin: 0;
}
/* Die Sub-Templates brachten eigene interne 2-Spalten-Grids + eigene
   Überschriften mit. Im neuen Row-Raster ist die HL bereits links
   ausgelagert → interne Grids auf Block stellen und interne Headings
   ausblenden (sonst doppelte Überschrift). Drei Klassen-Ebenen, damit diese
   Regeln die älteren `.ctp-description .property-description { display:grid }`
   (gleiche Spezifität, aber weiter unten im File) sicher überschreiben. */
.ctp-row .ctp-row__body .property-description,
.ctp-row .ctp-row__body .ctp-gallery__grid {
	display: block;
}
.ctp-row .ctp-row__body .property-description .panel-heading {
	display: none;
}
.ctp-keyfacts__list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.ctp-keyfact {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 11px 0 15px;
	border-bottom: 1px dotted var(--ctp-line-dot);
}
.ctp-keyfact:first-child { padding-top: 0; }
.ctp-keyfact:last-child { border-bottom: none; }
.ctp-keyfact__value {
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 300;
	line-height: 1.1;
	color: var(--ctp-ink);
	letter-spacing: -0.01em;
	margin: 0;
	white-space: nowrap;
}
.ctp-keyfact__label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--ctp-orange);
	margin-top: 4px;
}

/* Mobile-Fallback siehe globalen 767px-Media-Query oben */


/* ============================================================
   3b. LAGE – Inhalt der Lage-Sektion (.ctp-rightcol__lage)
   ============================================================ */
.ctp-rightcol__lage .property-map { margin: 0; }
/* Abstand zwischen der Google-Karte (darüber) und dem Lage-Text. */
.ctp-rightcol__lage .property-lage-text {
	margin-top: clamp(20px, 2.5vw, 32px);
}
.ctp-rightcol__lage p {
	font-size: 16px;
	line-height: 1.65;
	margin: 0 0 24px;
}
.ctp-rightcol__lage p:last-of-type {
	margin-bottom: 0;
}
.ctp-rightcol__lage .immomakler-map-iframe,
.ctp-rightcol__lage .map {
	width: 100% !important;
	aspect-ratio: 16 / 9;
	border: none;
	border-radius: 0;
	display: block;
}
.ctp-rightcol__lage .googlemaps-link {
	font-size: 13px;
	color: var(--ctp-grey);
	margin-top: 12px;
}


/* ============================================================
   4. SPEC-LIST
   ============================================================ */
/* Spec-Liste sitzt jetzt in der linken Spalte unter den Keyfacts →
   einspaltig, schmal. (.ctp-specs als eigene Section gibt es nicht mehr.) */
.ctp-spec-list {
	display: block;
	margin: 28px 0 0;
	padding: 0;
}
.ctp-spec-list__item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ctp-line);
}
.ctp-spec-list__label {
	font-size: 14px;
	color: var(--ctp-grey);
	font-weight: 400;
	margin: 0;
}
.ctp-spec-list__value {
	font-size: 14px;
	font-weight: 700;
	color: var(--ctp-ink);
	margin: 0;
	text-align: right;
}


/* ============================================================
   5. DESCRIPTION – Heading links, Text rechts (gleiches Grid)
   ============================================================ */
/* Kein eigenes padding-bottom mehr: die Beschreibung ist jetzt eine .ctp-row
   im .ctp-rows-Stapel, dessen gap die Abstände regelt. Das alte Standalone-
   Padding addierte sich sonst → riesiger Abstand zur Flächen-Sektion. */
.ctp-description .property-description {
	display: grid;
	grid-template-columns: var(--ctp-col-left) var(--ctp-col-right);
	gap: var(--ctp-col-gap);
	align-items: start;
}
.ctp-description .property-description .panel-heading { grid-column: 1; }
.ctp-description .property-description .panel-body    { grid-column: 2; }
/* Sub-Headlines pro Beschreibungs-Block (Lagebeschreibung, Ausstattung,
   Sonstiges …) ausblenden – nur der Beschreibungstext soll erscheinen. */
.ctp-description .property-description h3 {
	display: none;
}
.ctp-description .property-description p {
	font-size: 16px;
	line-height: 1.65;
	margin: 0 0 16px;
	max-width: 80ch;
}
.ctp-description .property-description p strong {
	font-weight: 700;
	/* fett, aber inline und in Fließtextgröße (keine Block-Hervorhebung mehr) */
}


/* ============================================================
   7. GALERIE + 7b. GRUNDRISSE – Headline links, Galerie rechts
   Gleiches 2-Spalten-Grid wie die Objektbeschreibung (--ctp-col-left /
   --ctp-col-right). Die Galerien rendern die Plugin-Swiper-Galerie
   (.immomakler-gallery) im rechten Body; sie tragen ihr Plugin-Styling.
   Mobil (≤767px, s. Media-Query oben) wird das Grid einspaltig.
   ============================================================ */
.ctp-gallery {
	padding: 0 0 clamp(56px, 8vw, 112px);
}
.ctp-gallery__grid {
	display: grid;
	grid-template-columns: var(--ctp-col-left) var(--ctp-col-right);
	gap: var(--ctp-col-gap);
	align-items: start;
}
.ctp-gallery__headline {
	grid-column: 1;
}
.ctp-gallery__body {
	grid-column: 2;
	min-width: 0; /* erlaubt der Swiper-Galerie, in der Grid-Spalte zu schrumpfen */
}
/* Die Galerie-Headline wird über die gemeinsame Sektion-Headline-Regel
   gestylt (s. .ctp-section-title weiter oben) — identisch zu "Lage". */

/* Seit WP-ImmoMakler 5.66.0 sind die Swiper-Navigationspfeile der Galerie
   echte <button>-Elemente statt <div> (Accessibility-Fix). Das machte sie
   kurzzeitig (bis 5.66.0) angreifbar für Themes, die alle Buttons einheitlich
   gestalten — bei uns Elementors globale Kit-Regel (.elementor-kit-16 button,
   .elementor-button etc. — border-style:solid, border-width:1px), die sie
   vorher als <div> gar nicht traf: sichtbarer 1px-Rahmen um die volle
   Klick-Trefferzone bei Hover/Klick statt nur ein dezenter Fokus-Ring auf dem
   runden Pfeil-Symbol. Ab 5.67.0 behebt das Plugin dasselbe Problem bereits
   selbst in gallery-base.css (":is(.immomakler-gallery__prev, …)" auf
   Spezifität (0,2,0)+, genau wie hier per Selektor-Länge statt !important
   erreicht — s. Kommentar dort). Diese Regel bleibt als Sicherheitsnetz
   stehen (z. B. falls Elementor sein Kit-CSS künftig mit !important versieht),
   ist inhaltlich aber redundant zum Plugin-eigenen Fix. Selektor auf
   .immomakler-gallery (den tatsächlichen Plugin-Wrapper,
   id="immomakler-gallery-N"), NICHT .ctp-gallery — diese Klasse trägt kein
   Element im gerenderten Markup, sitzt hier nur als Layout-Wrapper in
   single-property.php außen um .ctp-row__body. */
.immomakler-gallery .swiper-button-prev,
.immomakler-gallery .swiper-button-next,
.immomakler-gallery .immomakler-gallery__prev,
.immomakler-gallery .immomakler-gallery__next {
	border-style: none !important;
}


/* Grundrisse: plain untereinander (kein Swiper) — gemischte Formate
   (hoch-/querformatig) werden so ganz natürlich dargestellt, kein Beschnitt,
   kein fester Rahmen. Markup: functions.php → ctp_render_floorplans_gallery(). */
.ctp-floorplans-plain {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 28px);
}
.ctp-floorplan {
	margin: 0;
}
.ctp-floorplan a {
	display: block;
}
/* Wie beim Hero (s. dort): Imagify wandelt das <img> in <picture><source>
   (WebP) + <img>…</picture> um und setzt die Bild-Klasse (ctp-floorplan-img)
   dabei auf BEIDE Elemente. Breite/Höhe müssen daher auch auf das innere
   <img> angewendet werden — sonst behält es seine HTML-width/height-Attribute
   (z. B. 800×579) als Anzeigegröße, unabhängig vom umschließenden <picture>. */
.ctp-floorplan-img,
picture.ctp-floorplan-img {
	display: block;
	width: 100%;
	height: auto;                 /* natürliche Höhe = Bildformat */
	max-width: 100%;
}
.ctp-floorplan-img img,
img.ctp-floorplan-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}


/* ============================================================
   8. KONTAKT (Ansprechpartner-Block) – Layout analog Mockup
   (kontakt-layout.jpg): vier Spalten, weißer Hintergrund.
   ┌────────────┬───────┬───────────────┬─────────────────┐
   │ KOMM. KONT.│ Foto  │ Name          │ Newsletter-Text │
   │ Kontakt    │       │ Position      │                 │
   │ aufnehmen  │       │ Tel / E-Mail  │ [Anmelden]      │
   │            │       │ [Kontakt…]    │                 │
   └────────────┴───────┴───────────────┴─────────────────┘
   ============================================================ */
.ctp-contact {
	background: transparent;
	padding: clamp(48px, 6vw, 80px) 0;
}
/* Volle-Breite-Abschluss am Seitenende: dezenter Sand-Hintergrund + obere
   Trennlinie, damit der Kontaktblock sich vom Content darüber abhebt. */
.ctp-contact--full {
	background: #c0d0be;
	margin-top: clamp(40px, 6vw, 80px);
}

/* Outer 4-Spalten-Grid: Headline | Foto | Plugin-Daten-Block | CTA */
.ctp-contact__layout {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)            /* Intro/Headline           */
		150px                     /* Foto                     */
		minmax(0, 1.4fr)          /* Plugin: .property-contact */
		minmax(0, 1fr);           /* CTA / Newsletter         */
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
}
.ctp-contact__intro {
	grid-column: 1;
}
.ctp-contact__headline {
	font-size: clamp(32px, 3.4vw, 44px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ctp-ink);
	margin: 0;
}
.ctp-contact__cta {
	grid-column: 4;
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
.ctp-contact__cta-text {
	font-size: 15px;
	line-height: 1.55;
	font-weight: bold;
	color: var(--ctp-ink);
	margin: 0;
}
.ctp-contact__cta-btn {
	display: inline-block;
	/* Gleiche Größe wie der "Kontaktieren Sie mich"-Button (s. unten):
	   gleiches Padding + font-size → gleiche Button-Höhe. */
	padding: 8px 20px;
	font-size: inherit;
	line-height: 1.4;
}

/* Plugin-Block: spannt sich über Spalte 2 (Foto) + 3 (Daten) */
.ctp-contact .property-contact.ctp-contact__card {
	grid-column: 2 / 4;
}

/* Plugin-Heading "Kontaktdaten" verstecken — im Mockup steht die
   Headline in der linken Spalte. */
.ctp-contact .property-contact .panel-heading {
	display: none !important;
}

/* Foto links, Daten rechts innerhalb des Plugin-Blocks.
   WICHTIG: seit WP-ImmoMakler 5.66.0 bringt der PARENT-Skin selbst ein
   eigenes CSS-Grid für dieses exakte Element mit (skins/bootstrap3/css/
   immomakler.css, "Photo case (sm+): CSS grid for side-by-side layout"),
   das Foto in grid-column 2 setzt (rechts) und auf .col-sm-8 zusätzlich
   position:relative + den Button position:absolute. Gleiche Selektor-
   Spezifität wie unsere Regeln (3 Klassen) → ohne !important entscheidet
   allein die Ladereihenfolge der Stylesheets darüber, welche Regel
   gewinnt, und das Ergebnis war das Foto/Text-Overlap. Alle Platzierungs-
   Deklarationen hier deshalb explizit mit !important, unabhängig von der
   Parent-Skin-Version. */
.ctp-contact .property-contact .panel-body > .row {
	display: grid !important;
	grid-template-columns: 150px minmax(0, 1fr) !important;
	gap: clamp(20px, 2.5vw, 32px);
	align-items: start;
	margin: 0;
}
.ctp-contact .property-contact .contact-photo {
	float: none !important;
	width: 150px !important;
	padding: 0 !important;
	right: auto !important;
	left: auto !important;
	position: static !important;
	grid-column: 1 !important;
	grid-row: 1 !important;
}
/* Ab WP-ImmoMakler 5.66.0 (bzw. mit WebP-Konverter-Plugins wie Imagify)
   wandelt the_post_thumbnail() das <img> in <picture><source>…<img>…</picture>
   — analog zum Hero-/Grundriss-Bild oben. Ohne diese Regel bleibt das
   <picture>-Element in seiner nativen Inline-Größe (hier 360×355 aus den
   width/height-Attributen) und legt sich als überbreites Element über den
   Text daneben, statt sich in den 150px-Slot einzupassen. */
.ctp-contact .property-contact .contact-photo picture,
.ctp-contact .property-contact .contact-photo img {
	display: block !important;
	width: 150px !important;
	height: 150px !important;
	max-width: none !important;
	margin: 0 !important;
	border-radius: 50%;
	object-fit: cover;
	border: none;
	box-shadow: none;
}
.ctp-contact .property-contact .col-sm-8 {
	float: none !important;
	width: 100% !important;
	padding: 0 !important;
	right: auto !important;
	left: auto !important;
	position: static !important;
	grid-column: 2 !important;
	grid-row: 1 !important;
}

/* Daten-Zeilen: Labels (dt) ausblenden — Mockup zeigt nur Werte. */
.ctp-contact .property-contact .list-group-item {
	display: block;
	border: none !important;
	padding: 0 !important;
	margin-bottom: 2px;
}
.ctp-contact .property-contact .list-group-item .row {
	margin: 0;
}
.ctp-contact .property-contact .list-group-item .dt {
	display: none !important;
}
.ctp-contact .property-contact .list-group-item .dd {
	float: none;
	width: 100% !important;
	padding: 0;
	font-size: 15px;
	font-weight: 400;
	color: var(--ctp-ink);
	line-height: 1.5;
}
.ctp-contact .property-contact .list-group-item .dd a {
	color: var(--ctp-ink);
}
.ctp-contact .property-contact .list-group-item .dd a:hover {
	color: var(--ctp-orange);
}

/* Erste Zeile (Name) fett & größer als Headline-Akzent. */
.ctp-contact .property-contact .list-group-item:first-child .dd {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 6px;
}

/* "Kontaktieren Sie mich"-Button: aus btn-block in unsere ctp-btn-Optik.
   position:static zurücksetzen — der Parent-Skin verankert diesen Button
   ab 5.66.0 mit position:absolute am unteren Rand der Foto-Spalte (eigenes
   "no-photo bottom-pinned button"-Layout, s. Kommentar oben bei .row); in
   unserem eigenen Grid-Layout brauchen/wollen wir das nicht. */
.ctp-contact .property-contact .list-group-item.hidden-print {
	position: static !important;
	margin-top: 8px;
}
.ctp-contact .property-contact .property-contact-form-cta-button.btn-block {
	display: inline-block !important;
	width: auto !important;
	background: var(--ctp-orange) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px !important;
	padding: 8px 20px !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.4 !important; /* identisch zu .ctp-contact__cta-btn → gleiche Höhe */
	white-space: nowrap;
	margin-top: 10px !important;
}
.ctp-contact .property-contact .property-contact-form-cta-button.btn-block:hover {
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
	text-decoration: none !important;
}

/* Tablet: Headline + Newsletter behalten, Foto+Daten zusammen. */
@media (max-width: 1023px) {
	.ctp-contact__layout {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.ctp-contact__intro    { grid-column: 1; }
	.ctp-contact .property-contact.ctp-contact__card { grid-column: 1 / -1; }
	.ctp-contact__cta      { grid-column: 2; grid-row: 1; }
}

/* Mobile: alles untereinander. */
@media (max-width: 600px) {
	.ctp-contact__layout {
		grid-template-columns: 1fr;
	}
	.ctp-contact__intro,
	.ctp-contact .property-contact.ctp-contact__card,
	.ctp-contact__cta {
		grid-column: 1;
		grid-row: auto;
	}
	.ctp-contact .property-contact .panel-body > .row {
		grid-template-columns: 120px 1fr !important;
		gap: 16px;
	}
	.ctp-contact .property-contact .contact-photo,
	.ctp-contact .property-contact .contact-photo picture,
	.ctp-contact .property-contact .contact-photo img {
		width: 120px !important;
		height: 120px !important;
	}
}


/* ============================================================
   9. KONTAKTFORMULAR
   ============================================================ */
.ctp-contactform {
	padding: clamp(56px, 8vw, 112px) 0;
}
.ctp-contactform .property-contactform .panel-heading h2 {
	color: var(--ctp-orange);
	font-size: 20px;
	font-weight: 700;
}
.ctp-contactform .form-control {
	border-radius: 0;
	border-color: var(--ctp-line);
	box-shadow: none;
	padding: 12px 14px;
	font-size: 15px;
}
.ctp-contactform .form-control:focus {
	border-color: var(--ctp-orange);
	outline: none;
}


/* ============================================================
   PRINT
   ============================================================ */
@media print {
	.ctp-btn,
	.ctp-contactform,
	.elementor-location-header,
	.elementor-location-footer { display: none !important; }
	.ctp-hero { height: 240px; }
	.ctp-detail { font-size: 12px; }
	.ctp-section-title,
	.ctp-keyfact__value,
	.ctp-eyebrow { color: #000 !important; }
	.ctp-titleblock { background: transparent; }
	.ctp-contact { background: transparent; }
}


/* ============================================================
   10. ARCHIV / SUCHE – Ergebnis-Karten
   Layout-Ziel: _input/start-layout.jpg
   ============================================================ */

/* Content-Abregelung des Archiv-Widgets an Elementors Container-Raster.
   Das Plugin-Elementor-Widget (ImmoMakler\…\Elementor\Widgets\Archive_Loop)
   rendert <div class="immomakler-archive immomakler"> und füllt damit den
   umgebenden e-con voll aus. Sitzt es in einem full-bleed-Container (z. B.
   dem sandfarbenen Block, dessen --padding-left/right im Editor bewusst auf
   0 steht, damit der Hintergrund randlos läuft), kleben die Kacheln am Rand
   und sitzen in einem anderen Raster als die übrigen Elementor-Module.

   Lösung: NICHT den Container anfassen (Sand soll full-bleed bleiben),
   sondern den Widget-Inhalt selbst auf Elementors Content-Breite zentrieren
   und Elementors Default-Seitenpadding übernehmen. Bewusst über die
   Elementor-Variablen --content-width / --container-default-padding-*
   statt harter Pixel: ändert man die globalen Layout-Settings (Site
   Settings → Layout: Content-Breite / Padding), zieht das Grid automatisch
   mit. Fallbacks entsprechen den im Theme aktiven Werten (1280px / 2rem).
   Mobil bleibt über den --container-default-padding-Wert (bzw. den
   clamp-Fallback) ein Seitenabstand zum Viewport-Rand erhalten — analog zu
   .ctp-container auf der Detailseite. */
.immomakler-archive,
[id$="immomakler-search"] {
	max-width: var(--content-width, min(100%, 1280px));
	margin-inline: auto;
	box-sizing: border-box;
	padding-inline:
		var(--container-default-padding-left, clamp(16px, 4vw, 2rem))
		var(--container-default-padding-right, clamp(16px, 4vw, 2rem));
}

/* Auf der Archivseite (/immobilien/) selbst soll die Suchmaske OHNE seitliches
   Padding laufen (Kundenwunsch) — auf der Homepage (gleiche ID, gleiches
   Plugin-Markup) bleibt das Padding oben dagegen wie gehabt bestehen, dort
   war es korrekt. Body-Klasse .post-type-archive-immomakler_object ist
   WordPress' Standard-Klasse für dieses Post-Type-Archiv, greift also nur
   auf /immobilien/, nicht auf der Homepage. */
.post-type-archive-immomakler_object [id$="immomakler-search"] {
	max-width: none;
	padding-inline: 0;
}

/* HINWEIS: "Immobilienangebot"-H1 + "Alle Immobilien"-H2 (.archive-title/
   .archive-subtitle) kamen entgegen erster Vermutung NICHT vom WP-Theme,
   sondern direkt vom WP-ImmoMakler-Parent-Skin: skins/bootstrap3/archive/
   title.php, IMMER als erstes Kind von .immomakler-archive gerendert.
   NICHT zu verwechseln mit unserem archive/title-property.php (Titel je
   einzelner Kachel/Objekt) — hier geht es um den einmaligen SEITEN-Titel.
   Kein CSS-Fix mehr nötig — stattdessen per Child-Skin-Override komplett
   deaktiviert, s. archive/title.php (leeres Override, analog zu
   archive/status-property.php). */

/* Das Plugin (immomakler-plus.css:3) legt auf das innere <form> ein eigenes
   padding: 0 10px — das addiert sich zur Container-Abregelung oben und lässt
   die Suchmaske gegenüber den Kacheln einrücken/asymmetrisch wirken. Wir
   regeln die Seitenränder schon am äußeren Wrapper [id$="immomakler-search"]
   ab, also das Form-Padding hier auf 0 nehmen. Selektoren 1:1 wie im Plugin
   (inkl. Shortcode-Prefix-Variante), damit die ID-Spezifität trifft. */
#shortcode-immomakler-search-form,
#immomakler-search-form {
	padding-inline: 0;
}

/* 3-Spalten-Karten-Grid. Plugin gibt .properties als Flow-Container mit
   .property-Kindern aus — wir machen daraus ein Grid. */
.immomakler-archive .properties.immomakler-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.5vw, 32px);
}
.immomakler-archive .properties .property {
	display: block;
}
.immomakler-archive .property-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--ctp-line);
	border-radius: 4px;
	overflow: hidden;
}

/* Bild */
.immomakler-archive .property-thumbnail {
	width: 100% !important;
	padding: 0 !important;
	float: none !important;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.immomakler-archive .property-thumbnail .thumbnail {
	display: block;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	height: 100%;
}
.immomakler-archive .property-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Status-Störer auf der Kachel: nur noch für Status "in Entwicklung"
   (archive/status-property.php), sonst weiterhin aus — Verfügbarkeit steht
   für die übrigen Fälle als Textzeile unter Nutzungstyp (archive/data-property.php).
   Grund-Styling (.property-status-bar) kommt aus dem Parent-Skin-CSS; die
   Breite überschreiben wir, weil die feste Parent-Breite (65%, 140–170px)
   bei "in Entwicklung" unschön umbricht bzw. abschneidet — Badge soll sich
   stattdessen am Textinhalt orientieren. */
.immomakler-archive .property-status {
	width: max-content;
	min-width: 0;
	max-width: none;
	padding: 0 11px;
	font-size: 14px;
}
/* Farbe nur für "in Entwicklung" (Slug 'in-entwicklung') — Parent-Default
   (#CC3300 / weiß) gilt weiterhin für alle anderen Status, die diesen
   Störer nutzen sollten (aktuell zeigt nur dieser eine Status den Badge,
   s. status-property.php, aber die Klasse bleibt statusspezifisch statt
   pauschal .property-status zu überschreiben, für den Fall dass später
   weitere Status den Störer bekommen). */
.immomakler-archive .property-status.property-status-in-entwicklung {
	background-color: #facd00;
	color: var( --e-global-color-secondary );
}

/* Detail-Bereich */
.immomakler-archive .property-details {
	width: 100% !important;
	padding: 20px 22px !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.immomakler-archive .property-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
	line-height: 1.2;
}
.immomakler-archive .property-title a {
	color: var(--ctp-ink);
}
.immomakler-archive .property-title a:hover {
	color: var(--ctp-orange);
}
.immomakler-archive .property-subtitle {
	font-size: 14px;
	color: var(--ctp-grey);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.immomakler-archive .property-subtitle .glyphicon-map-marker {
	color: var(--ctp-orange);
	font-size: 13px;
}

/* Datenbereich (eigenes Markup aus archive/data-property.php) */
.immomakler-archive .property-data {
	margin-top: 0;
}
.ctp-card-data {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ctp-card-teaser {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ctp-ink);
	margin: 0 0 12px;
}
.ctp-card-area {
	font-size: clamp(26px, 2.4vw, 32px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--ctp-orange);
	margin: 0 0 10px;
}
.ctp-card-data .row {
	display: flex;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}
.ctp-card-meta-label {
	color: var(--ctp-grey);
}
.ctp-card-meta-value {
	color: var(--ctp-ink);
	font-weight: 400;
}

/* Button-Bereich – immer am unteren Rand der Karte */
.immomakler-archive .property-actions {
	margin-top: auto;
	padding: 0 22px 22px;
}
/* Plugin setzt über die spezifischere Boxed-Kette ein linkes Spacing —
   hier explizit entfernen, damit die Buttons bündig zum Karteninhalt
   links starten. */
.immomakler-archive .immomakler-boxed .property-container .property-actions {
	left: 0 !important;
	margin-left: 0 !important;
	padding-left: 22px !important;
	text-align: left;
}
/* "Parkseite besuchen" links, "merken" rechts daneben, mit Abstand.
   Bootstrap-.btn-group/.btn setzen float — das bricht flex 'order'.
   Daher Float hier explizit aufheben, dann greift order zuverlässig. */
.ctp-card-actions {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
}
.ctp-card-actions > .btn,
.ctp-card-actions > a {
	float: none !important;
	margin-left: 0 !important;
}
.ctp-card-btn {
	order: 1;
	margin-left: 0 !important;
}
.immomakler-archive .property-actions .immobilie-cart-addremove {
	order: 2;
	margin-left: auto;
}

/* Karten-Buttons etwas kleiner als die Detail-Buttons. */
.immomakler-archive .ctp-card-btn,
.immomakler-archive .property-actions .immobilie-cart-addremove {
	font-size: 13px;
	padding: 6px 14px;
	line-height: 1.4;
}
/* Merken-Button: gleiche Höhe/Optik wie der Park-Button, aber als
   sekundäre (umrandete) Variante. */
.immomakler-archive .property-actions .immobilie-cart-addremove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	color: var(--ctp-ink);
	border: 1px solid var(--ctp-line);
	border-radius: 4px;
	white-space: nowrap;
}
.immomakler-archive .property-actions .immobilie-cart-addremove:hover {
	border-color: var(--ctp-orange);
	color: var(--ctp-orange);
	text-decoration: none;
}

/* Paginierung unter den Archiv-Kacheln: mehr Abstand nach oben + dezenter
   grauer statt schwarzer Rand (Plugin-Default: immomakler.css:253-254,
   border-top/-bottom ohne explizite Farbe → erbt die Textfarbe). */
.immomakler .paginator.row {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 30px;
	border-top-color: #ccc;
	border-bottom-color: #ccc;
	font-size: 14px;
}


/* ============================================================
   11. SUCHMASKE – Zeilenbreiten angleichen
   ============================================================ */

/* Eingabefelder der Suchmaske: Plugin-Box-Shadow weg, kein Bottom-Margin
   (sonst Versatz in den Flex-Zeilen). */
.immomakler .form-control {
	box-shadow: none;
	margin-bottom: 0;
}

/* ------------------------------------------------------------
   Dropdowns als "Strich-Selects" (Layout-Vorlage start-layout.jpg):
   statt Bootstrap-Box nur ein unterer Strich (CTP-Orange).

   Das Plugin nutzt bootstrap-select: das echte <select> ist versteckt,
   sichtbar ist ein <button class="btn dropdown-toggle btn-default"> mit
   eigenem <span class="caret">. Wir stylen primaer diesen Button und
   zusaetzlich das rohe <select> als Fallback (falls das JS nicht laedt).
   Gescoped auf .search-taxonomies, damit Actions-Buttons unberuehrt sind.
   ------------------------------------------------------------ */
.search-taxonomies .bootstrap-select .dropdown-toggle.btn-default,
.search-taxonomies select.selectpicker {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--ctp-orange) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 6px 24px 8px 0 !important;   /* Platz rechts fuer das Caret */
	height: auto !important;
	color: var(--ctp-ink) !important;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	outline: none !important;
}
.search-taxonomies .bootstrap-select .dropdown-toggle.btn-default:hover,
.search-taxonomies .bootstrap-select .dropdown-toggle.btn-default:focus,
.search-taxonomies .bootstrap-select.open .dropdown-toggle.btn-default,
.search-taxonomies select.selectpicker:hover,
.search-taxonomies select.selectpicker:focus {
	border-bottom-color: var(--ctp-orange-dk) !important;
	color: var(--ctp-ink) !important;
}
/* Label-Optik wie Mockup: Versalien in Ink, halbfett — gilt auch im
   Placeholder-Zustand ("Alle Projekte"), kein abgeschwaechtes Grau. */
.search-taxonomies .bootstrap-select .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
	color: var(--ctp-ink);
	font-weight: 500;
	text-transform: uppercase;
}
/* Caret (Pfeil) rechts am Strich positionieren. */
.search-taxonomies .bootstrap-select .dropdown-toggle .caret {
	right: 4px;
	border-top-color: var(--ctp-orange);
}
/* Der bootstrap-select-Wrapper bringt selbst keine Box mehr mit. */
.search-taxonomies .bootstrap-select {
	box-shadow: none;
}

/* Die Buttons-Zeile sitzt im Plugin zusätzlich in einem
   .panel.panel-default mit eigenem Border/Padding — dadurch läuft sie
   breiter/schmaler als die Dropdown- und Umkreis-Zeilen. Panel-Chrome
   neutralisieren, damit alle drei Zeilen bündig sind. */
#shortcode-immomakler-search-advanced.panel,
[id$="immomakler-search-advanced"].panel {
	border: none;
	box-shadow: none;
	background: transparent;
	margin: 0;
	padding: 0;
}
#shortcode-immomakler-search-advanced .panel-heading,
[id$="immomakler-search-advanced"] .panel-heading {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
}
/* Actions-Zeile auf dieselbe Flucht wie die anderen .row bringen. Sie sitzt
   in Zeile 3 neben dem Fläche-Slider und füllt ihr (gestrecktes) Panel auf
   voller Höhe, damit Buttons und Slider auf einer Grundlinie liegen. */
.immomakler .search-actions.row {
	margin-left: 0;
	margin-right: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;   /* fluid: erstes links, letztes rechts */
	gap: 10px;                        /* Mindestabstand beim Umbruch */
	height: 100%;
}

/* ------------------------------------------------------------
   Actions-Zeile optisch vereinheitlichen.

   DOM (siehe live-HTML): submit (3 Treffer, btn-primary) · Merkliste
   (btn-default + Badge) · Suche zurücksetzen (btn-secondary, vom Plugin
   ungestylt) · .input-group.search-for-id ("ctp suchen" + Lupe).
   Ziel: alle Elemente teilen eine gemeinsame Höhe und Grundlinie, der
   Reset wirkt als dezenter Link.
   ------------------------------------------------------------ */

/* Anzeige-Reihenfolge (Soll): ctp suchen · Merkliste · Reset · 3 Treffer.
   Weicht von der DOM-Reihenfolge ab → per flex order festgelegt. Selektor
   ohne .immomakler-Vorfahr, damit es auch im AJAX-nachgeladenen Formular
   (#shortcode-…-search-form, per .load() ohne den Wrapper) greift. */
.search-actions .search-for-id           { order: 1; }
.search-actions .immomakler-cart-button  { order: 2; }
.search-actions #immomakler-search-reset { order: 3; }
.search-actions .immomakler-submit       { order: 4; }

/* Merkliste + Reset-Button auf Buttongröße bringen (matcht btn-primary). */
.immomakler .search-actions .btn-default,
.immomakler .search-actions .immomakler-cart-button,
.immomakler .search-actions #immomakler-search-reset {
	padding: 7px 16px;
	font-size: 14px;
	line-height: 1.4;
	border-radius: 4px;
}

/* Merkliste als sekundärer, umrandeter Button mit sauber sitzendem Badge. */
.immomakler .search-actions .immomakler-cart-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--ctp-ink);
	border: 1px solid var(--ctp-line);
}
.immomakler .search-actions .immomakler-cart-button:hover {
	border-color: var(--ctp-orange);
	color: var(--ctp-orange);
	text-decoration: none;
}
.immomakler .search-actions .immomakler-cart-button .cart-count-badge {
	background: var(--ctp-orange);
	color: #fff;
}

/* "Suche zurücksetzen": dezenter Text-Link, nicht als voller Button. */
.immomakler .search-actions #immomakler-search-reset.btn-secondary {
	background: transparent;
	border: none;
	color: var(--ctp-grey);
	text-decoration: underline;
	text-underline-offset: 2px;
	padding-left: 4px;
	padding-right: 4px;
}
.immomakler .search-actions #immomakler-search-reset.btn-secondary:hover {
	color: var(--ctp-orange);
}

/* "ctp suchen": ID-Feld + Lupe, gleiche Höhe wie die Buttons. Steht per
   order ganz vorne in der Aktions-Zeile. */
.immomakler .search-actions .search-for-id {
	width: auto;
	max-width: 280px;
}
.immomakler .search-actions .search-for-id .form-control {
	height: auto;
	padding: 7px 12px;
	font-size: 14px;
	border-color: var(--ctp-line);
	box-shadow: none;
}
.immomakler .search-actions .search-for-id .form-control:focus {
	border-color: var(--ctp-orange);
}
.immomakler .search-actions .search-for-id .btn-default {
	padding: 7px 12px;
	border-color: var(--ctp-line);
	background: #fff;
	color: var(--ctp-grey);
}
.immomakler .search-actions .search-for-id .btn-default:hover {
	color: var(--ctp-orange);
	border-color: var(--ctp-orange);
}

/* Mobil: ID-Feld auf volle Breite. */
@media (max-width: 600px) {
	.immomakler .search-actions .search-for-id {
		max-width: none;
		width: 100%;
	}
}

/* ------------------------------------------------------------
   Suchmasken-Layout (Soll: _input/sortierung.jpg).

   advanced_search_position=top (functions.php) rendert den Slider als
   erstes Form-Geschwister (vor den Dropdowns), DOM:
     form
       .panel-collapse (Slider, oben durch 'top')
       .search-taxonomies.row  (4 Dropdowns, Bootstrap col-sm-3 → eine Zeile)
       .search-radius.row      (PLZ/Ort + Umkreis-km)
       .panel                  (Buttons-Actions)

   Ziel-Anordnung (drei Zeilen):
     Zeile 1: Selects (4 Dropdowns)              → volle Breite
     Zeile 2: PLZ/Ort + Umkreis                  → volle Breite, allein
     Zeile 3: Fläche-Slider (schmal) + Actions   → teilen sich eine Zeile
   Per order legen wir die Anzeige-Reihenfolge fest (DOM weicht ab).
   ------------------------------------------------------------ */
[id$="immomakler-search-form"] {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px;
}
[id$="immomakler-search-form"] > .search-taxonomies.row { order: 1; flex: 1 1 100%; margin: 0; }
[id$="immomakler-search-form"] > .search-radius.row     { order: 2; flex: 1 1 100%; margin: 0; }
[id$="immomakler-search-form"] > .panel-collapse        { order: 3; margin: 0; }
[id$="immomakler-search-form"] > .panel                 { order: 4; margin: 0; }

/* Desktop-Layout der Suchmaske (≥768px) – alle Tablet-aufwärts-Regeln
   gebündelt:
     • Zeile 2: PLZ/Ort füllt, km-Dropdown bleibt rechts kompakt
     • Zeile 3: Fläche-Slider 1/4 breit + Actions-Panel füllt den Rest,
       beide auf gleiche Höhe gestreckt (kein Versatz Slider ↔ Buttons)
   gap:14px → Fläche etwas unter 25%, Actions der Rest. */
@media (min-width: 768px) {
	/* Zeile 3: Fläche (sichtbar erzwingen) + Actions teilen sich die Reihe. */
	[id$="immomakler-search-form"] > .panel-collapse {
		display: block !important;
		height: auto !important;
		visibility: visible !important;
		flex: 0 0 calc(25% - 11px);   /* 1/4 wie ein Select (gap-korrigiert) */
		max-width: calc(25% - 11px);
	}
	[id$="immomakler-search-form"] > .panel {
		flex: 1 1 0;                  /* Actions füllen den Rest der Zeile */
		min-width: 0;
	}
	/* Beide auf gleiche Höhe strecken, damit der Slider nicht gegenüber den
	   Buttons verspringt. */
	[id$="immomakler-search-form"] > .panel-collapse,
	[id$="immomakler-search-form"] > .panel {
		align-self: stretch;
	}
	/* Zeile 2: PLZ/Ort-Feld füllt, km-Dropdown bleibt rechts kompakt.
	   align-items:center → km-Select mittig zum PLZ-Feld. gap:15px hält
	   etwas Luft zwischen Feld und Select; Margins der Kinder neutralisiert. */
	[id$="immomakler-search-form"] > .search-radius.row .immomakler-search-center {
		display: flex;
		align-items: center;
		gap: 15px;
	}
	[id$="immomakler-search-form"] .immomakler-search-center .immomakler-ac-wrap {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
	}
	/* Plugin gibt dem PLZ-Input width:calc(100% - 10px) + float:left — die
	   10px-Reserve erzeugt eine Lücke vor dem km-Select. Im Flex-Layout
	   regelt der Wrapper die Breite, daher volle 100% ohne Reserve.
	   height:35px → exakt gleich wie der km-Select (s.u.). */
	[id$="immomakler-search-form"] .immomakler-search-center input[type="text"] {
		width: 100%;
		float: none;
		height: 35px;
	}
	[id$="immomakler-search-form"] .immomakler-search-center .immomakler-search-radius {
		flex: 0 0 auto;
		margin: 0 !important;   /* Plugin-Margin (float-Kontext) entfernen */
	}
}
/* Mobil: Fläche + Actions untereinander, volle Breite. */
@media (max-width: 767px) {
	[id$="immomakler-search-form"] > .panel-collapse {
		display: block !important;
		height: auto !important;
		visibility: visible !important;
		flex: 1 1 100%;
	}
	[id$="immomakler-search-form"] > .panel {
		flex: 1 1 100%;
	}
}

/* Slider-Innencontainer aufräumen: Bootstrap-Panel-Chrome weg. Die ganze
   Container-Kette streckt sich auf volle Höhe, damit der Fläche-Block exakt
   so hoch wird wie das Actions-Panel daneben (gleiche Reihe, kein Versatz). */
[id$="immomakler-search-form"] .panel-collapse,
[id$="immomakler-search-form"] .panel-collapse > .panel-body,
[id$="immomakler-search-form"] .search-ranges.row {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 100%;
}
/* Fläche-Block füllt die Höhe und zentriert seinen Inhalt vertikal, sodass
   der Slider auf gleicher Höhe wie die Actions-Buttons daneben liegt.
   Anordnung (Soll sortierung.jpg): Slider OBEN, darunter "Fläche:" + Wert
   in EINER Zeile. Das DOM liefert den Text vor dem Slider → per order
   gedreht; das <br> zwischen Label und Werten wird ausgeblendet. */
[id$="immomakler-search-form"] .immomakler-search-range {
	width: 100% !important;
	height: 100%;
	float: none !important;
	margin: 0 !important;
	/* top 11px richtet den Slider auf Höhe der Nachbarspalte aus,
	   links 8px rückt den Block leicht ein (passt ins Layout). */
	padding: 11px 0 0 8px !important;
	border: none;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-start;   /* Padding-top steuert die Höhe, nicht center */
}
[id$="immomakler-search-form"] .immomakler-search-range-slider {
	order: 1;
	margin: 0 0 8px;
}
[id$="immomakler-search-form"] .immomakler-search-range-text {
	order: 2;
	font-size: 13px;
	margin: 0;
	white-space: nowrap;
}
/* "Fläche:" und Wert nebeneinander statt umgebrochen. */
[id$="immomakler-search-form"] .immomakler-search-range-text br {
	display: none;
}
[id$="immomakler-search-form"] .immomakler-search-range-text .range-label {
	font-weight: 700;
	margin-right: 6px;
}

/* Slider-Optik (Soll sortierung.jpg): eckige, orange Griffe statt der
   runden noUiSlider-Defaults; Track schlicht. */
.immomakler .noUi-target,
.immomakler .noUi-handle {
	border-radius: 0;
	box-shadow: none;
	border-color: #ccc;
}
.noUi-horizontal .noUi-handle {
	width: 13px;
	height: 20px;
	left: -3px;
	top: -8px;
	border: none;
	background: var(--ctp-orange);
}

/* Radius-Dropdown ("25 km") wird rechts angeschnitten. Ursache: das
   Plugin setzt eine harte Breite mit ID-Spezifitaet —
   immomakler-plus.css:197 → '#…-search .immomakler-search-radius.bs3
   { width:100px; float:right }'. Bei 100px reissen Text + Padding + Caret
   ueber. Wir kontern mit GLEICHER ID-Spezifitaet (sonst gewinnt das
   Plugin) und lassen die Breite am Inhalt wachsen; float weg, da der
   Container hier ein Flex-Item ist. */
#immomakler-search .immomakler-search-radius.bootstrap-select.bs3,
#shortcode-immomakler-search .immomakler-search-radius.bootstrap-select.bs3 {
	width: auto !important;
	min-width: 96px;
	float: none !important;
}
/* Trennlinie zwischen PLZ-Feld und Umkreis-Dropdown, eng gesetzt: kleiner
   linker Innenabstand, damit "25 km" dicht hinter der Linie sitzt.

   Höhe angleichen: Beide Elemente bekommen dieselbe feste height:35px —
   das PLZ-Feld (oben) und dieser Toggle. Ohne explizite Höhe ergäbe sich
   der Toggle nur aus line-height + Padding (≈32px) und wäre niedriger als
   das Feld. Inhalt per inline-flex vertikal zentriert. */
[id$="immomakler-search-form"] .immomakler-search-radius .dropdown-toggle {
	white-space: nowrap;
	border-left: 1px solid #ccc;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 8px;
	height: 35px;
	line-height: normal;
	display: inline-flex;
	align-items: center;
}
[id$="immomakler-search-form"] .immomakler-search-radius .dropdown-toggle .filter-option {
	overflow: visible;
}
/* "25 km"-Text im km-Select: Zeilenhöhe + leichter linker Innenabstand. */
[id$="immomakler-search-form"] .immomakler-search-radius .filter-option-inner-inner {
	line-height: 2;
	padding-left: 5px;
}
/* (Mobil: flex-wrap stapelt Fläche + Actions ohnehin untereinander.) */

@media (max-width: 991px) {
	.immomakler-archive .properties.immomakler-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.immomakler-archive .properties.immomakler-archive-grid {
		grid-template-columns: 1fr;
	}
}



/* === Impressum / Datenschutz Main content === */
/* Eigenständiger Lese-Container für die rechtlichen Seiten (Impressum, */
/* Datenschutz). Kein eigenes Template – die Klasse .impressum wird im   */
/* Seiteninhalt gesetzt; alle Kindregeln sind darauf gescoped.          */
.impressum {
	width: 80%;
	max-width: 880px;
	margin: 50px auto;
	padding: 64px 32px 96px 32px;
	color: var(--ctp-ink);
}

.impressum .eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ctp-orange);
	margin-bottom: 12px;
}

.impressum h1 {
	font-size: clamp(32px, 5vw, 42px);
	font-weight: 300;
	line-height: 1.15;
	margin-bottom: 32px;
}

.impressum h2 {
	font-size: 20px;
	font-weight: 700;
	margin-top: 40px;
	margin-bottom: 12px;
}

.impressum h3 {
	font-size: 17px;
	font-weight: 700;
	margin-top: 24px;
	margin-bottom: 8px;
}

.impressum p {
	margin-bottom: 16px;
}

@media (max-width: 600px) {
	.impressum {
		width: auto;
		margin: 24px 16px;
		padding: 32px 20px 48px 20px;
	}
}


/* ============================================================
   11. FLÄCHENTABELLEN (Detailseite)
   Markup: functions.php → ctp_render_area_tables()
   Eingebunden in single/single-property.php nach der Beschreibung.
   Mehrere benannte Tabellen ("Unit 01" …) mit bis zu 5 Spalten.
   Zwei Layouts (gesteuert übers Markup):
   - Kopfzeile oben (<thead>): horizontale Unit-Tabelle.
   - keine Kopfzeile: erste Spalte ist <th scope=row> = Beschriftung links.
   ============================================================ */
/* Hinweis: Die Flächen-Section nutzt das gemeinsame .ctp-row-Raster
   (HL links, Tabellen rechts). KEINE eigene grid-column-Angabe auf
   .ctp-areas__title/__body — die setzte das Body-Element (das zusätzlich
   .ctp-row__body trägt) auf grid-column:2 und kollidierte mit dem
   Auto-Placement/der Mobile-Regel → Überlappung nur in dieser Sektion. */

/* Tabellen untereinander. Jede Tabelle = Karte mit Rahmen + 4px-Radius
   (wie die Newsletter-Region-Boxen). */
.ctp-area-tables {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
}
.ctp-area-table {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	overflow: hidden;          /* Titel-Balken + Tabelle folgen dem Radius */
	background: #fff;
	width: 100%;               /* volle Breite */
}
/* Look übernommen aus dem CTP-Newsletter (CTP_Deutschland_Newsletter…html):
   weiße Tabelle mit dünnem Rahmen + 4px-Radius, graue Kopfzeile (#f9faf9),
   feine Zeilentrenner (#f5f5f5), erste Spalte fett dunkel, Flächen/Werte
   rechts in Orange-Bold. */
.ctp-area-table__grid {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
	margin-block-end: 0;       /* Theme-Reset (table { margin-block-end:15px }) aufheben */
	margin: 0;
	/* Rahmen/Radius trägt die umschließende .ctp-area-table-Karte. */
}
.ctp-area-table__grid th,
.ctp-area-table__grid td {
	text-align: left;
	padding: 10px 30px;
	border: none;
	border-bottom: 1px solid #f5f5f5;
	font-size: 13px;
	vertical-align: middle;
	background: transparent;
	font-weight: 400;
	color: #424c4a;            /* Standard-Wert: gedämpftes Anthrazit */
}
/* Zebra-/Hover-Hintergründe des Themes neutralisieren. */
.ctp-area-table__grid tbody > tr:nth-child(odd) > td,
.ctp-area-table__grid tbody > tr:nth-child(odd) > th,
.ctp-area-table__grid tbody > tr:hover > td,
.ctp-area-table__grid tbody > tr:hover > th {
	background-color: transparent;
}
/* Kopfzeile: dunkelgrau hinterlegt, weiße Schrift, klein, bold, versal. */
.ctp-area-table__grid thead th {
	background-color: #434D4B;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	border-bottom: none;
	white-space: nowrap;
}
/* Erste (linke) Spalte jeder Datenzeile: fett, dunkel — Objekt-/Zeilenname.
   Greift in beiden Varianten (th[scope=row] ohne Kopf, erstes td mit Kopf). */
.ctp-area-table__grid tbody th[scope="row"],
.ctp-area-table__grid tbody tr > :first-child {
	font-weight: 600;
	color: #1E2323;
	white-space: nowrap;
}
/* Werte-Spalten (alle td außer der ersten): bold, dunkel (nicht orange). */
.ctp-area-table__grid tbody td:not(:first-child) {
	font-weight: 700;
	color: #1E2323;
	white-space: nowrap;
}
/* Letzte Zeile ohne Trennlinie (sauberer Abschluss am Radius). */
.ctp-area-table__grid tbody tr:last-child > th,
.ctp-area-table__grid tbody tr:last-child > td {
	border-bottom: none;
}
/* Theme-Oberlinie der ersten Kopfzeile entfernen. */
.ctp-area-table__grid thead:first-child tr:first-child th,
.ctp-area-table__grid thead:first-child tr:first-child td {
	border-block-start: none;
	border-top: none;
}
/* "Vermietet"-Zeile (Checkbox im Backend, s. functions.php
   ctp_area_tables_render_row()): komplette Zeile hellgrau, im Sinne von
   "nicht verfügbar". Höhere Spezifität (tbody-Selektor) als die
   Zebra-/Hover-Neutralisierung oben, damit sie hier nicht überschrieben wird. */
.ctp-area-table__grid tbody tr.ctp-area-row--vermietet > td,
.ctp-area-table__grid tbody tr.ctp-area-row--vermietet > th {
	background-color: #f5f5f5;
	color: #cbcbcb;
}
/* Mobil: Tabelle „entablen“ → gestapeltes Karten-Layout statt Spalten.
   Jede <tr> wird ein Block; jede <td> zeigt ihren Spaltentitel via
   data-label::before vor dem Wert. Gilt für BEIDE Varianten:
   - Kopfzeilen-Variante: thead ausblenden, Spaltentitel kommen aus data-label.
   - kopfzeilenlose Variante: erste Zelle (th[scope=row]) ist der Block-Titel. */
@media (max-width: 600px) {
	/* Äußeren Karten-Rahmen mobil entfernen — nur die einzelnen Zeilen-
	   Mini-Karten tragen mobil den Rahmen (sonst doppelte Outline). */
	.ctp-area-table {
		border: none;
		border-radius: 0;
		overflow: visible;
	}
	.ctp-area-table__grid,
	.ctp-area-table__grid tbody,
	.ctp-area-table__grid tr,
	.ctp-area-table__grid th,
	.ctp-area-table__grid td {
		display: block;
		width: auto;
	}
	/* Kopfzeile (Spaltentitel) optisch raus — Labels kommen je Zelle. */
	.ctp-area-table__grid thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	/* Jede Zeile als eigene Mini-Karte mit Abstand. */
	.ctp-area-table__grid tbody tr {
		margin-bottom: 16px;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		overflow: hidden;
	}
	.ctp-area-table__grid tbody tr:last-child {
		margin-bottom: 0;
	}
	/* Erste Zelle jeder Zeile (Unit-Name/Zeilenkopf) = dunkler Balken mit
	   weißer Schrift, passend zum Desktop-Tabellenkopf. */
	.ctp-area-table__grid tbody th[scope="row"],
	.ctp-area-table__grid tbody tr > :first-child,
	.ctp-area-table__grid tbody tr:hover > :first-child {
		display: block;
		background-color: #434D4B !important;   /* Theme-Hover nicht durchlassen */
		color: #fff;
		font-weight: 700;
		font-size: 13px;
		padding: 8px 14px;
		border: none;
	}
	/* Theme-Hover-Hintergrund auf den Wert-Zellen unterdrücken. */
	.ctp-area-table__grid tbody tr:hover > td {
		background-color: transparent !important;
	}
	/* Wert-Zellen: Label (Spaltentitel) links, Wert rechts. */
	.ctp-area-table__grid tbody td {
		padding: 7px 14px;
		font-size: 13px;
		border: none;
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		gap: 16px;
		white-space: normal;
	}
	.ctp-area-table__grid tbody td:last-child {
		border-bottom: none;
	}
	.ctp-area-table__grid tbody td[data-label]:not([data-label=""])::before {
		content: attr(data-label);
		font-weight: 400;
		color: #424c4a;
		flex: 0 0 auto;
		margin-right: 16px;        /* Abstand zwischen Label und Wert */
	}
	/* In der ersten Zelle (dunkler Balken) muss das Label weiß sein. */
	.ctp-area-table__grid tbody tr > :first-child[data-label]:not([data-label=""])::before {
		color: #fff;
	}
}