/*!
Theme Name: Hochzeiten Nordhessen
Theme URI: https://hochzeiten-nordhessen.de
Author: webcoon
Author URI: https://webcoon.de
Description: Theme für Hochzeiten Nordhessen
Version: 1.0.0
Tested up to: 7.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hn
*/


/*--------------------------------------------------------------
# GLOBAL
--------------------------------------------------------------*/

body {
    font-family: var(--font-family), sans-serif;
	font-weight: var(--font-weight);
	line-height: 1.5em;
	font-size: var(--font-size);
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	color: var(--font-color);
}

.no-scroll {
	overflow: hidden;
}

*, *:after, *:before {
	box-sizing: border-box;
}

a {
	color: var(--main-color);
	text-decoration: none;
}

p a {
	color: var(--sub-color);
	text-decoration: underline;
}

a:hover, p a:hover {
	text-decoration: underline;
}

p {
	margin: 0 0 15px;
}

p:last-child, p:only-child {
	margin: 0;
}

.print-only {
	display: none;
}

input, textarea {
	box-shadow: unset;
	outline: unset;
	color: var(--text-color);
	font-family: var(--font-family), sans-serif;
	font-weight: var(--font-weight);
	line-height: 1em;
	font-size: var(--font-size);
}

strong {
	font-weight: 600;
}

img, video {
	width: 100%;
	height: auto;
	display: block;
}

::placeholder { 
	color: var(--text-color);
	opacity: 0.8; 
}

:-ms-input-placeholder { 
	color: var(--text-color);
}

::-ms-input-placeholder { 
	color: var(--text-color);
}

.overflow-hidden, .overflow-hidden body {
	overflow: hidden;
}

.b-t-1 {
	border-top: 1px solid;
}

#content ul {
	list-style: none;
	padding: 0;
	margin: 0 0 15px;
}

.upc {
	text-transform: uppercase;
}

.strong {
	font-weight: 600;
}

h1, .style-h1, h5, .style-h5 {
	margin: 0;
}

h2, .style-h2 {
	margin: 0 !important;
}

.fd-c {
	flex-direction: column;
}

.col {
	gap: 0 10px;
}

.checklist li:before {
	content:"☐";
	margin-right:10px;
}

a.button, .menu-button a, button.button {
	border: 1px solid var(--sub-color);
	color: #fff;
	position: relative;
	display: inline-flex;
	align-items: center;
	text-decoration: none !important;
	font-size: calc(var(--font-size) * .95) !important;
	font-weight: 600 !important;
	opacity: 1;
	background: var(--sub-color);
	border-radius: 100px;
	padding: 14px 25px 16px;
	line-height: 1em !important;
	font-family: 'sub-font';
	cursor: pointer;
	transition: all .3s ease;
}

button.button img {
	max-height: 18px;
	width: auto;
	margin-right: 10px;
}

.inline-btn {
	display: inline-block !important;
	width: auto !important;
	margin-bottom: 0 !important;
}


a.button:hover, .button.button:hover {
	background: #fff0 !important;
	color:var(--sub-color) !important;
}

a.button.bg-main-color:hover, button.button.bg-main-color:hover {
	color:var(--main-color) !important;
}
 

a.button.bg-sub-color:hover {
	color:var(--sub-color) !important;
}
  
.menu-button:hover {
	opacity: .7;
}

.menu-button-main-color a {
	background: var(--main-color);
  	border-color: var(--main-color);
}

.subline {
	margin-bottom: 10px !important;
}

h4, .style-h4 {
	text-transform: uppercase;
}

.image img {
	border-radius: 30px;
}

.br.video-container, .video.br video {
	border-radius: 30px;
	overflow: hidden;
}

.row.br {
	border-radius: 30px;
}

.col.br {
	border-radius: 30px;
}

.buttons {
	gap: 5px;
	display: flex;
	flex-wrap: wrap;	
}


/*--------------------------------------------------------------
# HOME
--------------------------------------------------------------*/

.hero {
	min-height: 600px;
}


.hero video {
	max-height: 800px;
	height: 80vh;
	min-height: 600px;
	object-fit: cover;
}

.index-2 {
	z-index: 2;
}

.i-h-f.m-b--2 {
	height: calc(100% + 2 * var(--spacing));
}


.video-1-1 .video-container {
	padding-bottom: 100%;
	border-radius: 30px;
}


.dienstleister-filter {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.dienstleister-filter a {
	background: var(--bg-color);
	padding: 10px 15px;
	line-height: 1em;
	border-radius: 10px;
	display: inline-block;
  	white-space: nowrap;
	transition: all .3s ease;
}

.dienstleister-filter-item.active a, .dienstleister-filter-item:hover a {
	background: var(--main-color);
	color: #fff;
	text-decoration: none !important;
}


.usp.icons {
	flex-direction: column;
	gap: 30px;
}

.usp.icons .icon {
	max-width: unset;
	text-align: left;
	display: grid;
	grid-template-columns: 60px 1fr;
	text-align: left;
}

.usp.icons .icon ._image {
	display: flex;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: var(--color-1);
	border-radius: 100%;
	padding: 12px !important;
}

.usp.icons .icon ._headline {
	font-size: 22px;
  	font-weight: 600;
	line-height: 1.3em;
	font-family: 'sub-font';
	margin-bottom: 10px;
}

.slider-dienstleister-kategorien {
	background: #fff;
	padding: 30px 100px;
	border-radius: 30px;
	display: flex;
	align-items: center;
	position: relative;
}

.dienstleister-kat-item a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
	justify-content: center;
	align-items: center;
}

.dienstleister-kat-name {
	line-height: 1.3em;
  	color: var(--font-color);
}

.dienstleister-kat-item img {
	width: 70px;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
	background: var(--main-color);
}

.swiper-button-next:hover:before, .swiper-button-prev:hover:before {
	border-color: #fff;
}

.dienstleister-items {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
}

.dienstleister-item {
	background: var(--bg-color);
  	border-radius: 20px;
  	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: all .3s ease;
}


.dienstleister-item:hover {
	background: #f0ccc5;
}

.dienstleister-item .row.dienstleister-infos {
	bottom: unset;
	top: 20px;
	right: 20px;
	z-index: 1;
}

.dienstleister-item .row.dienstleister-infos .md-label img {
	height: 16px !important;
}

.dienstleister-item .dienstleister-thumbnail {
	position: relative;
}

