/**
 * Sunneschlössli — die Suchmaske [ssl_ibe_suche] mit Zeitraum-Kalender.
 *
 * EINE Quelle für alle Regeln der Maske (15.10.2026). Bis dahin standen sie in
 * ibe.css, und die Startseite lud darum das ganze Stylesheet der
 * Buchungsstrecke (117 KB roh), nur um ein Datum und zwei Auswahlfelder zu
 * zeichnen. Es blockierte das erste Bild: Lighthouse mobil 81, FCP = LCP
 * 3,4 s, LCP-Element der Hero-Untertitel. Jetzt lädt jede Seite mit dem
 * Shortcode nur diese Datei; die Buchungsseite zeigt keine Maske und lädt sie
 * nicht. Gewinn: 71 -> 46 KB gzip CSS im Kopf; FCP/LCP im echten Chrome im
 * Rauschen (A/B 15.10.2026).
 *
 * Inhalt und Reihenfolge sind 1:1 aus ibe.css übernommen, nichts an der
 * Optik geändert. Auch die var(--ibe-*)-Bezüge bleiben, wie sie waren: Die
 * Variablen gelten nur innerhalb von .ibe, auf der Startseite also nicht, und
 * genau so sah die Maske bisher aus.
 *
 * Wer hier eine Regel ergänzt, prüft die Startseite DE und EN bei 390 und
 * 1280 px mit offenem Kalender und mit Kindern (Alterszeile).
 */


/* =========================================================================
   Die Suchmaske — steht auf der Startseite und wo sonst jemand losfahren will
   ====================================================================== */
.ibe-suche {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.9rem 1.1rem;
	font-family: var(--wp--preset--font-family--mulish);
	color: var(--wp--preset--color--tannenschatten);
}
.ibe-suche-titel {
	width: 100%;
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.5rem;
}
/* box-sizing und min-width sind hier KEINE Feinheit, sondern der Unterschied
   zwischen „passt" und „laeuft aus dem Schirm" (Fund Matthias 15.09.2026,
   Handy-Startseite). Gemessen bei 393 px: Die Spalte war 169 px breit, das
   Datumsfeld darin 196 px — genau die 2 x 13,6 px Innenabstand, weil
   `width: 100%` unter content-box zur Breite ADDIERT wird. Die beiden
   Datumsfelder ueberlappten sich um 10 px, das rechte stand 8 px ueber dem
   Rand und wurde abgeschnitten. Das Gaeste-Feld war nie betroffen, weil das
   select seine Randbreite von anderswo als border-box erbt.
   `min-width: 0` dazu, weil ein Flex-Kind sonst nicht unter die eigene
   Inhaltsbreite schrumpft — die zweite Falle derselben Zeile. */
.ibe-suche,
.ibe-suche * { box-sizing: border-box; }
.ibe-suche-feld { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 9.5rem; min-width: 0; }
.ibe-suche input,
.ibe-suche select { max-width: 100%; }
.ibe-suche-feld > span {
	font-size: 0.72rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
}
.ibe-suche input,
.ibe-suche select {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 1rem;
	color: var(--wp--preset--color--tannenschatten);
	background: #FCFBF9;
	border: 1px solid rgba(74, 55, 37, 0.16);
	border-radius: 0;
	padding: 0.72rem 0.85rem;
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	min-height: 3rem;
}
.ibe-suche input:focus,
.ibe-suche select:focus {
	outline: none;
	border-color: var(--wp--preset--color--tannenschatten);
	box-shadow: 0 0 0 2px rgba(29, 48, 38, 0.10);
}
.ibe-suche-knopf {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.8rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--schnee);
	background: var(--wp--preset--color--tannenschatten);
	border: 1px solid var(--wp--preset--color--tannenschatten);
	border-radius: 0;
	padding: 0.95rem 1.7rem;
	min-height: 3rem;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color 0.2s ease;
}
/* Alter der Kinder unter der Maske (03.10.2026): eine eigene Zeile über die
   ganze Breite, erscheint nur bei Kindern. Felder schmal, weil sie nur ein
   Alter tragen. */
