@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: #ae0000;
    --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%;
}

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

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 {margin-bottom:0.5em;margin-top:0;font-size:3.5em;line-height: 1.25em; font-family: 'FiraSans-Regular';}
h2 {margin-bottom:0.5em;margin-top:0;font-size:6em; line-height: 1.25em; font-family: 'FiraSans-Thin';}
h3 {margin-bottom:0.5em;margin-top:0;font-size:3em; line-height: 1.25em; font-family: 'FiraSans-Regular'; color: var(--secondary-color);}
h4 {margin-bottom:0.25em;margin-top:0;font-size:2em; line-height: 1.25em; font-family: 'FiraSans-Regular';}

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}

p{margin-bottom: 0.5em; margin-top: 0.25em; font-family: 'FiraSans-Light'; font-size: 1.5em;}
#content li{font-family: 'FiraSans-Light'; margin-left:1rem; font-size: 1.5rem;}
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: 1em;}

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

.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;}

/* .flex_column_four{display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 100%; align-items: stretch;}
.flex_column_four img{max-width: 100%;}
.flex_column_four > div{flex: 0 0 32%; margin-bottom: 2rem;} */

.animEle{position: relative;}

.flex_column_four {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem; /* moderner als margin */
  }
  
  .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);}
.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;}


/*navi*/
#navi{z-index:1;width: 100%; background-color: white; min-height: 100px; font-family: 'FiraSans-Thin'; position: relative; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));}
.navi_active_search{min-height: 200px!important;}
#navi a{color: black; text-decoration: none;}
#navi ul li{color: black; 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: 1.2em; 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% ; left: 4rem; transform: translateY(-50%); color: white; font-size: 1.7em; font-family: 'FiraSans-Regular'; text-align: center;}
#navi_logo_img{display: block; width: 5rem;}

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

#mobile_navi_inner{background-color: white; position: absolute; right: 0; top: 100px; min-height: 500px; width: 375px; padding: 1rem; font-size: 1.7em; 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: 0.7em; 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{ background-color: var(--secondary-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: 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: 2em;}
.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: 0.9em;}
.sub_tag:hover{color: white;}

.donwload_btn{ width: 20rem; background-color: var(--secondary-color); display: block; overflow: hidden; padding: 0.75rem; border-radius: 5px; cursor:pointer; position:relative;}
.donwload_btn div{position: absolute; right: 2rem; vertical-align: middle; display: inline-block; background: url('design/images/link_icon.svg'); filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg); width: 2rem; transform:translateY(-10%) rotate(-90deg); aspect-ratio: 1;}
.donwload_btn span{display: inline-block; color: white; vertical-align: middle; font-size: 1.25em; text-align: center; line-height: 1.2em; max-width: 75%;}
.donwload_btn:hover{background-color: #d00202; 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 (max-width: 1488px) {  
    .flex_column_four > div {
        flex: 0 0 49%;
        display: flex;
        flex-direction: column;
      }
   
}


@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;
      }

      .faq_q p{max-width: 80%;}

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

    h2{font-size: 4em;}
}