/* CSS Document */

/* -------------------- Grundlagen ANFANG -------------------- */
body {
	font-size: 19px;
	font-family: var(--font-fliesstext, "futura-pt", sans-serif); /* Für Fließtext immer die Futura PT nehmen */
	font-weight: 400;
	font-style: normal;
	color: var(--color-text);
	background-color: var(--body-bg);
}
/* Hintergrundbild fixiert hinter der gesamten Seite */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--body-overlay), var(--body-bild);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-ueberschriften);
	font-weight: 500;
	font-style: normal;
	text-transform: none;
	color: var(--color-ueberschriften);
	hyphens: auto;
}
.subline {
	color: var(--color-subline);
}
a {
	color: var(--color-links);
	text-decoration: none;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}
a:hover {
	color: var(--color-links-hover);
}
:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}
.panel-blau,
.kontakt-info,
.site-footer,
.top-info,
.kontaktleiste-cta {
	--focus-ring: rgb(255 255 255);
}
.nowrap {
	white-space: nowrap;
}
img {
	filter: var(--img-filter);
}
img[src$=".svg"] {
	filter: none;
}
iframe {
	color-scheme: light !important;
}
.sektion-eyebrow {
	font-family: var(--font-navigation);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-blau-hell);
}
[data-theme="dark"] .sektion-eyebrow {
	color: rgb(173 177 235);
}
.sektion-panel :is(h1, h2, h3, h4),
#kontakt :is(h2, h3),
#kontaktleiste h2,
.hero-titel,
.site-footer .footer-cta-titel {
	text-wrap: balance;
}
.call2action {
	background: var(--call2action-background);
	padding: 1.2em 1em;
	text-align: center;
	box-shadow: 0 0 12px 6px rgb(0 0 0 / .2);
	font-weight: bold;
	display: inline-block;
}
.call2action p {
	margin: 0;
}
.call2action a {
	color: var(--call2action-color-link-main);
}
.call2action a:hover {
	color: var(--call2action-color-link-hover);
}
.tooltip-highlighter {
	border-bottom: 1px dotted rgb(177 177 177);
	cursor: help;
}
/* -------------------- Grundlagen ENDE -------------------- */

/* -------------------- Hintergründe & Panels ANFANG -------------------- */
.bg-content {
	background: var(--background-content);
	background-size: cover;
}
.bg-review {
	background: var(--background-review-slider);
	background-color: var(--bg-fallback-farbe);
	background-size: cover;
	background-position: center;
}
.bg-kontaktformular {
	background: var(--background-kontaktformular);
}
.bg-glas {
	background: var(--glas-background);
	box-shadow: 0 4px 30px rgb(0 0 0 / .1);
	backdrop-filter: blur(6px);
	border: 1px solid var(--glas-border);
}
.sektion-panel {
	border-radius: var(--panel-radius);
	box-shadow: var(--panel-schatten);
}
.panel-hell {
	background: var(--panel-hell-bg);
	border: 1px solid var(--panel-hell-rand);
}
.panel-tint {
	background: var(--panel-tint-bg);
	border: 1px solid var(--panel-tint-rand);
}
.panel-blau {
	background: var(--panel-blau-bg);
	color: var(--panel-blau-text);
	overflow: hidden;
}
.panel-blau h2,
.panel-blau h3 {
	color: var(--panel-blau-titel);
}
.panel-blau .sektion-eyebrow {
	color: var(--panel-blau-eyebrow);
}
/* Favicon als Wasserzeichen (einfarbige Silhouette über mask-image) */
.panel-blau::before,
.kontakt-info::before,
.kontaktleiste-cta::before,
.site-footer::before {
	content: "";
	position: absolute;
	pointer-events: none;
	background-color: rgb(255 255 255);
	-webkit-mask: var(--favicon-maske) center / contain no-repeat;
	mask: var(--favicon-maske) center / contain no-repeat;
	opacity: .08;
	z-index: -1;
}
.panel-blau,
.kontakt-info,
.kontaktleiste-cta,
.site-footer {
	isolation: isolate;
}
.panel-blau::before {
	width: 420px;
	aspect-ratio: 210 / 205;
	right: -60px;
	bottom: -80px;
}
/* -------------------- Hintergründe & Panels ENDE -------------------- */

/* -------------------- SayYours ANFANG -------------------- */
iframe#sayyoursiframe {
	width: 1px;
	min-width: 100%;
}
#sayyoursbutton {
	cursor: pointer;
	width: 100%;
}
/* -------------------- SayYours ENDE -------------------- */

/* -------------------- Navigation ANFANG -------------------- */
.sticky-top {
	position: static;
}
@media (min-width: 992px) {
	.sticky-top {
		position: sticky;
		top: 0;
		width: 100%;
	}
}
#mainNav.navbar {
	padding-top: .5rem;
	padding-bottom: .5rem;
	background: var(--background-navi);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: var(--nav-schatten);
	z-index: 99;
}
#mainNav.navbar-shrink {
	padding: 0;
}
#mainNav .navbar-brand img {
	width: 200px;
	max-width: 200px;
}
@media (min-width: 1500px) {
	#mainNav .navbar-brand {
		padding: 0;
		z-index: 9;
	}
	#mainNav .navbar-brand img {
		width: 230px;
		max-width: 230px;
	}
}
@media (min-width: 1700px) {
	#mainNav .navbar-brand img {
		width: 260px;
		max-width: 260px;
	}
}
/* Logo ist von Anfang an sichtbar (überschreibt das Ein-/Ausblenden per Script) */
#logo {
	opacity: 1;
	visibility: visible;
}
#mainNav .nav-link {
	font-family: var(--font-navigation);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .7rem 1.1rem;
	margin: 0 .15rem;
	border-radius: 2rem;
	color: var(--color-navigation);
	transition: none;
}
#mainNav .nav-link:hover,
#mainNav .nav-link:focus,
#mainNav .nav-item.active .nav-link,
#mainNav .nav-link.show {
	background-color: var(--nav-link-hover-bg);
	color: var(--color-navigation-hover);
}
#mainNav .nav-link svg,
#mainNav .nav-link i {
	color: var(--color-blau-hell);
}
[data-theme="dark"] #mainNav .nav-link svg,
[data-theme="dark"] #mainNav .nav-link i {
	color: rgb(173 177 235);
}
@media (max-width: 991px) {
	#mainNav .nav-link {
		margin: .15rem 0;
	}
}

/* Navbar Toggler */
#mainNav .navbar-toggler {
	border: 1px solid transparent !important;
}
#mainNav .navbar-toggler:focus {
	box-shadow: none;
}
#mainNav .navbar-toggler .navbar-toggler-icon {
	width: 30px;
	height: 30px;
	position: relative;
	background-image: none !important;
	border: 1px solid transparent !important;
}
#mainNav .line {
	position: absolute;
	left: 0;
	height: 3px;
	width: 100%;
	background-color: var(--color-navigation);
	border-radius: 8px;
	transition: all cubic-bezier(.26, .1, .27, 1.55) .45s;
}
#mainNav .top {
	top: 18%;
}
#mainNav .middle {
	top: 48%;
}
#mainNav .bottom {
	top: 78%;
}
#mainNav .navbar-toggler-icon.close .top {
	transform: rotate(45deg);
	top: 48%;
}
#mainNav .navbar-toggler-icon.close .middle,
#mainNav .navbar-toggler-icon.close .bottom {
	transform: rotate(-45deg);
	top: 48%;
}

