/**
 * Zehner Buchung Mobil - Buchungsbereich
 *
 * Das AIDA-Widget (myaida.net) bringt kein viewport-Meta und keine einzige
 * Media Query mit; es rendert intern immer mit ~980px Layoutbreite. Inline auf
 * einem Handy ist es dadurch nicht bedienbar. Unterhalb des Breakpoints tritt
 * deshalb eine eigene Buchungskarte an seine Stelle, die das System in voller
 * Breite oeffnet. Wer trotzdem inline buchen will, bekommt es in einem
 * horizontal scrollbaren Container - lesbar, statt auf Briefmarkengroesse
 * herunterskaliert.
 */

.zbm {
	--zbm-accent: #aa2118;
	--zbm-accent-dark: #8c1a13;
	--zbm-ink: #1b1b1b;
	--zbm-muted: #5f5f5f;
	--zbm-line: #e4ded9;
	--zbm-paper: #faf7f4;

	margin-block: 0;
}

/* --- Rahmen/iframe: Standardzustand ab Tablet ---------------------------- */

.zbm-card {
	display: none;
}

.zbm-frame {
	display: block;
}

.zbm-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.zbm-iframe {
	display: block;
	width: 100%;
	border: 0;
	/* Ersetzt die fest verdrahteten min-height:1200px aus dem Seiteninhalt. */
	min-height: 1240px;
}

.zbm-frame__hint {
	margin: 0 0 0.6rem;
	padding: 0.55rem 0.85rem;
	border-radius: 6px;
	background: var(--zbm-paper);
	border: 1px solid var(--zbm-line);
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--zbm-muted);
}

.zbm-frame__hint[hidden] {
	display: none;
}

/* --- Handy -------------------------------------------------------------- */

@media (max-width: 782px) {

	/* Aus dem 12px-Padding des Spalten-Blocks ausbrechen: die Karte darf die
	   volle Bildschirmbreite nutzen. Bewusst ueber negative Aussenabstaende
	   statt ueber 100vw - 100vw schliesst eine sichtbare Scrollleiste mit ein
	   und erzeugt damit selbst wieder waagerechten Ueberlauf. */
	.zbm {
		width: auto;
		margin-left: -12px;
		margin-right: -12px;
	}

	.zbm-card {
		display: block;
		box-sizing: border-box;
		margin: 0 12px;
		padding: 1.6rem 1.25rem 1.4rem;
		background: #fff;
		border: 1px solid var(--zbm-line);
		border-radius: 10px;
		box-shadow: 0 2px 14px rgba(27, 27, 27, 0.07);
		text-align: center;
	}

	.zbm-frame {
		display: none;
	}

	/* Inline-Modus: Nutzer hat bewusst "hier auf der Seite" gewaehlt. */
	.zbm.is-inline .zbm-card {
		display: none;
	}

	.zbm.is-inline .zbm-frame {
		display: block;
		padding: 0 12px;
	}

	.zbm.is-inline .zbm-scroll {
		border: 1px solid var(--zbm-line);
		border-radius: 8px;
	}

	/* Feste Breite statt Quetschung: das Widget bleibt lesbar, der Container
	   scrollt seitlich. Herunterskalieren waere bei 375px Viewport ~5px Text. */
	.zbm.is-inline .zbm-iframe {
		width: 1000px;
		max-width: none;
		min-height: 1300px;
	}
}

/* --- Buchungskarte ------------------------------------------------------- */

.zbm-card__eyebrow {
	margin: 0 0 0.35rem;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zbm-accent);
}

.zbm-card__title {
	margin: 0 0 0.7rem;
	font-family: Prata, Georgia, serif;
	font-size: 1.6rem;
	line-height: 1.2;
	color: var(--zbm-ink);
}

.zbm-card__text {
	margin: 0 0 1.35rem;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--zbm-muted);
}

.zbm-btn {
	display: block;
	padding: 0.95rem 1.1rem;
	background: var(--zbm-accent);
	color: #fff;
	font-size: 1.03rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	border-radius: 6px;
	/* Komfortabel oberhalb der 44px-Mindestgroesse fuer Touch-Ziele. */
	min-height: 56px;
	box-sizing: border-box;
}

.zbm-btn:hover,
.zbm-btn:focus {
	background: var(--zbm-accent-dark);
	color: #fff;
}

.zbm-btn__hint {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.78rem;
	font-weight: 400;
	opacity: 0.85;
}

.zbm-card__alt {
	margin: 1.5rem 0 0.6rem;
	font-size: 0.88rem;
	color: var(--zbm-muted);
}

.zbm-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.zbm-contact__item {
	flex: 1 1 42%;
	padding: 0.7rem 0.5rem;
	min-height: 44px;
	box-sizing: border-box;
	border: 1px solid var(--zbm-line);
	border-radius: 6px;
	background: var(--zbm-paper);
	color: var(--zbm-ink);
	font-size: 0.88rem;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
}

.zbm-inline-toggle {
	margin-top: 1.35rem;
	padding: 0.5rem 0.25rem;
	min-height: 44px;
	width: 100%;
	background: none;
	border: 0;
	color: var(--zbm-muted);
	font-family: inherit;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

/* --- Hero der Buchungsseite auf dem Handy kuerzen ------------------------ */

@media (max-width: 782px) {

	/* Der Kopfbereich kostet sonst rund einen ganzen Bildschirm Scrollweg,
	   bevor ueberhaupt etwas Buchbares sichtbar wird. */
	.has-zbm .wp-block-cover {
		min-height: 300px;
	}

	/* Die weisse Textbox im Hero traegt nur Titel und zwei Zeilen - sie braucht
	   keine eigene Mindesthoehe, der Inhalt bestimmt sie. */
	.has-zbm .wp-block-cover .wp-block-cover {
		min-height: 0;
	}

	/* Den Loewenanteil der Hero-Hoehe machen die Innenabstaende der beiden
	   verschachtelten Cover aus (zusammen rund 220px), nicht der Text. */
	.has-zbm .wp-block-cover {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.has-zbm .wp-block-cover .wp-block-cover {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	/* Die Abstandshalter innerhalb der Textbox sind auf dem Handy entbehrlich. */
	.has-zbm .wp-block-cover .wp-block-spacer {
		height: 8px !important;
	}

	.has-zbm .wp-block-spacer {
		height: 26px !important;
	}

	.has-zbm h1.wp-block-heading {
		font-size: 2rem;
		line-height: 1.15;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.zbm-btn,
	.zbm-contact__item {
		transition: background-color 0.15s ease;
	}
}