/**
 * Sunneschlössli IBE — Gestaltung der Buchungsstrecke.
 *
 * Grundhaltung: Die Strecke sieht aus wie das Haus, nicht wie ein Portal.
 * Cormorant für Zahlen und Überschriften, Mulish für alles, was gelesen
 * wird; Papierfarbe statt Weiß, Haarlinien statt Kästen, kein Gold als
 * Textfarbe (CI-Manual), keine Bewegtelemente (Matthias 03.09.2026) —
 * nur die ruhigen Übergänge, die auch die übrige Seite benutzt.
 *
 * Lädt nur auf Seiten mit [ssl_ibe] oder [ssl_ibe_suche].
 */

/* [hidden] muss in dieser Strecke IMMER gewinnen. Mehrere Elemente tragen ein
   eigenes display (block, flex, grid) und blieben dadurch sichtbar, obwohl das
   JavaScript sie versteckt hatte — so stand „Preis im Detail" unter der Leiste,
   ohne dass es einen Preis gab, und der Detail-Schleier lag über der Seite. */
.ibe [hidden],
.ibe-leiste[hidden],
.ibe-leiste [hidden],
.ibe-detail[hidden] { display: none !important; }

.ibe {
	--ibe-linie: rgba(74, 55, 37, 0.16);
	--ibe-linie-fein: rgba(74, 55, 37, 0.09);
	--ibe-papier: #FCFBF9;
	--ibe-gruen: var(--wp--preset--color--tannenschatten);
	--ibe-holz: var(--wp--preset--color--schloessli-holz);
	/* Eigenes Grau statt des Theme-Mittelgraus (rgb 110,108,102): das ist
	   neutral und trifft auf warmem Creme nur 4,66:1 — bei 12 px Schrift zu
	   wenig, und ein kaltes Grau auf warmem Grund wirkt flau. Dieses hier ist
	   warm wie das Holz und kommt auf 6,6:1. Nur in der Strecke; sie ist der
	   Ort, an dem jede Zeile lesbar sein muss (Matthias, 10.09.2026). */
	--ibe-grau: #5A5248;
	font-family: var(--wp--preset--font-family--mulish);
	color: var(--wp--preset--color--tannenschatten);
	max-width: 62rem;
	margin: 0 auto;
	padding-bottom: 9rem; /* Platz für die Leiste */
}

/* ------------------------------------------------------------- Schrittleiste */
.ibe-schritte {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--ibe-linie-fein);
	counter-reset: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.ibe-schritte::-webkit-scrollbar { display: none; }
.ibe-schritt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-right: 1.6rem;
	color: var(--ibe-grau);
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ibe-schritt-nr {
	display: grid;
	place-items: center;
	width: 1.65rem; height: 1.65rem;
	border: 1px solid var(--ibe-linie);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 0.95rem;
	letter-spacing: 0;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ibe-schritt.is-da { color: var(--ibe-gruen); }
.ibe-schritt.is-da .ibe-schritt-nr {
	background: var(--ibe-gruen);
	border-color: var(--ibe-gruen);
	color: var(--wp--preset--color--schnee);
}
.ibe-schritt.is-fertig { color: var(--ibe-holz); cursor: pointer; }
.ibe-schritt.is-fertig .ibe-schritt-nr { border-color: var(--ibe-holz); color: var(--ibe-holz); }

/* ------------------------------------------------------------- Überschriften */
.ibe-h {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400;
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 0.4rem;
}
.ibe-h3 {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 700;
	font-size: 1.35rem;
	margin: 2.5rem 0 0.3rem;
}
.ibe-hilfe {
	color: var(--ibe-grau);
	font-size: 0.95rem;
	max-width: 46ch;
	margin: 0 0 1.6rem;
}

/* ------------------------------------------------------------- Gästewahl */
.ibe-gaeste {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.4rem;
	align-items: flex-end;
	margin-bottom: 2rem;
}
.ibe-feld { display: flex; flex-direction: column; gap: 0.35rem; }
.ibe-feld > span,
.ibe-feld > label {
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ibe-grau);
}
.ibe-feld input,
.ibe-feld select,
.ibe-feld textarea {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ibe-gruen);
	background: var(--ibe-papier);
	border: 1px solid var(--ibe-linie);
	border-radius: 0;
	padding: 0.7rem 0.9rem;
	min-width: 7rem;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ibe-feld 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 1l5 5 5-5' fill='none' stroke='%234A3728' stroke-width='1.3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 0.7rem;
	padding-right: 2.2rem;
}
.ibe-feld input:focus,
.ibe-feld select:focus,
.ibe-feld textarea:focus {
	outline: none;
	border-color: var(--ibe-gruen);
	box-shadow: 0 0 0 2px rgba(29, 48, 38, 0.10);
}

/* Länderauswahl mit Suche (11.09.2026): Tippfeld mit Liste darunter —
   Deutschland, Österreich, Schweiz zuoberst, dann alle anderen; Tippen
   filtert nach deutschem und englischem Namen. */
.ibe-land { position: relative; }
.ibe-land-liste {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	z-index: 5;
	margin: 0.2rem 0 0;
	padding: 0.3rem 0;
	list-style: none;
	max-height: 14rem;
	overflow-y: auto;
	background: var(--wp--preset--color--schnee);
	border: 1px solid var(--ibe-linie);
	box-shadow: 0 10px 24px rgba(29, 48, 38, 0.12);
}
.ibe-land-liste[hidden] { display: none !important; }
.ibe-land-liste li {
	padding: 0.55rem 0.9rem;
	font-size: 0.95rem;
	color: var(--ibe-gruen);
	cursor: pointer;
}
.ibe-land-liste li.is-oben { font-weight: 600; }
.ibe-land-liste li.is-trenner { padding: 0; height: 1px; background: var(--ibe-linie-fein); margin: 0.3rem 0; cursor: default; }
.ibe-land-liste li.is-aktiv,
.ibe-land-liste li:hover { background: var(--ibe-papier); }
.ibe-land-liste li.is-leer { color: var(--ibe-grau); cursor: default; font-size: 0.85rem; }
.ibe-feld-weit { width: 100%; }
.ibe-feld-klein select { min-width: 5.4rem; }
.ibe-kinderalter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.8rem;
	width: 100%;
	padding-top: 0.4rem;
}
.ibe-kinder-frage {
	width: 100%;
	font-size: 0.9rem;
	color: var(--ibe-grau);
}

/* ------------------------------------------------------------- Kalender */
.ibe-kalender {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.4rem;
}
@media (min-width: 700px) {
	.ibe-kalender { grid-template-columns: 1fr 1fr; gap: 2.4rem 3rem; }
}
.ibe-monat-name {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400;
	font-size: 1.35rem;
	margin: 0 0 0.7rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--ibe-linie-fein);
}
.ibe-wt, .ibe-tage {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.ibe-wt {
	margin-bottom: 0.3rem;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ibe-grau);
	text-align: center;
}
.ibe-tag {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-height: 3.1rem;
	padding: 0.3rem 0.1rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--mulish);
	color: var(--ibe-gruen);
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.ibe-tag-leer { visibility: hidden; }
.ibe-tag-nr { font-size: 0.98rem; line-height: 1; }
.ibe-tag-preis {
	font-size: 0.66rem;
	color: var(--ibe-grau);
	letter-spacing: 0.01em;
}
.ibe-tag:not(:disabled):hover { border-color: var(--ibe-linie); }
.ibe-tag:disabled { cursor: default; color: rgba(29, 48, 38, 0.28); }
/* Belegt: feine Schraffur, genau wie sie die Legende ankündigt — vorher stand
   dort ein Muster, das an den Tagen selbst nirgends vorkam. Dazu die
   durchgestrichene Zahl, damit es auch ohne Farbe erkennbar bleibt. */
.ibe-tag-belegt {
	color: rgba(29, 48, 38, 0.32);
	background-image: repeating-linear-gradient(
		135deg,
		transparent, transparent 3px,
		rgba(74, 55, 37, 0.13) 3px, rgba(74, 55, 37, 0.13) 4px
	);
}
.ibe-tag-belegt .ibe-tag-nr {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(29, 48, 38, 0.45);
}
/* Haus geschlossen: ruhige Fläche, keine Schrift, kein Angebot — wie in der
   Legende. */
.ibe-tag-zu {
	color: rgba(29, 48, 38, 0.22);
	background: rgba(232, 228, 220, 0.55);
}
/* Zu kurz für den Mindestaufenthalt: kein möglicher Abreisetag. */
.ibe-tag.is-gesperrt {
	color: rgba(29, 48, 38, 0.25);
	cursor: default;
	background-image: none;
}
.ibe-tag.is-drin { background: rgba(29, 48, 38, 0.07); }
.ibe-tag.is-vorschau { background: rgba(29, 48, 38, 0.045); }
.ibe-tag.is-an,
.ibe-tag.is-ab {
	background: var(--ibe-gruen);
	color: var(--wp--preset--color--schnee);
}
.ibe-tag.is-an .ibe-tag-preis,
.ibe-tag.is-ab .ibe-tag-preis { color: rgba(244, 241, 236, 0.72); }
.ibe-tag:focus-visible { outline: 2px solid var(--ibe-gruen); outline-offset: 1px; }

.ibe-kal-mehr { margin-top: 1.6rem; text-align: center; }
.ibe-mehr, .ibe-zurueck {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ibe-linie);
	padding: 0.3rem 0;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ibe-holz);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.ibe-mehr:hover, .ibe-zurueck:hover { color: var(--ibe-gruen); border-color: var(--ibe-gruen); }

.ibe-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: 1.6rem;
	font-size: 0.8rem;
	color: var(--ibe-grau);
}
.ibe-leg { display: inline-flex; align-items: center; gap: 0.4rem; }
.ibe-leg::before {
	content: "";
	width: 0.75rem; height: 0.75rem;
	border: 1px solid var(--ibe-linie);
}
.ibe-leg-frei::before { background: var(--ibe-papier); }
.ibe-leg-belegt::before {
	background-image: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(74, 55, 37, 0.13) 3px, rgba(74, 55, 37, 0.13) 4px);
	background-color: var(--ibe-papier);
}
.ibe-leg-zu::before { background: rgba(232, 228, 220, 0.55); border-color: transparent; }
.ibe-meldung {
	margin: 1rem 0 0;
	padding: 0.7rem 0.9rem;
	background: rgba(29, 48, 38, 0.05);
	border-left: 2px solid var(--ibe-gruen);
	font-size: 0.92rem;
}

/* ------------------------------------------------------------- Suiten */
.ibe-treffer { display: flex; flex-direction: column; gap: 1.2rem; }
.ibe-laedt, .ibe-leer { color: var(--ibe-grau); }
/* Die Karte richtet sich nach der SPALTE, nicht nach dem Fenster: rechts steht
   die Zusammenfassung, links bleibt entsprechend weniger Platz. Ohne das
   brach der Text bei 1500 px Fensterbreite Wort für Wort um. */
