/*
Theme Name:  Plaggenmeier 2026
Description: Eigenes Theme für plaggenmeier.com: Vermietung möblierter Wohnungen und Beratung. Braucht das Plugin „Plaggenmeier Kern“.
Version:     1.0.0
Author:      Plaggenmeier GmbH
Text Domain: plaggenmeier
Requires PHP: 8.0
*/

/* ==========================================================================
   Aufbau dieser Datei
   1. Schrift (Open Sans, auf dem eigenen Server)
   2. Farben und Maße (Marke: referenzen/marke/MARKE.md)
   3. Grundlagen
   3a. Hintergrund: Wasserzeichen und Bereichsname (wie im Briefpapier)
   4. Kopfzeile mit Menü
   5. Fußzeile
   6. Inhaltsseiten (Text, Blog, Rechtstexte, Nachrufe)
   7. Knöpfe und Formulare
   8. Wohnungsliste und Wohnungsseite
   9. Hilfsklassen, reduzierte Bewegung, Druck
   Die Schauseiten (Startseite, Beratung) haben zusätzlich assets/css/schauseiten.css.
   ========================================================================== */

/* 1. Schrift ------------------------------------------------------------- */
@font-face {
	font-family: "Open Sans";
	src: url("assets/schrift/open-sans.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("assets/schrift/open-sans-kursiv.woff2") format("woff2");
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
}

/* 2. Farben und Maße ------------------------------------------------------ */
:root {
	--blau: #0080B5;          /* Marke: Wortmarke, große Überschriften          */
	--blau-text: #006E9C;     /* dieselbe Farbe dunkler: Links, Knöpfe (≥ 4,5:1) */
	--rot: #E30613;           /* Klecks, sehr sparsam                           */
	--wz-1: #ECEFF8;          /* Wasserzeichen                                  */
	--wz-2: #F1F4FA;          /* Wasserzeichen hell, abgesetzter Grund          */
	--grund: #FFFFFF;
	--tinte: #1B2430;         /* Text, bläuliches Fast-Schwarz                  */
	--tinte-leise: #4F5B6B;   /* Nebentext, getönt                              */
	--linie: #D9DFEA;
	--licht: #FFD58A;         /* warmes Fensterlicht (nur Illustration)         */

	--schrift: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--maxbreite: 76rem;
	--textbreite: 40rem;
	--rand: clamp(1.25rem, 5vw, 4rem);
	--abstand: clamp(2.5rem, 5vw, 4.5rem);
	--kopfhoehe: 6.25rem;      /* Sprachleiste 1.75rem + Kopfzeile 4.5rem        */
	--sprachleiste: 1.75rem;
	--radius: 4px;
	--schatten: 0 1px 2px rgb(27 36 48 / .08), 0 8px 24px -8px rgb(27 36 48 / .18);
	--ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* 3. Grundlagen ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopfhoehe) + 1rem); }
body {
	margin: 0;
	background: var(--grund);
	color: var(--tinte);
	font-family: var(--schrift);
	font-size: clamp(1rem, .96rem + .22vw, 1.125rem);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
/* Kurze Seiten: Inhalt füllt die Höhe, die Fußzeile steht immer unten. */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--blau-text); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 2px solid var(--blau-text); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--blau); color: #fff; }
:root { accent-color: var(--blau-text); caret-color: var(--blau-text); }
table, .zahl { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; margin: 0; color: var(--tinte); }
h1 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); font-weight: 600; }
p { text-wrap: pretty; }
.huelle { width: 100%; max-width: var(--maxbreite); margin-inline: auto; padding-inline: var(--rand); }
.sprungmarke { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--tinte); color: #fff; padding: .75rem 1rem; }
.sprungmarke:focus { left: 1rem; top: 1rem; }
.am-stueck { white-space: nowrap; }
.vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3a. Hintergrund -----------------------------------------------------------
   Wie im Briefpapier „Vermietung und Verwaltung“ (Tom, 28.09.2026):
   - Ein ganzes Haus aus der Briefpapier-Fassade liegt fest hinter dem Inhalt
     und scrollt NICHT mit. Es ist immer vollständig zu sehen (nicht
     angeschnitten) und wächst mit dem Fenster: im Querformat nach der Höhe,
     im Hochformat nach der Breite.
   - Rechts steht senkrecht „Vermietungen“. Nur wenn rechts neben dem Inhalt
     genug Platz ist; sonst würde es Inhalt oder Haus berühren und entfällt.
   position: fixed statt background-attachment: fixed, weil Safari auf
   iPhone und iPad feste Hintergrundbilder nicht unterstützt.               */
