/*
 *  ______   _______ _________ _        _______ __________________
 * (  __  \ (  ____ \\__   __/( (    /|(  ____ \\__   __/\__   __/
 * | (  \  )| (    \/   ) (   |  \  ( || (    \/   ) (      ) (   
 * | |   ) || (__       | |   |   \ | || (__       | |      | |   
 * | |   | ||  __)      | |   | (\ \) ||  __)      | |      | |   
 * | |   ) || (         | |   | | \   || (         | |      | |   
 * | (__/  )| (____/\___) (___| )  \  || (____/\___) (___   | |   
 * (______/ (_______/\_______/|/    )_)(_______/\_______/   )_(   
 * ___  ____ _  _ ____ _    ____ ___  _  _ ____ _  _ ___
 * |  \ |___ |  | |___ |    |  | |__] |\/| |___ |\ |  |
 * |__/ |___  \/  |___ |___ |__| |    |  | |___ | \|  |
 * 
 * www.DeineIT.com, Inh. Max Kern (c) 2016 - 2025
 * developed by Thomas Gutberlet & designed by Franziska Böhm @Böhm-Marketing und Design
 *
 * Author: DeineIT - Thomas Gutberlet
 * Author URI: https://www.DeineIT.com
 * Theme Name: TGTraisa-Theme
 * Text Domain: tgtraisatheme
 * Description: Theme von DeineIT für Turngemeinde Traisa
 * Version: 1.0
 * 
 **/


/* FONTS
 =================================== */

