@font-face {
    font-family: 'FiraSans-Light';
    src: url('/design/fonts/FiraSans-Light.ttf') format('truetype'),
         url('/design/fonts/FiraSans-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FiraSans-Regular';
    src: url('/design/fonts/FiraSans-Regular.ttf') format('truetype'),
         url('/design/fonts/FiraSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FiraSans-Thin';
    src: url('/design/fonts/FiraSans-Thin.ttf') format('truetype'),
         url('/design/fonts/FiraSans-Thin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Setup --------------------------------------------- */

:root{
    --primary-color: #033047;
    --secondary-color: #0073AE;
    --secondary-color-alpha: rgba(0,115,175,0.5);
    --background-gradient: linear-gradient(to right, #033047, #0073AE, #033047);
    --radial-gradient: radial-gradient(rgba(0,115,175, 1) 30%, #033047 100%);
    --content-padding: 15%;
    --content-padding-small: 25%;
    --font-base: 1.125rem;
    --font-ratio: 1.25;
}

a, a:visited  { color: var(--primary-color); cursor: pointer; text-decoration: none;}
a:hover { color:var(--secondary-color); }

a.navi{width:80%; display:inline-block;}

body {min-height: 100vh; display:flex; flex-direction: column; background-color: white; font-family: 'FiraSans-Light', Arial, sans-serif; font-style: normal;  color: black; height: 100%;}
h1 {font-size:calc(var(--font-base) * 3 * var(--font-ratio)); margin-bottom:0.5em;margin-top:0;line-height: 1.25em; font-family: 'FiraSans-Regular';}
h2 {font-size:calc(var(--font-base) * 4 * var(--font-ratio)); margin-bottom:0.5em;margin-top:0;line-height: 1.25em; font-family: 'FiraSans-Thin';}
h3 { font-size:calc(var(--font-base) * 2 * var(--font-ratio));margin-bottom:0.5em;margin-top:0;line-height: 1.25em; font-family: 'FiraSans-Regular'; color: var(--secondary-color);}
h4 {font-size:var(--font-base);margin-bottom:0.25em;margin-top:0;line-height: 1.25em; font-family: 'FiraSans-Regular';}
p{ font-size:var(--font-base); margin-bottom: 0.5em; margin-top: 0.25em; font-family: 'FiraSans-Light'; line-height: 1.7rem;}

pre {font-family:monospace,serif;font-size:1em;white-space:pre;white-space:pre-wrap;word-wrap:break-word;margin:0;padding:0}
code {font:inherit;font-family:monospace,serif;font-size:1em;margin:0;padding:0}


#content li{font-family: 'FiraSans-Light'; margin-left:1rem; font-size: var(--font-base);}
em{font-style: italic;}
strong{font-family: 'FiraSans-Regular';}
hr{background-color: #515151; height: 2px; width: 100%; border: 0px solid; margin: 0.5em 0;}
.small_text{font-size: calc(var(--font-base) * 0.75);}

#head_image img{ width: 100%; display: block;}
#content .text {text-align: center; padding-left: var(--content-padding); padding-right: var(--content-padding); position: relative;}

.mobileTargerRot{transform: rotate(90deg)!important;}

.text_align_left{text-align: left!important;}

.flex_container{display: flex; flex-direction: row; justify-content: center; align-items: stretch;}
.flex_container > div{margin-right: 2rem; position: relative; flex:1;}
.flex_container > div:last-child{margin-right: 0;}

/* contact form */
  .reserve-form {
    display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; max-width: 720px;
  }
  @media (min-width: 700px) {
    .reserve-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .form-row { display: grid; gap: .35rem; }
  label { font-weight: 600; font-size: .95rem; }
  input, select, textarea {
    padding: .6rem .75rem; border-radius: .5rem; border: 1px solid #e1e5ea; background: #fff;
    font: inherit; color: inherit;
  }
  input:focus, select:focus, textarea:focus { outline: 2px solid rgba(8,123,8,.25); border-color: var(--accent); }
  .reserve-form .btn {background-color: #eaeaea; padding: 0.75rem; color: black; border:none; border-radius:10px; cursor: pointer;}
  .reserve-form .btn:hover {background-color: rgb(42, 153, 42); color: white;}
  .btn_full{grid-column: 1 / -1;}
  .btn_green{background-color: rgb(42, 153, 42)!important; color: white!important; }
  .form-hint { color: var(--muted); margin-top: .25rem; }
  


.flex_column_four {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem; 
  }
  
  .flex_column_four > div {
    flex: 0 0 32.3%;
    display: flex;
    flex-direction: column;
  }
  
  .flex_column_four img {
    max-width: 100%;
    height: auto;
  }

.content_container{padding-left: var(--content-padding); padding-right:var(--content-padding); position: relative;}
.content_container_small{padding-left: var(--content-padding-small); padding-right:var(--content-padding-small); position: relative;}
.content_video{aspect-ratio: 16/9; width: 70%;}

.background_col_main{background-color:var(--primary-color)}
.background_col_sec{background-color:var(--secondary-color)}
.text_col_white{color: white;}
.text_box{padding: 1rem; border-radius: 5px;}

.search_highlight{color: var(--secondary-color) !important; font-weight: bold;}

#head_image{margin-top: 100px;}
/*navi*/
#navi{width: 100%; background-color: var(--primary-color); min-height: 100px; font-family: 'FiraSans-Thin'; position: fixed; z-index: 100;}
.navi_active_search{min-height: 200px!important;}
#navi a{color: white; text-decoration: none;}
#navi ul li{color: white; list-style: none;}
#navi ul li ul{display:none;}
#navi ul li ul li{padding-left: 1em !important;}
#navi ul {margin-left: 0;}

#navi_search{position: absolute; bottom: 10%; left: calc(4rem - 3px); width: 15rem; background-color:white; border-radius: 10px; border: 3px solid var(--primary-color); overflow: hidden;}
#navi_search:has(input:focus){border: 3px solid blue;}
#navi_search form{display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
#navi_search form input{width: 100%; height: 35px; border: none; padding: 0 1rem; font-size:var(--font-base); font-family: 'FiraSans-Light'; margin-bottom: 0;}
#navi_search form input:focus{border: none; outline: none;}
#navi_search form button{width: 4rem; height: 35px; background-color: var(--secondary-color); border: none; cursor: pointer; }
#navi_search form button img{width: 60%; aspect-ratio: 1;}
#navi_search_icon{width: 1.75rem; aspect-ratio: 1; cursor: pointer;}

#navi_logo{position: absolute; top: 50% ;right: 4rem; transform: translateY(-50%); color: white; font-family: 'FiraSans-Regular'; text-align: center;}
#navi_logo_img{display: block; width: 12rem;}

#mobile_navi_inner{display: none;}
#hamburger_line_wrapper{ width: 3rem; aspect-ratio: 1; margin-left: 4rem; top: 50%; position: absolute; transform: translateY(-50%);}
.hamburger_line{ width: 100%; height: 0.4rem; background-color: white; display: block; margin-bottom: 0.4rem;}
.hamburger_line:first-child{margin-top: 0.5rem;}
.hamburger_text{cursor:pointer;position: absolute; top:50%; left: 8rem; font-family: 'FiraSans-Light'; color: white; font-size: 2em; transform: translateY(-50%);}

#mobile_navi_inner{background-color: var(--secondary-color-alpha); position: absolute; left: 0; top: 100px; min-height: 500px; width: 375px; padding: 1rem; font-size: var(--font-base); font-family: 'FiraSans-Light'; z-index:2;}
.mobile_navi_inner_search_active{top: 200px !important;}
#mobile_navi_inner > ul li{border-bottom: 2px solid white; padding: 0.5em 0; position: relative;}
#mobile_navi_inner > ul li:first-child{padding-top: 0;}
#mobile_navi_inner ul li ul li{border: none; font-size:calc(var(--font-base) * 0.75); padding:0.1em;}
#mobile_navi_inner a:hover{color: black;}

.navilevel1 ul, .navilevel1 .mobileTarget{display:none;}

.mobileTarget{position: absolute; width: 20px; top: 2rem; right: 1rem; transform: translateY(-50%);}
.mobileTarget img{transform: rotate(180deg); filter: brightness(0) invert(1);}

/*footer*/
#footer{width: 60%; background-color: var(--primary-color);  display: flex; flex-direction: row; justify-content: center; align-items: stretch; padding: 5em 20%;}
#footer a{color: white;}
#footer a:hover{color: var(--secondary-color);}
.footerContainer{border: 0.25em solid white; color: white; margin-right: 5em; padding: 2em; position: relative; flex: 1;}
.footerContainer:last-child{margin-right: 0;}
.borderInterrupter{background-color: var(--primary-color); position: absolute; width: 8em; height: 2em; top: calc((2em + 0.25em) / 2 * -1); left:2.5em;}

/*elements*/
.bbtt_text{background-color: var(--primary-color); width: 75%; max-width: 75%; min-height: 100px; color: white!important; padding: 2em; font-size: font-size:calc(var(--font-base) * 0.75);; transform: translate3d(8%,-50%,0);}
.bbtt_text h2 {font-size:5em;}

.te_container{width: 100%; aspect-ratio: 25/9; background-color: var(--primary-color); position: relative;}
.te_ele_container{position: relative;}
.te_container p, .te_ele_container p{width: 50%; color: white; text-align: center; position: absolute; top:50%; left: 50%; transform: translate3d(-50%,-50%,0); font-size:calc(var(--font-base) * 2 * var(--font-ratio));}
.te_ele_container img, .te_ele_container video{width: 100%;}

/*FAQ*/
.faq_container{text-align: left; background-color: white; padding: 1.5em 1em; border-bottom: 1px solid #bbbaba;}
.faq_q{position: relative;}
.faq_container:last-child{border: none;}
.faq_container div p{margin-bottom: 0;}
.faq_container div a{ aspect-ratio: 1/1;  width:32px; background: url('../../elements/FAQ/images/faq_icon.png'); position:absolute; top: 50%; right: 5%; transform: translateY(-50%);}
.faq_container div a:hover{background-position-y: -32px;}
.faq_container div a.faq_current_target{background-position-y: -64px;}
.faq_container div a.faq_current_target:hover{background-position-y: -32px;}
.faq_container:has(.faq_current_target) { background-color:rgb(211, 232, 249);}
.faq_btn{background-color:rgb(32, 221, 15); padding: 0.25em 0.5em; border-radius: 10px; color: white;}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea { width: 98%; padding: 1%; margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 4px;  transition: border-color 0.3s ease; }
.sdja_container_shadow{filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5))}
.display_none{display: none;}
.display_block{display:block;}
.display_inline{display:inline;}
.display_inline_block{display:inline-block;}
/*FAQ END*/

.sub_container{position: relative; border-radius: 5px; overflow: hidden;}
.sub_container > div{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; mix-blend-mode: overlay; background: var(--secondary-color); opacity: 50%;}
.sub_t_container{position: relative; background-color: rgb(189, 200, 210); min-height: 150px; margin-top: -0.5rem; padding: 0.5em 1em; min-height:208px;}
.border_radius_bottom{border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;}
.border_radius{border-radius: 5px;}
.sub_container > img{display: block; width: 100%;  }
.sub_hoverEffect{opacity: 25% !important;}
.sub_tag{color: white; background-color: var(--secondary-color); padding: 0.125em 0.5em; display: inline-block; margin: 0.25em 0.25em 0 0; border-radius: 5px; font-size: var(--font-base);}
.sub_tag:hover{color: white;}

.donwload_btn{ width: 15em; background-color: var(--secondary-color); display: block; overflow: hidden; padding: 0.75em 0.5em; border-radius: 5px; cursor:pointer;}
.donwload_btn div{vertical-align: middle; display: inline-block; background: url('design/images/download_icon.svg'); filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg); width: 20%; aspect-ratio: 1;}
.donwload_btn span{display: inline-block; color: white; vertical-align: middle; font-size:calc(var(--font-base) * 1 * var(--font-ratio)); text-align: center; line-height: 1.2em; margin-left: 0.5em;}
.donwload_btn:hover{background-color: #028bd0; transition: background-color 0.3s ease;}

.admin_download_list{max-height: 250px; overflow-y: scroll; width: 100%; background-color: rgb(222, 231, 237);}
.admin_download_item{display: block; padding: 1em; transition: background-color 0.2s ease;} 
.admin_download_item:hover{color: white; background-color: var(--secondary-color);}
.admin_clicked{color: white; background-color: greenyellow !important;}

.anim_fade{opacity: 0;}

/*margins*/
.margin_b{margin-bottom: 5em;}
.margin_t{margin-top: 5em;}

/*Image width*/
.ganz{width: 100%;}
.halb{width:50%;}

/*footer*/
#footer{margin-top: auto;}

@media (min-width: 1921px) {
    :root{
        --font-base: 1.3rem;
    }
}

@media (max-width: 1488px) {  
    .flex_column_four > div {
        flex: 0 0 49%;
        display: flex;
        flex-direction: column;
      }
	#mobile_navi_inner{background-color: var(--secondary-color)};
   
}


@media (max-width: 1230px) {  
    .flex_container { flex-direction: column; }
    .flex_container > div{max-width: 100%;}
    .flex_container > div:first-child{margin-right: 0;}

    :root{
        --content-padding: 5%;
    }
}

@media (max-width: 903px) {  
    .flex_column_four > div {
        flex: 0 0 100%;
        display: flex;
        flex-direction: column;
      }

    :root{
        --content-padding: 5%;
    }
    
    /* Footer responsive styles */
    #footer {
        width: 90%;
        padding: 3em 5%;
        flex-direction: column;
    }
    
    .footerContainer {
        margin-right: 0;
        margin-bottom: 3em;
        padding: 1.5em;
    }
    
    .footerContainer:last-child {
        margin-bottom: 0;
    }
    
    .borderInterrupter {
        width: 6em;
    }
}

/* Tablet-sized devices */
@media (min-width: 904px) and (max-width: 1229px) {  
    #footer {
        width: 80%;
        padding: 4em 10%;
    }
    
    .footerContainer {
        margin-right: 2em;
        padding: 1.5em;
    }
    
    .borderInterrupter {
        width: 7em;
    }
}

@media (max-width: 500px){ 
	.mobileTarget{right: 2rem;}
    #navi_logo{right: 1rem;}
    #hamburger_line_wrapper{margin-left: 1rem;}
    .hamburger_text{left: 5rem;}
    .content_container_small{padding-left: var(--content-padding); padding-right:var(--content-padding);}
	
	
	h1,h2,h3,p{
		hyphens: auto;
  		-webkit-hyphens: auto;
  		-ms-hyphens: auto;
	}
	
}