.grund { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.grund__haus { position: absolute; left: clamp(1rem, 4vw, 4rem); bottom: 0; width: min(54vh, 88vw); height: auto; max-width: none; }
.grund__wort {
	display: none; position: absolute; right: clamp(1rem, 2vw, 2.5rem); bottom: 14vh;
	writing-mode: vertical-rl; transform: rotate(180deg);
	font-weight: 800; font-size: clamp(3.5rem, 7vh, 5.5rem); line-height: 1; letter-spacing: .01em;
	color: #E3E7F0; white-space: nowrap;
}
/* Platz rechts: (Fensterbreite − Inhaltsbreite 76rem) / 2 + Innenabstand ≥ Wortbreite + Rand.
   Ab 1320 px Breite und 720 px Höhe passt das Wort, ohne etwas zu berühren. */
@media (min-width: 1320px) and (min-height: 720px) {
	.grund__wort { display: block; }
}

/* 4. Kopfzeile mit Menü ----------------------------------------------------
   Feste Höhe, klebt oben, verändert beim Scrollen weder Größe noch Lage
   (BRIEFING 5.2: „Das Menü springt nicht, verschiebt sich nicht“).           */
.kopf {
	position: sticky; top: 0; z-index: 60;
	height: var(--kopfhoehe);
	display: flex; flex-direction: column;
	background: #fff;
	border-bottom: 1px solid var(--linie);
}
.kopf .kopf__zeile { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Sprachleiste oben rechts: Flagge und Kürzel (Tom, 28.09.2026). */
.sprachleiste { height: var(--sprachleiste); background: var(--wz-2); border-bottom: 1px solid var(--linie); }
.sprachleiste .huelle { height: 100%; display: flex; justify-content: flex-end; align-items: center; }
.sprachwahl { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.sprachwahl a {
	display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .45rem; border-radius: 3px;
	font-size: .78rem; font-weight: 600; line-height: 1; color: var(--tinte-leise); text-decoration: none;
}
.sprachwahl img { width: 18px; height: 12px; object-fit: cover; box-shadow: 0 0 0 1px rgb(27 36 48 / .15); border-radius: 1px; }
.sprachwahl a:hover { color: var(--blau-text); background: #fff; }
.sprachwahl a[aria-current] { color: var(--blau-text); background: #fff; box-shadow: 0 0 0 1px var(--linie); }
@media (max-width: 400px) { .sprachwahl a { padding: .15rem .35rem; gap: .25rem; } }

/* Chinesisch: Open Sans hat keine chinesischen Zeichen; die Systemschrift übernimmt
   (keine Schrift von fremden Servern). */
:lang(zh) body, body:lang(zh) { font-family: var(--schrift), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { letter-spacing: 0; }
.kopf__links { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); min-width: 0; }
/* Wechsel in den anderen Bereich: ein echter Knopf direkt neben dem Logo
   (Tom, 28.09.2026). Weißer Knopf mit blauem Rand, beim Überfahren blau gefüllt. */
.kopf__wechsel {
	display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
	font-size: .92rem; font-weight: 700; line-height: 1.2; text-decoration: none; color: var(--blau-text);
	background: #fff; border: 1.5px solid var(--blau-text); border-radius: var(--radius);
	padding: .55rem .9rem; box-shadow: 0 1px 2px rgb(27 36 48 / .08);
	transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.kopf__wechsel:hover, .kopf__wechsel:focus-visible { background: var(--blau-text); color: #fff; }
.kopf__wechsel .pfeil { transition: transform 140ms var(--ease); }
.kopf__wechsel:hover .pfeil { transform: translateX(2px); }
.knopf--klein { padding: .55rem 1rem; font-size: .95rem; }
.kopf__wechsel .kurz, .menue--beratung .kurz, .kopf__links .knopf .kurz { display: none; }
.menue .knopf, .menue .knopf:hover, .kopf__links .knopf, .kopf__links .knopf:hover { color: #fff; }
.kopf__links .knopf { white-space: nowrap; }
@media (max-width: 560px) {
	/* Schmale Telefone: kurze Beschriftung, damit Logo, Knopf und Menü in eine Zeile passen. */
	.kopf__wechsel .lang, .menue--beratung .lang, .kopf__links .knopf .lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.kopf__wechsel .kurz, .menue--beratung .kurz, .kopf__links .knopf .kurz { display: inline; }
	.kopf__marke { width: 7.25rem; }
	.menue--beratung .knopf, .kopf__links .knopf { padding: .45rem .7rem; font-size: .85rem; }
}
@media (max-width: 400px) {
	/* Sehr schmale Telefone: Menü nur als Symbol, Beschriftung bleibt für Vorleseprogramme. */
	.menue__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.menue__knopf { padding: .45rem .65rem; }
	.kopf .huelle { padding-inline: 1rem; }
	/* Beratung: Logo, „Anfragen“ und „Vermietung“ passen mit kurzen Beschriftungen in eine Zeile. */
	.menue--beratung .kopf__wechsel { padding: .4rem .5rem; }
	.kopf__marke { width: 6.5rem; }
}
.menue__symbol { font-size: 1.1rem; line-height: 1; }
.kopf__marke { display: block; width: 10.5rem; flex: none; }
.kopf__marke img { width: 100%; height: auto; }
.menue { display: flex; align-items: center; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue > ul { display: flex; gap: .25rem; }
.menue li { position: relative; }
.menue a {
	display: block; padding: .6rem .9rem; color: var(--tinte); text-decoration: none;
	font-weight: 600; font-size: .98rem; border-radius: var(--radius);
}
.menue a:hover, .menue a:focus-visible { color: var(--blau-text); background: var(--wz-2); }
.menue .current-menu-item > a, .menue .current-menu-ancestor > a { color: var(--blau-text); }
/* Ausklappmenü: erscheint unter dem Punkt, verschiebt nichts. */
.menue .sub-menu {
	position: absolute; left: 0; top: 100%; min-width: 15rem;
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
	box-shadow: var(--schatten); padding: .4rem;
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms;
}
.menue li:hover > .sub-menu, .menue li:focus-within > .sub-menu, .menue li.offen > .sub-menu {
	opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.menue .sub-menu a { font-weight: 500; }
.menue .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .5em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-.2em) rotate(45deg);
}
.menue__knopf { display: none; }

@media (max-width: 860px) {
	.kopf__marke { width: 8.5rem; }
	.kopf__wechsel { font-size: .85rem; padding: .45rem .7rem; }
	.menue__knopf {
		display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-weight: 600;
		background: none; border: 1px solid var(--linie); border-radius: var(--radius); padding: .5rem .8rem; cursor: pointer;
	}
	.menue > ul {
		position: fixed; inset: var(--kopfhoehe) 0 auto 0; display: none; flex-direction: column;
		background: #fff; border-bottom: 1px solid var(--linie); padding: .5rem var(--rand) 1rem; max-height: calc(100svh - var(--kopfhoehe)); overflow: auto;
	}
	.menue.ist-offen > ul { display: flex; }
	.menue .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 1rem; }
	.menue .menu-item-has-children > a::after { display: none; }
}

/* 5. Fußzeile ------------------------------------------------------------- */
/* Fußzeile ohne eigene Fläche: Das Wasserzeichen im Hintergrund läuft durch
   und wird nicht von einem weißen Kasten zerschnitten (Tom, 28.09.2026). */
.fuss { border-top: 1px solid var(--linie); padding-block: 3rem; color: var(--tinte-leise); font-size: .92rem; background: transparent; }
.fuss .huelle { display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; align-items: flex-start; }
.fuss__marke { width: 9rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.fuss a { color: var(--tinte-leise); }
.fuss a:hover { color: var(--blau-text); }

/* 6. Inhaltsseiten -------------------------------------------------------- */
.seite { padding-block: clamp(3rem, 6vw, 6rem) var(--abstand); }
.seite__kopf { margin-bottom: 2.5rem; }
.seite__kopf .unterzeile { color: var(--tinte-leise); margin: .75rem 0 0; font-size: 1.1rem; }
.text { max-width: var(--textbreite); }
.text > * + * { margin-top: 1em; }
.text h2 { margin-top: 2.2em; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem); }
.text h3 { margin-top: 1.8em; }
.text ul, .text ol { padding-left: 1.2em; }
.text img { border-radius: var(--radius); }
.text figure { margin: 2rem 0; }
.text figcaption { color: var(--tinte-leise); font-size: .9rem; margin-top: .5rem; }
.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { color: var(--tinte-leise); font-size: .85rem; margin-top: .4rem; }
.text::after { content: ""; display: table; clear: both; }
.beitrag__datum { color: var(--tinte-leise); font-size: .95rem; }
.kommentare { max-width: var(--textbreite); margin-top: 4rem; border-top: 1px solid var(--linie); padding-top: 2rem; }
.kommentare ol { list-style: none; padding: 0; margin: 0; }
.kommentar { padding: 1.25rem 0; border-bottom: 1px solid var(--linie); }
.kommentar__kopf { font-weight: 600; }
.kommentar__kopf time { font-weight: 400; color: var(--tinte-leise); margin-left: .5rem; font-size: .92rem; }
.beitragsliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.5rem; max-width: 48rem; }
.beitragsliste h2 { font-size: 1.4rem; }
.beitragsliste a { color: inherit; text-decoration: none; }
.beitragsliste a:hover h2 { color: var(--blau-text); }

/* 7. Knöpfe und Formulare ------------------------------------------------- */
.knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .85rem 1.4rem; border-radius: var(--radius); border: 1px solid var(--blau-text);
	background: var(--blau-text); color: #fff; font: inherit; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background-color 140ms var(--ease), transform 120ms var(--ease);
}
.knopf:hover { background: #005A80; color: #fff; }
.knopf:active { transform: translateY(1px); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.knopf--leise { background: #fff; color: var(--blau-text); }
.knopf--leise:hover { background: var(--wz-2); color: var(--tinte); }

.formular { max-width: 44rem; }
.formular__einleitung { margin: 0 0 2rem; color: var(--tinte-leise); max-width: 38rem; }
.formular fieldset { border: 0; padding: 0; margin: 0 0 2.5rem; }
.formular legend { font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; padding: 0; }
.formular .reihe { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.formular .reihe--3 { grid-template-columns: 1fr 2fr 1fr; }
.feld { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.feld label { font-weight: 600; font-size: .95rem; }
.feld .pflicht { color: var(--tinte-leise); font-weight: 400; }
.feld input, .feld select, .feld textarea {
	width: 100%; padding: .7rem .8rem; border: 1px solid #B8C2D3; border-radius: var(--radius);
	background: #fff; font: inherit; color: var(--tinte);
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--blau-text); outline-offset: 1px; border-color: var(--blau-text); }
.feld .fehler { color: #B00010; font-size: .9rem; }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: #B00010; }
.feld .hinweis { color: var(--tinte-leise); font-size: .9rem; }
.feld label.auswahl { font-weight: 400; }
.auswahl { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1rem; }
.auswahl input { margin-top: .3rem; width: 1.25rem; height: 1.25rem; flex: none; }
/* Kästchen selbst gezeichnet: Browser färben das Häkchen sonst in der
   Systemfarbe (bei Tom grün). Angehakt: helles Blau der Marke (Tom, 28.09.2026). */
.auswahl input[type="checkbox"] {
	-webkit-appearance: none; appearance: none; margin-left: 0; cursor: pointer;
	border: 1.5px solid #8A97AB; border-radius: 3px; background: #fff center / 80% no-repeat;
	transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.auswahl input[type="checkbox"]:checked {
	background-color: var(--blau); border-color: var(--blau);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.auswahl input[type="checkbox"]:focus-visible { outline: 2px solid var(--blau-text); outline-offset: 2px; }
.hat-fehler .auswahl input[type="checkbox"] { border-color: #B00010; }
.wege { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.weg { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; cursor: pointer; display: flex; gap: .7rem; align-items: flex-start; }
.weg:has(input:checked) { border-color: var(--blau-text); background: var(--wz-2); }
.weg input { margin-top: .3rem; }
.weg strong { display: block; }
.weg span { color: var(--tinte-leise); font-size: .92rem; }
.weg--gesperrt { opacity: .55; cursor: not-allowed; }
.hinweisbox { border-left: 1px solid var(--blau-text); background: var(--wz-2); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.meldung { padding: 1.25rem 1.4rem; border-radius: var(--radius); margin: 1.5rem 0; }
.meldung--ok { background: #E3F1F8; color: #064A6B; border-left: 3px solid var(--blau); }   /* helles Blau statt Grün (Tom, 28.09.2026) */
.meldung--fehler { background: #FCEBEC; color: #7A0D14; }
.meldung--hinweis { background: var(--wz-2); color: var(--tinte); }
.eckdaten { background: var(--wz-2); padding: 1rem 1.25rem; border-radius: var(--radius); }
.eckdaten ul { margin: .5rem 0 0; padding-left: 1.2em; }
.pm-koeder { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pruefung { color: var(--tinte-leise); font-size: .9rem; min-height: 1.4em; }
@media (max-width: 640px) {
	.formular .reihe, .formular .reihe--3, .wege { grid-template-columns: 1fr; }
}

/* 8. Wohnungsliste und Wohnungsseite ------------------------------------ */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.filter a {
	display: block; padding: .5rem 1rem; border: 1px solid var(--linie); border-radius: var(--radius);
	color: var(--tinte); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.filter a[aria-current="page"] { border-color: var(--blau-text); color: var(--blau-text); background: var(--wz-2); }
.plz-suche { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin: 0 0 2.5rem; }
.plz-suche .feld { margin: 0; }
.plz-suche input { width: 9rem; }
/* Wohnungskarten: weiße Karten, damit das Wasserzeichen nicht durch den Text scheint. */
.objekte { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.objekt a {
	color: inherit; text-decoration: none; display: block; height: 100%;
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
	box-shadow: 0 1px 2px rgb(27 36 48 / .05); transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.objekt a:hover { box-shadow: var(--schatten); transform: translateY(-2px); }
.objekt__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--wz-2); }
.objekt__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.objekt a:hover .objekt__bild img { transform: scale(1.02); }
.objekt__bild--leer { display: grid; place-items: center; color: var(--tinte-leise); }
.objekt h2 { font-size: 1.25rem; margin: .9rem 1rem 0; }
.objekt a:hover h2 { color: var(--blau-text); }
.objekt__zeile { margin: .25rem 1rem 0; color: var(--tinte-leise); }
.objekt__status { margin: .5rem 1rem 1rem; font-weight: 600; }
.status--frei { color: #13502B; }
.status--bald_frei { color: #7A4B00; }
.status--belegt { color: var(--tinte-leise); }

.wohnung__kopf { padding-top: clamp(2rem, 4vw, 3.5rem); }
.wohnung__verfuegbar { font-size: 1.2rem; font-weight: 700; margin: .5rem 0 0; }
.wohnung__lage { color: var(--tinte-leise); margin: .25rem 0 0; }
.wohnung__raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); margin-top: 2.5rem; }
@media (max-width: 960px) { .wohnung__raster { grid-template-columns: 1fr; } }

.galerie { display: grid; gap: .5rem; grid-template-columns: repeat(4, 1fr); }
.galerie__gross { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.galerie a[hidden] { display: none; }
.galerie a { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1; background: var(--wz-2); }
.galerie a.galerie__gross { aspect-ratio: 3 / 2; }
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.galerie__mehr { display: grid; place-items: center; font-weight: 600; color: var(--blau-text); }

.leuchtkasten { position: fixed; inset: 0; z-index: 100; background: rgb(12 18 26 / .94); display: none; align-items: center; justify-content: center; }
.leuchtkasten.ist-offen { display: flex; }
.leuchtkasten img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; }
.leuchtkasten button { position: absolute; background: rgb(255 255 255 / .12); color: #fff; border: 0; border-radius: var(--radius); font: inherit; font-size: 1.5rem; width: 3rem; height: 3rem; cursor: pointer; }
.leuchtkasten button:hover { background: rgb(255 255 255 / .24); }
.leuchtkasten .zu { top: 1rem; right: 1rem; }
.leuchtkasten .zurueck { left: 1rem; top: 50%; }
.leuchtkasten .vor { right: 1rem; top: 50%; }
.leuchtkasten .zaehler { position: absolute; bottom: 1rem; color: #fff; font-size: .95rem; }

/* Angaben als Tabelle, ohne Ränder, klar vom Fließtext abgesetzt. */
.angaben { width: 100%; border-collapse: collapse; font-size: .98rem; }
.angaben caption { text-align: left; font-weight: 700; font-size: 1.2rem; padding-bottom: .75rem; }
.angaben th, .angaben td { text-align: left; vertical-align: top; padding: .65rem 0; border-bottom: 1px solid var(--linie); }
.angaben th { font-weight: 600; color: var(--tinte-leise); width: 42%; padding-right: 1rem; }
.angaben td ul { margin: 0; padding-left: 1.1em; }
.angaben--klein { margin-top: 2rem; }
.miete { font-size: 1.5rem; font-weight: 700; margin: 0; }
.miete__zusatz { color: var(--tinte-leise); margin: .2rem 0 0; }
/* Nicht klebend: sonst schiebt sich der Kasten über die Angaben-Tabelle. */
.wohnung__aktion { background: var(--wz-2); padding: 1.5rem; border-radius: var(--radius); }
.wohnung__aktion .knopf { width: 100%; margin-top: 1.25rem; }
.kleingedrucktes { color: var(--tinte-leise); font-size: .85rem; margin-top: 1rem; }
.blaettern { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--linie); margin-top: var(--abstand); padding-top: 2rem; }
.blaettern a { text-decoration: none; font-weight: 600; }
.blaettern small { display: block; color: var(--tinte-leise); font-weight: 400; }
/* Grundriss und Energieausweis: direkt unter den Fotos, zum Vergrößern anklicken. */
.unterlagen { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.unterlagen a { display: block; text-decoration: none; color: var(--tinte); border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; overflow: hidden; }
.unterlagen img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: .5rem; background: #fff; }
.unterlagen__titel { display: flex; justify-content: space-between; gap: .5rem; padding: .6rem .8rem; border-top: 1px solid var(--linie); font-weight: 600; font-size: .95rem; background: var(--wz-2); }
.unterlagen a:hover .unterlagen__titel { color: var(--blau-text); }
.unterlagen__platzhalter { display: grid; place-items: center; height: 100%; min-height: 8rem; border: 1px dashed #B8C2D3; border-radius: var(--radius); background: var(--wz-2); color: var(--tinte-leise); font-weight: 600; font-size: .95rem; text-align: center; padding: 1rem; }
.leuchtkasten img { background: #fff; }
.anfrage { margin-top: var(--abstand); padding-top: var(--abstand); border-top: 1px solid var(--linie); }
.anfrage > h2 { margin-bottom: .75rem; }
.admin-hinweis { background: #FFF6DB; border: 1px solid #E8D48A; padding: .75rem 1rem; border-radius: var(--radius); margin-top: 1rem; font-size: .95rem; }

/* 9. Reduzierte Bewegung, Druck ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media print {
	.kopf, .fuss, .anfrage, .blaettern, .galerie { display: none; }
}

/* Chinesisch: senkrechte Schrift steht aufrecht und liest von oben nach unten,
   deshalb ohne die Drehung, die für lateinische Schrift gilt (Bereichsname am Rand). */
:lang(zh) .grund__wort, :lang(zh) .b-grund__wort { transform: none; letter-spacing: .15em; }

/* Sehr schmale Telefone (bis 380 px): längere Wörter anderer Sprachen
   („Consultoría“) sollen nicht in den Menüknopf laufen. Pfeil weg, Logo und Abstände kleiner. */
@media (max-width: 380px) {
	.kopf .kopf__zeile { gap: .5rem; }
	.kopf__links { gap: .5rem; }
	.kopf__marke { width: 6.5rem; }
	.kopf__wechsel { padding: .4rem .55rem; font-size: .8rem; }
	.kopf__wechsel .pfeil { display: none; }
	.menue__knopf { padding: .45rem .6rem; }
}