/* Mobile First Ansatz: */

#top{ 
    background-color: #8FA5B3;
        border-top: 3px solid #f47c00;
}

#header .inside{
    padding-top:1.5em;
    text-align: center;
    margin:0;
    width:100%;
    max-width:960px;
}
#logo {
    line-height: 0;
    margin-top: 1em;
    padding-bottom: 1em;
    border-bottom: 2px solid #f47c00;
}
/* Navigationen (#nav--mobile style wird über das mmmodul selbst gemacht */
.nav-toggle{
    width:4em;
    margin-right:2em;
    border: 2px solid #f47c00;
    border-radius: 10px 10px 10px 10px;
    float: right;
}
#nav--main{display: none;}
.nav--submenu{display: none;}
#wrapper{
    width: 100%;
    max-width: 960px;
    margin: 0 auto; /* Zentrierung */
}
#container{
    width:100%;
    margin-top: 4em;
    /*background-color: #f7f3ee;*/
    background-color: rgba(247, 243, 283, 0.75);
}
#main .inside{
    width:100%;
    max-width:900px;
    padding: 2em 2em;
    margin: 0 auto; 
}
/** Herobild Image und Überschrift stylen, Achtung, zusätzlich ist eine Anpassung in Contao zu machen. Sie eigene Contao Academy Doku **/
.herobild-image {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}      
.herobild-image h1 {
    position: absolute;
    width: 90%;
    max-width: 800px;;
    bottom: 10%;
    left: 3%;
    font-size: 1em;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 0;
    text-align: left;

}
.herobild-image h1 span.spacer{
    margin-top: 0.5em;
}
.herobild-image h1 span {
    background: rgba(244, 124, 0, 0.85);
    margin-top: 0;
    float:left;
    padding: 0.275em;
}

/* Bilder in Artikeln - extra style */
.mod_article .float_right{   
    margin-left: 1em;
    margin-bottom: 0.5em;
}
h2{
    font-size: 1.25em;
}

/* Boxen */
.boxen-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}
.box {
    width: 100%;
    min-width: 200px;
    border: 1px dotted #d9d9d9;
    padding: 2%;
    margin-top:1em;
}  
.box h2 {
    font-size: 1em;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

/* Formular -Adjutements */
form span.mandatory {
    display: none;
}
.submit{
    border-color: #f47c00;
}
/** FONTAWESOME - free fonts for icons and symbols **/
.box h2::before {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 0.75em;
    background: #d9d9d9;
    color: #fff;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    border-radius: 50%;
    display: inline-block;
}
.box-left h2::before {
    content: "\f4c4"; /* helping-hands */
}
.box-middle h2::before {
    content: "\f64f"; /* city */
}
.box-right h2::before {
    content: "\f4fe"; /* cogs */
}
.ui-accordion-header-collapsed h4::before {
    font-family: "Font Awesome 5 Free";
    content: '\f0da'; /* caret-right */
    padding-right: 1em;
}
.ui-accordion-header-active h4::before {
    font-family: "Font Awesome 5 Free";
    content: '\f0d7'; /* caret-down */
    padding-right: 1em;
}
.ui-accordion-header-active h4 {
    margin-bottom: 1em;
}
/** Call to action CTA **/

.cta-wrapper{
    width: 100%;
    max-width: 800px;
    background-color: #d9d9d9;
    padding:0 10%;
    margin: 1em auto 0;
}
.cta-wrapper h2{
    font-size: 1em;
    color:#292c37;
}

/** Buttons **/
.button{margin-bottom: 2em;}
.button a {
    display: inline-block;
    padding: 0.5em 2.75em;
      background: #f47c00;
      margin: 0.5em 0;
      text-align: center;
      color: #292c37;
      font-weight: 700;
      text-decoration: none;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    border: 0;
    transition: all 0.3s ease 0s;
  } 
  .button a:hover,
  .button a:focus {
    background-color: #f47c00;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .button-center,
  .text-center {
    text-align: center;
  }
/* Login adjustments */
    .login-status{
        color: #f47c00;
        font-size: 0.75em;
        float: right;
    }
    .login-lock img{
        position: absolute;
        left: -35%;
        bottom: 3em;  
    }
    .lock{display:none;}
/* Bilder */
.article-img img{
    border: 2px solid #d9d9d9;
}
.pic-profil img{
    width:75%;
}
.no-border img{
    border:none !important;
}
/* Footer Adjustents */
#footer .inside{
    width:80%;
    padding: 0.5em 0;
    margin: 0 auto; 
}
/** FOOTER **/
#footer{
    margin-top: 1em;
    border-top: 2px solid #f47c00;
    margin-bottom: 1em;
    border-bottom: 2px solid #f47c00;
    background-color: rgba(247, 243, 283, 0.75);
}

