/* Albizia Angebote — dieselbe Bildsprache wie die Landingpage.
   Alle Werte hier stammen aus landing-base.css, landing-apartments.css und
   landing-ready-for-baden.css: Manrope, Weiß, das Orange #cf7e00, die
   Akzentlinie, weiche Schatten, 24/16/10 Radien. Wo die Landingpage einen
   Token hat, wird er benutzt statt kopiert. */

:root {
	--offers-ink: #171717;
	--offers-body: #2d2d2d;
	--offers-soft: #696969;
	--offers-surface: #ffffff;

	/* Warme Flächen entstehen aus dem Akzent, nicht aus einem zweiten Beige. */
	--offers-tint: rgba(207, 126, 0, 0.05);
	--offers-tint-strong: rgba(207, 126, 0, 0.1);
	--offers-tint-line: rgba(207, 126, 0, 0.18);

	--offers-line: rgba(23, 23, 23, 0.16);
	--offers-hairline: rgba(23, 23, 23, 0.08);

	--offers-accent: #cf7e00;
	/* #cf7e00 erreicht auf Weiß nur 3,1:1 und trägt damit ausschließlich große
	   Schrift. Kleine Schrift bekommt diesen dunkleren Ton (5,6:1). */
	--offers-accent-ink: #8a5000;
	--offers-accent-grad: linear-gradient(135deg, #ffa62b, #f08c00);
	--offers-accent-shadow: 0 15px 35px rgba(240, 140, 0, 0.25);
	--offers-accent-shadow-hover: 0 18px 35px rgba(240, 140, 0, 0.3);

	/* Die Blüte der Albizie: derselbe Marker, mit dem die Landingpage Wörter
	   hervorhebt — hier trägt er den Rabatt. */
	--offers-bloom: rgba(244, 143, 177, 0.45);

	--offers-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	--offers-shadow-chip: 0 4px 12px rgba(0, 0, 0, 0.06);
	--offers-shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.12);

	/* Gebrochenes Weiss: das Weiss des Heros ueber dem warmen Foto. */
	--offers-white: #fffdf9;

	--offers-radius: 24px;
	--offers-radius-md: 16px;
	--offers-radius-sm: 10px;

	--offers-shell: min(1320px, calc(100% - 64px));
	/* Die Bildspur hat eine feste Breite; die 9:16-Höhe folgt daraus.
	   Nie umgekehrt — eine aus dem Seitenverhältnis abgeleitete Breite
	   sprengt ihre Rasterspalte. */
	--offer-media-w: clamp(190px, 19vw, 300px);
	/* Die Buchungsschiene: schmal genug, dass die Geschichte daneben ihr
	   Lesemass behaelt, breit genug fuer Preis, Datum und Knopf. */
	--offer-rail: clamp(264px, 22vw, 344px);
	--offer-pad: clamp(22px, 2vw, 32px);
	--offers-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--offers-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
	scroll-behavior: smooth;
}

body.albizia-offers-page {
	margin: 0;
	background: var(--offers-surface);
	color: var(--offers-body);
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.albizia-offers-page *,
.albizia-offers-page *::before,
.albizia-offers-page *::after {
	box-sizing: border-box;
}

/* Auch die Flächen, die der Browser stellt, gehören zum Haus. */
.albizia-offers-page ::selection {
	background: var(--offers-bloom);
	color: var(--offers-ink);
}

.albizia-offers-page {
	scrollbar-color: rgba(207, 126, 0, 0.45) rgba(23, 23, 23, 0.06);
	scrollbar-width: thin;
}

.albizia-offers-page ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.albizia-offers-page ::-webkit-scrollbar-track {
	background: rgba(23, 23, 23, 0.05);
}

.albizia-offers-page ::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 999px;
	background: rgba(207, 126, 0, 0.45);
	background-clip: content-box;
}

.albizia-offers-page ::-webkit-scrollbar-thumb:hover {
	background: rgba(207, 126, 0, 0.7);
	background-clip: content-box;
}

.albizia-offers-page :focus-visible {
	outline: 2px solid var(--offers-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.albizia-offers {
	min-height: 100vh;
	padding-top: 76px;
	overflow: clip;
}

/* Hero ------------------------------------------------------------------ */

.albizia-offers__hero {
	position: relative;
	display: grid;
	place-items: end start;
	min-height: clamp(560px, calc(100svh - 76px), 820px);
	isolation: isolate;
	overflow: hidden;
}

.albizia-offers__hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: #8f887b;
}

.albizia-offers__hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
	transform: scale(1.015);
	animation: albizia-offers-hero-in 1.6s cubic-bezier(0.22, 0.68, 0.16, 1) both;
}

.albizia-offers__hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, clamp(460px, 54vw, 700px));
	justify-content: start;
	align-content: end;
	justify-self: start;
	width: 100%;
	margin-inline: 0;
	padding: 96px clamp(24px, 4vw, 64px) clamp(64px, 7vw, 104px)
		clamp(24px, 4vw, 64px);
	color: var(--offers-white);
}

/* Reine Unschaerfe hinter dem Text — kein Farbschleier, kein Rahmen. */
.albizia-offers__hero-panel {
	width: fit-content;
	max-width: 100%;
	padding: clamp(24px, 2.6vw, 36px) clamp(26px, 2.8vw, 40px)
		clamp(26px, 2.8vw, 38px);
	border-radius: 28px;
	background: transparent;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	text-shadow: 0 1px 3px rgba(20, 16, 13, 0.34);
}

.albizia-offers__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 20px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.4;
	text-transform: uppercase;
	color: rgba(255, 253, 249, 0.88);
}

.albizia-offers__eyebrow::before {
	content: "";
	width: clamp(36px, 5vw, 64px);
	height: 1px;
	background: currentColor;
	opacity: 0.75;
	transform-origin: left center;
	animation: albizia-offers-hero-rule 900ms cubic-bezier(0.22, 0.68, 0.16, 1)
		300ms both;
}