@font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: url('./assets/fonts/myriad-pro-webfont/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
    font-family: 'Myriad Pro Semibold';
    font-style: normal;
    font-weight: normal;
    src: url('./assets/fonts/myriad-pro-webfont/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
    font-family: 'Myriad Pro Bold';
    font-style: normal;
    font-weight: normal;
    src: url('./assets/fonts/myriad-pro-webfont/MYRIADPRO-BOLD.woff') format('woff');
}


:root {
    --TGT_hellblau: #2199cd;
    --TGT_dunkelblau: #003d6a;
    --TGT_menu_dunkelblau: #003e6ade;
}


/* TGTraisa Design
 =================================== */

.margin {
    padding-inline: 7%;
}

.colorTGTdunkelblau {
    color: var(--TGT_dunkelblau) !important;
}

.colorTGThellblau {
    color: var(--TGT_hellblau) !important;
}

.hellblau .wp-element-button {
    background-color: var(--TGT_hellblau) !important;
    color: white !important;
}

.dunkelblau .wp-element-button {
    background-color: var(--TGT_dunkelblau) !important;
    color: white !important;
}

button,
.wp-element-button,
input[type="submit"] {
    width: 100%;
    max-width: fit-content;
    background-color: var(--TGT_hellblau);
    color: white;
    border: none;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    text-decoration: none;

    >p,
    >div {
        padding: 0 10px !important;
    }
}

input[type="submit"] {
    padding: 12px 30px;
}

button:hover,
.wp-element-button:hover,
input[type="submit"]:hover {
    transition: transform 0.2s ease, background-color 0.2s ease;
    transform: scale(1.05);
    cursor: pointer;
    background-color: var(--TGT_dunkelblau) !important;
}


h3.wp-block-heading {
    color: var(--TGT_hellblau);
}

.content .page-title {
    margin-bottom: 20px;
}

.content .page-title h1 {
    font-size: 4em;
}

table {
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
}

a[href^="mailto:"] {
    color: var(--TGT_hellblau);
    text-decoration: underline;
}

a[href^="mailto:"]:before {
    content: "";
    background-image: url("assets/images/pointer_mail.svg");
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

a[href^="mailto:"]:hover {
    color: var(--TGT_dunkelblau);
    text-decoration: none;
    font-variation-settings: "FILL" 1;
}

a[href^="tel:"] {
    color: var(--TGT_dunkelblau);
    text-decoration: underline dotted;
}

a[href^="tel:"]:before {
    content: "";
    background-image: url("assets/images/pointer_phone.svg");
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

a[href^="tel:"]:hover {
    color: var(--TGT_hellblau);
    text-decoration: none;
}


/* Header
 =================================== */

#deineit {
    padding: 0;
}

.nav {
    padding-block: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;


    .logo {
        height: auto;
        max-width: 100px;

        a {
            display: block;
            width: 100%;
            height: 100%;
        }

        img {
            width: 100%;
        }
    }

    .menu-main-menu-container {
        width: fit-content;
        height: fit-content;
    }

    .menu {
        display: flex;
        justify-content: space-between;
        list-style: none;

        a {
            font-family: 'Myriad Pro Semibold';
            color: var(--TGT_dunkelblau);
            text-decoration: none;
            font-size: 1.3vw;
            text-wrap-mode: nowrap;
        }

        a:visited {
            color: var(--TGT_dunkelblau);
        }

        a:hover {
            color: var(--TGT_hellblau);
        }

        >li {
            margin-inline: 1vw;
            padding-bottom: 10px
        }

        a.currentSite {
            color: var(--TGT_hellblau) !important;
        }

        /*     submenu navigation links      */

        >li:has(.sub-menu)>a::after {
            /* Pfeil nach unten */
            content: ' ▼';
            font-size: 0.8em;
            margin-left: 0.3em;
        }

        >li>.sub-menu {
            visibility: hidden;
            position: absolute;
            background-color: var(--TGT_menu_dunkelblau);
            padding-block: 5px;
            padding-inline: 0;
            margin-top: 10px;

            transition-property: visibility;
            transition-delay: 0.1s;

            /* border-bottom-left-radius: 0.5em;
            border-bottom-right-radius: 0.5em; */

            a {
                color: white;
                padding-inline: 10px;
            }

            a:visited {
                color: white;
            }

            a:hover {
                color: var(--TGT_hellblau);
            }

            a:active {
                color: var(--TGT_hellblau);
            }
        }

        >li>.sub-menu li {
            display: grid;
            grid-template-columns: auto
        }

        /**     Show the submenu on hover, focus     **/
        >li:hover .sub-menu,
        >li:active .sub-menu,
        >li:focus .sub-menu {
            visibility: visible;
            height: auto;
        }

        .sub-menu {

            z-index: 1000;

            >li:has(.sub-menu)>a::after {
                /* Pfeil nach unten */
                content: ' ▶';
                font-size: 0.8em;
                margin-left: 0.3em;
            }

            >li>.sub-menu {
                visibility: hidden;
                position: absolute;
                left: 100%;
                top: 0;
                background-color: var(--TGT_menu_dunkelblau);
                padding: 5px 10px;
                transition-delay: 0.1s;

                min-height: 100%;

                display: flex;
                flex-direction: column;

                /* border-top-right-radius: 0.5em;
                border-bottom-right-radius: 0.5em; */

                a {
                    color: white;
                }

                a:hover {
                    color: var(--TGT_hellblau);
                }
            }

            >li>.sub-menu li {
                display: grid;
                grid-template-columns: auto
            }

            /**     Show the submenu on hover, focus     **/
            >li:hover .sub-menu,
            >li:active .sub-menu,
            >li:focus .sub-menu {
                visibility: visible;
                height: auto;
            }
        }
    }

}

#mobile-menu {
    display: none;
}

#mobile-menu-button {
    color: var(--TGT_dunkelblau);
    cursor: pointer;
}

/* Overlay-Styling */
#mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -110%;
    /* Startposition außerhalb des Bildschirms */
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.8); */
    /* Halbtransparenter Hintergrund */
    transition: right 0.3s ease-in-out;
    z-index: 9999;
    /* Über andere Inhalte legen */
}

