/**
* Theme Name: Arolax Child
* Description: This is a child theme of Arolex
* Author: <a href="http://themeforest.net/user/crowdytheme">CrowdyTheme</a>
* Template: arolax
* Version: 3.0.2
*/

@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/fraunces.woff2") format("woff2");
	font-weight: 500 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("assets/fonts/dmsans.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--bs-gelb: #F5C518;
}

body {
	font-family: "DM Sans", sans-serif;
}

.bs-serif,
.wcf--title,
h1,
h2,
h3 {
	font-variation-settings: "SOFT" 100;
}

.e-con::before,
.e-con::after {
	pointer-events: none;
}

.wcf--title {
	text-wrap: balance;
}

.bs-nowrap .wcf--title {
	white-space: nowrap;
}

.bs-btn a {
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.bs-btn a {
		padding-right: 28px !important;
		padding-left: 28px !important;
	}
}

.elementor-element:has(> .bs-logo) {
	flex: 0 0 auto !important;
	width: 270px !important;
}

.bs-logo,
.bs-logo img {
	width: 100% !important;
	max-width: none !important;
}

@media (max-width: 1024px) {
	.elementor-element:has(> .bs-logo) {
		width: 220px !important;
	}
}

@media (max-width: 767px) {
	.elementor-element:has(> .bs-logo) {
		width: 200px !important;
	}
}

.bs-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	object-fit: cover;
	object-position: 50% 12%;
}

/* Handy-Menue */
.mobile-menu-active .wcf-nav-menu-container {
	background: #161616 !important;
}

.mobile-menu-active .wcf-nav-item,
.mobile-menu-active .wcf-menu-close {
	border-color: #333 !important;
	color: #fff !important;
}

.mobile-menu-active .wcf-menu-close svg,
.mobile-menu-active .wcf-menu-close path {
	fill: currentColor;
}

/* Hero: Slider in der schraegen Form */
.bs-hero-slider .elementor-image-carousel-wrapper {
	-webkit-mask: url("assets/hero-form.svg") center / 100% 100% no-repeat;
	mask: url("assets/hero-form.svg") center / 100% 100% no-repeat;
	aspect-ratio: 639 / 591;
}

.bs-hero-slider .swiper-slide,
.bs-hero-slider .swiper-slide-inner,
.bs-hero-slider figure {
	height: 100%;
	margin: 0;
}

.bs-hero-slider .swiper-slide-image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 639 / 591;
	object-fit: cover;
	object-position: 50% 0;
}

.bs-hero-slider .elementor-image-carousel-caption {
	position: absolute;
	bottom: 26px;
	left: 12%;
	padding: 8px 14px;
	border-radius: 8px;
	background: #fff;
	color: #111;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

/* Projekte: ganze Seite im Browserfenster */
.bs-leiste {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 10px 14px;
	border-radius: 10px 10px 0 0;
	background: #2a2a2a;
}

.bs-leiste i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #555;
}

.bs-leiste span {
	overflow: hidden;
	margin-left: 8px;
	color: #bdbdbd;
	font-size: 13px;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bs-seite {
	flex-shrink: 0;
	width: 100%;
}

.bs-seite .elementor-widget-container {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 580 / 780;
	background: #222;
	container-type: size;
}

.bs-seite img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

a:hover .bs-seite img,
a:focus-visible .bs-seite img,
.bs-seite.bs-laeuft img {
	transform: translateY(calc(-100% + 100cqh));
	transition: transform 14s linear;
}

@media (prefers-reduced-motion: reduce) {
	a:hover .bs-seite img,
	a:focus-visible .bs-seite img,
	.bs-seite.bs-laeuft img {
		transform: none;
	}
}

/* Hero: Karte mit Foto */
.bs-card {
	overflow: hidden;
	padding: 0 !important;
}

.bs-card .elementor-widget-wcf--image img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	object-position: 50% 12%;
}

.bs-card .elementor-widget-wcf--title {
	padding: 12px 16px 0;
}

.bs-card .elementor-widget-text-editor {
	width: 100%;
	padding: 2px 16px 16px !important;
}

/* Abschluss: Formular */
.bs-form {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
}

.bs-form p {
	margin: 0 0 18px;
}

.bs-form .wpcf7-list-item {
	margin: 0;
}

.bs-form label {
	display: block;
	color: #d0d0d0;
	font-size: 15px;
}

