/* ==========================================================================
   WBG Thalheim — Modern Design Layer
   Setzt sich ÜBER bootstrap.css/style.css/colors-main.css, aber UNTER a11y.css.
   Ziel: zeitgemäße Typografie, klares Farbsystem, weiche Schatten,
   großzügige Abstände — ohne das Markup zu verändern.
   ========================================================================== */

/* Inter — self-hosted Variable Font (ein WOFF2 deckt 400 – 800 ab).
   DSGVO-konform ohne externen Google-Request. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/InterVariable.woff2') format('woff2-variations'),
	     url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/InterVariable-Italic.woff2') format('woff2-variations'),
	     url('../fonts/InterVariable-Italic.woff2') format('woff2');
}

/* --- Design Tokens ---------------------------------------------------- */
:root {
	/* Brand */
	--wbg-navy-900: #001f3f;
	--wbg-navy-800: #002a52;
	--wbg-navy-700: #003366;
	--wbg-navy-600: #004080;
	--wbg-navy-500: #1d5099;
	--wbg-gold-500: #ffcc00;
	--wbg-gold-600: #e6b800;
	--wbg-gold-100: #fff7d6;

	/* Neutrals — leicht kühlere Slate-Skala */
	--wbg-bg:        #f7f9fc;
	--wbg-surface:   #ffffff;
	--wbg-soft:      #f1f4f9;
	--wbg-border:    #e3e8ef;
	--wbg-border-strong: #cdd5e0;
	--wbg-muted:     #6b7480;
	--wbg-ink:       #111827;
	--wbg-ink-soft:  #374151;

	/* Akzent für Erfolg / Info */
	--wbg-green-700: #1f6b2e;
	--wbg-green-500: #2c8c3f;
	--wbg-red-700:   #9a1b27;

	/* Shadows */
	--wbg-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
	--wbg-shadow-md:  0 4px 14px -2px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
	--wbg-shadow-lg:  0 18px 42px -16px rgba(15, 23, 42, 0.22), 0 6px 14px -4px rgba(15, 23, 42, 0.08);
	--wbg-shadow-xl:  0 30px 80px -24px rgba(0, 31, 63, 0.28), 0 10px 24px -6px rgba(0, 31, 63, 0.10);

	/* Radii */
	--wbg-radius-sm: 6px;
	--wbg-radius-md: 10px;
	--wbg-radius-lg: 16px;
	--wbg-radius-xl: 22px;
	--wbg-radius-pill: 999px;

	/* Typography */
	--wbg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Varela Round', system-ui, sans-serif;

	/* Layout */
	--wbg-container: 1180px;
	--wbg-gutter: 24px;
}

/* --- Base Typo -------------------------------------------------------- */
body {
	font-family: var(--wbg-font) !important;
	font-feature-settings: 'cv11', 'ss01', 'ss03';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--wbg-ink);
	background: var(--wbg-bg);
	letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wbg-font);
	color: var(--wbg-navy-700);
	letter-spacing: -0.018em;
	font-weight: 700;
	line-height: 1.18;
}
h1 { font-size: clamp(28px, 3.4vw, 44px); }
h2 { font-size: clamp(24px, 2.6vw, 34px); }
h3 { font-size: clamp(19px, 1.6vw, 23px); }

p, li {
	color: var(--wbg-ink-soft);
	line-height: 1.65;
}

a {
	color: var(--wbg-navy-600);
	text-underline-offset: 3px;
}
a:hover { color: var(--wbg-navy-800); }

/* Mache `.container` (Bootstrap-Grid) etwas großzügiger */
.container {
	max-width: var(--wbg-container);
	padding-left: var(--wbg-gutter);
	padding-right: var(--wbg-gutter);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button,
button.button,
a.button,
input[type="submit"].button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--wbg-font);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.003em;
	background: var(--wbg-navy-700);
	color: #ffffff !important;
	border: 0;
	border-radius: var(--wbg-radius-pill);
	padding: 12px 22px;
	box-shadow: var(--wbg-shadow-md);
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
}
.button:hover,
button.button:hover,
a.button:hover {
	background: var(--wbg-navy-600);
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: var(--wbg-shadow-lg);
}
.button:focus-visible,
button.button:focus-visible,
a.button:focus-visible {
	outline: 3px solid var(--wbg-gold-500);
	outline-offset: 2px;
}
.button.border {
	background: transparent;
	color: var(--wbg-navy-700) !important;
	box-shadow: inset 0 0 0 2px var(--wbg-navy-700);
}
.button.border:hover {
	background: var(--wbg-navy-700);
	color: #ffffff !important;
	box-shadow: inset 0 0 0 2px var(--wbg-navy-700), var(--wbg-shadow-md);
}

/* Gelber CTA-Akzent (kann an Buttons gehängt werden, falls gewünscht) */
.button.button--accent {
	background: var(--wbg-gold-500);
	color: var(--wbg-navy-900) !important;
	box-shadow: 0 6px 18px -4px rgba(255, 204, 0, 0.55), var(--wbg-shadow-sm);
}
.button.button--accent:hover {
	background: var(--wbg-gold-600);
	color: var(--wbg-navy-900) !important;
}

/* ==========================================================================
   Header
   Markup-Annahmen (bleiben unverändert):
   #header-container.header-style-2 > #header > .container >
     .left-side (Logo, .mmenu-trigger)
     .right-side > ul.header-widget > li (Telefon, E-Mail, .with-btn)
     #navigation.style-2 > .container > .nav-menu
   ========================================================================== */