/* Menüinhalt */
#menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 90%;
    /* Breite des Menüs */
    height: 100%;
    background: var(--TGT_dunkelblau);
    /* Hintergrundfarbe des Menüs */
    padding-top: 50px;
    padding-left: 20px;
    overflow-y: auto;
    /* Scrollbar, falls der Inhalt größer als das Fenster ist */
    border-top-left-radius: 2em;

    background-image: url('./assets/images/logo.png');
    background-repeat: no-repeat;
    background-position: bottom+60px center;
    background-size: 90%;

    .menu {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        color: white;
        padding-left: 20px;
        margin-bottom: 100px;

        >li {
            margin-top: 10px;

            /* >a::before{
                content: '>  ';
                color: white;
            } */
        }

        a {
            color: white;
            font-size: 2em;
            white-space: nowrap;
        }

        .sub-menu {
            margin-left: 20px;
            visibility: visible;
            position: unset;
            background-color: unset;
            padding: unset;
            transition-property: unset;
            transition-delay: unset;

            a {
                font-size: 1.5em;
            }
        }
    }

    #mobile-close-menu-button {

        color: white;
        position: absolute;
        /* Positioniert das Element relativ zu #menu-content */
        top: 20px;
        /* Abstand von oben */
        right: 20px;
        /* Abstand von rechts */
        cursor: pointer;
        /* Zeigt an, dass es klickbar ist */
    }
}

/* Sichtbarer Zustand des Overlays */
#mobile-menu-overlay.open {
    right: 0;
    /* Schiebt das Overlay ins Sichtfeld */
}




.header-image {
    position: relative;
    width: 100%;
    height: 21.5vw;
    /* 42:9 Aspect Ratio (9/42 * 100) */
    min-height: 30%;
    overflow: hidden;

    /* opacity: 0; */
    transition: opacity 0.5s ease, transform 0.5s ease;


    .onlyThumbnail {
        width: 100%;
        height: 100%;

        img {
            position: absolute;
            top: 50%;
            right: 50%;
            width: 100%;
            height: auto;
            min-height: 100%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
    }

    .splide__track {
        height: 100%;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li {
        list-style: none;
        text-align: center;
    }

    img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: auto;

        min-height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;

        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    img.loaded {
        opacity: 1;
    }

    #logoInImage {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 800;
        align-items: center;
        row-gap: 20px;

        img {
            all: unset;
            height: 90%;
            max-height: 30%;
            min-height: 120px;
        }
    }

    #main-slider {
        width: 100%;
        height: 100%;
    }
}

/* Stil für den Medieneditor */
.wp-crop-editor {
    border: 2px solid #2199cd;
    border-radius: 5px;
    margin: 10px 0;
}



#info-banner {
    padding: 5px;
    margin-top: 15px;
    text-align: center;
    border-radius: 5px;

    p {
        font-weight: bold;
    }
}

#info-banner.high {
    background-color: red;
    color: white;
}

#info-banner.middle {
    background-color: yellow;
    color: black;
}

#info-banner.low {
    background-color: #e5e5e5;
    color: black;
}






/* Body
 =================================== */

.content {

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;

    h1,
    h2 {
        color: var(--TGT_dunkelblau);
        font-family: 'Myriad Pro Regular';
        margin: 0;
        letter-spacing: 0;
        line-height: normal;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 1.8em;
    }

    p {
        letter-spacing: 0;
        line-height: 25px;
        margin-block: 5px;
        width: 90%;
    }

}

.loaded {
    opacity: 1;
    transform: translateY(0);
}

article {
    margin-block: 50px;
}

.single-title {
    margin-bottom: 20px;
}

/* Aktuelles */
.content {
    #news-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(21vw, 1fr));
        gap: 0.5vw;


        a:link {
            color: inherit;
            text-decoration: none;
        }

        a:visited {
            color: inherit;
        }

        .news-post {
            margin-top: 20px;
            margin-bottom: 15px;
            margin-inline: 5px;
            overflow: hidden;
            transition: transform 0.5s ease, background-color 0.2s ease;
        }

        .news-post:hover {
            transition: transform 0.2s ease, background-color 0.2s ease;
            transform: scale(1.05);
        }

        .post-image {
            position: relative;
            width: 100%;
            /* 16:9 Verhältnis (9 / 16 * 100) */
            padding-top: 56.25%;
            overflow: hidden;

            background-color: rgba(170, 170, 170, 0.3);

            transition: transform 0.2s ease, background-color 0.2s ease;

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .post-image.portrait {
            height: fit-content;
            width: 100%;
            justify-self: anchor-center;
            /* 9:16 Verhältnis (16 / 9 * 100) */
            padding-top: 177.77%;
        }

        .post-infos {
            margin-top: 5px;
            font-size: 0.8em;
            font-family: 'Myriad Pro Regular';
        }

        .post-title {
            font-size: 1em;
            font-family: 'Myriad Pro Regular';
            color: var(--TGT_dunkelblau);
            font-weight: bold;
        }

        .post-subtext {
            font-size: 0.8em;
        }
    }

    #news-gallery.news-masonry {
        display: block;

        .news-post {
            width: 32%;
            margin-bottom: 20px;
            float: left;
        }

        @media (max-width: 2000px) {
            .news-post {
                width: 48%;
            }
        }

        @media (max-width: 1150px) {
            .news-post {
                width: 100%;
            }
        }
    }
}