.ibe-suche-alter { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1.1rem; }
.ibe-suche-alter[hidden] { display: none; }
/* Ueber zwei Wochen (10.10.2026): ein ruhiger Satz unter der Maske. */
.ibe-suche-langzeit { flex: 1 1 100%; margin: 0; font-size: 0.9rem; color: var(--wp--preset--color--tannenschatten); }
.ibe-suche-langzeit[hidden] { display: none; }
.ibe-suche-alter-frage { flex: 1 1 100%; font-size: 0.9rem; color: var(--wp--preset--color--tannenschatten); }
.ibe-suche-alter .ibe-suche-alter-feld { flex: 0 1 10rem; }
.ibe-suche-alter select.ist-offen { border-bottom-color: #9b2c2c; box-shadow: inset 0 -1px 0 0 #9b2c2c; }
.ibe-suche-alter-fehler { flex: 1 1 100%; font-size: 0.85rem; color: #9b2c2c; }
.ibe-suche-alter-fehler[hidden] { display: none; }
@media (min-width: 601px) { .ibe-suche-alter { order: 2; } }
.ibe-suche-knopf:hover {
	background: var(--wp--preset--color--schloessli-holz);
	border-color: var(--wp--preset--color--schloessli-holz);
}
/* Als Band auf hellem Grund: Haarlinien oben und unten, viel Luft. */
.ibe-suche--band {
	max-width: 58rem;
	margin: 0 auto;
	padding: 1.6rem 1.2rem;
	background: rgba(244, 241, 236, 0.55);
	border-top: 1px solid rgba(74, 55, 37, 0.14);
	border-bottom: 1px solid rgba(74, 55, 37, 0.14);
}
/* Auf dunklem Grund (Hero): Beschriftungen hell, Felder bleiben Papier. */
.ibe-suche--hero { color: var(--wp--preset--color--schnee); }
.ibe-suche--hero .ibe-suche-feld > span,
.ibe-suche--hero .ibe-suche-titel { color: var(--ssl-akzent-hell-stark); }
.ibe-suche--hero .ibe-suche-alter-frage { color: inherit; }

@media (max-width: 600px) {
	.ibe-suche-knopf { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ibe-suche * { transition: none !important; }
}

/* Felder als Linie statt Kasten (aus ibe.css, Abschnitt „Felder“; dort
   gelten dieselben Werte für .ibe). Steht NACH dem Grundblock oben, wie
   bisher in der Kaskade. */
.ibe-suche input,
.ibe-suche select {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ibe-gruen);
	background: rgba(74, 55, 37, 0.028);
	border: 0;
	border-bottom: 1px solid var(--ibe-linie);
	border-radius: 2px 2px 0 0;
	padding: 0.62rem 0.85rem;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.ibe-suche select:hover {
	background: rgba(74, 55, 37, 0.05);
	border-bottom-color: var(--ibe-holz);
}

.ibe-suche input:focus,
.ibe-suche select:focus {
	outline: none;
	background: rgba(74, 55, 37, 0.05);
	border-bottom-color: var(--ibe-gruen);
	box-shadow: inset 0 -1px 0 0 var(--ibe-gruen);
}

.ibe-suche select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6l5 4.8 5-4.8' fill='none' stroke='%236B5B4A' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 0.62rem;
	padding-right: 2.1rem;
	cursor: pointer;
}
.ibe-suche select:hover { background-position: right 0.75rem 60%; }

/* =========================================================================
   Zeitraum-Kalender der Suchmaske (16.09.2026)
   Ein Feld, ein Kalender, ein Zeitraum — statt zweier Datumsfelder, die den
   Gast zwingen, zweimal dasselbe zu suchen. Die alten Felder bleiben im
   Markup und werden nur versteckt; ohne JavaScript steht die Maske wie zuvor.
   ====================================================================== */
.ibe-suche-zeitraum-feld { position: relative; flex: 2 1 16rem; }
.ibe-suche-zeitraum {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 1rem;
	text-align: left;
	line-height: 1.5;
	color: var(--wp--preset--color--tannenschatten);
	/* 27.09.2026 (Matthias: „wirkt vom Format nicht rund"): dieselbe Form wie
	   die Auswahlfelder daneben, getönte Fläche statt weißem
	   Kasten mit Rahmen. Gleiche Innenabstände, damit der Text auf einer
	   Flucht beginnt. */
	background: rgba(74, 55, 37, 0.028);
	border: 0;
	border-radius: 2px 2px 0 0;
	padding: 0.62rem 0.85rem;
	width: 100%;
	min-height: 3rem;
	transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.ibe-suche-zeitraum::before {
	content: '';
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	/* Kalenderblatt als Strichzeichnung, damit kein Bild geladen werden muss. */
	border: 1px solid currentColor;
	border-top-width: 3px;
	opacity: 0.45;
}
.ibe-suche-zeitraum:hover { background: rgba(74, 55, 37, 0.05); }
.ibe-suche-zeitraum:focus-visible {
	outline: none;
	background: rgba(74, 55, 37, 0.05);
	box-shadow: inset 0 -1px 0 0 var(--wp--preset--color--tannenschatten);
}
.ibe-suche-zeitraum-wert { color: var(--wp--preset--color--mittelgrau); }
.ibe-suche-zeitraum-wert.ist-gewaehlt { color: var(--wp--preset--color--tannenschatten); }

.ibe-suchekal {
	position: absolute;
	z-index: 300;
	top: calc(100% + 0.4rem);
	left: 0;
	width: min(34rem, calc(100vw - 2rem));
	background: var(--wp--preset--color--schnee, #FCFBF9);
	border: 1px solid rgba(74, 55, 37, 0.16);
	box-shadow: 0 18px 40px rgba(29, 48, 38, 0.14);
	padding: 0.9rem 1rem 1rem;
}
.ibe-suchekal[hidden] { display: none !important; }
.ibe-suchekal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ibe-suchekal-titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.15rem;
}
.ibe-suchekal-blatt {
	background: none;
	border: 1px solid rgba(74, 55, 37, 0.16);
	color: var(--wp--preset--color--tannenschatten);
	font-size: 1.1rem;
	line-height: 1;
	width: 2.25rem;
	height: 2.25rem;
	cursor: pointer;
}
.ibe-suchekal-blatt:hover { background: rgba(74, 55, 37, 0.06); }
.ibe-suchekal-monate { display: flex; gap: 1.4rem; margin: 0.7rem 0 0.4rem; }
.ibe-suchekal-monat { flex: 1 1 0; min-width: 0; }
.ibe-suchekal-monatname {
	margin: 0 0 0.35rem;
	font-size: 0.72rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
	text-align: center;
}
.ibe-suchekal-wochentage,
.ibe-suchekal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ibe-suchekal-wochentage span {
	font-size: 0.64rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
	text-align: center;
	padding-bottom: 0.25rem;
}
.ibe-suchekal-tag {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.85rem;
	color: var(--wp--preset--color--tannenschatten);
	background: none;
	border: 1px solid transparent;
	border-radius: 0;
	/* Fingerkuppenmass: 44 px sind auf dem Handy die Untergrenze, unter der
	   danebengetippt wird (Handbuch 3b). */
	min-height: 2.5rem;
	cursor: pointer;
}
.ibe-suchekal-tag:hover:not([disabled]) { background: rgba(74, 55, 37, 0.08); }
.ibe-suchekal-tag[disabled] { color: rgba(74, 55, 37, 0.28); cursor: default; }
.ibe-suchekal-tag.ist-dazwischen { background: rgba(29, 48, 38, 0.08); }
.ibe-suchekal-tag.ist-anreise,
.ibe-suchekal-tag.ist-abreise {
	background: var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--schnee);
}
.ibe-suchekal-fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	flex-wrap: wrap;
	border-top: 1px solid rgba(74, 55, 37, 0.12);
	padding-top: 0.7rem;
	margin-top: 0.4rem;
}
.ibe-suchekal-stand { margin: 0; font-size: 0.82rem; color: var(--wp--preset--color--mittelgrau); }
.ibe-suchekal-knoepfe { display: flex; gap: 0.6rem; }
.ibe-suchekal-loeschen,
.ibe-suchekal-fertig {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.74rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	border-radius: 0;
	padding: 0.6rem 1.1rem;
	cursor: pointer;
}
.ibe-suchekal-loeschen { background: none; border: 1px solid rgba(74, 55, 37, 0.2); color: var(--wp--preset--color--mittelgrau); }
.ibe-suchekal-fertig {
	background: var(--wp--preset--color--tannenschatten);
	border: 1px solid var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--schnee);
}
.ibe-suchekal-fertig:disabled { background: transparent; border-color: rgba(74, 55, 37, 0.2); color: var(--wp--preset--color--mittelgrau); cursor: default; }

/* Auf dem Handy ist das Blatt kein Aufklapper, sondern die Seite: Ein Kalender
   mit 44-px-Tagen passt sonst nicht neben den Rand, und ein halb sichtbares
   Blatt lädt zum Danebentippen ein. */
@media (max-width: 33.99rem) {
	.ibe-suchekal {
		position: fixed;
		inset: 0;
		width: 100%;
		max-height: 100%;
		overflow-y: auto;
		padding: 1rem 1rem 1.2rem;
		display: flex;
		flex-direction: column;
	}
	.ibe-suchekal-monate { flex-direction: column; gap: 1.2rem; }
	/* Der Fuss bleibt am unteren Rand stehen, auch wenn zwei Monate scrollen —
	   sonst muss man bis ans Ende wischen, um „Übernehmen" zu sehen. */
	.ibe-suchekal-fuss {
		position: sticky;
		bottom: 0;
		margin-top: auto;
		background: var(--wp--preset--color--schnee, #FCFBF9);
		padding-bottom: 0.3rem;
	}
	.ibe-suchekal-knoepfe { flex: 1 1 auto; }
	.ibe-suchekal-fertig { flex: 1 1 auto; }
}