/*
 WRS Immobilien & Auktionen – Teaser
 Farben und Typografie nach dem Corporate Design (WRS_Corporate_Template)
 ----------------------------------------*/

/*
 Lokale Webfonts (keine externen Requests):
 Caladea / Carlito sind metrisch kompatibel zu Cambria / Calibri (SIL OFL 1.1).
 Sie stehen im font-family-Stack hinter Cambria / Calibri – der Browser lädt
 sie daher nur, wenn diese Systemschriften nicht installiert sind.
*/
@font-face {
	font-family: 'Caladea';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Caladea'), local('Caladea-Regular'),
	url('../fonts/caladea/caladea-latin-400-normal.woff2') format('woff2'),
	url('../fonts/caladea/caladea-latin-400-normal.woff') format('woff');
}
@font-face {
	font-family: 'Caladea';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Caladea Bold'), local('Caladea-Bold'),
	url('../fonts/caladea/caladea-latin-700-normal.woff2') format('woff2'),
	url('../fonts/caladea/caladea-latin-700-normal.woff') format('woff');
}
@font-face {
	font-family: 'Carlito';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Carlito'), local('Carlito-Regular'),
	url('../fonts/carlito/carlito-latin-400-normal.woff2') format('woff2'),
	url('../fonts/carlito/carlito-latin-400-normal.woff') format('woff');
}
@font-face {
	font-family: 'Carlito';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: local('Carlito Italic'), local('Carlito-Italic'),
	url('../fonts/carlito/carlito-latin-400-italic.woff2') format('woff2'),
	url('../fonts/carlito/carlito-latin-400-italic.woff') format('woff');
}
@font-face {
	font-family: 'Carlito';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Carlito Bold'), local('Carlito-Bold'),
	url('../fonts/carlito/carlito-latin-700-normal.woff2') format('woff2'),
	url('../fonts/carlito/carlito-latin-700-normal.woff') format('woff');
}

.wrs-teaser {
	--wrs-navy: #1c1f26;
	--wrs-card: #2a2e38;
	--wrs-gold: #c9a24b;
	--wrs-gold-light: #d9bc78;
	--wrs-muted: #b8bcc4;
	--wrs-serif: Cambria, Caladea, Georgia, "Times New Roman", serif;
	--wrs-sans: Calibri, Carlito, "Open Sans", "Helvetica Neue", Arial, sans-serif;

	position: relative;
	z-index: 30; /* über dem Slider, damit der Verlauf das Bild überlagert */
	background: var(--wrs-navy);
	color: var(--wrs-muted);
	font-family: var(--wrs-sans);
	padding: 90px 0 0;
}
.wrs-teaser .wrs-row {
	padding-bottom: 60px;
}

/* Übergang oben: Hero-Bild läuft weich ins Navy aus */
.wrs-teaser::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 140px;
	background: linear-gradient(to bottom, rgba(28, 31, 38, 0) 0%, rgba(28, 31, 38, .55) 55%, var(--wrs-navy) 100%);
	pointer-events: none;
}

/* Abschluss unten: feine Goldlinie, zu den Rändern auslaufend */
.wrs-teaser::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(to right, rgba(201, 162, 75, 0) 0%, var(--wrs-gold) 25%, var(--wrs-gold) 75%, rgba(201, 162, 75, 0) 100%);
}

.wrs-teaser .container {
	position: relative;
	z-index: 1;
}

/* Logo */
.wrs-logo {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 10px;
}
.wrs-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--wrs-gold);
	color: var(--wrs-navy);
	font-family: var(--wrs-serif);
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
}
.wrs-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.wrs-logo-text strong {
	color: #fff;
	font-family: var(--wrs-serif);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .02em;
}
.wrs-logo-text small {
	margin-top: 6px;
	color: var(--wrs-gold);
	font-size: 10px;
	letter-spacing: .32em;
	text-transform: uppercase;
}
.wrs-teaser p.wrs-brand-note {
	margin: 0 0 56px;
	font-size: 13px;
	font-style: italic;
	color: var(--wrs-muted);
}

/* Eyebrow mit Goldstrich */
.wrs-teaser p.wrs-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	color: var(--wrs-gold);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
}
.wrs-teaser p.wrs-eyebrow::before {
	content: "";
	width: 32px;
	height: 4px;
	background: var(--wrs-gold);
}

