/*
 * Südwestfalen Finanz & Vorsorge
 * Zentrale, FTP-taugliche Corporate-Identity-Quelle.
 *
 * Logo:
 * Diese Datei enthält bewusst kein festes Logo und kein Logo-Hintergrundbild.
 * Das Logo wird später über die WordPress-Funktion "Individuelles Logo" gesetzt.
 */

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat/montserrat-regular.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat/montserrat-italic.ttf") format("truetype");
	font-display: swap;
	font-style: italic;
	font-weight: 400;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat/montserrat-medium.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 500;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat/montserrat-semibold.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 600;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat/montserrat-bold.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 700;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat/montserrat-extrabold.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 800;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat/montserrat-black.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 900;
}

:root {
	--swfv-dark: #15393c;
	--swfv-petrol: #224e52;
	--swfv-gold: #d9ad79;
	--swfv-gold-light: #e7bf91;
	--swfv-white: #ffffff;
	--swfv-cream: #f7f5f1;
	--swfv-ink: #173134;
	--swfv-muted: #557074;
	--swfv-line: rgba(21, 57, 60, 0.16);
	--swfv-soft: #f4f8f7;
	--swfv-success: #2f8a5b;
	--swfv-warning: #f8de00;
	--swfv-error: #c93d35;

	/*
	 * SlabTallX bleibt bis zum Nachweis einer Webfont-Lizenz deaktiviert.
	 * Nach Freigabe muss nur diese Variable auf die lizenzierte Familie zeigen.
	 */
	--swfv-font-heading: "Montserrat", Arial, sans-serif;
	--swfv-font-body: "Montserrat", Arial, sans-serif;

	--swfv-weight-regular: 400;
	--swfv-weight-medium: 500;
	--swfv-weight-semibold: 600;
	--swfv-weight-bold: 700;
	--swfv-weight-extrabold: 800;
	--swfv-weight-black: 900;

	--swfv-space-1: 0.25rem;
	--swfv-space-2: 0.5rem;
	--swfv-space-3: 0.75rem;
	--swfv-space-4: 1rem;
	--swfv-space-5: 1.25rem;
	--swfv-space-6: 1.5rem;
	--swfv-space-8: 2rem;
	--swfv-space-12: 3rem;
	--swfv-space-16: 4rem;
	--swfv-space-18: 4.5rem;
	--swfv-space-22: 5.5rem;

	--swfv-radius-sm: 0.875rem;
	--swfv-radius-control: 1rem;
	--swfv-radius-card: 1.25rem;
	--swfv-radius-panel: 1.75rem;
	--swfv-radius-pill: 999px;

	--swfv-shadow-sm: 0 10px 25px rgba(21, 57, 60, 0.07);
	--swfv-shadow-card: 0 18px 45px rgba(21, 57, 60, 0.14);
	--swfv-shadow-card-strong: 0 18px 45px rgba(21, 57, 60, 0.2);
	--swfv-shadow-button: 0 12px 28px rgba(21, 57, 60, 0.24);
	--swfv-focus-ring: 0 0 0 4px rgba(217, 173, 121, 0.28);
	--swfv-content-max: 1180px;

	/* Bootstrap/OwlPress übernimmt damit ebenfalls die lokale Hausschrift. */
	--bs-font-sans-serif: var(--swfv-font-body);
	--bs-primary: var(--swfv-dark);
	--bs-secondary: var(--swfv-petrol);
}

html {
	scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
	font-family: var(--swfv-font-body);
}

body {
	background: var(--swfv-white);
	color: var(--swfv-ink);
	font-synthesis: none;
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title {
	color: var(--swfv-dark);
	font-family: var(--swfv-font-heading);
	font-synthesis: none;
	letter-spacing: -0.02em;
}

a {
	color: var(--swfv-petrol);
}

a:hover,
a:focus-visible {
	color: var(--swfv-dark);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--swfv-gold);
	outline-offset: 3px;
}

::selection {
	background: var(--swfv-gold);
	color: var(--swfv-dark);
}

/* OwlPress: CI-Übernahme ohne Änderungen an WordPress-Kerndateien. */
.navigation-wrapper,
.main-navigation,
.main-mobile-nav,
.main-mobile-build,
.header-above-bar {
	background: var(--swfv-dark);
}