#header-container.header-style-2 {
	background: var(--wbg-surface);
	box-shadow: 0 1px 0 var(--wbg-border), 0 8px 24px -20px rgba(0, 31, 63, 0.18);
	border-bottom: 0;
	position: relative;
	z-index: 50;
}
#header-container.header-style-2 #header {
	background: var(--wbg-surface);
	border: 0;
	padding: 0;
}
#header-container.header-style-2 #header > .container {
	display: flex !important;
	align-items: center;
	gap: 32px;
	min-height: 86px;
	padding-top: 12px;
	padding-bottom: 12px;
	max-width: var(--wbg-container);
}
/* Theme-Floats auf left/right-side abschalten, sonst kämpfen sie mit dem Flex. */
#header-container.header-style-2 .left-side,
#header-container.header-style-2 .right-side {
	float: none !important;
	width: auto !important;
}

/* Logo — etwas mehr Raum & schärferer Fokus */
#header-container.header-style-2 #logo {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	height: auto;
	line-height: 1;
}
#header-container.header-style-2 #logo a {
	display: block;
	padding: 4px 0;
	border-radius: var(--wbg-radius-sm);
}
#header-container.header-style-2 #logo img {
	max-height: 56px;
	width: auto;
	display: block;
}

/* Left/right sides */
#header-container.header-style-2 .left-side {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}
#header-container.header-style-2 .right-side {
	margin-left: auto;
	padding: 0;
	display: flex;
	align-items: center;
}

/* Header-Widgets: kompakte Info-Chips mit Icon */
#header-container.header-style-2 ul.header-widget {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
#header-container.header-style-2 ul.header-widget > li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
/* Telefon-Icon und Fallback-Mail-Icon (zweites li ohne <i>) */
#header-container.header-style-2 ul.header-widget > li > i,
#header-container.header-style-2 ul.header-widget > li:not(.with-btn):not(:has(> i))::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--wbg-radius-pill);
	background: var(--wbg-soft);
	color: var(--wbg-navy-700);
	font-size: 18px;
	flex: 0 0 auto;
}
#header-container.header-style-2 ul.header-widget > li:not(.with-btn):not(:has(> i))::before {
	content: "";
	background-color: var(--wbg-soft);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23003366"><path d="M4 6h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2 8 5 8-5H4Z"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}
#header-container.header-style-2 ul.header-widget .widget-content {
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 1.2;
}
#header-container.header-style-2 ul.header-widget .widget-content .title {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wbg-muted);
	font-weight: 600;
	margin: 0;
}
#header-container.header-style-2 ul.header-widget .widget-content .data,
#header-container.header-style-2 ul.header-widget .widget-content .data a {
	font-size: 15px;
	font-weight: 600;
	color: var(--wbg-navy-700);
	text-decoration: none;
	letter-spacing: -0.005em;
}
#header-container.header-style-2 ul.header-widget .widget-content .data a:hover {
	color: var(--wbg-navy-900);
	text-decoration: underline;
}

/* CTA-Button im Header */
#header-container.header-style-2 ul.header-widget li.with-btn {
	margin-left: 6px;
}
#header-container.header-style-2 ul.header-widget li.with-btn .button.border {
	padding: 11px 20px;
	font-size: 14.5px;
}

/* Mobile-Hamburger */
#header-container.header-style-2 .mmenu-trigger {
	margin: 0;
	height: auto;
	width: auto;
	background: transparent;
	border: 0;
	border-radius: 0;
}
#header-container.header-style-2 .hamburger {
	background: var(--wbg-soft);
	border-radius: var(--wbg-radius-md);
	padding: 12px;
	transition: background-color 0.15s ease;
}
#header-container.header-style-2 .hamburger:hover { background: var(--wbg-border); }
#header-container.header-style-2 .hamburger:focus-visible {
	outline: 3px solid var(--wbg-gold-500);
	outline-offset: 2px;
}
#header-container.header-style-2 .hamburger-inner,
#header-container.header-style-2 .hamburger-inner::before,
#header-container.header-style-2 .hamburger-inner::after {
	background-color: var(--wbg-navy-700) !important;
	height: 2px;
	border-radius: 2px;
}

/* Hauptnavigation: Pill-Style mit ruhigem Hover.
   WICHTIG: `#navigation` selbst behält seinen `float`-Style aus dem Theme,
   damit die Dropdown-Submenüs ihren Positionierungs-Kontext nicht verlieren.
   Nur INNERHALB des Menüs strukturieren wir um. */
#header-container.header-style-2 #navigation.style-2 {
	background: linear-gradient(180deg, var(--wbg-soft) 0%, var(--wbg-surface) 100%);
	border-top: 1px solid var(--wbg-border);
	border-bottom: 1px solid var(--wbg-border);
	padding: 0;
	float: none;
	width: 100%;
	overflow: visible;
}
#header-container.header-style-2 #navigation.style-2 .container {
	text-align: center;
	overflow: visible;
}
#header-container.header-style-2 #navigation.style-2 .nav-menu,
#header-container.header-style-2 #navigation.style-2 ul#responsive {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	float: none;
}
/* Top-Level li: kein Float (überschreibt theme), aber position:relative bleibt
   per Theme-Cascade erhalten, was wir hier explizit absichern. */