.bs-form input[type="text"],
.bs-form input[type="email"],
.bs-form textarea {
	width: 100%;
	margin-top: 6px;
	padding: 14px 16px;
	border: 1px solid #3a3a3a;
	border-radius: 10px;
	background: #1c1c1c;
	color: #fff;
	font: inherit;
}

.bs-form input:focus,
.bs-form textarea:focus {
	border-color: var(--bs-gelb);
	outline: 2px solid var(--bs-gelb);
	outline-offset: 1px;
}

.bs-form textarea {
	height: 140px;
}

.bs-form .wpcf7-acceptance label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.bs-form a {
	color: var(--bs-gelb);
}

.bs-form input[type="submit"] {
	padding: 16px 30px;
	border: 0;
	border-radius: 12px;
	background: var(--bs-gelb);
	color: #111;
	font: 700 17px "DM Sans", sans-serif;
	cursor: pointer;
}

/* Handy: feste Leiste */
.bs-mobil-leiste {
	display: none;
}

@media (max-width: 767px) {
	.bs-card .elementor-widget-wcf--image img {
		height: 220px;
		object-position: 50% 15%;
	}

	.elementor-element-a94bd21 {
		min-height: calc((100vw - 30px) * 0.925 + 40px) !important;
	}

	.bs-hero-slider .elementor-image-carousel-caption {
		bottom: 14px;
		left: 10%;
		padding: 5px 10px;
		font-size: 13px;
	}

	.bs-portrait {
		margin-bottom: 24px;
	}

	.bs-portrait img {
		max-width: 280px !important;
	}

	.wcf-scroll-to-top {
		display: none !important;
	}

	.bs-mobil-leiste {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}

	.bs-mobil-leiste a {
		padding: 15px 8px;
		background: var(--bs-gelb);
		color: #111;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
	}

	.bs-mobil-leiste a + a {
		background: #1c1c1c;
		color: #fff;
	}

	body {
		padding-bottom: 54px;
	}
}

[data-id="591cdd26"] a {
	white-space: nowrap;
}

.elementor-widget-accordion .elementor-tab-title,
.elementor-widget-accordion .elementor-tab-title a {
	font-family: "Fraunces", serif !important;
}

.bs-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bs-btn-zweit .wcf-btn-default,
.bs-btn-zweit a {
	border: 1px solid #fff !important;
	background: transparent !important;
	color: #fff !important;
}

.bs-btn-zweit a:hover,
.bs-btn-zweit a:focus-visible {
	border-color: var(--bs-gelb) !important;
	background: var(--bs-gelb) !important;
	color: #111 !important;
}

.bs-recht h2 {
	margin: 40px 0 12px;
	color: #fff;
	font-family: "Fraunces", serif;
	font-size: 26px;
	line-height: 1.25;
}

.bs-recht h2:first-child {
	margin-top: 0;
}

.bs-recht p {
	margin: 0 0 14px;
	color: #CFCFCF;
	font-size: 17px;
	line-height: 1.65;
}

.bs-recht a {
	color: var(--bs-gelb);
	overflow-wrap: anywhere;
}

.bs-recht-quelle {
	margin-top: 32px !important;
	font-size: 14px !important;
}

.elementor-element-4470df3 .wcf--text {
	color: #A3A3A3 !important;
}

.bs-form a,
.bs-recht p a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

[data-id="591cdd26"] a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

a.wcf-btn-default:hover,
a.wcf-btn-default:focus-visible {
	color: #111 !important;
}



/* Zeilenmasken der Textanimation: Maske ist groesser als die Zeile, Unter- und Oberlaengen bleiben ganz.
   clip-path statt overflow, weil die Zeilenhoehe unserer Ueberschriften kleiner ist als die Schrift hoch. */
.anim-reveal-line,
.bs-textzeile {
	overflow: visible !important;
	clip-path: inset(-0.15em -0.12em -0.3em -0.12em);
}

/* "Kommt dir das bekannt vor": das Template schneidet hier Text am linken Rand ab (j in "jeder"). */
.elementor-element-47ac589 {
	overflow: visible !important;
}

/* Adressleiste der Projektbilder: Platz fuer Unterlaengen und das ueberhaengende g, ohne dass die Leiste hoeher wird. */
.bs-leiste span {
	margin: -3px -3px -3px 5px;
	padding: 3px;
}

/* Hero-Slider: Bildunterschrift bleibt innerhalb der schraegen Form, lange Namen brechen um. */
.bs-hero-slider .elementor-image-carousel-caption {
	max-width: 62%;
	text-wrap: balance;
}