.albizia-offers__title {
	max-width: 13ch;
	margin: 0;
	font-size: clamp(2.6rem, 5vw, 4.4rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.06;
	text-wrap: balance;
}

/* Haarlinie zwischen Schlagzeile und begleitendem Text. */
.albizia-offers__lead {
	max-width: 46ch;
	margin: clamp(24px, 2.6vw, 34px) 0 0;
	padding-top: clamp(22px, 2.4vw, 30px);
	border-top: 1px solid rgba(255, 253, 249, 0.28);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 253, 249, 0.92);
}

.albizia-offers-has-js .albizia-offers__hero-panel {
	animation: albizia-offers-hero-rise 1000ms cubic-bezier(0.22, 0.68, 0.16, 1)
		160ms both;
}

.albizia-offers-has-js .albizia-offers__hero-panel > * {
	animation: albizia-offers-hero-rise 900ms cubic-bezier(0.22, 0.68, 0.16, 1)
		both;
}

.albizia-offers-has-js .albizia-offers__eyebrow {
	animation-delay: 220ms;
}

.albizia-offers-has-js .albizia-offers__title {
	animation-delay: 310ms;
}

.albizia-offers-has-js .albizia-offers__lead {
	animation-delay: 430ms;
}

.albizia-offers-has-js .albizia-offers__hero-link {
	animation-delay: 540ms;
}

.albizia-offers__hero-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 14px;
	margin-top: clamp(32px, 4vw, 48px);
	padding: 0 0 8px;
	border-bottom: 1px solid rgba(255, 253, 249, 0.4);
	color: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color 220ms ease;
}

.albizia-offers__hero-link::after {
	content: "";
	position: absolute;
	inset: auto auto -1px 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	/* Ueber die Breite waechst der Strich zwar auch, kostet dann aber je Bild
	   ein neues Layout. Gestaucht sieht er gleich aus und laeuft auf der GPU. */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms cubic-bezier(0.22, 0.68, 0.16, 1);
}

.albizia-offers__hero-link:hover::after,
.albizia-offers__hero-link:focus-visible::after {
	transform: scaleX(1);
}

.albizia-offers__hero-link svg,
.albizia-offers__closing-link svg,
.albizia-offer__cta svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s var(--offers-ease);
}

.albizia-offers__hero-link svg {
	stroke-width: 1.7;
	animation: albizia-offers-hero-cue 2.6s ease-in-out 1.6s infinite;
}

.albizia-offers__hero-link:hover svg,
.albizia-offers__hero-link:focus-visible svg {
	animation: none;
	transform: translateY(3px);
}

/* Sektionen -------------------------------------------------------------- */

.albizia-offers__accent-line {
	width: 100%;
	height: 3px;
	border-radius: 12px;
	background: var(
		--albizia-line-gradient,
		linear-gradient(
			90deg,
			rgba(207, 126, 0, 0) 0%,
			rgba(207, 126, 0, 0.75) 12%,
			#cf7e00 50%,
			rgba(207, 126, 0, 0.75) 88%,
			rgba(207, 126, 0, 0) 100%
		)
	);
}

.albizia-offers__collection {
	width: var(--offers-shell);
	margin: 0 auto;
	padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
	scroll-margin-top: 76px;
}

.albizia-offers__collection-header {
	margin-bottom: clamp(1.6rem, 3.4vw, 2.6rem);
	text-align: center;
}

.albizia-offers__collection-header h2 {
	margin: 0 0 0.5rem;
	font-size: var(--albizia-heading-xl, clamp(2rem, 3.6vw, 3.2rem));
	font-weight: 600;
	color: var(--offers-ink);
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	text-wrap: balance;
}

.albizia-offers__list {
	display: grid;
	gap: clamp(1.4rem, 2.8vw, 2.2rem);
}

/* Angebotskarte ---------------------------------------------------------- */

/* Drei Spuren, zwei Zeilen: links das Bild, in der Mitte die Geschichte samt
   Eckdaten, rechts die Buchungsschiene. Der Preis steht damit auf der Hoehe
   des Titels statt unter dem Fliesstext, und die Karte wird rund ein Drittel
   niedriger als mit der Leiste am Boden. */
.albizia-offer {
	--offer-cols: clamp(186px, 17vw, 252px) minmax(0, 1fr) var(--offer-rail);
	display: grid;
	grid-template-columns: var(--offer-cols);
	/* Die Schiene laeuft ueber beide Zeilen. Ohne diese Vorgabe verteilt das
	   Raster ihre Ueberlaenge auf beide Zeilen und schiebt die Eckdaten in der
	   Mitte grundlos nach unten; so bekommt nur die zweite Zeile den Rest. */
	grid-template-rows: auto 1fr;
	align-items: start;
	gap: clamp(16px, 1.6vw, 22px) var(--offer-pad);
	padding: var(--offer-pad);
	border: 1px solid var(--offers-hairline);
	border-radius: var(--offers-radius);
	background: var(--offers-surface);
	box-shadow: var(--offers-shadow);
	overflow: hidden;
	transition: box-shadow 0.35s var(--offers-ease),
		transform 0.35s var(--offers-ease);
}

/* Querformatige Uploads brauchen Breite, nicht Höhe, um überhaupt zu wirken. */
.albizia-offer--wide {
	--offer-cols: clamp(230px, 22vw, 330px) minmax(0, 1fr) var(--offer-rail);
}

.albizia-offer:hover {
	transform: translateY(-2px);
	box-shadow: var(--offers-shadow-lift);
}

/* Das Bild traegt die linke Spur ueber beide Textzeilen. Hochformate werden
   eingepasst, Querformate fuellen — beschnitten wird nur, was als Foto
   ohnehin weiterlebt. */
