:root {
    --color-green: #A4C408;
    --color-green-pure: #61C125;
    --color-orange: #F49E00;
    --color-dunkel: #38424E;
    --color-lila:  #9100B4;
}

/* ==========================================================================
   Allgemein
   ========================================================================== */
body {background: var(--color-dunkel)}

h1, h2, h3 {color: var(--color-green)}
.title {margin-top: 20px}

h4,h5,h6,p,ul li, a {color:#fff}

.grid-container {max-width: 80rem}

header.grid-container {margin-top: 2rem;margin-bottom: 2rem;}

main {background:#424D5A;min-height:70vh;padding-bottom: 50px;}

footer {font-size:80%;padding: 20px}
footer p {width:80%;margin:0 auto;color:#adb6bf}

.title__img {margin-bottom: 30px;max-width:85%}

.cta--links .callout {padding: 10px 0 10px 20px;margin-bottom: 2px;}
.cta--links .callout>div {min-height: 142px;}
.cta--links.light .callout {background: rgba(255,255,255,0.25)}
.cta--links.light .callout>div {min-height: 80px;}

.cta--links .callout .fa {font-size: 1.4rem;color: var(--color-dunkel);transition:all 0.3s ease;position: relative;left: 0;}
.cta--links .callout.bg--purple .fa {color:#fff}
.cta--links .callout h3 {color: var(--color-dunkel)}
.cta--links.light .callout h3 {font-size:1.5rem;color: #fff;}
.cta--links.light .callout .fa {color:#fff}
.cta--links .callout.bg--purple h3 {color:#fff}
.cta--links .callout img.float-left {max-width:100px}

.cta--links .callout:hover .fa {left:10px}

ul.no-bullet {list-style:none}

.bg--elterntrain {background: #424D5A url('../img/elterntrain-bg.png') no-repeat 45vw center;    background-size: 45vh;}

.pdf-thumbnail {max-width: 120px;float: left;margin-right: 20px;}
.pdf-thumbnail .caption {font-size: 0.9rem;margin-top: 8px;text-decoration: underline;}

.logo img {max-width: 350px}

.logo-extern {display: flex;align-items: center}
.logo-extern img {width:280px;padding: 12px; border-radius:10px;background:#fff;}
.logo-extern span {display: inline-block;color:#fff;font-style: italic;margin-left: 20px;width:50%;}

/* ==========================================================================
   Utilitity Classes
   ========================================================================== */
.relative {position: relative;}

.bg--orange {background: var(--color-orange)}  
.bg--green {background: var(--color-green-pure)} 
.bg--purple {background: var(--color-lila)}

/* ==========================================================================
   Navigation
   ========================================================================== */

#btn {
  cursor: pointer;
  transition: all 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  padding-left: 60px;
  position: relative;
  top: -12px;
}

#btn div {
    width: 45px;
    height: 6px;
    margin-bottom: 8px;
    background-color: #a4c408;
    transition: opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    border-radius: 20px;
}

#btn.active {
  padding-left: 120px;
}
#btn.active div {
  background-color: #f49e00;
}
#btn::before, #btn::after {border-radius:0;transition: all 0.7s ease;content:'';border-width: 1px;border-color:var(--color-green)}
#btn::before {left: 0}
#btn::after {right: 0;}
#btn.active::before, #btn.active::after {
    content: '';
    width: 90px;
    height: 70px;
    position: absolute;
    top: -15px;
    border-radius: 50px;
    margin-left: -22px;
    right: auto;
    left: 120px;
}
#btn.active::before {border-left:10px solid var(--color-green);}
#btn.active::after {border-right:10px solid var(--color-green);}

#btn.active #top {
    -webkit-transform: translateY(16px) rotate(-135deg);
    transform: translateY(16px) rotate(-135deg);
}
#btn.active #middle {
  opacity: 0;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
#btn.active #bottom {
    -webkit-transform: translateY(-12px) rotate(-45deg);
    transform: translateY(-12px) rotate(-45deg)
}

#middle::after {content:'Navigation';text-transform: uppercase;font-size: 1rem;position: absolute;    margin-left: 60px;
    margin-top: -8px;
    color: #a4c408;    
    background: #38424e;
    padding: 0 7px;}

#box {
    position: fixed;
    z-index: 4;
    overflow: auto;
    top: 0px;
    left: -300px;
    width: 300px;
    opacity: 0;
    padding: 20px 0px;
    height: 100%;
    background-color: var(--color-orange);
    color: #343838;
    transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    box-shadow: 0 0 10px;
}

#box.active {
  left: 0px;
  opacity: 1;
}

#items {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#items .item {
  position: relative;
  cursor: pointer;
    font-size: 1.5375rem;
    padding: 8px 30px;
  transition: all 250ms;
      white-space: nowrap;
}
#items .item a:hover {color:var(--color-dunkel)}
#items .item:hover {
  padding: 8px 20px 8px 45px;
  background-color: rgba(52, 56, 56, 0.2);
}
#items .item.no-hover:hover {background:none;padding: 8px 30px; }

