/*Style KontaktForm*/

.frmtx {
    --font-size: clamp(15px, 2vw, 20px);
    --font-family: 'Montserrat', sans-serif;
    --font-weight: 300;
    --font-color: inherit;
    --background-color: rgba(253, 253, 253, 0.4);
    --border-color: #AAA;
    --border-width: 1px;
    --border-radius: 5px;
    margin: 1rem;
    min-width: 240px
}

.frmtx * {
    color: var(--font-color);
    font-family: var(--font-family);
    font-size: var(--font-size);
    margin: 0;
    padding: 0;
    appearance: auto;
    outline: none;
    box-sizing: border-box
}

.frmtx label {
    font-weight: var(--font-weight);
    padding: 0;
    margin: 1em 0 .3em;
    display: block;
    line-height: 1.3
}

.frmtx label:first-child {
    margin-top: 0
}

.frmtx input,
.frmtx textarea,
.frmtx button {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color)
}

.frmtx input,
.frmtx textarea {
    width: 100%;
    resize: none;
    padding: .5em;
    line-height: 1.3
}

.frmtx input[name="_gotcha"] {
    display: none
}

.frmtx input[type="checkbox"] {
    display: inline;
    width: 1.1em;
    height: 1.1em;
    appearance: auto;
    margin-right: .2em
}

.frmtx button {
    display: block;
    padding: .5em 1.5em;
    margin: 1.5em 0 0;
    line-height: 1.5;
    font-weight: var(--font-weight);
    cursor: pointer
}

/* Global */

:root {
    --font-head: 'Bangers', sans-serif;
    --font-allg: 'Montserrat', sans-serif;
    --fcv-blau: #050396;
    --fcv-gelb: #fbff03f5;
    --fcv-rot: #d1000af5;
}

/* Objekte Class Frames/ Sichtbarkeiten usw... */

.visible {
    display: block;
    opacity: 1;
    transition: all 0.5s ease;
}

.visible1 {
    opacity: 1;
}

.hidden {
    display: none;
    opacity: 0;
    transition: all 0.5s ease;
}

.hidden1 {
    opacity: 0;
}

.temp_nv {
    display: none;
}

.frame1 {
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 10px;
    margin: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

.high_prio {
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.termin_st {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 5px;
    margin-top: 20px;
    margin-bottom: 40px;
    padding-left: 30px;
    border: 0px solid transparent;
    border-radius: 10px;
    background-blend-mode: screen;
    background-image: url(/images/backgrounds/termin1.png), linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
    background-size: 25% auto;
    background-repeat: no-repeat;
    background-position: bottom left;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: clamp(15px, 2vw, 20px)
}

.info_st {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    padding: 5px;
    margin-top: 20px;
    margin-bottom: 40px;
    padding-left: 20px;
    padding-bottom: 40px;
    border: 0px solid transparent;
    border-radius: 10px;
    background-blend-mode: screen;
    background-image: url(/images/backgrounds/info1.png), linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    background-size: 25% auto;
    background-repeat: no-repeat;
    background-position: bottom left;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: clamp(15px, 2vw, 20px)
}

.impressum_st {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    padding: 5px;
    margin-top: 20px;
    margin-bottom: 40px;
    padding-left: 20px;
    padding-bottom: 65px;
    border: 0px solid transparent;
    border-radius: 10px;
    background-blend-mode: screen;
    background-image: url(/images/logos/fcv_wappen1.png), linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
    background-size: 30% auto;
    background-repeat: no-repeat;
    background-position: center 40%;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: left;
    font-size: clamp(15px, 2vw, 20px)
}

.vorstand_mitg {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 98%;
    padding: 5px;
    margin: 5px;
    background-color: rgba(255, 255, 255, 0.7);
}

.mitg {
    flex: 0 1 50%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.mitg_last {
    flex-basis: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.gruppen_unt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 97%;
    padding: 0px;
    margin: 5px;
}

.gruppen_mitg {
    position: relative;
    flex-basis: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    border: 2px solid rgba(180, 180, 180, 0.4);
    border-radius: 10px;
    /*background-color: rgba(255, 255, 255, 0.7); */
}

.prikabinett_mitg {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 98%;
    height: 800px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 5px;
    margin: 5px;
    background-color: rgba(255, 255, 255, 0.7);
}

#prikabi {
    padding-bottom: 30px;
}

#daschu_scroll_up {
    display: flex;
    flex-wrap: wrap;

    width: 98%;
    height: 800px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 5px;
    margin: 5px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.7);
}