#header-container.header-style-2 #navigation.style-2 .nav-menu > li,
#header-container.header-style-2 #navigation.style-2 ul#responsive > li {
	float: none;
	margin: 0;
	padding: 0;
	background: transparent;
	position: relative;
	list-style: none;
}
#header-container.header-style-2 #navigation.style-2 .nav-menu > li > a,
#header-container.header-style-2 #navigation.style-2 ul#responsive > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 13px 24px;
	color: var(--wbg-ink);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.005em;
	text-decoration: none;
	border-radius: var(--wbg-radius-pill);
	transition: background-color 0.15s ease, color 0.15s ease;
	line-height: 1.2;
}
#header-container.header-style-2 #navigation.style-2 .nav-menu > li > a:hover,
#header-container.header-style-2 #navigation.style-2 ul#responsive > li > a:hover,
#header-container.header-style-2 #navigation.style-2 .nav-menu > li.menu-item-has-children:hover > a,
#header-container.header-style-2 #navigation.style-2 .nav-menu > li:hover > a {
	background: var(--wbg-navy-700);
	color: #ffffff;
}
#header-container.header-style-2 #navigation.style-2 .nav-menu > li.current-menu-item > a,
#header-container.header-style-2 #navigation.style-2 .nav-menu > li > a[aria-current="page"],
#header-container.header-style-2 #navigation.style-2 ul#responsive > li.current-menu-item > a {
	background: var(--wbg-navy-700);
	color: #ffffff;
}

/* Indikator-Chevron (vom Theme via :after / FontAwesome eingesetzt) –
   Abstand und Opazität ans neue Pill-Layout anpassen */
#header-container.header-style-2 #navigation.style-2 ul li > a:after {
	opacity: 0.7 !important;
	font-size: 11px !important;
	padding-left: 4px !important;
	transition: transform 0.15s ease;
}
/* Wenn es keine Kinder gibt, kein Chevron */
#header-container.header-style-2 #navigation.style-2 ul li > a:only-child:after {
	content: '' !important;
	padding: 0 !important;
}

/* ----- Dropdown-Submenüs --------------------------------------------------
   Explizite initial + hover states mit !important, damit der Cascade-Mix
   aus Bootstrap, Theme und dieser Datei keine Lücke lässt. */
#header-container.header-style-2 #navigation.style-2 ul ul {
	background: var(--wbg-surface) !important;
	border: 1px solid var(--wbg-border) !important;
	border-radius: var(--wbg-radius-lg) !important;
	box-shadow: var(--wbg-shadow-xl) !important;
	padding: 8px !important;
	min-width: 240px;
	width: auto;
	margin-top: 10px !important;
	z-index: 1000;
	display: block !important;
	left: 50% !important;
	transform: translate3d(-50%, 10px, 0) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important;
	pointer-events: none;
}
#header-container.header-style-2 #navigation.style-2 ul li:hover > ul,
#header-container.header-style-2 #navigation.style-2 ul li:focus-within > ul {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translate3d(-50%, 0, 0) !important;
	pointer-events: auto;
}
#header-container.header-style-2 #navigation.style-2 ul ul li {
	width: auto !important;
	border-bottom: 0 !important;
	background: transparent !important;
	border-radius: var(--wbg-radius-md) !important;
	float: none !important;
}
#header-container.header-style-2 #navigation.style-2 ul ul li:first-child,
#header-container.header-style-2 #navigation.style-2 ul ul li:last-child {
	border-radius: var(--wbg-radius-md) !important;
}
#header-container.header-style-2 #navigation.style-2 ul li:hover ul a,
#header-container.header-style-2 #navigation.style-2 ul ul a {
	line-height: 1.3 !important;
	padding: 10px 14px !important;
	color: var(--wbg-ink) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	border-radius: var(--wbg-radius-md) !important;
	display: block;
	white-space: nowrap;
	text-align: left;
}
#header-container.header-style-2 #navigation.style-2 ul ul li:hover {
	background: var(--wbg-soft) !important;
}
#header-container.header-style-2 #navigation.style-2 ul ul li:hover > a {
	color: var(--wbg-navy-700) !important;
}
#header-container.header-style-2 #navigation.style-2 ul ul li a:after {
	color: var(--wbg-muted) !important;
	right: 12px !important;
}
/* Dritte Ebene: rechts neben dem zweiten Level */
#header-container.header-style-2 #navigation.style-2 ul ul ul {
	top: -9px !important;
	left: 100% !important;
	margin: 0 0 0 8px !important;
	transform: translate3d(10px, 0, 0) !important;
}
#header-container.header-style-2 #navigation.style-2 ul ul li:hover > ul,
#header-container.header-style-2 #navigation.style-2 ul ul li:focus-within > ul {
	transform: translate3d(0, 0, 0) !important;
}

/* Mobile-Anpassungen */
@media (max-width: 991px) {
	#header-container.header-style-2 #header > .container {
		min-height: 72px;
		gap: 16px;
	}
	#header-container.header-style-2 ul.header-widget {
		gap: 14px;
	}
	#header-container.header-style-2 ul.header-widget > li:not(.with-btn) {
		display: none;
	}
}
@media (max-width: 640px) {
	#header-container.header-style-2 ul.header-widget li.with-btn { display: none; }
	#header-container.header-style-2 #logo img { max-height: 44px; }
}

/* ==========================================================================
   Footer
   Markup: footer#footer > .container > .row > .col-md-5 / .col-md-3 / .col-md-4
   ========================================================================== */