.albizia-offer__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--offer-ratio, 9 / 16);
	margin: 0;
	border-radius: var(--offers-radius-md);
	background: var(--offers-tint);
	overflow: hidden;
}

/* Absolut, damit die Spur das gedehnte Bildfeld füllt, ohne Höhenkette. */
.albizia-offer__track {
	position: absolute;
	inset: 0;
	display: flex;
	transition: transform 620ms var(--offers-ease-out);
}

.albizia-offer__slide {
	position: relative;
	flex: 0 0 100%;
	overflow: hidden;
}

.albizia-offer__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.albizia-offer--wide .albizia-offer__image {
	object-fit: cover;
}

.albizia-offer__nav {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(23, 23, 23, 0.08);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--offers-ink);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	box-shadow: var(--offers-shadow-chip);
	transition: opacity 260ms var(--offers-ease),
		background-color 200ms var(--offers-ease);
}

.albizia-offer__nav--prev {
	left: 10px;
}

.albizia-offer__nav--next {
	right: 10px;
}

.albizia-offer__media:hover .albizia-offer__nav,
.albizia-offer__nav:focus-visible {
	opacity: 1;
}

.albizia-offer__nav:hover {
	background: #ffffff;
}

.albizia-offer__nav svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Dieselben Punkte wie unter den Slidern der Landingpage, nur auf hellem Chip. */
.albizia-offer__dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--offers-shadow-chip);
	transform: translateX(-50%);
}

.albizia-offer__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 1px solid rgba(23, 23, 23, 0.2);
	border-radius: 50%;
	background: rgba(23, 23, 23, 0.2);
	cursor: pointer;
	line-height: 1;
	transition: background-color 220ms var(--offers-ease),
		border-color 220ms var(--offers-ease), transform 220ms var(--offers-ease);
}

.albizia-offer__dot.is-active {
	background: var(--offers-ink);
	border-color: var(--offers-ink);
	transform: scale(1.25);
}

/* Zeitraum und Merkmale: eine Zeile, in der die Datumsfelder und die Chips
   nebeneinander laufen. Die Box wohnt im Textblock und steht auf dem Desktop
   an dessen Spitze, noch ueber dem Titel; ihre Platzierung im Kartenraster
   regelt je Breite die Media-Query unten. */
.albizia-offer__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	min-width: 0;
}

.albizia-offer__summary > .albizia-offer__facts {
	flex: 0 1 auto;
	min-width: 240px;
}

.albizia-offer__summary > .albizia-offer__meta {
	flex: 1 1 auto;
}

/* Das Bild behaelt sein eigenes Seitenverhaeltnis, statt sich auf die Hoehe
   der Schiene zu strecken: gestreckt liefe es unter object-fit: contain in
   breite graue Balken hinaus. Der Deckel faengt extreme Hochformate ab. */
.albizia-offer__media {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	height: auto;
	min-height: 0;
	max-height: 520px;
}

.albizia-offer__content {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-width: 0;
}

/* Die Buchungsschiene: die rechte Spur der Karte. Oben, was es kostet —
   unten, womit man es bucht. Sie laeuft ueber beide Textzeilen, damit die
   Zahl neben dem Titel steht und nicht am Ende einer Scrollstrecke. */
.albizia-offer > .albizia-offer__action {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	margin-top: 0;
	padding: clamp(18px, 1.5vw, 24px);
	border: 1px solid var(--offers-tint-line);
	border-radius: 20px;
	background: var(--offers-tint);
}

/* Der Buchungsteil sinkt ans untere Ende der Schiene. So endet die Karte auf
   beiden Seiten auf derselben Linie. */
.albizia-offer > .albizia-offer__action > .albizia-offer__form {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	padding: 14px 0 0;
	border: 0;
	border-top: 1px solid var(--offers-tint-line);
	border-radius: 0;
	background: transparent;
}

.albizia-offer > .albizia-offer__action .albizia-offer__form-hint {
	margin-top: 8px;
	padding-top: 0;
}

/* Fixtermin: statt des Formulars steht hier der Knopf. Er bleibt beim Preis
   und wird nicht ans untere Ende geschoben — dazwischen stuende sonst bei
   kurzen Angeboten ein leeres Feld. */
.albizia-offer > .albizia-offer__action > .albizia-offer__cta {
	margin-top: 0;
}

.albizia-offer > .albizia-offer__action > .albizia-offer__rate-hint {
	margin: 0;
}

/* In der Schiene stehen die beiden Felder untereinander. Nebeneinander
   passten sie in keine Spur, die neben der Geschichte noch Platz laesst:
   ein natives Datumsfeld schneidet unter 150px die Jahreszahl ab. */
.albizia-offer > .albizia-offer__action .albizia-offer__date-fields {
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	align-items: stretch;
}

/* Die Karte ist breit, das Lesemaß ist es nicht. */
.albizia-offer__title {
	max-width: 24ch;
}

.albizia-offer__excerpt {
	max-width: 46ch;
}

.albizia-offer__description {
	max-width: 56ch;
}

/* Redakteure legen Fotos in den Fließtext; sie bleiben ein Nebendetail. */
.albizia-offer__description img {
	max-width: 100%;
	max-height: 150px;
	width: auto;
	height: auto;
	margin: 10px 0;
	border-radius: var(--offers-radius-sm);
	object-fit: cover;
}

.albizia-offer__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
}

/* Art und Auszeichnung sind Marken wie die Ausstattungs-Chips der Apartments. */
.albizia-offer__kind,
.albizia-offer__badge {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--offers-line);
	border-radius: 12px;
	background: #ffffff;
	color: var(--offers-ink);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: var(--offers-shadow-chip);
}