/* Dropdown */
@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translate(0, 12px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
#mainNav .dropdown-menu {
	min-width: 18rem;
	margin-top: .25rem;
	padding: .5rem;
	border: 1px solid rgb(39 33 91 / .06);
	border-radius: 1rem;
	background-color: var(--dropdown-menu);
	background-image: none;
	box-shadow: 0 1.25rem 2.5rem rgb(39 33 91 / .16);
}
/* Unsichtbare Brücke, damit der Hover beim Wechsel vom Navipunkt ins Dropdown nicht abreißt */
#mainNav .dropdown-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1rem;
	height: 1rem;
}
#mainNav .dropdown-menu a {
	position: relative;
	font-size: 1rem;
	font-weight: normal;
	text-align: left;
	padding: .65rem 1rem;
	border-radius: .6rem;
	color: var(--color-dropdown-navigation);
}
#mainNav .dropdown-menu a:hover,
#mainNav .dropdown-menu a:focus {
	background-color: var(--nav-link-hover-bg);
	color: var(--color-dropdown-navigation);
}
@media (min-width: 992px) {
	#mainNav .dropdown-menu-end {
		position: absolute;
		left: auto;
		right: 0;
	}
	/* Hover muss im Media min 992px stehen, damit sich die Navigation mobil per Klick wieder schließen lässt */
	#mainNav li.dropdown:hover .dropdown-menu,
	#mainNav li.dropdown:focus .dropdown-menu {
		opacity: 1;
	}
	#mainNav li.dropdown:hover .dropdown-menu:not(.megasubmenu),
	#mainNav li.dropdown:focus .dropdown-menu:not(.megasubmenu) {
		display: block;
		animation: fadeIn .35s forwards;
	}
}
@media (max-width: 991px) {
	#mainNav .dropdown-menu {
		box-shadow: none;
		margin-top: 0;
	}
}

/* Megamenü */
#mainNav .megasubmenu > a {
	color: var(--color-dropdown-navigation);
	padding: .65rem 1rem;
}
@media (min-width: 992px) {
	#mainNav .dropdown-menu .dropdown-toggle::after {
		border-top: .3em solid transparent;
		border-right: 0;
		border-bottom: .3em solid transparent;
		border-left: .3em solid;
	}
	#mainNav .dropdown-menu.dropdown-menu-end .dropdown-toggle::after {
		position: absolute;
		left: 15px;
		top: 22px;
		border-top: .3em solid transparent;
		border-right: .3em solid;
		border-bottom: .3em solid transparent;
		border-left: 0;
	}
	#mainNav .megasubmenu {
		left: 100%;
		top: 0;
		min-height: 100%;
		min-width: 13rem;
	}
	#mainNav .megasubmenu-end {
		right: 100%;
		left: auto;
		text-align: right !important;
	}
	#mainNav .dropdown-menu > li:hover .megasubmenu {
		display: block;
		animation: fadeIn .35s forwards;
	}
}

/* Theme Switch */
.checkbox {
	opacity: 0;
	position: absolute;
}
#colorMode.switch,
#language_switch.switch {
	height: 40px;
	border: solid 2px var(--color-navigation);
	border-radius: 50px;
	position: relative;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#colorMode.switch {
	background: rgb(33 37 41);
	width: 70px;
	padding: 9px;
}
#language_switch.switch {
	background: var(--background-navi);
	width: 75px;
	padding: 7px;
}
.fa-moon {
	color: rgb(241 196 15);
}
.fa-sun {
	color: rgb(243 156 18);
}
.switch .ball {
	background: rgb(255 255 255 / .8);
	width: 30px;
	height: 30px;
	position: absolute;
	left: 2px;
	top: 3px;
	border-radius: 50%;
	transition: transform .2s linear;
}
#language_switch.switch .ball {
	width: 33px;
	height: 33px;
	top: 1px;
}
.checkbox:checked + .switch .ball {
	transform: translateX(30px);
}
.checkbox:checked + #language_switch.switch .ball {
	transform: translateX(33px);
}
/* -------------------- Navigation ENDE -------------------- */

/* -------------------- Top-Info ANFANG -------------------- */
.top-info {
	font-size: .9rem;
	color: var(--color-top-info-text);
	background: var(--background-top-info);
	background-color: var(--fallback-blau);
}
.top-info a {
	color: var(--links-top-info);
}
.top-info a:hover,
.top-info a:focus-visible {
	color: var(--links-top-info-hover);
	text-decoration: underline;
}
.top-info svg,
.top-info i {
	color: var(--color-blau-nebel);
}
.topinfo-claim {
	font-weight: 600;
	letter-spacing: .04em;
}
.topinfo-badge {
	display: inline-block;
	border-radius: 2rem;
	background: rgb(255 255 255 / .16);
}
/* -------------------- Top-Info ENDE -------------------- */

/* -------------------- Offen-Indikator ANFANG -------------------- */
.offen-status {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .25rem .8rem;
	border-radius: 2rem;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.3;
	background: rgb(255 255 255 / .14);
	color: rgb(255 255 255);
}
.offen-punkt {
	position: relative;
	flex-shrink: 0;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--offen-farbe-zu);
}
.offen-status.ist-offen .offen-punkt {
	background: var(--offen-farbe-offen);
}
.offen-status.ist-offen .offen-punkt::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--offen-farbe-offen);
	animation: offenPuls 2s ease-out infinite;
}
@keyframes offenPuls {
	0% {
		transform: scale(1);
		opacity: .7;
	}
	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}
/* -------------------- Offen-Indikator ENDE -------------------- */

