/* Liste Navigation */
ul.navul {
          display: inline-block;
          list-style-type: none;
          text-align: right;
          font-family: var(--font-txt);
          font-size: calc(var(--font-size) + 0.1rem);
          color: var(--color-light);
          font-weight: bold;
          font-style: normal;
          letter-spacing: calc(var(--letter-txt) - 0.01rem);
          line-height: 1.1;
          border: none;
          margin: 0;
          padding: 0.5rem 0.5rem 0.5rem 0.5rem;
          }

li.navl {
          display: inline-block;
          border: none;
          padding: 0 0.75rem 0 0.75rem;
          margin: 0;
          }

label.hamburger,
input#hamburger     { display: none; }


/* ------------------------------------------------------------------------------------------------------ */


/* Liste für mobile Navigation */
@media screen and (max-width: 60rem) {
ul.navul {
          display: none;
          list-style-type: none;
          text-align: center;
          padding: 0;
          }

li.navl {
          display: block;
          background-color: var(--bgc-trans);
          padding: 0.5rem 0.75rem 0.75rem 0.75rem;
          }

/* animierter ICON für mobile Navigation */
label.hamburger {
          display: block;
          position: relative;
          background-color: var(--bgc-trans);
          width: 4rem;
          height: 3.25rem;
          margin-left: auto;
          margin-right: auto;
          }

.line {
        position: absolute;
        left: 1rem;
        height: 0.2rem;
        width: 2rem;
        background-color: var(--bgc-light);
        display: block;
        transition: 0.3s;
        transform-origin: center;
        }

.line:nth-child(1)  { top: 0.75rem; }
.line:nth-child(2)  { top: 1.5rem; }
.line:nth-child(3)  { top: 2.25rem; }
    
input#hamburger:checked ~ ul.navul  { display: block;}
input#hamburger:checked +  .hamburger .line:nth-child(1)    { transform: translateY(0.75rem) rotate(-45deg); }
input#hamburger:checked +  .hamburger .line:nth-child(2)    { opacity: 0; }
input#hamburger:checked +  .hamburger .line:nth-child(3)    { transform: translateY(-0.75rem) rotate(45deg); }}