.albizia-offer__badge {
	border-color: var(--offers-tint-line);
	background: var(--offers-tint);
	color: var(--offers-accent-ink);
}

.albizia-offer__title {
	margin: 0;
	font-size: clamp(1.35rem, 2.1vw, 1.75rem);
	font-weight: 600;
	color: var(--offers-ink);
	letter-spacing: -0.012em;
	line-height: 1.2;
	text-wrap: balance;
}

.albizia-offer__excerpt {
	margin: 0.7rem 0 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--offers-body);
}

.albizia-offer__description {
	margin-top: 0.6rem;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--offers-soft);
}

.albizia-offer__description > :first-child {
	margin-top: 0;
}

.albizia-offer__description > :last-child {
	margin-bottom: 0;
}

/* Das Skript berechnet auf dem Desktop, wie viele Zeilen exakt in die
   Kartenhoehe passen. Ohne Skript steht der Text vollstaendig da. */
.albizia-offer__description.is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--offer-description-lines, 5);
	overflow: hidden;
}

.albizia-offer__more {
	align-self: flex-start;
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--offers-accent-ink);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 180ms var(--offers-ease);
}

.albizia-offer__more:hover {
	color: var(--offers-ink);
}

.albizia-offer__more[hidden] {
	display: none;
}

/* Getoent ist auf der Karte nur noch die Schiene. Der Zeitraum traegt
   dieselbe helle Kontur wie die Chips, neben denen er steht. */
.albizia-offer__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 0;
	border: 1px solid var(--offers-line);
	border-radius: var(--offers-radius-md);
	background: #ffffff;
	box-shadow: var(--offers-shadow-chip);
	overflow: hidden;
}

.albizia-offer__fact {
	display: grid;
	gap: 4px;
	padding: 12px 15px 13px;
}

.albizia-offer__fact + .albizia-offer__fact {
	border-left: 1px solid var(--offers-hairline);
}

.albizia-offer__fact span {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--offers-soft);
}

.albizia-offer__fact strong {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--offers-ink);
	font-variant-numeric: tabular-nums;
}

/* Eckdaten als Chips — dieselbe Form wie die Ausstattungsmerkmale. */
.albizia-offer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.albizia-offer__meta li {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--offers-line);
	border-radius: 12px;
	background: #ffffff;
	color: var(--offers-ink);
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.2;
	box-shadow: var(--offers-shadow-chip);
}

.albizia-offer__footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin: 0;
}

.albizia-offer__footer .albizia-offer__price,
.albizia-offer__footer .albizia-offer__cta {
	margin: 0;
}

.albizia-offer__pricing {
	display: grid;
	gap: 4px;
}

.albizia-offer__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0;
	font-weight: 600;
	color: var(--offers-ink);
}

.albizia-offer__price-value {
	font-size: clamp(1.6rem, 2.2vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.albizia-offer__price-unit {
	flex-basis: 100%;
	margin-top: 1px;
}

.albizia-offer__price-unit,
.albizia-offer__price-from {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--offers-soft);
}

.albizia-offer__price-compare {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0;
	font-size: 0.88rem;
	color: var(--offers-soft);
	font-variant-numeric: tabular-nums;
}

.albizia-offer__price-compare s {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* Die Zahl, an der Gäste vergleichen — sie bekommt den Blütenmarker, mit dem
   die Landingpage Wörter hervorhebt. */
.albizia-offer__saving {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--offers-bloom);
	color: var(--offers-ink);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}

.albizia-offer__saving--small {
	padding: 2px 8px;
	font-size: 0.7rem;
}

.albizia-offer__saving-note {
	margin: 0;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--offers-accent-ink);
	font-variant-numeric: tabular-nums;
}

/* Eine Zeile je Apartment, sobald sich die Preise unterscheiden. Fuenf
   Zeilen machen die Schiene laenger als die halbe Karte, also stehen sie
   hinter einem Aufklapper — wer vergleichen will, findet sie, wer nur den
   Preis sucht, wird nicht damit aufgehalten. */
.albizia-offer__rooms-box {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--offers-hairline);
}

.albizia-offer__rooms-box > summary {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--offers-accent-ink);
	cursor: pointer;
	list-style: none;
}

.albizia-offer__rooms-box > summary::-webkit-details-marker {
	display: none;
}

.albizia-offer__rooms-box > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 200ms var(--offers-ease);
}

.albizia-offer__rooms-box[open] > summary::after {
	transform: translateY(1px) rotate(-135deg);
}

.albizia-offer__rooms {
	display: grid;
	gap: 6px;
	margin: 10px 0 0;
}

.albizia-offer__room {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}

.albizia-offer__room dt {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--offers-soft);
}

.albizia-offer__room dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.85rem;
	color: var(--offers-soft);
	font-variant-numeric: tabular-nums;
}

.albizia-offer__room dd strong {
	font-size: 1rem;
	font-weight: 700;
	color: var(--offers-ink);
}

/* Zahlung und Storno. Bewusst keine graue Fußnote — der Gast muss sie sehen,
   bevor er klickt, nicht erst im Buchungssystem. Sie stehen unter den
   Eckdaten und nicht in der Schiene: dort waren sie der Teil, der den
   Buchungsblock ueber die Kartenhoehe hinaus wachsen liess. */
.albizia-offer__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0;
	padding: 10px 0 0;
	border: 0;
	border-top: 1px solid var(--offers-hairline);
	background: transparent;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--offers-body);
}

.albizia-offer__summary > .albizia-offer__terms {
	flex: 1 0 100%;
}

.albizia-offer__terms-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.9;
	text-transform: uppercase;
	color: var(--offers-accent-ink);
}

.albizia-offer__rate-hint {
	margin: 10px 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--offers-accent-ink);
}

.albizia-offer__price-note,
.albizia-offer__price-hint {
	margin: 2px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--offers-soft);
}