/* -------------------- Hero ANFANG -------------------- */
#main-flexslider {
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}
#main-flexslider .hero-overlay {
	position: relative;
	background: var(--hero-glow), var(--hero-overlay-mobil);
}
@media (min-width: 1200px) {
	#main-flexslider .slides img {
		height: clamp(600px, 46vw, 780px);
		object-fit: cover;
	}
	#main-flexslider .hero-overlay {
		position: absolute;
		inset: 0;
		z-index: 9;
		padding-bottom: 4.5rem;
		background: var(--hero-glow), var(--hero-overlay);
	}
}
#main-flexslider::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
	height: 6px;
	background: var(--slider-trenner);
	box-shadow: 0 .75rem 1.5rem rgb(39 33 91 / .18);
}
.flex-control-nav {
	bottom: -30px;
}
.hero-eyebrow {
	background: var(--hero-chip-bg);
	color: var(--hero-chip-text);
	border-radius: 2rem;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
}
.hero-titel {
	font-family: var(--font-ueberschriften);
	font-size: clamp(2.1rem, 3.4vw, 3.4rem);
	font-weight: 600;
	line-height: 1.12;
	color: var(--hero-titel);
}
.hero-text {
	font-size: 1.15em;
	color: var(--hero-text);
	max-width: 36rem;
}
.hero-btn {
	border-radius: 2rem;
	font-weight: 600;
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.hero-btn-primaer {
	background: var(--hero-btn-primaer-bg);
	color: var(--hero-btn-primaer-text);
	border: 0;
	box-shadow: 0 .75rem 1.5rem rgb(39 33 91 / .28);
}
.hero-btn-primaer:hover,
.hero-btn-primaer:focus-visible {
	color: var(--hero-btn-primaer-text);
	transform: translateY(-2px);
	box-shadow: 0 1rem 2rem rgb(39 33 91 / .36);
}
.hero-btn-sekundaer {
	background: var(--hero-btn-sekundaer-bg);
	color: var(--hero-btn-sekundaer-text);
	border: 2px solid var(--hero-btn-sekundaer-rand);
}
.hero-btn-sekundaer:hover,
.hero-btn-sekundaer:focus-visible {
	color: var(--hero-btn-sekundaer-text);
	border-color: var(--hero-vorteil-icon);
	transform: translateY(-2px);
}
.hero-vorteile li {
	font-weight: 500;
	color: var(--hero-text);
}
.hero-vorteile svg,
.hero-vorteile i {
	color: var(--hero-vorteil-icon);
}
/* -------------------- Hero ENDE -------------------- */

/* -------------------- Kontaktleiste ANFANG -------------------- */
.kontaktbox-wrap {
	position: relative;
	z-index: 10;
	padding-top: 1.5rem;
}
@media (min-width: 1200px) {
	.kontaktbox-wrap {
		margin-top: -4.5rem;
		padding-top: 0;
	}
}
#kontaktleiste {
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 1.5rem 3.5rem rgb(39 33 91 / .2);
}
#kontaktleiste .kontaktleiste-cta {
	position: relative;
	overflow: hidden;
	background: var(--bg-kontaktbox);
	color: rgb(255 255 255);
}
#kontaktleiste .kontaktleiste-cta::before {
	width: 240px;
	aspect-ratio: 210 / 205;
	right: -30px;
	top: 50%;
	transform: translateY(-50%);
	opacity: .1;
}
#kontaktleiste .kontaktleiste-cta h2 {
	color: rgb(255 255 255);
}
#kontaktleiste .kontaktleiste-eyebrow {
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-blau-nebel);
}
#kontaktleiste .kontaktleiste-kontakt {
	background: var(--kontaktleiste-bg);
	color: var(--kontaktleiste-text);
}
#kontaktleiste .kontaktleiste-kontakt small {
	color: var(--kontaktleiste-label);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
}
#kontaktleiste .kontaktleiste-kontakt a {
	font-size: 1.15rem;
	font-weight: 600;
}
#kontaktleiste .kontaktleiste-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--kontaktleiste-icon-bg);
	color: var(--kontaktleiste-icon);
}
#kontaktleiste .kontaktleiste-btn {
	background: var(--hero-btn-primaer-bg);
	color: rgb(255 255 255);
	border: 0;
	border-radius: 2rem;
	font-weight: 600;
	transition: transform .25s ease, box-shadow .25s ease;
}
#kontaktleiste .kontaktleiste-btn:hover,
#kontaktleiste .kontaktleiste-btn:focus-visible {
	color: rgb(255 255 255);
	transform: translateY(-2px);
	box-shadow: 0 .75rem 1.5rem rgb(39 33 91 / .3);
}
#kontaktleiste .kontaktleiste-hinweis {
	font-size: .85rem;
	color: var(--kontaktleiste-label);
}
/* -------------------- Kontaktleiste ENDE -------------------- */

/* -------------------- Start ANFANG -------------------- */
#start .sektion-panel {
	padding: .5rem;
}
#start .start-eyebrow {
	background: var(--start-eyebrow-bg);
	color: var(--start-eyebrow-text);
	border-radius: 2rem;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
}
#start h1 {
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	font-weight: 600;
	line-height: 1.1;
}
#start .start-trenner {
	width: 5rem;
	height: 4px;
	border: 0;
	opacity: 1;
	border-radius: 2px;
	background: linear-gradient(90deg, rgb(39 33 91) 0%, rgb(80 84 159) 60%, rgb(80 84 159 / 0) 100%);
}
/* Lead-Absätze bewusst in normaler Textgröße (überschreibt Bootstraps .lead) */
#start .lead {
	font-size: inherit;
	font-weight: inherit;
}
/* Querverweise im Fließtext klar als Link erkennbar */
#start article > p:not(.hinweis-box) a,
#start article .leistungs-box a,
#start article .hinweis-box a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	text-decoration-color: var(--link-unterstrich);
	font-weight: 500;
}
#start article > p:not(.hinweis-box) a:hover,
#start article > p:not(.hinweis-box) a:focus-visible,
#start article .leistungs-box a:hover,
#start article .leistungs-box a:focus-visible,
#start article .hinweis-box a:hover,
#start article .hinweis-box a:focus-visible {
	text-decoration-color: currentColor;
}
#start .call2action {
	border-left: 4px solid var(--color-blau-hell);
	border-radius: .75rem;
	box-shadow: 0 .75rem 2rem rgb(39 33 91 / .1);
	text-align: left;
	font-weight: 500;
}
.werkstatt-check {
	background: var(--check-card-bg);
	border: 1px solid var(--check-card-border);
	border-radius: 1.25rem;
}
.werkstatt-check-eyebrow {
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--check-icon);
}
/* Zweispaltig über CSS-Spalten: ein umbrechender Eintrag reißt so keine Lücke in die Nachbarspalte */
.werkstatt-check-liste {
	column-gap: 1.5rem;
}
@media (min-width: 576px) {
	.werkstatt-check-liste {
		columns: 2;
	}
}
.werkstatt-check-liste li {
	font-size: .95em;
	break-inside: avoid;
}
.werkstatt-check-mehr {
	font-size: .95em;
}
.werkstatt-check-mehr svg,
.werkstatt-check-mehr i {
	color: var(--check-icon);
}
.werkstatt-check-liste svg,
.werkstatt-check-liste i,
.werkstatt-check-meister svg,
.werkstatt-check-meister i {
	color: var(--check-icon);
}
.werkstatt-check-meister {
	border-top: 1px solid var(--check-card-border);
}
/* -------------------- Start ENDE -------------------- */

/* -------------------- Leistungen ANFANG -------------------- */
#leistungen .service-card {
	background: var(--service-card-bg);
	border: 1px solid var(--service-card-border);
	border-radius: 1.25rem;
	box-shadow: var(--service-card-shadow);
	overflow: hidden;
	isolation: isolate;
	transition: transform .3s ease, box-shadow .3s ease;
}
#leistungen .service-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--service-card-hover-bg);
	opacity: 0;
	transition: opacity .3s ease;
}
#leistungen .service-card h3,
#leistungen .service-card p {
	transition: color .3s ease;
}
#leistungen .service-card:hover,
#leistungen .service-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--service-card-shadow-hover);
}
#leistungen .service-card:hover::before,
#leistungen .service-card:focus-within::before {
	opacity: 1;
}
#leistungen .service-card:hover h3,
#leistungen .service-card:hover p,
#leistungen .service-card:hover .service-link,
#leistungen .service-card:focus-within h3,
#leistungen .service-card:focus-within p,
#leistungen .service-card:focus-within .service-link {
	color: var(--service-card-hover-text);
}
#leistungen .service-icon {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--service-icon-bg);
	color: var(--service-icon-color);
	font-size: 1.5rem;
	box-shadow: 0 .5rem 1rem rgb(39 33 91 / .25);
	transition: background .3s ease, color .3s ease;
}
/* Im Hover wird das Icon invertiert, damit es sich vom blauen Kartenhintergrund abhebt */
#leistungen .service-card:hover .service-icon,
#leistungen .service-card:focus-within .service-icon {
	background: var(--service-icon-hover-bg);
	color: var(--service-icon-hover-color);
	box-shadow: 0 .5rem 1rem rgb(0 0 0 / .25);
}
#leistungen .service-card p {
	font-size: .95em;
}
#leistungen .service-link {
	font-weight: 600;
	color: var(--color-links);
}
#leistungen .service-link svg,
#leistungen .service-link i {
	transition: transform .25s ease;
}
#leistungen .service-card:hover .service-link svg,
#leistungen .service-card:hover .service-link i {
	transform: translateX(4px);
}
#leistungen .service-link:focus-visible {
	outline: none;
}
#leistungen .service-card:has(.service-link:focus-visible) {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}
/* -------------------- Leistungen ENDE -------------------- */