#items .item .fa {font-size:1rem;position: relative;top: -2px;}
#btn, #btn * {
  will-change: transform;
}

#box {
  will-change: transform, opacity;
}

.nav-category {    display: block;
    padding-left: 30px;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
margin-bottom: 7px;}
#items .item.download { 
    font-size: 15px;
    color: #fff;
    line-height: 1.75;}
#items .item.download .fa {display: inline-block;margin-right: 5px;position: relative;top: 1px;}

aside {position: absolute;right: 0;top: -2rem;padding-right: 0.9375rem;}
aside a {color:#fff;text-decoration: none;font-size: 80%;text-align: right;display: inline-block;margin-left: 10px;}
aside a:hover {color: var(--color-green)}

/* ==========================================================================
   Floating Contact
   ========================================================================== */
.float-container {
    position: fixed;
    z-index: 1;
    top: 10%;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    width: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    transition: 0.3s ease all;
}

.float-container>span {
    z-index: 99;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 300px;
    height: 50px;
    margin-right: -245px;
    margin-bottom: 10px;
    padding: 10px 20px 10px 15px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    color: white;
    border-color: var(--color-green);
    background-color: var(--color-lila);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    font-family: sans-serif;
}

.float-container>span:hover {
    margin-right: 0;
    background-color: var(--color-lila);
    box-shadow: 0 2px 4px #7d7d7d;
}
.float-container span.one:hover {width: 250px}
.float-container span.two:hover {width: 380px}
.float-container span.three:hover {width: 350px}

.float-container>span a {color:#fff;text-decoration: underline;}
/* Icon settings - remove if not needed*/
.float-container .icon:before {
    font-family: "FontAwesome";
    margin-right: 25px;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
        font-size: 1.5rem;
    width: 25px;
    text-align: center;
}
.float-container span address {
	    position: relative;
    top: 79px;
    background: var(--color-lila);
    padding: 15px;
    left: 0;
    font-size:  90%;
    font-style: normal;
}

.icon.one:before {
    content: "\f095";
}

.icon.two:before {
    content: "\f0e0";
}

.icon.three:before {
    content: "\f05a";
}

/* Media queries */
@media screen and (max-width:480px)
{
	.float-container .icon:last-child {
		display: none;
	}
    .float-container
    {
        position: fixed;
        top: auto;
        bottom: 0;

        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
            -ms-flex-direction: row;
                flex-direction: row;

        width: 100%;

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: auto;
        -webkit-box-align: auto;
        -ms-flex-align: auto;
        align-items: auto;
    }
		.float-container a.icon
    {
        right: 0;
        bottom: 0;

        width: 100%;
        margin-right: 0;
        margin-bottom: 0;
        padding: 5px;

        border-radius: 0;
        -webkit-box-shadow: 0 0 0 #7d7d7d;
                box-shadow: 0 0 0 #7d7d7d;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
		border-left: 1px solid darkorange;
		border-right: 1px solid darkorange;
    }
    .logo-extern {flex-flow:wrap;}
}

/* ==========================================================================
   Scrolled Status
   ========================================================================== */
.scroll #btn {    
	position: fixed;
    right: 1px;
    top: 0px;
    padding: 10px 9px 3px;
    z-index: 1;
    background: #38424e;}
.scroll #btn.active #top {transform:translateY(14px) rotate(-135deg)}
.scroll .float-container {top: 62px;}  
.scroll #btn div {width: 36px;height: 5px;}
.scroll #middle::after {    
	margin-left: -110px;
    margin-top: -8px;
    color: #a4c408;}


/* ==========================================================================
       Responsive
   ========================================================================== */  
@media print, screen and (max-width: 1024px) {
	h3 {font-size: 1.5rem;}
} 

@media print, screen and (max-width: 480px) {
	.logo img {    margin-bottom: 0px;
    max-width: 160px;
    margin-top: 30px;}
	#btn {top: 17px;margin-right: 25px;float: right;}
	#middle::after {display: none;}
	.float-container {top: 19%;}
	.float-container>span {text-overflow: ellipsis;overflow: hidden;}
	#box {width: 200px}
	#items .item {font-size: 1rem;padding: 8px 10px 8px 20px; white-space: normal}
	#items .item .fa {font-size: 0.8rem;top: -1px;}
	.title__img {max-width:100%}
	.scroll .float-container {top:auto}
	.nav-category {padding-left: 20px;}
}     
@media print, screen and (max-width: 440px) {
	.float-container {top: auto;}
 }





/* MB Ins*/
.white-headline h2,.white-headline h3, .white-headline h1 {
	color: #ffffff !important;
}