@font-face{
  font-family:"Frank Ruhl Libre";
  font-style:normal;
  font-weight:700;
  src:url("../fonts/frank-ruhl-libre-v6-latin-ext_latin-700.woff2")format("woff2"),
      url("../fonts/frank-ruhl-libre-v6-latin-ext_latin-700.woff")format("woff")} 
/*****************************  Reset  ******************************/
*,::before,::after{box-sizing:border-box}
html{
   font-size:16px;
   -webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,pre,ul,ol,fieldset,button,input,select,textarea{
   margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-weight:normal}
ul{list-style:none}
ol{padding-left:20px}
ol li{list-style-type:decimal}
pre{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
table{border-collapse:collapse;border-spacing:0;}
th{text-align:left;font-weight:normal}
img{display:block;vertical-align:middle;border-style:none;max-width:100%;height:auto}
svg:not(:root){overflow:hidden}
svg{max-width:100%;max-height:100%}
:focus{outline:none;}
::-moz-focus-inner{border-style:none;padding:0}
button,input,textarea,select{
   font-family:inherit;
   background-color:transparent;
   outline:none;
   border:none}
button,[type="submit"],[type="reset"]{-webkit-appearance:button}
fieldset{border:0}
legend{padding:0}
a{text-decoration:none;background-color:transparent;color:inherit}
b,strong{font-weight:bolder}
/********************************************************************/
:root {
  --text-main:#37474F;
  --text-light:#9ba3a7;
  --white:#fff;
  --grau:#f1f1f1;
  --hover:#dcdcdc;
  --visited:#fafafa;
  --turkis:#30bcd7;
  --turkis-hover:#27B2CE;
  --gold:#edd170;
  --blau:#003d73;}

/*****************************  Page Container  **********************/ 
html:not(.is-mobile)::-webkit-scrollbar{width:6px}
html:not(.is-mobile){scrollbar-width:thin;scrollbar-color:#0e3840 #30bcd7;}
html:not(.is-mobile)::-webkit-scrollbar-track{background-color:#30bcd7;}
html:not(.is-mobile)::-webkit-scrollbar-thumb{background-color:#0e3840;border-radius:4px;}

html,body,.page-wrap{
   width:100%;
   height:100%}    
body{
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:1rem;
   line-height:1.5;
   font-weight:400;
   color:var(--text-main);
   background-color:var(--turkis);
   overflow-x:hidden;
   overflow-y:scroll}       
.bg-header{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:300px;
   background:url("../images/Freibahn.jpg") no-repeat 0 60%}
   @media(max-width:1599px){
      .bg-header{
         background-size:auto 100%} }
   @media(min-width:1600px){
      .bg-header{
         background-size:100% auto} }   

.page-wrap{
   max-width:1024px;
   min-width:700px;
   padding:0 30px;
   margin-left:auto;
   margin-right:auto}     
.page{
   padding-top:30px;
   display:flex;
   flex-direction:column;
   min-height:100vh;
   height:100vh}  
.content{
   position:relative;
   flex:1 0 auto;
   background-color:#fff;
   box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 5px 0 rgba(0,0,0,.12)}  
.header{
   position:relative;
   width:100%;
   height:270px;
   background:linear-gradient(rgba(255,255,255,.5), #fff);
   box-shadow:0 -1px 1px #828c92,0 2px 2px 0 rgba(0,0,0,.14),0 3px 5px 0 rgba(0,0,0,.12),0 -10px 0 -5px #7acfe1,0 -10px 1px -4px #828c92,0 -20px 0 -10px #7acfe1,0 -20px 1px -9px #828c92}     
.headline{
   height:222px;
   padding:56px 30px;
   text-align:center}
   
h1,h2,h3,h4,h5,h6{color:#263238}      
h1, h2{
   font-size:2.5rem;
   line-height:1}   
h1{
   font-family:"Frank Ruhl Libre", serif;
   font-weight:700;
   margin-bottom:30px} 
h2{
   font-weight:300;
   font-style:italic}  
h3,h4,h5,h6{
   margin-bottom:1.5rem}     
h3{
   font-size:1.625rem;
   line-height:30px;}    
h4{
   font-size:1.5rem;
   line-height:24px;}    
h5{
   font-size:1.375rem;
   line-height:24px;}    
h6{
   font-size:1.25rem;
   line-height:24px;}
   
p{font-size:1rem}
   @media(min-width:1200px) {
      .text-fluid p{
         font-size:1.063rem; } }
       
p{margin-bottom:1.5rem}
p:last-of-type, p.no-margin{
   margin-bottom:0}

.p30-body{padding:30px}
.p30-col{padding-left:30px;padding-right:30px}
.p30-row{padding-top:30px;padding-bottom:30px}

.w-60{
   display:inline-block;
   width:60px;}
   
.btn, a, button,.toggle-header{
   cursor:pointer;
   -webkit-tap-highlight-color:transparent;
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none}
a.active{
   pointer-events:none}
.link{
   display:inline-block}
/*****************************  Helper  *****************************/
.email{display:inline-block;vertical-align:top;}
.relative{position:relative}
.overflow-hidden{overflow:hidden}
.hidden{visibility:hidden}
.block{display:block}
.inline-block{display:inline-block;vertical-align: top;}
.text-nowrap{white-space:nowrap;}
.word-break{word-break:break-word}

.center{margin-left:auto;margin-right:auto}
.left{float:left}
.right{float:right}
.text-center{text-align:center}
.text-right{text-align:right}
.text-left{text-align:left}   

.section::before,.section::after{content:"";display:table}
.section::after{clear:both}

.flexrow{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;}
.flexcol{
   flex:0 0 30%;
   max-width:30%;
   margin-bottom: 30px;} 
/*****************************  Header Tabs  ************************/   
.tabs-nav{
   display:flex;
   flex-wrap:nowrap;
   justify-content:center;
   width:100%;
   height:3rem;
   border-top:1px solid rgba(0,0,0,.12);
   border-bottom:1px solid rgba(0,0,0,.12)}      
.tabs-nav.onlyback{
   justify-content:flex-start}  
.tabs-nav li{
   position:relative;
   width:120px;
   text-align:center;
   margin:0 1px} 
.tabs-nav a{
   display:block;
   line-height:46px;
}
.tabs-nav.onlyback a{
   transition: color 300ms linear;
}     
.tabs-nav.onlyback li{
   width:auto;
   text-align:left;
   margin:0}  
.backlink svg{
   display:block;
   float: left;
   height:46px;
   width:16px;
   min-width:16px;
   margin-right:3px}    
.tabs-nav li.active{
   pointer-events:none}  
.tab {
   background-color:var(--turkis);
   color:var(--white);
   transition: background-color 280ms cubic-bezier(0.4,0,0.2,1);
}
.tab.active {
   background-color:var(--gold);
   color:#000;
}
@media(hover:hover){
	.tab:hover {
	   display:block;
	   line-height:46px;
	   background-color:var(--turkis-hover);
	   color:var(--white)
	}
	.tabs-nav.onlyback a:hover	{
	   color:var(--turkis)
	}
}

.tab-content{
   position:relative;
   overflow:hidden} 
.tab-pane{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   opacity:0;
   visibility:hidden;
   transition:opacity .35s, visibility .35s}
.tab-pane.current {
   position:relative;
   z-index:1;
   opacity:1;
   visibility:visible}
   
.card {
	position:relative;
	width: 100%;
/* 	max-width:790px; */
	height:600px;
   background-color:#fff}
    
iframe {  
	width:100%;
	height:100%;
   background-color:#fff;
   border: none;}  
   
.btn-pdf{
   display:inline-block;
   padding:10px;
   font-size:14px;
   line-height:1;
   margin-right:6px;
   border-radius:2px;
   color:var(--text-main);
   background-color:var(--grau);
   box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 2px -1px rgba(0,0,0,.12);
   transition:background-color .35s ease, color .35s ease, box-shadow .35s cubic-bezier(0.4,0,0.2,1);}
   
.mw-500 {
	max-width: 500px;
}

.btn-pdf:hover{
   background-color:var(--hover)}  
/*****************************  Collapse  ***************************/ 
.collapse{
   width:452px; 
   padding-right:12px;
   margin:20px 0 20px 40px;}
   
.toggle-header{
   background-color:var(--grau);
   border-radius:2px;
   padding:6px 1rem;
   margin-bottom:3px;
   display:flex;
   align-items:center;
   justify-content:space-between;
   transition:background-color 400ms cubic-bezier(0.4,0,0.2,1);
   box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 2px -1px rgba(0,0,0,.12);}  
   
.toggle-header:hover{
   background-color:var(--hover)}  
   
.ripple {
  position:relative;
  overflow:hidden;
  transform:translate3d(0, 0, 0);}
.ripple::after {
  content:"";
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  pointer-events:none;
  background-image:radial-gradient(circle, #000 10%, transparent 10.01%);
  background-repeat:no-repeat;
  background-position:50%;
  transform:scale(10, 10);
  opacity:0;
  transition:transform .5s, opacity 1s;}
.ripple:active::after {
  transform:scale(0, 0);
  opacity:.2;
  transition:0s;}
   
.toggle-header h6{  
   width:16px;
   text-align:center;
   margin-bottom:0;}  
   
.toggle-header .arrowdown{
   display:block;
   height:12px;
   width:12px;
   color:rgba(0,0,0,.4);
   transition:transform .35s}
.is-open  > .toggle-header .arrowdown {
   transform:rotate(-180deg)}   
    
  
.collapse-body{
   position:relative;
   max-height:0;
   overflow:hidden; 
   transition:max-height .6s linear;}     
.is-open .collapse-body{
   max-height:2500px;
   transition:max-height .6s linear}   
   

.list-pdfs{  
   margin-left:40px;
   padding-top:3px;padding-bottom:3px;}  
   
.list-pdfs .btn-pdf{
   display:block; 
   width:100%;
   margin-right:0;
   margin-bottom:3px}  
.list-pdfs .btn-pdf:visited{
   background-color:var(--visited)}     
.kb{
   float:right;
   font-size:12px;
   opacity:.8;}
/*****************************  Button + Links  *********************/ 
.copy, .footer .link{
   font-size:14px}  
.btn-footer{
   display:inline-block;
   font-size:14px;
   color:var(--text-light);
   margin-left:20px;
   transition:color .35s linear}
.btn-footer::before{
   content:"\2014";
   margin-right:6px; 
   white-space:nowrap}  
.btn-footer:hover,
.btn-footer.active,
.footer .link:hover{
   color:#2ba9c1}   
/*****************************  Footer  *****************************/    
.footer{ 
   position:relative;
   padding:0 30px; 
   color:var(--text-light);
   background-color:#fff;
   box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 5px 0 rgba(0,0,0,.12)}

.footer-info{
   display:flex;
   align-items:center;
   justify-content:space-between;
   border-top:1px solid rgba(0,0,0,.12);
   padding:60px 0}