.main-navigation,
.main-mobile-nav {
	border-bottom: 1px solid rgba(217, 173, 121, 0.35);
	box-shadow: 0 8px 24px rgba(21, 57, 60, 0.12);
}

.logo {
	align-items: center;
	display: flex;
	min-height: 56px;
}

.logo .custom-logo-link {
	align-items: center;
	display: inline-flex;
	min-height: 48px;
}

.logo .custom-logo {
	height: auto;
	max-height: 52px;
	max-width: 260px;
	object-fit: contain;
	width: auto;
}

.logo .site-title {
	color: var(--swfv-white);
	font-size: clamp(1rem, 2.2vw, 1.25rem);
	font-weight: var(--swfv-weight-bold);
	letter-spacing: 0.02em;
	margin: 0;
}

.logo .site-description {
	color: var(--swfv-gold);
	font-size: 0.68rem;
	font-weight: var(--swfv-weight-medium);
	letter-spacing: 0.12em;
	margin: 0.15rem 0 0;
	text-transform: uppercase;
}

.main-navbar .main-menu > li > a,
.main-mobile-build .main-menu a {
	color: var(--swfv-white);
	font-family: var(--swfv-font-body);
	font-weight: var(--swfv-weight-semibold);
}

.main-navbar .main-menu > li:hover > a,
.main-navbar .main-menu > li.focus > a,
.main-navbar .main-menu > li.current-menu-item > a,
.main-mobile-build .main-menu a:hover,
.main-mobile-build .main-menu a:focus-visible {
	color: var(--swfv-gold);
}

.btn,
.wp-element-button,
.wp-block-button__link {
	border-radius: var(--swfv-radius-pill);
	font-family: var(--swfv-font-body);
	font-weight: var(--swfv-weight-bold);
}

.btn-primary,
.btn-border-primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--swfv-gold);
	border-color: var(--swfv-gold);
	color: var(--swfv-dark);
}

.btn-primary:hover,
.btn-border-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--swfv-gold-light);
	border-color: var(--swfv-gold-light);
	color: var(--swfv-dark);
	transform: translateY(-2px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--swfv-petrol);
	color: var(--swfv-petrol);
}

.breadcrumb-area {
	background: var(--swfv-petrol);
	color: var(--swfv-white);
}

.breadcrumb-area :where(h1, a, span) {
	color: inherit;
}

.owlpress-content {
	background: var(--swfv-white);
}

.swfv-analysis-template #breadcrumb-section {
	display: none;
}

.swfv-analysis-template .swfv-site-main {
	margin: 0;
	overflow: clip;
	padding: 0;
	width: 100%;
}

.footer-main,
.footer-copyright {
	background: var(--swfv-dark);
	color: rgba(255, 255, 255, 0.84);
}

.footer-main :where(h1, h2, h3, h4, h5, h6, a),
.footer-copyright a {
	color: var(--swfv-white);
}

.footer-main a:hover,
.footer-main a:focus-visible,
.footer-copyright a:hover,
.footer-copyright a:focus-visible {
	color: var(--swfv-gold);
}

/*
 * OwlPress desktop header: use the complete available width and keep the
 * managed top-level navigation on one line. The separate mobile navigation
 * remains untouched below Bootstrap's lg breakpoint.
 */