/* ==========================================================================
   Zwischenbreiten (05.11.2026)
   Gemessen auf allen neun Seiten von 700 bis 1400 px.
   ========================================================================== */

/* Einheitlicher Seitenrand. Das Template laesst den Problem-Abschnitt (9fd8b18)
   bis 1290 px ganz ohne Rand, alle anderen haben 15 bis 20 px. */
:root {
	--bs-rand: 15px;
}

@media (min-width: 768px) {
	:root {
		--bs-rand: 24px;
	}
}

@media (min-width: 1025px) {
	:root {
		--bs-rand: 32px;
	}
}

@media (max-width: 1400px) {
	[data-elementor-type] > .e-con-boxed {
		padding-right: var(--bs-rand) !important;
		padding-left: var(--bs-rand) !important;
	}

	/* Das Einblenden von links startet 50 px versetzt und schneidet Text am Rand ab. */
	[data-settings*='"fade-from":"left"'],
	[data-settings*='"fade-from":"right"'] {
		transform: none !important;
	}
}


/* Umbrueche: kein einzelnes Wort allein in der letzten Zeile. */
.wcf--text,
.elementor-widget-text-editor p,
.elementor-tab-content p {
	text-wrap: pretty;
}

.elementor-heading-title {
	text-wrap: balance;
}

[data-id="7a42d21"] .wcf--text,
[data-id="cf692f2"] .wcf--text {
	text-wrap: balance;
}

[data-id="cf692f2"] {
	width: 100% !important;
	max-width: 100% !important;
}

/* Vier Spalten "Kommt dir das bekannt vor?": bis 1024 px zwei mal zwei statt drei plus eins. */
@media (min-width: 768px) and (max-width: 1024px) {
	[data-id="47ac589"] > .e-con:nth-child(3) {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 40px !important;
	}

	[data-id="47ac589"] > .e-con:nth-child(3) > .e-con {
		width: auto !important;
		min-width: 0;
		max-width: none !important;
	}
}

