/* altes Menü-Layout: Systemname des Blockes muss auf Endung "navigation" enden, wenn der Menüblock unter admin/structure/block erstellt wird */
/* neues Menü-Layout: Systemname des Blockes muss auf Endung "menu" enden, wenn der Block unter /admin/structure/block auf der Seite angezeigt werden soll */

/* WICHTIG!!! */
/* der Name bzw. das Ziel des Sprunglinks in html.html.twig entscheidet, welches Menü mit dem Sandwich-Icon bei einspaltiger Darstellung eingeblendet wird, die Sprungmarke wird für jedes Menü automatisch erstellt */


/* nötig für clip: overflow:hidden;
   für Internet Explorer auch rect ohne Komma in der Aufzählung:
   clip: rect(1px 1px 1px 1px);

/* Border-Dreicke mit CSS für Bildbeschriftung: hier gefunden: http://clba.nl/sitepoint/clickable-css-triangle-in-two-ways.htm */

/*
.fa-times::before {
  content: "\f00d";
}
.fa-external-link-alt::before {
  content: "\f35d";
}
*/

/* *************** Link zum Menü und Sprungziel ******************* */

body .auf {
  position:absolute;
   /* top:3px; / * breite Border */
  top:0.5rem;
  left:0.5rem;
  display:block;
  /* nicht nötig wenn kein Rand und kein Hintergrund
  height:2.5rem;
  width:3rem;
  */
}
body .auf i.fa {
  width: 100%;
  height:100%;
  font-style: normal;
  min-height:none;
  /*
  border-width:2px;
  border-style:solid;
  */
  border:none;
  text-align:center;
  display:block;
}

/* wegen color-module kompliziertes aufheben: */
.links > nav > ul.ebene_1 {margin:0;list-style:none;}
.links > nav > ul.ebene_1 li {padding-left:0;margin-top:0;}
.links > nav > ul.ebene_1 li::marker {content:'';}

nav.sprungziel .ebene_1 > li:last-of-type > a > strong,
nav.sprungziel .ebene_1 > li:last-of-type > a > small {
  position:absolute;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  overflow:hidden;
  height:1px;
  width:1px;
  visibility: hidden;
  opacity: 0;
}

/* Menü-Transformation */

@media screen and (max-width:39.999em) {
  nav.sprungziel {
    position:absolute;
    right:0;
    top:0;
  }
  nav.sprungziel ul {
    height:1px;
    overflow:hidden;
    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
    clip: rect(1px, 1px, 1px, 1px);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
/*
    -moz-transform-origin: top right;
    -o-transform-origin: top right;
    -webkit-transform-origin: top right;
    transform-origin: top right;
*/
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;

    -moz-transition: -moz-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    transition: all 0.3s linear;
  }
  nav.sprungziel ul:target, nav.sprungziel ul:focus-within {
    position:absolute;
    top:0;
    aleft:auto;
    aright:0;
    left:0;
    right:auto;
    clip:initial;
    opacity: 1;
    clip:unset;
    visibility: visible;
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    height:auto;  
    width:100%;
    overflow:visible;
  }

}

@media all and (min-width: 40em) {
  #block-sprungziel-hauptnavigation,
  .auf, .nur_kleiner_bildschirm,
  nav.sprungziel .ebene_1 > li:last-of-type {
    position:absolute;
    left:-99999;
    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
    clip: rect(1px, 1px, 1px, 1px);
    overflow:hidden;
    visibility: hidden;
    opacity: 0;
  }
  nav.sprungziel ul{
    opacity: 1;
    overflow:visible;
    visibility: visible;
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    height:auto;
    position:static;
  }
}

/* ******************* neue Hauptnavigation ********************* */

/* 
   Danke an: https://blog.avada.io/examples/pure-css3-mega-drop-down-menu-with-animation-vertical-rizkykurniawanritonga.html
   Demo:     https://codepen.io/rizkykurniawanritonga/embed/sqcAn?height=316&theme-id=0&default-tab=result
*/


/* Standard für einspaltige Darstellung */

/* vertikales Menü: 1. Ebene senkrecht, 2. + folgende Ebenen waagrecht */

nav { 
  width: 100%;
  clear:both;
  position:static;
}

nav ul { 
  width: 100%;
  clear:both;
  position:relative;
}

nav li {
  position:relative;
  clear:both;
}

/* Öffner und schließer */
/* soll rechts bleiben - daher pos absolute */
nav.sprungziel .ebene_1 > li:last-of-type {
  position:absolute;
  top:0;
  right:0;
}

nav li > span,
nav li a {
  display: block;
  text-decoration: none;
  line-height:1.5rem;
  text-align: left;  
}  
nav[class*="icons"] li > span,
nav[class*="icons"] li a {
  padding-left:4rem;  
  min-height:2rem; /* war 2.5rem */
  line-height:1.7rem; /* war 2.5rem */
}
nav[class*="bunte_icons"] li {
  min-height:3.2rem;
}