/* Der Knopf der Landingpage, unverändert übernommen. */
.albizia-offer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 48px;
	margin-top: 0;
	padding: 0.9rem 1.8rem;
	border: none;
	border-radius: var(--offers-radius-md);
	background: var(--offers-accent-grad);
	color: #ffffff;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--offers-accent-shadow);
	transition: transform 0.2s var(--offers-ease),
		box-shadow 0.2s var(--offers-ease), filter 0.2s var(--offers-ease);
}

.albizia-offer__cta:hover,
.albizia-offer__cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: var(--offers-accent-shadow-hover);
	filter: brightness(1.02);
}

.albizia-offer__cta:active {
	transform: translateY(0);
}

.albizia-offer__cta:hover svg,
.albizia-offer__cta:focus-visible svg,
.albizia-offers__closing-link:hover svg,
.albizia-offers__closing-link:focus-visible svg {
	transform: translateX(4px);
}

/* Nur mobil: klappt den eingeklappten Teil der Karte auf. */
.albizia-offer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	grid-column: 1 / -1;
	grid-row: 4;
	width: 100%;
	min-height: 48px;
	margin-top: 0.75rem;
	padding: 0.75rem 1.2rem;
	border: 1px solid var(--offers-line);
	border-radius: var(--offers-radius-md);
	background: #ffffff;
	color: var(--offers-ink);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: var(--offers-shadow-chip);
	transition: border-color 0.2s var(--offers-ease),
		box-shadow 0.2s var(--offers-ease);
}

.albizia-offer__toggle:hover {
	border-color: rgba(240, 140, 0, 0.45);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.albizia-offer__toggle[hidden] {
	display: none;
}

.albizia-offer__toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 260ms var(--offers-ease);
}

.albizia-offer__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Formular --------------------------------------------------------------- */

.albizia-offer__action .albizia-offer__cta {
	width: 100%;
}

.albizia-offer__form {
	margin: 0;
	padding: 18px;
	border: 1px solid var(--offers-tint-line);
	border-radius: 20px;
	background: var(--offers-tint);
}

.albizia-offer__form h4 {
	margin: 0 0 12px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--offers-ink);
	letter-spacing: -0.005em;
}

.albizia-offer__date-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.albizia-offer__date-fields label {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.albizia-offer__date-fields label > span {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--offers-soft);
}

.albizia-offer__date-fields input {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--offers-line);
	border-radius: 12px;
	background: #ffffff;
	color: var(--offers-ink);
	font: inherit;
	font-size: 0.95rem;
	caret-color: var(--offers-accent);
	font-variant-numeric: tabular-nums;
	transition: border-color 180ms var(--offers-ease),
		box-shadow 180ms var(--offers-ease);
}

.albizia-offer__date-fields input:hover {
	border-color: rgba(240, 140, 0, 0.4);
}

.albizia-offer__date-fields input:focus-visible {
	border-color: var(--offers-accent);
	outline: 2px solid rgba(207, 126, 0, 0.22);
	outline-offset: 2px;
}

.albizia-offer__form .albizia-offer__cta {
	width: 100%;
	margin-top: 4px;
}

.albizia-offer__form-error {
	margin: 12px 0 0;
	color: #a3271b;
	font-size: 0.85rem;
	font-weight: 600;
}

.albizia-offer__form-hint {
	margin: 11px 0 0;
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--offers-soft);
}

/* Kein Angebot ----------------------------------------------------------- */

.albizia-offers__empty {
	display: grid;
	grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(2.25rem, 4.5vw, 3.25rem);
	border: 1px solid var(--offers-hairline);
	border-radius: var(--offers-radius);
	background: var(--offers-surface);
	box-shadow: var(--offers-shadow);
}