.scroll-to-top1 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    float: right;
    bottom: 10px;
    cursor: pointer;
    height: fit-content;
    border: 1px solid #AAA;
    border-radius: 4px;
    /*z-index: 100;*/
}

.zeile_prisaison {
    display: flex;
    flex-wrap: wrap;
    width: 98%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 0px;
    margin-left: 5px;
}

.pic_prisaison {
    flex: 0 1 35%;
}

.pic_pri_saison {
    width: 200px;
    height: auto;
    /*box-sizing: border-box; */
    margin: 5px 5px;
    border: 0px solid transparent;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.7s ease;
}

.pic_pri_saison:hover {
    transform: scale(1.5) translate(30px, 50px);
    transition: all 0.7s ease;
}

.text_prisaison {
    flex: 0 1 55%;
}


#sponsor_list {
    height: 750px;
    overflow-y: auto;
    overflow-x: hidden;
}

.scroll1 {
    max-width: 95%;
    height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
}

/*Termine/, Shows...*/
.block_obj1 {
    display: flex;
    flex-wrap: wrap;
    width: 98%;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 10px 0px;
    margin-left: 5px;
}

/*Termin design nach VA*/

.grayscale {
    filter: grayscale(100%);
}

.overlay {
    position: absolute;
    top: 40%;
    left: 2%;
    right: 2%;
    bottom: 30%;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1.2em, 3.5vw, 2.0em);
    margin: 5px;
    font-family: var(--font-head);
    color: var(--fcv-rot);
    letter-spacing: 2px;
    text-shadow:
        -2px -2px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px 1px 0 #ffffff;
    transition: all 0.7s ease;
    /* Sanfte Übergangseffekte */
}

/*
.grayscale + .overlay {
    opacity: 1; /* Overlay sichtbar machen, wenn die Klasse 'grayscale' vorhanden ist
} */

.pic_obj1 {
    flex: 0 1 48%;
}

.pic_obj_img {
    width: 400px;
    height: auto;
    /*box-sizing: border-box; */
    margin: 5px 5px;
    border: 0px solid transparent;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.7s ease;
}

/*----------Saison Archiv----------*/

.block_obj2 {
    display: flex;
    flex-wrap: wrap;
    width: 98%;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 5px 0px;
    margin-left: 5px;
}

.pic_obj2 {
    flex: 0 1 45%;
    justify-content: center;
}

.pic_obj_img2 {
    width: 80%;
    min-width: 200px;
    max-width: 300px;
    height: auto;
    /*box-sizing: border-box; */
    margin: 5px 5px;
    border: 0px solid transparent;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.7s ease;
}

.pic_obj_img3 {
    width: 50%;
    /*max-width: 75px;*/
    height: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    filter: drop-shadow(2px 3px 3px black);
    transition: all 0.7s ease;
}

.txt_obj3 {
    flex: 0 1 45%;
    justify-content: center;
    flex-direction: row;
    padding-top: 5%;
}

.txt_obj2_cont {
    font-family: 'Montserrat', sans-serif;
    min-width: 98%;
    font-size: clamp(10px, 2vw, 17px);
    font-weight: 400;
    margin: 0px 0px 10px 10px;
    padding: 0px 0px 0px 0px;

}

.k-i {
    display: flex;
    flex-direction: column;
}

.points {
    display: flex;
    flex-direction: row;
}

.high_prio hr {
    margin: 0px 5%;
}

