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

@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. */
	background-image: var( --fewo-buehne-bild, url( "/wp-content/uploads/2026/08/xtraMuenster_2_MG_9060-scaled.jpg" ) );
	background-position: var( --fewo-buehne-position, center 40% );
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: 0;
	position: relative;
}

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

/* Adressblock auf der Hausseite */
.fewo-adresse p {
	margin: 0;
}


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