.dienstleister-item .dienstleister-thumbnail img {
	height: 300px;
	object-fit: cover;
}

.dienstleister-item .dienstleister-thumbnail button {
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: #fff;
  	border-color: #fff !important;
	transition: all .2s ease;
	z-index: 1;
}

.dienstleister-item .dienstleister-thumbnail button:hover {
	transform: scale(1.035);
}

.dienstleister-item .dienstleister-details {
	padding: 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.slider-highlight-container, .slider-highlight-container .slider-highlight, .slider-highlight .swiper-wrapper {
	height: 100%;
}

.slider-highlight .dienstleister-item {
	display: flex;
	flex-direction: column;
	min-height: 500px;
	height: 100%;
	position: relative;
	justify-content: flex-end;
	background: unset;
}

.dienstleister-footer {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
	margin: auto 0 0;
}

.dienstleister-ort {
	font-size: 12px;
	background: var(--color-1);
	border-radius: 100px;
	line-height: 1em;
	padding: 5px 10px;
	display: flex;
	align-items: center;
	color: var(--color-3)
}

.slider-highlight .favorite-button {
	margin-bottom: 20px;
	margin-top: auto;
  	width: fit-content;
}

.slider-highlight .dienstleister-thumbnail {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: -1;
}

.slider-highlight .dienstleister-thumbnail img {
	height: 100%;
	object-fit: cover;
}

.slider-highlight .dienstleister-thumbnail::before {
	content: "";
	position: absolute;
	background:rgb(189,85,82);
	background: linear-gradient(-90deg, rgba(189,85,82,0) 0%, rgba(0, 0, 0, 0.60) 100%);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.slider-highlight .favorite-button {
	filter: brightness(100);
}

.slider-highlight a {
	color: #fff;
}

/*--------------------------------------------------------------
# DIENSTLEISTER
--------------------------------------------------------------*/

.dienstleister-single .bg-img:before {
	content: "";
	position: absolute;
	background: rgb(189,85,82);
	background: linear-gradient(-90deg, rgba(189,85,82,0) 0%, rgba(0, 0, 0, 0.60) 100%);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.empfehlung-switch {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.empfehlung-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.empfehlung-switch .slider {
	position: relative;
	width: 50px;
	height: 26px;
	background: #ccc;
	border-radius: 13px;
	transition: background 0.3s ease;
	margin-right: 8px;
}

.empfehlung-switch .slider::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.3s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.empfehlung-switch input:checked + .slider {
	background: var(--main-color);
}

.empfehlung-switch input:checked + .slider::before {
	transform: translateX(24px);
}

.empfehlung-switch .label-text {
	font-size: 15px;
	color: #333;
}
.empfehlung-switch input:checked ~ .label-text {
	color: var(--main-color);
}
  
.ajax-feedback {
	background-color: var(--color-2) !important;
	padding: 12px 20px;
	border-radius: 10px;
	grid-column: 1 / -1;
}

/*--------------------------------------------------------------
# FAVORITEN
--------------------------------------------------------------*/

.favorite-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.favorite-thumbnail {
    flex: 0 0 80px;
    margin-right: 15px;
}

.favorite-thumbnail img {
    width: 80px;
    height: auto;
    border-radius: 4px;
}

.favorite-details {
    flex: 1;
}

.favorite-details h4 {
    margin: 0 0 5px;
    font-size: 1.1em;
}

.favorite-details p {
    margin: 0;
    font-size: 0.9em;
    color: #555;
}

.favorite-actions {
    flex: 0 0 auto;
    margin-left: 15px;
}

.favorite-actions button {
    background: #bd5552;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.favorite-actions button:hover {
    background: #a04441;
}


.favorites-sidebar {
	background: var(--bg-color);
	padding: 30px;
	border-radius: 30px;
}

.share-channels {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 20px 0;
	margin: 20px 0;
}

.share-link {
	text-align: center;
	font-size: 12px;
	line-height: 1em;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.share-link img {
	height: 25px;
	width: auto;
	margin: 0 auto 2px;
}

.fav-list-name {
	border-bottom: 1px solid var(--bg-color);
	padding-bottom: 20px;
  	margin-bottom: 20px;
}

.small-text {
	font-size: 14px;
	line-height: 1.3em;
	margin-bottom: 5px;
}


.hn-input {
	background: #fff;
	border: var(--bg-color);
	padding: 12px 20px;
	border-radius: 50px;
	flex: 1;
}

#favorite-link {
	width: calc(100% - 156px);
}

.favorite-link {
	display: flex;
	gap: 10px;	
}

.sponsored-slider-container a {
	filter: grayscale(100);
	transition: all .3s ease;
}

.sponsored-slider-container a:hover {
	filter: grayscale(0);
}

#content .section .no-animated {
	opacity: 1 !important;
	transform: unset !important;
}

.custom-provider-badge {
	background: var(--bg-color);
	font-size: 12px;
	padding: 5px 12px;
	display: inline-block;
	line-height: 1em;
	margin-bottom: 5px;
	border-radius: 2px;
	width: fit-content;
}

#custom-provider-category {
	background: var(--color-2);
	border-color: var(--color-2);
	color: var(--text-color);
}

/*--------------------------------------------------------------
# HERZ
--------------------------------------------------------------*/

.favorite-button {
	background: unset;
	border: 1px solid #bd5552 !important;
	padding: 0 25px 0 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-radius: 100px;
	gap: 5px;
	transition: all .2s ease;
}

.favorite-button:hover {
	transform: scale(1.035);
}

.favorite-button .favorite-heart-wrapper {
	display: flex;
	align-items: center;
}

.favorite-heart-wrapper svg {
	cursor: pointer;
	overflow: visible;
	width: 45px;
	border-radius: 9999px;
	user-select: none;
	margin: 0;
}


.favorite-button .favorite-heart-wrapper svg #heart {
	stroke-width: 1.5px;
	transform-origin: center;
	animation: animateHeartOut 0.3s linear forwards;
}

.favorite-button .favorite-heart-wrapper svg #main-circ {
	transform-origin: 29.5px 29.5px;
	border-radius: 9999px;
	user-select: none;
}


.favorite-button.favorited .favorite-heart-wrapper svg #heart {
	transform: scale(0.2);
	fill: #bd5552;
	animation: animateHeart 0.3s linear forwards 0.25s;
}

