/**
 * Frontend-Styles der FeWo-Blöcke.
 *
 * Bewusst zurückhaltend: Farben und Schriften kommen aus dem Theme,
 * hier steht nur das Layout.
 *
 * @package FeWo
 */

/* Nur fuer Screenreader, visuell verborgen */
.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Hinweise im Editor */
.fewo-notice {
	border: 1px dashed currentColor;
	border-radius: 4px;
	opacity: 0.75;
	padding: 1em 1.25em;
}

.fewo-notice p {
	margin: 0;
}

/* Galerie */
.fewo-galerie {
	display: grid;
	gap: clamp( 8px, 1.5vw, 20px );
	grid-template-columns: repeat( var( --fewo-galerie-cols, 3 ), minmax( 0, 1fr ) );
}

.fewo-galerie__item {
	margin: 0;
}

.fewo-galerie__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
}

.fewo-galerie__caption {
	font-size: 0.85em;
	margin-top: 0.4em;
	opacity: 0.8;
}

/* Wohnungsliste */
.fewo-wohnungen {
	display: grid;
	gap: clamp( 16px, 2.5vw, 32px );
	grid-template-columns: repeat( var( --fewo-wohnungen-cols, 3 ), minmax( 0, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.fewo-wohnungen__item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Wohnungen, die hier nur gastieren: Sie liegen in einem anderen Haus und
   damit an einer anderen Adresse. Die Zeile nennt sie, der zarte Grund
   fasst die Gaeste als Gruppe zusammen — sie stehen immer am Ende der
   Liste, siehe Helpers\wohnungen_of(). */
.fewo-wohnungen__item--gast {
	background: var( --wp--preset--color--accent-2, #e8f5fe );
	border-radius: 6px;
	padding-bottom: 0.9rem;
}

.fewo-wohnungen__item--gast .fewo-wohnungen__body {
	padding-inline: 0.9rem;
}

.fewo-wohnungen__item--gast .fewo-wohnungen__img {
	border-radius: 6px 6px 0 0;
}

/* Zwischenueberschrift ueber den Gastwohnungen: Logo des eigenen Hauses
   und ein Satz dazu. Im Raster nimmt sie die ganze Breite ein und steht
   damit wie eine Ueberschrift ueber der Gruppe; im waagerechten Streifen
   der Startseite ist sie eine schmale Karte davor. */
.fewo-wohnungen__trenner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.6rem;
	padding: 1rem 0 0.2rem;
}

.fewo-wohnungen > .fewo-wohnungen__trenner {
	grid-column: 1 / -1;
	border-top: 1px solid var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.14 ) );
	padding-top: 1.6rem;
	margin-top: 0.6rem;
}

.fewo-wohnungen-zeile__liste > .fewo-wohnungen__trenner {
	flex: 0 0 12rem;
	scroll-snap-align: start;
	border-left: 1px solid var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.14 ) );
	padding-left: 1.2rem;
}

.fewo-wohnungen__hauslogo {
	display: block;
	height: 3rem;
	width: auto;
	max-width: 11rem;
	object-fit: contain;
	object-position: left center;
}

.fewo-wohnungen__trenner-text {
	margin: 0;
	font-size: 0.86rem;
	color: var( --wp--preset--color--accent-4, #6a6a6a );
}

.fewo-wohnungen__anderswo {
	margin: 0.15rem 0 0.5rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent-3, #1c6b9e );
}

.fewo-wohnungen__media {
	display: block;
	line-height: 0;
}

.fewo-wohnungen__img {
	width: 100%;
	/* height: auto ist zwingend. Das HTML-Attribut height wirkt sonst als
	   Vorgabe, und bei fester Breite UND fester Hoehe ignoriert der Browser
	   aspect-ratio. Die Kacheln wurden dadurch unterschiedlich hoch, und
	   object-fit: cover zog ein kleines Bild auf die viel zu hohe Flaeche -
	   das sah unscharf aus. */
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 4px;
}

.fewo-wohnungen__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5em;
	padding-top: 0.9em;
}

.fewo-wohnungen__title {
	font-size: 1.15em;
	margin: 0;
}

.fewo-wohnungen__title a {
	text-decoration: none;
}

.fewo-wohnungen__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1em;
	font-size: 0.9em;
	list-style: none;
	margin: 0;
	padding: 0;
	opacity: 0.85;
}

.fewo-wohnungen__text {
	margin: 0;
}

/* Der Unterstrich erscheint erst beim Zeigen.

   In einer Liste aus 33 Karten stehen sonst 33 unterstrichene Zeilen
   untereinander, und die Seite wirkt unruhig. Die Links bleiben durch ihre
   Farbe erkennbar, beim Ueberfahren und beim Tastaturfokus kommt der
   Strich dazu.

   Bewusst nur fuer die Karten und ihre Knoepfe: Links mitten im Fliesstext
   bleiben unterstrichen, weil Farbe allein sie fuer Menschen mit einer
   Farbsehschwaeche nicht erkennbar macht. */
.fewo-wohnungen__more,
.fewo-wohnungen__media,
.fewo-haeuser__more,
.fewo-haeuser__media {
	text-decoration: none;
}

.fewo-wohnungen__more:hover,
.fewo-wohnungen__more:focus-visible,
.fewo-haeuser__more:hover,
.fewo-haeuser__more:focus-visible {
	text-decoration: underline;
}

.fewo-wohnungen__more {
	margin-top: auto;
	padding-top: 0.4em;
}

/* Wohnungsliste nach Haus gruppiert, je Zeile ein seitlich
   durchklickbarer Streifen mit den Wohnungen dieses Hauses. */
.fewo-wohnungen-gruppiert {
	display: flex;
	flex-direction: column;
	gap: clamp( 32px, 4vw, 56px );
}

.fewo-wohnungen-zeile__kopf {
	align-items: center;
	display: flex;
	gap: 1em;
	justify-content: space-between;
	margin-bottom: 1em;
}

.fewo-wohnungen-zeile__titel {
	margin: 0;
}

.fewo-wohnungen-zeile__titel a {
	text-decoration: none;
}

.fewo-wohnungen-zeile__pfeile {
	display: flex;
	flex: none;
	gap: 0.6rem;
}

