/******************************** Top Navigation (Startseite) ************************************************/
.nav-open {
    display: block;
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
    padding: .05rem 0 .07rem;
    font-family: var(--icoFont);
    font-size: 2rem;
    line-height: 1;
    z-index: 9001;
}

/* Die Navigation */
.top-nav{ /* der Container zum ausklappen */
    position: fixed;
    height: calc(100dvh - 2.3rem);
    top: 2.3rem;
    right: -29rem;
    padding: 0 0 2.3rem;
    background: var(--navBg);
    backdrop-filter: blur(.5rem);
    overflow-y: scroll;
    z-index: 9000;
}

.top-nav a{ /* alle Links in der Navi */
    display: block;
    padding: .4rem 10rem .4rem 2.7rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgb(255, 255, 255);
}

 /* erste Menueebene */
.top-nav>ul>li>a { /* Links erste Menueebene */ 
    padding: .7rem 0 .7rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all .3s ease-in-out;
}

.top-nav>ul>li>a::before { /* Icons fuer die Links allgemein */
    content: '';
    font-family: var(--icoFont);
    display: inline-block;
    position: relative;
    bottom: -0.1em;
    transform: translateX(-.5rem);
}

/* Icons und Farben fuer die einzelnen Links bzw. Listenpunkte */
/********************************************/
.top-nav>ul>li:nth-child(1)>a {
    background: rgba(80, 93, 168, .8);
}

.top-nav>ul>li:nth-child(1):hover>a {
    background: rgba(59, 75, 161, .8);
}

.top-nav>ul>li:nth-child(1)>a::before {
    content: 'Taunt';
}
/********************************************/
.top-nav>ul>li:nth-child(2)>a {
    background: rgba(0, 158, 200, .8);
}

.top-nav>ul>li:nth-child(2):hover>a {
    background: rgba(0, 120, 200, .8);
}

.top-nav>ul>li:nth-child(2)>a::before {
    content: 'Handyman';
}
/********************************************/
.top-nav>ul>li:nth-child(3)>a {
    background: rgba(211, 68, 154, .8);
}

.top-nav>ul>li:nth-child(3):hover>a {
    background: rgba(213, 7, 129, .8);
}

.top-nav>ul>li:nth-child(3)>a::before {
    content: 'Calendar_Month';
}
/********************************************/
.top-nav>ul>li:nth-child(4)>a {
    background: rgba(255, 130, 58, .8);
}

.top-nav>ul>li:nth-child(4):hover>a {
    background: rgba(255, 99, 8, .8);
}

.top-nav>ul>li:nth-child(4)>a::before {
    content: 'Group';
}
/********************************************/
.top-nav>ul>li:nth-child(5)>a {
    background: rgba(101, 189, 0, .8);
}

.top-nav>ul>li:nth-child(5):hover>a {
    background: rgba(83, 155, 0, .8);
}

.top-nav>ul>li:nth-child(5)>a::before {
    content: 'Mail';
}
/********************************************/

/* zweite Menueebene */
.top-nav>ul>li>ul {
    padding: .5rem 0;
    /* transition: all .3s ease-in-out; */
}

.top-nav>ul>li>ul>li {
    transition: all .3s ease-in-out;
}

.top-nav>ul>li>ul>li:hover {
    background: var(--navBgHover);
}
/*************************************** Ende Top Navigation *************************************************/
/************************************ Landingpage (Home) Styles **********************************************/

/* Header */

.full-header {
    display: table-cell;
    padding: 1rem clamp(2rem, 6vw, 6rem) clamp(2rem, 8vh, 6rem) clamp(2rem, 6vw, 6rem);
    width: 100vw;
    height: 100dvh;
    background-color: rgb(0, 0, 0);
    background-size: cover;
    background-position: center;
    color: var(--neutralLight);
    position: relative;
    vertical-align: bottom;
}

.full-header h1 {
    font: var(--head01);
    color: var(--neutralLight);
}

.full-header h1~p[role] {
    font: var(--headSub);
    margin-bottom: 2rem;
}

.full-header section>p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
}

.button a {
    padding: .6rem 2.5rem;
    background: var(--ctaColor);
    color: var(--neutralLight);
    font-family: Montserrat;
    font-size: 1rem;
    font-weight: 500;
    border-radius: .25rem;
    transition: all .5s ease-in-out;
}

.button a:hover {
    background: var(--ctaHover);
    color: rgb(255, 255, 255);
}

/* Bilder, Kalender */

.img-container {
    min-height: var(--dekoImg);
    text-indent: -1000vw;
    background-size: cover;
    background-position: center;
    clip-path: var(--generalShape);
}

.img-container>img {
    display: none;
}
#map {    
    clip-path: var(--generalShape);
}
#map .leaflet-control-zoom.leaflet-bar.leaflet-control {
    margin-top: 2rem;
}
#calendar {
    padding: 0;
}

/* Contentzeug */

h2 {
    margin-bottom: 1.6rem;
}

h3 {
    margin-bottom: 1.2rem;
}

p {
    margin-bottom: 1rem;
}

h3 strong {
    color: rgb(223, 38, 23);
    font-weight: 700;
}

#general{
    font-size: var(--scaleFont);
    clip-path: var(--generalShape);
    position: relative;
    z-index: 100;
    background: var(--bgGradient);
    border-top: 0.0625rem solid var(--darkBlue);
    background-color: var(--darkBlue);
}

#general .bg-wrapper{
    padding-block: 2rem;
}

#repair{
    margin-top: -3.1rem;
}

a[href="/werkstaetten/zum-rostigen-ross"]::after,
a[href="/werkstaetten/rad-i-o"]::after,
a[href="/werkstaetten/flickwerke"]::after,
a[href="/en/workshops/zum-rostigen-ross"]::after,
a[href="/en/workshops/rad-i-o"]::after,
a[href="/en/workshops/flickwerke"]::after {
    content: "Public";
    font: var(--addIcon);
    font-size: 1.2rem;
    display: inline-block;
    transform: translate(.3rem, .3rem);
    margin-right: .5rem;
}
.home .content-grid {
    clip-path: var(--slantedSection);
}
.home .content-grid:last-child {
    margin-bottom: -5rem;
}

/* Mediaqueries */

@media screen and (min-width: 59.375rem) { /* 950px */
    .full-header section>p {
        width: clamp(50rem, 40vw, 50vw);
    }
    .content-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .home .content-grid {
        margin-block: -3rem;
    }
    .content {
        padding: 6.5rem var(--contentPadding) 8rem 3rem;
    }
    .content-grid:nth-child(odd) .content {
        transform: translateX(-50vw);
        padding: 8rem 3rem 6rem var(--contentPadding);
    }
    .content-grid:nth-child(odd) .img-container {
        transform: translateX(50vw);
    }
    .content-grid:nth-child(odd) #map {
        transform: translateX(50vw);
    }
    .img-container,
    #map,
    .content {
        width: 50vw;
        clip-path: none;
    }
}

@media screen and (max-width: 37.5rem) { /* 600px */
    .top-nav{
        width: 100vw;
        right: -100vw;
    }
    .top-nav a{
        padding: .4rem 2.7rem .4rem 2.7rem;
    }
}