/* Grosse mittige Ueberschriften ohne Spruenge an den Elementor-Stufen. */
@media (min-width: 768px) and (max-width: 1400px) {
	[data-id="fd654c4"],
	[data-id="4848424d"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	[data-id="fd654c4"] .wcf--title,
	[data-id="4848424d"] .wcf--title {
		font-size: clamp(44px, 6.2vw, 84px) !important;
		line-height: 1.1 !important;
	}

	/* Die Stufe "Tablet" erbt sonst 95 px Zeilenhoehe bei 48 px Schrift. */
	[data-id="bs0pk01"] .wcf--title,
	[data-id="bs0tt01"] .wcf--title {
		line-height: 1.15 !important;
	}
}

/* Hero bis 1366 px: Text links, Slider rechts, Karte und Zeile darunter. */
@media (min-width: 768px) and (max-width: 1366px) {
	[data-id="b0f3054"] > .e-con-inner {
		display: grid !important;
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
		grid-template-areas:
			"text slider"
			"links slider";
		column-gap: clamp(24px, 3.4vw, 48px) !important;
		row-gap: 28px !important;
		align-items: start;
	}

	[data-id="8e68822"] {
		grid-area: text;
		width: auto !important;
		min-width: 0;
		min-height: 0 !important;
		height: auto !important;
	}

	[data-id="a94bd21"] {
		display: flex !important;
		grid-area: slider;
		align-self: center;
		width: auto !important;
		min-width: 0;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	[data-id="2d61a76"] {
		display: grid !important;
		grid-area: links;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 24px;
		align-items: center;
		width: auto !important;
		min-width: 0;
		min-height: 0 !important;
		height: auto !important;
	}

	[data-id="e470853"] {
		display: none !important;
	}

	[data-id="9668437"] {
		display: grid !important;
		grid-column: 1;
		grid-row: 1;
		grid-template-columns: 84px minmax(0, 1fr);
		grid-template-rows: 1fr 1fr;
		align-content: center;
		width: 270px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	[data-id="a5dda0f"] {
		grid-row: 1 / span 2;
		width: 84px !important;
		height: 84px;
	}

	.bs-card .elementor-widget-wcf--image img {
		height: 84px !important;
	}

	[data-id="966edcf"],
	[data-id="5452628"] {
		width: auto !important;
		padding-left: 14px !important;
	}

	[data-id="966edcf"] {
		align-self: end;
		padding-top: 0 !important;
	}

	[data-id="5452628"] {
		align-self: start;
		padding-bottom: 0 !important;
	}

	[data-id="7d47c65"] {
		grid-column: 2;
		grid-row: 1;
		width: auto !important;
		margin: 0 !important;
	}

	[data-id="87111d1"] {
		width: 100% !important;
		max-width: none !important;
	}

	[data-id="87111d1"] .wcf--title {
		font-size: clamp(40px, 5.2vw, 66px) !important;
		line-height: 1.06 !important;
	}

	[data-id="ee1e5af"] .wcf--text,
	[data-id="ee1e5af"] .wcf--text * {
		font-size: clamp(17px, 1.75vw, 20px) !important;
	}

	[data-id="ee1e5af"] > .elementor-widget-container {
		padding: 14px 0 22px !important;
	}

	[data-id="6fadac2"] {
		width: auto !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	[data-id="2d61a76"] {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
	}

	[data-id="7d47c65"] {
		grid-column: 1;
		grid-row: 2;
	}
}

/* Moin-Abschnitt: Text klebt sonst am Foto. */
@media (min-width: 768px) and (max-width: 1400px) {
	[data-id="d7fa0df"] > .e-con-inner {
		column-gap: clamp(28px, 4vw, 60px) !important;
	}

	[data-id="4f1074c7"] {
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

/* FAQ: Ueberschrift auch zwischen 768 und 880 px linksbuendig wie die Fragen. */
@media (min-width: 768px) and (max-width: 880px) {
	[data-id="ba289e3"] .wcf--title {
		text-align: left !important;
	}
}

/* Fuss: E-Mail-Adresse braucht ihre Breite, sonst wird sie rechts abgeschnitten. */
@media (min-width: 768px) and (max-width: 1400px) {
	[data-id="511f19f0"] {
		padding-right: var(--bs-rand) !important;
		padding-left: var(--bs-rand) !important;
	}

	[data-id="751587d4"] > .e-con-inner {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, auto);
		column-gap: 24px !important;
	}

	[data-id="751587d4"] > .e-con-inner > .e-con {
		width: auto !important;
		min-width: 0;
		margin-top: 0 !important;
		padding-top: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
}

@media (min-width: 768px) and (max-width: 880px) {
	[data-id="751587d4"] > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 36px !important;
	}
}

@media (min-width: 768px) and (max-width: 1100px) {
	[data-id="511f19f0"] {
		flex-direction: column !important;
	}

	[data-id="4c6019c8"],
	[data-id="454d06ac"] {
		width: 100% !important;
		padding-left: 0 !important;
		border: 0 !important;
	}

	[data-id="4c6019c8"] {
		min-height: 0 !important;
		height: auto !important;
		padding-top: 40px !important;
		padding-bottom: 0 !important;
	}

	[data-id="35878b4e"] {
		width: 220px !important;
	}
}

/* Nach-oben-Knopf: Die Plugin-Regeln kommen erst am Seitenende an, bis dahin schob er die Seite 35 px nach unten. */
.wcf-scroll-to-top {
	position: fixed;
	opacity: 0;
	visibility: hidden;
}

.e-con[tabindex="-1"]:focus {
	outline: none;
}

@media (max-width: 767px) {
	/* Fokus und Pflichtfeld-Sprung des Browsers bleiben über der Handy-Leiste (54 px). */
	html {
		scroll-padding-bottom: 70px;
	}
}

/* Hero auf niedrigen Laptop-Fenstern: Button bleibt im ersten Bild (u. a. 1366x650, 1536x730, 1280x640). */
@media (min-width: 1025px) and (max-height: 820px) {
	[data-id="b0f3054"] > .e-con-inner {
		padding-top: 24px !important;
	}

	[data-id="8e68822"] {
		padding-top: 20px !important;
	}

	[data-id="2d61a76"] {
		padding-top: 30px !important;
	}

	/* Stadtseiten haben vier Zeilen H1 und längeren Text. */
	body:not(.home) [data-id="b0f3054"] > .e-con-inner {
		padding-top: 16px !important;
	}

	body:not(.home) [data-id="8e68822"] {
		padding-top: 12px !important;
	}

	body:not(.home) [data-id="87111d1"] .wcf--title {
		font-size: clamp(44px, 4.2vw, 62px) !important;
		line-height: 1.04 !important;
	}

	body:not(.home) [data-id="ee1e5af"] .wcf--text,
	body:not(.home) [data-id="ee1e5af"] p {
		margin-bottom: 0 !important;
		font-size: 19px !important;
		line-height: 1.45 !important;
	}
}

@media (min-width: 1025px) and (max-height: 680px) {
	body:not(.home) [data-id="6fadac2"] a {
		padding-top: 19px !important;
		padding-bottom: 19px !important;
	}
}

/* Dunkler Untergrund auch beim Überziehen, native Bedienelemente dunkel. */
:root {
	color-scheme: dark;
}

html {
	background: #121212;
}

/* Fokus: eine sichtbare Linie auf allen Seiten, das Template schaltet sie bei Buttons ab. */
:focus-visible {
	outline: 2px solid var(--bs-gelb) !important;
	outline-offset: 3px;
}

[tabindex="-1"]:focus-visible {
	outline: none !important;
}

a.wcf-btn-default:focus-visible,
.bs-form input[type="submit"]:focus-visible,
.wcf-scroll-to-top:focus-visible {
	outline-color: #fff !important;
}

.wcf-nav-menu-container a:focus-visible {
	outline-offset: -3px;
}

.bs-mobil-leiste a:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: -5px;
}

.bs-mobil-leiste a:first-child:focus-visible {
	outline-color: #111 !important;
}

/* Sprunglink, nur per Tastatur sichtbar. */
.bs-skip {
	position: fixed;
	top: -80px;
	left: 12px;
	z-index: 100000;
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--bs-gelb);
	color: #111;
	font-weight: 700;
	transition: none !important;
}

.bs-skip:focus {
	top: 12px;
	color: #111;
}

/* Listenpunkt bei zweizeiligem Eintrag oben statt mittig. */
.elementor-icon-list-item:has(> .elementor-icon-list-icon) {
	align-items: flex-start !important;
}

.elementor-icon-list-item > .elementor-icon-list-icon {
	margin-top: .55em;
}

/* Handy-Menü: Fläche zum Tippen. */
.wcf-menu-hamburger,
.wcf-menu-close {
	min-width: 44px;
	min-height: 44px;
}

/* Formular */
.bs-form input[type="text"],
.bs-form input[type="email"],
.bs-form textarea {
	font-size: 16px; /* unter 16 px zoomt iOS beim Antippen in die Seite */
}

.bs-form input[type="checkbox"] {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--bs-gelb);
}

.bs-form .wpcf7-acceptance label {
	gap: 10px;
	align-items: center;
}

.bs-form input:-webkit-autofill,
.bs-form textarea:-webkit-autofill {
	box-shadow: 0 0 0 1000px #1c1c1c inset;
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
}

.bs-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #ffb4a8;
	font-size: 15px;
}

.bs-form .wpcf7-not-valid {
	border-color: #ffb4a8;
}

/* Rückmeldung des Formulars: war schwarz auf #121212. */
.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0 !important;
	padding: 12px 16px;
	border-color: var(--bs-gelb) !important;
	border-radius: 10px;
	color: #fff;
	font-size: 16px;
	line-height: 1.45;
}