.fewo-wohnungen-zeile__pfeil {
	background: none;
	/* Rahmen kräftig genug fuer 3:1 — die Linienfarbe accent-6 ist zu blass. */
	border: 1px solid var( --wp--preset--color--accent-4, #6a6a6a );
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	font-size: 1.1rem;
	height: 2.2em;
	line-height: 1;
	padding: 0;
	width: 2.2em;
}

.fewo-wohnungen-zeile__pfeil:hover,
.fewo-wohnungen-zeile__pfeil:focus-visible {
	background: var( --wp--preset--color--accent-5, #f1f1f1 );
	color: var( --wp--preset--color--accent-3, #1c6b9e );
}

.fewo-wohnungen-zeile__liste {
	display: flex;
	gap: clamp( 16px, 2.5vw, 32px );
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0 0 0.5em;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	/* Keine sichtbare Bildlaufleiste: Sie sah je nach Browser und
	   Betriebssystem sehr unterschiedlich aus - mal ein duenner Strich, mal
	   ein breiter grauer Balken unter den Karten, mal gar nichts. Bedient
	   wird der Streifen ueber die Pfeile rechts oben; Wischen, Scrollen und
	   Tastatur funktionieren unveraendert weiter. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.fewo-wohnungen-zeile__liste::-webkit-scrollbar {
	display: none;
}

.fewo-wohnungen-zeile__liste .fewo-wohnungen__item {
	flex: 0 0 calc( ( 100% - ( var( --fewo-wohnungen-cols, 3 ) - 1 ) * clamp( 16px, 2.5vw, 32px ) ) / var( --fewo-wohnungen-cols, 3 ) );
	scroll-snap-align: start;
}

@media ( max-width: 900px ) {
	.fewo-wohnungen-zeile__liste .fewo-wohnungen__item {
		flex-basis: calc( ( 100% - clamp( 16px, 2.5vw, 32px ) ) / 2 );
	}
}

@media ( max-width: 600px ) {
	.fewo-wohnungen-zeile__liste .fewo-wohnungen__item {
		flex-basis: 82%;
	}
}

/* Smoobu */
.fewo-smoobu iframe,
.fewo-kalender iframe {
	width: 100%;
	border: 0;
}

/* Smoobus Skript setzt dem iframe keine Hoehe. Ohne Vorgabe bleibt er beim
   Browser-Standard von 150 Pixeln stehen, und das Buchungsformular ist unten
   abgeschnitten - der Knopf "Suchen" liegt dann ausserhalb.

   Nachgemessen braucht das Formular 266 Pixel, solange Anreise und Abreise
   nebeneinander passen, und 349 Pixel, sobald die Felder untereinander
   rutschen. Bewusst als min-height: Sollte Smoobu spaeter doch eine eigene
   Hoehe setzen, gewinnt die groessere von beiden. */
.fewo-smoobu iframe {
	min-height: var( --fewo-smoobu-hoehe, 285px );
}

@media ( max-width: 781px ) {
	.fewo-smoobu iframe {
		--fewo-smoobu-hoehe: 370px;
	}
}

/*
 * Verfuegbarkeitskalender in unseren Farben.
 *
 * Greift nur, wenn im Block "Eigene Farben" aktiv ist — dann liefert
 * Smoobu kein eigenes Stylesheet aus. Die Klassennamen stammen aus dem
 * Smoobu-Widget; falls Smoobu sie aendert, muessen die Regeln nachgezogen
 * werden.
 */
.fewo-kalender--eigen {
	--fewo-kal-akzent: var( --wp--preset--color--accent-1, #8fd3fe );
	--fewo-kal-akzent-dunkel: var( --wp--preset--color--accent-3, #1c6b9e );
	--fewo-kal-linie: var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.15 ) );

	font-family: inherit;
	font-size: 0.95rem;
}

.fewo-kalender--eigen table {
	border-collapse: collapse;
	width: 100%;
}

.fewo-kalender--eigen th {
	font-weight: 600;
	padding: 0.5em 0;
	text-align: center;
}

.fewo-kalender--eigen td {
	border: 1px solid var( --fewo-kal-linie );
	padding: 0.55em 0;
	text-align: center;
}

/* Belegte und freie Tage */
.fewo-kalender--eigen .booked,
.fewo-kalender--eigen .unavailable,
.fewo-kalender--eigen .is-booked {
	background: var( --wp--preset--color--accent-5, #f1f1f1 );
	color: var( --wp--preset--color--accent-4, #6a6a6a );
	text-decoration: line-through;
}

.fewo-kalender--eigen .available,
.fewo-kalender--eigen .is-available {
	background: var( --wp--preset--color--accent-2, #e8f5fe );
}

/* Monatsnavigation und Schaltflaechen */
.fewo-kalender--eigen button,
.fewo-kalender--eigen .btn,
.fewo-kalender--eigen a.button {
	background: var( --fewo-kal-akzent-dunkel );
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.7em 1.4em;
	text-transform: uppercase;
}

.fewo-kalender--eigen button:hover,
.fewo-kalender--eigen .btn:hover,
.fewo-kalender--eigen a.button:hover {
	background: var( --fewo-kal-akzent );
	color: var( --wp--preset--color--contrast, #202020 );
}

/* Kopfbild */
.fewo-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var( --fewo-hero-hoehe, 68vh );
	margin-bottom: 0;
	background-image: var( --fewo-hero-bild );
	background-position: center 40%;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	isolation: isolate;
}

/* Farbverlauf statt flächiger Abdunklung: Der Himmel bleibt hell,
   der Text unten bekommt trotzdem seinen Kontrast. */
.fewo-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, calc( var( --fewo-hero-dunkel, 0.35 ) * 0.25 ) ) 0%,
		rgba( 0, 0, 0, calc( var( --fewo-hero-dunkel, 0.35 ) * 0.55 ) ) 55%,
		rgba( 0, 0, 0, calc( var( --fewo-hero-dunkel, 0.35 ) * 1.15 ) ) 100%
	);
}

.fewo-hero__inhalt {
	max-width: 46rem;
	padding: clamp( 32px, 6vw, 80px ) clamp( 20px, 5vw, 72px );
	width: 100%;
}

.fewo-hero--mitte {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.fewo-hero--mitte .fewo-hero__inhalt {
	margin-inline: auto;
}

.fewo-hero__titel {
	color: #fff;
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 2.25rem, 6vw, 4rem );
	font-weight: 300;
	line-height: 1.05;
	margin: 0;
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.45 );
}

.fewo-hero__text {
	font-size: clamp( 1rem, 1.5vw, 1.2rem );
	margin: 0.9em 0 0;
	max-width: 34rem;
	text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.55 );
}

.fewo-hero--mitte .fewo-hero__text {
	margin-inline: auto;
}

.fewo-hero__aktion {
	margin: 1.8em 0 0;
}

@media ( max-width: 781px ) {
	.fewo-hero {
		min-height: 60vh;
		background-position: center center;
	}
}

/* Bild-Trenner zwischen Startseiten-Abschnitten: derselbe Kopfbild-Block,
   nur ohne Text und niedriger — man sieht das Bild beim Vorbeiscrollen nur
   kurz durch das schmale Fenster. Fixes Hintergrundbild sorgt fuer den
   leichten Tiefeneffekt; auf dem Handy performt "fixed" schlecht, deshalb
   nur ab Tablet-Breite. */
@media ( min-width: 782px ) {
	.fewo-trenner {
		background-attachment: fixed;
	}
}

/* Faktenliste auf der Startseite */
.fewo-fakten {
	border-left: 3px solid var( --wp--preset--color--accent-1, #8fd3fe );
	list-style: none;
	margin: 0;
	padding: 0.2em 0 0.2em 1.4em;
}

.fewo-fakten li + li {
	margin-top: 0.5em;
}

/* Wohnungs-Slider */
.fewo-slider {
	display: grid;
	grid-template-areas:
		"panel buehne"
		"steuerung buehne";
	grid-template-columns: minmax( 0, 42fr ) minmax( 0, 58fr );
	grid-template-rows: 1fr auto;
	gap: 0 clamp( 16px, 2.5vw, 40px );
}

.fewo-slider__panel {
	grid-area: panel;
	background: var( --wp--preset--color--accent-5, #f1f1f1 );
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp( 24px, 3vw, 48px );
}

.fewo-slider__claim {
	color: var( --wp--preset--color--accent-3, #1c6b9e );
	font-size: clamp( 1.3rem, 2vw, 1.75rem );
	font-weight: 300;
	margin: 0.7em 0 0;
}

.fewo-slider__claim--bereich {
	margin-top: 0;
}

.fewo-slider__text {
	margin: 0.9em 0 0;
}

.fewo-slider__aktion {
	margin: 1.6em 0 0;
}

.fewo-slider__buehne {
	grid-area: buehne;
	position: relative;
}

/* „3 / 12" in der Ecke des Bildes. Sagt in zwei Zeichen, was sonst
   niemand sieht: dass es weitere Bilder gibt und wie viele. */
.fewo-slider__zaehler {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	margin: 0;
	padding: 0.25em 0.7em;
	border-radius: 2em;
	background: rgba( 0, 0, 0, 0.62 );
	color: #fff;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	pointer-events: none;
}

.fewo-slider__folie {
	margin: 0;
}

.fewo-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.fewo-slider__steuerung {
	grid-area: steuerung;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.2rem clamp( 24px, 3vw, 48px ) 0;
}

.fewo-slider__pfeil {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	padding: 0.2em 0.3em;
}

.fewo-slider__pfeil:hover,
.fewo-slider__pfeil:focus-visible {
	color: var( --wp--preset--color--accent-3, #1c6b9e );
}

.fewo-slider__punkte {
	display: flex;
	gap: 0.55rem;
	/* Automatischer Rand auf beiden Seiten: Der freie Platz zwischen den
	   Pfeilen wird gleichmaessig aufgeteilt, die Punkte sitzen dadurch
	   mittig. Mit margin-left allein klebten sie am rechten Pfeil. */
	margin-inline: auto;
}

.fewo-slider__punkt {
	/* Barrierefreiheit: Bedienelemente brauchen 3:1 zum Hintergrund
	   (WCAG 1.4.11). rgba(0,0,0,0.2) kam nur auf 1,6:1. */
	background: var( --wp--preset--color--accent-4, #6a6a6a );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 10px;
	padding: 0;
	width: 10px;
}

.fewo-slider__punkt[aria-current="true"] {
	/* Aktiver Punkt im dunklen Akzent statt im hellen: 5,8:1 statt 1,6:1. */
	background: var( --wp--preset--color--accent-3, #1c6b9e );
	box-shadow: 0 0 0 2px var( --wp--preset--color--accent-3, #1c6b9e );
}

@media ( max-width: 900px ) {
	/* Die Bedienung rueckt direkt unter das Bild. Stand sie wie auf dem
	   grossen Bildschirm unter dem Textfeld, lag zwischen Bild und Pfeilen
	   ein ganzer Absatz — und niemand brachte beides miteinander in
	   Verbindung. Gewischt werden konnte immer, man sah es nur nicht. */
	.fewo-slider {
		grid-template-areas:
			"buehne"
			"steuerung"
			"panel";
		grid-template-columns: 1fr;
	}

	.fewo-slider__steuerung {
		padding: 0.6rem 0 1rem;
	}

	/* Die Pfeile sind jetzt Knoepfe, keine Zeichen: runde Flaeche mit
	   Rand, mindestens 44 Pixel gross — die Groesse, unter der ein Daumen
	   regelmaessig danebentrifft. */
	.fewo-slider__pfeil {
		align-items: center;
		border: 1px solid var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.18 ) );
		border-radius: 50%;
		display: inline-flex;
		font-size: 1.3rem;
		height: 44px;
		justify-content: center;
		padding: 0;
		width: 44px;
	}

	/* Groessere Punkte: Auf dem Telefon sind zehn Pixel zwar zu sehen, aber
	   kaum zu treffen. */
	.fewo-slider__punkt {
		height: 12px;
		width: 12px;
	}

	.fewo-slider__punkte {
		gap: 0.7rem;
	}
}

/* Hauptnavigation */
.fewo-nav__liste,
.fewo-nav__untermenue {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fewo-nav__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.4em;
	align-items: flex-end;
}

.fewo-nav__item {
	position: relative;
}

.fewo-nav__zeile {
	align-items: center;
	display: flex;
}

.fewo-nav__link {
	display: inline-block;
	padding: 0.35em 0;
	text-decoration: none;
	font-weight: 600;
}

.fewo-nav__item--aktiv > .fewo-nav__zeile > .fewo-nav__link {
	box-shadow: inset 0 -3px 0 var( --wp--preset--color--accent-1, #8fd3fe );
}

.fewo-nav__untermenue {
	background: var( --wp--preset--color--base, #fff );
	border: 1px solid var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.12 ) );
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.1 );
	min-width: 15em;
	padding: 0.4em 0;
}

.fewo-nav__untermenue a {
	display: block;
	padding: 0.45em 1em;
	text-decoration: none;
	white-space: nowrap;
}

.fewo-nav__untermenue a:hover,
.fewo-nav__untermenue a:focus {
	background: var( --wp--preset--color--accent-2, #e6f4fd );
}

/* Hamburger-Knopf und Untermenü-Pfeile: nur unterhalb von Tablet sichtbar,
   siehe Media Query weiter unten. */
.fewo-nav__toggle,
.fewo-nav__untermenue-toggle {
	display: none;
}

/* Aufklappen per Hover erst ab Tablet, darunter uebernimmt das
   Hamburger-Menue samt Akkordeon, siehe unten. */
@media ( min-width: 782px ) {
	.fewo-nav__untermenue {
		position: absolute;
		top: 100%;
		left: -1em;
		z-index: 20;
		/* Notbremse fuer sehr flache Fenster: Was dann noch nicht passt,
		   laesst sich wenigstens scrollen statt unerreichbar zu sein. */
		max-height: calc( 100vh - 11rem );
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateY( 4px );
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	/* Lange Listen zweispaltig. Die Stadtheimat29 hat dreizehn Wohnungen;
	   untereinander ergab das ein 597 Pixel hohes Menue, das auf einem
	   Notebook mit 768 Pixel Fensterhoehe unten abgeschnitten war — der
	   letzte Punkt „Schlossgarten" lag sieben Pixel unter dem Rand. In zwei
	   Spalten passt dieselbe Liste auf die halbe Hoehe.

	   Die Abfrage greift ab dem neunten Punkt; kuerzere Listen bleiben
	   einspaltig, weil zwei Spalten dort nur unruhig wirken. */
	.fewo-nav__untermenue:has( li:nth-child( 9 ) ) {
		columns: 2;
		column-gap: 0.5em;
		/* Zwei Spalten brauchen Platz. Ohne die groessere Mindestbreite
		   teilten sich beide Spalten die 15em der einspaltigen Fassung,
		   und laengere Namen wie „Klein aber Fein" wurden eng. */
		min-width: 26em;
	}

	.fewo-nav__untermenue:has( li:nth-child( 9 ) ) li {
		break-inside: avoid;
	}

	/* Die letzten beiden Eintraege klappen nach links auf. Sonst laeuft ihr
	   Menue ueber den rechten Fensterrand hinaus — bei 1366 Pixel Breite
	   waren es 28, bei 1280 schon 55 Pixel. */
	.fewo-nav__liste > .fewo-nav__item:nth-last-child( -n + 2 ) > .fewo-nav__untermenue {
		left: auto;
		right: -1em;
	}

	.fewo-nav__item--hat-untermenue:hover > .fewo-nav__untermenue,
	.fewo-nav__item--hat-untermenue:focus-within > .fewo-nav__untermenue {
		opacity: 1;
		visibility: visible;
		transform: translateY( 0 );
	}

	.fewo-nav__item--hat-untermenue > .fewo-nav__zeile > .fewo-nav__link::after {
		content: "";
		display: inline-block;
		margin-left: 0.4em;
		border: 0.3em solid transparent;
		border-top-color: currentColor;
		transform: translateY( 0.15em );
	}
}

@media ( max-width: 781px ) {
	/* Der Hamburger-Knopf sitzt an der Stelle, an der vorher die
	   ausgeklappte Liste stand — er selbst aendert die Hoehe der
	   Kopfleiste nicht, nur das Panel, das er oeffnet. */
	.fewo-nav__toggle {
		background: none;
		border: 0;
		cursor: pointer;
		display: inline-flex;
		height: 2.4em;
		padding: 0;
		width: 2.4em;
	}

	.fewo-nav__toggle-icon,
	.fewo-nav__toggle-icon::before,
	.fewo-nav__toggle-icon::after {
		background: currentColor;
		border-radius: 2px;
		display: block;
		height: 2px;
		width: 1.5em;
	}

	.fewo-nav__toggle-icon {
		margin: auto;
		position: relative;
	}

	.fewo-nav__toggle-icon::before,
	.fewo-nav__toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.fewo-nav__toggle-icon::before {
		top: -0.5em;
	}

	.fewo-nav__toggle-icon::after {
		top: 0.5em;
	}

	/* Panel unterhalb der Kopfleiste — bewusst per JS positioniert
	   (siehe nav.js), damit es exakt an der aktuellen Position der
	   sticky Leiste andockt, auch wenn diese gerade sichtbar/versteckt
	   ist. Waehrend das Panel offen ist, sperrt nav.js zusaetzlich den
	   Seiten-Scroll, damit die Leiste ihre Position nicht mehr aendert. */
	.fewo-nav__liste {
		background: var( --wp--preset--color--base, #fff );
		border-top: 1px solid var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.12 ) );
		box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.12 );
		display: none;
		flex-direction: column;
		/* Ohne dieses nowrap bricht die Liste in eine zweite Spalte um,
		   sobald der Inhalt hoeher wird als das Panel — und genau das
		   passiert, sobald jemand ein Haus aufklappt. Die uebrigen Haeuser
		   standen dann rechts daneben und ragten aus dem Bildschirm.
		   Geerbt wird das wrap von der Regel fuer die breite Ansicht, wo es
		   richtig ist. */
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		left: 0;
		right: 0;
		max-height: calc( 100vh - 4rem );
		overflow-y: auto;
		padding: 0.6em 1.2em;
		position: fixed;
		z-index: 100;
	}

	.fewo-nav__liste--offen {
		display: flex;
	}

	.fewo-nav__item {
		border-top: 1px solid var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.08 ) );
	}

	.fewo-nav__item:first-child {
		border-top: 0;
	}

	.fewo-nav__zeile {
		justify-content: space-between;
	}

	.fewo-nav__link {
		flex: 1;
		padding: 0.7em 0;
	}

	.fewo-nav__untermenue-toggle {
		align-items: center;
		background: none;
		border: 0;
		cursor: pointer;
		display: inline-flex;
		height: 2.6em;
		justify-content: center;
		width: 2.6em;
	}

	.fewo-nav__chevron {
		border: 0.35em solid transparent;
		border-top-color: currentColor;
		display: block;
		transition: transform 0.15s ease;
	}

	.fewo-nav__untermenue-toggle[aria-expanded="true"] .fewo-nav__chevron {
		transform: rotate( -180deg );
	}

	.fewo-nav__untermenue {
		background: none;
		border: 0;
		box-shadow: none;
		display: none;
		padding: 0 0 0.4em 1em;
	}

	.fewo-nav__untermenue--offen {
		display: block;
	}

	.fewo-nav__untermenue a {
		padding: 0.4em 0;
	}
}

/* Häuserliste */
.fewo-haeuser {
	display: grid;
	gap: clamp( 20px, 3vw, 40px );
	grid-template-columns: repeat( var( --fewo-haeuser-cols, 3 ), minmax( 0, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.fewo-haeuser__item {
	display: flex;
	flex-direction: column;
}

.fewo-haeuser__media {
	display: block;
	line-height: 0;
}

.fewo-haeuser__img {
	width: 100%;
	/* height: auto ist zwingend. Das HTML-Attribut height wirkt sonst als
	   Vorgabe, und bei fester Breite UND fester Hoehe ignoriert der Browser
	   aspect-ratio. Die Kacheln wurden dadurch unterschiedlich hoch, und
	   object-fit: cover zog ein kleines Bild auf die viel zu hohe Flaeche -
	   das sah unscharf aus. */
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 4px;
}

.fewo-haeuser__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5em;
	padding-top: 0.9em;
}

.fewo-haeuser__logo-wrap {
	display: flex;
	align-items: flex-end;
	height: 56px;
}

/* Das Logo ist seit dem 02.09.2026 ein Link. Der Verweis muss die Hoehe
   des Rahmens uebernehmen: Sonst hat das Bild darin keine Bezugshoehe
   mehr, sein max-height: 100% laeuft ins Leere und das Logo waechst auf
   seine natuerliche Groesse — es lag dann quer ueber dem Foto darueber. */
.fewo-haeuser__logo-link {
	align-items: flex-end;
	display: flex;
	height: 100%;
}

/* Hoehe fest, Breite aus dem Seitenverhaeltnis.

   Vorher stand hier height: auto mit max-height: 100%. Das funktioniert
   fuer die drei PNG-Logos, aber nicht fuer das SVG des Boardinghouse:
   WordPress kann die Masse einer SVG-Datei nicht auslesen und schreibt
   deshalb keine width/height ins Markup. Ohne eigene Masse und ohne
   Bezugshoehe fiel das Logo auf 0 x 0 zusammen — auf der Karte fehlte es
   ganz. Mit fester Hoehe rechnet der Browser die Breite aus dem viewBox
   des SVG aus. */
.fewo-haeuser__logo {
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: left bottom;
	width: auto;
}

/* Auch der Titel bekommt Platz fuer zwei Zeilen. "Boardinghouse Muenster"
   bricht um, die drei anderen Namen nicht - ohne die Reservierung stuenden
   dessen Fakten und Text 25 Pixel tiefer als bei den Nachbarn. */
.fewo-haeuser__title {
	font-size: 1.3em;
	margin: 0;
	min-height: 2.6em; /* Rueckfall: zwei Zeilen bei line-height 1 */
	min-height: 2lh;   /* exakt zwei Zeilen, wo die Einheit unterstuetzt wird */
}

.fewo-haeuser__title a {
	text-decoration: none;
}

/* Platz fuer zwei Zeilen reservieren, damit die Beschreibungstexte aller
   Karten auf gleicher Hoehe beginnen. Ohne das rutscht der Text einer Karte
   nach unten, sobald ihre Fakten-Zeile umbricht - etwa bei
   "Kuhviertel, Altstadt - 4 Wohnungen". */
.fewo-haeuser__fakten {
	font-size: 0.9em;
	margin: 0;
	min-height: 3.4em; /* Rueckfall: zwei Zeilen bei line-height 1.7 */
	min-height: 2lh;   /* exakt zwei Zeilen, wo die Einheit unterstuetzt wird */
	opacity: 0.8;
}

.fewo-haeuser__text {
	margin: 0;
}

.fewo-haeuser__more {
	margin-top: auto;
	padding-top: 0.4em;
	font-weight: 600;
}

/* Vier Karten nebeneinander brauchen Platz. Zwischen Tablet und kleinem
   Laptop lieber zwei Reihen zu zweit als vier zu schmale Spalten. */
@media ( max-width: 1180px ) {
	.fewo-haeuser {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 781px ) {
	.fewo-haeuser {
		grid-template-columns: 1fr;
	}
}

/* Grundriss

   Ueberschrift und Einleitung stecken im Block, nicht im Template - nur so
   faellt der ganze Abschnitt weg, wenn keine Grundriss-Datei gewaehlt ist.
   Der Abschnitt bringt deshalb den Abstand mit, der frueher am margin-top
   der Template-Ueberschrift hing (spacing 60 = 4rem). */
.fewo-grundriss-abschnitt {
	margin-top: 4rem;
}

.fewo-grundriss-abschnitt > .fewo-abschnitt {
	margin-top: 0;
}

.fewo-grundriss__einleitung {
	margin: 0 0 1.75rem;
}

.fewo-grundriss {
	margin: 0;
}

.fewo-grundriss__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Aufenthaltsrabatte */
.fewo-rabatte {
	background: var( --wp--preset--color--accent-5, #f6f8fa );
	border-left: 4px solid var( --wp--preset--color--accent-1, #8fd3fe );
	border-radius: 4px;
	padding: 1.1em 1.3em;
}

.fewo-rabatte__titel {
	font-weight: 600;
	margin: 0 0 0.6em;
}

.fewo-rabatte__zeile {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.35em 0;
	border-top: 1px solid var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.1 ) );
}

.fewo-rabatte__zeile:first-of-type {
	border-top: 0;
}

.fewo-rabatte__wert {
	font-weight: 600;
	white-space: nowrap;
}

/* Bewertungen

   Redaktionell statt als Widget: keine Kaesten, keine Schatten, keine
   gefuellten Abzeichen. Die Zitate stehen frei auf der getoenten Flaeche
   wie Spalten in einer Zeitung, getrennt durch feine Linien. Das Auge
   landet damit auf dem, was jemand geschrieben hat, und nicht auf einer
   Zahl in einem blauen Kreis.

   Spaltenbreite statt Spaltenzahl: Der Browser nimmt so viele Spalten, wie
   hineinpassen — drei im Band, eine auf dem Handy. Damit ist auch die
   Breite am Handy erledigt, die vorher fest bei 22 rem stand und den Text
   beidseitig abschnitt. */
/* Eine Stimme nach der anderen. Die Mindesthoehe verhindert, dass die
   Seite springt, wenn nach einem langen Zitat ein kurzes kommt. */
.fewo-bewertungen {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.fewo-bewertungen__item {
	margin: 0;
	min-height: 11rem;
}

.fewo-bewertungen__item[ hidden ] {
	display: none;
}

/* Pfeile naeher an die Punkte. Ueber die volle Zitatbreite verteilt
   staenden sie so weit auseinander, dass der Zusammenhang verlorengeht. */
.fewo-bewertungen .fewo-slider__steuerung {
	max-width: 20rem;
	margin-inline: auto;
}

/* Note und Quelle als ruhige Zeile darueber. Versalien mit etwas Laufweite
   lesen sich als Beschriftung, nicht als Aussage. */
.fewo-bewertungen__kopf {
	margin: 0 0 0.7rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent-3, #1c6b9e );
	font-variant-numeric: tabular-nums;
}

.fewo-bewertungen__text {
	margin: 0;
	border: 0;
	padding: 0;
	font-style: normal;
	/* Groesser als der Fliesstext: Es ist nur eine Stimme zu sehen, sie
	   darf den Raum fuellen. */
	font-size: 1.2rem;
	line-height: 1.7;
}

.fewo-bewertungen__text p {
	margin: 0;
}

/* Booking trennt Lob und Kritik in zwei Felder; der Abstand haelt beides
   auseinander, ohne die Kritik optisch abzusetzen. */
.fewo-bewertungen__text p + p {
	margin-top: 0.8em;
}

/* Deutsche Anfuehrung: oeffnend am ersten Absatz, schliessend am letzten.
   Das haengende Zeichen laesst die erste Zeile buendig mit den uebrigen
   beginnen. */
.fewo-bewertungen__text p:first-child::before {
	content: "„";
}

.fewo-bewertungen__text p:last-child::after {
	content: "“";
}

.fewo-bewertungen__quelle {
	margin-top: 0.9rem;
	font-size: 0.92rem;
	color: var( --wp--preset--color--accent-4, #6a6a6a );
}

/* Auf der Wohnungsseite: worauf sich die Stimmen beziehen. */
.fewo-bewertungen__herkunft {
	max-width: 60ch;
	margin: -0.4rem auto 2.2rem;
	text-align: center;
	color: var( --wp--preset--color--accent-4, #6a6a6a );
}

/* Die Einordnung der Auswahl. Zurueckhaltend, aber lesbar. */
.fewo-bewertungen__einordnung {
	max-width: 68ch;
	margin-inline: auto;
	text-align: center;
	margin-top: 2rem;
	font-size: 0.86rem;
	line-height: 1.65;
	color: var( --wp--preset--color--accent-4, #6a6a6a );
}

/* Schmueckende Zeichnung unter dem Abschnitt „Das Haus".

   Mittig und mit Abstand nach oben, damit sie als Abschluss des Abschnitts
   wirkt und nicht als Teil des letzten Absatzes. Das clear raeumt die
   Aussenaufnahme ab, die weiter oben nach rechts fliesst — sonst koennte
   die Zeichnung neben ihr landen statt unter dem Text. */
.fewo-abschnittsgrafik {
	display: block;
	clear: both;
	margin: 2.5rem auto 0;
	max-width: 34rem;
}

.fewo-abschnittsgrafik img {
	display: block;
	width: 100%;
	height: auto;
}

/* Adresse und Anreise

   Zwei Angaben, nach denen ein Gast kurz vor der Abreise sucht: Wo ist das,
   und ab wann komme ich rein. Als zwei nackte Spalten unter der Buchung
   gingen sie unter. Jetzt ein eigener Kasten mit getoentem Grund, und je
   ein Sinnbild in der Akzentfarbe zeigt, worum es geht. */
.fewo-hausinfo {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 18rem, 1fr ) );
	gap: 1.5rem 2.5rem;
	padding: 2rem 2.2rem;
	border-radius: 8px;
	background: var( --wp--preset--color--accent-2, #e8f5fe );
	/* Beide Karten oben ausrichten, damit die Ueberschriften und die
	   Sinnbilder auf einer Linie liegen — sonst schwebt die kurze Adresse
	   in der Mitte neben dem langen Anreisetext. */
	align-items: start;
}

/* Das Logo des Hauses ueber beiden Karten, ueber die ganze Breite. Es
   beantwortet die Frage, die auf einer Wohnungsseite zuerst kommt: zu
   welchem Haus gehoert diese Anschrift. */
.fewo-hausinfo__logo {
	grid-column: 1 / -1;
	margin-bottom: 0.4rem;
}

.fewo-hausinfo__logo-bild {
	display: block;
	height: 3.2rem;
	width: auto;
	max-width: 12rem;
	object-fit: contain;
	object-position: left center;
}

.fewo-hausinfo__karte {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 1rem;
	align-items: start;
}

.fewo-hausinfo__bild {
	grid-row: span 2;
	width: 2.2rem;
	height: 2.2rem;
	margin-top: -0.15rem;
	color: var( --wp--preset--color--accent-3, #1c6b9e );
}

.fewo-hausinfo__titel {
	margin: 0 0 0.15rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent-3, #1c6b9e );
}

.fewo-hausinfo__text {
	margin: 0;
	line-height: 1.6;
}

/* Strasse und Ort untereinander, ohne zweiten Absatz. */
.fewo-hausinfo__zeile {
	display: block;
}

@media ( max-width: 600px ) {
	.fewo-hausinfo {
		padding: 1.6rem 1.4rem;
	}
}

/* Das getoente Band. Es kommt aus dem Block selbst, nicht aus der Vorlage —
   sonst bliebe bei einem Haus ohne Bewertungen eine leere blaue Flaeche
   stehen. Die volle Breite besorgt alignfull, das Innere wird auf die
   Breite der uebrigen Abschnitte zurueckgeholt. */
.fewo-stimmen {
	margin-top: var( --wp--preset--spacing--70, 4rem );
	padding: var( --wp--preset--spacing--70, 4rem ) 1.5rem;
}

.fewo-stimmen__innen {
	max-width: var( --wp--style--global--wide-size, 1320px );
	margin-inline: auto;
}

/* Im Band braucht die Ueberschrift keinen zusaetzlichen Abstand nach oben —
   das Band bringt ihn mit. */
.fewo-stimmen__innen > .fewo-abschnitt:first-child {
	margin-top: 0;
}

@media ( max-width: 781px ) {
	.fewo-galerie,
	.fewo-wohnungen {
		grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	}
}

/* Städte-Slider nutzt bewusst dieselben .fewo-slider-Klassen wie der
   Wohnungs-Slider weiter oben — gleiches Layout, andere Datenquelle. */

/* Der Knopf soll beim Durchklicken nicht wandern.

   Die vier Orte haben unterschiedlich lange Texte, und sichtbar ist immer
   nur eine Folie. Dadurch war der beige Kasten mal hoeher, mal niedriger,
   und "Unsere Haeuser ansehen" sprang bei jedem Klick mit.

   Deshalb liegen jetzt alle Folien uebereinander im selben Rasterfeld: Der
   Kasten ist damit immer so hoch wie die laengste Folie, unabhaengig davon,
   welche gerade zu sehen ist. Die ausgeblendeten bleiben dafuer im Layout
   stehen, werden aber auf visibility: hidden gesetzt - fuer Screenreader
   und Tastatur sind sie damit genauso weg wie vorher.

   Innerhalb der Folie steht der Text oben und der Knopf unten. Beides sind
   damit feste Anker; vorher war der Inhalt mittig zentriert, weshalb auch
   die Ueberschrift bei jedem Wechsel ihre Hoehe aenderte. */
.fewo-slider--versetzt .fewo-slider__panel {
	display: grid;
	grid-template-areas: "folie";
}

.fewo-slider--versetzt .fewo-slider__intro,
.fewo-slider--versetzt .fewo-slider__bereich {
	display: flex;
	flex-direction: column;
	grid-area: folie;
}

.fewo-slider--versetzt .fewo-slider__intro[hidden],
.fewo-slider--versetzt .fewo-slider__bereich[hidden] {
	visibility: hidden;
}

.fewo-slider--versetzt .fewo-slider__aktion {
	margin-top: auto;
	padding-top: 1.6em;
}

/* Die erste Folie ist die Einleitung und benutzt .fewo-slider__claim ohne
   den Zusatz --bereich, der bei den anderen den oberen Abstand auf null
   setzt. Dadurch stand ihre Ueberschrift 20 Pixel tiefer als die der drei
   Orte. Hier gleichgezogen, damit auch der Titel beim Klicken stillsteht. */
.fewo-slider--versetzt .fewo-slider__claim {
	margin-top: 0;
}

/* Variante mit Bild-Versatz, wie auf der Vorbild-Seite: Der beige
   Hintergrund geht über die GESAMTE Breite der Sektion, also auch unter
   dem Bild durch — es ist keine eigene Box neben dem Bild, sondern eine
   durchgehende Fläche, auf der das Bild wie eine eigene Ebene obenauf
   liegt. Das Bild wird dafür nicht auf die volle Zeilenhöhe gestreckt,
   sondern behält seine eigene (etwas geringere) Höhe und wird nach oben
   herausgezogen, sodass es oben über die Fläche hinausragt und unten vor
   dem Rand endet — die beige Fläche bleibt dort sichtbar.
   Nur ab Tablet-Breite, weil auf dem Handy Kasten und Bild ohnehin
   untereinander stehen (siehe Media Query weiter oben). */
@media ( min-width: 901px ) {
	.fewo-slider--versetzt {
		background: var( --wp--preset--color--accent-5, #f1f1f1 );
	}

	.fewo-slider--versetzt .fewo-slider__panel {
		background: transparent;
	}

	.fewo-slider--versetzt .fewo-slider__buehne {
		align-self: start;
		margin-top: clamp( -72px, -6vw, -32px );
	}
}

/* Schriftzug ueber den Menuepunkten, z. B. "Unsere Haeuser".

   Die Navigation wird dafuer zweizeilig: Schriftzug oben, Punkte darunter.

   Farbe ist der Textton #202020 statt eines Graus - 16,3:1 auf Weiss. Das
   ist bewusst deutlich mehr als die geforderten 4,5:1: Der Schriftzug soll
   sofort ins Auge fallen und sich zugleich klar von den blauen Links
   darunter absetzen. */
.fewo-nav__beschriftung {
	color: var( --wp--preset--color--contrast, #202020 );
	font-size: clamp( 1.2rem, 1.8vw, 1.45rem );
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.05;
	margin: 0 0 0.12em;
	text-align: left;
	text-transform: uppercase;
}

/* Kurze Akzentlinie darunter, dieselbe Sprache wie bei den
   Abschnittsueberschriften im Inhalt. Gibt dem Schriftzug Breite und macht
   die Zusammengehoerigkeit mit den Punkten darunter sichtbar. */
.fewo-nav__beschriftung::after {
	background: var( --wp--preset--color--accent-1, #8fd3fe );
	content: "";
	display: block;
	height: 3px;
	margin-top: 0.18em;
	width: 3rem;
}

@media ( min-width: 782px ) {
	/* stretch statt flex-end: Der Schriftzug nimmt die volle Breite der
	   Punkteliste ein und beginnt dadurch genau ueber dem ersten Punkt. */
	.fewo-nav {
		align-items: stretch;
		display: flex;
		flex-direction: column;
	}
}

@media ( max-width: 781px ) {
	/* Unterhalb von Tablet ersetzt der Hamburger-Knopf die Liste - ein
	   Schriftzug ohne sichtbare Punkte darunter ergaebe keinen Sinn. */
	.fewo-nav__beschriftung {
		display: none;
	}
}

/* Logos in der Navigation

   Unter jedem Hausnamen sein Logo, beim Rueckweg das Logo der Gesamtseite
   daneben. Begrenzt wird ueber die Hoehe, weil die Logos sehr
   unterschiedliche Seitenverhaeltnisse haben - ueber die Breite begrenzt
   geriete das eine winzig, das andere riesig. */
.fewo-nav__logo {
	display: block;
	line-height: 0;
	margin-bottom: 0.35em;
}

.fewo-nav__logo-link {
	display: block;
	line-height: 0;
}

.fewo-nav__logo-img {
	display: block;
	height: 40px;
	max-width: 190px;
	object-fit: contain;
	object-position: left center;
	width: auto;
}

/* Das Boardinghouse-Logo traegt sein Gebaeudezeichen UEBER dem Schriftzug.
   Auf dieselbe Gesamthoehe gebracht wie die anderen bleibt dem Schriftzug
   deshalb nur die halbe Hoehe, und das Logo wirkt neben den drei anderen
   winzig. Es bekommt darum mehr Hoehe, damit die Schriftzuege optisch
   gleich gross wirken - nicht die Rahmen. */
.fewo-nav__logo--boardinghouse .fewo-nav__logo-img {
	height: 58px;
}

/* In der Kopfleiste steht das Logo mittig ueber dem Hausnamen. In der
   Fusszeile bleibt es linksbuendig: Dort stehen die Haeuser untereinander
   in einer Spalte, und ein zentriertes Logo ueber einem kurzen Namen
   saehe dort verrutscht aus. */
.wp-site-blocks > header .fewo-nav__logo,
.wp-site-blocks > header .fewo-nav__logo-link {
	display: flex;
	justify-content: center;
}

.wp-site-blocks > header .fewo-nav__logo-img {
	object-position: center center;
}

/* Beim Rueckweg steht das Logo neben dem Text, nicht darunter. */
.fewo-nav__item--zurueck .fewo-nav__logo {
	margin: 0 0 0.35em;
}

.fewo-nav__item--zurueck .fewo-nav__logo-img {
	height: 52px;
	max-width: 170px;
}

/* Im aufgeklappten Menue auf schmalen Bildschirmen wuerden die Logos die
   Liste unnoetig in die Laenge ziehen — jeder Hauseintrag war dadurch fast
   hundert Pixel hoch, vier Haeuser fuellten den halben Bildschirm, bevor
   ueberhaupt eine Wohnung zu sehen war.
   Die Auswahl nennt die Kopfleiste ausdruecklich mit: Ohne sie gewinnt die
   Regel von weiter oben, die dem Logo in der Kopfleiste display:flex gibt,
   und die Logos blieben trotz dieser Regel stehen. */
@media ( max-width: 781px ) {
	.fewo-nav__logo,
	.wp-site-blocks > header .fewo-nav__logo {
		display: none;
	}
}

/* Aussenaufnahme des Hauses im Abschnitt „Das Haus"

   Das Bild steht rechts, der Text fliesst darum herum - wie in einem
   Zeitschriftenartikel. Float statt Spalten, weil der Text sonst auch dann
   in einer schmalen Spalte staende, wenn gar kein Bild hinterlegt ist.

   Die Aufnahmen sind hochkant (das LemperDenkmal misst 1086 x 1448), fuer
   ein Kopfbild also ungeeignet. Neben dem Text ist Hochformat dagegen
   genau richtig. Die Hoehe wird nicht begrenzt: Ein Haus soll man ganz
   sehen, nicht angeschnitten. */
.fewo-hausbild {
	margin: 0 0 1.2em;
}

.fewo-hausbild__img {
	border-radius: 4px;
	display: block;
	height: auto;
	width: 100%;
}

/* Die Vorfahrenklasse steht hier nicht zur Zierde: Das Gruppen-Layout von
   WordPress zwingt jedem Kind max-width auf die Inhaltsbreite und
   margin-inline: auto auf — mit !important. Ohne hoehere Spezifitaet
   bekaeme das Bild volle 860 Pixel und stuende mittig statt am Rand. */
@media ( min-width: 782px ) {
	.wp-block-group .fewo-hausbild {
		float: right;
		margin: 0.4em 0 clamp( 40px, 5vw, 72px ) clamp( 24px, 3vw, 48px ) !important;
		max-width: min( 34%, 380px );
		shape-outside: margin-box;
	}
}

/* Der Abschnitt muss das Bild einschliessen.

   Ein Float zaehlt nicht zur Hoehe seines Elternelements. Das Bild ist
   hoeher als der Text daneben und ragte deshalb unten aus dem Abschnitt
   heraus — bis auf zwei Pixel an das vollbreite Bildband, das die naechste
   Section abtrennt. Es sah aus, als klebte das Foto daran.

   display: flow-root laesst den Abschnitt den Float umschliessen, ohne
   etwas abzuschneiden. Der Klassiker mit clear: both am Folgeelement
   griff hier nicht: Der Beitragstext liegt in einem eigenen
   Layout-Container, ein clear darin verlaengert den Abschnitt nicht. */
.wp-block-group:has( > .fewo-hausbild ) {
	display: flow-root;
}

/* Rueckfall fuer Browser ohne :has() — dasselbe Ergebnis ueber ein
   raeumendes Element hinter dem Bild. */
.wp-block-group > .fewo-hausbild ~ *:last-child::after {
	clear: both;
	content: "";
	display: block;
}

/* Kontaktformular

   Bewusst schlicht: Beschriftung ueber dem Feld, Fehler direkt darunter.
   Farben aus der Palette, damit die Kontraste stimmen - Rot fuer Fehler in
   einem Ton, der auf Weiss 4,5:1 erreicht. */
.fewo-formular {
	max-width: 40rem;
}

/* Bewusst kein Flex-Container: Native Auswahlfelder verhalten sich darin
   in manchen Browsern eigenartig - das Aufklappmenue schliesst dann schon
   beim Loslassen der Maustaste, sodass man die Taste gedrueckt halten muss.
   Untereinander gestapelt wird hier ohnehin, dafuer genuegt Block-Layout. */
.fewo-formular__feld {
	display: block;
	margin: 0 0 1.2em;
}

.fewo-formular__feld > label {
	display: block;
	margin-bottom: 0.3em;
}

.fewo-formular__feld label {
	font-weight: 600;
}

.fewo-formular__pflicht {
	color: #a4272f;
}

.fewo-formular input[type="text"],
.fewo-formular input[type="email"],
.fewo-formular input[type="tel"],
.fewo-formular select,
.fewo-formular textarea {
	border: 1px solid var( --wp--preset--color--accent-4, #6a6a6a );
	border-radius: 3px;
	font: inherit;
	padding: 0.6em 0.7em;
	width: 100%;
}

.fewo-formular input:focus-visible,
.fewo-formular select:focus-visible,
.fewo-formular textarea:focus-visible {
	outline: 3px solid var( --wp--preset--color--accent-3, #1c6b9e );
	outline-offset: 1px;
}

/* Einwilligung: Kaestchen und Text nebeneinander */
.fewo-formular__feld--kasten {
	display: grid;
	gap: 0 0.6em;
	grid-template-columns: auto 1fr;
}

.fewo-formular__feld--kasten input {
	margin-top: 0.3em;
}

.fewo-formular__feld--kasten > label {
	font-weight: 400;
	margin-bottom: 0;
}

.fewo-formular__feld--kasten .fewo-formular__fehler {
	grid-column: 1 / -1;
}

/* Fehler */
.fewo-formular__fehler {
	color: #a4272f;
	font-size: 0.9em;
}

.fewo-formular__feld--fehler input,
.fewo-formular__feld--fehler select,
.fewo-formular__feld--fehler textarea {
	border-color: #a4272f;
	border-width: 2px;
}

.fewo-formular__fehlerbox {
	border-left: 4px solid #a4272f;
	background: #fdf3f3;
	margin-bottom: 1.6em;
	padding: 1em 1.2em;
}

.fewo-formular__fehlerbox p {
	font-weight: 600;
	margin: 0 0 0.4em;
}

.fewo-formular__fehlerbox ul {
	margin: 0;
	padding-left: 1.2em;
}

.fewo-formular__erfolg {
	border-left: 4px solid var( --wp--preset--color--accent-1, #8fd3fe );
	background: var( --wp--preset--color--accent-2, #e8f5fe );
	margin: 0;
	padding: 1.1em 1.3em;
}

.fewo-formular__hinweis {
	font-size: 0.9em;
	margin: 0 0 1.2em;
}

/* Honigtopf gegen automatisierte Absender - fuer Menschen unsichtbar,
   fuer Screenreader ausgeblendet, aber im Quelltext vorhanden. */
.fewo-formular__falle {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* Abschnitt "Über die Wohnung" */
.fewo-ueber-wohnung {
	margin-bottom: 2.5rem;
}

.fewo-ueber-wohnung p {
	margin: 0 0 0.9em;
}

.fewo-ueber-wohnung p:last-child {
	margin-bottom: 0;
}

/* Ausstattung in zwei Gruppen */
.fewo-ausstattung-abschnitt {
	margin-bottom: 2.5rem;
}

.fewo-ausstattung-weitere {
	font-size: 1rem;
	font-weight: 600;
	margin: 1.6em 0 0.6em;
}

/* Die schlichte Liste ohne Symbole: zweispaltig wie die andere, aber mit
   einem kleinen Punkt statt eines Icons. */
.fewo-ausstattung-schlicht {
	display: grid;
	gap: 0.5em 2em;
	grid-template-columns: repeat( 2, 1fr );
	list-style: none;
	margin: 0;
	padding: 0;
}

.fewo-ausstattung-schlicht li {
	padding-left: 1.3em;
	position: relative;
}

.fewo-ausstattung-schlicht li::before {
	background: var( --wp--preset--color--accent-1, #8fd3fe );
	border-radius: 50%;
	content: "";
	height: 7px;
	left: 0;
	position: absolute;
	top: 0.65em;
	width: 7px;
}

@media ( max-width: 781px ) {
	.fewo-ausstattung-schlicht {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
   Wohnungen eingrenzen

   Steht ueber der Liste und ist bewusst zurueckhaltend gestaltet: Die
   Schnellsuche oben fragt freie Termine ab, das hier grenzt nur die
   Anzeige ein. Zwei Bedienfelder, die gleich aussehen, waeren zwei
   Bedienfelder zu viel.
   ------------------------------------------------------------------ */
.fewo-wohnungsfilter {
	margin-bottom: 1.75rem;
}

.fewo-wohnungsfilter[hidden] {
	display: none;
}

.fewo-wohnungsfilter__felder {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem 1.25rem;
}

.fewo-wohnungsfilter__feld {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	min-width: 11rem;
}

.fewo-wohnungsfilter__feld label {
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--accent-4, #6a6a6a );
}

.fewo-wohnungsfilter__feld select {
	font: inherit;
	font-size: 0.95rem;
	padding: 0.45rem 0.6rem;
	border: 1px solid var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.18 ) );
	border-radius: 3px;
	background: var( --wp--preset--color--base, #fff );
	color: inherit;
	max-width: 16rem;
}

.fewo-wohnungsfilter__zuruecksetzen {
	font: inherit;
	font-size: 0.9rem;
	padding: 0.45rem 0.2rem;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	color: var( --wp--preset--color--accent-3, #1c6b9e );
	cursor: pointer;
}

.fewo-wohnungsfilter__zuruecksetzen[hidden] {
	display: none;
}

.fewo-wohnungsfilter__zahl {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	color: var( --wp--preset--color--accent-4, #6a6a6a );
	min-height: 1.4em;
}

.fewo-wohnungen__item[hidden],
.fewo-wohnungen__trenner[hidden],
.fewo-wohnungen-zeile[hidden],
.fewo-wohnungen-zeile__pfeile[hidden] {
	display: none;
}