.favorite-button.favorited .favorite-heart-wrapper svg #main-circ {
	transition: all 2s;
	animation: animateCircle 0.3s linear forwards;
	opacity: 1;
}

.favorite-button.favorited .favorite-heart-wrapper svg .grp {
	opacity: 1;
	transition: 0.1s all 0.3s;
}

.favorite-button.favorited .favorite-heart-wrapper svg .grp .cir-a,
.favorite-button.favorited .favorite-heart-wrapper svg .grp .cir-b {
	transform-origin: 0 0;
}

.favorite-button.favorited .favorite-heart-wrapper svg .grp .cir-a {
	transition: 0.5s transform 0.3s;
}

.favorite-button.favorited .favorite-heart-wrapper svg .grp .cir-b {
	transition: 1.5s transform 0.3s;
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp1 #oval1 {
	transform: scale(0) translate(0, -30px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp1 #oval2 {
	transform: scale(0) translate(10px, -50px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp2 #oval1 {
	transform: scale(0) translate(30px, -15px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp2 #oval2 {
	transform: scale(0) translate(60px, -15px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp3 #oval1 {
	transform: scale(0) translate(30px, 0);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp3 #oval2 {
	transform: scale(0) translate(60px, 10px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp4 #oval1 {
	transform: scale(0) translate(30px, 15px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp4 #oval2 {
	transform: scale(0) translate(40px, 50px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp5 #oval1 {
	transform: scale(0) translate(-10px, 20px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp5 #oval2 {
	transform: scale(0) translate(-60px, 30px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp6 #oval1 {
	transform: scale(0) translate(-30px, 0);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp6 #oval2 {
	transform: scale(0) translate(-60px, -5px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp7 #oval1 {
	transform: scale(0) translate(-30px, -15px);
}

.favorite-button.favorited .favorite-heart-wrapper svg #grp7 #oval2 {
	transform: scale(0) translate(-55px, -30px);
}

@keyframes animateCircle {
	40% {
		transform: scale(10);
		opacity: 1;
		fill: #bd5552;
	}
	55% {
		transform: scale(11);
		opacity: 1;
		fill: #e3bbb4;
	}
	65% {
		transform: scale(12);
		opacity: 1;
		fill: #F1DDD9;
	}
	75% {
		transform: scale(13);
		opacity: 1;
		fill: transparent;
		stroke: #F1DDD9;
		stroke-width: 0.5px;
	}
	85% {
		transform: scale(17);
		opacity: 1;
		fill: transparent;
		stroke: #F1DDD9;
		stroke-width: 0.2px;
	}
	95% {
		transform: scale(18);
		opacity: 1;
		fill: transparent;
		stroke: #F1DDD9;
		stroke-width: 0.1px;
	}
	100% {
		transform: scale(19);
		opacity: 1;
		fill: transparent;
		stroke: #F1DDD9;
		stroke-width: 0;
	}
}

@keyframes animateHeart {
	0% {
		transform: scale(0.2);
	}
	40% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes animateHeartOut {
	0% {
		transform: scale(1.4);
	}
	100% {
		transform: scale(1);
	}
}

.favorite-button .favorite-button-text {
	color: #bd5552;
	font-weight: bold;
	font-family: sans-serif;
}


/*--------------------------------------------------------------
# DIENSTLEISTER
--------------------------------------------------------------*/

.dienstleister-logo img {
	max-height: 100px;
	max-width: 240px;
	width: auto;
}

.dienstleister-single .hero .favorite-button {
	filter: brightness(100);
}

.dienstleister-infos {
	display: flex;
	gap: 10px;
}


.dienstleister-kontakt {
	background: var(--color-2);
	padding: 30px;
	border-radius: 30px;	
}

.dienstleister-kontakt a {
	color: var(--font-color);
}

.kontakt-info {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 10px;	
}

.kontakt-divider {
	background: #0002;
	width: 100%;
	height: 1px;
	margin: 20px 0;
}

.kontakt-icon img {
	max-width: 24px;
}

.social-channels {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.social-link-text {
	font-size: 14px;
  	margin-right: 5px;
}

.social-link {
	text-align: center;
	font-size: 12px;
	line-height: 1em;
	display: flex;
	flex-direction: column;
	gap: 7px;
  }

.social-link img {
	height: 25px;
	width: auto;
	margin: 0 auto 2px;
}

.leistungen {
	display: flex;
	flex-direction: column;
	gap: 10px;	
}

.leistungen .leistung {
	border: 1px solid var(--color-1);
	padding: 5px 30px 5px 5px;
	border-radius: 100px;
	display: flex;
	gap: 15px;
	align-items: center;
}

.leistungen .leistung ._image {
	display: flex;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--main-color);
	border-radius: 100%;
	padding: 10px !important;
	flex: 0 0 auto;
}

.leistungen .leistung ._image img {
	max-width: 40px;
	filter: brightness(100);
}

.row.dienstleister-infos {
	position: absolute;
	bottom: calc(var(--spacing) / 2);
	right: 0;
	justify-content: flex-end;
	left: 0;
	gap: 10px !important;	
}

.gallery-mosaic img {
	border-radius: 20px;
}

.gallery-mosaic {
    margin: 0 auto;
}

.gallery-sizer,
.gallery-item {
    width: calc(33.33% - 15px);
}

.gallery-item {
    margin-bottom: 20px;
}

#dienstleister-map {
	width: 100%; 
	height: 500px;
	border-radius: 20px;
	overflow: hidden;
}


.video-slider-next {
	right: -25px;
  	z-index: 2;
  	background: #fff;
  	border: 0;
  	box-shadow: 0 0 3px 3px #0000000d;	
}

.video-slider-prev {
	left: -25px;
  	z-index: 2;
  	background: #fff;
  	border: 0;
  	box-shadow: 0 0 3px 3px #0000000d;	
}

.video-slider-prev:hover, .video-slider-next:hover {
	background: var(--main-color);
}



#lightbox-popup {
	background: #fffc;
	overflow-y: hidden;
}

#lightbox-popup.popup.active {
	backdrop-filter: blur(3px);
}

#lightbox-popup.popup ._close {
	width: 50px;
	height: 50px;
	right: 0px;
	top: 0px;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--main-color);
	z-index: 999;
}

#lightbox-popup.popup ._close::before, #lightbox-popup.popup ._close::after {
	background: #fff;
	left: unset;
}

#lightbox-popup .swiper-button-prev {
	left: 0px;
}

#lightbox-popup .swiper-button-next {
	right: 0px;
}

#lightbox-popup .popup-inner {
	background: unset;
	box-shadow: unset;
	max-width: unset;
	padding: 0;
	height: 100vh;
	display: flex;
	align-content: center;
	justify-content: center;
}

#lightbox-popup .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

#lightbox-popup .popup-inner img {
	max-height: calc(100vh - 100px);
	max-width: calc(100vw - 280px);
	width: auto;
	border-radius: 20px;
	object-fit: contain;
	object-position: center;
}

