/**
 * 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;
}

.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;
}

.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;
	scrollbar-width: thin;
}

.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;
}

.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 ) {
	.fewo-slider {
		grid-template-areas:
			"buehne"
			"panel"
			"steuerung";
		grid-template-columns: 1fr;
	}

	.fewo-slider__steuerung {
		padding-left: 0;
		padding-right: 0;
	}
}

/* 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: center;
}

.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;
		opacity: 0;
		visibility: hidden;
		transform: translateY( 4px );
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	.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;
		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;
}

.fewo-haeuser__logo {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
}

.fewo-haeuser__title {
	font-size: 1.3em;
	margin: 0;
}

.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 */
.fewo-bewertungen {
	display: grid;
	gap: 1.2em;
}

.fewo-bewertungen__item {
	margin: 0;
	padding: 1.1em 1.3em;
	border: 1px solid var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.12 ) );
	border-radius: 4px;
}

.fewo-bewertungen__sterne {
	color: var( --wp--preset--color--accent-3, #2b7fb8 );
	letter-spacing: 0.1em;
	margin-bottom: 0.4em;
}

.fewo-bewertungen__text {
	margin: 0;
	border: 0;
	padding: 0;
	font-style: italic;
}

.fewo-bewertungen__text p {
	margin: 0;
}

.fewo-bewertungen__quelle {
	font-size: 0.85em;
	margin-top: 0.6em;
	opacity: 0.75;
}

@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. */

/* 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( 0.95rem, 1.3vw, 1.1rem );
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	margin: 0 0 0.35em;
	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.3em;
	width: 2.6rem;
}

@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-top: 0.4em;
}

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

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

.fewo-nav__item--zurueck .fewo-nav__logo-img {
	height: 46px;
	max-width: 150px;
}

/* Im aufgeklappten Menue auf schmalen Bildschirmen wuerden die Logos die
   Liste unnoetig in die Laenge ziehen. */
@media ( max-width: 781px ) {
	.fewo-nav__logo {
		display: none;
	}
}

/* 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;
	}
}