/* Hero-Slider: Bildwechsel anhalten. */
.bs-hero-slider {
	position: relative;
}

.bs-slider-stopp {
	position: absolute;
	right: 19%;
	bottom: 24px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #111;
	cursor: pointer;
}

.bs-slider-stopp:hover {
	background: var(--bs-gelb);
	color: #111;
}

.bs-slider-stopp svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

@media (min-width: 768px) and (max-width: 880px) {
	.bs-slider-stopp {
		right: 5%;
	}
}

@media (max-width: 767px) {
	.bs-slider-stopp {
		right: 17%;
		bottom: 10px;
		width: 34px;
		height: 34px;
	}
}

/* Reduzierte Bewegung: keine Übergänge. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Fehlerseite dunkel wie der Rest (Vorlage 13), Button mittig. */
.elementor-element-57012726 {
	background-color: #121212 !important;
}

.elementor-element-6f276154 .wcf--title {
	color: #fff !important;
}

.elementor-element-77fdf64a,
.elementor-element-77fdf64a p {
	color: #cfcfcf !important;
}

.elementor-element-8d098e6 {
	align-self: center;
	display: flex;
	justify-content: center;
}

/* Lange Wörter passen auch bei 320 bis 360 px. */
@media (max-width: 767px) {
	.page-id-19515 h1,
	.page-id-19515 [data-id="4848424d"] .wcf--title {
		font-size: min(42px, calc((100vw - 30px) / 8)) !important;
	}

	.page-id-19546 h1 {
		font-size: min(32px, calc((100vw - 30px) / 10.9)) !important;
	}
}