/*--------------------------------------------------------------
# MAGAZIN
--------------------------------------------------------------*/


.magazin-articles-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 20px 0;
}

.magazin-articles-grid.magazin-short {
	grid-template-columns: 1.5fr 1fr 1fr;
}

.magazin-article {
	border: 1px solid #ddd;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border-radius: 20px;
  	overflow: hidden;
}

.magazin-article .article-image img {
	width: 100%;
	height: auto;
	display: block;
	height: 300px;
	object-fit: cover;
}

.magazin-article .article-title a {
	color: #bd5552;
	text-decoration: none;
}

.article-content {
	padding: 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.magazin-article .article-button {
	margin-top: auto;
}


/* =====================================
   Swiper-Coverflow/Caro-Style Anpassungen
   ===================================== */

.magazin-slider {
	position: relative;
	padding: 0px 50px;
}

.magazin-swiper .swiper-wrapper {
	align-items: center;
	height: 500px;
}

.magazin-swiper .swiper-slide .magazin-article {
	filter: grayscale(80%);
	transition: all .3s ease;
	background: #fff;
	border-radius: 20px;
}

.magazin-swiper .swiper-slide:not(.swiper-slide-active ):hover .magazin-article {
	filter: grayscale(0%);
}

.magazin-swiper .swiper-slide.swiper-slide-active .magazin-article {
	opacity: 1;
	filter: none;
}

.magazin-swiper .swiper-slide {
	transition: all .3s ease;
	transform: scale(.85);
}

.magazin-swiper .swiper-slide.swiper-slide-active {
	transform: scale(1);
}

.magazin-swiper .article-title {
	height: 2.6em;
	overflow: hidden;
}

.magazin-prev {
	left: 0;
}

.magazin-next {
	right: 0;
}

.gap-10 {
	gap: 0 10px !important;
}

.btn-inline {
	width: fit-content !important;
	margin-bottom: 0 !important;
}

.button.stroke .button {
	border: 1px solid var(--bg-color);
	background: unset;
	color: var(--bg-color);
}


.df-container .df-loading-icon, .df-fetch-pdf .df-loading-info, .df-flipbook-3d.df-loading::after, .df-hybrid-viewer:not(.df-zoom-active) .df-loading + .df-zoomview::after, .df-page.df-loading::after, .df-searching .df-search-info, .df-thumb.df-thumb-requested::before {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto; background: none; display: block; shape-rendering: auto;' width='48px' height='48px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Ccircle cx='50' cy='50' fill='none' stroke='%23bd5552' stroke-width='9' r='30' stroke-dasharray='141.37166941154067 49.12388980384689'%3E%3CanimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1s' values='0 50 50;360 50 50' keyTimes='0;1'%3E%3C/animateTransform%3E%3C/circle%3E%3C!-- %5Bldio%5D generated by https://loading.io/ --%3E%3C/svg%3E") !important;
}

.df-ui-nav .df-ui-btn::before {
	color: var(--main-color) !important;
	filter: unset !important;
}


/*--------------------------------------------------------------
# SINGLE
--------------------------------------------------------------*/


.magazin-single .hero-small .bg-img {
	background: var(--color-1);
	background: linear-gradient(90deg,rgba(212, 166, 159, 1) 0%, rgba(209, 138, 135, 1) 100%);
}

.magazin-single .hero-small .bg-img:not(.no-img)::before {
	content: "";
	position: absolute;
	background:  rgb(189,85,82);
	background: linear-gradient(-90deg, rgba(189,85,82,0) 0%, rgba(0, 0, 0, 0.60) 100%);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.magazin-single .hero-small a.button {
	background: unset;
}

.post-content {
	gap: 30px;
	display: grid;
	margin: 0 auto;
	padding: var(--spacing) 0;
	width: var(--width);
  	max-width: var(--maxwidth);
	align-items: flex-start;
}

.post-content.with-sidebar {
	grid-template-columns: 2.5fr 1fr;
}

.post-content .section {
	padding-top: 0;
	padding-bottom: calc(var(--spacing) / 2);
}

.post-content .section .row {
	width: 100%;
	--gap-factor: 0.5;
	gap: calc(var(--spacing) * var(--gap-factor));
}

.post-sidebar {
	background: var(--color-2);
	padding: 30px;
	border-radius: 30px;
	position: sticky;
	top: 30px;
}

.post-sidebar-h2 {
	border-bottom: 1px solid var(--color-1);
	padding-bottom: 5px;
	margin-bottom: 5px;
}

.post-sidebar-h2:last-child {
	border-bottom: 0 !important;
}

.magazin-related {
	grid-template-columns: 1fr 1fr 1fr;
}



/*--------------------------------------------------------------
# CHECKLISTE
--------------------------------------------------------------*/

.p-u {
	position: unset !important;
}

.hochzeits-checkliste { 
	max-width: 1000px; 
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.checklist-group { 
	background:var(--color-2); 
	padding: 30px; 
	border-radius: 20px;
	print-color-adjust: exact; 
	page-break-inside: avoid !important;
	break-inside: avoid !important;
}

.checklist-group h2 { 
	text-align:center; 
	margin-bottom:30px !important; 
}

.checklist-items { 
	columns: 2;
  	column-gap: 30px;
	padding:0; 
	margin:0; 
}

.checklist-items .checklist-column {
	background: #fff;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	display: flex;
	gap: 10px;
	min-height: 70px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

.checklist-column label { 
	display:flex; 
	align-items:center; 
}

.checklist-column input[type=checkbox] { 
	margin-right: 10px; 
	accent-color: var(--main-color);
}

.provider-list { 
	list-style:none; 
	padding:0; 
	margin-bottom: 0 !important;
}


.providers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.provider-item label {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--color-2);
  border-radius: 8px;
  background-color: var(--color-w);
  position: relative;
  transition: background-color 0.3s, border-color 0.3s;
  cursor: pointer;
}

.provider-item label:hover {
  border: 1px solid var(--bg-color);
  background-color: var(--bg-color);
}

.provider-item label:has(input.provider-checkbox:checked) {
  background-color: var(--color-1);
  border-color: var(--main-color);
}

.provider-item label:has(input.provider-checkbox:checked)::after {
  content: "✓ ausgewählt";
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: var(--main-color);
  color: var(--color-w);
  font-size: 12px;
  line-height: 12px;
  padding: 2px 6px;
  border-radius: 12px;
}

.provider-item label img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 12px;
  flex-shrink: 0;
}

.provider-item label .provider-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.provider-item label .provider-info .provider-title {
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--text-color);
  margin-bottom: 6px;
  line-height: 1.3em;
}

.provider-item label .provider-info .provider-location {
  font-size: 14px;
  color: var(--sub-color);
  margin-bottom: 8px;
}

.provider-item label .provider-info .provider-link {
  font-size: 14px;
  color: var(--main-color);
  text-decoration: none;
  align-self: flex-start;
}

.provider-item label .provider-info .provider-link:hover {
  text-decoration: underline;
}

.provider-item label input.provider-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


.select-providers {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.selected-providers {
  display: flex;
  gap: 8px;
}

.selected-providers .provider-img {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.selected-providers .provider-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.selected-providers .provider-img:hover::after {
  content: attr(data-title);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-color);
  color: var(--text-color);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  z-index: 10;
}


.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 8px;
  border: none;
  border-radius: 50%;
  background: #c2bdae;
  color: var(--color-w);
  cursor: pointer;
  transition: background 0.3s;
}

.open-providers-btn:hover {
  background: var(--sub-color);
}


.checklist-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
}