/* Front Page Spezials
 =================================== */

.content .frontPage {

    .frontPageText {
        margin-block: 2em;
    }

    h1,
    h2 {
        color: var(--TGT_hellblau);
    }

    .section-header h1, .section-header h2 {
        color: var(--TGT_dunkelblau);
    }

    .news,
    .events,
    .subscription {
        margin-top: 3em;
    }

    .section-header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        margin-block: 1em;

        h3 {
            margin: 0;
        }

        a:link {
            color: var(--TGT_hellblau);
            text-decoration: none;
        }

        a:visited {
            color: var(--TGT_hellblau);
        }

        a:hover {
            color: var(--TGT_dunkelblau);
        }
    }

    .news-slider {
        background-color: rgba(170, 170, 170, 0.3);
        width: 100%;
        height: auto;


        a:link {
            color: inherit;
            text-decoration: none;
        }

        a:visited {
            color: inherit;
        }

        #news-gallery {

            .news-post {
                margin-top: 20px;
                margin-bottom: 15px;
                margin-inline: 5px;
                overflow: hidden;
            }

            .post-image {
                position: relative;
                width: 100%;
                /* 16:9 Verhältnis (9 / 16 * 100) */
                padding-top: 56.25%;
                overflow: hidden;

                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .post-image.portrait {
                padding-top: 56.25% !important;

                img {
                    height: 100%;
                    width: auto;
                    justify-self: anchor-center;
                }
            }

            .post-infos {
                margin-top: 5px;
                font-size: 0.8em;
                font-family: 'Myriad Pro Regular';
            }

            .post-title {
                font-size: 1em;
                font-family: 'Myriad Pro Regular';
                color: var(--TGT_dunkelblau);
                font-weight: bold;
            }

            .post-subtext {
                font-size: 0.8em;
            }
        }
    }

    .events {

        .calender {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;

            background-color: #f0f0f0;

            .month {
                h3 {
                    margin: 0;
                    padding-block: 10px;
                    text-align: center;
                    background-color: var(--TGT_dunkelblau);
                    color: white;
                }
            }

            .event,
            .product {
                width: 100%;
                height: 200px;

                background-size: cover;
                background-repeat: no-repeat;
                background-position: top center;
                background-blend-mode: lighten;

                display: flex;
                align-items: flex-end;
                justify-content: space-between;

                .infos {
                    width: auto;
                    max-width: 90%;
                    padding: 5% 10%;

                    background-color: var(--TGT_dunkelblau);
                    color: white;
                    border-top-right-radius: 1em;

                    h4 {
                        width: auto;
                        margin: 0;
                        font-size: 0.8em;
                    }

                    p {
                        width: auto;
                        margin: 0;
                        font-size: 0.7em;
                    }
                }

                svg {
                    visibility: hidden;
                    width: auto;
                    height: 50px;
                    padding-right: 5px;
                    padding-left: 5px;
                    background-color: var(--TGT_dunkelblau);
                    border-top-left-radius: 0.5em;
                    border-bottom-left-radius: 0.5em;
                    color: white;
                    align-self: center;
                }
            }

            .event:hover,
            .product:hover {
                svg {
                    visibility: visible;
                }
            }
        }

        :link {
            color: inherit;
            text-decoration: none;
        }
    }

    .subscription {

        .subs-buttons {
            margin-bottom: 3em;

            button {
                margin-top: 1em;
            }
        }
    }

    .sponsors {
        margin-block: 3em;

        .sponsor-slider {
            width: 100%;

            .sponsor-logo {
                display: flex !important;
                align-items: center;
                justify-content: center;
                padding: 10px;
                box-sizing: border-box;
            }

            img {
                max-height: 200px;
                width: auto;
                height: auto;
                object-fit: contain;
            }
        }

        .draggable:hover{
            cursor: grab;
        }
    }

}


