/* DS Luxus-Film v2: per Scroll gescrubbter Film als Hero der Seite /luxus-bad-design/ (Digitalbasis, 16.09.2026).
   Buehne 520 Bildschirmhoehen hoch, darin ein fixiertes Vollbild mit Video, Standbild bis das Video bereit ist,
   Vignette, Zeitleiste oben, Brandbar mit Logo und Button (Seiten-Header waehrend des Films ausgeblendet),
   vier Textfenster (zwei oben, zwei unten), Scroll-Hinweis, Hinweis "Visualisierung".
   Farben: Buehne #0e1615, Text #f4f7f6, Akzent #63af9e, CTA-Schrift #14201d.
   Zweiter Teil: Klassen ds-lx fuer Bildstrecke und Satz auf derselben Seite (1400-px-Box).
   Laedt nur auf Seiten mit dem Shortcode [ds_luxus_film], bleibt blockierend (mu-plugins/ds-*). */

/* Beaver-Builder-Huelle der Film-Row ohne Abstaende und Begrenzung */
#ds-film-row .fl-row-content-wrap { padding: 0 !important; }
#ds-film-row .fl-row-content,
#ds-film-row .fl-col-group,
#ds-film-row .fl-col,
#ds-film-row .fl-col-content,
#ds-film-row .fl-module,
#ds-film-row .fl-module-content { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; }

/* Seiten-Header am Seitenanfang transparent ueber dem Film: Header aus dem Fluss (absolut, Film beginnt bei 0),
   Flaechen durchsichtig, Schrift und Logo weiss. Gilt, bis das Script nach dem Film body.ds-lxf-nachfilm setzt,
   danach ist der fixierte Header wieder weiss wie auf allen Seiten. */
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	background: transparent !important;
}
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .fl-col-content,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .fl-module-content { background: transparent !important; box-shadow: none !important; }
/* Zeilen (Menue und USP-Streifen) nur leicht getoent und weichgezeichnet: das Bild scheint durch, weisse Schrift bleibt
   auch ueber der hellen Decke im Film lesbar (gemessen 16.09.2026: rein transparent war das Menue unsichtbar) */
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .fl-row-content-wrap {
	background: rgba(10, 16, 15, .32) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 0 !important;
	box-shadow: none !important;
}
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .or-usps .fl-row-content-wrap { background: rgba(10, 16, 15, .22) !important; }
/* Ubermenu-Container traegt eine eigene weisse Flaeche. Nur auf Desktop (ab 941 px) transparent setzen:
   mobil ist nav.ubermenu das aufgeklappte Menue selbst und braucht seinen weissen Grund (Menuefehler 16.09.2026) */