/* -------------------- Vorteile ANFANG -------------------- */
#vorteile .vorteil {
	background: var(--vorteil-card-bg);
	border: 1px solid var(--vorteil-card-rand);
	border-radius: 1.25rem;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
#vorteile .vorteil-icon {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: .85rem;
	background: var(--vorteil-icon-bg);
	color: var(--vorteil-icon-color);
	font-size: 1.35rem;
}
#vorteile .vorteil p {
	font-size: .95em;
}
#vorteile .btn-vorteile {
	background: rgb(255 255 255);
	color: rgb(39 33 91);
	border: 0;
	border-radius: 2rem;
	font-weight: 600;
	box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / .2);
	transition: box-shadow .25s ease, transform .25s ease;
}
#vorteile .btn-vorteile:hover,
#vorteile .btn-vorteile:focus-visible {
	color: rgb(39 33 91);
	transform: translateY(-2px);
	box-shadow: 0 1rem 2rem rgb(0 0 0 / .3);
}
/* -------------------- Vorteile ENDE -------------------- */

/* -------------------- Ablauf ANFANG -------------------- */
#ablauf .ablauf-nummer {
	position: relative;
	z-index: 1;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--ablauf-nummer-bg);
	border: 3px solid var(--ablauf-nummer-border);
	color: var(--ablauf-nummer-text);
	font-size: 1.4rem;
	box-shadow: 0 .5rem 1.25rem rgb(39 33 91 / .12);
}
#ablauf .ablauf-liste {
	counter-reset: ablauf;
}
#ablauf .ablauf-liste li {
	counter-increment: ablauf;
}
#ablauf .ablauf-nummer::after {
	content: counter(ablauf);
	position: absolute;
	top: -.35rem;
	right: -.35rem;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--color-blau);
	color: rgb(255 255 255);
	font-size: .8rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
[data-theme="dark"] #ablauf .ablauf-nummer::after {
	background: rgb(80 84 159);
}
@media (min-width: 992px) {
	#ablauf .ablauf-liste li:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 3.75rem;
		left: calc(50% + 2.75rem);
		width: calc(100% - 5.5rem);
		height: 2px;
		background: var(--ablauf-linie);
	}
}
/* -------------------- Ablauf ENDE -------------------- */

/* -------------------- Öffnungszeiten ANFANG -------------------- */
.table.oeffnungszeiten {
	--bs-table-bg: transparent;
	border-color: rgb(155 155 155);
}
.table.oeffnungszeiten > :not(caption) > * > * {
	padding: .4rem;
	color: var(--color-text);
	background-color: transparent;
}
.table.oeffnungszeiten .ist-heute > td {
	background-color: var(--color-akzent);
	color: rgb(255 255 255);
	font-weight: 600;
}
/* -------------------- Öffnungszeiten ENDE -------------------- */

/* -------------------- Kontaktbereich ANFANG -------------------- */
#kontakt .kontakt-karte {
	border-radius: var(--panel-radius);
	overflow: hidden;
	box-shadow: var(--panel-schatten);
}
#kontakt .kontakt-info {
	background: var(--kontakt-info-bg);
	color: var(--kontakt-info-text);
	overflow: hidden;
}
#kontakt .kontakt-info::before {
	width: 380px;
	aspect-ratio: 210 / 205;
	left: -90px;
	bottom: -90px;
}
#kontakt .kontakt-info h2,
#kontakt .kontakt-info h3 {
	color: rgb(255 255 255);
}
#kontakt .kontakt-eyebrow {
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-blau-nebel);
}
#kontakt .kontakt-info a {
	color: rgb(255 255 255);
	font-weight: 600;
}
#kontakt .kontakt-info a:hover,
#kontakt .kontakt-info a:focus-visible {
	text-decoration: underline;
}
#kontakt .kontakt-info small {
	color: var(--color-blau-nebel);
	font-size: .8rem;
	letter-spacing: .06em;
}
#kontakt .kontakt-wege small {
	text-transform: uppercase;
}
#kontakt .kontakt-wege a {
	white-space: nowrap;
}
#kontakt .kontakt-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgb(255 255 255 / .12);
	color: rgb(255 255 255);
}
#kontakt .kontakt-person,
#kontakt .kontakt-hinweis {
	background: rgb(255 255 255 / .08);
	border: 1px solid var(--kontakt-trenner);
	border-radius: 1rem;
}
#kontakt .kontakt-zeiten-kopf {
	padding-top: 1.5rem;
	border-top: 1px solid var(--kontakt-trenner);
}
#kontakt .table.oeffnungszeiten {
	margin-bottom: 0;
	border-color: var(--kontakt-trenner);
}
#kontakt .table.oeffnungszeiten > :not(caption) > * > * {
	color: var(--kontakt-info-text);
	border-bottom-color: var(--kontakt-trenner);
	padding: .5rem .75rem;
}
#kontakt .table.oeffnungszeiten thead th {
	color: var(--color-blau-nebel);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
#kontakt .table.oeffnungszeiten .ist-heute > td {
	background-color: rgb(255 255 255 / .16);
	color: rgb(255 255 255);
}
#kontakt .kontakt-formular {
	background: var(--kontakt-formular-bg);
}
#kontakt .kontakt-formular-titel {
	color: var(--color-ueberschriften);
}
#kontakt .kontakt-formular-text {
	color: var(--color-subline);
}
/* -------------------- Kontaktbereich ENDE -------------------- */