nav li ul a:first-of-type {
  border-top-color:transparent;
}
.auf i.fa,
nav[class*="icons"] i {
  display: block;
  position:absolute; 
  top:0;left:0;
  height:100%;
  width:3.5rem;
  line-height:2.3rem;
  font-size:1.2rem;
  font-style: normal;
  min-height:2.5rem;
  padding:0;
  text-align:center;
}
.auf i.fa,
nav[class*="icons"] i.X {
  font-size:1.8rem;
}

nav[class*="icons"].untertitel i {
  line-height:3.2rem;
  min-height:3.2rem;
}

nav.bunte_icons .ebene_1 > li > a > i {
  border-width:0 1px 1px 1px;
  border-style: solid;
}
nav.bunte_icons .ebene_1 > li > a > i:first-of-type {
  border-top-width:1px; /* Strich unten mit dazu */
  border-top-style:solid;
}


aside nav li {
  padding-top:0.3rem;
}

/* einzeilig */

/* span ist um Linktext ab Ebene 2 und tiefer */
nav li > span strong,
nav li a strong {
  line-height:1.2rem;
/* alt:
  padding:0.5rem 0.5rem 0.3rem 0.5rem;
*/
  padding:0.5rem 0.5rem 0.3rem 0;
  display: block;
  font-variant: small-caps;
  font-weight:normal;
}
nav li > span small,
nav li a small {
/* alt:
  padding:0 0.5rem 0.1rem 0.5rem;
*/
  padding:0 0.5rem 0.1rem 0;
  display: block;
  line-height:1.2rem;
  font-weight:bold;
  font-size:65%;
}

aside nav li:hover > a,
aside nav li:hover > span,
aside nav li a:active,
aside nav li a.active {
  border-style:solid;
  border-width: 0 0.3rem 0 0.3rem;
  margin: 0 -0.3em;
}
aside nav li a:active::before,
aside nav li a.active::before {
  content: ""; /* kein Inhalt = Größe Null, Dreieck kommt vom Rand */
  position: absolute;
  top: 42%;
  left: 0;
  border-style:solid;
  border-left-width:0.4rem; /* farbig */
  border-top-width:0.4rem; /* transparent */
  border-bottom-width:0.4rem; /* transparent */
  /* war:
  border-left: 0.4rem solid #1d84c3;
  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
  */
}

aside nav li a:active::after,
aside nav li a.active::after {
  content: "";
  position: absolute;
  top: 42%;
  right: 0;
  border-style:solid;
  border-right-width: 0.4rem; /* farbig */
  border-top-width: 0.4rem; /* transparent */
  border-bottom-width: 0.4rem; /* transparent */
  /* war:
  border-right: 0.4rem solid #1d84c3;
  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
  */
}

/* 2. Ebene */

aside nav li ul {
  position: absolute;
  height: auto;
  min-width: 20rem;
  padding: 0; /* war 0 */
  margin: 0;
  opacity: 0;
  visibility: hidden;
  left:-9999rem;
  top:-1px; /* Randausgleich von mir, war top:0px; */
  width:auto;
  border-left-width: 0.3rem;
  border-left-style: solid;
  border-left-color: #1d84c3;
  /* transition war 300 ms */
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

aside nav li ul {
}

@media only screen and (min-width: 40em) {

  aside nav li:hover > ul,
  aside nav li:focus-within > ul {
    opacity: 1;
    left:100%;
    visibility:visible;
  }
}
/* Dreieck aus Border zum übergeordneten Menü hin */
aside nav li:focus-within ul::before, 
aside nav li:hover ul::before {
  top: 0.5rem; /* durch austesten am Menü ohne Farbe */
  left: -0.8rem; /* 0.3rem Rand von ul + 0.5rem Rand ul::before unten */ 
  border-style: solid;
  border-right-width: 0.5rem; /* farbig - siehe farben.css */ 
  border-top-width: 0.5rem;
  border-bottom-width: 0.5rem; 
  border-left-width:0;
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-left-color:transparent;
  content: "";
  position: absolute;
}

nav li ul li > span,
nav li ul li a {
  line-height:1.4rem;
  min-height:2.5rem;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #EEE; /* Trennlinie : #1d84c3 ? */
}


/* span ist um Linktext ab Ebene 2 und tiefer */
nav li ul li > span strong,
nav li ul li a strong {
  text-transform:none;
}
/* Transitions */

nav li:hover a strong,
nav li:hover > span strong,
nav li:hover > span small,
nav li:hover a small 
nav li:focus-within a strong,
nav li:focus-within > span strong,
nav li:focus-within > span small,
nav li:focus-within a small {
  
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
nav[class*="icons"] li:hover > span i,
nav[class*="icons"] li:hover > a i,
nav[class*="icons"] li:focus-within > span i,
nav[class*="icons"] li:focus-within > a i
 {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
nav li:hover > span strong,
nav li:hover a strong 
nav li:focus-within > span strong,
nav li:focus-within a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
nav li:hover > span small,
nav li:hover a small,
nav li:focus-within > span small,
nav li:focus-within a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}