.ibe-spalte { container-type: inline-size; }
.ibe-suite {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--ibe-papier);
	border: 1px solid var(--ibe-linie-fein);
	transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
@container (min-width: 620px) {
	.ibe-suite { grid-template-columns: 12rem minmax(11rem, 1fr) minmax(15rem, 17rem); align-items: stretch; }
	.ibe-suite-bild { max-height: none; height: 100%; aspect-ratio: auto; align-self: stretch; }
	.ibe-suite-preis {
		align-items: stretch;
		text-align: right;
		border-top: 0;
		border-left: 1px solid var(--ibe-linie-fein);
	}
	.ibe-suite-nacht { text-align: right; }
	.ibe-suite-waehlen { align-self: flex-end; }
}
.ibe-suite:hover { border-color: var(--ibe-linie); }
.ibe-suite.is-gewaehlt {
	border-color: var(--ibe-gruen);
	box-shadow: inset 0 0 0 1px var(--ibe-gruen);
}
.ibe-suite.is-weg { opacity: 0.5; }
.ibe-suite-bild {
	/* 13.09.2026 (Matthias: „Bilder besser ausgerichtet"): In der gestapelten
	   Karte zeigt das Foto sein ganzes 3:2-Bild, wie der Fotograf es
	   beschnitten hat — vorher kappten max-height 12rem/9rem und 16:9 am
	   Handy oben den Luster und unten das Sofa. Nur die dreispaltige Karte
	   (Container ab 620px) streckt das Bild auf Kartenhoehe. */
	width: 100%; height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.ibe-suite-text { padding: 1.2rem 1.3rem; align-self: start; }
.ibe-suite-text h3 {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	margin: 0 0 0.2rem;
}
.ibe-suite-meta, .ibe-suite-weg {
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	color: var(--ibe-grau);
	margin: 0 0 0.6rem;
}
.ibe-suite-satz { font-size: 0.95rem; color: var(--ibe-holz); margin: 0 0 0.6rem; max-width: 40ch; }
.ibe-suite-rate {
	display: inline-block;
	margin: 0 0 0.6rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--ibe-linie);
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ibe-holz);
}
/* Aus dem Link wurde ein <button> (er öffnet das Detailfenster, statt die
   Strecke zu verlassen) — ohne Rücksetzen sah er wie ein grauer
   Browser-Knopf mit 3D-Rand aus. Er soll wie die übrigen Textlinks des
   Hauses wirken: Schrift, Haarlinie, sonst nichts. */
.ibe-suite-mehr {
	align-self: flex-start;
	margin: 0 0 0.9rem;
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ibe-linie);
	border-radius: 0;
	padding: 0 0 3px;
	margin: 0;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.8rem;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--ibe-holz);
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.ibe-suite-mehr::after { content: "›"; font-size: 1.05em; line-height: 1; }
.ibe-suite-mehr:hover { color: var(--ibe-gruen); border-color: var(--ibe-gruen); }
.ibe-suite-mehr:focus-visible { outline: 2px solid var(--ibe-gruen); outline-offset: 3px; }
.ibe-suite-preis {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.2rem;
	padding: 1rem 1.1rem;
	border-top: 1px solid var(--ibe-linie-fein);
}

.ibe-suite-summe {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.9rem;
	line-height: 1;
	color: var(--ibe-gruen);
}
.ibe-suite-nacht { font-size: 0.8rem; color: var(--ibe-grau); margin-bottom: 0.7rem; }
.ibe-suite-waehlen {
	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(--ibe-gruen);
	border: 1px solid var(--ibe-gruen);
	border-radius: 0;
	padding: 0.7rem 1.5rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.ibe-suite-waehlen:hover { background: var(--ibe-holz); border-color: var(--ibe-holz); }
.ibe-suite.is-gewaehlt .ibe-suite-waehlen {
	background: transparent;
	color: var(--ibe-gruen);
}

/* ------------------------------------------------------------- Leistungen */
.ibe-leistungen { display: flex; flex-direction: column; }
.ibe-leistung {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: 0.9rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--ibe-linie-fein);
	cursor: pointer;
}
.ibe-leistung:first-child { border-top: 1px solid var(--ibe-linie-fein); }
.ibe-leistung-cb {
	appearance: none;
	-webkit-appearance: none;
	width: 1.35rem; height: 1.35rem;
	margin-top: 0.1rem;
	border: 1px solid var(--ibe-linie);
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ibe-leistung:hover .ibe-leistung-cb:not(:checked) { border-color: var(--ibe-holz); }
.ibe-leistung-cb:checked {
	background: var(--ibe-gruen);
	border-color: var(--ibe-gruen);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.8 2.8L11 4.6' fill='none' stroke='%23F4F1EC' stroke-width='1.6'/%3E%3C/svg%3E");
	background-size: 1.05rem;
	background-position: center;
	background-repeat: no-repeat;
}
.ibe-leistung-cb:focus-visible { outline: 2px solid var(--ibe-gruen); outline-offset: 2px; }
.ibe-leistung-text { display: flex; flex-direction: column; gap: 0.15rem; }
.ibe-leistung-name { font-size: 1.02rem; }
.ibe-leistung-satz { font-size: 0.88rem; color: var(--ibe-grau); max-width: 48ch; }
.ibe-leistung-preis {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	color: var(--ibe-holz);
	white-space: nowrap;
	text-align: right;
}
.ibe-leistung.is-gewaehlt .ibe-leistung-name { color: var(--ibe-gruen); }
/* Zeilen mit Zaehler statt Kaestchen halten dieselbe Flucht — sonst steht
   ein Name weiter links als alle anderen (gesehen bei „Hund", 10.09.2026). */
.ibe-leistung-platz { width: 1.35rem; }

/* Zaehler: zwei Zeichen und eine Zahl, in der Schrift des Hauses. */
.ibe-menge {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	border: 1px solid var(--ibe-linie);
	border-radius: 2px;
	background: transparent;
}
.ibe-menge-knopf {
	appearance: none;
	border: 0;
	background: none;
	width: 1.9rem;
	height: 1.9rem;
	font-size: 1rem;
	line-height: 1;
	color: var(--ibe-holz);
	cursor: pointer;
	transition: color 0.18s ease;
}
.ibe-menge-knopf:hover:not(:disabled) { color: var(--ibe-gruen); }
.ibe-menge-knopf:disabled { color: var(--ibe-linie); cursor: default; }
.ibe-menge-knopf:focus-visible { outline: 2px solid var(--ibe-gruen); outline-offset: -2px; }
.ibe-menge-zahl {
	min-width: 1.2rem;
	text-align: center;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	color: var(--ibe-tinte, inherit);
}

/* ------------------------------------------------- Kopf: Schritte + Neustart */
.ibe-kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}
.ibe-kopf .ibe-schritte { flex: 1 1 auto; min-width: 0; }
.ibe-neu {
	flex: 0 0 auto;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ibe-linie);
	padding: 0 0 0.15rem;
	margin: 0.25rem 0 0;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ibe-grau);
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.ibe-neu:hover { color: var(--ibe-gruen); border-color: var(--ibe-gruen); }
.ibe-neu[hidden] { display: none !important; }

/* ------------------------------------------------------------- Vorlieben */
.ibe-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.9rem; }
.ibe-chip {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.88rem;
	color: var(--ibe-holz);
	background: transparent;
	border: 1px solid var(--ibe-linie);
	border-radius: 2rem;
	padding: 0.45rem 1.05rem;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ibe-chip:hover { border-color: var(--ibe-gruen); color: var(--ibe-gruen); }
.ibe-chip.is-an {
	background: var(--ibe-gruen);
	border-color: var(--ibe-gruen);
	color: var(--wp--preset--color--schnee);
}

/* ------------------------------------------------------------- Formular */
.ibe-form { max-width: 40rem; }
.ibe-formzeile { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.ibe-formzeile .ibe-feld { flex: 1 1 14rem; }
/* „Eine weitere Suite dazu?" — steht in Schritt 3 oben, damit die Mehrfachwahl
   sichtbar bleibt, ohne dem Normalfall einen Klick zu kosten (11.09.2026). */
.ibe-mehr-suiten { margin: 0 0 1.1rem; padding: 0.7rem 0.9rem; background: var(--ibe-papier); border: 1px solid var(--ibe-linie-fein); font-size: 0.92rem; color: var(--ibe-grau); }
.ibe-mehr-suiten[hidden] { display: none !important; }
.ibe-mehr-suiten-knopf { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--ibe-holz); padding: 0 0 0.1rem; margin-left: 0.3rem; font: inherit; color: var(--ibe-holz); cursor: pointer; }
.ibe-mehr-suiten-knopf:hover { color: var(--ibe-gruen); border-color: var(--ibe-gruen); }
/* Belegung je Suite: Name, darunter die beiden Zähler.
   RASTER statt Flex (15.09.2026). Mit Flex standen die Regler nie untereinander,
   weil „Erwachsene" breiter ist als „Kinder": gemessen bei 320 px Spaltenbreite
   41 px Versatz, und zwischen 360 und 430 px bis zu 287 px, weil der Suitenname
   die erste Zeile aufspannte und den Erwachsenen-Regler an den rechten Rand
   schob, während der Kinder-Regler links blieb. Betroffen war jedes Telefon.
   Die Beschriftungsspalte ist `max-content`, also genau so breit wie das
   längste Wort, und nicht eine feste Zahl: so stimmt es auch auf Englisch
   („Adults"/„Children" sind kürzer) und nach jeder Textänderung. */
.ibe-belegung {
	display: grid;
	grid-template-columns: max-content auto;
	align-items: center;
	justify-items: start;
	gap: 0.4rem 0.85rem;
	padding: 0.35rem 0;
}
.ibe-belegung + .ibe-belegung { border-top: 1px solid var(--ibe-linie-fein); }
.ibe-belegung-name { grid-column: 1 / -1; font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 1.1rem; color: var(--ibe-gruen); }
/* `display: contents` löst die Hülle auf, damit Beschriftung und Regler direkt
   im Raster sitzen und spaltenweise fluchten. */
.ibe-belegung-feld { display: contents; }
.ibe-belegung-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ibe-grau); }
/* Breite Spalte: eine Zeile wie bisher. Die Grenze ist GEMESSEN, nicht geraten.
   Der erste Versuch stand auf 30rem, weil 450 px plausibel aussahen; bei genau
   480 px griff die Zeile dann, passte aber nicht und brach wieder schief um.
   Nachgemessen in Schritten von 5 px: Sie passt erstmals bei 520 px. Mit
   Reserve für längere Suitennamen steht die Grenze auf 34rem. */