.progress-bar {
  flex: 1;
  height: 10px;
  background-color: var(--color-2);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
  print-color-adjust: exact; 
}

.progress-fill {
  height: 100%;
  background: var(--main-color);
  width: 0;
  transition: width 0.6s ease-in-out;
  print-color-adjust: exact; 
}

.progress-text {
  font-size: 14px;
  color: var(--text-color);
  white-space: nowrap;
}

.checklist-group[data-percent="100"] .progress-fill {
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%,100% { transform: scaleX(1); }
  50%     { transform: scaleX(1.03); }
}

.checkliste-action {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	max-width: 1000px;
	margin: 0px auto;
	align-items: flex-end;
}

.checkliste-action-link #favorite-link {
	background: var(--bg-color);
}


/*--------------------------------------------
 TIMELINE
--------------------------------------------*/

.timeline-wrapper {
	max-width: 1000px;
  	margin: auto;
	margin-bottom: 80px !important;
}

.timeline-container {
  position: relative;
  height: 60px;
}

.timeline-bar {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 4px;
  background: var(--color-2);
  transform: translateY(-50%);
}

.timeline-tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 10px;
  background: #999;
  transform: translate(-50%, -50%);
}

.timeline-tick.major {
  height: 20px;
  background: #555;
}

.timeline-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: #333;
  white-space: nowrap;
}

.timeline-end-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: bold;
  color: #222;
}

.timeline-segment {
  position: absolute;
  height: 100%;
  text-decoration: none !important;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #dfc2c200;
  transition: background .5s ease;
  border-radius: 8px;
}

.timeline-segment:hover {
	background: #bbaf9230;
}

.timeline-segment.below {
	align-items: flex-end;
}

.timeline-segment.above .timeline-segment-label {
  transform: translateY(-100%);
  margin-top: -15px;
  line-height: 1.3em;
}

.timeline-segment.below .timeline-segment-label {
  transform: translateY(100%);
  margin-top: 15px;
  line-height: 1.3em;
}

.timeline-segment-label {
  font-size: 14px;
  color: #333;
  text-decoration: none !important;
  display: inline-flex;
  flex-wrap: wrap;
}

.timeline-segment-label:hover {
  text-decoration: none !important;
}

.timeline-current {
  position: absolute;
  top: calc(50% + 20px);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid var(--main-color);
  transform: translate(-50%,-100%);
}

.timeline-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  font-size: 9px;
  text-align: center;
  margin-left: 4px;
  justify-content: center;
  align-items: center;
}

.timeline-checkmark {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}


/*--------------------------------------------
  Animierte Custom Checkboxes
--------------------------------------------*/

