:root {
    --dark_gray: #202020;
    --blue_accent: #246ABA;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    padding: 0;
    margin: 0;
    overscroll-behavior-y: none;
    overflow-x: hidden;
}

#topbar {
    background-color: var(--dark_gray);
    height: 200px;
    width: 100%;
    position: absolute;
    top: 0;
    text-align: center;
}

#topbar svg {
    margin-top: -45px;
}

#topbar h1 {
    color: white;
    margin-top: 0px;
    font-size: 60px;
    padding-top: 20px;
}


#main {
    min-height: 100svh;
}

#bottom {
    text-align: center;
    margin-bottom: 80px;
    margin-top: 200px;
    z-index: 10;
}

#bottom a {
    font-size: 30px;
    color: var(--blue_accent);
    text-decoration: none;
    border: 2px solid;
    border-radius: 30px;
    padding: 5px 40px 5px 40px;
    transition: 0.3s;
    z-index: 3;
}

#bottom a:hover {
    padding: 5px 60px 5px 60px;
}

#fade-5 {
    background-color: #ffffff;
    margin-bottom: -5%;
    z-index: 0;
}

footer {
    padding-top: 20px;
    padding-bottom: 40px;
    height: auto;
    background-color: var(--dark_gray);
    color: white;
    text-align: center;
}

footer #copyright {
    margin-top: 100px;
    font-size: 25px;
}

footer section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer section h1 {
    font-size: 30px;
}

footer section a {
    text-decoration: none;
    color: white;
    font-size: 30px;
}

footer section div {
    width: 33%;

}

footer #circle {
    position: relative;
    width: 100%;
}

#footer #circle img {
    position: absolute;
    right: 0;
    bottom: -40px;
    width: 400px;
}

footer #supporter {
    height: auto;
    text-align: center;
    margin-top: 120px;
}

footer #supporter h1 {
    font-size: 40px;
}

footer #supporter #holder {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 90%;
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

footer #supporter #holder img {
    height: 100px;
    width: auto;
    padding: 40px;
    transition: .3s;
    scale: 1;
}

footer #supporter #holder img:hover {
    scale: 1.1;
    width: auto;
    padding: 40px;
}

footer #supporter #holder #supp-big {
    height: 200px;
}

/* ==============================
   GALLERY
   ============================== */

#gallery {
    width: 90%;
    margin: 80px auto;
    display: block;           /* Kein Grid auf Gesamtebene */
    margin-top: 400px;
    text-align: center;       /* Überschriften zentrieren */
}

.media-group-wrapper {
    display: block;           
    margin-bottom: 50px;      
    text-align: center;       /* Alles innerhalb der Gruppe zentrieren */
}

.media-group-title {
    font-size: 1.8em;
    margin: 40px 0 20px;
    color: var(--blue_accent);
    border-bottom: 2px solid #202020;
    padding-bottom: 5px;
    display: inline-block;      /* Damit die Border nur so breit ist wie Text */
    width: 90%;                 /* Border ca. 90% der Überschrift */
    text-align: center;         /* Text bleibt zentriert */
    box-sizing: border-box;     /* Padding wird innerhalb der Breite gerechnet */
}


.media-group {
    display: flex;           
    flex-wrap: wrap;         
    justify-content: center;  /* Items horizontal zentrieren */
    gap: 25px;               
}

/* Medien-Item */
.media-item {
    background: #202020;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    flex: 0 1 260px;         /* Mindestbreite 260px, wächst nicht über max */
    max-width: 300px;        /* optional */
}

.media-item img,
.media-item video {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.media-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
}

.more {
    text-align: center;
    width: 40%;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    text-decoration: none;
}

.more h2 {
    font-size: 30px;
}

.more p {
    font-size: 25px;
}

.more a {
    color: blue;
    text-decoration: none;
}

.more .linktree {
    color: blue;
    font-size: 25px;
    border: 2px solid blue;
    border-radius: 20px;
    padding: 5px 20px 5px 20px;
    transition: 0.5s;
}

.more .iframely-embed {
    margin-top: 100px;
}

.more .instagram-media {
    position: relative;
    left: 50%;
    top: 50px;
    transform: translate(-50%);
}

.more .linktree:hover {
    font-size: 30px;
    transition: 0.5s;
}


/* =========================================================
   LIGHTBOX – Instagram-Style mit Infospalte
   ========================================================= */

#lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Aktiv */
#lightbox.active {
    display: flex;
}