/* -------------------- Footer ANFANG -------------------- */
.site-footer {
	margin-top: 3rem;
	background: var(--background-footer);
	color: var(--color-footer-text);
	overflow: hidden;
}
.site-footer::before {
	width: 620px;
	aspect-ratio: 210 / 205;
	right: -140px;
	top: 6rem;
	opacity: .05;
}
.site-footer a {
	color: var(--color-footer-links-main);
}
.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--color-footer-links-hover);
	text-decoration: underline;
}
.site-footer svg,
.site-footer i {
	color: var(--footer-icon-color);
}
.site-footer .footer-cta {
	background: var(--footer-cta-bg);
	border: 1px solid var(--footer-cta-rand);
	border-radius: var(--panel-radius);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.site-footer .footer-cta-titel {
	color: rgb(255 255 255);
}
.site-footer .footer-btn {
	border-radius: 2rem;
	font-weight: 600;
}
.site-footer .footer-btn:hover,
.site-footer .footer-btn:focus-visible {
	text-decoration: none;
}
.site-footer .footer-btn-hell {
	background: rgb(255 255 255);
	color: rgb(39 33 91);
	border: 0;
}
.site-footer .footer-btn-hell svg,
.site-footer .footer-btn-hell i {
	color: rgb(39 33 91);
}
.site-footer .footer-btn-hell:hover,
.site-footer .footer-btn-hell:focus-visible {
	background: rgb(226 228 235);
	color: rgb(39 33 91);
}
.site-footer .footer-btn-rahmen {
	background: transparent;
	color: rgb(255 255 255);
	border: 2px solid rgb(255 255 255 / .5);
}
.site-footer .footer-btn-rahmen:hover,
.site-footer .footer-btn-rahmen:focus-visible {
	color: rgb(255 255 255);
	border-color: rgb(255 255 255);
	background: rgb(255 255 255 / .08);
}
.site-footer .footer-logo {
	max-width: 220px;
	max-height: 90px;
}
.site-footer .footer-meister {
	border-radius: 2rem;
	background: rgb(255 255 255 / .1);
	font-size: .9rem;
	font-weight: 600;
}
.site-footer .footer-titel {
	color: var(--color-blau-nebel);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
}
.site-footer .footer-links li {
	padding: .3rem 0;
}
.site-footer .footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgb(255 255 255 / .1);
}
.site-footer .footer-karte .mapsiframe {
	border: 0;
	border-radius: 1rem;
	filter: none;
}
.site-footer .consent-placeholder {
	background: rgb(255 255 255 / .08);
	border-color: rgb(255 255 255 / .16);
	border-radius: 1rem;
	color: var(--color-footer-text);
}
.site-footer .footer-unten {
	background: var(--footer-unten-bg);
	font-size: .9rem;
}
@media (max-width: 991px) {
	.site-footer .footer-unten {
		padding-bottom: 4.5rem;
	}
}
/* -------------------- Footer ENDE -------------------- */

/* -------------------- Float-Contact & Nach oben ANFANG -------------------- */
.float-dock {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1040;
	background: var(--float-dock-bg);
	border: 1px solid var(--float-dock-rand);
	border-right: 0;
	border-radius: 1.25rem 0 0 1.25rem;
	box-shadow: 0 1.25rem 3rem rgb(39 33 91 / .28);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.float-dock-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background: var(--float-dock-icon-bg);
	color: var(--float-dock-icon);
	font-size: 1.2rem;
	box-shadow: 0 0 0 3px var(--float-dock-ring), 0 .5rem 1rem rgb(39 33 91 / .3);
	transition: background-color .25s ease, color .25s ease;
}
.float-dock-link:hover,
.float-dock-link:focus-visible {
	background: var(--hero-btn-primaer-bg);
	color: rgb(255 255 255);
}
.float-dock-label {
	position: absolute;
	right: calc(100% + 1rem);
	top: 50%;
	white-space: nowrap;
	padding: .55rem 1rem;
	border-radius: .75rem;
	background: var(--color-blau);
	color: rgb(255 255 255);
	font-size: .9rem;
	line-height: 1.25;
	text-align: right;
	box-shadow: 0 .75rem 1.5rem rgb(39 33 91 / .25);
	opacity: 0;
	visibility: hidden;
	transform: translate(.5rem, -50%);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	pointer-events: none;
}
.float-dock-label small {
	color: var(--color-blau-nebel);
	font-size: .8rem;
}
.float-dock-link:hover .float-dock-label,
.float-dock-link:focus-visible .float-dock-label {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}
[data-theme="dark"] .float-dock-label {
	background: rgb(80 84 159);
}

.scroll-top {
	display: none !important;
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background: var(--hero-btn-primaer-bg);
	color: rgb(255 255 255);
	font-size: 1.1rem;
	border: 3px solid rgb(255 255 255);
	box-shadow: 0 0 0 1px rgb(39 33 91 / .2), 0 .75rem 1.5rem rgb(0 0 0 / .35);
	z-index: 1040;
	transition: opacity .35s ease, transform .25s ease;
}
.scroll-top:hover,
.scroll-top:focus-visible {
	color: rgb(255 255 255);
	transform: translateY(-3px);
}
@media (min-width: 992px) {
	.scroll-top {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
}
/* -------------------- Float-Contact & Nach oben ENDE -------------------- */

/* -------------------- Slidershow Multiple Items ANFANG -------------------- */
#recipeCarousel .carousel-inner .carousel-item .card .card-img a {
	width: 100%;
	height: 250px;
	object-fit: cover;
}
@media (max-width: 767px) {
	#recipeCarousel .carousel-inner .carousel-item > div {
		display: none;
	}
	#recipeCarousel .carousel-inner .carousel-item > div:first-child {
		display: block;
	}
}
#recipeCarousel .carousel-inner .carousel-item.active,
#recipeCarousel .carousel-inner .carousel-item-next,
#recipeCarousel .carousel-inner .carousel-item-prev {
	display: flex;
}
@media (min-width: 768px) {
	#recipeCarousel .carousel-inner .carousel-item-end.active,
	#recipeCarousel .carousel-inner .carousel-item-next {
		transform: translateX(25%);
	}
	#recipeCarousel .carousel-inner .carousel-item-start.active,
	#recipeCarousel .carousel-inner .carousel-item-prev {
		transform: translateX(-25%);
	}
}
#recipeCarousel .carousel-inner .carousel-item-end,
#recipeCarousel .carousel-inner .carousel-item-start {
	transform: translateX(0);
}
#recipeCarousel .card-img,
#recipeCarousel .card,
#recipeCarousel .carousel-inner {
	background-color: var(--bg-slideshow);
}
#recipeCarousel .carousel-caption {
	color: var(--color-text);
	bottom: 3.5rem;
}
#indicator-bars {
	height: 8px;
}
.title-review {
	color: var(--title-review);
}
/* -------------------- Slidershow Multiple Items ENDE -------------------- */

/* -------------------- Datenschutz Button ANFANG -------------------- */
#reset_cookie_btn.btn-success {
	color: var(--color-text);
	background-color: transparent;
	border-color: var(--color-text);
	margin-bottom: 1em;
}
#reset_cookie_btn.btn-success:hover,
#reset_cookie_btn.btn-success:focus {
	color: rgb(255 255 255);
	background-color: var(--color-akzent);
	border-color: var(--color-akzent);
}
#reset_cookie_btn.btn-success:active {
	background-color: rgb(153 153 153);
	border-color: rgb(221 221 221);
}
/* -------------------- Datenschutz Button ENDE -------------------- */

