.fjord-one-regular, body, body * {
 font-family: "Fjord One", serif;
 font-weight: 400;
 font-style: normal;
 font-size: 1.25rem;
 line-height: 1.5;
}

a,
a:visited {
	color: #fff;
	text-decoration: underline;
	outline: 0;
}


.text-center
{
text-align: center;
}

.text-uppercase
{
text-transform: uppercase;
}

.text-end
{
text-align: right;
}

.d-block
{
display: block;
}

.justify
{
 text-align:justify;
}

.responsive
{
width: 100%;
height: auto;
}


.font-bold-xl,h1,h2,h3
{
text-transform: uppercase;
}



input.form-control, textarea.form-control
{
border-radius: 0px!important;
border-color: #fff!important;
padding: 15px 14px!important;
background-color: #fff!important;
height: auto;
}

.form-button
{
background-color: #003551!important;
margin-top: 30px;
border-color: #003551!important; 
border-radius: 0px!important;
}

.form-button:hover
{
background-color: #003551!important;
border-color: #003551!important; 
opacity: 0.8;
}



::placeholder {
 color: #336e44;
 opacity: 1;
}




#footer ul
{
list-style: none;
}

#footer, #footer a, #footer a:visited
{
color: #336e44;
}



/* Colors */

.bg-white{ background-color: #fff;}
.bg-black{ background-color: #000;}
.bg-blue{ background-color: #003551;}
.bg-green{ background-color: #336e44;}
.cl-white, a.cl-white, .cl-white a { color: #fff !important ;}
.cl-black, a.cl-black, .cl-black a { color: #000 !important ;}
.cl-blue, a.cl-blue, .cl-blue a { color: #003551 !important ;}
.cl-green, a.cl-green, .cl-green a { color: #336e44 !important ;}

/*

a {
 opacity: 1;
 transition: opacity 500ms;
}

a:hover {
 opacity: 0.7;
}

*/

img
{
max-width: 100%;
height: auto;
}



/* Sprachmenu */


.lang a,li.lang-mobile a{
line-height: 0; 
font-size: 0!important;
color: transparent; 
display: block;
height: 22px;
width: 37px;
background-repeat: no-repeat;
background-size: 37px 22px;
}

.lang li,li.lang-mobile
{
display: block;
height: 22px!important;
width: 37px;

}

.lang a.en,li.lang-mobile a.en
{
background-image:url(../images/english.webp);
}

.lang a.web,li.lang-mobile a.web
{
background-image:url(../images/german.webp);
}

.lang a.en.active,li.lang-mobile a.en.active
{
 pointer-events: none;
cursor: default;
filter: grayscale(100%) brightness(101%) ;
}

.lang a.web.active,li.lang-mobile a.web.active
{
 pointer-events: none;
cursor: default;
background-image:url(../images/german-active.webp);
}

.lang, .lang *,li.lang-mobile,li.lang-mobile *
{
height: 0;
margin: 0;
padding: 0;
}

#menu li.lang-mobile
{
margin-left: 20px;
}



/* ################# Mobile Navigation */



	#menu a
	{
	text-decoration: none;
	}
	

@media only screen and (max-width: 959px){

#content
{
margin-top: 120px;
}

.lang.desktop
{
display: none;
}


nav
{
box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.2);
background-size: cover;
        position: fixed;
        height: 64px;
        background-image: url(../images/navi-bg.webp);
        /* background-position: center; */
        background-repeat: no-repeat;
        top: 0;
        right: 0;
        left: 0;
        z-index: 30;
   

}


#head {
width: 100%;
		height: 64px;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 40;	
}

#menu-toggle
{
 padding-top: 20px;
 width: 30px;
 height: 22px;
 display: block;
 position: absolute;
 top: 0px;
 right: 20px;
 z-index: 30;
 -webkit-user-select: none;
 user-select: none;
}

#menu-toggle input
{
margin: 0px;
        padding: 0px;
        
        display: block;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 14px;
        left: -6px;
        cursor: pointer;
        opacity: 0;
        z-index: 70;
}

#menu-toggle span
{
 display: block;
 width: 31px;
 height: 4px;
 margin-bottom: 5px;
 position: relative;
 background: #336e44;
 z-index: 40;
 transform-origin: 1px 5px;
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 opacity 0.55s ease;
}

#menu-toggle span:first-child
{
 transform-origin: 0% 0%;
}

#menu-toggle span:nth-last-child(2)
{
 transform-origin: 0% 100%;
}

#menu-toggle input:checked ~ span
{
 opacity: 1;
 transform: rotate(45deg) translate(0px, 1px);
 /* background: #22a6b3; */
}


#menu-toggle input:checked ~ span:nth-last-child(3)
{
 opacity: 0;
 transform: rotate(0deg) scale(0.2, 0.2);
}

#menu-toggle input:checked ~ span:nth-last-child(2)
{
 opacity: 1;
 transform: rotate(-45deg) translate(-1px, 5px);
}

#menu
{
 top: 0px;
 z-index: 30;
 text-align: left;
 height: 100vh;
 position: absolute;
 margin: 0px 0 0 0;
 /* padding: 0px; */
 padding-top: 35px;
 right: -20px;
 width: 50vw;
 min-width: 350px;
 list-style-type: none;
 -webkit-font-smoothing: antialiased;
 /* to stop flickering of text in safari */
 transform-origin: 0% 0%;
 transform: translate(100%, 0);
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 /*overflow-x:scroll;*/
 background-color: #fff;
 color: #000;
 }
 
#menu a
{
color: #000;
} 

li.mobile-spc
{
	display: block;
	height: 100px; 
}

#brand 
{
	height: 64px;
	left: 0px;
	top: 0px;
	position: absolute;	
	z-index: 30;
}

#brand img
{
	height: 64px;
}


#menu a
{
display: block;
text-decoration: none;
padding: 5px 20px;
line-height: 1!important;
}

#menu ul a
{
margin-left: 40px;
}


#menu-toggle input:checked ~ ul
{
 transform: scale(1.0, 1.0);
 opacity: 1;
}




}

/* ################# Desktop Navigation */


@media only screen and (min-width: 960px){

nav
{
 position: fixed;
 height: 221px;
 background-image: url(../images/navi-bg.webp);
 background-position: center;
 background-repeat: no-repeat;
 top: 0;
 right: 0;
 left: 0;
 z-index: 30;
} 

#content
{
margin-top: 300px;
}

div.column-nav
{
        display: flex !important;
        flex-direction: row;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
}

	

#head
{
height: 221px;
}

#menu-toggle input,#menu-toggle span
{
display: none;
}

#brand img
{
height: 170px;
width: auto;
}

#brand a
{
display: block;
line-height: 0;
}

#menu-toggle
{
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
height: 221px;
align-items: center;
}

#menu-toggle ul,#menu-toggle li
{
margin:0;
padding: 0;
}

#menu
{
width: 50%;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
}

#menu a
{
display: block;
min-width: 120px;
        padding: 3px 7px 3px 13px;
        background-color: #336e44;
        color: #fff !important;
margin-left: 30px;        
}

#menu li.here a
{
background-color: #003551;
}

.fade-in #head, nav.fade-in,.fade-in #menu-toggle
{
height: 110px!important;
}

.fade-in #brand img
{
height: 110px;
}

nav.fade-in
{
box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.2);
}


.lang.desktop
{
display: block;
}


.lang.desktop
{
position: absolute;
display: flex;
list-style: none;
height: auto;
align-items: center;
gap: 5px;
z-index: 105;
height: 110px;
}

#menu li.lang-mobile
{
display: none;
}


.fade-in .lang
{
height: 110px;
}



.lang.desktop
{
right: 30px;
top: -7px;
height: 110px;
}

.fade-in .lang.desktop
{
display: none;
}

}



@media only screen and (min-width: 1735px)
{

.lang.desktop
{
right: 30px;
top: -7px;
height: 221px;
}



.fade-in .lang.desktop
{
display: flex;
right: 30px;
top: -7px;
height: 110px;
}

}








#meta, #meta li
{
list-style: none;
margin: 0;
padding: 0;
}

#meta
{
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-end;
gap: 20px;
height: 60px;
}

#meta a
{
padding-left: 10px;
position: relative;
}

#meta a::before
{
content: '|';
position: absolute;
left: 0px;

}




#content .wrapper
{
position: relative;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
min-height: 1244px;
}

#editor
{
position: relative;
top: -30px;
color: #fff;
}

#editor h1
{
margin-bottom: 20px;
}

#editor div.column ul:last-child, #editor div.column p:last-child 
{
margin-bottom: 0px!important;
}


#editor ul
{
list-style: none;
}

#editor li
{
position: relative;
padding-left: 20px;
}

#editor li:before
{
content: '|';
position: absolute;
left: 0;
}

.tpl1 #editor,.tpl4 #editor,.tpl6 #editor,.tpl7 #editor
{
background-color: #003551;
padding: 15px;
width: auto;
left: 15px;
right: 15px;
position: absolute;
}


@media only screen and (min-width: 720px)
{
.tpl1 #editor,.tpl4 #editor,.tpl6 #editor,.tpl7 #editor
{
padding: 30px;
width: 60%;
left: 30px;
position: absolute;
right: auto;
}
}




.tpl6 #editor
{
background-color: transparent;
padding: 0px;
}

.tpl6 #editor .form-wrapper;
{
background-color: #003551;
padding: 30px;
display: block;
}

/* Template Referenz Übersicht */


.tpl5 #editor
{
width: 70%;
background-color: transparent;
padding: 0px;
}

.tpl5 #editor div.column
{
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.tpl5 #editor a
{
display: block;
width: calc(33.333333333333336% - 10px);
background-color: #003551;
aspect-ratio: 1 / 1;
padding: 20px;
color: #fff!important;
text-decoration: none;
}

/* Template Referenz */



.tpl3 .info div
{
background-color: #003551;
padding: 20px; 
}


.tpl3 .reference div
{
background-color: #336e44;
padding: 20px; 
}

.fslightbox-svg,.fslightbox-toolbar
{
display: none!important;
}

.fslightbox-slide-btn-container button
{
width: 40px;

}

.fslightbox-slide-btn-container-next button:after, .fslightbox-slide-btn-container-previous button:after
{
content: " ";
position: absolute;
top: 45px;
right: 15px;
--s: 5px;
height: 30px;
aspect-ratio: 3 / 5;
clip-path: polygon(0 0, var(--s) 0, 100% 50%, var(--s) 100%, 0 100%, calc(100% - var(--s)) 50%);
background: #fff;
}

 .fslightbox-slide-btn-container-previous button:after
{ 
 transform: scaleX(-1) !important;
 right: auto;
 left: 15px;
}

button:hover {
background-color: #000;
border-color: transparent;
color: #fff;
outline: 0;
}

.fslightboxb {
border: 0;
background: #11c5ce!important;
cursor: pointer;
}