.custom-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox .checkmark {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.custom-checkbox input.simple-checkbox {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  z-index: 2;
}

.custom-checkbox .check-group {
  transform-origin: center;
}

.custom-checkbox.checked .check-group {
  animation: 0.32s ease-in-out 1.03s check-group forwards;
  opacity: 1;
}

.custom-checkbox.checked .white-circle {
  animation: 0.35s ease-in 0.35s forwards circle;
  transform-origin: center;
}

.custom-checkbox.checked .outline {
  stroke-dasharray: 0,345.576px;
  animation: 0.38s ease-in outline forwards;
  transform-origin: center;
}

.custom-checkbox.checked .check {
  stroke-dasharray: 0,75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: 0.34s cubic-bezier(0.65,0,1,1) 0.8s forwards check;
}



.provider-item .checkmark {
  display: block;
  height: 30px;
}

.provider-item input.provider-checkbox:checked ~ .checkmark .check-group {
  animation: 0.32s ease-in-out 1.03s check-group forwards;
  opacity: 1;
}

.provider-item input.provider-checkbox:checked ~ .checkmark .white-circle {
  animation: 0.35s ease-in 0.35s forwards circle;
  transform-origin: center;
}

.provider-item input.provider-checkbox:checked ~ .checkmark .outline {
  stroke-dasharray: 0,345.576px;
  animation: 0.38s ease-in outline forwards;
  transform-origin: center;
}

.provider-item input.provider-checkbox:checked ~ .checkmark .check {
  stroke-dasharray: 0,75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: 0.34s cubic-bezier(0.65,0,1,1) 0.8s forwards check;
}



@keyframes outline {
  from { stroke-dasharray: 0,345.576px; }
  to   { stroke-dasharray: 345.576px,345.576px; }
}

@keyframes circle {
  from { transform: scale(1); }
  to   { transform: scale(0); }
}

@keyframes check {
  from { stroke-dasharray: 0,75px; }
  to   { stroke-dasharray: 75px,75px; }
}
@keyframes check-group {
  from { transform: scale(1); }
  50%  { transform: scale(1.09); }
  to   { transform: scale(1); }
}

/* Label-Text rechts vom Icon */
.checkbox-label-text {
  font-size: 16px;
  color: var(--text-color);
}


.custom-checkbox.checked .check-group {
      transform: scale(1) !important;
    }

    .custom-checkbox.checked .white-circle {
      transform: scale(0) !important;
    }

    .custom-checkbox.checked .outline {
      stroke-dasharray: 345.576px,345.576px !important;
    }

    .custom-checkbox.checked .check {
      stroke-dasharray: 75px,75px !important;
    }



/* --------------------------------------------
   TOGGLE CHECKLISTE
-------------------------------------------- */

.checklist-group h2 {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.checklist-group h2::after {
  content: "";
  position: absolute;
  right: 0;
  top: 5px;
  transition: transform .3s ease;
  background: url("/wp-content/uploads/pfeil-kreis.svg");
  background-size: contain;
  height: 30px;
  width: 30px;
  transform: rotate(-90deg);
  
}
.checklist-group.collapsed h2::after {
  transform: rotate(90deg);
}


/* --------------------------------------------
   Providers-Popup Tabs
-------------------------------------------- */

.providers-popup-nav {
  display: flex;
  gap: 16px;
  border-bottom: 2px solid var(--color-2);
  margin-bottom: 16px;
}

.providers-popup-nav-item {
  position: relative;
  padding: 8px 16px;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  transition: color 0.3s ease;
}

.providers-popup-nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: transparent;
  transition: background-color 0.3s ease;
}

.providers-popup-nav-item:hover {
  color: var(--main-color);
}

.providers-popup-nav-item:hover::after {
  background: var(--main-color);
}

.providers-popup-nav-item.active {
  color: var(--main-color);
}

.providers-popup-nav-item.active::after {
  background: var(--main-color);
}

.providers-popup-tabs {
  margin-bottom: 16px;
}

.providers-popup-tab {
  display: none;
}

.providers-popup-tab.active {
  display: block;
}

@media (max-width: 480px) {
  .providers-popup-nav {
    flex-wrap: wrap;
    gap: 8px;
  }
}



/*--------------------------------------------------------------
# FOOTER
--------------------------------------------------------------*/

#footer {
	margin: auto 0 0;
	background: var(--main-color);
  	color: #fff;
}

#footer a {
	color: #fff;
}

#footer .social-link img {
	filter: brightness(100);
}

#footer .custom-logo {
	max-width: 250px;
  	margin: auto;
}

.footer-categories {
	padding: 0;
	margin: 0;
	list-style: none;
	column-count: 2;	
}

.footer-row {
	display: grid !important;
	grid-template-columns: 1.2fr 2fr .8fr !important;
}

.footer-row .col {
	flex-direction: column;
}

#footer ul.menu {
    list-style: none;
    padding-left: 0;
	margin: 0;
}

#footer ul.menu li a {
    position: relative;
    display: flex;
	align-items: center;
}

#footer ul li {
	margin-bottom: 10px;
}

#footer li a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px !important;
}

#footer li a:before {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="7.811" height="14.121" viewBox="0 0 7.811 14.121"><path id="Vector" d="M0,0,6,6,0,12" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>');
  	width: 8px !important;
  	height: 22px;
}

#footer .headline * {
	font-weight: 600 !important;
	font-family: 'sub-font';
	font-size: 20px;
}

#menu-footer {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.row.copyright {
	border-top: 1px solid;
	padding-top: calc(var(--spacing) / 2);
	align-items: center !important;
	font-size: 14px;
}

.row.copyright .footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: flex-end;
}


#footer .custom-logo-link {
	max-width: 420px;
  	margin: -15px auto 15px;
  	width: 100%;
	filter: brightness(10);
}



/*--------------------------------------------------------------
# POPUP
--------------------------------------------------------------*/

.popup {
	position: fixed;
	width: 100vw;
	z-index: 9999;
  	background: #fff8;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 50px;
	display: flex;
	opacity: 0;
  	visibility: hidden;
	transition: all .2s ease .15s;
}

.popup.active {
	opacity: 1;
	visibility: visible;
	backdrop-filter: blur(2px);
	transition: all .3s ease;
}

.popup-inner {
	max-width: 600px;
	background: #fff;
	border-radius: 30px;
	padding: 50px;
	box-shadow: 0 0 40px #0003;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	outline: 0;
	margin: auto;
	transform: translateY(80px);	
	transition: transform .5s ease;
}

.popup.active .popup-inner {
	transform: translateY(0px);
}

.popup ._close {
	width: 30px;
	height: 30px;
	opacity: 1;
	cursor: pointer;
	position: absolute;
	right: 25px;
	top: 25px;
}

.popup ._close::before, .popup ._close::after {
	position: absolute;
	left: 15px;
	content: ' ';
	height: 30px;
	width: 2px;
	border-radius: 5px;
	background-color: #000;
}

.popup ._close::before {
	transform: rotate(45deg);
}

.popup ._close::after {
    transform: rotate(-45deg);
}

.popup .hidden {
	display: none !important;
}

.popup .contactform {
	margin-top: 20px;
}

.popup .headline {
	margin-bottom: 20px;
}


/*--------------------------------------------------------------
# PARTNER
--------------------------------------------------------------*/

.partner-werden {
	background: var(--bg-color);
	padding: 40px;
	border-radius: 30px;
}



.paket-slider .swiper-slide {
	background: rgb(255, 255, 255);
	padding: 40px;
	border-radius: 30px;
	margin-right: 30px;
	text-align: center;
}

.paket-slider .swiper-slide .slide-inner {
	height: 100%;
	display: flex;
	flex-direction: column;	
}