@container (min-width: 34rem) {
	.ibe-belegung { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
	.ibe-belegung-name { flex: 1 1 10rem; }
	.ibe-belegung-feld { display: inline-flex; align-items: center; gap: 0.45rem; }
}
.ibe-belegung .ibe-menge-zahl { min-width: 1.2rem; text-align: center; color: var(--ibe-gruen); }
.ibe-belegung-mehr { margin: 0.6rem 0 0; }
/* Leistungen je Suite (ab zwei Suiten): unter dem Satz je Suite eine Zeile
   mit Name und Haken bzw. Zaehler. */
.ibe-leistung-suiten { display: grid; gap: 0.35rem; margin-top: 0.55rem; }
.ibe-leistung-suite { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0.6rem; border: 1px solid var(--ibe-linie-fein); background: var(--ibe-papier); cursor: pointer; }
.ibe-leistung-suite.is-an { border-color: var(--ibe-gruen); }
.ibe-leistung-suite-name { font-size: 0.86rem; color: var(--ibe-gruen); }
.ibe-leistung-suite input[type=checkbox] { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--ibe-gruen); }
.ibe-leistung.is-je-suite .ibe-leistung-platz { width: 0; }
.ibe-formzeile .ibe-feld-breit { flex-basis: 100%; }
.ibe-formzeile .ibe-feld-schmal { flex: 0 1 8rem; }
.ibe-formzeile .ibe-feld-schmal input { min-width: 6rem; }
.ibe-form .ibe-feld-weit { display: flex; margin-bottom: 1.2rem; }
.ibe-form textarea { resize: vertical; min-height: 6rem; }
.ibe-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ibe-zustimmung {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-size: 0.9rem;
	color: var(--ibe-holz);
	margin: 1.2rem 0 1.4rem;
	cursor: pointer;
}
.ibe-zustimmung input {
	appearance: none; -webkit-appearance: none;
	width: 1.15rem; height: 1.15rem;
	margin-top: 0.1rem;
	flex: 0 0 auto;
	border: 1px solid var(--ibe-linie);
	background: var(--ibe-papier);
	cursor: pointer;
}
.ibe-zustimmung input:checked {
	background: var(--ibe-gruen);
	border-color: var(--ibe-gruen);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.8 2.8L11 4.6' fill='none' stroke='%23F4F1EC' stroke-width='1.6'/%3E%3C/svg%3E");
	background-size: 0.9rem; background-position: center; background-repeat: no-repeat;
}
.ibe-zustimmung a { color: inherit; }
.ibe-absenden {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--schnee);
	background: var(--ibe-gruen);
	border: 1px solid var(--ibe-gruen);
	border-radius: 0;
	padding: 1rem 2.2rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.ibe-absenden:hover:not(:disabled) { background: var(--ibe-holz); border-color: var(--ibe-holz); }
.ibe-absenden:disabled { opacity: 0.55; cursor: default; }
.ibe-formfehler {
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border-left: 2px solid #9B2C2C;
	background: rgba(155, 44, 44, 0.05);
	font-size: 0.92rem;
}
.ibe-formfuss { font-size: 0.85rem; color: var(--ibe-grau); margin-top: 1rem; max-width: 46ch; }

/* ------------------------------------------------------------- Leiste */
/* Deckend, nicht durchscheinend: Bei 0.97 Deckkraft schimmerte die Suitenkarte
   durch und die Leiste wirkte schmutzig grau. Kein Blur (der kostet in jedem
   Frame Rechenzeit — Befund 25.07.2026), sondern eine ruhige Fläche mit
   Haarlinie und einem Hauch Schatten. */
.ibe-leiste {
	position: fixed;
	/* 13.09.2026: --cc-hoehe kommt von consent.js, solange der Cookie-Hinweis
	   steht. Ohne das lag der Hinweis ueber Preis und Weiter-Knopf. */
	left: 0; right: 0; bottom: var(--cc-hoehe, 0px);
	z-index: 90;
	background: var(--wp--preset--color--schnee);
	border-top: 1px solid var(--ibe-linie);
	box-shadow: 0 -2px 18px rgba(29, 48, 38, 0.10);
}
.ibe-leiste-innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.4rem;
	max-width: 62rem;
	margin: 0 auto;
	padding: 0.75rem 1.2rem;
}
.ibe-leiste-text { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; }
.ibe-leiste-zeitraum { font-size: 0.95rem; }
.ibe-leiste-detail { font-size: 0.8rem; color: var(--ibe-grau); }
.ibe-leiste-preis { display: flex; flex-direction: column; align-items: flex-end; }
.ibe-leiste-summe {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--ibe-gruen);
}
.ibe-leiste-taxe { font-size: 0.74rem; color: var(--ibe-grau); }
.ibe-leiste-knoepfe { display: flex; align-items: center; gap: 1rem; }
.ibe-weiter {
	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(--ibe-gruen);
	border: 1px solid var(--ibe-gruen);
	border-radius: 0;
	padding: 0.85rem 1.8rem;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.ibe-weiter:hover:not(:disabled) { background: var(--ibe-holz); border-color: var(--ibe-holz); }
/* Deaktiviert ist kein mattgrüner Klotz, sondern ein Umriss: Er sagt „hier
   geht es weiter, sobald Sie gewählt haben", statt wie ein Fehler auszusehen. */
.ibe-weiter:disabled {
	background: transparent;
	border-color: var(--ibe-linie);
	color: var(--ibe-grau);
	cursor: default;
	opacity: 1;
}
.ibe-aufschluss-knopf {
	display: block;
	width: 100%;
	background: none;
	border: 0;
	border-top: 1px solid var(--ibe-linie-fein);
	padding: 0.55rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ibe-holz);
	cursor: pointer;
}
.ibe-aufschluss-knopf::after { content: " ▾"; }
.ibe-aufschluss-knopf.is-offen::after { content: " ▴"; }
.ibe-aufschluss {
	max-height: 46vh;
	overflow-y: auto;
	padding: 0.4rem 1.2rem 1.4rem;
	max-width: 62rem;
	margin: 0 auto;
	border-top: 1px solid var(--ibe-linie-fein);
}
.ibe-tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ibe-tabelle td { padding: 0.55rem 0; border-bottom: 1px solid var(--ibe-linie-fein); vertical-align: top; }
.ibe-pos-name { display: block; }
.ibe-pos-detail { display: block; font-size: 0.8rem; color: var(--ibe-grau); }
.ibe-pos-betrag { text-align: right; white-space: nowrap; }
.ibe-pos-summe td {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.15rem;
	border-bottom: 1px solid var(--ibe-linie);
}
.ibe-pos-taxe td { color: var(--ibe-grau); font-size: 0.85rem; border-bottom: 0; }
.ibe-hinweis { font-size: 0.82rem; color: var(--ibe-grau); margin: 0.7rem 0 0; }

/* ------------------------------------------------------------- Abschluss */
.ibe-fertig { padding: 2rem 0 4rem; }
.ibe-fertig-text { max-width: 46ch; }
.ibe-fertig-wann {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.3rem;
	color: var(--ibe-holz);
	max-width: 46ch;
}
.ibe-zu { color: var(--ibe-grau); }

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

@media (max-width: 600px) {
	.ibe-suche-knopf { width: 100%; }
	/* Die Leiste war 210 px hoch — ein Viertel des Schirms, dazu 78 px
	   Seitenkopf (gemessen 11.09.2026). Jetzt: eine Zeile Text, eine Zeile
	   Preis, eine Zeile Knöpfe, der Preis-Aufklapper als schmale Zeile. */
	.ibe-leiste-innen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.8rem; padding: 0.55rem 1rem 0.6rem; }
	.ibe-leiste-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 0.45rem; grid-column: 1; }
	.ibe-leiste-zeitraum { font-size: 0.86rem; }
	.ibe-leiste-detail { font-size: 0.76rem; }
	.ibe-leiste-preis { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 0; }
	.ibe-leiste-summe { font-size: 1.35rem; }
	.ibe-leiste-label { display: none; } /* „Gesamt" ist auf 375 px nur Breite; die Zahl steht für sich */
	.ibe-leiste-taxe { font-size: 0.68rem; }
	/* Das aufgeklappte Preisblatt: im Blatt selbst keine zweite klebende
	   Summe — sie schwebte über den Positionen (gemessen 11.09.2026). */
	.ibe-aufschluss { max-height: 42vh; }
	.ibe-aufschluss .ibe-korb-summe { position: static; box-shadow: none; background: transparent; }
	.ibe-leiste-knoepfe { grid-column: 1 / -1; display: flex; gap: 0.6rem; margin: 0.25rem 0 0; }
	/* Bis 15.09.2026 war der Knopf in Schritt 4 versteckt, weil das Formular
	   einen eigenen hat. Der lag aber 3,4 Bildschirmhöhen tiefer, und in fünf
	   Tagen hat kein einziger Gast je abgeschickt. Jetzt trägt die Leiste auch
	   dort den Weg nach vorn — mit dem längeren Wortlaut, den das Gesetz
	   verlangt, darum eine Spur kleiner und enger gesetzt. */
	.ibe-leiste-knoepfe .ibe-zurueck { flex: 0 0 auto; min-height: 2.75rem; }
	.ibe-weiter { flex: 1 1 auto; min-height: 2.75rem; padding: 0.7rem 1rem; }
	.ibe-weiter-buchen { font-size: 0.72rem; letter-spacing: 0.05em; padding: 0.7rem 0.5rem; }
	.ibe-aufschluss-knopf { padding: 0.35rem; font-size: 0.68rem; }
	.ibe-suite-waehlen { min-height: 2.75rem; }
	.ibe-neu { padding: 0.45rem 0 0.35rem; }
	.ibe { padding-bottom: 9rem; }
}
.ibe-hilfe-kurz { display: none; } /* Kurzfassung des Kalender-Hinweises, nur auf dem Handy (unten) */
/* Auf dem Handy ist das Intro nur Weg zum Inhalt — von Anfang an, nicht erst
   ab Schritt 2 (12.09.2026: Titel + fuenf Zeilen Einleitung + Cookie-Hinweis
   fuellten das erste Bild, der Kalender begann bei 676 px). Der Titel rueckt
   enger, damit die ersten Tage ueber dem Hinweis stehen. */
