:root {
--background-color: #ffffff;
--text-color: #000000;
--text-color-rgb: 0,0,0;
--text-color-dark: #000000;
--text-blau: rgb(70,158,224);
--border-color: #ffffff;
--border-color2: #000000;
--topnav-color: #888888;
--nav-color: #FFFFFF;
--text-colorlight: #ffffff;
--text-link-dark: #000000;
--soft-background: rgba(255,255,255,0.75);
--la-blau: rgb(0,158,224);
--background-box-head: #ffffff;
--background-grau: rgba(190, 190, 190, 0.3);
--background-grau-teaser: rgba(218,218,218,0.4);
--slick-border: rgba(218,218,218,1);
--slick-arrow-color: #000;
--background-alpha: 0.05;
--button-background: rgba(218,218,218,0.4);
--select-background: #ffffff;
--background-logo: #ffffff;
--background-td-neri: rgba(150, 159, 115, 0.2);
}

@media(prefers-color-scheme: dark) {
:root {
--background-color: #323232;
--text-color: #dddddd;
--text-color-dark: #000000;
--text-color-rgb: 221,221,221;
--text-blau: rgb(75,202,255);
--nav-color: #000000;
--border-color: #323232;
--border-color2: #000000;
--topnav-color: #dddddd;
--text-colorlight: #dddddd;
--text-link-dark: #dddddd;
--soft-background: rgba(0,0,0,0.5);
--la-blau: rgb(4,123,173);
--background-box-head: rgba(190, 190, 190, 0.3);
--background-grau: rgba(190, 190, 190, 0.3);
--background-grau-teaser: rgba(190, 190, 190, 0.3);
--slick-border: #323232;
--slick-arrow-color: #dddddd;
--background-alpha: 0.25;
--button-background: rgba(169,169,169,1);
--select-background: rgba(169,169,169,1);
--background-logo: rgba(255, 255, 255, 0.6);
--background-td-neri: rgba(40,41,40,1);
}
}


body, html{
height: 100%;
font-size: 16px;
font-family: 'Source Sans Pro',Verdana,sans-serif;
background-color: var(--background-color);
color: var(--text-color);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}

a, a:visited, a:active{
color: var(--text-color);
}

.skip-content{
display: none;
}

#header{
background-color: var(--la-blau);
}

#header .header_wrapper{
height: 152px;
}

#header .logo, #header .logo img{
display: block;
}


#main{
margin: 0px auto;
padding-bottom: 50px;
width: 100%;
max-width: 1280px;
float: none;
}

#main .inside{
margin-top: 50px;
padding: 0px 25px;
}


#header .logobox {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-end;
align-content: flex-end;
margin-left: 0px;
width: 100%;
max-width: 355px;
height: 100%;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 405.12 129.5'%3E%3Cpath style='stroke: white; fill: white;' id='svg-wolke' d='M403.62,129.5c-.93-53.36-46.46-96.35-102.54-96.35-21.2,0-40.9,6.15-57.25,16.67-14.12-10.44-31.82-16.67-51.05-16.67-9.73,0-19.06,1.61-27.75,4.53C148.69,15.79,121.91,1.5,91.62,1.5,41.85,1.5,1.5,40.05,1.5,87.6c0,15.21,4.15,29.5,11.39,41.9h390.72Z'/%3E%3Cpath style='stroke: white; fill: white;' id='svg-outline' d='M402.07,129.5h3.05v-.03c-.46-26.24-11.49-50.83-31.06-69.25-19.58-18.43-45.5-28.57-72.98-28.57-20.45,0-40.2,5.65-57.19,16.36-14.83-10.71-32.48-16.36-51.11-16.36-9.28,0-18.43,1.44-27.2,4.27C148.34,13.41,120.78,0,91.62,0,41.1,0,0,39.3,0,87.6c0,14.63,3.87,29.1,11.17,41.9h3.32l-.89-1.8c-6.93-12.27-10.6-26.11-10.6-40.1C3,40.95,42.76,3,91.62,3c28.58,0,55.58,13.3,72.21,35.58l.65.87,1.03-.35c8.77-2.95,17.95-4.45,27.27-4.45,18.33,0,35.67,5.66,50.16,16.38l.83.62.87-.56c16.7-10.75,36.22-16.43,56.44-16.43,26.71,0,51.9,9.86,70.92,27.76,18.6,17.5,29.24,40.74,30.08,65.59v1.5Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: -25px bottom;
background-size: 106% auto;
margin-bottom: -3px;
}


#header .logobox img{
width: 75%;
margin: auto auto 0px auto;
display: block;
text-align: center;
}



h4.ce_headline{
font-size: 1rem;
margin: 0px 0px;
font-weight: 700;
color: var(--la-blau);
line-height: 1.3em;
}


h5.ce_headline{
font-size: 1rem;
margin: 0px 0px;
font-weight: 500;
line-height: 1.3em;
}



h1 > span, h2 > span, h3 > span {
display: inline-block;
margin: 0px;
padding: 0px;
position: relative;
isolation: isolate;
}

h1.ce_headline{
font-size: 3.5rem;
font-weight: 900;
max-width:80%;
line-height: 1.2em;
margin: 20px 0px 50px 0px;
position: relative;
isolation: isolate;
}

h1:has(span), h2:has(span), h3:has(span) {
font-weight: 900;
padding-bottom: 8px;
}


h1 > span::after, h2 > span::after, h3 > span::after {
content: "";
width: 100%;
height: 1px;
position: absolute;
border-bottom: 10px solid var(--la-blau);
left: 0px;
bottom: -1px;
z-index: -1;
}


.ce_text p{
font-size: 1.15rem;
line-height: 1.35em;
}


