/* Var Definitions */
.navBlockdrop {
    --bg-color: #fff;                                       /* Hintergrund der Navi */
    --bg-color-mutter: var(--logo-color-1);                 /* var(--bg-color); */
    --bg-color-mutter-hover: var(--logo-color-2);           /* var(--logo-color-1-dark, #888); */
    --bg-color-kind: var(--bg-color-mutter);                /* var(--logo-color-1); */
    --bg-color-kind-hover:  var(--logo-color-2);
    --font-color-mutter: var(--font-color-dark, #444);
    --font-color-kind: var(--font-color-dark, #eee);
    --color-button: var(--font-color-dark, #eee);   
    --top-margin: 0;
    --icon-size: 36px;
}

/* Reset CSS Styles */
.navBlockdrop .item a { text-decoration: none; }

.navBlockdrop {
  position: absolute;
  right: 5px;
  top: auto;
  height: 50px;
  width: auto;
  max-width: 400px;
  z-index: 51;
}

.navBlockdrop .checkbox { opacity: 0; cursor: pointer; position: absolute; right: 0; }

/* hamburger icon */
.navBlockdrop .hamburger { grid-row: BURGER; width: 50px; height: 50px; position: absolute; top: 5px; right: 0px; display: block; transition: transform 0.5s ease; z-index: 61;
                              cursor: pointer; }
.navBlockdrop .hamburger span { display: block; width: 100%; height: 7px; margin-bottom: 9px; position: relative; background: var(--color-button);
        border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s, opacity 0.55s ease; }
.navBlockdrop .hamburger span:first-child { transform-origin: 0% 0%; }
.navBlockdrop .hamburger span:nth-last-child(2) { transform-origin: 0% 100%; }

/* hamburger icon checked */
.navBlockdrop .checkbox:checked ~ .hamburger span:nth-child(1) { opacity: 1; transform: rotate(45deg) translate(4px, -4px); }
.navBlockdrop .checkbox:checked ~ .hamburger span:nth-child(2) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } /* hide middle one */
.navBlockdrop .checkbox:checked ~ .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(0px, 0px); } /* rotate last one */

.navBlockdrop .drawer {
    max-width: 100%;
    padding: 5px;
    background-color: var(--bg-color);
    transform: translateX(calc(100% + 20px));
    transition: var(--transition-time) ease;
    /*height: 100vh;*/
    overflow-y: auto;
    z-index: 60;
    box-sizing: border-box;
    box-shadow: 0 0 5px #000a;
    display: grid;
    grid-template-rows: [BURGER]3rem [MENU]auto;
    /* grid-template-columns: 30rem; */
    display: none;
}
.navBlockdrop .checkbox:checked ~ .drawer { transform: translateX(0%); display: grid; }

/* Layout TPr */ 

.navBlockdrop .drawer > label {
    grid-row: BURGER;
}

.navBlockdrop label.home { grid-row: BURGER; font-size: 75px; padding: 0; margin-left: 0px; margin-top: 2px; color: var(--color-button); }

.navBlockdrop .drawer > * {
    grid-column: 1;
}

.navBlockdrop .drawer .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navBlockdrop .item a { flex-grow:  1; }

/* HIDE all <input> elements */
.navBlockdrop input[name="nav"] {
    grid-row: BURGER;
    transform: translateX(-100%);
}

/* Hide Home Icon in Root */
.navBlockdrop input.root:checked ~ label.home {
  display: none;
}

/* All divs, inactive or not are styled. Inactive divs are moved to the left. 
The transition has a delay of 1s, so that they wait  until new active divs have moved in place. */
.navBlockdrop input[name="nav"] + div.layer {
    background-color: white;
    display: block;
    z-index: 0;
    grid-row: MENU;
    transform: translateX(-110%);
    max-height: 0;  /* war height 0 */
    overflow-y: hidden;
    /*transition: transform 1s 1s;*/
}
/* active divs are moved into place without a delay 
 */
.navBlockdrop input[name="nav"]:checked + div.layer {
    z-index: 1;
    transform: translateX(0);
    max-height: calc(100vh - 5rem);  /* war height auto */
    overflow-y: auto;
    transition: transform var(--transition-time);
}
.navBlockdrop label, .navBlockdrop a {
    padding: 0 .25rem;
    border-radius: 5px;
    cursor: pointer;
}
.navBlockdrop label:hover, .navBlockdrop a:hover {
    cursor: pointer;
}
 

.navBlockdrop .link { display: flex; }

.navBlockdrop label { font-size: var(--icon-size); }

/* coloring */
.navBlockdrop .item { background-color: var(--bg-color-kind); color: var(--font-color-kind); padding: 0px 5px; }
.navBlockdrop .item.mother { background-color: var(--bg-color-mutter); }
.navBlockdrop .layer label:hover { background-color: var(--bg-color-mutter-hover); color: var(--font-color-light); }
.navBlockdrop .layer a:hover { background-color: var(--bg-color-kind-hover); }

/* transitions */
.navBlockdrop .item {
  transition: all var(--transition-time);
  transition-property: background-color, color;
}


/* Make the drawer full-width on mobile */
@media screen and (max-width: 768px) { .drawer { width: 100%; } }
@media screen and (max-width: 400px) { .navBlockdrop { right: 0; } }