#footer .box{
    padding-left:3%;
}
#footer .box h5{
    font-weight: bold;
    text-decoration: underline;
    margin:0;
}
/** Weiterleitungen **/
.wtlg a{
    font-size: 0.75em;
}



/* #################################################################################################################################################### 
Tablets
*  1 Brakepoint min-width 768px (48em), um mit Contao eigenem css in Einklang zu bleiben.
*
*/
@media (min-width:48em){

.herobild-image h1 {
    font-size: 2em;
}

#container{padding-left:0;}

/* Bilder */
.article-img{text-align:center;}
.article-img img{
    width:60%;
    
}
.pic-profil img{
    width:30%;
}
/* Footer Adjustments */
#footer .inside{
    width:88%;
}
/* Login adjustments */
.lock{display:inline-block;}
}


/* #################################################################################################################################################### 
Desktop's 
*
*/
@media (min-width:64em){ 

#top{ 
    background-color:#8FA5B3;
    border-top: 3px solid #f47c00;
}
 .jf-background{
    background-image:url("../img/20210523_fehmarn-bg-min.jpg");
    background-repeat: no-repeat;      
}

/* Mobile Toggler ausblenden */
.nav-toggle{display:none;}

/* linke Spalte einschalten aktivieren */
.zwei-spaltig #container{padding-left:300px;}

/** Hauptnavigation **/
#nav--main{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    
    border-bottom: 2px solid #f47c00;
    padding-top:1em;
    padding-bottom:1em;
    
}
#nav--main ul {
    margin: 0;
    padding: 0;
}
#nav--main li {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
} 
#nav--main a,
#nav--main strong {
    display: block;
    text-decoration: none;
    font-size: 1.125em;
    color: #292c37;
    font-weight: 700;
    margin: 0 1em;
    line-height: 1.5;
}  
#nav--main a.last,
#nav--main .active.last {
    margin-right: 0;
}  
#nav--main a:hover,
#nav--main a:focus {
    color: rgb(244, 124, 0);
} 
#nav--main strong.active,
#nav--main .trail {
    color: #f47c00;
} 

/** SUBMENU Navigation **/
.nav--submenu{display: block;}
.nav--submenu{
    margin-right:2em;
    padding: 2em 1em;
}
.nav--submenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav--submenu ul li {
    border-bottom: 1px solid #d9d9d9;
    margin: 0;
    padding: 0;
}
.nav--submenu ul li a,
.nav--submenu ul li strong {
    text-decoration: none;
    line-height: 2.5;
    display: block;
    font-weight: 400;
}
.nav--submenu ul li a:hover,
.nav--submenu ul li a:focus {
    color: #f47c00;
    text-decoration: underline;
}
.nav--submenu ul li strong.active,
.nav--submenu ul li .trail {
    color: #f47c00;
}

/* Boxen */
.boxen-wrapper {
    justify-content: space-between;
    margin-top: 2em;
}
.box {
    width: 30%;
    padding: 2%;
}  
.box h2 {
    font-size: 1em;
    font-weight: 700;
    margin: 0;
    padding: 0;
}
.cta-wrapper{
    width: 60%;
    padding:0 5%;
}
/* Footer Adjustments */
#footer .inside{
    width:85%;
}