/* =============================
   LIGHTBOX WRAPPER
   ============================= */
.lightbox-wrapper {
    width: 95vw;
    height: 95vh;
    max-width: 1800px;

    display: flex;
    background: #111;
    border-radius: 20px;
    overflow: hidden;
}

/* =============================
   MEDIENBEREICH (links)
   ============================= */
.lightbox-media {
    flex: 1 1 auto;
    background: black;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* Maximale Anzeigegröße */
.lightbox-media img,
.lightbox-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
}

/* =============================
   INFOSPALTE (rechts)
   ============================= */
.lightbox-info {
    width: 320px;
    min-width: 260px;
    padding: 20px;
    color: white;
    background: #181818;
    overflow-y: auto;
}

.lightbox-info h2 {
    margin-top: 0;
}

.lightbox-info hr {
    border: none;
    border-top: 1px solid #333;
    margin: 15px 0;
}

/* =============================
   SCHLIESSEN
   ============================= */
#lightbox #lightbox-close {
    position: fixed;
    top: 30px;
    right: 40px;
    font-size: 50px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}


/* =========================================================
   LIGHTBOX ZOOM + DRAG (Desktop only)
   ========================================================= */

/* Standardzustand: zeigt, dass man klicken kann */
.lightbox-media img,
.lightbox-media video {
    cursor: zoom-in;                    /* Maus zeigt Zoom-Symbol */
    transition: transform 0.3s ease;    /* sanftes Zoomen */
}

/* Zoomed state */
.lightbox-media img.zoomed,
.lightbox-media video.zoomed {
    transform: scale(2);                /* 2x Vergrößerung */
    cursor: grab;                       /* Hand für Drag */
    transform-origin: center center;    /* Zoom zentriert */
    user-select: none;                  /* verhindert Textauswahl beim Drag */
}

/* Während Drag: cursor ändern */
.lightbox-media img.dragging,
.lightbox-media video.dragging {
    cursor: grabbing;
    user-select: none;
}

/* Auf kleinen Geräten deaktivieren */
@media only screen and (max-width: 767px) {
    .lightbox-media img,
    .lightbox-media video {
        cursor: default;
        transform: scale(1);
    }
}



@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 850px) {

    #topbar div  {
        width: 100%;
    }

    #topbar {
        height: 340px;
    }

    #topbar svg {
        margin-top: -15px;
    }

    footer section {
        flex-direction: column;
        height: auto;
    }

    footer section div {
        width: 100%;
    }

    footer section h1 {
        font-size: 25px;
    }

    footer section a {
        font-size: 25px;
    }

    footer section p {
        font-size: 25px;
    }

    footer #supporter h1 {
        font-size: 30px;
    }

    footer #supporter #holder img {
        height: auto;
        width: 60%;
    }

/* =============================
       Lightbox Wrapper
       ============================= */
    .lightbox-wrapper {
        flex-direction: column;       /* Video oben, Info unten */
        width: 90vw;                  /* Gesamtbreite kleiner */
        max-width: 400px;             /* optional maximale Breite */
        height: auto;                 /* Höhe automatisch */
        max-height: 95vh;             /* Gesamtmaximalhöhe */
        border-radius: 15px;
        overflow: visible;            /* Kein eigener Scroll */
        margin: 0 auto;               /* zentrieren */
    }

    /* =============================
       Medienbereich
       ============================= */
    .lightbox-media {
        flex: none;                   /* keine Flex-Grow */
        width: 100%;
        height: auto;                 /* Höhe passt sich dem Content an */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lightbox-media img,
    .lightbox-media video {
        max-width: 100%;
        max-height: 100vh;             /* Video kleiner, passt in die Box */
        object-fit: contain;
        cursor: default;
    }

    /* =============================
       Info-Bereich
       ============================= */
    .lightbox-info {
        width: 100%;
        min-width: unset;
        max-height: unset;
        overflow: visible;            /* scrollt nicht eigenständig */
        background: #181818;
        padding: 15px 20px;
        box-sizing: border-box;
    }

    /* =============================
       Lightbox scrollen
       ============================= */
    #lightbox.active {
        overflow-y: auto;             /* ganze Lightbox scrollt vertikal */
        overflow-x: hidden;           /* horizontales Scrollen verhindern */
        align-items: flex-start;      /* oben anfangen */
        padding: 20px 0;
    }

    .more {
        width: 80%;
    }


}