.paket-slider .swiper-slide ._text {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.paket-slider ._title {
	margin-bottom: 20px;
}

.paket-slider .swiper-slide ul {
	margin: 15px 0 30px !important;
}

.paket-slider .swiper-slide li {
	border-bottom: 1px solid #d5d5d5;
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 10px;
	text-align: left;
	padding: 8px 10px 8px 0;
}

.paket-slider .swiper-slide li::before {
	content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nIzkzODc1YycgZD0nTTIwLjYxNCA1LjY0OWExIDEgMCAwIDEgLjA4NCAxLjQyMkwxMC4xODQgMTguNzRhMSAxIDAgMCAxLTEuNDI4LjA1OGwtNi4wODQtNS43MjdhMS4wMDggMS4wMDggMCAwIDEgLS4wOS0xLjM2IDEuMDA4IDEuMDA4IDAgMCAxIDEuNDU1LS4xMjZsNC43MiA0LjI0NmExIDEgMCAwIDAgMS40MTItLjA3NGw5LjA0My0xMC4wMjdhMSAxIDAgMCAxIDEuNDAyLS4wODJ6Jy8+PC9zdmc+");
	width: 20px;
	height: 20px;
	background: var(--color-2);
	display: flex;
	padding: 3px;
	border-radius: 100%;
	margin-top: 4px;
}

.paket-slider .preis {
	display: flex;
	justify-content: center;
	flex-direction: column;
	font-size: 26px;
	margin-top: auto;
	line-height: 1.1em;	
}

.paket-slider .preis span {
	font-size: var(--font-size);
}

.small-font {
	font-size: 14px;
	line-height: 1.3em;	
}

.progress-bar-container {
	max-width: 720px;
	margin: 0 auto 30px;
}

.mw-720 {
	max-width: 720px;
  	margin: auto;
}

.leadformular .headline * {
	text-align: center;
}

.leadformular .headline {
	margin-bottom: 30px !important;
}

.paket .cf-auswahlfeld-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;
}

.paket .cf-auswahlfeld-input {
	margin: 0 !important;
}

.paket .cf-auswahlfeld-input > label {
	background: var(--color-2);
	padding: 20px 20px 35px;
	border-radius: 20px;
	cursor: pointer;
	transition: all .3s ease;
	height: 100%;
}

.paket .cf-auswahlfeld-input > label:hover {
	opacity: .7;
}

.paket .cf-auswahlfeld-inputs .label-titel {
	flex-direction: column;
	gap: 15px;	
}

.overview {
	background: var(--color-2);
	padding: 30px;
	border-radius: 20px;	
}

.overview ul {
	display: flex;
	flex-direction: column;
}

.overview ul li {
	margin-bottom: 10px;
	padding-bottom: 10px;
	display: grid;
	grid-template-columns: 1fr 4fr;
	border-bottom: 1px solid #0003;
	gap: 15px;
}

.overview ul li .overview-key {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.overview ul li h3 {
	font-family: 'main-font';
	font-size: var(--font-size);
	margin: 0;
}

.cf-element.cf-select select {
	background: var(--color-2);
	border-radius: 10px;
}

.hide-label .cf-select-name, .hide-label > .cf-auswahlfeld-name {
	display: none !important;
}

.datenschutz .cf-auswahlfeld-name {
	display: none !important;
}

.contactform .datenschutz label.checkbox > .label-titel .label-name {
	font-size: 14px;
	line-height: 1.6em;
}

.accordion {
	display: flex;
	flex-direction: column;
	gap: calc(var(--el-spacing) / 2);
}

.accordion .accordion-element {
	overflow: hidden;
	transition: all .3s ease;
	border-bottom: unset;
	background: var(--bg-color);
	border-radius: 20px;
}

.accordion .accordion-element .accordion-title {
	text-transform: none;
	font-weight: 600;
}

.accordion-title::after {
	border-color: var(--text-color);
}

/*--------------------------------------------------------------
# SONSTIGES
--------------------------------------------------------------*/

#CookieBoxTextHeadline {
  	font-size: 28px !important;
}

#BorlabsCookieBox ._brlbs-h3 {
	font-family: 'sub-font' !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	color: var(--main-color) !important;
	line-height: 1.3em !important;
}

#BorlabsCookieBox ._brlbs-btn {
	font-weight: 400;
	font-size: 15px !important;
	text-transform: uppercase;
	padding: 15px !important;
	line-height: 1em;
	border-radius: 0 !important;
}

#BorlabsCookieBox ._brlbs-bar-advanced ul, #BorlabsCookieBox ._brlbs-box-advanced ul {
	justify-content: flex-start !important;
	margin-top: 20px !important;
}


._brlbs-cb-googlemaps {
	margin-top: calc(-600px - var(--el-spacing));
}

._brlbs-google-maps {
	width: 100%;
	height: 600px;
}

._brlbs-google-maps ._brlbs-thumbnail {
	height: 100%;
	object-fit: cover;
	opacity: .4;
}

._brlbs-google-maps ._brlbs-caption {
	background: #94987c !important;
	color: #fff;
	max-width: 600px;
	margin: auto !important;
	right: 0;
	padding: 30px 40px !important;
}

._brlbs-google-maps ._brlbs-caption a:not(._brlbs-btn) {
	color: #fff !important;
	text-decoration: underline;
  }

._brlbs-google-maps ._brlbs-btn {
	background: #fff !important;
	border-radius: 0 !important;
	font-size: 15px !important;
	text-transform: uppercase !important;
	padding: 12px 30px !important;
	color: var(--sub-color) !important;
}

.datenschutz-text h3 {
	font-size: 24px;
	margin: 40px 0 20px;
}

#content .add-padding {
	padding: 100px 0 !important;
}

.datenschutz h2 {
	font-size: 28px;
	margin-top: 60px;
}

.datenschutz h3 {
	font-size: 22px;
	margin-top: 35px;
	margin-bottom: 10px;
}

.datenschutz h4 {
	font-family: var(--font-family), sans-serif;
	font-size: var(--font-size);
	font-weight: 600;
	color: var(--font-color);
	line-height: 1.3em;
	margin: 25px 0 5px;
}


/*--------------------------------------------------------------
# ERROR
--------------------------------------------------------------*/

#content > #error {
	min-height: calc(100vh - var(--header-height));
	padding: 60px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;	
}

.error-content {
	max-width: 600px;
}