/* -------------------- Bildstapel ANFANG -------------------- */
.bilderstapel {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 1 / 1.1;
	margin-inline: auto;
	isolation: isolate;
}
/* Dekorfläche im Logo-Verlauf hinter den Bildern */
.bilderstapel::before {
	content: "";
	position: absolute;
	inset: 12% 4% 6% 14%;
	z-index: -1;
	border-radius: 2rem;
	background: var(--bilderstapel-deko);
}
.bilderstapel::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 2%;
	z-index: -1;
	width: 38%;
	aspect-ratio: 210 / 205;
	pointer-events: none;
	background-color: rgb(255 255 255);
	-webkit-mask: var(--favicon-maske) center / contain no-repeat;
	mask: var(--favicon-maske) center / contain no-repeat;
	opacity: .14;
}
.bilderstapel-bild {
	position: absolute;
	display: block;
	overflow: hidden;
	border-radius: 1.25rem;
	border: 5px solid var(--bilderstapel-rahmen);
	box-shadow: 0 1.25rem 2.5rem rgb(39 33 91 / .22);
	background: var(--bilderstapel-rahmen);
	transition: transform .3s ease, box-shadow .3s ease;
}
.bilderstapel-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.bilderstapel-bild-1 {
	top: 0;
	left: 0;
	width: 72%;
	height: 58%;
	z-index: 1;
}
.bilderstapel-bild-2 {
	top: 36%;
	right: 0;
	width: 58%;
	height: 40%;
	z-index: 2;
}
.bilderstapel-bild-3 {
	bottom: 0;
	left: 8%;
	width: 46%;
	height: 32%;
	z-index: 3;
}
/* Weniger als drei Bilder: Layout passt sich an */
.bilderstapel-1 {
	aspect-ratio: 4 / 3;
}
.bilderstapel-1 .bilderstapel-bild-1 {
	width: 92%;
	height: 92%;
}
.bilderstapel-2 {
	aspect-ratio: 1 / .85;
}
.bilderstapel-2 .bilderstapel-bild-1 {
	width: 74%;
	height: 68%;
}
.bilderstapel-2 .bilderstapel-bild-2 {
	top: auto;
	bottom: 0;
	height: 50%;
}
.bilderstapel-zoom {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgb(255 255 255 / .92);
	color: rgb(39 33 91);
	opacity: 0;
	transform: scale(.8);
	transition: opacity .25s ease, transform .25s ease;
}
.bilderstapel-bild:hover,
.bilderstapel-bild:focus-visible {
	z-index: 4;
	transform: translateY(-6px);
	box-shadow: 0 1.75rem 3rem rgb(39 33 91 / .3);
}
.bilderstapel-bild:hover img,
.bilderstapel-bild:focus-visible img {
	transform: scale(1.06);
}
.bilderstapel-bild:hover .bilderstapel-zoom,
.bilderstapel-bild:focus-visible .bilderstapel-zoom {
	opacity: 1;
	transform: scale(1);
}
@media (hover: none) {
	.bilderstapel-zoom {
		opacity: 1;
		transform: none;
	}
}
/* -------------------- Bildstapel ENDE -------------------- */

/* -------------------- Karte ANFANG -------------------- */
.mapsiframe {
	border: 4px solid rgb(255 255 255);
	width: 100%;
	filter: var(--mapsiframe-filter);
}
/* -------------------- Karte ENDE -------------------- */

/* -------------------- Control Center Barrierefreiheit ANFANG -------------------- */
.button-control-center {
	position: fixed;
	bottom: 1.2em;
	left: 1.2em;
	cursor: pointer;
	z-index: 1050;
}
@media (max-width: 991px) {
	.button-control-center {
		bottom: .8em;
		left: .8em;
	}
}
.button-control-center svg {
	border: 3px solid rgb(255 255 255);
	border-radius: 2em;
	width: 1.5em;
	height: 1.5em;
	background: rgb(255 255 255);
	color: var(--color-akzent);
	outline: 3px solid rgb(0 0 0);
	margin: 3px;
}
.access-panel {
	position: fixed;
	bottom: 5.6em;
	left: 1.2em;
	width: 350px;
	background: var(--bg-access-panel);
	border-radius: .2em;
	box-shadow: var(--access-panel-bs);
	z-index: 9980;
}
@media (max-width: 575.98px) {
	.access-panel {
		width: min(350px, calc(100vw - 1.6rem));
		left: .8rem;
	}
}
.access-panel-headline {
	background: var(--access-panel-headline-color);
	border-radius: .2em .2em 0 0;
}
.panel-button {
	background: var(--bg-panel-button);
	border-radius: .2em;
	padding: 1em 0;
	width: 100%;
	border: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (max-width: 575.98px) {
	.panel-button {
		padding: .8em 0;
	}
}
.panel-button:hover {
	background: rgb(199 199 199);
}
.access-panel-close-button {
	background: rgb(255 255 255);
	color: rgb(12 21 32);
	border-radius: .2em;
	padding: .2em .5em;
}
.access-panel-close-button:hover {
	background: rgb(228 228 228);
	color: rgb(12 21 32);
}
.access-panel-auswahl span {
	font-size: .8em;
	color: var(--color-text);
}
.access-panel-auswahl svg {
	width: 1.4em;
	height: 1.4em;
	color: var(--color-text);
}
.icon-active {
	display: none;
}
.filter-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 9990;
	backdrop-filter: none;
}
body.font-large {
	font-size: 1.3em !important;
}
body.line-spacing {
	line-height: 1.8 !important;
}
body.underline-links a {
	text-decoration: underline !important;
}
body.cursor-big * {
	cursor: var(--cursor-color) 10 0, auto;
}
body.cursor-big *[style*="position:fixed"],
body.cursor-big *[style*="position: fixed"],
body.cursor-big .fixed {
	cursor: var(--cursor-color) 10 0, auto;
}
body.cursor-big a,
body.cursor-big a *,
body.cursor-big button,
body.cursor-big button *,
body.cursor-big [role="button"],
body.cursor-big [role="button"] *,
body.cursor-big label,
body.cursor-big label * {
	cursor: var(--cursor-pointer) 20 0, pointer !important;
}
body.no-images img {
	opacity: 0 !important;
}
body.no-images * {
	background-image: none !important;
}
@media (max-width: 991px) {
	body.no-images img {
		display: none;
	}
}
#readline {
	position: fixed;
	top: 0;
	height: 2px;
	width: 100vw;
	background: var(--color-readline);
	z-index: 999999;
	pointer-events: none;
	transition: top .1s linear;
	display: none;
}
body.readline #readline {
	display: block;
}
.accessicon-tooltip {
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	background-color: var(--access-icon-tooltip-color);
	color: var(--access-icon-tooltip-text);
	text-align: center;
	border-radius: 5px;
	padding: .6em 1.2em;
	opacity: 0;
	transition: opacity .3s;
	z-index: 2000;
	margin-left: 1em;
	font-size: .88em;
	width: 180px;
}
.accessicon-tooltip::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 100%;
	border-width: 8px;
	border-style: solid;
	border-color: transparent var(--access-icon-tooltip-color) transparent transparent;
	transform: translateY(-50%);
}
.button-control-center:hover .accessicon-tooltip {
	visibility: visible;
	opacity: 1;
}
/* -------------------- Control Center Barrierefreiheit ENDE -------------------- */