@media (max-width: 1330px) {
    .pic_obj1 {
        flex: 0 1 100%;
        max-width: 80%;
    }

    .pic_obj_img {
        width: 98%;
    }

    .txt_obj1 {
        flex: 0 1 98%;
        margin-left: 10%;
        padding-top: 2%;
    }
}

.txt_obj2 {
    flex: 0 1 100%;
    justify-content: flex-start;
    flex-direction: column;


}

.txt_obj1_head {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 700;
    margin: 0px 0px 10px 10px;
    padding: 0px;
    text-align: left;
}

.txt_obj1_cont {
    font-family: 'Montserrat', sans-serif;
    min-width: 98%;
    font-size: clamp(10px, 2vw, 17px);
    font-weight: 400;
    margin: 0px 0px 10px 10px;
    padding: 0px 0px 0px 0px;
    text-align: left;
}

.txt_obj2_cont {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2vw, 17px);
    font-weight: 400;
    margin: 0px 0px 10px 10px;
    padding: 0px 0px 0px 0px;
    text-align: left;
}

.txt_1 ul li::marker {
    content: "🔹";

}

.txt_2 ul li::marker {
    content: "🔸";
}

.txt_obj1_contbig {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2vw, 17px);
    font-weight: 500;
    margin: 0px 0px 5px 5px;
    padding: 0px 0px 0px 0px;
    text-align: left;

}

@media (max-width: 800px) {
    .vorstand_mitg {
        justify-content: center;

    }

    .mitg {
        flex-basis: 100%;
    }

    .pic_pri_saison:hover {
        transform: scale(1.5) translate(0px, 0px);
        transition: all 0.7s ease;
    }

}

/* Objekte Class Texte */



h2,
h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.scroll-to-top1 p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    margin: 0px;
    padding: 0px;
}

#datenschutztext p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
}

#datenschutztext h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
}

li.spon_li {
    width: fit-content;
    padding: 2px 5px 2px 5px;
    list-style-type: circle;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(9px, 2vw, 15px);
    text-align: left;
    margin-bottom: 5px;
    transition: transform 0.5s ease;
}

li.spon_li:hover {
    font-weight: 700;
    background-color: #ddd;
    border-radius: 10px;
    transform: scale(1.10) translateX(0px);


}

a:any-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #961919;
    cursor: pointer;
    text-decoration: solid;
}

a:hover {
    color: #961919;
    border-radius: 3px;
    text-shadow:
        -2px -2px 0 #ffffff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        2px 2px 0 #fff;
}

a:visited {
    color: #961919;
}

a:active {
    color: #000000;
}

.st_text {
    margin-top: 15px;
    margin-bottom: 0px;

}

.follow_text {
    margin-top: 0px;
    margin-bottom: 15px;
    padding: 0px;
}

.left_txt {
    text-align: left;
    margin: 5px;
    padding: 5px;
}

.txt_top_mar {
    margin-top: 20px;
}

.kl_text {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(12px, 2vw, 15px);
    font-weight: 400;
    text-align: center;
}

.kl_text_impr {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(12px, 2vw, 15px);
    font-weight: 400;
    margin: 5px;
    text-align: left;
}

.kl_text_chro {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2vw, 17px);
    font-weight: 400;
    margin: 5px;
    padding: 10px 0px 10px 0px;
    text-align: left;
}

.text_vorstand {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(12px, 2vw, 17px);
    font-weight: 400;
    margin: 5px;
    padding: 0px 0px 0px 0px;
    text-align: center;
}

.text_pri_saison {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2vw, 17px);
    font-weight: 700;
    margin: 0px 0px 20px 10px;
    padding: 0px 0px 0px 0px;
    text-align: center;
}

.text_pri_motto {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2vw, 17px);
    font-weight: 400;
    margin: 0px 0px 20px 10px;
    padding: 0px 0px 0px 0px;
    text-align: center;
}

.text_pri_name {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2vw, 17px);
    font-weight: 500;
    margin: 0px 0px 20px 10px;
    padding: 0px 0px 0px 0px;
    text-align: center;
}



