﻿
/* Alles was sich im Master befindet */

:root 
{
    --innerMaxW: 1245px;
}


body 
{
    font-size:10px;
    margin:0rem;
    font-family:open-sans, Arial;
    color:#14234C;
    font-weight:400; 
}



html { font-size:10px; }

/*::-webkit-scrollbar { display: none; }*/

.master__accesskeys { position:absolute; top:-100vh; left:-100vw; }

.master                 { width:100%; margin:auto; text-align:center; padding-top:10rem; }
.master__header         { width:100%; min-height:10rem; position:fixed; z-index:50; padding:2.5rem 2.5rem 2.5rem 2.5rem; background-color:white; top:0rem; }
.master__main           { min-height:80vh; margin-top:8rem; padding:0rem 2.5rem 8rem 2.5rem; }

.header         { width:100%; text-align:center; position:relative; top:0rem; left:0rem; }
.header__logo   { position:absolute; top:0rem; left:0rem; width:5.6rem; }
.header__state  { width:100%; max-width:var(--innerMaxW); margin:auto; text-align:left; padding-top:3rem; display:block; }
.header__nav    { position:absolute; top:0rem; right:0.2rem; }

.state__item        { display:inline-block; padding:0rem 1.6rem 0rem 0rem;  }
.state__itemlink    { font-size:1.4rem; line-height:1.4rem; color: var(--colDark); }
.state__item + .state__item { border-left:solid 1px var(--colDark); padding-left:1.6rem; }

