body {
    max-width: 100vw;
    overflow-x: hidden;
}

.landing {
    width: 100vw;
    height: calc(100vh - 62px);
    position: relative;
}

.landing .header {
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: white;
    font-size: 100%;
}

.landing .header h1 {
    margin: 0;
    font-size: 8vw;
    font-weight: bold;
}

.landing .header p {
    margin: 0;
    font-size: 2vw;
    font-weight: normal;
    margin-left: 0.5vw;
}

.landing > .landing_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #cccccc;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.landing > .landing_bg2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    background: linear-gradient(6deg, #000000db 0%, #00000098 20%, #00000000 40%);
}

@media screen and (max-width: 900px) {
    .landing .header h1 {
        font-size: 60px;
    }
    .landing .header p {
        font-size: 25px;
    }
}

@media screen and (max-width: 400px) {
    .landing .header h1 {
        font-size: 50px;
    }
    .landing .header p {
        font-size: 18px;
    }
}

@media screen and (max-width: 600px) {
    .landing {
        background: linear-gradient(4deg, #0000006f 0%, #00000000 30%);
        height: calc(100vh - 46px);
    }
}

/*										// unkommentiere für Animation
#nav_logo_img {
    transition: width 0.2s ease;
    overflow: hidden;
}

#nav_logo_img.unscrolled {
    width: 0px;
}
*/

h2 {
    font-size: 55px;
    text-align: center;
}

.events-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2vw;
    max-width: 2000px;
    width: 90vw;
    margin: 0 auto;
}

.event-card {
    background-color: #000000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
    width: 600px;
    max-width: 45%;
}

.event-card:hover {
    transform: scale(1.03);
}

.event-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.event-content {
    padding: 16px;
}

.event-date {
    font-size: 17px;
    color: #aaa;
}

.event-title {
    font-size: 28px;
    margin: 10px 0 6px;
    color: #fff;
}

.event-description {
    font-size: 20px;
    color: #ccc;
    margin-bottom: 12px;
}

.event-description a {
    color: #f4a216;
    text-decoration: underline;
}

.event-ticketbuy {
    font-size: 16px;
    color: white;
    margin-top: 16px;
}

@media screen and (max-width: 900px) {
    .event-card {
        max-width: 100%;
    }
}

.map_ginfo {
    width: 100vw;
    height: 500px;
    background-color: #000000;
    color: white;
    display: flex;
    flex-direction: row;
    margin-top: 50px;
    justify-content: center;
    align-items: center;
}

.map_ginfo > div {
    width: 50%;
}

.map_ginfo > .map {
    height: 100%;
}

.map_ginfo > .map > iframe, .map_ginfo > .map > img {
    width: 100%;
    height: 100%;
    border: none;
}

.ginfo {
    padding: 30px 0;
}

.ginfo > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.ginfo h2 {
    margin-top: 0;
}

.ginfo a {
    color: white;
    text-decoration: none;
}

.ginfo > div img, .ginfo > div p {
    width: 150px;
    max-width: 35% 35vw;
    font-size: 29px;
    transition: 0.2s ease-in-out;
}

.ginfo > div img:hover, .ginfo > div p:hover {
    transform: scale(1.1);
}

@media screen and (max-width: 600px) {
    .map_ginfo {
        flex-direction: column;
        height: auto;
    }
    
    .map_ginfo > div {
        width: 100%;
        height: auto;
        min-height: 30vh;
    }
    
    .map_ginfo > div:first-of-type {
        padding-bottom: 30px;
    }
}

@media screen and (max-width: 450px) {
    .ginfo > div img, .ginfo > div p {
    width: 100px;
    max-width: 35% 35vw;
    font-size: 20px;
    }
}


.karlinfo {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 25px;
    padding: 20px;
}

.karlinfo p {
    font-weight: bold;
}

.karlinfo h2 {
    margin-top: 10px;
}

.karlinfo > .kinfo {
    max-width: 35%;
}

.karlinfo > .image > img {
    max-width: 30vw;
    width: 200px;
    margin: 30px;
    filter: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.5));
}

.karlinfo a {
    background-color: #f8a518;
    color: black;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.2s;
}

.karlinfo a:hover {
    background-color: #d58d11;
    transform: scale(1.1);
}

@media screen and (max-width: 600px) {
    .karlinfo div:first-of-type {
        width: 90%
    }

    .karlinfo {
        padding: 20px 0;
    }

    .karlinfo > .kinfo {
        max-width: 90%;
        text-align: justify;
    }

    .karlinfo .image img {
        max-width: 50vw;
    }
}


.mitgliedinfo {
    width: 100vw;
    background-color: #000000;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mitgliedinfo h2 {
    margin-top: 0;
}

.mitgliedinfo h3 {
    margin-bottom: 0;
    text-align: center;
}

.mitgliedinfo > div {
    width: 50%;
}

.mitgliedinfo .image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.mitgliedinfo > .image > img {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

.minfo {
    padding-top: 6vh;
    padding-bottom: 8vh;
    margin-left: 50%;
    height: 100%;
}

.minfo > div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
}

.minfo > div p {
    width: 40%;
    min-width: 230px;
    font-size: 29px;
    text-align: justify;
    margin-top: 20px;
    padding: 10px;
}

.minfo > div p a {
    color: white;
    text-decoration: underline;
}

.minfo > div p a:hover {
    font-style: italic;
}

.minfo > div p:first-of-type {
    font-size: 23px;
}

.minfo > div p span {
    font-size: 29px;
}

@media screen and (max-width: 600px) {
    .mitgliedinfo {
        flex-direction: column;
        height: auto;
        justify-content: flex-start;
        align-items: flex-start;
    }
    
    .mitgliedinfo > div {
        width: 100%;
        height: auto;
        min-height: 30vh;
    }
    
    .mitgliedinfo > div:first-of-type {
        padding-bottom: 30px;
    }

    .mitgliedinfo .image {
        position: relative;
        height: 100%;
    }

    .minfo {
        padding-top: 10px;
        margin-left: 0;
        height: 100%;
    }

    .minfo > div p {
        width: 40%;
        min-width: 230px;
        font-size: 22px;
    }

    .minfo > div p:first-of-type {
        font-size: 17px;
    }

    .minfo > div p span {
        font-size: 22px;
    }
}

@media screen and (max-width: 450px) {
    .ginfo > div img, .ginfo > div p {
    width: 100px;
    max-width: 35% 35vw;
    font-size: 20px;
    }
}


.spreadshopinfo {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 25px;
    padding: 30px 20px;
}

.spreadshopinfo p {
    font-weight: bold;
}

.spreadshopinfo h2 {
    margin-top: 10px;
}

.spreadshopinfo > .sinfo {
    max-width: 35%;
}

.spreadshopinfo > .image > img {
    max-width: 30vw;
    width: 300px;
    margin: 30px;
    filter: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.5));
}

.spreadshopinfo a {
    background-color: #f8a518;
    color: black;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.2s;
}

.spreadshopinfo a:hover {
    background-color: rgb(213, 141, 17);
    transform: scale(1.1);
}

@media screen and (max-width: 600px) {
    .spreadshopinfo div:first-of-type {
        width: 90%
    }

    .spreadshopinfo {
        padding: 40px 0;
    }

    .spreadshopinfo > .sinfo {
        max-width: 90%;
        text-align: justify;
    }

    .spreadshopinfo .image img {
        max-width: 50vw;
    }
}

.stukgruppe {
    width: 100vw;
    margin-bottom: -0.03vw;
}