#footer {
	background: linear-gradient(180deg, var(--wbg-navy-800) 0%, var(--wbg-navy-900) 100%);
	color: #cdd5e0 !important;
	padding: 36px 0 20px;
	margin-top: 40px;
	position: relative;
	border-top: 0;
}
/* Akzentstreifen oben */
#footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wbg-navy-700) 0%, var(--wbg-navy-600) 50%, var(--wbg-gold-500) 100%);
}

#footer .container {
	max-width: var(--wbg-container);
}
#footer .row {
	display: grid !important;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 32px;
	margin: 0 !important;
	align-items: start;
}
#footer .row::before,
#footer .row::after {
	display: none !important;
	content: none !important;
}
#footer [class*="col-"] {
	width: auto;
	float: none;
	padding: 0;
	margin: 0;
}
/* Theme-Markup enthält eine leere col-md-3 als Spacer – komplett ausblenden,
   damit das Grid nur die zwei sinnvollen Spalten zeigt. */
#footer .col-md-3:empty,
#footer .col-md-3:not(:has(*)) {
	display: none;
}

#footer address {
	font-style: normal;
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 10px;
	letter-spacing: -0.005em;
}
#footer p {
	color: #cdd5e0 !important;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 8px;
}
#footer a {
	color: #ffffff !important;
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	padding-bottom: 1px;
	transition: border-color 0.15s ease, color 0.15s ease;
}
#footer a:hover,
#footer a:focus-visible {
	color: var(--wbg-gold-500) !important;
	border-bottom-color: var(--wbg-gold-500);
}

/* Mitgliedssiegel (.vdw) — auf weißer Pille, gleichmäßig groß */
#footer .vdw {
	height: 44px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	background: #ffffff;
	border-radius: var(--wbg-radius-sm);
	padding: 5px 8px;
	box-shadow: var(--wbg-shadow-sm);
	display: inline-block;
	vertical-align: middle;
	margin: 0;
}
#footer .text-widget.text-right {
	text-align: left;
}
#footer .text-widget > p:first-child {
	margin-bottom: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
#footer .text-widget p { margin-bottom: 10px; }
#footer .text-widget nav p {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.6) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	padding-top: 12px;
	margin-top: 4px;
	line-height: 1.7;
}
#footer .text-widget nav a {
	border-bottom: 0;
}
#footer .text-widget nav a:hover {
	color: var(--wbg-gold-500) !important;
}

@media (max-width: 900px) {
	#footer { padding: 28px 0 18px; margin-top: 28px; }
	#footer .row {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	#footer .col-md-3:empty { display: none; }
}

/* Back-to-Top */
#backtotop a {
	background: var(--wbg-navy-700) !important;
	border-radius: var(--wbg-radius-pill) !important;
	box-shadow: var(--wbg-shadow-lg) !important;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
#backtotop a:hover {
	background: var(--wbg-navy-900) !important;
	transform: translateY(-2px);
}

/* ==========================================================================
   Startseite — Hero / Parallax
   Markup: .parallax > form > .container > .row > .col-md-12 > .search-container
   ========================================================================== */
.parallax {
	position: relative;
	min-height: 620px;
	padding: 96px 0 110px;
	background-size: cover !important;
	background-position: center !important;
	display: flex;
	align-items: center;
}
/* Sanfter Navy-Verlauf zusätzlich zum Theme-Overlay aus data-color/-opacity.
   Niedrig gehalten, damit das Headerbild durchschimmert. */