/* Objekte Class Bilder */

.img_ho {
    width: 50%;
    height: auto;
    margin-top: 20px;
    border: #000 1px transparent;
    border-radius: 5%;
    filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/*
#teaser_ho {
    animation-name: start_big;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    transform-origin: center;
}

@keyframes start_big {
    0% {
        transform: scale(1) translateY(0px);
    }

    50% {
        transform: scale(2.8) translateY(-60px);
    }

    100% {
        transform: scale(1.0) translateY(0px);
    }
}
*/
.img_ras {
    width: 90%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    filter: drop-shadow(2px 5px 6px black);
    transition: all 0.7s ease;
}

.img_las {
    width: 50%;
    /*max-width: 75px;*/
    height: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    filter: drop-shadow(2px 3px 3px black);
    transition: all 0.7s ease;
}

.img_las1 {
    width: 90%;
    height: auto;
    margin-top: 10px;
    margin-bottom: -20px;
    transform: rotate(-25deg);
    filter: drop-shadow(2px 3px 3px black);
    transition: all 0.7s ease;
}


.img_las:hover {
    transform: scale(1.1);
    cursor: pointer;
    filter: drop-shadow(4px 8px 8px black);
}

.img_las1:hover {
    transform: scale(1.1);
    cursor: pointer;
    filter: drop-shadow(4px 8px 8px black);
}

.img_ras:hover {
    transform: scale(1.1);
    cursor: pointer;
    filter: drop-shadow(4px 8px 8px black);
}

.img_inline {
    width: 35%;
    min-width: 180px;
    max-width: 400px;
    height: auto;
    margin-right: -10px;
    margin-bottom: -20px;
    align-self: flex-end;
    border: 0px solid transparent;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;


}

.chronik_pic_ltop {
    float: left;
    width: 20%;
    min-width: 190px;
    max-width: 400px;
    height: auto;
    margin-right: 15px;
    margin-bottom: 10px;
    align-self: flex-end;
    border: 0px solid transparent;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.7s ease;
}

.chronik_pic_ltop:hover {
    width: 80%;
}

.chronik_pic_rtop {
    float: right;
    width: 20%;
    min-width: 190px;
    max-width: 400px;
    height: auto;
    margin-right: 15px;
    margin-bottom: 10px;
    align-self: flex-end;
    border: 0px solid transparent;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.7s ease;
}

.chronik_pic_rtop:hover {
    width: 80%;
}

.vorstand_pic {
    display: flex;
    justify-content: center;
    max-width: 30%;
    min-width: 190px;
    height: auto;
    max-height: 200px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 15px;
    border: 0px solid transparent;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.7s ease;
}

/*- - - - - - - - - FCV Teams Übersicht - - - - - - - - -*/

.teams_pic img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    display: inline-block;
    justify-content: center;
    width: 95%;
    max-width: 98%;
    min-width: 190px;
    height: auto;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0px solid transparent;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.7s ease;
}

.teams_pic {
    display: inline-block;
    cursor: pointer;
    justify-content: center;
    width: 95%;
    max-width: 98%;
    min-width: 190px;
    height: auto;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0px solid transparent;
    border-radius: 10px;
    transition: all 0.7s ease;
}

.overlay-text {
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: 85%;
    height: auto;
    transform: translate(-50%, -10%);
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 10px;
    display: block;
    opacity: 0;
    z-index: -10;
    transition: all 0.7s ease;
}

.toggle-text:checked~.overlay-text {
    z-index: 10;
    opacity: 1;
}

.toggle-text:checked+.teams_pic .info-text {
    z-index: -11;
    opacity: 0;
}

.info-text {
    position: absolute;
    display: block;
    opacity: 1;
    bottom: 5%;
    left: 5%;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    padding: 5px;
    z-index: 11;
    transition: all 0.7s ease;
}

.img_slider {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    aspect-ratio: 3 / 2;
    width: 100%;
}
.teams_pic img.active {
    opacity: 1;
}
.teams_pic img:not(.active) {
    opacity: 0;
}