/* Abteilungen & Shops
 =================================== */

#galleryReiter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 10px;
    margin-block: 10px;

    #galleryBanner {
        width: 32%;
        height: auto;
        overflow: hidden;
        text-decoration: none;
        transition: transform 0.3s ease-in-out;
        /* Sanfte Übergänge */

        img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }

        h2 {
            color: var(--TGT_hellblau);
        }

        a:link {
            color: inherit;
            text-decoration: none;
        }

        a:visited {
            color: inherit;
        }
    }

    #galleryBanner:hover {
        cursor: pointer;
        /* Zeigt den "progress"-Cursor */
        transform: scale(1.02);
        /* Bild wird um 5% größer */
    }
}

/* Mitgliedschaft
 =================================== */

.mitglied-preise,
.vorstand {
    table {
        max-width: 1200px;

        td {
            padding: unset;
            padding-right: 40px;
            border: none;
        }

        strong {
            font-size: 1.2em;
            color: var(--TGT_hellblau);
        }
    }
}



/* Footer
 =================================== */

footer {
    position: static;
    bottom: 0;
    left: 0;
    width: 100%;
    flex-shrink: 0;
}

.footer {
    width: 100%;
    height: auto;
    margin: 0;
    background-color: var(--TGT_dunkelblau);
    color: white;
    align-content: center;

    :link {
        color: inherit;
    }

    :visited {
        color: inherit;
    }

    a:hover {
        color: var(--TGT_hellblau);
    }

    #footer-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 40px;
        margin-top: 30px;
        margin-bottom: 10px;

        >div {
            margin-inline: 0;
        }
    }

    .links {

        .intern {
            display: flex;
            flex-direction: column;

            a {
                text-decoration: none;
            }
        }

        .social {
            margin-top: 10px;

            a {
                display: inline-block;
                text-align: center;
                width: 30px;
                height: 30px;
                /* background-color: rgb(58, 58, 58); */
                border-radius: 10px;
            }

            img {
                height: 100%;
            }
        }


    }

    .infos {
        font-size: 0.7em;

        p {
            line-height: inherit;
            margin-top: 0;
        }

        a[href^="mailto"]:before {
            background-image: url("assets/images/pointer_mail_white.svg");
            background-color: transparent;
        }

        a[href^="tel"]:before {
            background-image: url("assets/images/pointer_phone_white.svg");
            background-color: transparent;
        }
    }

    .newsletter {
        background-color: white;
        height: fit-content;

        .tnp {
            width: 100%;
            min-width: 20vh;
            max-width: unset;
            height: 100%;

            background-color: #29648e;
            margin: 0;

            form {
                padding: 5px;
            }

            label {
                font-size: 1em;
            }

            .tnp-field-email {
                margin-bottom: 0.3em;
            }

            .tnp-email {
                width: 100%;
                height: 35px;
                padding: 5px 10px;
                border: solid 1px var(--TGT_hellblau);
                font-size: 1.4em;
            }

            .tnp-email::placeholder {
                font-size: 0.5em;
                color: black;
                font-weight: bold;
            }

            .tnp-field-button {
                margin: 0;
                width: 75%;
                height: 30px;

                input {
                    width: 100%;
                    height: 100%;
                    font-size: 1.1em;
                    padding: 0;
                    color: white;
                    background-color: var(--TGT_hellblau);
                }

                input:hover {
                    cursor: pointer;
                    background-color: var(--TGT_dunkelblau);
                }
            }
        }
    }

    .logo {
        display: flex;
        justify-content: center;

        img {
            width: auto;
            height: 100px;
        }

        >div {
            margin-left: 10px;
        }

        h1,
        h2 {
            margin-block: -10px;
            font-size: 1.5em;
            font-weight: normal;
        }

        h1 {
            font-weight: bold;
        }

        button {
            margin-top: 20px;

            p {
                padding-inline: 30px;
                margin-block: 5px !important;
                font-size: 1.1em;
            }
        }
    }

    .copyright {
        font-size: 0.7em;
        text-align: center;
        margin-block: 10px 5px;
    }
}