@media (min-width: 941px) {
	body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 nav.ubermenu,
	body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu-nav,
	body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu-nav > .ubermenu-item-level-0 > .ubermenu-target { background: transparent !important; background-color: transparent !important; box-shadow: none !important; }
}
/* Mobil: das geoeffnete Menue bleibt weiss mit dunkler Schrift, nur die Leiste mit Logo und Toggle ist getoent */
@media (max-width: 940px) {
	body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 nav.ubermenu .ubermenu-item-level-0 > .ubermenu-target,
	body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 nav.ubermenu .ubermenu-target-title { color: inherit !important; }
}
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form__submit,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form__submit * { color: #ffffff !important; }
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu .ubermenu-item-level-0 > .ubermenu-target,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu .ubermenu-item-level-0 > .ubermenu-target .ubermenu-target-title,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu-responsive-toggle,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form__toggle,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form__submit,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form__submit *,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form--style-classic .pp-search-form__input,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form--style-classic .pp-search-form__container { color: #ffffff !important; }
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu .ubermenu-item-level-0 > .ubermenu-target:hover,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu .ubermenu-item-level-0 > .ubermenu-target:hover .ubermenu-target-title,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target .ubermenu-target-title { color: #9fd8c9 !important; }
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu-responsive-toggle,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form__toggle,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form__toggle * { background: transparent !important; color: #ffffff !important; border-color: rgba(255, 255, 255, .4) !important; }
/* Weisses Logo als Hintergrund des Bildcontainers, Original unsichtbar (content: url() zeichnete Chromium nicht).
   Die Datei ist eine Wortmarke aus Raleway 700/500 in 1440 px (kein Vektor-Original vorhanden, 180-px-Raster franst).
   Versionsstempel, weil Cloudflare die erste, fehlerhafte Fassung ohne Stempel weiter ausliefert. */
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .fl-photo-content { background: url("../uploads/ds-luxus-film/logo-weiss.png?v=4") left center / contain no-repeat; }
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .fl-photo-img[src*="LOGO-Torsten-Mueller"] { opacity: 0; }
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .ubermenu-responsive-toggle img,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 img[src*="logo-header"] { filter: brightness(0) invert(1); }
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form--style-classic .pp-search-form__input,
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form--style-classic .pp-search-form__container { background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .35) !important; }
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form--style-classic .pp-search-form__input::placeholder { color: rgba(255, 255, 255, .85) !important; }
/* Das Vollbild-Suchformular (Lightbox) bleibt unveraendert */
body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .pp-search-form--style-full_screen .pp-search-form__container { background: revert !important; }

/* Auf dieser Seite ohne Suche, Telefon-Button, CTA-Button und Haekchen-Zeile im Header (Martin, 16.09.2026):
   es bleiben Logo und Menuepunkte, in beiden Zustaenden (transparent oben, weiss nach dem Film). */
body.ds-lxf-seite header.fl-builder-content-39079 .fl-module-pp-search-form,
body.ds-lxf-seite header.fl-builder-content-39079 .fl-module-button,
body.ds-lxf-seite header.fl-builder-content-39079 .or-usps { display: none !important; }

/* Seiten-Header waehrend des Films ausblenden (Klasse setzt das Script bei 2 bis 98,5 % der Strecke).
   Der Theme-Builder fixiert den Header mit top: 95px und inline transform translate(0, -95px); ein Prozentwert
   allein liesse ihn bei 32 px stehen (gemessen 16.09.2026). Deshalb ein fester grosser Versatz plus Deckkraft 0. */
header.fl-builder-content-39079 { transition: opacity .25s ease; }
body.ds-lxf-film header.fl-builder-content-39079 { transform: translate3d(0, -320px, 0) !important; opacity: 0 !important; pointer-events: none !important; transition: none !important; }
/* Der Theme Builder setzt beim Fixieren des Headers padding-top auf den Inhalt (57 px). Auf dieser Seite liegt der
   Header ohnehin ausserhalb des Flusses: das Padding liess den Film beim ersten Scrollen um 57 px springen und
   legte einen weissen Balken frei (Martin, 16.09.2026). Deshalb hier immer 0. */
body.ds-lxf-seite #content,
body.ds-lxf-seite .fl-page-content,
body.ds-lxf-seite .wpbf-page,
body.ds-lxf-seite #container,
body.ds-lxf-seite .fl-page { padding-top: 0 !important; margin-top: 0 !important; }

.ds-lxf {
	position: relative;
	height: 520vh;
	height: 520svh;
	margin: 0;
	background: #0e1615;
	color: #f4f7f6;
	font-family: Raleway, sans-serif;
}
.ds-lxf * { box-sizing: border-box; }
.ds-lxf__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: radial-gradient(130% 100% at 50% 28%, #16221f 0%, #0e1615 72%);
}
.ds-lxf .ds-lxf__film,
.ds-lxf .ds-lxf__poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	display: block;
	object-fit: cover;
	object-position: 50% 55%;
	border-radius: 0;
}
.ds-lxf .ds-lxf__film { background: #0e1615; object-fit: unset; }
.ds-lxf .ds-lxf__poster { opacity: 1; transition: opacity .6s ease; z-index: 1; }
.ds-lxf__vignette {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 50% 42%, transparent 44%, rgba(0, 0, 0, .42) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .48) 0%, transparent 26%, transparent 58%, rgba(14, 22, 21, .9) 100%);
}
/* Pufferanzeige: wie weit der Film ab Beginn geladen ist (hinter der Zeitleiste) */
.ds-lxf__puffer {
	position: absolute;
	left: 0;
	top: 0;
	height: 3px;
	width: 0;
	z-index: 5;
	background: rgba(255, 255, 255, .28);
	transition: width .3s ease;
}
/* Zeitleiste oben, waechst mit dem Scrollen */
.ds-lxf__leiste {
	position: absolute;
	left: 0;
	top: 0;
	height: 3px;
	width: 0;
	z-index: 6;
	background: linear-gradient(90deg, #63af9e, #bfe6da);
	box-shadow: 0 0 14px rgba(99, 175, 158, .8);
}
/* Brandbar: Logo links, Button rechts. Erscheint erst, wenn der Seiten-Header ausgeblendet ist (sonst zwei Logos) */
.ds-lxf__brand {
	position: absolute;
	top: 26px;
	left: 0;
	right: 0;
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 6vw;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}
body.ds-lxf-film .ds-lxf__brand { opacity: 1; pointer-events: auto; }
.ds-lxf .ds-lxf__logo { display: inline-block; line-height: 0; }
.ds-lxf .ds-lxf__logo img { width: 180px; height: 48px; max-width: none; opacity: .96; }
.ds-lxf .ds-lxf__brandcta {
	color: #ffffff;
	text-decoration: none;
	border: 1px solid #57a392;
	padding: 12px 20px;
	border-radius: 0;
	font: 400 16px/1.2 Raleway, sans-serif;
	background: #63af9e;
	transition: background-color .2s ease;
}
.ds-lxf .ds-lxf__brandcta:hover, .ds-lxf .ds-lxf__brandcta:focus-visible { background: #57a392; color: #ffffff; }
/* Textfenster */
.ds-lxf__text {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 5;
	padding: 0 6vw;
	max-width: 960px;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .5s ease, transform .5s ease;
	pointer-events: none;
}
.ds-lxf__text.ist-oben { top: 15vh; top: 15svh; }
.ds-lxf__text.ist-unten { bottom: 17vh; bottom: 17svh; }
.ds-lxf__text.ist-sichtbar { opacity: 1; transform: none; pointer-events: auto; }
/* Typografie und Buttons wie der Hero der Startseite (gemessen 16.09.2026): Eyebrow Raleway 12 px Versalien
   Laufweite 1 px, H1 Montserrat 600 Versalien Laufweite 3 px (Startseite 40,8 px), Subline Raleway 20/30 px,
   Buttons eckig, Mint #63af9e mit weisser Schrift, Raleway 17 px, 15/30 px Innenabstand */
.ds-lxf .ds-lxf__pin .ds-lxf__kick {
	display: block;
	margin: 0 0 14px;
	font: 400 12px/1.7 Raleway, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
}
.ds-lxf .ds-lxf__pin .ds-lxf__h {
	margin: 0;
	padding: 0;
	font: 600 clamp(28px, 3.2vw, 46px)/1.2 Montserrat, sans-serif;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
}
.ds-lxf .ds-lxf__hz { display: block; }
.ds-lxf .ds-lxf__pin .ds-lxf__p {
	margin: 18px 0 0;
	max-width: 620px;
	font: 400 clamp(16px, 1.4vw, 20px)/1.5 Raleway, sans-serif;
	color: #ffffff;
}
.ds-lxf__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.ds-lxf .ds-lxf__b1, .ds-lxf .ds-lxf__b2 {
	display: inline-block;
	padding: 15px 30px;
	border-radius: 0;
	font: 400 17px/1.1 Raleway, sans-serif;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.ds-lxf .ds-lxf__b1 { background: #63af9e; color: #ffffff; }
.ds-lxf .ds-lxf__b1:hover, .ds-lxf .ds-lxf__b1:focus-visible { background: #57a392; color: #ffffff; }
.ds-lxf .ds-lxf__b2 { border: 1px solid #ffffff; color: #ffffff; padding: 14px 29px; }
.ds-lxf .ds-lxf__b2:hover, .ds-lxf .ds-lxf__b2:focus-visible { background: #ffffff; color: #1f1f1f; }
.ds-lxf .ds-lxf__b1:focus-visible, .ds-lxf .ds-lxf__b2:focus-visible, .ds-lxf .ds-lxf__brandcta:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.ds-lxf__hinweis {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 7;
	font: 400 12px/1.4 Raleway, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
	opacity: 1;
	transition: opacity .4s ease;
	white-space: nowrap;
	animation: ds-lxf-bob 2s ease-in-out infinite;
}
.ds-lxf__hinweis.ist-weg { opacity: 0; }
@keyframes ds-lxf-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }
.ds-lxf__note {
	position: absolute;
	right: 6vw;
	bottom: 26px;
	z-index: 7;
	font: 400 11px/1.4 Raleway, sans-serif;
	letter-spacing: .08em;
	color: rgba(223, 232, 229, .7);
}
@media (max-width: 767px) {
	.ds-lxf__brand { top: 16px; padding: 0 20px; }
	.ds-lxf .ds-lxf__logo img { width: 135px; height: 36px; }
	.ds-lxf .ds-lxf__brandcta { padding: 8px 14px; font-size: 13px; }
	/* Mobil alle Textfenster oben: das Cookie-Banner deckt unten rund 40 % des Bildschirms */
	.ds-lxf__text, .ds-lxf__text.ist-oben, .ds-lxf__text.ist-unten { top: 92px; bottom: auto; padding: 0 20px; }
	.ds-lxf__vignette { background: linear-gradient(180deg, rgba(14, 22, 21, .86) 0%, rgba(14, 22, 21, .5) 40%, rgba(14, 22, 21, 0) 62%, rgba(14, 22, 21, .35) 100%); }
	.ds-lxf .ds-lxf__pin .ds-lxf__kick { margin-bottom: 10px; font-size: 11px; }
	.ds-lxf .ds-lxf__pin .ds-lxf__h { font-size: clamp(22px, 6.4vw, 30px); letter-spacing: 2px; }
	.ds-lxf .ds-lxf__pin .ds-lxf__p { margin-top: 12px; font-size: 16px; }
	.ds-lxf__cta { margin-top: 18px; gap: 10px; }
	.ds-lxf .ds-lxf__b1 { padding: 13px 22px; font-size: 16px; }
	.ds-lxf .ds-lxf__b2 { padding: 12px 21px; font-size: 16px; }
	.ds-lxf__hinweis { bottom: 14px; }
	.ds-lxf__note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ds-lxf .ds-lxf__film { display: none; }
	/* Bildsequenz aus, Poster bleibt */
	.ds-lxf .ds-lxf__poster { opacity: 1 !important; }
	.ds-lxf__text, header.fl-builder-content-39079 { transition: none; }
	.ds-lxf__hinweis { animation: none; }
}

/* Handy und Tablet bis 940 px (BB-Umbruchpunkt medium, dort erscheint die Handy-Kopfzeile): nur Logo links und
   Burger rechts auf komplett transparentem Grund, auch waehrend des Films, damit das Menue erreichbar bleibt.
   Keine zweite Logo-Leiste im Film (Martin, 16.09.2026). Nach dem Film gilt wieder der weisse Standard-Header.
   Muss nach den Header-Regeln oben stehen: gleiche Spezifitaet bei der Zeilenflaeche, spaetere Regel gewinnt. */
@media (max-width: 940px) {
	body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079,
	body.ds-lxf-seite.ds-lxf-film header.fl-builder-content-39079 {
		position: fixed !important;
		top: 0 !important;
		left: 0;
		right: 0;
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		transition: none !important;
	}
	body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .fl-row-content-wrap {
		background: transparent !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
	.ds-lxf .ds-lxf__brand { display: none !important; }
	/* Nach dem Film: BB hat beim Fixieren die Hoehe der transparenten Zeile (57 statt 33 px) gemerkt und schiebt den
	   weissen Header per transform um 56 px aus dem Bild. Wie auf den anderen Seiten sichtbar oben halten. */
	body.ds-lxf-seite.ds-lxf-nachfilm header.fl-builder-content-39079 { top: 0 !important; transform: none !important; }
}
@media (max-width: 500px) {
	/* Logo-Spalte ist nur 25 % breit (97 px), das Logo darf darueber hinaus in die leere Nachbarspalte */
	body.ds-lxf-seite:not(.ds-lxf-nachfilm) header.fl-builder-content-39079 .fl-node-5mf37qocrh2w .fl-photo-img { width: 128px !important; max-width: none !important; height: auto !important; }
}

/* Bildstrecke „Momente aus gebauten Baedern“ und Satz mit CTA (1400-px-Box, Namensraum ds-lx) */
.ds-lx { font-family: Raleway, sans-serif; color: #242424; }
.ds-lx * { box-sizing: border-box; }
.ds-lx .ds-lx__h2 {
	margin: 0 0 8px;
	padding: 0;
	font: 600 clamp(26px, 2.6vw, 34px)/1.15 Montserrat, sans-serif;
	letter-spacing: -.01em;
	text-transform: none;
	color: #242424;
}
.ds-lx .ds-lx__lead { margin: 0 0 34px; max-width: 720px; font: 400 17px/1.6 Raleway, sans-serif; color: #4b5552; }
.ds-lx__raster {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 14px;
}
.ds-lx .ds-lx__bild {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: 0;
	background: #e9eeec;
	text-decoration: none;
	color: inherit;
	box-shadow: none;
	border: 0;
}
.ds-lx .ds-lx__bild img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .6s ease; border-radius: 0; }
.ds-lx .ds-lx__bild.ist-breit { grid-column: span 7; }
.ds-lx .ds-lx__bild.ist-schmal { grid-column: span 5; }
.ds-lx .ds-lx__bild.ist-drittel { grid-column: span 4; }
.ds-lx .ds-lx__bild.ist-breit img, .ds-lx .ds-lx__bild.ist-schmal img { aspect-ratio: 3 / 2; }
.ds-lx .ds-lx__bild figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 34px 18px 14px;
	font: 500 14px/1.4 Raleway, sans-serif;
	color: #ffffff;
	background: linear-gradient(180deg, rgba(14, 22, 21, 0), rgba(14, 22, 21, .72));
}
.ds-lx .ds-lx__bild:hover img, .ds-lx .ds-lx__bild:focus-visible img { transform: scale(1.03); }
.ds-lx .ds-lx__bild:focus-visible { outline: 3px solid #2b7264; outline-offset: 3px; }
.ds-lx__satz {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 40px 60px;
	align-items: end;
}
.ds-lx .ds-lx__satz-h {
	margin: 0;
	padding: 0;
	font: 600 clamp(26px, 2.9vw, 40px)/1.18 Montserrat, sans-serif;
	letter-spacing: -.012em;
	text-transform: none;
	color: #242424;
}
.ds-lx .ds-lx__satz-p { margin: 0 0 22px; font: 400 17px/1.6 Raleway, sans-serif; color: #4b5552; }
.ds-lx__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ds-lx .ds-lx__b1, .ds-lx .ds-lx__b2 {
	display: inline-block;
	padding: 15px 30px;
	border-radius: 0;
	font: 400 17px/1.1 Raleway, sans-serif;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .2s ease, color .2s ease;
}
.ds-lx .ds-lx__b1 { background: #63af9e; color: #ffffff; }
.ds-lx .ds-lx__b1:hover, .ds-lx .ds-lx__b1:focus-visible { background: #57a392; color: #ffffff; }
.ds-lx .ds-lx__b2 { background: #1f1f1f; color: #ffffff; }
.ds-lx .ds-lx__b2:hover, .ds-lx .ds-lx__b2:focus-visible { background: #070505; color: #ffffff; }
.ds-lx .ds-lx__b1:focus-visible, .ds-lx .ds-lx__b2:focus-visible { outline: 2px solid #2b7264; outline-offset: 3px; }
@media (max-width: 991px) {
	.ds-lx__raster { gap: 10px; }
	.ds-lx .ds-lx__bild.ist-breit, .ds-lx .ds-lx__bild.ist-schmal { grid-column: span 6; }
	.ds-lx .ds-lx__bild.ist-drittel { grid-column: span 4; }
	.ds-lx__satz { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
	.ds-lx .ds-lx__bild.ist-breit, .ds-lx .ds-lx__bild.ist-schmal { grid-column: span 12; }
	.ds-lx .ds-lx__bild.ist-drittel { grid-column: span 6; }
	.ds-lx .ds-lx__bild.ist-drittel:last-child { grid-column: span 12; }
	.ds-lx .ds-lx__bild.ist-drittel:last-child img { aspect-ratio: 3 / 2; }
	.ds-lx .ds-lx__bild figcaption { padding: 26px 12px 10px; font-size: 13px; }
	.ds-lx .ds-lx__lead { margin-bottom: 22px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.ds-lx .ds-lx__bild img { transition: none; }
}