body {
    display: flex;
    max-width: 1920px;
    justify-content: center;
    background-image: url(/images/backgrounds/header_bg1_1980x200.png);
    background-repeat: no-repeat;
    background-position: top left;
}

#diashow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;

}

div.msite {
    display: grid;
    grid-template-rows: clamp(100px, 20vw, 180px) auto 1fr auto 50px;
    grid-template-columns: 1fr 4fr 1fr;
    height: 100vh;
    max-width: 1400px;
    grid-template-areas:
        "header         header         header"
        "nav1           nav1           nav1"
        "left-aside     main           right-aside"
        "left-aside     low-content    right-aside"
        "footer         footer         footer";
    grid-gap: 10px;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;

}

header {
    grid-area: header;
    display: flex;
    gap: 10px;
    align-items: center;
    height: clamp(100px, 20vw, 200px);
}

#logo_header {
    width: auto;
    height: clamp(60px, 20vw, 170px);
    max-height: 180px;
    transform: rotate(-25deg);
    vertical-align: middle;
    margin: 10px 10px 10px 10px;
    filter: drop-shadow(4px 10px 6px black);
}

#header_text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: fit-content;
    padding-left: 20px;
    border: #000 1px transparent;
    border-radius: 5px;
    text-shadow: 2px 2px 4px #000000;

}

.h1_header {
    font-size: clamp(1.3em, 4.5vw, 2.7em);
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: var(--font-head);
    color: var(--fcv-gelb);
    /* FCV gelb #fbff03f5 / FCV blau 050396*/
    letter-spacing: 2px;
    text-shadow:
        -2px -2px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

#nav1 {
    grid-area: nav1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    /*background-color: lightgrey; */
    padding: 5px;
}

.nav2 {
    display: flex;
    opacity: 1;
    justify-content: space-around;
    flex-wrap: nowrap;
    gap: 3px;
    width: 100%;
    align-items: center;
    z-index: 20;
    padding: 5px;
}

.butt_menu_small {
    display: none;
    opacity: 0;
    width: 100px;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    border: 0px solid gray;
    background-color: rgba(201, 201, 201, 0.5);

    transition: all 0.5s ease;
}

.butt_con {
    padding: 0px;
}

.nav1_button {
    display: flex;
    width: auto;
    height: auto;
    align-items: center;
    padding: 3px;
    border-radius: 5px;
    border: 0px solid gray;
    background-color: rgba(201, 201, 201, 0.5);

    transition: all 0.5s ease;
}

.nav_button_p {
    margin: 0px;
    font-size: clamp(1.0em, 2.5vw, 1.8em);
    font-family: var(--font-head);
    color: #fbff03f5;
    letter-spacing: 2px;
    text-shadow:
        -2px -2px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    transition: all 0.5s ease;
}

.nav1_icon {
    width: auto;
    height: clamp(15px, 2.5vw, 35px);
    transform: rotate(-20deg);
    margin-right: 8px;
    filter: drop-shadow(2px 2px 2px black);
    transition: transform 0.5s ease;
}

.butt_con.hover-state .nav1_button {
    background-color: #fc0303c5;
}

.butt_con.hover-state-icon .nav1_button .nav1_icon {
    transform: rotate(-10deg) translateY(-10px) translateX(20px);
    cursor: pointer;
}

.butt_con.hover-state-txt .nav1_button .nav_button_p {
    transform: translateX(-10px);
    cursor: pointer;
}

.dropdown1 {
    display: none;
    opacity: 0;
    position: absolute;
    pointer-events: none;
    background-color: rgba(201, 201, 201, 0.8);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 20;
    border-radius: 10px;
    flex-direction: column;
    text-align: left;
    transition: all 0.5s ease;
}

.dropdown1 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(12px, 2vw, 15px);
}

.dropdown1 a:hover {
    border-radius: 10px;
    background-color: #ddd;
}