.ce_hyperlink.button-lakh > a{
color: var(--text-color);
background-color: rgba(162,195,14);
padding: 12px 8px;
text-align: center;
display: block;
text-decoration: none;
}


.ce_hyperlink.button-lagla > a{
color: var(--text-color);
background-color: rgba(249,165,39);
padding: 12px 8px;
text-align: center;
display: block;
text-decoration: none;
}


.infobox-content{
display: block;
padding: 0px 0px;
margin: 0px 0px;
position: relative;
width: 100%;
aspect-ratio: 3/2;
isolation: isolate;
max-height: 280px;
border-radius: 12px;
}

.infobox-content .teaserbox_content{
width: calc(100% - 30px);
height: calc(100% - 30px);
position: absolute;
left: 0;
bottom: 0;
z-index: 9;
color: #ffffff;
padding: 15px;
margin-top: auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.infobox-content .teaserbox_content p:last-of-type{
margin-bottom: 0;
padding-bottom: 0;
}


.infobox-content .image_container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.infobox-content .image_container::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
background: #000000;
background: linear-gradient(90deg,rgba(0, 0, 0, 0.9) 0%, rgba(77, 74, 74, 0.75) 50%, rgba(255, 255, 255, 0) 91%);
}


.infobox-content:hover .image_container::after{
xbackground: linear-gradient(90deg,rgba(0, 0, 0, 0.5) 0%, rgba(77, 74, 74, 0.5) 50%, rgba(255, 255, 255, 0) 91%);	
}



.infobox-content .image_container img{
transition: transform .4s;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}


.infobox-content:hover .image_container img{
transform: scale(1.07);
}


.infobox-content h3{
color: #ffffff;
font-size: 1.75rem;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
font-weight: 500;
width: 60%;
line-height: 100%;
}

.infobox-content h2{
color: #ffffff;
font-size: 2.1rem;
text-transform: uppercase;
margin: 0px 0px 10px 0px;
font-weight: 700;
width: 60%;
line-height: 1.3em;
}

.ce_text  p.icontext{
display: flex; 
flex-direction: row;
justify-content: flex-start;
}


.ce_text  p.icontext img{
margin: 8px 0px 0px 15px;
height: auto;
}

.infobox-content p{
font-size: 1rem;
font-weight: 400;
}



.infobox-content a{
display: block;
font-size: 1.1rem;
width: fit-content;
padding: 8px 80px 8px 15px;
border-radius: 12px;
color: #000000;
text-decoration: none;
text-transform: uppercase;
background-color: #ffffff;
position: static;
white-space: nowrap;
}


.infobox-content a::before {
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
content: "";
}

.infobox-content p:has(a){
width: fit-content;
margin-top: 8px;   
}


.infobox-content p:has(a) span{
position: relative;
display: block;
width: 0px;
height: 0px;
float: right;
margin-right: -80px;
margin-top: 10px;
}

.infobox-content p:has(a) span::after{
content: '';
width: 35px;
height: 35px;
display: block;
position: absolute;
top: 0;
right: 5px;
bottom: 0;
margin: auto 0px auto auto;
background-color: transparent;
background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg id='Ebene_1' xmlns='http://www.w3.org/2000/svg' version='1.1' style='stroke: %232b2b2a; fill: none;' viewBox='0 0 30 30'%3E%3Cline class='st0' x1='5.2' y1='15.2' x2='23.5' y2='15.2'/%3E%3Cpolyline class='st0' points='19.5 11.5 23.5 15.2 19.5 18.9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: 106% auto;
}

.infobox-content.infobox-kh a:hover, .infobox-content.infobox-gla a:hover{
background-color: #ffffff;  
}

.infobox-content.infobox-kh a{
background-color: rgba(162,195,14,1);
}

.infobox-content.infobox-gla a{
background-color: rgba(249,165,39,1);
}



.add_heart::after{
	content: '';
	width: 100%;
	display: block;
	position: relative;
	padding: 50px 0px 25px 0px;
	margin: 10px auto -20px auto;
	background-color: transparent;
background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg  xmlns='http://www.w3.org/2000/svg' style='fill: %232b2b2a;' viewBox='0 0 25.21 26.4'%3E%3Cpath d='M20.21.23c-2.79-.67-5.74.56-7.62,3.14C10.66.74,7.69-.5,4.93.18,2.54.78,0,3.03,0,7.56c0,8.15,11.43,17.93,11.92,18.35l.5.42c.05.05.12.07.19.07s.13-.02.19-.07l.5-.42c.49-.41,11.92-10.21,11.92-18.35,0-4.52-2.58-6.75-5-7.33ZM23.02,7.56c0,6.06-8.28,13.99-10.42,15.94-2.14-1.95-10.42-9.89-10.42-15.94,0-2.71,1.21-4.63,3.24-5.13.32-.08.65-.12.99-.12,1.65,0,3.89.98,5.21,3.75l.73,1.53c.05.11.15.17.27.17.11-.04.22-.07.27-.18l.7-1.54c1.42-3.12,4.17-4.04,6.14-3.57,2.06.49,3.3,2.4,3.3,5.09Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
background-size: auto 90%;
}


@media only screen and (max-width: 680px) {

#header .header_wrapper {
height: 125px;
}

#header .logobox{
width: 80%;
margin: 0px auto;
background-size: 100% auto;
background-position: center bottom;
}


h4.ce_headline, h5.ce_headline{
	text-align: center;
}


h1.ce_headline{
width: 100%;
max-width: 100%;
font-size: 2.8rem;
text-align: center;
}


.infobox-content {
aspect-ratio: 4/3;
max-height: 300px;
}

.infobox-content p:has(a){
width: 100%;

}

.infobox-content a{
width: calc(100% - 95px);
}


}