.error-404 {
	font-size: 50px;
	line-height: 1.2em;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

.error-text {
	font-size: 30px;
	line-height: 1.2em;
	font-weight: 600;
	margin: 15px 0 20px;
}




/*--------------------------------------------------------------
# RESPONSIVE
--------------------------------------------------------------*/


@media all and (max-width: 980px) {

	.i-h-f {
		height: unset !important;
	}

	.row.full .col.mw {
		margin: 0px auto;
		width: var(--width);
		max-width: var(--maxwidth);
		flex: unset;
	}

	#content .box {
		margin: 0 !important;
		margin-top: calc(var(--spacing) / 2) !important;
		padding: calc(var(--spacing) / 2) !important;
		flex: auto !important;
		order: 2;
	}

	#content .box a {
		color: var(--bg-color) !important;
	}

	.contact {
		display: block !important;
	}

	.contact-link {
		justify-content: center;
		margin-bottom: 15px;
		font-size: 20px !important;
	}

	.contact-link--trenner {
		display: none;
	}

	.order-1 {
		order:1;
	}

	.order-2 {
		order:2;
	}

	.usps {
		grid-template-columns: 1fr 1fr;
	}

	.services {
		grid-template-columns: 1fr;
	}

	.icons.branchen {
		grid-template-columns: 1fr 1fr;
	}

	.footer-row {
		grid-template-columns: 1fr 1fr !important;
	}

	.footer-row .col .headline {
		margin-bottom: 10px !important;
	}

	.m-b-0 {
		margin-bottom: 0 !important;
	} 

	.dienstleister-items {
		grid-template-columns: 1fr 1fr;
	}

	#footer .social-channels {
		justify-content: center;
	}

	.inline-btn {
		margin-bottom: 5px !important;
	}

	.m-b--2 {
		margin-bottom: calc(-2 * var(--spacing)) !important;
	}

	.gallery-sizer, .gallery-item {
		width: calc(50% - 15px) !important;
	}

	.gallery-mosaic img {
		border-radius: 10px;
	}

	.providers-popup-nav-item {
		font-size: 16px;
		padding: 4px 8px;
	}

	.checklist-items {
  		columns: 1;
	}

	.checklist-group h2 {
		text-align: left;
		padding-right: 40px !important;
	}

	.timeline-wrapper {
		margin-bottom: 30px !important;
		padding: 0 10px;
	}

	.timeline-segment-label {
  		display: none !important;
	}
	
}

@media (max-width: 767px) {

	.hero {
		min-height: 450px;
	}

	.hero video {
		height: 70vh;
		min-height: 360px;
	}

	.slider-highlight .dienstleister-item {
		min-height: 380px;
	}

	.dienstleister-items {
		grid-template-columns: 1fr;
	}

	.icons .icon ._image img {
		max-width: 40px;
	}

	.usp.icons .icon {
		grid-template-columns: 40px 1fr;
		gap: 30px 20px;
	}

	.footer-row {
		grid-template-columns: 1fr !important;
		text-align: center;
	}

	.footer-row .col {
		align-items: center;
	}

	#footer ul.menu li a {
		text-align: center;
		justify-content: center;
	}

	.footer-categories {
		column-count: unset;
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		justify-content: center;
	}

	#footer .footer-categories li {
		margin-bottom: 0;
	}

	#footer .footer-categories li a {
		position: relative;
		display: flex;
		align-items: center;
		gap: 15px !important;
		background: var(--color-3);
		border-radius: 100px;
		padding: 5px 15px;
	}

	#footer .footer-categories li a:before {
		display: none !important;
	}

	.copyright {
		gap: 15px;
	}

	.copyright .col {
		justify-content: center !important;
	}

	.favorite-details h4 {
		text-transform: unset !important;
		font-size: 16px !important;
	}

	.favorite-link {
		flex-wrap: wrap;
	}

	#favorite-link {
		width: 100%;
		flex: unset;
	}

	.slider-dienstleister-kategorien {
		padding: 30px 40px;
	}

	.magazin-slider {
		padding: 0px;
	}

	.sli-dk-prev, .magazin-prev {
		left: -20px;
		background: var(--main-color);
		width: 40px;
		height: 40px;
	}

	.sli-dk-next, .magazin-next {
		right: -20px;
		background: var(--main-color);
		width: 40px;
		height: 40px;
	}

	.sli-dk-prev:before, .sli-dk-next:before, .magazin-prev:before, .magazin-next:before {
		height: 12px;
		width: 12px;
		border-right: 1px solid #fff;
		border-top: 1px solid #fff;
	}

	.dienstleister-logo {
		margin-bottom: 10px !important;
	}

	.dienstleister-logo img {
		max-height: 50px;
		max-width: 140px;
		width: auto;
	}

	.dienstleister-single .hero {
		padding: 120px 0;
	}

	.popup-inner {
		padding: 50px 30px;
	}

	#lightbox-popup .popup-inner img {
		max-height: calc(100vh - 100px);
		max-width: calc(100vw - 180px);
	}

	.m-p-t-0 {
		padding-top: 0 !important;
	}

	.col {
		gap: 0 10px;
	}

	.overview ul {
		margin-top: 20px;
	}

	.overview ul li {
		grid-template-columns: 1fr;
		gap: 5px;
	}

	.overview ul li .overview-key {
		line-height: 1em;
		font-size: 14px;
	}

	.paket .cf-auswahlfeld-inputs {
		grid-template-columns: 1fr;
	}

	.cf-element.col-6 {
		width: 100%;
	}

	.dienstleister-filter {
		gap: 6px;
	}

	.dienstleister-filter a {
		font-size: 15px;
	}

	.empfehlung-switch {
		margin-top: 8px;
  		width: 100%;
	}

	.popup {
  		padding: 20px;
	}

	.checklist-items .checklist-column {
		flex-wrap: wrap;
		position: relative;
		gap: 0;
	}

	.checklist-column label {
		padding-right: 40px;
		line-height: 1.2em;
	}

	.select-providers {
		margin-left: unset;
		padding-left: 40px;
		padding-top: 5px !important;
	}

	.select-providers > button {
		position: absolute;
		z-index: 3;
		right: 10px;
		top: 20px;
	}

	.provider-item label:has(input.provider-checkbox:checked)::after {
  		top: -3px;
	}
	
	.provider-item label .provider-info .provider-title {
  		margin-bottom: 3px;
  		line-height: 1.2em;
	}

	.checkliste-action {
		align-items: flex-start;
		flex-direction: column;
	}
}


@media (max-width: 460px) {

	.hero {
		min-height: 350px;
	}

	.header-logo .custom-logo {
		max-width: 250px;
  		object-fit: contain;
	}

	.timeline-label {
  		font-size: 8.5px;
	}

	.checklist-group {
  		padding: 20px;
	}

}