/* Cookie Consent
 =================================== */

.cookie-consent {
    position: relative;
}

.cookie-consent__bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10001;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;

    background-color: var(--TGT_dunkelblau);
    color: white;
    padding: 12px 7%;
    box-sizing: border-box;

    p {
        margin: 0;
        font-size: 0.9em;
    }

    a {
        text-decoration: underline;
    }
}

.cookie-consent.is-accepted .cookie-consent__bar {
    display: none;
}

.cookie-consent__mini {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10001;
}

.cookie-consent:not(.is-accepted) .cookie-consent__mini {
    display: none;
}

.cookie-consent__mini-handle {
    background-color: var(--TGT_dunkelblau);
    color: white;
    border: 1px solid var(--TGT_hellblau);
    border-radius: 10px;
    padding: 10px 14px;
    width: fit-content;
    margin-left: auto;
    cursor: pointer;
}

.cookie-consent__mini-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 280px;
    max-width: calc(100vw - 40px);

    background-color: var(--TGT_dunkelblau);
    color: white;
    border: 1px solid var(--TGT_hellblau);
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;

    p {
        margin: 0 0 10px 0;
        font-size: 0.9em;
    }
}

.cookie-consent__mini:hover .cookie-consent__mini-panel,
.cookie-consent__mini:focus .cookie-consent__mini-panel,
.cookie-consent__mini:focus-within .cookie-consent__mini-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cookie-consent button {
    background-color: var(--TGT_hellblau);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
}

/* Error Pages */

#errorpage {
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-block: 10vh;

    img {
        height: 100%;
        width: auto;
        max-width: 25%;
    }

    h1 {
        font-size: 3vw;
        max-width: 30%;
    }
}


/* META
 =================================== */

html {
    /* overflow-y: scroll; */

    body {
        margin: 0;
        padding: 0 20px;
        border: 0;
        font-family: 'Myriad Pro Regular', sans-serif;
        line-height: 1.5;
        letter-spacing: calc(50em / 1000);

        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .content,
    main {
        flex: 1 0 auto;
    }

    letter-spacing: calc(50em / 1000);
}

img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;
}

::selection {
    background-color: rgb(217, 217, 217);
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Myriad Pro Regular', sans-serif;
}

.grid-2 {
    display: grid;
    grid-template-columns: 50% 50%;
}

.grid-3 {
    display: grid;
    grid-template-columns: 33% 33% 33%;
}

.grid-4 {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.flex {
    display: flex;
}

.flex-grid {
    display: flex;
    flex-flow: wrap;
}

.col-1 {
    flex: 0 0 8.3333%
}

.col-2 {
    flex: 0 0 16.6666%
}

.col-3 {
    flex: 0 0 25%
}

.col-4 {
    flex: 0 0 33.3333%
}

.col-5 {
    flex: 0 0 41.6666%
}

.col-6 {
    flex: 0 0 50%
}

.col-7 {
    flex: 0 0 58.3333%
}

.col-8 {
    flex: 0 0 66.6666%
}

.col-9 {
    flex: 0 0 75%
}

.col-10 {
    flex: 0 0 83.3333%
}

.col-11 {
    flex: 0 0 91.6666%
}

.col-12 {
    flex: 0 0 100%
}

[class*="col-"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.max-width-400 {
    max-width: 400px !important;
}


/* CONTAINERS
 =================================== */

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Mobile Ansicht */
@media (max-width: 1200px) {
    #menu-main-menu {
        display: none;
    }

    #mobile-menu {
        display: block;
    }

    /* Platz für den fixierten Header */
    body {
        padding-top: 100px;
    }

    .content .frontPage .news-slider #news-gallery {
        grid-template-columns: 50% 50%;
    }

    .post-infos {
        font-size: 0.6em !important;
    }

    .post-subtext {
        display: none;
    }

    .content .frontPage .events .calender {
        grid-template-columns: 50% 50%;
    }

    .header .margin {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: white;
        z-index: 9000;
        /* border-bottom: 2px solid var(--TGT_dunkelblau); */
        /* box-shadow: 0 2px 10px var(--TGT_dunkelblau); */
    }

    .header .header-image {
        margin-top: 86px;
        height: 42vw;
    }

    .nav {
        padding-block: 10px;

        #menu-content .menu {
            padding-left: 0;
        }

        .logo img {
            max-height: 60px;
        }
    }

    #galleryReiter #galleryBanner {
        width: 100%;
    }

}