/* Ohne den Einblendversatz bliebe die 320 px breite Karte sonst über dem Fensterrand. */
@media (max-width: 349px) {
	[data-id="9668437"] {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Langes Wort in der Überschrift auf schmalen Handys */
@media (max-width: 370px) {
	[data-id="045b84b"] .wcf--title {
		font-size: 34px !important;
	}
}

/* Handy: Einordnung über der H1, die untere Zeile entfällt dafür. */
.bs-dach {
	display: none;
}

@media (max-width: 767px) {
	.bs-dach {
		display: block;
		margin-bottom: 14px !important;
	}

	.bs-dach .wcf--text {
		color: #cfcfcf !important;
		font-size: 15px !important;
		line-height: 1.4 !important;
	}

	.elementor-element-7d47c65 {
		display: none !important;
	}

	/* Die Leiste verdeckt beim Tippen sonst Feld oder Button. */
	body:has(.bs-form :focus) .bs-mobil-leiste {
		display: none;
	}
}

/* Abschluss-Buttons der Abschnitte. */
.bs-cta-zeile {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 16px 28px !important;
	margin-top: 36px !important;
	padding: 0 !important;
}

.bs-cta-zeile > .elementor-element {
	width: auto !important;
}

/* Vollständiger Name in der Hero-Karte. */
.bs-card .wcf--title {
	font-size: 20px !important;
}

/* Links zu den Stadtseiten im Fließtext. */
.bs-orte a,
.bs-lokal a,
.bs-textlinks a {
	color: var(--bs-gelb);
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.bs-orte a:hover,
.bs-orte a:focus-visible,
.bs-lokal a:hover,
.bs-lokal a:focus-visible,
.bs-textlinks a:hover,
.bs-textlinks a:focus-visible {
	color: #ffd32a;
}

/* Aufklappmenü im Kopf, dunkel und per Tastatur erreichbar. */
.elementor-element-4174b7e .sub-menu {
	background: #1c1c1c !important;
	border: 1px solid #333 !important;
	border-radius: 8px;
	min-width: 280px;
	padding: 8px !important;
}

.elementor-element-4174b7e .sub-menu li {
	background: transparent !important;
}

.elementor-element-4174b7e .sub-menu a {
	display: block;
	padding: 10px 12px !important;
	color: #fff !important;
	background: transparent !important;
	border: 0 !important;
}

.elementor-element-4174b7e .sub-menu a:hover,
.elementor-element-4174b7e .sub-menu a:focus-visible {
	color: var(--bs-gelb) !important;
}

.elementor-element-4174b7e li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Handy-Menü: Unterebene wie die erste Ebene. */
.mobile-menu-active .sub-menu,
.mobile-menu-active .sub-menu li {
	background: #161616 !important;
}

.mobile-menu-active .sub-menu a {
	color: #fff !important;
	border-color: #333 !important;
}

/* Referenzen: Bildschirmseite etwas flacher, sonst wird jede Projektzeile über 800 px hoch. */
.bs-projektzeile .bs-seite .elementor-widget-container {
	aspect-ratio: 580 / 640;
}

/* Anruf-Knopf in der schmalen Über-mich-Spalte */
@media (min-width: 768px) and (max-width: 900px) {
	[data-id="452b283"] a {
		max-width: 100%;
		padding-right: 14px !important;
		padding-left: 14px !important;
		font-size: 15px !important;
	}
}

/* Unterseiten-Hero: Abstand unter der H1, auf dem Handy zuerst die Aussage */
.elementor-element-szhero1 h1 {
	margin-bottom: 14px !important;
}

@media (max-width: 880px) {
	.elementor-element-szhero1 .elementor-element-a94bd21 {
		order: 2;
	}
}

/* Hosting-Hero auf dem Handy: gleiche Zeilenzahl vor und nach dem Schriftwechsel */
@media (max-width: 767px) {
	.page-id-19644 .elementor-element-szhero1 h1 {
		font-size: 36px !important;
	}
}

/* Antwortzusage unter dem Formular */
.bs-form .bs-form-hinweis {
	margin: 14px 0 0;
	font-size: 15px;
	color: #a8a8a8;
}