@media (max-width: 760px) {
	.ibe-intro, body.ibe-unterwegs .ibe-intro { display: none; }
	body.ibe-seite:not(.home) #inhalt { padding-top: calc(var(--header-h, 110px) + 0.8rem) !important; } /* Kopfzeile + wenig Luft statt + 3,2rem (style.css:104) */
	body.ibe-seite .wp-block-post-title { font-size: 2rem; margin: 0.2rem 0 0.7rem; }
	body.ibe-seite .ibe-bogen[data-bogen="1"] h2 { font-size: 1.45rem; margin: 0.6rem 0 0.3rem; }
	/* Ein Satz statt drei Zeilen: Der Gast soll im ersten Bild Tage sehen, die
	   er antippen kann. */
	.ibe-hilfe-kurz { display: inline; }
	.ibe-hilfe-lang { display: none; }
	body.ibe-seite .ibe-bogen[data-bogen="1"] { display: flex; flex-direction: column; }
	body.ibe-seite .ibe-bogen[data-bogen="1"] .ibe-hilfe { margin-bottom: 0.5rem; }
	/* BEFUND 15.09.2026 (Matthias: „in der mobilen Ansicht sieht man die
	   Personenzahl in Schritt eins nicht"): Hier stand `order: 5`, die
	   Gaestewahl lag also UNTER dem Kalender, hinter „Weitere Monate" und der
	   sechsteiligen Legende. Gemessen: auf dem iPhone bei y = 1073, also 1,3
	   Bildschirmhoehen tiefer, auf einem 360er bei 1125. Der Gast waehlt darum
	   zuerst die Tage, die Suche laeuft mit der Vorgabe zwei Erwachsene, und die
	   Personenzahl findet er erst NACH der Entscheidung. Das erklaert, warum die
	   Trefferliste „die falsche Suite" zeigte.
	   Die Absicht von damals war richtig und bleibt: Tage im ersten Bild. Darum
	   nicht zurueckgedreht, sondern die Gaestewahl flach gemacht — sie kostet so
	   rund 70 px statt 120, und der Kalender beginnt weiterhin weit oberhalb der
	   Falz. Gemessen wird beides, siehe Commit. */
	body.ibe-seite .ibe-bogen[data-bogen="1"] .ibe-gaeste {
		order: 0;
		margin: 0 0 0.9rem;
		gap: 0.5rem 1.1rem;
		align-items: flex-end;
	}
	body.ibe-seite .ibe-bogen[data-bogen="1"] .ibe-gaeste .ibe-feld { gap: 0.25rem; }
	body.ibe-seite .ibe-bogen[data-bogen="1"] .ibe-gaeste .ibe-feld > span { font-size: 0.7rem; }
}

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

/* ------------------------------------------------------------- Alternativen */
.ibe-alternativen { margin-bottom: 1.6rem; }
.ibe-alternativen .ibe-h3 { margin-top: 0; }
.ibe-alt-liste { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; }
.ibe-alt {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.2rem 1rem;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ibe-linie-fein);
	padding: 0.9rem 0.2rem;
	font-family: var(--wp--preset--font-family--mulish);
	color: inherit;
	cursor: pointer;
	transition: background-color 0.18s ease;
}
.ibe-alt:hover { background: rgba(29, 48, 38, 0.04); }
.ibe-alt-datum { font-size: 1.02rem; }
.ibe-alt-meta { grid-column: 1; font-size: 0.82rem; color: var(--ibe-grau); }
.ibe-alt-preis {
	grid-row: 1 / span 2;
	grid-column: 2;
	align-self: center;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.3rem;
	color: var(--ibe-gruen);
	white-space: nowrap;
}

/* =========================================================================
   Bühne: Schritte links, Zusammenfassung rechts
   ====================================================================== */
.ibe-buehne { display: block; }
/* Reihenfolge zählt: erst verstecken, dann im breiten Fenster zeigen — die
   umgekehrte Reihenfolge blendete den Korb wieder aus (Media Queries erhöhen
   die Spezifität nicht). */
.ibe-korb { display: none; }
@media (min-width: 1000px) {
	.ibe { max-width: 74rem; padding-bottom: 4rem; }
	.ibe-buehne {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 20.5rem;
		gap: 3rem;
		align-items: start;
	}
	.ibe-korb { display: block; }
	.ibe-leiste { display: none; } /* auf breiten Schirmen übernimmt die Spalte */
}
.ibe-korb-innen {
	position: sticky;
	top: 6.5rem;
	background: var(--ibe-papier);
	border: 1px solid var(--ibe-linie-fein);
	padding: 1.3rem 1.4rem 1.5rem;
	/* Der Kasten bleibt im Bild, auch wenn die Zusammenfassung lang wird:
	   die Liste rollt in sich, der Knopf steht immer unten. Ohne das rutschte
	   „Weiter" unter den Bildschirmrand — die Sackgasse vom 10.09.2026. */
	display: flex;
	flex-direction: column;
	/* 13.09.2026: --cc-hoehe dazu, sonst legt sich der Cookie-Hinweis genau ueber
	   den Knopf am Fuss des Kastens — dieselbe Sackgasse wie am 10.09., nur von
	   unten. Gemessen: Banner 183 px hoch, Knopf bei 775 px, Banner ab 645 px. */
	max-height: calc(100vh - 8.5rem - var(--cc-hoehe, 0px));
}
.ibe-korb-inhalt {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ibe-korb-titel {
	margin: 0 0 0.9rem;
	font-size: 0.74rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ibe-grau);
}
.ibe-korb-block { padding-bottom: 0.9rem; border-bottom: 1px solid var(--ibe-linie-fein); }
.ibe-korb-datum {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--ibe-gruen);
}
.ibe-korb-klein { display: block; font-size: 0.78rem; color: var(--ibe-grau); margin: 0.15rem 0 0; }
.ibe-korb-leer { font-size: 0.9rem; color: var(--ibe-grau); margin: 1rem 0 0; }
.ibe-korb-suite {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--ibe-linie-fein);
}
.ibe-korb-suite img { width: 4.2rem; height: 3.2rem; object-fit: cover; flex: 0 0 auto; }
.ibe-korb-suitenname {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.15rem;
	line-height: 1.15;
}
.ibe-korb-liste { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ibe-korb-liste li {
	display: flex;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.45rem 0;
	font-size: 0.88rem;
	border-bottom: 1px solid var(--ibe-linie-fein);
}
.ibe-korb-pos { display: flex; flex-direction: column; }
.ibe-korb-betrag { white-space: nowrap; }
.ibe-korb-summe {
	display: flex;
	flex-direction: column;
	padding: 0.9rem 0 0.6rem;
}
.ibe-korb-summe-label {
	font-size: 0.74rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ibe-grau);
}
.ibe-korb-summe-zahl {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 2.1rem;
	line-height: 1.05;
	color: var(--ibe-gruen);
}
.ibe-korb-taxe {
	display: flex;
	justify-content: space-between;
	gap: 0.8rem;
	margin: 0.3rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--ibe-linie-fein);
	font-size: 0.88rem;
	color: var(--ibe-holz);
}
.ibe-korb-notiz {
	margin: 0.6rem 0 0;
	padding-left: 0.7rem;
	border-left: 2px solid var(--ibe-linie);
	font-size: 0.82rem;
	color: var(--ibe-grau);
}
/* Zahlung und Storno im Korb — nicht zu verwechseln mit der Knopfleiste
   darunter, die früher denselben Namen trug und ihr das CSS nahm. */
.ibe-korb-zahlung {
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--ibe-linie-fein);
	font-size: 0.8rem;
	color: var(--ibe-grau);
}
.ibe-korb-zahlung p { margin: 0 0 0.35rem; }

/* Die Leiste zeigt am Handy dieselbe Zusammenfassung im Aufklapp-Blatt */
.ibe-leiste-label {
	display: block;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ibe-grau);
	line-height: 1;
	margin-bottom: 0.1rem;
}
.ibe-aufschluss .ibe-korb-innen { border: 0; padding: 0; }

/* =========================================================================
   Raten je Suite (Bestpreis und Pakete)
   ====================================================================== */
.ibe-raten { display: flex; flex-direction: column; width: 100%; margin-bottom: 0.5rem; }
.ibe-rate {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.9rem;
	width: 100%;
	text-align: left;
	background: none;
	border: 1px solid transparent;
	border-bottom: 1px solid var(--ibe-linie-fein);
	padding: 0.45rem 0.4rem;
	font-family: var(--wp--preset--font-family--mulish);
	color: inherit;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}
.ibe-rate:last-child { border-bottom: 0; }
.ibe-rate:hover { background: rgba(29, 48, 38, 0.04); }
.ibe-rate.is-an {
	background: rgba(29, 48, 38, 0.06);
	border-color: var(--ibe-linie);
}
.ibe-rate-text { display: flex; flex-direction: column; min-width: 0; }
.ibe-rate-name { font-size: 0.92rem; }
.ibe-rate-satz { font-size: 0.73rem; line-height: 1.3; color: var(--ibe-grau); }
.ibe-rate-preis {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.45rem;
	line-height: 1;
	color: var(--ibe-gruen);
	white-space: nowrap;
}
.ibe-rate.is-an .ibe-rate-name { color: var(--ibe-gruen); }


/* Leistungen: der Endbetrag steht groß, der Rechenweg klein darunter */
.ibe-leistung-preis { flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.ibe-leistung-summe {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.2rem;
	color: var(--ibe-gruen);
	line-height: 1;
}
.ibe-leistung-basis { font-size: 0.74rem; color: var(--ibe-grau); }

/* =========================================================================
   Suite im Detail — Fotos, Grundriss, Eckdaten, ohne die Strecke zu verlassen
   ====================================================================== */
/* [hidden] muss gewinnen — sonst liegt der Schleier über der ganzen Seite. */
.ibe-detail[hidden] { display: none !important; }
.ibe-detail {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(29, 48, 38, 0.55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 3vh 1rem;
	overflow-y: auto;
}
.ibe-detail-innen {
	position: relative;
	width: min(46rem, 100%);
	background: var(--wp--preset--color--schnee);
	padding: 2rem 1.6rem 2.4rem;
	/* 13.09.2026: Solange der Cookie-Hinweis offen ist (--cc-hoehe aus
	   consent.js), lag „Diese Suite wählen" am Fensterende unter ihm. */
	margin-bottom: var(--cc-hoehe, 0px);
}
.ibe-detail-zu {
	position: absolute;
	top: 0.4rem; right: 0.6rem;
	background: none;
	border: 0;
	font-size: 1.9rem;
	line-height: 1;
	color: var(--ibe-holz);
	cursor: pointer;
	padding: 0.3rem 0.5rem;
}
.ibe-detail-kopf h3 {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400;
	font-size: 2rem;
	margin: 0 0 0.2rem;
}
.ibe-detail-meta {
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ibe-grau);
	margin: 0 0 1.2rem;
}
.ibe-detail-galerie {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
	margin-bottom: 1.3rem;
}
@media (min-width: 620px) { .ibe-detail-galerie { grid-template-columns: 1fr 1fr; } }
.ibe-detail-galerie img { width: 100%; height: auto; display: block; }
.ibe-detail-text { max-width: 62ch; margin: 0 0 1.3rem; }
.ibe-detail-plan { margin: 0 0 1.3rem; }
.ibe-detail-plan img { width: 100%; height: auto; display: block; }
.ibe-detail-plan figcaption {
	font-size: 0.74rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ibe-grau);
	margin-top: 0.4rem;
}
.ibe-detail-eck {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1.2rem;
	margin: 0 0 1.6rem;
	font-size: 0.92rem;
}
.ibe-detail-eck dt {
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ibe-grau);
	padding-top: 0.15rem;
}
.ibe-detail-eck dd { margin: 0; }
.ibe-detail-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--ibe-linie-fein);
}
.ibe-detail-preis {
	display: block;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.8rem;
	line-height: 1;
	color: var(--ibe-gruen);
}
.ibe-detail-waehlen {
	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(--ibe-gruen);
	border: 1px solid var(--ibe-gruen);
	border-radius: 0;
	padding: 0.85rem 1.7rem;
	cursor: pointer;
}
.ibe-detail-waehlen:hover { background: var(--ibe-holz); border-color: var(--ibe-holz); }