/* -------------------- Cookie Modal ANFANG -------------------- */
.cookieModalBrandIcon {
	width: 60px;
	height: 60px;
	background: rgb(255 255 255);
	border-radius: 3em;
	padding: .6em;
	display: flex;
	justify-content: center;
}
@media (max-width: 767px) {
	#cookieModal .modal-body {
		font-size: .72em;
	}
}
#cookieModal .modal-content {
	background-color: var(--bg-modal-content);
	color: var(--modal-content-text-color);
	border-radius: .5em;
}
#cookieModal .modal-header {
	background-color: var(--modal-header-bg);
	color: var(--modal-header-text-color);
}
#cookieModal .modal-footer {
	background-color: var(--modal-footer-bg);
}
#cookieModal a {
	color: var(--color-akzent);
	text-decoration: underline;
}
#cookieModal a:hover {
	opacity: .9;
}
/* Blur zum Modal Backdrop hinzufügen */
body:has(#cookieModal.show) .modal-backdrop {
	opacity: 1 !important;
	background-color: rgb(0 0 0 / .35) !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
#a11yOpenBtnInModal {
	height: fit-content;
	width: fit-content;
	padding: 0;
	margin: 0;
	border: none;
	background-color: transparent;
	font-size: 1.5em;
	color: rgb(255 255 255);
}
.consent-placeholder {
	background-color: var(--placeholder-background);
	padding: 1em;
	border: 1px solid rgb(207 207 207);
	border-radius: .2em;
}
.btn-custom-reject {
	background-color: var(--color-btn-custom-reject-normal);
	color: rgb(59 59 59);
}
.btn-custom-reject:hover,
.btn-custom-reject:focus {
	background-color: var(--color-btn-custom-reject-hover);
}
.btn-custom-accept {
	background-color: var(--color-btn-custom-accept-normal);
	color: rgb(255 255 255);
}
.btn-custom-accept:hover,
.btn-custom-accept:focus {
	background-color: var(--color-btn-custom-accept-hover);
	color: rgb(255 255 255);
}
.consent-icons {
	background-color: var(--bg-consent-icons);
	border-radius: .2em;
	box-shadow: 0 0 6px 0 rgb(0 0 0 / .24);
}
.consent-icons svg {
	font-size: 1.6em;
}
.consent-icons p {
	font-size: .75em;
	margin: 0;
}
.icontrenner {
	border-left: 1px solid rgb(255 255 255);
	border-right: 1px solid rgb(204 204 204);
}
/* -------------------- Cookie Modal ENDE -------------------- */

/* -------------------- Custom Spacer Padding u. Margin ANFANG -------------------- */
.cp-4 { padding-top: 4em !important; padding-bottom: 4em !important; padding-left: 4em !important; padding-right: 4em !important; }
.cpt-4 { padding-top: 4em !important; }
.cpb-4 { padding-bottom: 4em !important; }
.cps-4 { padding-left: 4em !important; }
.cpe-4 { padding-right: 4em !important; }
.cpx-4 { padding-left: 4em !important; padding-right: 4em !important; }
.cpy-4 { padding-top: 4em !important; padding-bottom: 4em !important; }
.cp-5 { padding-top: 5em !important; padding-bottom: 5em !important; padding-left: 5em !important; padding-right: 5em !important; }
.cpt-5 { padding-top: 5em !important; }
.cpb-5 { padding-bottom: 5em !important; }
.cps-5 { padding-left: 5em !important; }
.cpe-5 { padding-right: 5em !important; }
.cpx-5 { padding-left: 5em !important; padding-right: 5em !important; }
.cpy-5 { padding-top: 5em !important; padding-bottom: 5em !important; }
.cp-6 { padding-top: 6em !important; padding-bottom: 6em !important; padding-left: 6em !important; padding-right: 6em !important; }
.cpt-6 { padding-top: 6em !important; }
.cpb-6 { padding-bottom: 6em !important; }
.cps-6 { padding-left: 6em !important; }
.cpe-6 { padding-right: 6em !important; }
.cpx-6 { padding-left: 6em !important; padding-right: 6em !important; }
.cpy-6 { padding-top: 6em !important; padding-bottom: 6em !important; }
.cp-7 { padding-top: 7em !important; padding-bottom: 7em !important; padding-left: 7em !important; padding-right: 7em !important; }
.cpt-7 { padding-top: 7em !important; }
.cpb-7 { padding-bottom: 7em !important; }
.cps-7 { padding-left: 7em !important; }
.cpe-7 { padding-right: 7em !important; }
.cpx-7 { padding-left: 7em !important; padding-right: 7em !important; }
.cpy-7 { padding-top: 7em !important; padding-bottom: 7em !important; }
.cp-8 { padding-top: 8em !important; padding-bottom: 8em !important; padding-left: 8em !important; padding-right: 8em !important; }
.cpt-8 { padding-top: 8em !important; }
.cpb-8 { padding-bottom: 8em !important; }
.cps-8 { padding-left: 8em !important; }
.cpe-8 { padding-right: 8em !important; }
.cpx-8 { padding-left: 8em !important; padding-right: 8em !important; }
.cpy-8 { padding-top: 8em !important; padding-bottom: 8em !important; }
.cp-9 { padding-top: 9em !important; padding-bottom: 9em !important; padding-left: 9em !important; padding-right: 9em !important; }
.cpt-9 { padding-top: 9em !important; }
.cpb-9 { padding-bottom: 9em !important; }
.cps-9 { padding-left: 9em !important; }
.cpe-9 { padding-right: 9em !important; }
.cpx-9 { padding-left: 9em !important; padding-right: 9em !important; }
.cpy-9 { padding-top: 9em !important; padding-bottom: 9em !important; }
.cm-4 { margin-top: 4em !important; margin-bottom: 4em !important; margin-left: 4em !important; margin-right: 4em !important; }
.cmt-4 { margin-top: 4em !important; }
.cmb-4 { margin-bottom: 4em !important; }
.cms-4 { margin-left: 4em !important; }
.cme-4 { margin-right: 4em !important; }
.cmx-4 { margin-left: 4em !important; margin-right: 4em !important; }
.cmy-4 { margin-top: 4em !important; margin-bottom: 4em !important; }
.cm-5 { margin-top: 5em !important; margin-bottom: 5em !important; margin-left: 5em !important; margin-right: 5em !important; }
.cmt-5 { margin-top: 5em !important; }
.cmb-5 { margin-bottom: 5em !important; }
.cms-5 { margin-left: 5em !important; }
.cme-5 { margin-right: 5em !important; }
.cmx-5 { margin-left: 5em !important; margin-right: 5em !important; }
.cmy-5 { margin-top: 5em !important; margin-bottom: 5em !important; }
.cm-6 { margin-top: 6em !important; margin-bottom: 6em !important; margin-left: 6em !important; margin-right: 6em !important; }
.cmt-6 { margin-top: 6em !important; }
.cmb-6 { margin-bottom: 6em !important; }
.cms-6 { margin-left: 6em !important; }
.cme-6 { margin-right: 6em !important; }
.cmx-6 { margin-left: 6em !important; margin-right: 6em !important; }
.cmy-6 { margin-top: 6em !important; margin-bottom: 6em !important; }
.cm-7 { margin-top: 7em !important; margin-bottom: 7em !important; margin-left: 7em !important; margin-right: 7em !important; }
.cmt-7 { margin-top: 7em !important; }
.cmb-7 { margin-bottom: 7em !important; }
.cms-7 { margin-left: 7em !important; }
.cme-7 { margin-right: 7em !important; }
.cmx-7 { margin-left: 7em !important; margin-right: 7em !important; }
.cmy-7 { margin-top: 7em !important; margin-bottom: 7em !important; }
.cm-8 { margin-top: 8em !important; margin-bottom: 8em !important; margin-left: 8em !important; margin-right: 8em !important; }
.cmt-8 { margin-top: 8em !important; }
.cmb-8 { margin-bottom: 8em !important; }
.cms-8 { margin-left: 8em !important; }
.cme-8 { margin-right: 8em !important; }
.cmx-8 { margin-left: 8em !important; margin-right: 8em !important; }
.cmy-8 { margin-top: 8em !important; margin-bottom: 8em !important; }
.cm-9 { margin-top: 9em !important; margin-bottom: 9em !important; margin-left: 9em !important; margin-right: 9em !important; }
.cmt-9 { margin-top: 9em !important; }
.cmb-9 { margin-bottom: 9em !important; }
.cms-9 { margin-left: 9em !important; }
.cme-9 { margin-right: 9em !important; }
.cmx-9 { margin-left: 9em !important; margin-right: 9em !important; }
.cmy-9 { margin-top: 9em !important; margin-bottom: 9em !important; }
/* -------------------- Custom Spacer Padding u. Margin ENDE -------------------- */

