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

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

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

/* Mobile Navigation */
@media screen and (max-width: 30rem) {
ul.navul {
        display: none;
        list-style-type: none;
        text-align: center;
        font-family: var(--font-txt);
        font-size: var(--font-size);
        color: var(--color-txt);
        font-weight: normal;
        font-style: normal;
        letter-spacing: calc(var(--letter-txt) + 0.01rem);
        line-height: 1;
        border: none;
        margin: 0;
        padding: 0;
        }

li.navli {
        display: block;
        background-color: var(--bgc-trans);
        border: none;
        padding: 0.5rem 0.75rem 0.75rem 0.75rem;
        margin: 0;
        }

/* Hamburger Icon */
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-norm);
        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); }}

/* Desktop Navigation */
@media screen and (min-width: 60rem) {
ul.navul { display: inline-block; }

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