/* Bildhöhe zuletzt: die Basisregel .ibe-suite-bild steht weiter oben in der
   Datei und schlug sonst die Container-Regel (gleiche Spezifität, später
   gewinnt) — die Karte blieb links leer, während die Ratenspalte hoch war. */
@container (min-width: 620px) {
	.ibe-suite-bild { max-height: none; height: 100%; min-height: 100%; aspect-ratio: auto; align-self: stretch; }
	.ibe-suite-preis { justify-content: flex-start; }
}

/* ------------------------------------------- Vorschlag: eine Nacht länger */
.ibe-verlaengern {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.7rem 1.4rem;
	width: 100%;
	text-align: left;
	background: rgba(29, 48, 38, 0.045);
	border: 0;
	border-left: 2px solid var(--ibe-gruen);
	padding: 1rem 1.2rem;
	margin-bottom: 1.2rem;
	font-family: var(--wp--preset--font-family--mulish);
	color: var(--ibe-holz);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.ibe-verlaengern:hover { background: rgba(29, 48, 38, 0.08); }
.ibe-verlaengern-text { flex: 1 1 22rem; font-size: 0.92rem; line-height: 1.5; }
.ibe-verlaengern-tu {
	flex: 0 0 auto;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ibe-gruen);
	border-bottom: 1px solid var(--ibe-linie);
	padding-bottom: 2px;
}

/* Angebote je Suite: am Handy zugeklappt, auf breiten Schirmen offen */
.ibe-pakete { border-top: 1px solid var(--ibe-linie-fein); }
.ibe-pakete > summary {
	list-style: none;
	cursor: pointer;
	padding: 0.6rem 0.4rem;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	color: var(--ibe-holz);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.6rem;
}
.ibe-pakete > summary::-webkit-details-marker { display: none; }
.ibe-pakete > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6rem; height: 0.6rem;
	margin-left: 0.1rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.15rem) rotate(45deg);
	transition: transform 0.25s ease;
}
.ibe-pakete[open] > summary::after { transform: translateY(0.05rem) rotate(225deg); }
.ibe-pakete-ab {
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ibe-gruen);
}
.ibe-pakete[open] .ibe-pakete-ab { display: none; }
/* Offen heißt: die Zeile bleibt als Griff sichtbar und sagt, was ein Klick
   tut („Angebote ausblenden", Text setzt das Skript) — sonst sucht man den
   Weg zurück (Matthias 11.09.2026). */
.ibe-pakete > summary:focus-visible { outline: 2px solid var(--ibe-gruen); outline-offset: 2px; }

/* Karte am Handy kompakter: eine Suite soll nicht den ganzen Schirm füllen */
@media (max-width: 700px) {
	.ibe-suite-text { padding: 1rem 1.1rem 0.8rem; }
	.ibe-suite-satz { font-size: 0.9rem; }
	.ibe-suite-preis { padding: 0.6rem 1.1rem 1rem; }
	.ibe-treffer { gap: 0.9rem; }
}

/* ------------------------------------------------- Buchungsbedingungen */
.ibe-bedingungen {
	background: var(--ibe-papier);
	border: 1px solid var(--ibe-linie-fein);
	padding: 1.3rem 1.4rem 1.1rem;
	margin: 0 0 2rem;
	max-width: 40rem;
}
.ibe-bedingungen-titel {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 700;
	font-size: 1.2rem;
}
.ibe-bedingungen-liste { margin: 0; display: grid; gap: 0.75rem; }
.ibe-bedingungen-liste dt {
	font-size: 0.72rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ibe-grau);
	margin-bottom: 0.15rem;
}
.ibe-bedingungen-liste dd {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	max-width: 60ch;
}
.ibe-bedingungen-fuss {
	margin: 1rem 0 0;
	padding-top: 0.8rem;
	border-top: 1px solid var(--ibe-linie-fein);
	font-size: 0.82rem;
	color: var(--ibe-grau);
}
.ibe-bedingungen-fuss a { color: inherit; }

/* Der sichtbare Weg an den Extras vorbei (kürzeste Strecke zur Buchung) */
.ibe-ueberspringen { margin: 1.6rem 0 0; }
.ibe-weiter-direkt {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ibe-linie);
	padding: 0.3rem 0;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ibe-holz);
	cursor: pointer;
}
.ibe-weiter-direkt:hover { color: var(--ibe-gruen); border-color: var(--ibe-gruen); }

/* Mehrere Suiten im Korb: jede mit Belegung, jede einzeln wieder wegnehmbar */
.ibe-korb-suite { position: relative; }
.ibe-korb-weg {
	position: absolute;
	top: 0.5rem; right: 0;
	background: none;
	border: 0;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--ibe-grau);
	cursor: pointer;
	padding: 0.1rem 0.3rem;
}
.ibe-korb-weg:hover { color: var(--ibe-gruen); }
.ibe-suite.is-gewaehlt .ibe-suite-waehlen {
	background: transparent;
	color: var(--ibe-gruen);
}

.ibe-suite-teil {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.15rem 0.55rem;
	background: rgba(29, 48, 38, 0.06);
	font-size: 0.75rem;
	color: var(--ibe-holz);
}

/* Schrittleiste auf schmalen Schirmen: alle vier Schritte müssen ins Bild
   passen, sonst weiß niemand, wie weit es noch ist. Namen nur beim aktiven
   Schritt — die Nummern tragen den Rest. */
@media (max-width: 560px) {
	.ibe-schritte { gap: 0; justify-content: space-between; overflow-x: visible; }
	.ibe-schritt { padding-right: 0; flex: 0 1 auto; min-width: 0; }
	.ibe-schritt-name { display: none; }
	.ibe-schritt.is-da .ibe-schritt-name {
		display: inline;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ibe-schritt::after {
		content: "";
		width: 0.9rem;
		height: 1px;
		background: var(--ibe-linie-fein);
		margin-left: 0.4rem;
		flex: 0 0 auto;
	}
	.ibe-schritt:last-child::after { display: none; }
}

/* Anrede und Titel bleiben schmal — sie sollen die Zeile nicht dominieren */
.ibe-feld-schmal { flex: 0 1 9rem; }
.ibe-feld-schmal select { min-width: 8rem; }

/* Aktionscode: da, aber leise — er soll niemanden auf die Suche nach
   Rabatten schicken, der ohne Code gekommen ist. */
.ibe-code { margin-top: 1.8rem; }
.ibe-code > summary {
	list-style: none;
	cursor: pointer;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ibe-grau);
	padding: 0.3rem 0;
}
.ibe-code > summary::-webkit-details-marker { display: none; }
.ibe-code > summary::after { content: " +"; }
.ibe-code[open] > summary::after { content: " –"; }
.ibe-code-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; margin-top: 0.6rem; }
.ibe-code-pruefen {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ibe-gruen);
	background: transparent;
	border: 1px solid var(--ibe-linie);
	border-radius: 0;
	padding: 0.75rem 1.3rem;
	cursor: pointer;
}
.ibe-code-pruefen:hover { border-color: var(--ibe-gruen); }
.ibe-code-antwort { margin: 0.6rem 0 0; font-size: 0.88rem; }
.ibe-code-antwort.is-gut { color: var(--ibe-gruen); }
.ibe-code-antwort.is-schlecht { color: #9B2C2C; }

/* Was wir von uns aus vormerken (Kinderbett bei Kleinkindern): ruhig
   hervorgehoben, nie aufdringlich — abwählbar wie alles andere. */
.ibe-leistung.is-empfohlen { background: rgba(29, 48, 38, 0.035); }
.ibe-leistung-tipp {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--ibe-linie);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ibe-holz);
	vertical-align: 0.1em;
}

/* Der Vorteil an der Rate — ruhig, aber lesbar: er ist der Grund, warum
   die höhere Zahl die bessere ist. */
.ibe-rate-vorteil {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.73rem;
	letter-spacing: 0.02em;
	color: var(--ibe-gruen);
}
.ibe-rate.is-an .ibe-rate-vorteil { color: var(--ibe-gruen); }


/* -------------------------------------------------------------------------
   Weiter und Zurück in der Spalte (nur auf breiten Schirmen, s. o.)
   ---------------------------------------------------------------------- */
.ibe-korb-fuss {
	display: none; /* auf dem Handy trägt die Leiste unten die Knöpfe */
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--ibe-linie);
}
.ibe-korb-fuss[hidden] { display: none !important; }
.ibe-korb-fuss .ibe-weiter { width: 100%; justify-content: center; }
.ibe-korb-fuss .ibe-zurueck {
	align-self: center;
	background: none;
	border: 0;
	padding: 0.2rem 0.4rem;
	font-size: 0.86rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ibe-grau);
	cursor: pointer;
}
.ibe-korb-fuss .ibe-zurueck:hover { color: var(--ibe-gruen); }
/* Erst verstecken, dann zeigen — in dieser Reihenfolge, sonst gewinnt das
   display:none von oben (Media Queries erhöhen die Spezifität nicht). */
@media (min-width: 1000px) {
	.ibe-korb-fuss { display: flex; }
}

/* =========================================================================
   Bedienelemente — eine Hand für alle
   -------------------------------------------------------------------------
   Ein Kasten mit Rahmen um jedes Feld ist die Sprache von Formularen, nicht
   die dieses Hauses. Die Website lebt von Haarlinien: also steht das Feld auf
   einer Linie, statt in einer Kiste zu sitzen. Der Grund ist eine Spur
   angehoben, damit man das Feld trotzdem als Feld erkennt; beim Hineingehen
   wird die Linie grün und der Grund heller. Nichts springt, alles gleitet.
   (Matthias, 10.09.2026: „das muss super smooth sein und darf kein Bruch in
   unserem Design sein".)
   ====================================================================== */

.ibe input[type="text"],
.ibe input[type="email"],
.ibe input[type="tel"],
.ibe input[type="number"],
.ibe input[type="search"],
.ibe select,
.ibe textarea,
.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 input::placeholder,
.ibe textarea::placeholder { color: var(--ibe-grau); opacity: 0.75; }

.ibe input[type="text"]:hover,
.ibe input[type="email"]:hover,
.ibe input[type="tel"]:hover,
.ibe select:hover,
.ibe textarea:hover,
.ibe-suche select:hover {
	background: rgba(74, 55, 37, 0.05);
	border-bottom-color: var(--ibe-holz);
}

.ibe input:focus,
.ibe select:focus,
.ibe textarea:focus,
.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);
}