/* -------------------- Unterseiten ANFANG -------------------- */
#main-flexslider.slider-unterseite .slides img {
	width: 100%;
	height: clamp(220px, 24vw, 420px);
	object-fit: cover;
}
.leistungs-box {
	background: var(--check-card-bg);
	border: 1px solid var(--check-card-border);
	border-radius: 1.25rem;
}
.leistungs-box-titel {
	font-family: var(--font-navigation);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--check-icon);
}
.leistungs-punkt {
	background: var(--leistungs-punkt-bg);
	border: 1px solid var(--check-card-border);
	border-radius: 1rem;
	box-shadow: 0 .35rem 1rem rgb(39 33 91 / .06);
	font-size: .95em;
	line-height: 1.35;
}
.leistungs-punkt-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: .8rem;
	background: var(--service-icon-bg);
	color: rgb(255 255 255);
	font-size: 1.05rem;
	box-shadow: 0 .35rem .75rem rgb(39 33 91 / .2);
}
.hinweis-box {
	background: var(--hinweis-bg);
	border-left: 4px solid var(--color-blau-hell);
	border-radius: .75rem;
}
.hinweis-box > svg,
.hinweis-box > i {
	flex-shrink: 0;
	color: var(--check-icon);
	font-size: 1.2rem;
}
.unterschrift svg,
.unterschrift i {
	color: var(--check-icon);
}
/* -------------------- Unterseiten ENDE -------------------- */

/* -------------------- Impressum Anbieterkarte ANFANG -------------------- */
.anbieter-karte {
	background: var(--panel-hell-bg);
	border: 1px solid var(--check-card-border);
	border-radius: var(--panel-radius);
	box-shadow: var(--panel-schatten);
}
.anbieter-kopf {
	border-bottom: 1px solid var(--check-card-border);
}
.anbieter-eyebrow,
.anbieter-titel {
	font-family: var(--font-navigation);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--check-icon);
}
.anbieter-logo {
	width: 100%;
	max-width: 260px;
	height: auto;
}
.anbieter-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: .8rem;
	background: var(--service-icon-bg);
	color: rgb(255 255 255);
	box-shadow: 0 .35rem .75rem rgb(39 33 91 / .2);
}
.anbieter-liste small {
	color: var(--color-subline);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.anbieter-angaben {
	background: var(--check-card-bg);
	border: 1px solid var(--check-card-border);
	border-radius: 1.25rem;
	padding: .5rem 1.25rem;
}
.anbieter-angabe + .anbieter-angabe {
	border-top: 1px solid var(--check-card-border);
}
.anbieter-angabe dt {
	font-weight: 600;
	color: var(--color-ueberschriften);
}
.anbieter-angabe dd {
	text-align: right;
}
/* -------------------- Impressum Anbieterkarte ENDE -------------------- */

/* -------------------- Barrierefreiheit: Bilder ausblenden – Fallbacks ANFANG -------------------- */
/* body.no-images entfernt alle background-images – also auch Verläufe. Hier bekommen alle betroffenen Elemente eine lesbare Volltonfarbe. */
body.no-images::before {
	background: none;
}
body.no-images .top-info,
body.no-images .panel-blau,
body.no-images #kontaktleiste .kontaktleiste-cta,
body.no-images #kontakt .kontakt-info {
	background-color: var(--fallback-blau);
}
body.no-images .leistungs-box,
body.no-images .anbieter-angaben,
body.no-images .bilderstapel::before {
	background-color: var(--fallback-check);
}
body.no-images .panel-tint {
	background-color: var(--fallback-tint);
}
body.no-images .werkstatt-check {
	background-color: var(--fallback-check);
}
body.no-images #main-flexslider .hero-overlay {
	background-color: var(--fallback-hero);
}
body.no-images .hero-btn-primaer,
body.no-images #kontaktleiste .kontaktleiste-btn,
body.no-images #leistungen .service-icon,
body.no-images .leistungs-punkt-icon,
body.no-images .anbieter-icon,
body.no-images .float-dock-link:hover,
body.no-images .float-dock-link:focus-visible,
body.no-images .scroll-top {
	background-color: var(--fallback-button);
}
body.no-images #leistungen .service-card:hover .service-icon,
body.no-images #leistungen .service-card:focus-within .service-icon {
	background-color: var(--service-icon-hover-bg);
}
body.no-images #start .start-trenner {
	background-color: var(--fallback-button);
}
body.no-images .site-footer {
	background-color: var(--fallback-footer);
}
/* Favicon-Wasserzeichen sind rein dekorativ und werden mit ausgeblendet */
body.no-images .panel-blau::before,
body.no-images .kontakt-info::before,
body.no-images .kontaktleiste-cta::before,
body.no-images .site-footer::before,
body.no-images .bilderstapel::after {
	display: none;
}
/* -------------------- Barrierefreiheit: Bilder ausblenden – Fallbacks ENDE -------------------- */

/* -------------------- Reduced Motion ANFANG -------------------- */
@media (prefers-reduced-motion: reduce) {
	#mainNav .line,
	.switch .ball,
	.hero-btn,
	#kontaktleiste .kontaktleiste-btn,
	#leistungen .service-card,
	#leistungen .service-card::before,
	#leistungen .service-card h3,
	#leistungen .service-card p,
	#leistungen .service-icon,
	#leistungen .service-link svg,
	#leistungen .service-link i,
	#vorteile .btn-vorteile,
	.float-dock-link,
	.float-dock-label,
	.scroll-top,
	.bilderstapel-bild,
	.bilderstapel-bild img,
	.bilderstapel-zoom,
	.accessicon-tooltip,
	#readline {
		transition: none;
	}
	#mainNav li.dropdown:hover .dropdown-menu:not(.megasubmenu),
	#mainNav li.dropdown:focus .dropdown-menu:not(.megasubmenu),
	#mainNav .dropdown-menu > li:hover .megasubmenu,
	.offen-status.ist-offen .offen-punkt::after {
		animation: none;
	}
	.hero-btn:hover,
	.hero-btn:focus-visible,
	#kontaktleiste .kontaktleiste-btn:hover,
	#kontaktleiste .kontaktleiste-btn:focus-visible,
	#leistungen .service-card:hover,
	#leistungen .service-card:focus-within,
	#leistungen .service-card:hover .service-link svg,
	#leistungen .service-card:hover .service-link i,
	#vorteile .btn-vorteile:hover,
	#vorteile .btn-vorteile:focus-visible,
	.scroll-top:hover,
	.scroll-top:focus-visible,
	.bilderstapel-bild:hover,
	.bilderstapel-bild:focus-visible,
	.bilderstapel-bild:hover img,
	.bilderstapel-bild:focus-visible img {
		transform: none;
	}
	.float-dock-link:hover .float-dock-label,
	.float-dock-link:focus-visible .float-dock-label {
		transform: translateY(-50%);
	}
	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}
/* -------------------- Reduced Motion ENDE -------------------- */