/* Direktbuchung über den Bewertungen (Chase 18.10.2026). Vorlage Relaunch-Vorschau Chris, Farben und Schriften auf die
   Chase-CI gezogen: Überschriften Arapey, Fließtext Open Sans #647380, Titel #3b4653, Akzent #546a7b (Hover #3d4851),
   Siegel im Dunkel der Buchungsseite #2f353d. Seitengrau #f7f7f7, damit sich der Block vom weißen Bewertungsblock darunter
   und vom dunklen Buchungsband der Apartment-Seiten darüber absetzt. Innenbreite 1320 px wie die Bewertungen. */

.ds-direkt { padding: 80px 40px; background: #f7f7f7; color: #647380; font-family: "Open Sans", sans-serif; border-top: 1px solid #eceef0; }
.ds-direkt__inner { max-width: 1320px; margin: 0 auto; }

.ds-direkt__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }

.ds-direkt .ds-direkt__eyebrow {
	margin: 0 0 14px; font-size: 13px; font-weight: 600; line-height: 1.4;
	letter-spacing: .14em; text-transform: uppercase; color: #546a7b;
}
.ds-direkt .ds-direkt__titel {
	margin: 0 0 22px; font-family: Arapey, Georgia, serif; font-weight: 400; font-size: clamp(36px, 3.6vw, 54px);
	line-height: 1.08; letter-spacing: 0; text-transform: none; color: #3b4653;
}
/* Zwei Blockzeilen statt <br>: so gleicht text-wrap jede Zeile für sich aus (EN „Experience more / at CHASE.“) */
.ds-direkt .ds-direkt__titel-zeile { display: block; text-wrap: balance; }
.ds-direkt .ds-direkt__lead { max-width: 640px; margin: 0 0 32px; font-size: 17px; line-height: 1.7; color: #647380; }

.ds-direkt .ds-direkt__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 0; }
.ds-direkt a.ds-direkt__knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 34px;
	background: #546a7b; color: #fff; text-decoration: none; border-radius: 0;
	font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase;
	transition: background-color .2s;
}
.ds-direkt a.ds-direkt__knopf:hover, .ds-direkt a.ds-direkt__knopf:focus-visible { background: #3d4851; color: #fff; }
.ds-direkt a.ds-direkt__knopf svg { flex: none; transition: transform .2s; }
.ds-direkt a.ds-direkt__knopf:hover svg { transform: translateX(3px); }
.ds-direkt a.ds-direkt__textlink {
	font-size: 15px; font-weight: 600; color: #546a7b; text-decoration: underline; text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}
.ds-direkt a.ds-direkt__textlink:hover, .ds-direkt a.ds-direkt__textlink:focus-visible { color: #3d4851; }

/* Siegel: dunkle Scheibe mit Akzentrand und feinem Innenring */
.ds-direkt__siegel {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: clamp(168px, 14vw, 204px); aspect-ratio: 1; box-sizing: border-box; padding: 24px; margin-right: 8px;
	border: 2px solid #546a7b; border-radius: 50%; background: #2f353d; color: #fff; text-align: center;
	box-shadow: 0 0 0 6px #f7f7f7, 0 0 0 7px #b6bfc1;
}
.ds-direkt__siegel::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(182, 191, 193, .45); border-radius: 50%; }
.ds-direkt__siegel-marke { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .3em; padding-left: .3em; }
.ds-direkt__siegel-wort { margin: 10px 0 8px; font-family: Arapey, Georgia, serif; font-size: clamp(32px, 2.7vw, 40px); line-height: 1; text-wrap: balance; }
.ds-direkt__siegel-zusatz { max-width: 9em; font-size: 12px; line-height: 1.35; color: #b6bfc1; text-wrap: balance; }

/* Vorteile: weiße Felder mit Haarlinien, wie die Karten der Buchungsseite */
.ds-direkt__vorteile {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px;
	background: #fff; border: 1px solid #e3e6e8;
}
.ds-direkt__vorteil { padding: 36px 34px 34px; }
.ds-direkt__vorteil + .ds-direkt__vorteil { border-left: 1px solid #e3e6e8; }
.ds-direkt .ds-direkt__status {
	margin: 0 0 10px; font-size: 11px; font-weight: 600; line-height: 1.4;
	letter-spacing: .16em; text-transform: uppercase; color: #647380;
}
.ds-direkt .ds-direkt__vorteil--nightcap .ds-direkt__status { color: #546a7b; }
.ds-direkt .ds-direkt__vorteil h3 {
	margin: 0 0 12px; font-family: Arapey, Georgia, serif; font-weight: 400; font-size: 27px; line-height: 1.2;
	letter-spacing: 0; text-transform: none; color: #3b4653;
}
.ds-direkt .ds-direkt__vorteil p { margin: 0; font-size: 15px; line-height: 1.7; color: #647380; }
.ds-direkt .ds-direkt__vorteil p.ds-direkt__status { font-size: 11px; line-height: 1.4; }
.ds-direkt .ds-direkt__vorteil p.ds-direkt__bedingung { margin-top: 16px; font-size: 13px; line-height: 1.6; }
.ds-direkt .ds-direkt__vorteil a { color: #546a7b; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ds-direkt .ds-direkt__vorteil a:hover, .ds-direkt .ds-direkt__vorteil a:focus-visible { color: #3d4851; }

@media (max-width: 1024px) {
	.ds-direkt { padding: 64px 32px; }
	.ds-direkt__vorteil { padding: 28px 24px; }
	.ds-direkt .ds-direkt__vorteil h3 { font-size: 24px; }
}

@media (max-width: 860px) {
	.ds-direkt__vorteile { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
	.ds-direkt__vorteil + .ds-direkt__vorteil { border-left: 0; border-top: 1px solid #e3e6e8; }
}

/* Mobil: Siegel klein über dem Titel, Knopf über die volle Breite */
@media (max-width: 768px) {
	.ds-direkt { padding: 52px 16px 48px; }
	.ds-direkt__kopf { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	/* 140 px: EN „Best price / when booking direct“ und ES „Mejor precio / reservando directamente“ brauchen zwei Zeilen */
	.ds-direkt__siegel { order: -1; width: 140px; padding: 16px; margin: 0 0 0 7px; box-shadow: 0 0 0 4px #f7f7f7, 0 0 0 5px #b6bfc1; }
	.ds-direkt__siegel::before { inset: 6px; }
	.ds-direkt__siegel-marke { font-size: 9px; }
	.ds-direkt__siegel-wort { margin: 6px 0 5px; font-size: 24px; }
	.ds-direkt__siegel-zusatz { max-width: 10em; font-size: 9.5px; line-height: 1.3; }
	/* „Mehr bei CHASE erleben.“ bleibt bis 320 px auf einer Zeile */
	.ds-direkt .ds-direkt__titel { font-size: clamp(27px, 8.4vw, 34px); margin-bottom: 18px; }
	.ds-direkt .ds-direkt__lead { font-size: 16px; margin-bottom: 26px; }
	.ds-direkt__vorteil { padding: 26px 20px 24px; }
}

@media (max-width: 480px) {
	.ds-direkt .ds-direkt__aktionen { flex-direction: column; align-items: stretch; text-align: center; }
	.ds-direkt a.ds-direkt__knopf { width: 100%; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
	.ds-direkt a.ds-direkt__knopf, .ds-direkt a.ds-direkt__knopf svg { transition: none; }
	.ds-direkt a.ds-direkt__knopf:hover svg { transform: none; }
}

/* Nightcap bei Blue Rosy und Golden Grey (1.1.0). Band im Dunkel der Buchungsseite zwischen dem grauen Lage-Abschnitt
   und dem weißen „Gesamterlebnis CHASE“, Aufbau wie in der Vorschau: Symbol, Titel, Text. Etikett im selben Dunkel mit
   hellem Rand, damit es auf jedem Foto lesbar bleibt. */
.ds-nightcap { background: #2f353d; color: rgba(255, 255, 255, .86); font-family: "Open Sans", sans-serif; }
.ds-nightcap__inner {
	display: grid; grid-template-columns: auto minmax(260px, .9fr) minmax(320px, 1.1fr); gap: 24px clamp(24px, 3.5vw, 56px);
	align-items: center; max-width: 1500px; margin: 0 auto; padding: clamp(44px, 4.5vw, 64px) clamp(20px, 4.2vw, 60px); box-sizing: border-box;
}
.ds-nightcap__icon { display: block; width: clamp(48px, 4.6vw, 68px); height: clamp(48px, 4.6vw, 68px); color: #b6bfc1; }
.ds-nightcap__icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ds-nightcap .ds-nightcap__eyebrow {
	margin: 0 0 10px; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #b6bfc1;
}
.ds-nightcap .ds-nightcap__titel {
	margin: 0; font-family: Arapey, Georgia, serif; font-weight: 400; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.12;
	letter-spacing: 0; text-transform: none; color: #fff; text-wrap: balance;
}
.ds-nightcap .ds-nightcap__text p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .86); }
.ds-nightcap .ds-nightcap__text p.ds-nightcap__bedingung { margin-top: 14px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .68); }
.ds-nightcap .ds-nightcap__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ds-nightcap .ds-nightcap__text a:hover, .ds-nightcap .ds-nightcap__text a:focus-visible { color: #b6bfc1; }

.ds-nightcap-etikett {
	display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 11px; box-sizing: border-box;
	background: rgba(47, 53, 61, .92); color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
	font-family: "Open Sans", sans-serif; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
	text-shadow: none; white-space: nowrap;
}
.ds-nightcap-etikett svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-nightcap-etikett-zeile { margin: 22px 0 0; text-align: center; }
/* Karte: absolut über dem Namen, damit der Name auf derselben Höhe bleibt wie auf den anderen Karten
   (PowerPack zentriert Bild-Titel per Tabellenzelle, .pp-hover-card-inner ist der Bezugsrahmen) */
.ds-nightcap-etikett-karte {
	position: absolute; left: 0; right: 0; margin: 0; text-align: center; line-height: 1;
	transform: translateY(calc(-100% - 12px)); pointer-events: none;
}

@media (max-width: 860px) {
	.ds-nightcap__inner { grid-template-columns: auto minmax(0, 1fr); gap: 20px; }
	.ds-nightcap__text { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.ds-nightcap-etikett { font-size: 10px; padding: 6px 12px 6px 9px; }
	.ds-nightcap-etikett-karte { transform: translateY(calc(-100% - 8px)); }
}