.nav       { }
.nav__item { display:inline-block; width:5.5rem; height:5.5rem; text-align:center; background-color:#FADF00; color:black; vertical-align:middle; padding-top:2rem; cursor:pointer;  }
.nav__icon { width:2rem; vertical-align:top; }
.nav__text { vertical-align:text-top; text-transform:uppercase; font-size:2rem; line-height:1.6rem; display:none; margin-left:1rem; opacity:0; position:absolute; }

.nav__item-menu                 { background-color:black; color:white; }
.nav__item--animstretch:hover   { padding-left:2rem; text-align:left; animation: navitem-stretch 0.4s ease-in 0s; animation-fill-mode: forwards; }
.nav__item--animstretch:hover .nav__text { display:inline-block; position:relative; animation: display 0.2s linear 0.3s; animation-fill-mode: forwards; }

.master__menu                   { display:none; z-index:100; position:fixed; left:0rem; top:0rem; width:100%; height:100%; border:solid 2.4rem white; border-right-width:0px; background-color:rgba(128, 128, 128, 0.7);  }
.body--showmenu .master__menu   { display:block; }

.master__footer { clear:both; display:block; width:100%; background-color:#262626; padding:4.5rem 3.5rem 4.5rem 4.0rem; text-align:center; }
.footer__inner  { width:100%; max-width:var(--innerMaxW); margin:auto; text-align:left; }
.footer__logo   { max-width:30rem; margin-bottom:2rem; }
.footer__texts  { }
.footer__text   { display:inline-block; max-width:30rem; vertical-align:top; }
.footer__text + .footer__text  { margin-left:10rem; } 
.footer__textimage { max-width:50%; }
.footer__bottom     { clear:both; width:100%; padding-top:8.5rem; }
.footer__links      { float:left; margin-top:0.2rem; }
.footer__linksitem  { color:var(--colLight); font-size:1.6rem; line-height:4.8rem; display:inline-block; vertical-align:middle; }
.footer__linksitem + .footer__linksitem { margin-left:3rem; }
.footer__social       { float:right;  vertical-align:top; color:var(--colLight); }
.footer__sociallink   { border:solid 1px var(--colLight);  text-align:center; display:inline-block; width:4.8rem; height:4.8rem; padding-top:1rem; vertical-align:middle; margin-left:0.6rem; }
.footer__socialicon   { height:2.5rem; max-width:3rem; }
.footer__socialtext   { font-size:1.6rem; line-height:2.2rem; vertical-align:middle; display:inline-block; width:25rem; text-align:right; padding-top:0.5rem; padding-right:1.5rem; color:var(--colorLight); }


/* inside nav */

.body--showinsidenav .master__header    { background-color:transparent; }
.body--showinsidenav .header__nav       { margin:0.2rem 0.2rem 0rem 0rem; }
.body--showinsidenav .master__main      { margin-top:0rem; padding-top:0rem; }
.body--showinsidenav.body--header-not-at-top .master__header { background-color:white; }

@media only screen and (max-width: 1440px) 
{
   :root  {  --innerMaxW: 1100px; }

/*   .header          { text-align:left; }
   .master__main    { display:inline-block; text-align:left; margin-left:8rem; }*/
}

@media only screen and (max-width: 1280px) 
{
   :root  {  --innerMaxW: 970px; }
}

@media only screen and (max-width: 1024px) 
{
   .header__state  { display:none; }

   .footer__linksitem + .footer__linksitem { margin-left:2rem; }
   .footer__socialtext { padding-right:0rem; }
}

@media only screen and (max-width: 768px) 
{
   .tablet--padded { padding:0rem 2.4rem; }

   .master__main { padding-bottom:2.4rem; }
   .footer__text { display:block; width:100%; margin-top:2rem; }
   .footer__text + .footer__text { margin-left:0rem; }

   .body--showinsidenav .master__main      { margin-top:8rem; padding-top:0rem; }

   .master__menu { border-width:0px; }
}

@media only screen and (max-width: 767px) 
{
    .tablet--padded { padding:0rem 1.6rem; }
    .mobile--padded { padding:0rem 1.6rem; }

    body            { padding:0rem; }
    .master__header { padding: 1.6rem; left:0rem; min-height:11rem; }
    .master__main   { padding: 1.6rem; }

    .master__footer { padding:4.5rem 3.2rem; }
    .footer__logo   { width:90%; }
    .footer__text   { display:block; width:100%; }
    .footer__bottom { padding-top:3.5rem; }
    .footer__links      {  float:none; display:block; }
    .footer__social     { float:none; display:block; margin-top:2rem; }
    .footer__socialtext { display:block; text-align:left; margin-bottom:1rem;  }
    .footer__sociallink:first-of-type { margin-left:0rem; }
}



/* MENÜ */

.menu               { height:100%; }
.menu__main         { float:left; height:100%; width:calc(100% - 42rem); background-color: var(--colLight); padding:6rem 6rem 6rem 6rem; overflow-y:auto;  position:relative; top:0rem; right:-100vw;  transition-property:right; transition-duration:0.6s; transition-delay:0.4s; transition-timing-function:ease-in; }
.menu__aside        { float:left; height:100%; width:42rem; background-color: var(--colLight); border-left:solid 0.2rem black; border-right:solid 2.4rem white; position:relative; top:0rem; right:-50rem; transition-property:right; transition-duration:0.5s; transition-timing-function:ease-out;  }
.menu__bottom       { position:absolute; bottom:0rem; left:0rem; width:100%; }
.menu__quicksoc     { padding:4rem 6rem; }
.menu__quicklinks   { }
.menu__quickitem    { padding:0.5rem 0rem; }
.menu__quicklink    { font-size:1.6rem; line-height:2.2rem; font-weight:600;  }
.menu__social       { padding-top:4.5rem; vertical-align:top; }
.menu__sociallink   { border:solid 1px black;  text-align:center; display:inline-block; width:4.8rem; height:4.8rem; padding-top:1rem; vertical-align:top; margin-right:0.6rem; }
.menu__socialicon   { height:2.5rem; }
.menu__socialtext   { font-size:1.4rem; line-height:1.9rem; vertical-align:top; display:inline-block; width:17rem; padding-top:0.5rem; padding-left:0.5rem; }

.menu.menu--slidein .menu__aside    { right:0rem; }
.menu.menu--slidein .menu__main     { right:0rem; }

.menu.menu--slideaside .menu__aside   { right:0rem; }
.menu.menu--slidemain .menu__main     { right:0rem; }

.menu__topitem      { padding:3rem 0rem 3rem 7rem; border-bottom:solid 1px black; }
.menu__topitem:first-child { border-top:solid 1px black; }
.menu__toplink      { font-size:3rem; line-height:4rem; font-weight:600; color:var(--colTitle); }
.menu__topitem--active { background-color: var(--colDark); background-image:url(/images/icons-gelb/pfeil-2-links.svg); background-position:left 2.4rem center; background-size:2rem; background-repeat:no-repeat; }
.menu__topitem--active .menu__toplink { color: var(--colLight); }

.menu__nodes        { }
.menu__toplinks     { }
.menu__close        { position:absolute; top:2rem; right:2rem; width:2rem; cursor:pointer; }
.menu__close-mob    { display:none; }
.menu__back         { display:none; }
.menu__nodepanel    { display:none; color: var(--colDark); }
.menu__nodepanel--active { display:block; }
.menu__paneltitle   { font-size:5.5rem; color: var(--colTitle); margin-bottom:3rem; }

.menu__node--level2 { margin-bottom:2rem; }
.menu__node--level2 .menu__nodelink { font-size:3rem; line-height:4rem; font-weight:700; }

.menu__node--level3                     { padding:1rem 0.2rem; border-bottom:solid 1px var(--colDark);  }
.menu__node--level3 .menu__nodelink     { font-size:1.6rem; }

.menu__node--level4                     { padding:0.5rem 2.4rem; }
.menu__node--level4 .menu__nodelink     { font-size:1.4rem; }
.menu__node--level4.menu__node--show   { display:block; }

.menu__node--level5                     { padding:0.5rem 3.4rem; display:none; }
.menu__node--level5 .menu__nodelink     { font-size:1.4rem; }
.menu__node--level5.menu__node--show    { display:block; }

.menu__node--level3 + .menu__node--level4 { padding-top:1.5rem; }
.menu__node--level4:last-of-type { padding-bottom:1.5rem; }

.menu__node--level3.menu__node--active { background-color:var(--colDark); color:var(--colLight); padding-left:1.5rem; }

.menu__nodetoggle { float:right; position: relative; top:0.9rem; right:0.9rem; width:1.5rem; cursor:pointer; }

.menu__masonry  { column-count: 5; column-gap: 5rem; }
.menu__panelsub { margin: 0; display: grid;  grid-template-rows: 1fr auto; break-inside: avoid; margin-bottom:4rem; }

.menu__exticon { height: 1.2rem; margin-left: 1rem; vertical-align: top; position: relative; top: 0.4rem; }
.menu__wipicon { max-width: 1.5rem; margin-left: 1rem; vertical-align:middle; position:relative; top:-0.1rem; }
.menu__okicon  { max-width: 1.5rem; margin-left: 1rem; vertical-align:middle; position:relative; top:-0.1rem; }



@media only screen and (max-width: 1920px) 
{
  .menu__masonry { column-count:4; }
  .menu__topitem { padding:2rem 0rem 2rem 7rem; }
}

@media only screen and (max-width: 1440px) 
{
    .menu__main    { width:calc(100% - 32rem); padding:6rem 6rem 6rem 6rem; }
    .menu__aside   { width:32rem; }
    .menu__topitem { padding:2rem 0rem 2rem 7rem; }
    .menu__masonry { column-count:4; }
}

@media only screen and (max-width: 1439px) 
{
  .menu__masonry { column-count:3; }
}

@media only screen and (max-width: 1280px) 
{
  .menu__masonry { column-count:3; }
}

@media only screen and (max-width: 1024px) 
{
    .menu__main    {  padding:4rem 4rem 4rem 4rem; }
    .menu__masonry { column-count:2; }
}

@media only screen and (max-height: 890px) 
{
    .menu__topitem { padding:1rem 0rem 1rem 7rem; }
    .menu__toplink { font-size:2.4rem; }
    .menu__bottom  { position:relative; padding-top:9rem; }
}


@media only screen and (max-width: 768px) 
{
    .master__menu       { padding:0rem; width:100%; position:fixed; top:0rem; left:auto; right:0rem; width:40rem; height:100vh; transition-property:width; transition-duration:0.5s; transition-timing-function:linear; }
    
    .menu               { height:100%; width:100%; left:auto;  right:0rem; }
    .menu__main         { float:left; height:100%; width:100%; padding:4.5rem 6rem 5rem 4.5rem;  right:0rem; }
    .menu__aside        { float:none; width:100%; border-left:solid 0rem black; position:relative; height: 100vh; overflow-y: auto; border-right-width:0px; }

    .menu__main         { display:none; }
    .menu__masonry      { column-count:1; }
    .menu__close        { background-color:black; width:5.5rem; height:5.5rem; text-align:center; padding-top:2rem; z-index:99; }
    .menu__close-mob    { display:inline-block; width:5.5rem; height:5.5rem; text-align:center; padding-top:2rem; position:absolute; top:0.6rem; right:6.5rem; cursor:pointer; }
    .menu__back         { background-color:black; width:5.5rem; height:5.5rem; text-align:center; padding-top:2rem; position:absolute; top:0.6rem; right:0.6rem; cursor:pointer; }
    .menu__backicon     { width:2rem; }
    .menu__closeicon    { display:none; }
    .menu__closeicon-mob    { display:inline; }

    .menu__paneltitle   { font-size:4.5rem;  }
    .menu__panelsub     { max-width:30rem; }
    .menu__nodes        {  }

    .master__menu.master__menu--toplinkactive   { width:50rem; }
    .master__menu--toplinkactive .menu__close   { display:inline-block; }
    .master__menu--toplinkactive .menu__back    { display:inline-block; }
    .master__menu--toplinkactive .menu__aside   { display:none; }
    .master__menu--toplinkactive .menu__main    { display:block; }
}

@media only screen and (max-width: 767px) 
{
    .master__menu   { width:100%; }
    .master__menu.master__menu--toplinkactive   { width:100%; }
    .master__menu--started { padding:0rem; }

    .menu__main             { padding:3.2rem; }
    .menu__topitem:first-child { border-top-width:0px; }
    .menu__panelsub         { max-width:100%; }
    .menu__nodes { padding-top: 4rem; }

}

@media only screen and (max-width: 767px)  and (min-width: 376px) 
{
    .menu__nodes            { max-width:calc(100% - 8rem); }
    .menu__back             { position:fixed; }
    .master__menu.master__menu--toplinkactive .menu__closeicon-mob    { position:fixed; } 
}





/* animations */

@keyframes navitem-stretch 
{
  0%   { width:5.5rem; }
  100% { width:13rem; }
}

@keyframes display
{
  from  { opacity:0; }
  to    { opacity:1; }
}