/* Der Pfeil gehört zur Zeile, nicht in einen Kasten: schmaler, in Grau,
   und er rückt beim Überfahren ein Haar nach unten. */
.ibe select,
.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 select:hover,
.ibe-suche select:hover { background-position: right 0.75rem 60%; }

/* Textfeld: mitwachsende Ruhe statt Griff in der Ecke. */
.ibe textarea { resize: vertical; min-height: 6.5rem; border-radius: 2px; border: 1px solid var(--ibe-linie); }
.ibe textarea:focus { border-color: var(--ibe-gruen); box-shadow: none; }

/* Etiketten: eine Spur leiser, mit Abstand zur Zeile. */
.ibe-feld > span, .ibe-feld > label { margin-bottom: 0.1rem; }

/* Die eigene Zeile über die Fassung von oben (Kasten) stellen. */
.ibe-feld input,
.ibe-feld select,
.ibe-feld textarea { min-width: 7rem; }

/* =========================================================================
   Suitenkarten — das Bild trägt, die Zahl entscheidet
   -------------------------------------------------------------------------
   Vorher: eine breite Zeile je Suite, links eine Briefmarke, rechts vier
   offene Raten mit dreimal derselben Kleinschrift. Man sah alles und nichts.
   Jetzt: ein Gitter aus Karten, das Bild oben und gross genug, um Lust zu
   machen, darunter Name, ein Satz, der Preis und ein Knopf. Die Angebote
   liegen darunter hinter einer Zeile — wer sie will, findet sie; wer nur
   die Suite will, wird nicht damit zugestellt.
   ====================================================================== */

.ibe-treffer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 1.6rem 1.5rem;
	align-items: start;
}
.ibe-treffer > .ibe-verlaengern,
.ibe-treffer > .ibe-alternativen,
.ibe-treffer > .ibe-leer,
.ibe-treffer > .ibe-suite-weg { grid-column: 1 / -1; }
/* 13.09.2026: „belegt" mit Ausweg — der Knopf sitzt in der Zeile, nicht als Liste. */
.ibe-suite-weg .ibe-suite-weg-knopf {
	display: block; width: auto; margin: 0.35rem 0 0; padding: 0.15rem 0.6rem;
	border: 1px solid var(--ibe-linie); border-bottom: 1px solid var(--ibe-linie);
	font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ibe-holz);
	vertical-align: baseline; line-height: 1.4;
}
.ibe-suite-weg .ibe-suite-weg-knopf:hover { background: rgba(29, 48, 38, 0.06); }

.ibe-suite {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ibe-papier);
	border: 1px solid var(--ibe-linie-fein);
	border-radius: 3px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ibe-suite:hover {
	border-color: var(--ibe-linie);
	box-shadow: 0 10px 30px -22px rgba(29, 48, 38, 0.45);
}
.ibe-suite.is-gewaehlt {
	border-color: var(--ibe-gruen);
	box-shadow: 0 0 0 1px var(--ibe-gruen);
}

/* Das Bild ist ein Knopf: Wer draufsieht, will hinein. */
.ibe-suite-bildknopf {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
}
.ibe-suite-bild {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ibe-suite-bildknopf:hover .ibe-suite-bild { transform: scale(1.035); }
.ibe-suite-lupe {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.6rem 1rem 0.75rem;
	font-size: 0.74rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #F4F1EC;
	text-align: left;
	background: linear-gradient(to top, rgba(29, 48, 38, 0.72), rgba(29, 48, 38, 0));
	opacity: 0;
	transform: translateY(0.4rem);
	transition: opacity 0.28s ease, transform 0.28s ease;
}
.ibe-suite-bildknopf:hover .ibe-suite-lupe,
.ibe-suite-bildknopf:focus-visible .ibe-suite-lupe { opacity: 1; transform: none; }
/* 16.09.2026: Ein Geraet ohne Zeigegeraet kennt kein Hover, dort war der
   Hinweis NIE zu sehen. Damals stand er auf Touch fest da.
   17.09.2026, Matthias am Telefon: „jetzt steht ja zweimal Grundriss usw.,
   einmal im Bild und einmal darunter." Stimmt, seit die Karte umgebaut ist
   liegen beide Beschriftungen 30 px auseinander und sagen dasselbe.
   Von den beiden bleibt der KNOPF, nicht die Schrift auf dem Foto: Er ist auf
   jedem Geraet sichtbar, ohne Hover und ohne dass man erst wissen muesste,
   dass das Foto anklickbar ist. Das ist die Regel, die wir gestern selbst
   aufgeschrieben haben: Hover darf verstaerken, nie erklaeren. Also erklaert
   hier der Knopf, und die Schrift auf dem Foto verstaerkt es dort, wo es
   Hover gibt. Das Foto bleibt ueberall anklickbar. */
.ibe-suite-bildknopf:focus-visible { outline: 2px solid var(--ibe-gruen); outline-offset: -2px; }

.ibe-suite-koerper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.1rem 1.25rem 1.25rem;
}
.ibe-suite-koerper h3 {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.42rem;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 0.3rem;
	color: var(--ibe-gruen);
}
.ibe-suite-koerper .ibe-suite-meta {
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	color: var(--ibe-grau);
	margin: 0 0 0.65rem;
	text-transform: none;
}
.ibe-suite-koerper .ibe-suite-satz {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ibe-holz);
	margin: 0 0 1rem;
	max-width: none;
}
.ibe-suite-teil { font-size: 0.8rem; color: var(--ibe-holz); margin: -0.3rem 0 0.6rem; }

/* Preis und Knopf sitzen auf einer Linie am Fuss der Karte — dort endet
   der Blick, dort faellt die Entscheidung. */
/* BEFUND 15.09.2026 (Matthias, Telefon): Preis und Knopf stehen nebeneinander,
   und der Knopf trägt `flex: 0 0 auto`, kann also nicht schrumpfen. Beim
   Auswählen wächst seine Beschriftung von „Wählen" auf „Ausgewählt — entfernen",
   das Dreifache. Der Preis daneben bekam dann so wenig Breite, dass er Wort für
   Wort umbrach („2 / Nächte / · / 197 € / pro / Nacht"). Gemessen: bei 700 px,
   wo die Trefferliste zweispaltig wird, SIEBEN Zeilen auf 12 px Breite.
   Der Fehler war also nicht mobil, sondern überall dort, wo die Kartenspalte
   schmal wird, und er trat genau dann ein, wenn der Gast sich entschieden hat.
   `flex-wrap` plus eine Mindestbreite für den Preis: Passt beides nicht
   nebeneinander, rutscht der Knopf in die nächste Zeile, statt den Preis zu
   zerquetschen. Das hält bei jeder Breite ohne eigene Abfrage. */
.ibe-suite-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--ibe-linie-fein);
}
.ibe-suite-summe { flex: 1 1 9rem; min-width: 0; }
.ibe-suite-summe { display: flex; flex-direction: column; min-width: 0; }
.ibe-suite-zahl {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--ibe-gruen);
}
.ibe-suite-basis {
	font-size: 0.76rem;
	line-height: 1.35;
	color: var(--ibe-grau);
	margin-top: 0.25rem;
}
/* Was in der Zahl steckt (20.09.2026): eine Stufe leiser als die Basiszeile,
   damit sie erklaert und nicht mit dem Preis konkurriert. */
.ibe-suite-erklaerung {
	display: block;
	font-size: 0.74rem;
	line-height: 1.35;
	color: var(--ibe-grau);
	margin-top: 0.15rem;
	font-style: italic;
}
.ibe-suite-koerper .ibe-suite-waehlen {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.62rem 1.35rem;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #F4F1EC;
	background: var(--ibe-gruen);
	border: 1px solid var(--ibe-gruen);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.ibe-suite-koerper .ibe-suite-waehlen:hover { background: var(--ibe-holz); border-color: var(--ibe-holz); }
.ibe-suite.is-gewaehlt .ibe-suite-waehlen {
	background: transparent;
	color: var(--ibe-gruen);
	border-color: var(--ibe-gruen);
}
.ibe-suite.is-gewaehlt .ibe-suite-waehlen::after { content: " ✓"; }

/* Die Angebote: eine Zeile, die sich oeffnet — nicht vier, die schon offen sind. */
.ibe-suite-koerper .ibe-pakete {
	margin-top: 0.9rem;
	border-top: 1px solid var(--ibe-linie-fein);
	border-bottom: 0;
}
.ibe-suite-koerper .ibe-pakete > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.7rem 0 0.2rem;
	font-size: 0.82rem;
	color: var(--ibe-holz);
	cursor: pointer;
	list-style: none;
	transition: color 0.2s ease;
}
.ibe-suite-koerper .ibe-pakete > summary:hover { color: var(--ibe-gruen); }
.ibe-pakete-titel { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.ibe-suite-koerper .ibe-pakete-ab {
	display: inline !important;
	font-size: 0.76rem;
	color: var(--ibe-grau);
	white-space: nowrap;
}
.ibe-suite-koerper .ibe-raten { margin: 0.35rem 0 0; }
.ibe-suite-koerper .ibe-rate { padding: 0.6rem 0; }
.ibe-suite-koerper .ibe-rate-vorteil {
	display: block;
	font-size: 0.72rem;
	color: var(--ibe-holz);
	margin-top: 0.15rem;
}

/* Belegte Suiten: eine ruhige Zeile unter dem Gitter, kein leerer Kasten. */
p.ibe-suite-weg {
	margin: 0.2rem 0 0;
	padding: 0.55rem 0;
	font-size: 0.85rem;
	color: var(--ibe-grau);
	border-top: 1px solid var(--ibe-linie-fein);
}
.ibe-suite-weg-name { color: var(--ibe-holz); }

/* Auf schmalen Schirmen eine Karte je Zeile, Bild flacher. */
@media (max-width: 620px) {
	.ibe-treffer { grid-template-columns: 1fr; gap: 1.2rem; }
	.ibe-suite-fuss { align-items: center; }
	.ibe-suite-zahl { font-size: 1.55rem; }
	/* BEFUND 15.09.2026 (Matthias, Telefon): Preis und Knopf standen auch hier
	   nebeneinander, und der Knopf trägt `flex: 0 0 auto`, kann also nicht
	   schrumpfen. Beim Auswählen wächst seine Beschriftung von „Wählen" auf
	   „Ausgewählt — entfernen", das Dreifache. Der Preis daneben bekam so wenig
	   Breite, dass er Wort für Wort umbrach: „2 / Nächte / · / 197 € / pro /
	   Nacht". Auf dem Telefon also genau dann kaputt, wenn der Gast sich
	   entschieden hat. Darum untereinander: Preis lesbar, Knopf über die volle
	   Breite und damit ein grösseres Ziel für den Daumen. */
	.ibe-suite-fuss { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.8rem; }
	/* BEFUND 15.09.2026, selber verursacht: Oben steht `flex: 1 1 9rem` als
	   MINDESTBREITE des Preises. `flex-basis` misst aber entlang der Hauptachse,
	   und die kippt hier auf senkrecht — aus 9rem Breite wurden 144 px HÖHE.
	   Folge: ein leeres weisses Feld über dem Knopf, auf jeder Suitenkarte.
	   Darum die Angabe hier zurücknehmen; in der Spalte braucht der Preis keine
	   Mindestausdehnung, er hat die volle Breite. */
	.ibe-suite-summe { flex: 0 0 auto; }
	.ibe-suite-koerper .ibe-suite-waehlen { width: 100%; box-sizing: border-box; }
}

/* Karten gleicher Hoehe: Preis und Knopf sollen auf einer Linie liegen,
   sonst tanzt das Gitter. */
.ibe-treffer { align-items: stretch; }
.ibe-suite-koerper .ibe-pakete > summary { padding-left: 0; padding-right: 0; }
.ibe-suite-koerper .ibe-pakete-ab { font-family: inherit; font-size: 0.78rem; color: var(--ibe-grau); }
.ibe-suite-koerper .ibe-pakete[open] .ibe-pakete-ab { display: inline !important; }
.ibe-suite-basis { font-size: 0.79rem; letter-spacing: 0.01em; }

/* Belegte Suiten: kleine Schrift, keine Grossbuchstaben, eine Zeile. */
p.ibe-suite-weg { letter-spacing: 0.01em; text-transform: none; }

/* Bedingungen: zweispaltig und kompakt, damit sie informieren statt zu erschlagen. */
.ibe-form .ibe-bedingungen {
	margin: 1.6rem 0 1.2rem;
	padding: 1.1rem 1.3rem 1rem;
	background: rgba(74, 55, 37, 0.035);
	border: 0;
	border-left: 2px solid var(--ibe-linie);
	border-radius: 0 3px 3px 0;
}
.ibe-form .ibe-bedingungen-titel { font-size: 1.05rem; margin: 0 0 0.7rem; }
.ibe-form .ibe-bedingungen-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.55rem 1.6rem;
	margin: 0;
}
.ibe-form .ibe-bedingungen-liste dt {
	font-size: 0.7rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ibe-grau);
	margin: 0 0 0.15rem;
}
.ibe-form .ibe-bedingungen-liste dd {
	margin: 0 0 0.5rem;
	font-size: 0.87rem;
	line-height: 1.45;
	color: var(--ibe-holz);
}
.ibe-form .ibe-bedingungen-fuss { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--ibe-grau); }

