/*
Theme Name: FeWo Münster
Theme URI: https://example.local/
Description: Child-Theme von Twenty Twenty-Five für Ferienwohnungen in Münster. Enthält die Templates für Häuser und Wohnungen.
Author: Sefkan
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Template: twentytwentyfive
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fewo-muenster
*/

/* ------------------------------------------------------------------
   Aufbau nach dem Vorbild der bestehenden Seite,
   Akzentfarbe durchgaengig #8fd3fe.
   ------------------------------------------------------------------ */

/* Abschnittsueberschriften mit kurzer Akzentlinie darunter */
.fewo-abschnitt {
	margin-bottom: 1.1em;
	padding-bottom: 0.5em;
	position: relative;
}

.fewo-abschnitt::after {
	background: var( --wp--preset--color--accent-1 );
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 3.5rem;
}

/* Seitenkopf: Titel links, Sprungmarken rechts */
.fewo-seitenkopf {
	align-items: flex-end;
}

.fewo-seitentitel {
	margin: 0;
	max-width: 18ch;
}

.fewo-sprungmarken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fewo-sprungmarken a {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding-bottom: 0.5em;
	text-decoration: none;
	text-transform: uppercase;
}

.fewo-sprungmarken a:hover,
.fewo-sprungmarken a:focus {
	box-shadow: inset 0 -3px 0 var( --wp--preset--color--accent-1 );
}

/* Hero */
.fewo-hero__kasten {
	justify-content: center;
}

.fewo-kurzdaten {
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.9rem, 3.4vw, 2.75rem );
	font-weight: 300;
	line-height: 1.1;
	margin: 0;
	padding-bottom: 0.35em;
	position: relative;
}

.fewo-kurzdaten sup {
	font-size: 0.55em;
	top: -0.55em;
}

.fewo-kurzdaten--linie::after {
	background: var( --wp--preset--color--accent-1 );
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 3.5rem;
}

.fewo-hero__claim {
	margin: 0.4em 0 0;
}

.fewo-hero .fewo-galerie {
	gap: 0;
	height: 100%;
}

.fewo-hero .fewo-galerie__img {
	aspect-ratio: 3 / 2;
	border-radius: 0;
	height: 100%;
}

/* Ab dem zweiten Bild ausblenden: im Hero zaehlt das Titelmotiv.
   Die vollstaendige Galerie steht weiter unten im Inhalt. */
.fewo-hero .fewo-galerie__item:not( :first-child ) {
	display: none;
}

/* Buchungsspalte bleibt beim Scrollen sichtbar */
@media ( min-width: 1024px ) {
	.fewo-buchungsspalte {
		align-self: flex-start;
		position: sticky;
		top: 1.5rem;
	}
}

/* Ausstattungslisten zweispaltig, wie auf der Vorlage */
.fewo-hauptteil .wp-block-list {
	columns: 2;
	column-gap: 2.5rem;
	list-style: none;
	padding: 0;
}

.fewo-hauptteil .wp-block-list li {
	break-inside: avoid;
	padding-left: 1.3em;
	position: relative;
}

.fewo-hauptteil .wp-block-list li::before {
	background: var( --wp--preset--color--accent-1 );
	border-radius: 50%;
	content: "";
	height: 7px;
	left: 0;
	position: absolute;
	top: 0.65em;
	width: 7px;
}

/* Ausstattungsliste mit Icon je Merkmal, wie in der Vorlage. Ersetzt fuer
   diese eine Liste das Punktraster durch ein echtes zweispaltiges Raster,
   da hier links neben dem Text noch das Icon Platz braucht. */
.fewo-hauptteil .fewo-ausstattung-liste {
	column-gap: 0;
	columns: 1;
	display: grid;
	gap: 0.7em 2em;
	grid-template-columns: repeat( 2, 1fr );
}

.fewo-hauptteil .fewo-ausstattung-liste li {
	align-items: flex-start;
	break-inside: auto;
	display: flex;
	gap: 0.7em;
	padding-left: 0;
}

.fewo-hauptteil .fewo-ausstattung-liste li::before {
	content: none;
}

