/*
 * idco-realestate — eigenes CSS.
 *
 * Regel des Hauses: vor jeder Zeile die sechs Stufen durchgehen (Utility, Komponente,
 * JS-Attribut, Kombination, Theme-Ebene, erst dann Custom-CSS) und benennen, welche
 * gescheitert ist. Jeder Block unten sagt das.
 *
 * Kein Selektor greift auf `.uk-*` zu — das bräche den Style-Customizer-Vertrag und
 * jedes YOOtheme-Update.
 */

/* --------------------------------------------------------------------------
 * Statusfarben
 * Stufe 2 scheitert: UIkit kennt nur uk-label-success/-warning/-danger, unsere Status
 * sind frei definierbar. Die Farbe kommt als Custom Property vom Wrapper.
 * `.idco-re` steht mit im Selektor, weil `.uk-label` ebenfalls einklassig ist und das
 * Theme-CSS NACH unserem lädt — gemessen: die Plakette war blau. Zwei Klassen gewinnen,
 * ohne eine `.uk-*`-Regel anzufassen oder !important zu brauchen.
 *
 * Die Textfarbe kommt aus einer berechneten Property, nicht fest: `uk-label` setzt Weiß,
 * und damit erreichen zwei der drei Vorgabefarben die 4,5:1 aus WCAG AA nicht. Rückfall
 * `inherit`, weil ohne Farbe auch kein Grund gesetzt ist.
 * -------------------------------------------------------------------------- */