/* Auf schmalen Schirmen nimmt „Neu beginnen" den Schritten den Platz weg —
   aus „Suite" wurde „SUI…". Dann steht es allein in der Zeile darüber. */
@media (max-width: 760px) {
	.ibe-kopf { flex-wrap: wrap; }
	.ibe-neu { order: -1; margin: 0 0 0.35rem auto; }
	.ibe-kopf .ibe-schritte { flex: 1 1 100%; }
}

/* =========================================================================
   Satz: keine Wörter, die allein in der Zeile stehen bleiben
   -------------------------------------------------------------------------
   Gemessen am 10.09.2026: „Ausführlich in den AGB und den Datenschutz-
   hinweisen." endete mit einem Punkt von 3 px Breite auf eigener Zeile, die
   Hundezeile brach nach „+ 28" und schob das € in die nächste. text-wrap
   pretty lässt den Browser die letzten Zeilen ausgleichen, balance verteilt
   kurze Titel gleichmäßig, und Geldbeträge halten ohnehin zusammen
   (geschütztes Leerzeichen in geld() bzw. ssl_ibe_geld()).
   ====================================================================== */

.ibe p,
.ibe li,
.ibe dd,
.ibe-suite-satz,
.ibe-leistung-satz,
.ibe-hilfe,
.ibe-korb-klein,
.ibe-bedingungen-fuss,
.ibe-treffer-info,
.ibe-fertig-text { text-wrap: pretty; }

.ibe h2, .ibe h3,
.ibe-suite-koerper h3,
.ibe-leistung-name,
.ibe-rate-name,
.ibe-korb-pos-name,
.ibe-h, .ibe-h3 { text-wrap: balance; }

/* Zahl und Zeichen gehören zusammen — überall dort, wo ein Betrag steht. */
.ibe-suite-zahl,
.ibe-rate-preis,
.ibe-leistung-summe,
.ibe-leistung-basis,
.ibe-korb-betrag,
.ibe-korb-summe-zahl,
.ibe-leiste-summe,
.ibe-pakete-ab,
.ibe-tag-preis,
.ibe-alt-preis { white-space: nowrap; }

/* Der Korb ist schmal: dort brechen Zeile für Zeile Beträge von ihrem Namen
   weg. Name links, Betrag rechts, beide halten ihre Spalte. */
.ibe-korb-pos-name { min-width: 0; }
.ibe-korb-klein { text-wrap: pretty; }

/* Der Korb war 281 px breit — darin zerriss jede Zeile. Etwas mehr Luft, und
   Name und Betrag halten je ihre Spalte, statt umeinander zu brechen. */
@media (min-width: 1000px) {
	.ibe-buehne { grid-template-columns: minmax(0, 1fr) 22.5rem; }
}
.ibe-korb-pos,
.ibe-korb-taxe {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
}
.ibe-korb-pos > span:first-child,
.ibe-korb-taxe > span:first-child { min-width: 0; }
.ibe-korb-taxe > span:last-child,
.ibe-korb-pos .ibe-korb-betrag { flex: 0 0 auto; white-space: nowrap; }

/* =========================================================================
   Die Summe klebt — sie darf nie im gerollten Teil verschwinden
   -------------------------------------------------------------------------
   Gefunden 10.09.2026 (Matthias, Bildschirmfoto): Mit Frühstück und zwei
   Hunden wurde die Liste länger als der Kasten, „852 €" rutschte unter den
   Fensterrand und wurde an der Rollkante halb abgeschnitten. Die wichtigste
   Zahl der Seite darf nicht das Erste sein, was verschwindet. Sie sitzt jetzt
   am Fuß des rollenden Bereichs fest, mit deckendem Grund und einer feinen
   Linie darüber, sobald darüber noch etwas liegt.
   ====================================================================== */

.ibe-korb-innen { box-sizing: border-box; }

.ibe-korb-summe {
	position: sticky;
	bottom: 0;
	z-index: 1;
	margin: 0 -0.2rem;
	padding: 0.7rem 0.2rem 0.5rem;
	background: var(--ibe-papier);
	box-shadow: 0 -0.6rem 0.8rem -0.6rem rgba(29, 48, 38, 0.10);
}
/* Gästetaxe und Vermerke gehören unter die Summe und rollen mit — die Summe
   bleibt darüber sichtbar. */
.ibe-korb-inhalt { scrollbar-width: thin; }

/* Sticky im Raster braucht Spielraum: Die Bühne stellt ihre Spalten auf
   „start", damit die Suitenliste oben beginnt — dadurch war die Korbspalte
   aber genau so hoch wie der Kasten, und ein sticky-Element ohne Weg kann
   nicht kleben. Der Korb lief deshalb beim Rollen unter die Kopfleiste
   (10.09.2026). Die Spalte bekommt die volle Höhe, der Kasten seinen Weg. */
@media (min-width: 1000px) {
	.ibe-korb { align-self: stretch; }
	.ibe-korb-innen {
		top: 9rem; /* unter der Kopfleiste, nicht darunter durch */
		max-height: calc(100vh - 11rem);
	}
}

/* „Zu kurz" ist kein Nein — der Weg dorthin steht gleich daneben. */
.ibe-zukurz { max-width: 34rem; }
.ibe-zukurz .ibe-alt { width: 100%; }

/* Ein Feld, das noch etwas braucht: die Linie wird kräftiger und warm, das
   Etikett nennt den Ton mit. Kein Rot-Alarm — ein Hinweis, kein Vorwurf. */