.wrs-teaser h2 {
	margin: 0 0 18px;
	color: #fff;
	font-family: var(--wrs-serif);
	font-weight: 700;
	font-size: 56px;
	line-height: 1.12;
	text-transform: none;
	letter-spacing: 0;
}
.wrs-teaser p.wrs-lead {
	margin: 0 0 32px;
	color: var(--wrs-gold-light);
	font-size: 20px;
}
.wrs-teaser p {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--wrs-muted);
}
.wrs-teaser p strong {
	color: #fff;
	font-weight: 700;
}

/* Leistungs-Chips: gleich breites Raster, so viele Spalten wie passen
   (236px = breitester Chip "Nebenkostenabrechnungen" ~214px + Luft) */
.wrs-services {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
	gap: 12px;
	margin: 28px 0 30px;
	padding: 0;
	list-style: none;
}
.wrs-services li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	background: var(--wrs-card);
	border: 1px solid #3a3f4b;
	border-radius: 4px;
	color: #fff;
	font-family: var(--wrs-serif);
	font-size: 16px;
	line-height: 1.3;
	min-width: 0;
	overflow-wrap: break-word;
}
.wrs-services li::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--wrs-gold);
}

.wrs-teaser p.wrs-soon {
	display: inline-block;
	margin: 6px 0 0;
	padding-left: 16px;
	border-left: 4px solid var(--wrs-gold);
	color: #fff;
	font-family: var(--wrs-serif);
	font-size: 22px;
	font-weight: 700;
}

/* Skyline */
.wrs-skyline-wrap {
	display: flex;
	align-self: flex-end;
	justify-content: flex-end;
	margin-bottom: -60px; /* steht auf der Fußzeile auf */
}
.wrs-skyline {
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
}

/* Fußzeile */
.wrs-teaser-footer {
	position: relative;
	z-index: 1;
	margin-top: 0;
	padding: 20px 0 23px; /* + 3px Goldlinie */
	border-top: 1px solid #2a2e38;
	font-size: 13px;
	color: #6e7480;
}
.wrs-teaser-footer .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px 40px;
}
.wrs-teaser-footer .wrs-regions {
	color: var(--wrs-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}
/* Bootstrap-Clearfix stört Flexbox */
.wrs-teaser-footer .container:before,
.wrs-teaser-footer .container:after {
	display: none;
}

.wrs-row {
	display: flex;
	flex-wrap: wrap;
}
.wrs-row:before,
.wrs-row:after {
	display: none; /* Bootstrap-Clearfix stört Flexbox */
}

@media only screen and (max-width: 1199px) {
	.wrs-teaser h2 { font-size: 46px; }
	/* feste Chip-Breite statt Strecken auf volle Zeilenbreite */
	.wrs-services { grid-template-columns: repeat(auto-fill, minmax(0, 243px)); }
}

@media only screen and (max-width: 991px) {
	.wrs-teaser { padding-top: 70px; }
	.wrs-teaser::before { height: 100px; }
	.wrs-teaser h2 { font-size: 40px; }
	.wrs-skyline-wrap { justify-content: flex-start; margin-top: 30px; }
	.wrs-teaser-footer .container { flex-direction: column; align-items: flex-start; gap: 0; }
	.wrs-teaser-footer .wrs-regions {
		order: -1; /* Regionen zuerst, Marke darunter */
		width: 100%;
		margin-bottom: 14px;
		padding-bottom: 14px;
		border-bottom: 1px solid #2a2e38;
		font-size: 11px;
		letter-spacing: .14em;
	}
	.wrs-skyline { max-width: 320px; }
}

@media only screen and (max-width: 767px) {
	.wrs-teaser { padding-top: 56px; }
	.wrs-teaser p.wrs-brand-note { margin-bottom: 36px; }
	.wrs-teaser h2 { font-size: 32px; }
	.wrs-teaser p.wrs-lead { font-size: 18px; }
	.wrs-teaser::before { height: 70px; }
	.wrs-services { grid-template-columns: repeat(auto-fill, minmax(0, 225px)); }
	.wrs-services li { font-size: 15px; padding: 10px 14px; }
	.wrs-teaser p.wrs-soon { font-size: 19px; }
	.wrs-skyline { max-width: 260px; }
}