.fewo-ausstattung-icon {
	color: var( --wp--preset--color--accent-3, #1c6b9e );
	flex: none;
	margin-top: 0.1em;
}

.fewo-ausstattung-icon svg {
	display: block;
	height: 22px;
	width: 22px;
}

@media ( max-width: 781px ) {
	.fewo-hauptteil .wp-block-list {
		columns: 1;
	}

	.fewo-hauptteil .fewo-ausstattung-liste {
		grid-template-columns: 1fr;
	}

	.fewo-seitenkopf {
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------------
   Mitscrollende Kopfleiste

   Wichtig: Die Hoehe der Leiste bleibt in jedem Zustand gleich.
   Die Metabar verschwindet nicht durch Einklappen, sondern durch
   einen negativen sticky-Versatz - sie scrollt schlicht aus dem Bild.
   Jede Hoehenaenderung wuerde den Inhalt darunter verschieben, das
   loest erneut ein Scroll-Ereignis aus und die Leiste flackert.
   ------------------------------------------------------------------ */
.fewo-kopfleiste {
	position: sticky;
	/* Rueckfall bewusst 0 und kein Schaetzwert: Ist die Variable noch nicht
	   gesetzt - etwa weil das Skript noch laedt - klebt die Leiste
	   vollstaendig sichtbar am oberen Rand. Ein zu grosser Schaetzwert
	   wuerde sie dagegen zu weit nach oben ziehen und das Logo oben
	   abschneiden. */
	top: calc( -1 * var( --fewo-metabar-h, 0px ) );
	z-index: 100;
	background: var( --wp--preset--color--base );
	transition: box-shadow 0.3s ease;
}

/* Kein Rahmen im Ruhezustand - der Schatten kommt erst beim Scrollen,
   sonst liegt eine graue Linie ueber dem Kopfbild. */
.fewo-kopfleiste.is-gescrollt {
	box-shadow: 0 2px 14px rgba( 0, 0, 0, 0.09 );
}

/* Sprungmarken sollen nicht unter der Kopfleiste landen. Die Leiste bleibt
   dauerhaft stehen, der Abstand muss daher mindestens so gross sein wie die
   Kopfzeile ohne Metabar.

   Bewusst nur Ueberschriften und Abschnitte, nicht jedes Element mit einer
   Kennung: Die Regel galt vorher auch fuer Formularfelder. Beim Anklicken
   eines Auswahlfeldes scrollte der Browser es unter Beachtung dieses
   Abstands ins Bild - die Seite sprang um rund 400 Pixel, und das gerade
   geoeffnete Aufklappmenue schloss sich dadurch sofort wieder. */
:where( h1, h2, h3, h4, h5, h6, section, article )[ id ] {
	scroll-margin-top: 10rem;
}

/* Der Kopfkasten der Hausseiten ist Sprungziel fuer „Verfuegbarkeit
   pruefen" am Seitenende. Als <div> faellt er nicht unter die Regel
   darueber und braucht den Abstand einzeln, damit die feststehende
   Kopfleiste ihn nicht halb verdeckt. */
.fewo-karte-huelle[ id ] {
	scroll-margin-top: 10rem;
}

@media ( prefers-reduced-motion: reduce ) {
	.fewo-kopfleiste {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Startseite: Bildbuehne mit Buchungskasten

   Das Bild fuellt die komplette Bildschirmhoehe. Der Buchungskasten
   darunter wird nicht um einen festen Pixelwert hochgezogen (der waere
   an eine bestimmte Bildhoehe gebunden), sondern nur leicht ueber den
   unteren Bildrand geschoben — das funktioniert unabhaengig davon, wie
   hoch der Bildschirm ist, und deckt so den Uebergang zwischen Bild und
   naechster Section ab. Hintergrund rgba(255,255,255,0.9), Spalten 45
   zu 55 — eins zu eins aus der Vorlage boardinghouse.ms uebernommen.
   ------------------------------------------------------------------ */
.fewo-buehne {
	height: var( --fewo-buehne-hoehe, calc( 100vh - 180px ) );
	height: var( --fewo-buehne-hoehe, calc( 100dvh - 180px ) );
	min-height: 480px;
	/* Die Startseite hat ein festes Motiv, die Hausseiten setzen ueber den
	   Block fewo/hausbuehne ihr eigenes per CSS-Variable. */
	/* Nicht die groesste Fassung: Die Bühne ist das erste, was geladen wird.
	   1536 Pixel reichen bis zum großen Bildschirm, darunter und darüber
	   regeln die beiden Abfragen weiter unten. Die drei Adressen setzt das
	   Plugin im Seitenkopf — so gilt die Umstellung auf WebP auch hier. */
	background-image: var( --fewo-buehne-bild, var( --fewo-buehne-mittel ) );
	background-position: var( --fewo-buehne-position, center 40% );
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: 0;
	position: relative;
}

@media ( max-width: 800px ) {
	.fewo-buehne {
		background-image: var( --fewo-buehne-bild, var( --fewo-buehne-klein ) );
	}
}

@media ( min-width: 1600px ) {
	.fewo-buehne {
		background-image: var( --fewo-buehne-bild, var( --fewo-buehne-gross ) );
	}
}

/* Abdunklung nur, wenn der Block sie anfordert - sonst voellig unsichtbar. */
.fewo-buehne::before {
	background: #000;
	content: "";
	inset: 0;
	opacity: var( --fewo-buehne-dunkel, 0 );
	pointer-events: none;
	position: absolute;
}

/* Flaches Band zwischen zwei Abschnitten, wie auf der Startseite. */
.fewo-buehne--trenner {
	height: var( --fewo-buehne-hoehe, 32vh );
	min-height: 220px;
}

@media ( min-width: 782px ) {
	.fewo-buehne--trenner {
		margin-top: var( --wp--preset--spacing--70 );
	}
}

.fewo-karte-huelle {
	margin-top: -120px;
	position: relative;
	z-index: 1;
}

.fewo-karte {
	background: rgba( 255, 255, 255, 0.9 );
	min-height: 260px;
	align-items: stretch;
}

.fewo-karte__text h1 {
	margin: 0 0 0.25em;
}

.fewo-karte__text p {
	margin: 0 0 0.7em;
}

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

/* Die Buchungsspalte greift seitlich leicht ueber, damit das
   Smoobu-Tool buendig sitzt - so macht es auch die Vorlage. */
.fewo-karte__suche {
	margin-inline: -15px;
}

.fewo-karte__suche .fewo-smoobu {
	margin: 0;
}

.fewo-karte__suche .fewo-smoobu iframe {
	display: block;
}

@media ( max-width: 781px ) {
	.fewo-karte-huelle {
		margin-top: -90px;
	}

	.fewo-karte {
		background: #fff;
		min-height: 0;
	}

	.fewo-karte__suche {
		margin-inline: 0;
	}
}

/* Startseite: Icons ueber den drei Argument-Spalten */
.fewo-argument-icon {
	color: var( --wp--preset--color--accent-3, #1c6b9e );
	margin-bottom: 0.6em;
}

.fewo-argument-icon svg {
	display: block;
	height: 44px;
	width: 44px;
}

/* Reserviert Platz fuer zwei Zeilen, damit die Akzentlinien unter den
   Ueberschriften auf gleicher Hoehe stehen, egal ob der Titel ein- oder
   zweizeilig umbricht. */
.fewo-argumente .fewo-abschnitt {
	min-height: 3em;
}

/* Kopf- und Fussbereich */
.fewo-metabar {
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Auf dem Beige erreicht unser Linkblau nur 3,1:1 und faellt damit durch.
   Deshalb stehen Text und Links in der obersten Leiste im dunklen Textton -
   8,8:1, und genauso macht es die Boardinghouse-Seite. Erkennbar bleiben
   die Links ueber Unterstreichung bei Hover und Tastaturfokus. */
.fewo-metabar a {
	color: var( --wp--preset--color--contrast, #202020 );
	text-decoration: none;
}

.fewo-metabar a:hover,
.fewo-metabar a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.fewo-kopf .wp-block-site-title a {
	text-decoration: none;
}

/* Telefon und E-Mail in der Kopfleiste: Icon und Text auf Desktop, ab
   Mobilbreite nur noch das Icon zum Antippen, damit die Leiste schmal
   bleibt und Anruf wie Mail trotzdem einen Klick entfernt sind.

   Der Text verschwindet dabei nur optisch - er bleibt fuer Screenreader
   lesbar, damit die Nummer und die Adresse angesagt werden koennen. */
.fewo-telefon a,
.fewo-mail a {
	align-items: center;
	display: inline-flex;
	gap: 0.45em;
}

.fewo-telefon__icon,
.fewo-mail__icon {
	display: inline-flex;
	flex: none;
}

.fewo-telefon__icon svg,
.fewo-mail__icon svg {
	display: block;
	height: 15px;
	width: 15px;
}

@media ( max-width: 480px ) {
	.fewo-telefon__text,
	.fewo-mail__text {
		clip: rect( 1px, 1px, 1px, 1px );
		clip-path: inset( 50% );
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	.fewo-telefon a,
	.fewo-mail a {
		padding: 0.2em;
	}

	.fewo-telefon__icon svg,
	.fewo-mail__icon svg {
		height: 17px;
		width: 17px;
	}
}

/* Zahlungslogos in der Kopfleiste, wie in der Vorlage rechts neben Kontakt */
.fewo-zahlungslogos {
	align-items: center;
	gap: 0.9em;
}

.fewo-zahlungslogos img {
	display: block;
	height: 18px;
	opacity: 0.85;
	width: auto;
}

@media ( max-width: 600px ) {
	.fewo-metabar .fewo-zahlungslogos {
		display: none;
	}
}

.fewo-footer__links {
	list-style: none;
	padding: 0;
}

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

/* Instagram-Symbol vor jedem Link. Als Maske statt als Bild, damit es
   die Linkfarbe annimmt, auch beim Hover. Das Symbol liegt hier im
   Stylesheet — nichts wird von Instagram geladen.
   Feste Pixelgroesse statt em: Bei krummen Werten wie 18,7 px rundet der
   Browser jedes Symbol je nach Lage auf der Seite anders, und sie wirken
   unterschiedlich gross, obwohl sie es nicht sind. */
.fewo-footer__instagram a {
	align-items: center;
	display: inline-flex;
	gap: 0.5em;
}

.fewo-footer__instagram a::before {
	background-color: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 18px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='0.6' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='0.6' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 18px;
}

/* „Cookie-Einstellungen" ist technisch ein Knopf, kein Link — es oeffnet
   ein Fenster, statt eine Seite aufzurufen. Optisch soll es sich aber
   nicht von seinen Nachbarn unterscheiden: dieselbe Farbe, dieselbe
   Groesse, kein Unterstrich. */
.fewo-footer__links .fewo-einwilligung__oeffnen {
	color: var( --wp--preset--color--accent-3, #1c6b9e );
	font-size: inherit;
	text-decoration: none;
}

.fewo-footer__links .fewo-einwilligung__oeffnen:hover,
.fewo-footer__links .fewo-einwilligung__oeffnen:focus-visible {
	text-decoration: underline;
}

/* Adressblock auf der Hausseite. Mittig gesetzt, und Postleitzahl und Ort
   stehen nebeneinander statt untereinander — so, wie man eine Adresse
   schreibt. Die drei Zeilen sind je ein eigener Absatz, weil jede an ein
   eigenes Feld gebunden ist; die beiden letzten laufen deshalb per
   display: inline in einer Zeile zusammen. Das Leerzeichen dazwischen
   kommt aus dem Zeilenumbruch im Markup. */
.fewo-adresse {
	text-align: center;
}

.fewo-adresse p {
	margin: 0;
}

.fewo-adresse p:nth-of-type( 2 ),
.fewo-adresse p:nth-of-type( 3 ) {
	display: inline;
}


/* ------------------------------------------------------------------
   Hausbewusster Kopfbereich

   Logo und Telefonnummer richten sich nach dem Haus, um das es geht.
   Auf der Muenster-Hauptseite greifen die allgemeinen Werte.
   ------------------------------------------------------------------ */
/* Flex-Container, damit unter dem Link kein Grundlinien-Abstand entsteht -
   der machte die Kopfzeile sonst 8 Pixel hoeher als das Logo selbst, und
   zwar nur auf Seiten mit grossem Logo. */
.fewo-hauslogo {
	display: flex;
}

.fewo-hauslogo__link {
	align-items: center;
	display: inline-flex;
	/* Feste Zeilenhoehe, damit die Kopfleiste auf jeder Seite gleich hoch
	   ist, auch wenn das Haus-Logo kleiner gesetzt wird als das Hauptlogo. */
	min-height: var( --fewo-hauslogo-zeile, var( --fewo-hauslogo-hoehe, 56px ) );
	text-decoration: none;
}

/* Feste Hoehe statt Hoechstmass: Ein breites Banner-Logo und ein
   quadratisches Logo wirken so optisch gleich gross, und kleine Logos
   bleiben nicht unter der Zielgroesse stehen. Die Breite ergibt sich aus
   dem Seitenverhaeltnis. */
.fewo-hauslogo__img {
	display: block;
	height: var( --fewo-hauslogo-hoehe, 56px );
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.fewo-hauslogo__text {
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.3rem;
	line-height: 1.1;
}

/* Kontaktzeile: dieselbe Anmutung wie die frueheren zwei Absaetze */
.fewo-kopfkontakt {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em var( --wp--preset--spacing--30, 1rem );
}

/* Alle Eintraege der Leiste gleich aufbauen, damit sie auf einer Linie
   liegen. Telefon und E-Mail sind wegen ihres Symbols Flex-Boxen; ein
   normaler Textlink wie "Kontakt" wuerde sonst ueber die Schriftgrundlinie
   ausgerichtet und saesse drei Pixel tiefer. display:flex am Absatz nimmt
   zusaetzlich den Unterlaengen-Abstand heraus, den eine Inline-Box sonst
   unter sich reserviert. */
.fewo-kopfkontakt p {
	align-items: center;
	display: flex;
	margin: 0;
}

.fewo-kopfkontakt a {
	align-items: center;
	display: inline-flex;
	gap: 0.45em;
}

/* Leere gebundene Absaetze ausblenden.

   Der Claim im Buchungskasten haengt am Hausfeld "Ueberschrift". Ist dort
   nichts hinterlegt, erzeugt die Bindung einen leeren Absatz, der sonst
   als Luecke stehen bliebe. */
.fewo-karte__text p:empty {
	display: none;
}

/* Rueckweg zur Muenster-Uebersicht.

   Erscheint nur, wenn das Menue auf ein einzelnes Haus zusammengezogen ist.
   Bewusst zurueckhaltend gesetzt und mit einem Pfeil versehen: Er soll als
   Ausgang erkennbar sein, aber nicht mit den Wohnungen des Hauses um
   Aufmerksamkeit konkurrieren. */
.fewo-nav__item--zurueck .fewo-nav__link {
	align-items: center;
	display: inline-flex;
	gap: 0.4em;
}

.fewo-nav__item--zurueck .fewo-nav__link::before {
	content: "\2190";
	font-size: 1.05em;
	line-height: 1;
}


@media ( min-width: 782px ) {
	/* Etwas abgesetzt von den uebrigen Punkten, damit die Trennung
	   zwischen "diesem Haus" und "zurueck" sichtbar wird. */
	.fewo-nav__item--zurueck {
		border-left: 1px solid var( --wp--preset--color--accent-6, rgba( 0, 0, 0, 0.15 ) );
		margin-left: 0.4em;
		padding-left: 1.1em;
	}
}


/* ------------------------------------------------------------------
   Barrierefreiheit

   Grundlage ist WCAG 2.1 Stufe AA, wie sie das
   Barrierefreiheitsstaerkungsgesetz seit dem 28. Juni 2025 fuer
   Buchungsseiten verlangt.
   ------------------------------------------------------------------ */

/* Sichtbarer Tastatur-Fokus (WCAG 2.4.7). Mit :where() gesetzt, damit
   einzelne Bausteine die Regel bei Bedarf ueberschreiben koennen. */
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 3px solid var( --wp--preset--color--accent-3, #1c6b9e );
	outline-offset: 2px;
}

/* Auf dunklem Grund waere das dunkle Blau kaum zu sehen. */
:where( .fewo-hero, .fewo-buehne ) :where( a, button ):focus-visible {
	outline-color: #fff;
}


/* ------------------------------------------------------------------
   Knopf „Nach oben" unten rechts

   Farben aus der Palette: dunkles Blau auf Weiss erreicht 5,8:1 und liegt
   damit ueber den 3:1, die WCAG 1.4.11 fuer Bedienelemente verlangt.
   ------------------------------------------------------------------ */
.fewo-nach-oben {
	align-items: center;
	background: var( --wp--preset--color--accent-3, #1c6b9e );
	border: 2px solid var( --wp--preset--color--base, #fff );
	border-radius: 50%;
	bottom: 1.5rem;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.22 );
	color: var( --wp--preset--color--base, #fff );
	cursor: pointer;
	display: flex;
	height: 48px;
	justify-content: center;
	padding: 0;
	position: fixed;
	right: 1.5rem;
	transition: background-color 0.2s ease, transform 0.2s ease;
	width: 48px;
	z-index: 90;
}

/* 48 mal 48 Pixel ist die Groesse, die WCAG 2.2 als bequeme Trefferflaeche
   nennt - wichtig fuer Menschen mit eingeschraenkter Feinmotorik. */
.fewo-nach-oben svg {
	height: 24px;
	width: 24px;
}

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

.fewo-nach-oben:hover {
	background: var( --wp--preset--color--contrast, #202020 );
}

.fewo-nach-oben:focus-visible {
	outline: 3px solid var( --wp--preset--color--contrast, #202020 );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.fewo-nach-oben {
		transition: none;
	}
}

/* Auf schmalen Bildschirmen etwas naeher an die Ecke. */
@media ( max-width: 600px ) {
	.fewo-nach-oben {
		bottom: 1rem;
		right: 1rem;
	}
}

/* ------------------------------------------------------------------
   Selbstbedienungs-Kiosk: Landingpage

   Das Kopfbild zeigt das Regal rechts und laesst links einen hellen,
   fast leeren Raum. Genau dorthin faellt der Textkasten. Der Bildaus-
   schnitt ist deshalb nach rechts gesetzt (object-position), damit das
   Regal auch auf schmalen Schirmen im Bild bleibt und der Kasten nicht
   darueber liegt.

   Der Kasten selbst ist leicht deckend hinterlegt, wie die Buchungs-
   karte auf der Startseite: Ueber einem Foto ist das die einzige Art,
   den Kontrast verlaesslich zu halten - die Helligkeit eines Bildes
   laesst sich nicht garantieren.
   ------------------------------------------------------------------ */

.fewo-kiosk-buehne {
	align-items: center;
	display: grid;
	min-height: min( 78vh, 640px );
	overflow: hidden;
	position: relative;
}

.fewo-kiosk-buehne__bild {
	inset: 0;
	position: absolute;
}

.fewo-kiosk-buehne__bild img {
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	width: 100%;
}

/* Leichter Schleier über dem Foto: hält den Kasten und die Schrift
   lesbar, ohne das Bild zu verstecken. Links etwas dichter, weil dort
   der Kasten liegt, rechts bleibt der Kiosk gut sichtbar. */
.fewo-kiosk-buehne__bild::after {
	background: linear-gradient( 90deg, rgba( 24, 18, 10, 0.42 ) 0%, rgba( 24, 18, 10, 0.18 ) 55%, rgba( 24, 18, 10, 0.26 ) 100% );
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.fewo-kiosk-buehne__inhalt {
	margin-inline: auto;
	max-width: 1280px;
	position: relative;
	width: 100%;
}

/* Der Kasten steht links, nicht mittig. Die Constrained-Layouts von
   WordPress setzen Kindelementen margin-inline: auto — das hier
   ueberschreibt es gezielt, ohne !important. */
.fewo-kiosk-buehne__inhalt > .fewo-kiosk-kasten {
	background: rgba( 255, 255, 255, 0.88 );
	max-width: 34rem;
	padding: 2.2rem 2.4rem;
}

.fewo-kiosk-kasten h1 {
	margin: 0 0 0.35em;
}

.fewo-kiosk-kasten p {
	margin: 0 0 0.8em;
}

.fewo-kiosk-kasten ul {
	list-style: none;
	margin: 0 0 1.2em;
	padding: 0;
}

.fewo-kiosk-kasten li {
	padding-left: 1.6em;
	position: relative;
}

.fewo-kiosk-kasten li + li {
	margin-top: 0.35em;
}

.fewo-kiosk-kasten li::before {
	color: var( --wp--preset--color--accent-3, #1c6b9e );
	content: "\2713";
	font-weight: 700;
	left: 0;
	position: absolute;
}

/* Die sechs Schritte: nummeriert, aber als Raster statt als Liste */
.fewo-kiosk-schritte {
	counter-reset: schritt;
	display: grid;
	gap: 1.6rem 2.4rem;
	grid-template-columns: repeat( 3, 1fr );
	list-style: none;
	margin: 0;
	padding: 0;
}

.fewo-kiosk-schritte li {
	counter-increment: schritt;
	padding-top: 2.6rem;
	position: relative;
}

.fewo-kiosk-schritte li::before {
	align-items: center;
	background: var( --wp--preset--color--accent-1, #8fd3fe );
	border-radius: 50%;
	color: #202020;
	content: counter( schritt );
	display: flex;
	font-weight: 700;
	height: 2rem;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 2rem;
}

/* Das Video ist im Hochformat gedreht: schmal halten und mittig setzen,
   sonst füllt es die ganze Textbreite und wird bildschirmhoch. */
.fewo-kiosk-video .wp-block-video {
	margin-inline: auto;
	max-width: 22rem;
}

.fewo-kiosk-video video {
	aspect-ratio: 9 / 16;
	background: #202020;
	border-radius: 4px;
	display: block;
	width: 100%;
}

.fewo-kiosk-video figcaption {
	text-align: center;
}

/* Sortiment als Karten */
.fewo-kiosk-sortiment {
	display: grid;
	gap: 1.2rem;
	grid-template-columns: repeat( 3, 1fr );
	list-style: none;
	margin: 0;
	padding: 0;
}

.fewo-kiosk-sortiment li {
	background: var( --wp--preset--color--accent-5, #f6f3ee );
	border-radius: 4px;
	padding: 1.2rem 1.3rem;
}

.fewo-kiosk-sortiment strong {
	display: block;
	margin-bottom: 0.3em;
}

@media ( max-width: 900px ) {
	.fewo-kiosk-schritte,
	.fewo-kiosk-sortiment {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.fewo-kiosk-buehne {
		min-height: 0;
	}

	.fewo-kiosk-buehne__bild {
		position: static;
	}

	.fewo-kiosk-buehne__bild img {
		aspect-ratio: 16 / 10;
		height: auto;
	}

	.fewo-kiosk-buehne__bild::after {
		content: none;
	}

	.fewo-kiosk-buehne__inhalt > .fewo-kiosk-kasten {
		background: var( --wp--preset--color--base, #fff );
		max-width: none;
		padding: 1.6rem 0 0;
	}

	.fewo-kiosk-schritte,
	.fewo-kiosk-sortiment {
		grid-template-columns: 1fr;
	}
}

/* Produktbilder in den Sortimentskarten und im Muenster-Band.
   Alle Vorlagen sind quadratisch und freigestellt, deshalb contain statt
   cover: ein Zuschnitt wuerde Flaschenhaelse abschneiden. Der weisse
   Grund kommt vom Bild selbst, die Karte bleibt beige. */
.fewo-kiosk-sortiment li,
.fewo-kiosk-regional li {
	display: flex;
	flex-direction: column;
}

.fewo-kiosk-sortiment img,
.fewo-kiosk-regional img {
	aspect-ratio: 1;
	background: #fff;
	border-radius: 3px;
	display: block;
	height: auto;
	margin-bottom: 0.9em;
	object-fit: contain;
	width: 100%;
}

.fewo-kiosk-regional {
	display: grid;
	gap: 1.6rem;
	grid-template-columns: repeat( 3, 1fr );
	list-style: none;
	margin: 0;
	padding: 0;
}

.fewo-kiosk-regional img {
	aspect-ratio: 4 / 3;
}

.fewo-kiosk-regional strong {
	display: block;
	margin-bottom: 0.25em;
}

@media ( max-width: 900px ) {
	.fewo-kiosk-regional {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.fewo-kiosk-regional {
		grid-template-columns: 1fr;
	}
}

/* Logoleiste „Ferienhaeuser Muenster × Homebeis". Beide Logos auf
   dieselbe Hoehe, damit keins das andere erschlaegt — die Breite ergibt
   sich aus dem Seitenverhaeltnis. */
.fewo-kiosk-partner {
	gap: 1.2rem 2.4rem;
	margin-block: 0.6rem 1.6rem;
}

.fewo-kiosk-partner .fewo-kiosk-partner__logo {
	flex: 0 0 auto;
	margin: 0;
}

.fewo-kiosk-partner__logo img {
	display: block;
	height: 120px;
	width: auto;
}

.fewo-kiosk-partner__x {
	color: var( --wp--preset--color--accent-4, #6a6a6a );
	font-size: 2rem;
	line-height: 1;
	margin: 0;
}

@media ( max-width: 600px ) {
	.fewo-kiosk-partner {
		gap: 1rem 1.4rem;
	}

	.fewo-kiosk-partner__logo img {
		height: 84px;
	}
}