.ibe .is-fehler input,
.ibe input.is-fehler,
.ibe .is-fehler select,
.ibe select.is-fehler,
.ibe .is-fehler textarea {
	border-bottom-color: #A8481F;
	box-shadow: inset 0 -1px 0 0 #A8481F;
	background: rgba(168, 72, 31, 0.05);
}
.ibe .ibe-feld.is-fehler > span { color: #8E3C19; }
.ibe .ibe-zustimmung.is-fehler .ibe-leistung-cb,
.ibe .ibe-zustimmung.is-fehler input[type="checkbox"] { border-color: #A8481F; }
.ibe .ibe-zustimmung.is-fehler > span { color: #8E3C19; }
.ibe-formfehler {
	border-left: 2px solid #A8481F;
	padding: 0.6rem 0 0.6rem 0.9rem;
	margin: 0 0 1rem;
	color: #8E3C19;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Der Abschluss: die Zusammenfassung bleibt, und es geht weiter. */
.ibe-fertig-blatt {
	max-width: 30rem;
	margin: 1.8rem 0 0;
	padding: 1.2rem 1.4rem;
	background: var(--ibe-papier);
	border: 1px solid var(--ibe-linie-fein);
	border-radius: 3px;
}
.ibe-fertig-blatt .ibe-korb-fuss,
.ibe-fertig-blatt .ibe-korb-titel { display: none; }
.ibe-fertig-weiter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	margin: 1.6rem 0 0;
}
.ibe-fertig-link {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ibe-holz);
	text-decoration: none;
	border-bottom: 1px solid var(--ibe-linie);
	padding-bottom: 0.15rem;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.ibe-fertig-link:hover { color: var(--ibe-gruen); border-color: var(--ibe-gruen); }

/* =========================================================================
   Was für einen Tag gilt, steht am Tag
   -------------------------------------------------------------------------
   Le Bristol zeigt „Minimum stay required" als eigene Farbe im Raster, der
   Dorchester knickt die Ecke für „No Check-in" und „No Check-out" (beide
   angesehen am 10.09.2026). Unser Kalender kannte bisher nur frei, belegt und
   geschlossen — die drei Stellschrauben aus dem Revenue-Sheet blieben
   unsichtbar, bis jemand daraufklickte. Jetzt: eine kleine Ziffer für den
   Mindestaufenthalt, eine geknickte Ecke oben links für „keine Anreise",
   unten rechts für „keine Abreise". Zurückhaltend — der Tag bleibt lesbar.
   ====================================================================== */

.ibe-tag { position: relative; }

/* Mindestaufenthalt: die Zahl steht klein in der Ecke, wie eine Fußnote. */
.ibe-tag-marke {
	position: absolute;
	top: 0.18rem;
	right: 0.28rem;
	font-size: 0.58rem;
	line-height: 1;
	letter-spacing: 0;
	color: var(--ibe-holz);
	opacity: 0.65;
	pointer-events: none;
}
.ibe-tag-mlos { box-shadow: inset 0 -2px 0 -1px rgba(107, 79, 53, 0.30); }
.ibe-tag.is-an .ibe-tag-marke,
.ibe-tag.is-drin .ibe-tag-marke { color: inherit; opacity: 0.8; }

/* Keine Anreise: Ecke oben links. Keine Abreise: Ecke unten rechts. */
.ibe-tag-cta::before,
.ibe-tag-ctd::after {
	content: "";
	position: absolute;
	width: 0; height: 0;
	pointer-events: none;
}
.ibe-tag-cta::before {
	top: 0; left: 0;
	border-top: 0.42rem solid rgba(107, 79, 53, 0.42);
	border-right: 0.42rem solid transparent;
}
.ibe-tag-ctd::after {
	bottom: 0; right: 0;
	border-bottom: 0.42rem solid rgba(107, 79, 53, 0.42);
	border-left: 0.42rem solid transparent;
}

/* Legende: dieselben Zeichen wie im Raster, damit sie sich erklären. */
.ibe-leg-mlos::before {
	background: var(--ibe-papier);
	box-shadow: inset 0 -2px 0 -1px rgba(107, 79, 53, 0.45);
}
.ibe-leg-cta::before,
.ibe-leg-ctd::before {
	background: var(--ibe-papier);
	position: relative;
	overflow: hidden;
}
.ibe-leg-cta::before {
	background-image: linear-gradient(to bottom right, rgba(107, 79, 53, 0.5) 0 34%, transparent 34%);
}
.ibe-leg-ctd::before {
	background-image: linear-gradient(to top left, rgba(107, 79, 53, 0.5) 0 34%, transparent 34%);
}

/* ---------------------------------------------------------------------------
 * Ausführung einer Leistung zur Wahl (11.09.2026): der Christbaum kommt
 * geschmückt oder mit einer Kiste alter Kugeln. Zwei Pillen unter dem Satz,
 * erst sichtbar, wenn die Leistung gewählt ist.
 * ------------------------------------------------------------------------- */
.ibe-leistung-optionen {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	margin-top: 0.55rem;
}
.ibe-option {
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--ibe-linie, rgba(107, 79, 53, 0.35));
	border-radius: 999px;
	font-size: 0.86rem; line-height: 1.3;
	cursor: pointer;
	background: #fff;
	color: var(--ibe-holz);
}
.ibe-option input { margin: 0; accent-color: var(--ibe-holz); }
.ibe-option.is-an { border-color: var(--ibe-holz); background: var(--wp--preset--color--schnee, #f6f2ea); }
.ibe-leistung-name[for] { cursor: pointer; }
.ibe-leistung-suiten .ibe-leistung-optionen { margin: 0.2rem 0 0.5rem 0.2rem; }

/* Das Fenster muss unter Lenis und auf dem Handy wirklich scrollen. */
.ibe-detail {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

/* Programm einer Sonderrate (Weihnachten): acht Tage im Fenster. */
.ibe-programm-knopf {
	display: inline-block;
	margin: 0.2rem 0 0.9rem;
	padding: 0;
	background: none; border: 0;
	font: inherit; font-size: 0.9rem;
	color: var(--ibe-holz);
	text-decoration: underline; text-underline-offset: 0.2em;
	cursor: pointer;
}
.ibe-programm {
	list-style: none; margin: 0 0 1.4rem; padding: 0;
	display: grid; gap: 0;
}
.ibe-programm-tag {
	display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.8rem;
	padding: 0.7rem 0;
	border-top: 1px solid rgba(107, 79, 53, 0.18);
}
.ibe-programm-tag:last-child { border-bottom: 1px solid rgba(107, 79, 53, 0.18); }
.ibe-programm-tag.is-still { opacity: 0.85; }
.ibe-programm-wann { display: grid; gap: 0.1rem; align-content: start; }
.ibe-programm-datum { font-weight: 600; font-size: 0.9rem; }
.ibe-programm-zeit { font-size: 0.82rem; color: rgba(29, 48, 38, 0.7); }
.ibe-programm-was { display: grid; gap: 0.2rem; font-size: 0.92rem; line-height: 1.5; }
.ibe-programm-was strong { font-weight: 600; }
.ibe-programm-baum { padding: 0.8rem 1rem; background: var(--wp--preset--color--schnee, #f6f2ea); }
@media (max-width: 520px) {
	.ibe-programm-tag { grid-template-columns: 1fr; gap: 0.25rem; }
	.ibe-programm-wann { grid-auto-flow: column; justify-content: start; gap: 0.6rem; }
}

/* Wer schläft wo (12.09.2026): ab drei Gästen an der Suitenkarte. */
.ibe-suite-schlaf { margin: 0.1rem 0 0.6rem; font-size: 0.86rem; line-height: 1.45; padding-left: 1.1rem; position: relative; }
.ibe-suite-schlaf::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ibe-holz); opacity: 0.55; }
.ibe-suite-schlaf.is-sofa { color: var(--ibe-holz); }

/* Cookie-Hinweis und Buchung teilen sich den unteren Rand (13.09.2026).
   Am Handy rueckt die feste Leiste ueber den Hinweis (--cc-hoehe, oben bei
   .ibe-leiste). Auf breiten Schirmen sitzt der Knopf "Weiter" am Fuss der
   Korb-Spalte; dort darf der Hinweis nicht hinreichen, sonst faengt er den
   Klick ab (gemessen 13.09.: Knopf verdeckt, Buchung nicht fortsetzbar). */
@media (min-width: 62rem) {
	html.ibe-strecke #cc-banner {
		right: auto;
		margin-left: 1rem;
		margin-right: 0;
		max-width: min(64rem, calc(100vw - 25rem));
	}
	/* Schmaler heisst hoeher: auf der Buchungsseite die Kurzfassung, sonst
	   waechst der Hinweis von 183 auf 268 px und nimmt ein Drittel des Bildes. */
	html.ibe-strecke .cc-banner .cc-body-lang { display: none; }
	html.ibe-strecke .cc-banner .cc-body-kurz { display: block; }
}

/* Anschrift optional (14.09.2026): der Hinweis steht ueber den drei Feldern,
   das Wort "optional" klein hinter dem Label — damit niemand raet, was Pflicht ist. */
.ibe-formhinweis {
	grid-column: 1 / -1;
	margin: 0.2rem 0 0.6rem;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--ibe-grau);
}
.ibe-optional {
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	color: var(--ibe-grau);
	font-weight: 400;
}

/* =========================================================================
   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;
	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%;
	min-height: 3rem;
	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: 4px;
	opacity: 0.55;
}
.ibe-suche-zeitraum:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--tannenschatten);
	box-shadow: 0 0 0 2px rgba(29, 48, 38, 0.10);
}
.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; }
}

/* ------------------------------------------------------------------
   Suitenkarte auf dem Telefon: Name, Preis und Knopf vor dem Foto
   (17.09.2026, nach der Matomo-Spur um 11:30 und einer Messung am
   390er Schirm: sichtbar bis 630 px, Name lag bei 728, Preis bei 909,
   Knopf bei 968 — der Gast sah nur ein Zimmerfoto ohne Namen und
   Preis und ging zurück).
   Das Foto liegt seit heute IM Koerper, damit alles in EINER Spalte
   steht und sich per `order` umstellen laesst. Auf breiten Schirmen
   bleibt die Reihenfolge des Markups, dort aendert sich nichts ausser
   der Polsterung, die das Foto zurueckholt, damit es randlos sitzt.
   ------------------------------------------------------------------ */
/* `width: 100%` steht an der Grundregel des Bildknopfs. Solange er ein
   direktes Kind der Karte war, stimmte das. Im Koerper mit Innenabstand nicht
   mehr: Eine FESTE Breite laesst sich durch einen negativen Aussenabstand
   nicht dehnen, der zieht das Foto nur nach links. Ergebnis (17.09.2026, von
   Matthias am Telefon gesehen, dann gemessen): links buendig, rechts 41 px zu
   kurz, auf JEDER Breite. Mit `width: auto` bestimmt die Flex-Spalte die
   Breite, und die negativen Abstaende dehnen sie nach beiden Seiten. */
.ibe-suite-koerper .ibe-suite-bildknopf { width: auto; margin: -1.1rem -1.25rem 1.1rem; }

@media (max-width: 620px) {
	.ibe-suite-koerper h3,
	.ibe-suite-koerper .ibe-suite-meta,
	.ibe-suite-koerper .ibe-suite-teil,
	.ibe-suite-koerper .ibe-suite-schlaf { order: 1; }
	/* `margin-top: auto` drueckt den Fuss in der Spalte nach unten. Das ist
	   oben richtig und hier falsch: Es schoebe alles darunter aus dem Bild. */
	.ibe-suite-koerper .ibe-suite-fuss { order: 2; margin-top: 0.2rem; }
	/* 17.09.2026, Matthias: „das Bild ist jetzt zu breit, da darueber es
	   schmaler ist, das ist nicht leicht zu erfassen fuer das Auge."
	   Stimmt. Randlos ist richtig, solange das Bild OBEN sitzt: Dann ist es
	   der Deckel der Karte und hat nur eine Kante neben sich, den Kartenrand.
	   Zwischen zwei Textbloecken bekommt die Karte dadurch ZWEI linke Kanten,
	   eine bei der Schrift und eine beim Bild, und das Auge muss springen.
	   Auf dem Telefon steht das Bild darum in derselben Flucht wie Name,
	   Preis und Knopf. Auf breiten Schirmen bleibt es der Deckel und randlos. */
	.ibe-suite-koerper .ibe-suite-bildknopf { order: 3; margin: 1rem 0 0.9rem; }
	.ibe-suite-koerper .ibe-suite-satz,
	.ibe-suite-koerper .ibe-suite-mehr { order: 4; }
	.ibe-suite-koerper .ibe-programm-knopf,
	.ibe-suite-koerper .ibe-pakete { order: 5; }
	/* Das Foto darf hier flacher sein, es traegt die Karte nicht mehr. */
	.ibe-suite-bild { max-height: 190px; object-fit: cover; }
}

/* „Was ohnehin dabei ist" (18.09.2026): eine Zeile, zugeklappt. Die Strecke darf
   dadurch nicht laenger werden — darum dieselbe schlanke Machart wie beim
   Aktionscode, nur ohne Rahmen, damit daraus kein zweiter Kasten wird. */
.ibe-hausinfo { margin: 0.2rem 0 0.9rem; }
.ibe-hausinfo > summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--ibe-holz);
	padding: 0.35rem 0;
	list-style: none;
}
.ibe-hausinfo > summary::-webkit-details-marker { display: none; }
.ibe-hausinfo > summary::before { content: '+ '; opacity: 0.6; }
.ibe-hausinfo[open] > summary::before { content: '– '; }
.ibe-hausinfo > summary:hover { color: var(--ibe-gruen); }
.ibe-hausinfo-inhalt { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.3rem 0 0.2rem; }
.ibe-hausinfo-inhalt p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ibe-holz); }
.ibe-hausinfo-inhalt strong { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ibe-grau); font-weight: 600; }