@media (min-width: 992px) {
	/*
	 * OwlPress setzt Hover, Fokus und aktive Routen mit hoher Spezifität auf
	 * seine Primärfarbe. Das enge Desktop-Scoping erfasst auch Untermenüs,
	 * ohne die mobile Navigation oder andere Linkbereiche zu verändern.
	 */
	.header-one .main-navigation-area .main-navbar .main-menu li:hover > a,
	.header-one .main-navigation-area .main-navbar .main-menu li.focus > a,
	.header-one .main-navigation-area .main-navbar .main-menu li.active > a,
	.header-one .main-navigation-area .main-navbar .main-menu li.current-menu-item > a,
	.header-one .main-navigation-area .main-navbar .main-menu li.current-menu-parent > a,
	.header-one .main-navigation-area .main-navbar .main-menu li.current-menu-ancestor > a,
	.header-one .main-navigation-area .main-navbar .main-menu li.current_page_item > a,
	.header-one .main-navigation-area .main-navbar .main-menu li.current_page_parent > a,
	.header-one .main-navigation-area .main-navbar .main-menu li.current_page_ancestor > a,
	.header-one .main-navigation-area .main-navbar .main-menu li > a:hover,
	.header-one .main-navigation-area .main-navbar .main-menu li > a:focus,
	.header-one .main-navigation-area .main-navbar .main-menu li > a:focus-visible {
		color: var(--swfv-gold) !important;
	}

	.main-navigation-area .main-navigation > .container {
		max-width: none;
		padding-inline: clamp(1rem, 3vw, 3rem);
		width: 100%;
	}

	.main-navigation-area .main-navigation > .container > .row {
		align-items: center;
		flex-wrap: nowrap;
		margin-inline: 0;
	}

	.main-navigation-area .row > .col-3 {
		flex: 0 1 auto;
		max-width: min(260px, 24vw);
		width: auto;
	}

	.main-navigation-area .row > .col-9 {
		flex: 1 1 auto;
		max-width: none;
		min-width: 0;
		width: auto;
	}

	.main-navigation-area .navbar-area {
		flex-wrap: nowrap;
		gap: clamp(0.5rem, 1.2vw, 1.25rem);
		width: 100%;
	}

	.main-navigation-area .main-navbar {
		flex: 1 1 auto;
		min-width: 0;
	}

	.main-navigation-area .main-navbar > ul.main-menu {
		align-items: center;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		width: auto;
	}

	.main-navigation-area .main-navbar .main-menu > li {
		flex: 0 0 auto;
		margin: 0;
	}

	.main-navigation-area .main-navbar .main-menu > li > a {
		font-size: clamp(0.84rem, 0.72rem + 0.2vw, 0.95rem);
		padding-inline: clamp(0.35rem, 0.7vw, 0.8rem);
		white-space: nowrap;
	}

	.main-navigation-area .main-navbar .main-menu > li.swfv-menu--mega {
		position: relative;
	}

	.main-navigation-area .main-navbar .swfv-menu--mega > .dropdown-menu {
		background: var(--swfv-white);
		border: 1px solid var(--swfv-line);
		border-bottom: 4px solid var(--swfv-gold);
		border-radius: 0 0 var(--swfv-radius-card) var(--swfv-radius-card);
		box-shadow: var(--swfv-shadow-card);
		display: grid;
		gap: 0.35rem 0.75rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		left: 50%;
		margin-left: -350px;
		padding: 1rem;
		right: auto;
		width: min(700px, calc(100vw - 2rem));
	}

	.main-navigation-area .main-navbar .swfv-menu--mega > .dropdown-menu > li {
		border: 0;
		min-width: 0;
	}

	.main-navigation-area .main-navbar .swfv-menu--mega > .dropdown-menu > li > a {
		align-items: center;
		border-radius: var(--swfv-radius-sm);
		color: var(--swfv-dark);
		display: flex;
		font-size: 0.92rem;
		font-weight: var(--swfv-weight-semibold);
		min-height: 48px;
		padding: 0.65rem 0.75rem;
		white-space: normal;
	}

	.main-navigation-area .main-navbar .swfv-menu--mega > .dropdown-menu > li > a:hover,
	.main-navigation-area .main-navbar .swfv-menu--mega > .dropdown-menu > li > a:focus-visible {
		background: var(--swfv-soft);
		color: var(--swfv-dark) !important;
	}

	.main-navigation-area .main-navbar .main-menu > li.swfv-menu-cta {
		margin-left: 0.5rem;
	}

	.header-one .main-navigation-area .main-navbar .main-menu > li.swfv-menu-cta > a,
	.header-one .main-navigation-area .main-navbar .main-menu > li.swfv-menu-cta:hover > a,
	.header-one .main-navigation-area .main-navbar .main-menu > li.swfv-menu-cta.focus > a {
		background: var(--swfv-gold);
		border: 2px solid var(--swfv-gold);
		border-radius: var(--swfv-radius-pill);
		box-shadow: 0 8px 20px rgba(217, 173, 121, 0.2);
		color: var(--swfv-dark) !important;
		line-height: 40px;
		padding-inline: 1rem;
	}

	.header-one .main-navigation-area .main-navbar .main-menu > li.swfv-menu-cta > a:hover,
	.header-one .main-navigation-area .main-navbar .main-menu > li.swfv-menu-cta > a:focus-visible {
		background: var(--swfv-gold-light);
		border-color: var(--swfv-gold-light);
		transform: translateY(-1px);
	}

	.main-navigation-area .main-menu-right {
		flex: 0 0 auto;
		flex-basis: auto;
		flex-wrap: nowrap;
		width: auto;
	}

	.main-navigation-area .main-menu-right > .menu-right-list {
		flex-wrap: nowrap;
		gap: 0.25rem;
		padding-left: 0;
	}

	.main-navigation-area .main-menu-right > .menu-right-list > li {
		margin: 0;
		padding: 0;
	}

	.main-navigation-area .widget.widget_social_widget ul {
		display: flex;
		flex-wrap: nowrap;
		margin-top: 0;
	}

	.main-navigation-area .widget.widget_social_widget ul li {
		margin-top: 0;
	}

	.main-navigation-area .widget_social_widget li:not(:last-child) {
		margin-right: 0.2rem;
	}

	.main-navigation-area .widget_social_widget li a,
	.main-navigation-area .widget_social_widget li a i {
		height: 32px;
		line-height: 32px;
		width: 32px;
	}

	.main-navigation-area .widget_social_widget li a i {
		font-size: 14px;
	}
}