@media (max-width: 850px) {
    .content .frontPage .news-slider #news-gallery {
        grid-template-columns: 100%;
    }
}

@media (max-width: 768px) {
    .header .header-image {
        height: 60vw;
    }
}

@media (max-width: 480px) {
    .footer .logo {
        display: block;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}


@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

@media (min-width: 1800px) {
    .margin {
        padding-inline: 15%;
    }
}

@media (max-width: 2050px) {
    .nav .menu a {
        font-size: 1vw;
    }
}

@media (max-width: 1800px) {
    .nav .menu a {
        font-size: 1.3em;
    }
}

@media (min-width: 2050px) {
    .nav .menu a {
        font-size: 1.3em;
    }
}

@media (max-width: 1580px) {
    .nav .menu a {
        font-size: 1.3vw;
    }
}



.container-wider,
.spotlight-instagram-feed {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {

    .container-wider,
    .spotlight-instagram-feed {
        width: 1050px;
    }
}

@media (min-width: 992px) {

    .container-wider,
    .spotlight-instagram-feed {
        width: 1270px;
    }
}

@media (min-width: 1200px) {

    .container-wider,
    .spotlight-instagram-feed {
        width: 1470px;
    }
}


/* ANIMATIONS
 =================================== */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.delay-50ms {
    -webkit-animation-delay: 50ms;
    animation-delay: 50ms;
}

.animated.delay-100ms {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
}

.animated.delay-150ms {
    -webkit-animation-delay: 150ms;
    animation-delay: 150ms;
}

.animated.delay-200ms {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
}

.animated.delay-250ms {
    -webkit-animation-delay: 250ms;
    animation-delay: 250ms;
}

.animated.delay-300ms {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}

.animated.delay-350ms {
    -webkit-animation-delay: 350ms;
    animation-delay: 350ms;
}

.animated.delay-400ms {
    -webkit-animation-delay: 400ms;
    animation-delay: 400ms;
}

.animated.delay-450ms {
    -webkit-animation-delay: 450ms;
    animation-delay: 450ms;
}

.animated.delay-500ms {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
}

.animated.delay-600ms {
    -webkit-animation-delay: 600ms;
    animation-delay: 600ms;
}

.animated.delay-700ms {
    -webkit-animation-delay: 700ms;
    animation-delay: 700ms;
}

.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
}

.animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}

.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

@media (print),
(prefers-reduced-motion: reduce) {
    .animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 15px, 0);
        transform: translate3d(0, 15px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 15px, 0);
        transform: translate3d(0, 15px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* @-webkit-keyframes fadeInUpCookies {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(-50%, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes fadeInUpCookies {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 100%, 0);
        transform: translate3d(-50%, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}

@-webkit-keyframes fadeOutDownCookies {
    from {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(-50%, 100%, 0);
    }
}

@keyframes fadeOutDownCookies {
    from {
        opacity: 1;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 100%, 0);
        transform: translate3d(-50%, 100%, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.fadeInUpCookies {
    -webkit-animation-name: fadeInUpCookies;
    animation-name: fadeInUpCookies;
}

.fadeOutDownCookies {
    -webkit-animation-name: fadeOutDownCookies;
    animation-name: fadeOutDownCookies;
} */