.idco-re .idco-re-status {
	background-color: var(--idco-re-status, transparent);
	color: var(--idco-re-status-fg, inherit);
}
.idco-re .idco-re-status--available { background-color: var(--idco-re-status-available, #3a8f4a); color: var(--idco-re-status-available-fg, #000); }
.idco-re .idco-re-status--reserved  { background-color: var(--idco-re-status-reserved,  #c8a415); color: var(--idco-re-status-reserved-fg,  #000); }
.idco-re .idco-re-status--sold      { background-color: var(--idco-re-status-sold,      #b2413f); color: var(--idco-re-status-sold-fg,      #fff); }

/* --------------------------------------------------------------------------
 * Beschriftungen in der gestapelten Tabelle
 * Stufe 2 scheitert: `uk-table-responsive` stapelt unter 960px und blendet den
 * `<thead>` aus. UIkit liefert keinen Ersatz für die verlorene Spaltenüberschrift;
 * ohne diese Regel steht dort eine Zahl ohne Bedeutung.
 * -------------------------------------------------------------------------- */
@media (max-width: 959px) {
	.idco-re-table td[data-idco-re-label]::before {
		content: attr(data-idco-re-label) ": ";
		font-weight: 600;
	}
}

/* --------------------------------------------------------------------------
 * Sortier-Link
 * Stufe 1 trägt fast alles: uk-flex-inline, uk-flex-middle, uk-text-nowrap im
 * Markup, uk-text-bold für die aktive Spalte. Übrig bleibt allein der Abstand
 * zwischen Text und Pfeil — UIkit kennt nur 15px und 30px als gap.
 * -------------------------------------------------------------------------- */
.idco-re-sort { gap: 4px; }

/* --------------------------------------------------------------------------
 * Filterleiste
 * Stufe 1 trägt Anordnung und Umbruch (uk-flex, uk-flex-wrap, uk-flex-middle).
 * Übrig bleiben nur die Abstände: UIkit kennt als gap ausschließlich 15px und
 * 30px, hier braucht es feinere Stufen.
 * -------------------------------------------------------------------------- */
.idco-re-filter__pair { gap: 6px; }
.idco-re-filter__pair select { min-width: 9rem; }
.idco-re-filter__floors { gap: 4px 14px; }
.idco-re-filter__check { gap: 5px; }
.idco-re-filter__actions { gap: 8px; }

/* --------------------------------------------------------------------------
 * Aktionsspalte
 * Stufe 1 trägt die Anordnung. Nur der Abstand bleibt — siehe oben.
 * -------------------------------------------------------------------------- */
.idco-re-actions__list { gap: 10px; }

/* --------------------------------------------------------------------------
 * Grundriss in Karte und Detailansicht
 * Stufe 6 ist hier legitim und belegt: `aspect-ratio` steht auf der Liste der 38
 * Properties, die UIkit nachweislich nicht abdeckt. Ohne festes Seitenverhältnis
 * springt das Layout beim Nachladen der Bilder (CLS).
 * Alles Übrige trägt Stufe 1: uk-overflow-hidden, uk-height-1-1, uk-object-contain.
 * -------------------------------------------------------------------------- */
.idco-re-card__media { aspect-ratio: 4 / 3; }
/* Breite bleibt CSS: `uk-width-1-1` ist OHNE Breakpoint-Suffix wirkungslos — der
 * Linter schlägt sie trotzdem vor, `uk_lookup exists` weist es aus. */
.idco-re-card__image { width: 100%; }

/* ==================================================================================
 * Die Detailansicht
 * ==================================================================================
 *
 * Vorher standen hier DREI Deklarationen — ein Seitenverhältnis, ein `max-width` und eine
 * `opacity`. Alles andere war rohe UIkit-Vorgabe, und genau so sah das Fenster aus. Der
 * Aufbau folgt jetzt dem Beobachtungsprotokoll der Referenz (§5 der
 * Reverse-Engineering-Referenz); die Begründung je Entscheidung steht in
 * `templates/unit-detail.php`.
 *
 * Was UIkit trägt und hier NICHT nachgebaut wird: die Spaltenbreiten (`uk-width-3-5@l` /
 * `uk-width-2-5@l`), der Zwischenraum (`uk-grid-collapse`), die Einpassung des Bildes
 * (`uk-object-contain`), der Lichtkasten (`data-uk-lightbox`), die Grundfarbe des
 * Preisblocks (`uk-background-primary uk-light`), Titel (`uk-modal-title`),
 * Statusplakette (`uk-label`) und die Knöpfe (`uk-button`).
 *
 * Wo Stufe 6 scheitert und warum: für „Wert oben, Bezeichnung darunter" gibt es keine
 * Klasse — `uk-description-list` legt die Bezeichnung darüber und kennt keine zweite
 * Spalte. Deshalb ist die Liste hier von Hand gesetzt statt umgebogen: eine
 * UIkit-Komponente gegen ihre eigene Absicht zu überschreiben verstößt gegen §2.2, sie
 * gar nicht zu benutzen nicht.
 * -------------------------------------------------------------------------- */

/* Der Rahmen. `svh` statt `vh`, weil auf dem Telefon die Adressleiste mitrechnet; der
   `vh`-Wert davor ist die Rückfallebene für Browser ohne `svh`. */
.idco-re-detail__dialog {
	background: var(--idco-re-modal-bg, #fff);
	border-radius: 6px;
	max-height: 93vh;
	max-height: 93svh;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

/*
 * Derselbe Grund noch einmal, eine Klasse schwerer.
 *
 * `.uk-modal-dialog` des Kundenthemes ist (0,1,0) — genau so schwer wie unsere einzelne
 * Klasse. Bei Gleichstand entscheidet die Reihenfolge, und unser Stylesheet steht VOR dem
 * Theme: auf loop-nuernberg.de gewann deshalb das Olivgrün, obwohl wir Weiß deklariert
 * hatten. Die Messung sagte „unsere Regel ist da"; die Farbe war trotzdem grün.
 *
 * `.idco-re` ist unser eigener Rahmen (`#idco-re-modal`), kein UIkit-Selektor — Hausregel
 * 2 bleibt gewahrt: hier wird keine `.uk-*`-Regel geschrieben, nur unsere eigene schwerer
 * gemacht.
 *
 * Und dann reichte auch das nicht. Das Kindtheme des Kunden setzt site-weit
 * `.uk-modal-dialog { background-color: … !important }` (vermutlich für sein
 * Menüfenster `#tm-dialog`). Gegen `!important` hilft keine Spezifität — nur
 * `!important`. Das ist hier kein Rundumschlag, sondern das Zurückholen der EIGENEN
 * Fläche; umstellbar bleibt sie, weil der WERT aus `--idco-re-modal-bg` kommt und die
 * Eigenschaft frei bleibt. Die einzige andere Stelle im Stylesheet, die `!important`
 * braucht, ist keine — deshalb steht die Begründung hier so ausführlich.
 */
.idco-re .idco-re-detail__dialog {
	background-color: var(--idco-re-modal-bg, #fff) !important;
}

.idco-re-detail__grid {
	flex: 1 1 auto;
	min-height: 0;
}

/* --- Links: der Grundriss -------------------------------------------------------- */
/*
 * Er füllt seine Spalte, statt in ihr zu schwimmen. Vorher saß ein 600 × 428 großes Bild
 * mittig in einer 600 × 789 hohen weißen Spalte — rund 360 Pixel Leere darüber und
 * darunter. Der helle Grund macht aus der Spalte eine Fläche; ohne ihn gibt es keine
 * Kante zwischen Bild und Daten, weil `uk-grid-collapse` keinen Zwischenraum lässt.
 */
.idco-re-detail__media {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px;
	min-height: 300px;
	background: var(--idco-re-plan-bg, #f2f2f0);
}

.idco-re-detail__planwrap {
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 0;
}

/*
 * Nur das erste Blatt ist zu sehen. Die weiteren bleiben als Verweise im Baum, damit der
 * Lichtkasten sie als Bildfolge kennt — sonst öffnete ein Klick nur den einen Grundriss,
 * und die anderen wären unerreichbar. Sechs Blätter nebeneinander in der Spalte wären
 * dagegen sechs Briefmarken.
 */
.idco-re-detail__planlink--weitere {
	display: none;
}

.idco-re-detail__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 62vh;
}

.idco-re-detail__planhint {
	margin: 0;
	font-size: .75rem;
	letter-spacing: .04em;
	color: #5b5b5b;
}

/* --- Rechts: die Daten ---------------------------------------------------------- */

.idco-re-detail__body {
	padding: 30px 32px 32px;
	min-width: 0;
}

/* Ohne JavaScript steht derselbe Inhalt in einer `uk-card-body`, die schon Innenabstand
   mitbringt. Doppelt gepolstert sähe der Abschnitt aus wie eingerückt. */
.idco-re-detail .idco-re-detail__body {
	padding: 0;
}

.idco-re-detail__title {
	margin: 0;
}

/*
 * Der Fokus liegt auf der Überschrift, damit der Rahmen sich beim Öffnen selbst ansagt.
 * Sie ist aber nicht bedienbar und mit der Tabulatortaste nicht erreichbar — ein
 * sichtbarer Ring sah dort aus wie ein vergessenes Eingabefeld, und genau das war zu
 * sehen. Kein Verstoß gegen WCAG 2.4.7: die Regel gilt für tastaturbedienbare Elemente.
 */
.idco-re-detail__title:focus {
	outline: none;
}

/*
 * Der Titel, der nur für die Vorleseausgabe da ist.
 *
 * Stufe 1 der Kaskade hat eine Klasse dafür — `uk-hidden-visually` —, sie scheitert hier
 * aber an ihrer eigenen Bedingung: `:not(:focus)`. Unser JavaScript setzt den Fokus beim
 * Öffnen auf genau diesen Titel, damit das Fenster sich selbst ansagt; damit hebt UIkit das
 * Verbergen im selben Moment auf. Deshalb eine eigene Klasse OHNE Fokusausnahme — der
 * Fokusring ist zwei Regeln höher schon abgeschaltet, das Element ist nicht bedienbar.
 */
.idco-re .idco-re-detail__title--verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.idco-re-detail__type {
	margin: 4px 0 0;
	font-size: 1.0625rem;
	color: #5b5b5b;
}

.idco-re-detail__statusline {
	margin: 14px 0 0;
}

.idco-re-detail__teaser {
	margin: 16px 0 0;
}

/*
 * Wert oben, Bezeichnung darunter — und zwar nur in der DARSTELLUNG. Im Baum steht
 * weiterhin Bezeichnung, dann Wert, sonst läse eine Vorlesehilfe „70,55 m², Wohnfläche".
 * `column-reverse` dreht die Achse, nicht das Dokument.
 *
 * `auto-fit` statt einer festen Spaltenzahl: zwei Spalten, wo Platz ist, eine im
 * eingeklappten Fall und auf dem Telefon. Ohne `min-width: 0` sprengt ein langer Wert
 * ohne Leerzeichen die Spalte.
 */
.idco-re-detail__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 20px 24px;
	margin: 26px 0 0;
}

.idco-re-detail__fact {
	display: flex;
	flex-direction: column-reverse;
	min-width: 0;
}

/* `margin: 0` ist nicht Kosmetik: der Browser gibt jedem `dd` von sich aus 40 Pixel
   Einzug, und ohne `uk-description-list` greift der wieder. */
.idco-re-detail__factvalue {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.25;
}

.idco-re-detail__factlabel {
	margin: 5px 0 0;
	font-size: .75rem;
	line-height: 1.3;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #5b5b5b;
}

/* --- Der Preis ------------------------------------------------------------------ */
/*
 * Der Block umschließt die Zahl, nicht die Spalte. Als Balken über die volle Breite war
 * er das Lauteste im Fenster — an der untersten Stelle. Der Quadratmeterpreis steht
 * darunter und außerhalb, wie in der Referenz.
 */
.idco-re-detail__price {
	margin: 28px 0 0;
}

.idco-re-detail__pricebox {
	display: inline-block;
	padding: 6px 14px;
	font-size: 1.75rem;
	line-height: 1.25;
}

/* „Preis auf Anfrage" ist kein Preis und bekommt keine Fläche. */
.idco-re-detail__pricebox--anfrage {
	padding: 0;
	font-size: 1.375rem;
}

.idco-re-detail__was {
	display: block;
	margin-bottom: 4px;
	font-size: .9375rem;
	color: #5b5b5b;
}

/*
 * #5b5b5b statt `uk-text-meta` (#999). Auf Weiß sind das 6,80:1 gegen 2,85:1 — die
 * Textschwelle liegt bei 4,5:1, und die Dämpfung mit `opacity: .85` auf dem blauen Block
 * kam vorher auf 3,05:1. Das BFSG gilt seit Juni 2025.
 */
.idco-re-detail__sqm {
	display: block;
	margin: 8px 0 0;
	font-size: .8125rem;
	color: #5b5b5b;
}

/* --- Die Knöpfe ----------------------------------------------------------------- */
/*
 * Eine Fußzeile mit Kante. Vorher klebte der einzige Knopf an der Unterkante des
 * Fensters, weil `uk-margin` am Container nur Abstände an die KINDER verteilt und der
 * Container selbst keinen bekam.
 */
.idco-re-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

/*
 * Die Knopfreihe unter einem Planblatt: zwei Knöpfe über die ganze Breite, halbe und halbe.
 *
 * So sieht es im Bestand aus, und es hat einen Grund: darüber steht ein Blatt von über 1000
 * Pixeln Breite, und zwei kleine Knöpfe am linken Rand darunter sehen aus wie vergessen.
 * `flex` steht an EIGENER Klasse, nicht an `.uk-button`: eine `.uk-*`-Klasse im Selektor
 * ist laut Hausregel 2 verboten, und `tests/test-cleanroom.php` prüft das — zu Recht, denn
 * genau so fangen die Kämpfe mit dem nächsten Theme-Update an. Die Zentrierung übernimmt
 * `uk-text-center` im Markup (Stufe 1 der Kaskade).
 *
 * Unter 640px wird gestapelt: zwei Knöpfe zu je 45 % Bildschirmbreite treffen die
 * Fingerkuppe nicht mehr.
 */
.idco-re .idco-re-detail__actions--plan > .idco-re-detail__btn {
	flex: 1 1 12rem;
}

@media (min-width: 960px) {
	/* Nebeneinander scrollt nur die Datenspalte. Der Schließen-Knopf hängt am Rahmen und
	   würde sonst mit dem Inhalt nach oben wandern. Untereinander (Telefon) scrollt der
	   Rahmen — dort ist der Knopf ohnehin am oberen Rand. */
	.idco-re-detail__dialog {
		overflow: hidden;
	}

	.idco-re-detail__dialog .idco-re-detail__media {
		overflow: hidden;
	}

	.idco-re-detail__dialog .idco-re-detail__body {
		overflow-y: auto;
	}
}

/* --------------------------------------------------------------------------
 * Sichtbarer Fokus
 * Stufe 5 scheitert: der Theme-Stil bringt keinen durchgängigen Fokusring mit, und
 * ohne ihn ist die Tastaturbedienung faktisch blind. Zwei Ringe in Kontrastfarben,
 * damit er auf hellem wie dunklem Grund sichtbar bleibt.
 * -------------------------------------------------------------------------- */
.idco-re :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
 * Die Bildkarte auf einem einzelnen Bild (`[idco_imagemap]`)
 *
 * Der Rahmen kennt sein Verhältnis, bevor das Bild da ist — sonst springt der
 * Seiteninhalt beim Laden. `aspect-ratio` kann UIkit nicht (siehe die
 * Negativliste des Skills), `padding-top` mit einer Custom Property schon.
 *
 * Die Flächen sehen aus wie die der Bildfolge, teilen aber deren Datei nicht:
 * wer nur einen beschrifteten Lageplan zeigt, soll keine 36 KB Dreh-JavaScript
 * und kein Bildfolgen-Stylesheet laden. Zwölf Zeilen doppelt sind billiger als
 * eine Abhängigkeit, die man nicht braucht.
 * -------------------------------------------------------------------------- */
.idco-re-map__stage {
	position: relative;
	overflow: hidden;
}
.idco-re-map__stage::before {
	content: "";
	display: block;
	padding-top: var(--idco-re-map-ratio, 56.25%);
}
.idco-re-map__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.idco-re-map__areas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
.idco-re-map__area {
	pointer-events: auto;
	cursor: pointer;
	fill: var(--idco-re-area, #ffffff);
	fill-opacity: 0;
	stroke: rgba(0, 0, 0, .72);
	stroke-width: 1.6;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill-opacity .15s ease, stroke-opacity .15s ease;
}
.idco-re-map__area:hover,
a:focus-visible > .idco-re-map__area {
	fill-opacity: .28;
	stroke: #fff;
}
.idco-re-map__areas a:focus-visible {
	outline: none;
}
a:focus-visible > .idco-re-map__area {
	stroke: #000;
	stroke-width: 3;
	stroke-opacity: 1;
}
.idco-re-map__area--reserved { fill: var(--idco-re-status-reserved, #c8a415); }
.idco-re-map__area--sold     { fill: var(--idco-re-status-sold, #b2413f); }

@media (prefers-reduced-motion: reduce) {
	.idco-re-map__area {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Das Sortierzeichen am Spaltenkopf
 *
 * Eigenes SVG (`idco_re_sort_icon()`), nicht UIkit: zwei schlanke Pfeile über
 * die volle Höhe. Hier steht nur die Bemaßung — ein SVG ohne Größenangabe im
 * CSS fällt auf seine Standardbreite, nicht auf die Zeilenhöhe. Die Farbe erbt
 * es über `currentColor` vom Spaltenkopf, ungedämpft: im Bestand ist es so
 * schwarz wie die Beschriftung. Eine Dämpfung auf 50 % stand hier zwei
 * Fassungen lang — mit einer Begründung, die ich mir ausgedacht hatte.
 * -------------------------------------------------------------------------- */
.idco-re .idco-re-sort__icon {
	flex: none;
	/* 0,875em ist bei 16px Kopfzeile genau 14px — die Größe des Zeichens im Bestand.
	   Als em-Wert, damit es einer anderen Schriftgröße folgt statt danebenzustehen. */
	height: .875em;
	width: auto;
}