.albizia-offers__empty-mark {
	margin: 0;
	font-size: clamp(7rem, 18vw, 13rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 0.72;
	color: rgba(207, 126, 0, 0.16);
	text-align: center;
}

.albizia-offers__empty h3 {
	margin: 0 0 0.6rem;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 600;
	color: var(--offers-ink);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.albizia-offers__empty p:not(.albizia-offers__empty-mark) {
	max-width: 48ch;
	margin: 0 0 1.4rem;
	line-height: 1.7;
	color: var(--offers-body);
}

.albizia-offers__empty .albizia-offer__cta {
	align-self: start;
}

/* Abschluss -------------------------------------------------------------- */

.albizia-offers__closing {
	position: relative;
	padding: 0 clamp(20px, 4vw, 48px) clamp(3.5rem, 8vw, 6rem);
	background: var(--offers-surface);
}

/* Die Linie laeuft breiter als der Text — genau wie vor "Bereit fuer Baden". */
.albizia-offers__closing .albizia-offers__accent-line {
	max-width: 1400px;
	margin: 0 auto clamp(2.5rem, 6vw, 4rem);
}

.albizia-offers__closing-inner {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
}

.albizia-offers__closing h2 {
	margin: 0 0 0.5rem;
	font-size: var(--albizia-heading-xl, clamp(2rem, 3.6vw, 3.2rem));
	font-weight: 600;
	color: #101010;
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	text-wrap: balance;
}

.albizia-offers__closing-subtitle {
	max-width: 24ch;
	margin: 0 auto;
	font-size: clamp(1.35rem, 3vw, 2.1rem);
	font-weight: 600;
	line-height: 1.3;
	color: #6b6b6b;
	text-wrap: balance;
}

.albizia-offers__closing-text {
	max-width: 54ch;
	margin: clamp(1.2rem, 2.5vw, 1.8rem) auto 0;
	font-size: clamp(1.05rem, 1.7vw, 1.2rem);
	line-height: 1.75;
	color: var(--offers-body);
}

.albizia-offers__closing-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: clamp(1.6rem, 3vw, 2.2rem);
	padding: 0.9rem 2.4rem;
	border: none;
	border-radius: var(--offers-radius-md);
	background: var(--offers-accent-grad);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: var(--offers-accent-shadow);
	transition: transform 0.2s var(--offers-ease),
		box-shadow 0.2s var(--offers-ease), filter 0.2s var(--offers-ease);
}

.albizia-offers__closing-link:hover,
.albizia-offers__closing-link:focus-visible {
	transform: translateY(-1px);
	box-shadow: var(--offers-accent-shadow-hover);
	filter: brightness(1.02);
}

.albizia-offers__closing-link:active {
	transform: translateY(0);
}

/* Dialog ----------------------------------------------------------------- */

.albizia-offers-modal {
	position: fixed;
	inset: 0;
	z-index: 1500000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.albizia-offers-modal[hidden] {
	display: none;
}

.albizia-offers-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 15, 12, 0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.albizia-offers-modal__window {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(560px, 100%);
	max-height: calc(100svh - 32px);
	border-radius: var(--offers-radius);
	background: var(--offers-surface);
	box-shadow: 0 38px 70px rgba(0, 0, 0, 0.24);
	overflow: hidden;
}

.albizia-offers-modal__scroll {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.albizia-offers-modal__media {
	background: var(--offers-tint-strong);
}

.albizia-offers-modal__image {
	display: block;
	width: 100%;
	max-height: 42svh;
	object-fit: contain;
}

.albizia-offers-modal__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 22px 20px 26px;
}

.albizia-offers-modal__content .albizia-offer__summary {
	display: flex;
	flex-direction: column;
	/* Ohne das erbt der Dialog das start aus dem Kartenband, und die Felder
	   schrumpfen auf ihre Textbreite. */
	align-items: stretch;
	gap: 16px;
	padding-bottom: 0;
	border-bottom: 0;
}

.albizia-offers-modal__content .albizia-offer__action {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 20px;
	border-top: 1px solid var(--offers-hairline);
}

.albizia-offers-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(23, 23, 23, 0.08);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: var(--offers-ink);
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
	transition: background-color 0.2s var(--offers-ease);
}

.albizia-offers-modal__close:hover {
	background: #ffffff;
}

.albizia-offers-modal__close svg {
	width: 18px;
	height: 18px;
	fill: none;
}

body.albizia-offers-modal-open {
	overflow: hidden;
}

/* Einblenden — exakt die Bewegung der Landingpage. */
.albizia-offers-has-js [data-albizia-offer-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.8s var(--offers-ease-out),
		transform 1.8s var(--offers-ease-out);
	will-change: opacity, transform;
}

.albizia-offers-has-js [data-albizia-offer-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@keyframes albizia-offers-hero-in {
	from {
		opacity: 0.7;
		transform: scale(1.06);
	}
	to {
		opacity: 1;
		transform: scale(1.015);
	}
}

@keyframes albizia-offers-hero-rise {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes albizia-offers-hero-cue {
	0%,
	62%,
	100% {
		transform: none;
	}
	76% {
		transform: translateY(5px);
	}
	88% {
		transform: translateY(1px);
	}
}

/* Desktop: drei klar getrennte Aufgaben in einer Leserichtung. Das konsequent
   hochformatige Bild fuehrt, die Geschichte bekommt die ruhige Mitte und die
   Preis-/Buchungsschiene bleibt rechts jederzeit auffindbar. Auf dem Handy
   bleibt die kompakte Karten-/Dialogstruktur unveraendert. */
@media (min-width: 901px) {
	.albizia-offer {
		--offer-cols: clamp(250px, 23vw, 320px) minmax(0, 1fr) var(--offer-rail);
		position: relative;
		grid-template-columns: var(--offer-cols);
		grid-template-rows: auto;
		align-items: start;
		gap: var(--offer-pad);
		overflow: visible;
	}

	.albizia-offer--wide {
		--offer-cols: clamp(250px, 23vw, 320px) minmax(0, 1fr) var(--offer-rail);
	}

	/* Die Vorschau bleibt klar hochformatig, fuellt aber die gesamte innere
	   Kartenhoehe. Bei laengeren Texten waechst sie mit der Karte mit. */
	.albizia-offer__media {
		grid-column: 1;
		grid-row: 1;
		align-self: stretch;
		aspect-ratio: auto;
		height: 100%;
		min-height: clamp(440px, 43vw, 560px);
		max-height: none;
	}

	.albizia-offer__image,
	.albizia-offer--wide .albizia-offer__image {
		object-fit: cover;
	}

	.albizia-offer__content {
		grid-column: 2;
		grid-row: 1;
	}

	/* Angebotsart und Auszeichnung sind Kontext, keine konkurrierenden Chips. */
	.albizia-offer__heading {
		gap: 8px;
		margin-bottom: 8px;
	}

	.albizia-offer__kind,
	.albizia-offer__badge {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.09em;
		line-height: 1.4;
		text-transform: uppercase;
	}

	.albizia-offer__kind {
		color: var(--offers-soft);
	}

	.albizia-offer__badge {
		gap: 8px;
		color: var(--offers-accent-ink);
	}

	.albizia-offer__badge::before {
		content: "";
		width: 3px;
		height: 3px;
		border-radius: 50%;
		background: currentColor;
	}

	/* Zeitraum und Merkmale folgen dem Titel als eine einzige ruhige
	   Informationszone statt als Stapel gleichgewichteter Mini-Karten. */
	.albizia-offer__summary {
		display: grid;
		gap: 8px;
		margin: 16px 0 4px;
		padding: 12px 0;
		border-top: 1px solid var(--offers-hairline);
		border-bottom: 1px solid var(--offers-hairline);
	}

	.albizia-offer__summary > .albizia-offer__facts {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 6px 14px;
		min-width: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
	}

	.albizia-offer__fact {
		display: flex;
		align-items: baseline;
		gap: 6px;
		padding: 0;
	}

	.albizia-offer__fact + .albizia-offer__fact {
		padding-left: 14px;
		border-top: 0;
		border-left: 1px solid var(--offers-line);
	}

	.albizia-offer__fact span {
		font-size: 0.66rem;
		letter-spacing: 0.1em;
	}

	.albizia-offer__fact strong {
		font-size: 0.95rem;
	}

	.albizia-offer__summary > .albizia-offer__meta {
		display: flex;
		gap: 0;
		color: var(--offers-soft);
	}

	.albizia-offer__meta li {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: inherit;
		font-size: 0.8rem;
		font-weight: 500;
	}

	.albizia-offer__meta li + li {
		gap: 8px;
	}

	.albizia-offer__meta li + li::before {
		content: "";
		width: 3px;
		height: 3px;
		margin: 0 8px;
		border-radius: 50%;
		background: currentColor;
		opacity: 0.55;
	}

	.albizia-offer__summary > .albizia-offer__terms {
		margin-top: 2px;
		padding-top: 8px;
	}

	.albizia-offer__title,
	.albizia-offer__excerpt,
	.albizia-offer__description {
		max-width: none;
	}

	/* Preis und Buchung bleiben als kompakte Schiene rechts. Dadurch bekommt
	   die Mitte ein echtes Lesemass, und der CTA steht auf jeder Karte an der
	   gleichen, erwartbaren Stelle. */
	.albizia-offer > .albizia-offer__action {
		position: relative;
		grid-column: 3;
		grid-row: 1;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin: 0;
		padding: clamp(18px, 1.6vw, 24px);
		border-radius: 20px;
	}

	.albizia-offer > .albizia-offer__action > .albizia-offer__footer {
		width: 100%;
	}

	.albizia-offer > .albizia-offer__action > .albizia-offer__form {
		display: flex;
		margin-top: auto;
		padding: 14px 0 0;
		border: 0;
		border-top: 1px solid var(--offers-tint-line);
		border-radius: 0;
		background: transparent;
	}

	.albizia-offer > .albizia-offer__action > .albizia-offer__form:first-child {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.albizia-offer > .albizia-offer__action .albizia-offer__date-fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		align-items: stretch;
	}

	.albizia-offer > .albizia-offer__action > .albizia-offer__cta {
		width: 100%;
	}

	.albizia-offer > .albizia-offer__action > .albizia-offer__rate-hint {
		width: 100%;
		text-align: left;
	}

	/* Die Apartmentpreise sind ein Dropdown ueber der Buchungsschiene. Die
	   absolute Liste veraendert keine Rasterzeile und damit nie die Kartenhoehe. */
	.albizia-offer__rooms-box {
		position: relative;
		z-index: 4;
	}

	.albizia-offer__rooms-box > summary {
		width: fit-content;
		min-height: 36px;
		padding: 7px 11px;
		border: 1px solid var(--offers-tint-line);
		border-radius: 10px;
		background: #ffffff;
		box-shadow: var(--offers-shadow-chip);
		transition: border-color 180ms var(--offers-ease),
			background-color 180ms var(--offers-ease);
	}

	.albizia-offer__rooms-box > summary:hover,
	.albizia-offer__rooms-box > summary:focus-visible,
	.albizia-offer__rooms-box[open] > summary {
		border-color: rgba(207, 126, 0, 0.38);
		background: var(--offers-white);
	}

	.albizia-offer__rooms-box > .albizia-offer__rooms {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		width: min(310px, calc(100vw - 48px));
		max-height: 260px;
		margin: 0;
		padding: 12px;
		border: 1px solid var(--offers-line);
		border-radius: 12px;
		background: #ffffff;
		box-shadow: 0 18px 44px rgba(23, 23, 23, 0.16);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.albizia-offer__room {
		padding: 7px 4px;
	}

	.albizia-offer__room + .albizia-offer__room {
		border-top: 1px solid var(--offers-hairline);
	}

	.albizia-offer.has-open-price-menu {
		z-index: 5;
	}
}

@media (max-width: 1024px) {
	:root {
		--offers-shell: min(100% - 40px, 940px);
	}
}

@media (max-width: 900px) {
	:root {
		--offers-shell: min(100% - 36px, 720px);
	}

	.albizia-offers__hero-inner {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 88px;
	}

	.albizia-offers__hero .albizia-offers__title {
		max-width: 14ch;
		font-size: clamp(2.4rem, 5.6vw, 3.6rem);
	}

	.albizia-offers__hero .albizia-offers__lead {
		max-width: 46ch;
		margin-top: 28px;
		padding-top: 24px;
	}
}

/* Touch-Geräte bekommen keinen Hover, also bleiben die Pfeile sichtbar. */
@media (hover: none) {
	.albizia-offer__nav {
		opacity: 1;
	}

	.albizia-offer:hover {
		transform: none;
		box-shadow: var(--offers-shadow);
	}
}

/* Kartenmodus: eine Übersicht, die den Dialog öffnet. Derselbe Umbruchpunkt,
   auf den auch das Skript hört. */
@media (max-width: 900px) {
	.albizia-offers__list {
		gap: 14px;
	}

	.albizia-offer {
		--offer-cols: clamp(104px, 14vw, 150px) minmax(0, 1fr);
		grid-template-rows: auto;
		gap: 10px clamp(14px, 2vw, 22px);
		padding: clamp(14px, 1.8vw, 20px);
		border-radius: 20px;
	}

	.albizia-offer--wide {
		--offer-cols: clamp(132px, 19vw, 200px) minmax(0, 1fr);
	}

	.albizia-offers-has-js .albizia-offer {
		cursor: pointer;
	}

	/* Im Kartenmodus und im Dialog steht der Text vollstaendig da — dort
	   entscheidet nicht die Kartenhoehe, sondern der Dialog. */
	.albizia-offer__description.is-clamped {
		display: block;
		-webkit-line-clamp: none;
		overflow: visible;
	}

	.albizia-offer__more {
		display: none;
	}

	.albizia-offer__media {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
		height: auto;
		min-height: 0;
		max-height: none;
	}

	.albizia-offer--wide .albizia-offer__image {
		object-fit: contain;
	}

	.albizia-offer__content {
		grid-column: 2;
		grid-row: 1;
	}

	.albizia-offer__summary {
		display: block;
	}

	/* Im Kartenmodus traegt die Leiste nur noch den Preis — ohne Kasten. */
	.albizia-offer > .albizia-offer__action {
		grid-column: 2;
		grid-row: 3;
		align-self: start;
		display: block;
		margin-top: 0;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.albizia-offer__toggle {
		grid-column: 1 / -1;
		grid-row: 4;
		width: 100%;
		margin-top: 6px;
	}

	/* Nur, was die Entscheidung trägt, ob sich das Angebot zu öffnen lohnt.
	   Der Rest steht im Dialog. An has-js gebunden, damit die Seite ohne
	   Skript vollständig bleibt. */
	.albizia-offers-has-js .albizia-offer .albizia-offer__description,
	.albizia-offers-has-js .albizia-offer .albizia-offer__facts,
	.albizia-offers-has-js .albizia-offer .albizia-offer__meta,
	.albizia-offers-has-js .albizia-offer .albizia-offer__form,
	.albizia-offers-has-js .albizia-offer .albizia-offer__action > .albizia-offer__cta,
	.albizia-offers-has-js .albizia-offer .albizia-offer__rate-hint,
	.albizia-offers-has-js .albizia-offer .albizia-offer__rooms,
	.albizia-offers-has-js .albizia-offer .albizia-offer__rooms-box,
	.albizia-offers-has-js .albizia-offer .albizia-offer__terms,
	.albizia-offer .albizia-offer__nav,
	.albizia-offer .albizia-offer__dots {
		display: none;
	}

	.albizia-offer .albizia-offer__excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-top: 8px;
		font-size: 0.95rem;
		overflow: hidden;
	}

	.albizia-offer .albizia-offer__title {
		font-size: clamp(1.2rem, 2.4vw, 1.45rem);
	}

	.albizia-offer .albizia-offer__heading {
		margin-bottom: 8px;
	}

	.albizia-offer .albizia-offer__kind,
	.albizia-offer .albizia-offer__badge {
		padding: 0.25rem 0.7rem;
		font-size: 0.76rem;
	}
}

@media (max-width: 600px) {
	:root {
		--offers-shell: calc(100% - 28px);
	}

	.albizia-offers {
		padding-top: 68px;
	}

	.albizia-offers__hero {
		min-height: calc(100svh - 68px);
	}

	.albizia-offers__hero-image {
		object-position: 58% center;
	}

	.albizia-offers__hero-inner {
		padding: 90px 14px 56px;
	}

	.albizia-offers__hero-panel {
		padding: 22px 20px 24px;
		border-radius: 20px;
	}

	.albizia-offers__hero .albizia-offers__title {
		max-width: 13ch;
		font-size: clamp(2.1rem, 8.6vw, 3rem);
	}

	.albizia-offers__hero .albizia-offers__lead {
		margin-top: 24px;
		padding-top: 22px;
		font-size: 1rem;
	}

	.albizia-offers__hero .albizia-offers__hero-link {
		margin-top: 26px;
	}

	.albizia-offers__collection {
		scroll-margin-top: 68px;
	}

	.albizia-offer__facts,
	.albizia-offer__date-fields {
		max-width: none;
		grid-template-columns: 1fr;
	}

	.albizia-offer__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.albizia-offer__fact + .albizia-offer__fact {
		border-top: 1px solid var(--offers-hairline);
		border-left: 0;
	}

	.albizia-offer__date-fields {
		gap: 14px;
	}

	.albizia-offer__room {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.albizia-offer__cta {
		width: 100%;
	}

	.albizia-offers__empty {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 2.5rem 1.4rem;
	}

	.albizia-offers__empty-mark {
		font-size: 7rem;
	}

	.albizia-offers__closing-link {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.albizia-offers__hero-image {
		animation: none;
		transform: none;
	}

	.albizia-offers-has-js .albizia-offers__hero-panel,
	.albizia-offers-has-js .albizia-offers__hero-panel > *,
	.albizia-offers__eyebrow::before,
	.albizia-offers__hero-link svg {
		animation: none;
	}

	.albizia-offers__hero-link::after {
		transition: none;
	}

	.albizia-offers__hero-link:hover::after,
	.albizia-offers__hero-link:focus-visible::after {
		transform: scaleX(1);
	}

	.albizia-offer__track,
	.albizia-offers__hero-link svg,
	.albizia-offer__cta svg,
	.albizia-offers__closing-link svg {
		transition: none;
	}

	.albizia-offers-has-js [data-albizia-offer-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Preisblock, den das Skript nachträgt ----------------------------------- */

/* Versteckt heißt hier wirklich weg: die Zeilen stehen von Anfang an im
   Markup und werden nur gefüllt, damit es die Preisanzeige nicht zweimal
   gibt — einmal in PHP und einmal in JavaScript. */
.albizia-offer__pricing [hidden] {
	display: none !important;
}

/* Während der Abfrage bleibt die alte Zahl stehen und tritt zurück. Sie
   verschwinden zu lassen würde die Karte bei jedem Datumswechsel springen
   lassen. */
.albizia-offer__pricing[data-state="laden"] {
	opacity: 0.55;
	transition: opacity 0.2s var(--offers-ease);
}