.parallax::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 31, 63, 0.35) 0%, rgba(0, 31, 63, 0.10) 45%, rgba(0, 31, 63, 0.45) 100%);
	z-index: 1;
	pointer-events: none;
}
.parallax > form,
.parallax .container,
.parallax .row,
.parallax .col-md-12 {
	position: relative;
	z-index: 2;
}
.parallax > form { width: 100%; flex: 1 1 auto; }
.parallax .container { max-width: var(--wbg-container); margin: 0 auto; }
.parallax .row {
	display: block;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.parallax .col-md-12 {
	width: 100% !important;
	padding: 0 !important;
	float: none !important;
}

/* Suchcontainer als schwebende, leicht milchige Glas-Karte unter der Headline */
.parallax .search-container {
	max-width: 980px;
	margin: 0 auto;
	color: #ffffff;
}

/* Headline */
.parallax .hero-headline {
	color: #ffffff !important;
	font-size: clamp(34px, 5.5vw, 64px) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.028em !important;
	text-align: center;
	margin: 0 auto 42px !important;
	max-width: 900px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
}
.parallax .hero-headline__sub {
	display: block;
	margin-top: 8px;
	color: var(--wbg-gold-500) !important;
	font-weight: 800;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}

/* Such-Karte: Bootstrap-konforme Spaltenverhältnisse (col-md-3 / 3 / 2 / 4 = 12) */
.parallax .row.with-forms {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border-radius: var(--wbg-radius-xl);
	box-shadow: var(--wbg-shadow-xl);
	padding: 14px;
	display: grid !important;
	grid-template-columns: 3fr 3fr 2fr 4fr;
	gap: 10px;
	align-items: stretch;
	margin: 0 auto !important;
	max-width: 1060px;
}
.parallax .row.with-forms::before,
.parallax .row.with-forms::after {
	display: none !important;
	content: none !important;
}
.parallax .row.with-forms > [class*="col-"] {
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	min-width: 0 !important;
	max-width: none !important;
}

/* Chosen-Selects in der Hero-Karte: groß, klar, ohne Doppelrand */
.parallax .chosen-container,
.parallax .chosen-container-single {
	width: 100% !important;
	font-family: var(--wbg-font);
}
.parallax .chosen-container-single .chosen-single {
	height: 52px;
	line-height: 52px;
	padding: 0 18px;
	background: var(--wbg-soft) !important;
	border: 1.5px solid transparent !important;
	border-radius: var(--wbg-radius-md) !important;
	box-shadow: none !important;
	color: var(--wbg-ink) !important;
	font-size: 15px;
	font-weight: 600;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.parallax .chosen-container-single .chosen-single:hover {
	background: #ffffff !important;
	border-color: var(--wbg-navy-700) !important;
}
.parallax .chosen-container-active.chosen-with-drop .chosen-single,
.parallax .chosen-container-active .chosen-single {
	background: #ffffff !important;
	border-color: var(--wbg-navy-700) !important;
	box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.12) !important;
}
.parallax .chosen-container-single .chosen-single div b {
	background-position: 0 18px !important;
}
.parallax .chosen-container .chosen-drop {
	border: 1px solid var(--wbg-border) !important;
	border-radius: var(--wbg-radius-md) !important;
	box-shadow: var(--wbg-shadow-lg) !important;
	margin-top: 6px;
	overflow: hidden;
}
.parallax .chosen-container .chosen-results li {
	padding: 10px 16px !important;
	font-size: 14.5px;
	color: var(--wbg-ink) !important;
}
.parallax .chosen-container .chosen-results li.highlighted {
	background: var(--wbg-navy-700) !important;
	color: #ffffff !important;
}

/* Main-Search-Input: enthält das Wohnflächen-Select + Submit-Button */
.parallax .main-search-input {
	display: flex;
	align-items: stretch;
	gap: 8px;
	height: 52px;
	position: relative;
	background: transparent;
	border: 0;
	padding: 0;
}
.parallax .main-search-input > .chosen-container { flex: 1 1 auto; }
.parallax .main-search-input > button.button {
	flex: 0 0 auto;
	height: 52px;
	width: 52px;
	border-radius: var(--wbg-radius-md);
	padding: 0;
	background: var(--wbg-navy-700);
	color: #ffffff !important;
	font-size: 18px;
	box-shadow: var(--wbg-shadow-md);
}
.parallax .main-search-input > button.button:hover {
	background: var(--wbg-navy-600);
	transform: none;
}
.parallax .main-search-input > button.button i.fa { color: #ffffff !important; }

/* „Erweiterte Suche"-Link unter der Karte */
.parallax .adv-search-btn {
	margin-top: 18px;
	text-align: center;
	color: #ffffff !important;
	font-size: 15px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.parallax .adv-search-btn a {
	color: var(--wbg-gold-500) !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	margin-left: 4px;
}
.parallax .adv-search-btn a:hover {
	color: #ffffff !important;
}

@media (max-width: 900px) {
	.parallax {
		min-height: 560px;
		padding: 72px 0 80px;
	}
	.parallax .row.with-forms {
		grid-template-columns: 1fr 1fr;
		padding: 12px;
	}
}
@media (max-width: 600px) {
	.parallax {
		min-height: 520px;
		padding: 56px 0 64px;
	}
	.parallax .row.with-forms {
		grid-template-columns: 1fr;
		padding: 10px;
	}
	.parallax .main-search-input > button.button {
		width: 52px;
	}
}

/* Bereich UNTER dem Hero: kein graustichiger „fullwidth-light"-Block mehr,
   sondern saubere Inhalts-Sektion mit Sidebar */
section.fullwidth-light {
	background: var(--wbg-bg) !important;
	padding: 72px 0;
	border-top: 0;
	border-bottom: 0;
}
section.fullwidth-light .row {
	display: grid !important;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin: 0 !important;
}
/* Bootstrap-Clearfix-Pseudoelemente unsichtbar halten — sonst werden sie
   in einem Grid-Container zu Grid-Items und verschieben den Inhalt. */
section.fullwidth-light .row::before,
section.fullwidth-light .row::after {
	display: none !important;
	content: none !important;
}
section.fullwidth-light [class*="col-"] {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0;
}
section.fullwidth-light article {
	background: var(--wbg-surface);
	border: 1px solid var(--wbg-border);
	border-radius: var(--wbg-radius-lg);
	padding: 32px 36px;
	box-shadow: var(--wbg-shadow-sm);
}
section.fullwidth-light article > :first-child { margin-top: 0; }
section.fullwidth-light article > :last-child { margin-bottom: 0; }
section.fullwidth-light .contact-box {
	background: linear-gradient(160deg, var(--wbg-navy-700) 0%, var(--wbg-navy-900) 100%);
	color: #ffffff;
	border-radius: var(--wbg-radius-lg);
	padding: 32px 28px;
	box-shadow: var(--wbg-shadow-lg);
	position: relative;
	overflow: hidden;
}
section.fullwidth-light .contact-box::before {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 160px;
	height: 160px;
	background: radial-gradient(circle, rgba(255, 204, 0, 0.20) 0%, transparent 70%);
	pointer-events: none;
}
section.fullwidth-light .contact-box,
section.fullwidth-light .contact-box * {
	color: #ffffff;
}
section.fullwidth-light .contact-box a {
	color: var(--wbg-gold-500);
	text-decoration: underline;
	text-underline-offset: 3px;
}
section.fullwidth-light .contact-box a:hover { color: #ffffff; }
section.fullwidth-light .contact-box h1,
section.fullwidth-light .contact-box h2,
section.fullwidth-light .contact-box h3,
section.fullwidth-light .contact-box h4 {
	color: #ffffff;
	margin-top: 0;
}

@media (max-width: 900px) {
	section.fullwidth-light { padding: 48px 0; }
	section.fullwidth-light .row {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	section.fullwidth-light article { padding: 28px 24px; }
}

/* ==========================================================================
   FeWo-Listing & Cards
   Markup: ul.wbg-fewo-liste.wbg-fewo-liste--cols-N >
             li.wbg-fewo-liste__item >
               a.wbg-fewo-liste__link >
                 img.wbg-fewo-liste__img | span.wbg-fewo-liste__noimg
                 div.wbg-fewo-liste__body >
                   h3.wbg-fewo-liste__title
                   p.wbg-fewo-liste__facts
                   p.wbg-fewo-liste__excerpt
                   p.wbg-fewo-liste__price > strong + span
                   span.wbg-fewo-liste__cta
   Spezifität bewusst erhöht (ul.wbg-fewo-liste …), damit die generischen
   Styles aus a11y.css überschrieben werden, ohne Mode-Overrides zu brechen.
   ========================================================================== */
ul.wbg-fewo-liste {
	list-style: none;
	margin: 32px 0;
	padding: 0;
	display: grid;
	gap: 28px;
}
ul.wbg-fewo-liste.wbg-fewo-liste--cols-1 { grid-template-columns: 1fr; }
ul.wbg-fewo-liste.wbg-fewo-liste--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.wbg-fewo-liste.wbg-fewo-liste--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.wbg-fewo-liste.wbg-fewo-liste--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
	ul.wbg-fewo-liste.wbg-fewo-liste--cols-3,
	ul.wbg-fewo-liste.wbg-fewo-liste--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	ul.wbg-fewo-liste.wbg-fewo-liste--cols-2,
	ul.wbg-fewo-liste.wbg-fewo-liste--cols-3,
	ul.wbg-fewo-liste.wbg-fewo-liste--cols-4 { grid-template-columns: 1fr; }
}

ul.wbg-fewo-liste .wbg-fewo-liste__item {
	background: var(--wbg-surface);
	border: 1px solid var(--wbg-border);
	border-radius: var(--wbg-radius-lg);
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.2s ease;
	position: relative;
	box-shadow: var(--wbg-shadow-sm);
}
ul.wbg-fewo-liste .wbg-fewo-liste__item:hover,
ul.wbg-fewo-liste .wbg-fewo-liste__item:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--wbg-shadow-xl);
	border-color: var(--wbg-border-strong);
}

ul.wbg-fewo-liste .wbg-fewo-liste__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	height: 100%;
	border: 0;
}
ul.wbg-fewo-liste .wbg-fewo-liste__link:hover,
ul.wbg-fewo-liste .wbg-fewo-liste__link:focus-visible {
	color: inherit;
	text-decoration: none;
}

/* Bild-Bereich mit Zoom-Effekt auf Hover */
ul.wbg-fewo-liste .wbg-fewo-liste__img,
ul.wbg-fewo-liste .wbg-fewo-liste__noimg {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Fallback für Browser ohne aspect-ratio: fixe Höhe */
@supports not (aspect-ratio: 4 / 3) {
	ul.wbg-fewo-liste .wbg-fewo-liste__img,
	ul.wbg-fewo-liste .wbg-fewo-liste__noimg { height: 220px; aspect-ratio: auto; }
}
ul.wbg-fewo-liste .wbg-fewo-liste__noimg {
	background: linear-gradient(135deg, var(--wbg-soft) 0%, var(--wbg-border) 100%);
	position: relative;
}
ul.wbg-fewo-liste .wbg-fewo-liste__noimg::after {
	content: "Foto folgt";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--wbg-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
ul.wbg-fewo-liste .wbg-fewo-liste__item:hover .wbg-fewo-liste__img,
ul.wbg-fewo-liste .wbg-fewo-liste__item:focus-within .wbg-fewo-liste__img {
	transform: scale(1.06);
}

/* Body */
ul.wbg-fewo-liste .wbg-fewo-liste__body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
ul.wbg-fewo-liste .wbg-fewo-liste__title {
	margin: 0;
	color: var(--wbg-navy-700);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
}
ul.wbg-fewo-liste .wbg-fewo-liste__facts {
	margin: 0;
	color: var(--wbg-muted);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.005em;
}
ul.wbg-fewo-liste .wbg-fewo-liste__excerpt {
	margin: 4px 0 0;
	color: var(--wbg-ink-soft);
	font-size: 15px;
	line-height: 1.55;
}
ul.wbg-fewo-liste .wbg-fewo-liste__price {
	margin: 12px 0 0;
	font-size: 17px;
	color: var(--wbg-navy-700);
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-weight: 700;
}
ul.wbg-fewo-liste .wbg-fewo-liste__price strong {
	font-size: 19px;
	font-weight: 800;
	color: var(--wbg-navy-700);
	letter-spacing: -0.01em;
}
ul.wbg-fewo-liste .wbg-fewo-liste__price span {
	font-weight: 500;
	color: var(--wbg-muted);
	font-size: 13.5px;
}
/* CTA als pillenförmiger Hinweis-Tag, der unten klebt */
ul.wbg-fewo-liste .wbg-fewo-liste__cta {
	margin-top: auto;
	padding-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wbg-navy-700);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.005em;
	transition: gap 0.2s ease, color 0.2s ease;
}
ul.wbg-fewo-liste .wbg-fewo-liste__item:hover .wbg-fewo-liste__cta {
	gap: 12px;
	color: var(--wbg-navy-900);
}

/* Hinweis: a11y.css' :focus-visible setzt einen sichtbaren Fokus-Ring auf
   den a-Tag — der bleibt erhalten und wird durch hidden overflow nicht
   geclippt, weil wir `overflow:hidden` nur auf der CARD haben. */

/* ==========================================================================
   FeWo-Detailseite (single-fewo.php)
   ========================================================================== */
article.wbg-fewo-single {
	padding: 48px 0 64px;
}
article.wbg-fewo-single > .container {
	max-width: var(--wbg-container) !important;
	margin: 0 auto !important;
	padding: 0 var(--wbg-gutter) !important;
}

/* Kopfbereich */
article.wbg-fewo-single .wbg-fewo-single__header {
	margin-bottom: 36px;
}
article.wbg-fewo-single .wbg-fewo-single__back {
	margin: 0 0 18px;
}
article.wbg-fewo-single .wbg-fewo-single__back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 14px;
	background: var(--wbg-soft);
	color: var(--wbg-navy-700);
	border-radius: var(--wbg-radius-pill);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
article.wbg-fewo-single .wbg-fewo-single__back a:hover {
	background: var(--wbg-border);
	transform: translateX(-2px);
	color: var(--wbg-navy-900);
}
article.wbg-fewo-single .wbg-fewo-single__header h1 {
	margin: 0 0 12px;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 800;
	color: var(--wbg-navy-700);
	letter-spacing: -0.025em;
	line-height: 1.1;
}
article.wbg-fewo-single .wbg-fewo-single__address {
	margin: 0;
	color: var(--wbg-muted);
	font-size: 16px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
article.wbg-fewo-single .wbg-fewo-single__address::before {
	content: "";
	width: 18px;
	height: 18px;
	display: inline-block;
	background-color: currentColor;
	flex: 0 0 auto;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"/></svg>') no-repeat center / contain;
}

/* Inhaltsbereich: typografische Hierarchie */
article.wbg-fewo-single .wbg-fewo-single__content {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--wbg-ink-soft);
}
article.wbg-fewo-single .wbg-fewo-single__content h2,
article.wbg-fewo-single .wbg-fewo-single__content h3 {
	margin: 36px 0 14px;
	color: var(--wbg-navy-700);
	letter-spacing: -0.015em;
}
article.wbg-fewo-single .wbg-fewo-single__content h2 { font-size: 26px; }
article.wbg-fewo-single .wbg-fewo-single__content h3 { font-size: 20px; }
article.wbg-fewo-single .wbg-fewo-single__content p { margin: 0 0 16px; }

/* Galerie */
.wbg-fewo-gallery-front {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr !important;
	grid-auto-rows: 200px;
	gap: 10px !important;
	margin: 20px 0 36px !important;
	border-radius: var(--wbg-radius-lg);
	overflow: hidden;
}
.wbg-fewo-gallery-front > a {
	display: block !important;
	overflow: hidden;
	border-radius: var(--wbg-radius-md);
	position: relative;
	background: var(--wbg-soft);
}
.wbg-fewo-gallery-front > a:first-child {
	grid-row: span 2;
	grid-column: span 1;
}
.wbg-fewo-gallery-front > a img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wbg-fewo-gallery-front > a:hover img,
.wbg-fewo-gallery-front > a:focus-visible img {
	transform: scale(1.06) !important;
}
@media (max-width: 700px) {
	.wbg-fewo-gallery-front {
		grid-template-columns: 1fr 1fr !important;
		grid-auto-rows: 140px;
	}
	.wbg-fewo-gallery-front > a:first-child {
		grid-column: span 2;
		grid-row: span 1;
	}
}

/* Meta-Daten als saubere Definition-List */
dl.wbg-fewo-meta {
	display: grid !important;
	grid-template-columns: max-content 1fr !important;
	gap: 10px 24px !important;
	margin: 24px 0 32px !important;
	background: linear-gradient(160deg, var(--wbg-soft) 0%, var(--wbg-surface) 100%) !important;
	border: 1px solid var(--wbg-border) !important;
	padding: 24px 28px !important;
	border-radius: var(--wbg-radius-lg) !important;
	box-shadow: var(--wbg-shadow-sm);
}
dl.wbg-fewo-meta dt {
	font-weight: 600 !important;
	color: var(--wbg-muted) !important;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-top: 4px;
}
dl.wbg-fewo-meta dd {
	margin: 0 !important;
	color: var(--wbg-ink) !important;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

/* Ausstattung als Chip-Liste */
ul.wbg-fewo-ausstattung {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 10px !important;
	padding: 0 !important;
	list-style: none;
	margin: 12px 0 36px !important;
}
ul.wbg-fewo-ausstattung li {
	padding: 12px 14px 12px 38px !important;
	position: relative;
	background: var(--wbg-surface);
	border: 1px solid var(--wbg-border);
	border-radius: var(--wbg-radius-md);
	font-size: 14.5px;
	color: var(--wbg-ink);
	font-weight: 500;
}
ul.wbg-fewo-ausstattung li::before {
	content: "" !important;
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wbg-green-500);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4Z"/></svg>') !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	color: transparent !important;
	font-weight: normal !important;
}

/* Belegungskalender — moderne Monatskarten */
.wbg-fewo-kalender {
	margin: 32px 0 48px;
	padding: 28px;
	background: var(--wbg-surface);
	border: 1px solid var(--wbg-border);
	border-radius: var(--wbg-radius-lg);
	box-shadow: var(--wbg-shadow-sm);
}
.wbg-fewo-kalender .wbg-fewo-kalender {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
	gap: 20px !important;
	margin: 0 !important;
}
.wbg-fewo-kalender__month {
	border: 1px solid var(--wbg-border) !important;
	border-radius: var(--wbg-radius-md) !important;
	padding: 16px !important;
	background: var(--wbg-surface) !important;
}
.wbg-fewo-kalender__title {
	margin: 0 0 12px !important;
	font-size: 15px !important;
	font-weight: 700;
	color: var(--wbg-navy-700) !important;
	letter-spacing: -0.005em;
	text-transform: capitalize;
}
.wbg-fewo-kalender__day-name {
	font-size: 11px !important;
	color: var(--wbg-muted) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.wbg-fewo-kalender__day {
	font-size: 13px !important;
	border-radius: var(--wbg-radius-sm) !important;
	font-weight: 500;
	transition: transform 0.1s ease;
}
.wbg-fewo-kalender__day:not(.wbg-fewo-kalender__day--empty):hover {
	transform: scale(1.06);
}
.wbg-fewo-kalender__day--booked {
	background: var(--wbg-red-700) !important;
	color: #ffffff !important;
	font-weight: 600;
}
.wbg-fewo-kalender__day--past {
	background: var(--wbg-soft) !important;
	color: var(--wbg-muted) !important;
}
.wbg-fewo-kalender__day--today {
	box-shadow: inset 0 0 0 2px var(--wbg-navy-700) !important;
	border-color: transparent !important;
}
.wbg-fewo-kalender__legend {
	margin-top: 20px !important;
	padding-top: 16px;
	border-top: 1px solid var(--wbg-border);
	font-size: 13px !important;
	color: var(--wbg-ink-soft);
}
.wbg-fewo-kalender__legend-swatch {
	border-radius: 3px !important;
	border: 1px solid var(--wbg-border);
}

/* Anfrageformular */
form.wbg-fewo-anfrage {
	background: linear-gradient(165deg, var(--wbg-surface) 0%, var(--wbg-soft) 100%) !important;
	border: 1px solid var(--wbg-border) !important;
	border-radius: var(--wbg-radius-lg) !important;
	padding: 32px 32px 28px !important;
	margin: 32px 0 !important;
	box-shadow: var(--wbg-shadow-md);
}
form.wbg-fewo-anfrage h3 {
	margin: 0 0 18px !important;
	color: var(--wbg-navy-700) !important;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.015em;
}
form.wbg-fewo-anfrage label {
	font-size: 13px !important;
	font-weight: 600;
	color: var(--wbg-ink-soft) !important;
	letter-spacing: 0.005em;
	margin: 14px 0 6px !important;
}
form.wbg-fewo-anfrage input,
form.wbg-fewo-anfrage textarea,
form.wbg-fewo-anfrage select {
	padding: 12px 14px !important;
	border: 1.5px solid var(--wbg-border-strong) !important;
	border-radius: var(--wbg-radius-md) !important;
	font: inherit;
	background: #ffffff !important;
	color: var(--wbg-ink) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: var(--wbg-font);
}
form.wbg-fewo-anfrage input:hover,
form.wbg-fewo-anfrage textarea:hover,
form.wbg-fewo-anfrage select:hover {
	border-color: var(--wbg-muted) !important;
}
form.wbg-fewo-anfrage input:focus,
form.wbg-fewo-anfrage textarea:focus,
form.wbg-fewo-anfrage select:focus {
	border-color: var(--wbg-navy-700) !important;
	box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.10) !important;
	outline: 0 !important;
}
form.wbg-fewo-anfrage .wbg-fewo-anfrage__row {
	gap: 16px !important;
}
form.wbg-fewo-anfrage .wbg-fewo-anfrage__submit {
	background: var(--wbg-navy-700) !important;
	color: #ffffff !important;
	border: 0 !important;
	padding: 14px 28px !important;
	border-radius: var(--wbg-radius-pill) !important;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.003em;
	margin-top: 22px !important;
	box-shadow: var(--wbg-shadow-md);
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
form.wbg-fewo-anfrage .wbg-fewo-anfrage__submit:hover,
form.wbg-fewo-anfrage .wbg-fewo-anfrage__submit:focus-visible {
	background: var(--wbg-navy-600) !important;
	transform: translateY(-1px);
	box-shadow: var(--wbg-shadow-lg);
}
form.wbg-fewo-anfrage .wbg-fewo-anfrage__notice {
	padding: 14px 18px !important;
	border-radius: var(--wbg-radius-md) !important;
	font-size: 14.5px;
	font-weight: 500;
	margin-bottom: 18px !important;
}
form.wbg-fewo-anfrage .wbg-fewo-anfrage__notice--ok {
	background: #eaf7ec !important;
	border: 1px solid var(--wbg-green-500) !important;
	color: var(--wbg-green-700) !important;
}
form.wbg-fewo-anfrage .wbg-fewo-anfrage__notice--err {
	background: #fdecea !important;
	border: 1px solid var(--wbg-red-700) !important;
	color: var(--wbg-red-700) !important;
}
form.wbg-fewo-anfrage .wbg-fewo-anfrage__error {
	color: var(--wbg-red-700) !important;
	font-size: 13.5px;
	font-weight: 500;
	margin-top: 4px;
}