@media (max-width: 991px) {
	.logo .custom-logo {
		max-height: 44px;
		max-width: 220px;
	}

	.main-mobile-menu ul.main-menu {
		max-height: calc(100vh - 150px);
	}

	.main-mobile-menu .main-mobile-build ul.main-menu > li {
		border-color: rgba(255, 255, 255, 0.2);
	}

	.main-mobile-menu .main-mobile-build ul.main-menu > li > a,
	.main-mobile-menu .main-mobile-build ul.main-menu .dropdown-menu li > a {
		color: var(--swfv-white);
	}

	.main-mobile-menu .main-mobile-build .mobile-collapsed > button {
		background: transparent;
		border-color: rgba(255, 255, 255, 0.2);
		color: var(--swfv-gold);
	}

	.main-mobile-menu .main-mobile-build .mobile-collapsed > button:hover,
	.main-mobile-menu .main-mobile-build .mobile-collapsed > button:focus-visible {
		background: var(--swfv-petrol);
		color: var(--swfv-white);
	}

	.main-mobile-build .swfv-menu-item--planned > a {
		color: rgba(255, 255, 255, 0.68) !important;
		cursor: not-allowed;
	}

	.main-mobile-build .swfv-menu-item--planned > a::after {
		content: "In Vorbereitung";
		display: block;
		font-size: 0.68rem;
		font-weight: var(--swfv-weight-medium);
		letter-spacing: 0.04em;
		line-height: 1;
		margin: -0.65rem 0 0.65rem;
		text-transform: uppercase;
	}

	.main-mobile-build .main-menu > li.swfv-menu-cta {
		background: var(--swfv-dark);
		border-bottom: 0;
		padding: 0.75rem;
	}

	.main-mobile-build .main-menu > li.swfv-menu-cta > a {
		background: var(--swfv-gold);
		border-radius: var(--swfv-radius-pill);
		color: var(--swfv-dark);
		line-height: 1.25;
		padding: 0.85rem 1rem;
		text-align: center;
	}
}

.swfv-menu-item--planned > a {
	cursor: not-allowed;
	opacity: 0.62;
}

@media (min-width: 992px) {
	.main-navigation-area .main-navbar .swfv-menu-item--planned > a::after {
		background: var(--swfv-soft);
		border-radius: var(--swfv-radius-pill);
		color: var(--swfv-muted);
		content: "bald";
		font-size: 0.62rem;
		font-weight: var(--swfv-weight-bold);
		letter-spacing: 0.04em;
		margin-left: auto;
		padding: 0.15rem 0.4rem;
		text-transform: uppercase;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}