/*
#butt2:hover #aktusaison,
#butt3:hover #shows,
#butt4:hover #galler,
#butt5:hover #uber_uns 
*/
.butt_con.show-menu .dropdown1 {
    display: block;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;

}

#left-aside {
    grid-area: left-aside;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    min-height: 700px;
    height: auto;
    padding: 10px;
    margin: 5px;
    background-color: rgba(199, 199, 199, 0.308);
    text-align: center;
    border-radius: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

#right-aside {
    grid-area: right-aside;
    min-height: 700px;
    height: fit-auto;
    padding: 10px;
    margin: 5px;
    text-align: center;
    background-color: rgba(199, 199, 199, 0.308);
    border-radius: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

main {
    grid-area: main;
    background-color: transparent;
    text-align: center;
    min-height: 950px;
    height: max-content;
    min-height: fit-content;
    padding: 0px;
    margin: 0px;
}


#low-content {
    grid-area: low-content;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    padding: 10px;
    margin: 5px;
    align-items: center;
    justify-content: center;
    background-color: rgba(199, 199, 199, 0.308);
    border-radius: 10px;
}

footer {
    grid-area: footer;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    padding: 10px;
    margin: 5px;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: rgba(199, 199, 199, 0.308);
    border-radius: 10px;
}

footer P:nth-child(1) {
    flex-basis: 45%;
    margin-left: 20px;
    text-align: left;
}

footer P:nth-child(2) {
    flex-basis: 45%;
    margin-right: 20px;
    text-align: right;
}

.footer p:nth-child(3) {
    flex-basis: 100%;
    text-align: center;
}

/*Gallerie test*/

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 20px;
    background-color: rgba(192, 192, 192, 0.5);
    border: transparent;
    border-radius: 10px;
    margin: 5px 5px;

}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

/*Galerie Navigation*/
/*.albumnav_scroll {
    display: flex;
    align-items: center;
    overflow-x: hidden;
    padding: 20px;
    width: auto;
    min-height: 400px;
    max-width: 910px;
    box-sizing: border-box;
    margin: 0 auto;
}


.scroll_button {
    background-color: #f0f0f0;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 0 10px;
    
    flex-shrink: 1;
}
*/
.scroll_button:hover {
    background-color: #ddd;
}

.albumnav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 10px;
    min-width: 250px;
    /*white-space: nowrap;*/
}

.albumlink {
    display: flex;
    flex-direction: column;
    min-width: 195px;
    max-width: 250px;
    height: auto;
    padding-bottom: 10px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10%;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s;
}

.albumnav img {
    width: 50%;
    height: auto;
    display: block;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.5s;
}

.albumnav p {
    transition: transform 0.5s;
}

.albumlink:hover img {
    transform: scale(1.4) translateY(-50%);
}

.albumlink:hover p {
    transform: scale(1.0) translateY(0%);
}

/*Fotoalbum*/

.ti_album {
    font-size: clamp(1.3em, 4.5vw, 2.0em);
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: var(--font-allg);
    color: black;

    letter-spacing: 1px;
    text-shadow: 3px 2px 1px gray;

}

div.fotosite {
    display: grid;
    grid-template-rows: clamp(100px, 20vw, 180px) auto 1fr auto;
    grid-template-columns: repeat(3, 1fr);
    height: 100vh;
    max-width: 1400px;
    grid-template-areas:
        "header         header         header"
        "main           main           main"
        "low-content    low-content    low-content"
        "footer         footer         footer";
    grid-gap: 10px;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;

}


.pos_foto {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 600px;
    max-height: 1200px;
    height: fit-content;
    padding: 10px 10px;

}

#photo-container {
    position: relative;
    max-width: 100%;

}

#einelfoto {
    position: relative;
    display: inline-block;
    max-width: 100%;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

#einelfoto img {
    top: 0;
    display: block;
    max-width: 800px;
    height: auto;
    max-height: 500px;
}

/* Navigations Pfeile */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    z-index: 10;
    user-select: none;
}

#prev {
    left: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#next {
    right: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}