:root{
    --gold: #d4af37;
    --gold-dark: #b8942e;

    --bg-dark: #0f0f10;
    --text: #ffffff;
    --text-muted: #bdbdbd;
}

.card-base {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 25px;
    transition: 0.3s ease;
    backdrop-filter: blur(10px);
}

.card-base:hover {
    transform: translateY(-6px);
    border-color: rgba(212,175,55,0.35);
}

/* ==========================
 *  RESET
 = *========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background:var(--bg-dark);
    color:var(--text);

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

/* ==========================
 *  HEADER
 = *========================= */

header{
    position:sticky;
    top:0;
    z-index:1000;

    background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("images/menu-background.jpg");

    background-size:cover;
    background-position:center;

    border-bottom:1px solid rgba(255,255,255,0.1);
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

.navbar{
    max-width:1400px;
    margin:auto;

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

    padding:12px 20px;
}

.logo img{
    height:70px;
}

/* ==========================
 *  NAVIGATION
 = *========================= */

.nav-links{
    display:flex;
    gap:12px;
}

.nav-links a{
    text-decoration:none;
    color:white;

    background:var(--gold);
    color:#000;

    padding:12px 18px;
    border-radius:12px;

    font-weight:600;

    transition:0.3s ease;

    box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

.nav-links a:hover{
    background:var(--gold-dark);
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(212,175,55,0.35);
}

.nav-links a.active{
    background:var(--gold-dark);
    box-shadow:0 0 18px rgba(212,175,55,0.35);
}

/* ==========================
 *  MATERIAL HAMBURGER MENU
 * ========================== */

.menu-toggle{
    display:none;

    position:relative;

    width:48px;
    height:48px;

    border:none;
    background:transparent;

    cursor:pointer;

    border-radius:12px;

    transition:0.2s ease;

    -webkit-tap-highlight-color: transparent;
}

/* Hover (Material Feel) */
.menu-toggle:hover{
    background:rgba(255,255,255,0.08);
}

/* Active background */
.menu-toggle.active{
    background:rgba(212,175,55,0.12);
}

/* LINES */
.menu-toggle span{
    position:absolute;
    left:50%;
    transform:translateX(-50%);

    width:24px;
    height:2px;

    background:#ffffff;
    border-radius:2px;

    transition:0.35s ease;
}

/* Position lines */
.menu-toggle span:nth-child(1){
    top:16px;
}

.menu-toggle span:nth-child(2){
    top:23px;
}

.menu-toggle span:nth-child(3){
    top:30px;
}

/* ANIMATION -> X */
.menu-toggle.active span:nth-child(1){
    top:23px;
    transform:translateX(-50%) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    top:23px;
    transform:translateX(-50%) rotate(-45deg);
}

/* ==========================
 *  OVERLAY
 = *========================= */

.menu-overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(6px);

    opacity:0;
    pointer-events:none;

    transition:0.3s ease;

    z-index:900;
}

.menu-overlay.active{
    opacity:1;
    pointer-events:auto;
}

/* ========================= */
/* EVENTS */
/* ========================= */

.event-poster {
    width: 100%;
    margin-bottom: 20px;
}

.event-poster img {
    width: 100%;
    max-width: 700px;

    border-radius: 18px;

    border:
    1px solid rgba(255,255,255,0.08);

    display: block;
    margin: 0 auto;

    transition: 0.3s ease;
}

.event-info p {
    line-height: 1.7;
}

/* ==========================
 *  HERO
 = *========================= */

.hero{
    min-height:90vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
    gap:20px;

    padding:20px;
}

.main-logo{
    width:min(80%,600px);
}

.hero h1{
    font-size:clamp(2rem,5vw,4rem);
    color:var(--gold);

    text-shadow:
    0 0 15px rgba(212,175,55,0.25);
}

/* CTA */
.cta-button{
    background:var(--gold);
    color:#000;

    padding:14px 24px;
    border-radius:12px;

    text-decoration:none;
    font-weight:600;

    transition:0.3s ease;
}

.cta-button:hover{
    background:var(--gold-dark);
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(212,175,55,0.3);
}

/* ==========================
 *  CALL BUTTON
 * ========================== */

.call-button{
    display:inline-block;

    text-decoration:none;
    color:#000;

    background:var(--gold);

    padding:12px 18px;
    border-radius:12px;

    font-weight:600;

    transition:0.3s ease;

    box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

.call-button:hover{
        background:var(--gold-dark);

        transform:translateY(-3px);

        box-shadow:
        0 10px 25px rgba(212,175,55,0.35),
        0 0 18px rgba(212,175,55,0.25);
    }

/* ==========================
 *  SECTIONS
 = *========================= */

.section{
    padding:80px 20px;
    max-width:1100px;
    margin:auto;
    text-align:center;
}

.section h2{
    font-size:2rem;
    margin-bottom:20px;
}

/* ==========================
 *  SERVICES
 = *========================= */

.services{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;

    padding:60px 20px;
}

.service-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);

    padding:25px;
    border-radius:16px;

    text-align:left;

    transition:0.3s ease;
}

.service-card:hover{
    transform:translateY(-6px);
    border-color:rgba(212,175,55,0.4);
}

/* ICON */
.service-icon{
    font-size:2rem;

    width:50px;
    height:50px;

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

    background:rgba(212,175,55,0.15);
    border:1px solid rgba(212,175,55,0.3);

    border-radius:12px;

    margin-bottom:10px;
}

/* TITEL */
.service-card h3{
    color:var(--gold);
    margin-bottom:10px;
}

/* TEXT */
.service-card p{
    color:var(--text-muted);
    line-height:1.6;
    font-size:0.95rem;
}

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

.gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.gallery-item{
    height:180px;
    background:rgba(255,255,255,0.05);
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.1);
}

.gallery-item{
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

.gallery-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:20px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,0.85)
    );

    opacity:0;
    transition:0.3s ease;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

.gallery-overlay h3{
    color:var(--gold);
    margin-bottom:5px;
    font-size:1.2rem;
}

.gallery-overlay p{
    color:white;
    font-size:0.95rem;
}

.gallery-category{
    margin-bottom:60px;
}

.gallery-category h3{
    color:var(--gold);
    margin-bottom:20px;
    text-align:left;
    font-size:1.6rem;
}

.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:15px;
}

.gallery-item{
    height:220px;
    overflow:hidden;
    border-radius:16px;
    cursor:pointer;

    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);

    transition:.3s ease;
}

.gallery-item:hover{
    transform:translateY(-5px);
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:.4s ease;
}

.gallery-item:hover img{
    transform:scale(1.08);
}
/* ==========================
 *  CONTACT PREMIUM
 * ========================== */

.contact-wrapper{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    margin-top:40px;
}

.contact-card{
    text-align:left;
}

.contact-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:10px;

    text-align:left;
    color:var(--text-muted);

    padding:6px 0;
}

.contact-row a{
    margin-left:auto;
}

.contact-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.10);

    border-radius:18px;

    padding:30px;

    backdrop-filter:blur(10px);
}

.contact-card h3{
    color:var(--gold);
    margin-bottom:20px;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.contact-form input,
.contact-form textarea{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.10);

    border-radius:12px;

    padding:14px;
    color:white;
}

.contact-form textarea{
    min-height:180px;
    resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 15px rgba(212,175,55,0.20);
}

.contact-form button{
    background:var(--gold);
    color:#000;

    border:none;
    border-radius:12px;

    padding:14px;
    font-weight:600;

    cursor:pointer;
    transition:0.3s ease;
}

.contact-form button:hover{
    background:var(--gold-dark);
    transform:translateY(-2px);
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-row{
    color:#d0d0d0;
    line-height:1.7;
}

.privacy-link,
.privacy-link:visited {
    color: rgba(212, 175, 55, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.privacy-link:hover {
    color: var(--gold);
}
@media(max-width:900px){

    .contact-wrapper{
        grid-template-columns:1fr;
    }

}

.contact-form input,
.contact-form textarea{
    padding:12px;
    border-radius:10px;

    border:none;
    background:rgba(255,255,255,0.08);
    color:white;
}

/* ==========================
 *  FOOTER (HOLZOPTIK + 3 SPALTEN LAYOUT)
 * = *========================= */
/* ==========================
 *  FOOTER FLEXBOX (BAND STYLE)
 = *========================= */

footer{
    padding:25px;
    background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)),
    url("images/menu-background.jpg");
    background-size:cover;
    background-position:center;
    border-top:1px solid rgba(255,255,255,0.1);
    color:var(--text-muted);
}

/* MAIN CONTAINER */
.footer-container{
    max-width:1400px;
    margin:auto;

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

    gap:20px;
    flex-wrap:wrap;
}

/* LEFT */
.footer-left{
    flex:1;
    min-width:140px;
}

/* CENTER LINKS */
.footer-center{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    justify-content:center;
    flex:2;
}

.footer-center a{
    color:var(--text-muted);
    text-decoration:none;
    transition:0.3s ease;
    font-size:0.95rem;
}

.footer-center a:hover{
    color:var(--gold);
}

/* SOCIAL */
.footer-social{
    display:flex;
    gap:14px;
    justify-content:center;
    flex:1;
}

.footer-social a{
    font-size:1.4rem;
    transition:0.3s ease;
}

.footer-social a:hover{
    transform:translateY(-3px) scale(1.15);
}

/* ICON COLORS */
.footer-social .fa-mastodon{ color:#6364ff; }
.footer-social .fa-camera-retro{ color:#00a6ff; }
.footer-social .fa-facebook{ color:#1877f2; }

.footer-social .fa-instagram{
    background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.footer-social .fa-youtube{ color:#ff0000; }
.footer-social .fa-play{ color:#ff7a00; }

/* RIGHT */
.footer-right{
    flex:1;
    display:flex;
    justify-content:flex-end;
    min-width:120px;
}

.footer-right img{
    height:55px;
    opacity:0.85;
}

/* ==========================
 *  RESPONSIVE
 = *========================= */

@media (max-width:900px){

    .footer-container{
        flex-direction:column;
        text-align:center;
    }

    .footer-right{
        justify-content:center;
    }

    .footer-left,
    .footer-center,
    .footer-social{
        justify-content:center;
    }
}

/* ==========================
 *  RESPONSIVE
 = *========================= */

@media (max-width:900px){

    .menu-toggle{
        display:flex;
    }

    .nav-links{
        display:none;
        flex-direction:column;
        width:100%;
        margin-top:15px;
    }

    .nav-links.active{
        display:flex;
    }

    .services{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:600px){

    .services,
    .gallery{
        grid-template-columns:1fr;
    }

    .logo img{
        height:55px;
    }
}

.section h2{
    color:var(--gold);

    text-shadow:
    0 0 15px rgba(212,175,55,0.15);
    margin-bottom:20px;
    font-size:2rem;
    font-weight:700;
}

#lightbox{
position:fixed;
inset:0;

background:rgba(0,0,0,0.85);

display:none;
justify-content:center;
align-items:center;

z-index:9999;
}

#lightbox img{
max-width:90%;
max-height:90%;
border-radius:12px;
}

.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:0.8s ease;
}

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

@media (max-width:900px){

    /* bessere Abstände */
    .hero{
        padding:80px 15px;
    }

    .section{
        padding:60px 15px;
    }

    /* Navbar sauber stapeln */
    .navbar{
        flex-wrap:wrap;
        gap:10px;
    }

    /* Menü volle Breite */
    .nav-links{
        width:100%;
    }

    .nav-links a{
        width:100%;
        text-align:center;
    }

    /* Footer mobile */
    .footer-container{
        grid-template-columns:1fr;
        gap:10px;
        text-align:center;
    }

    .footer-left,
    .footer-center,
    .footer-right{
        justify-self:center;
    }

    .footer-center{
        flex-wrap:wrap;
        justify-content:center;
    }
}

.footer-right img {
    height: 45px;
}
.gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.gallery-item{
    height:180px;
    overflow:hidden;
    border-radius:12px;
    cursor:pointer;

    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    transition:0.3s ease;
}

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

.section h3{
    var(--gold)
    margin-top:25px;
    margin-bottom:10px;
    font-size:1.2rem;
}

.about-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);

    padding:25px;
    border-radius:16px;

    text-align:left;

    max-width:900px;
    margin:20px auto 0 auto;

    transition:0.3s ease;
}

.about-card h3{
    var(--gold)
    margin-bottom:10px;
}

.about-card p{
    color:var(--text-muted);
    line-height:1.6;
    margin-bottom:12px;
}

.about-card.stage-sweep {
    position: relative;
    overflow: hidden;
}

/* =======================
 *  SPOT 1 (heller Hauptsweep)
 = *====================== */
.about-card.stage-sweep::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -80%;
    width: 60%;
    height: 220%;

    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 40%,
                                rgba(255, 255, 255, 0.22) 50%,
                                rgba(255, 255, 255, 0.05) 60%,
                                transparent 100%
    );

    transform: rotate(20deg);
    animation: sweepMain 10s ease-in-out infinite;
    pointer-events: none;
}

/* =======================
 *  SPOT 2 (weicher Nebenlicht-Sweep)
 = *====================== */
.about-card.stage-sweep::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -90%;
    width: 50%;
    height: 240%;

    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 215, 120, 0.04) 45%,
                                rgba(255, 180, 80, 0.16) 50%,
                                rgba(255, 215, 120, 0.04) 55%,
                                transparent 100%
    );

    transform: rotate(18deg);
    animation: sweepSecondary 14s ease-in-out infinite;
    pointer-events: none;
}

/* =======================
 *  ANIMATIONEN
 = *====================== */

@keyframes sweepMain {
    0% {
        left: -80%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        left: 120%;
        opacity: 0.9;
    }
    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes sweepSecondary {
    0% {
        left: -90%;
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    60% {
        left: 130%;
        opacity: 0.5;
    }
    100% {
        left: 130%;
        opacity: 0;
    }
}

/* Gold / Copper / Orange Text */
.gold-text p,
.gold-text strong {
    background: linear-gradient(
        120deg,
        #8c4a1f,
        #d4af37,
        #ff8c3a,
        #f5d28c,
        #8c4a1f
    );

    background-size: 300% 300%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    animation: copperGoldFlow 10s ease-in-out infinite;
}

@keyframes copperGoldFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.about-list{
    list-style:none;
    padding-left:0;
    margin:15px 0;
}

.about-list li{
    padding:6px 0;
    color:var(--text-muted);
    position:relative;
    padding-left:18px;
}

.about-list li::before{
    content:"✓";
    var(--gold)
    position:absolute;
    left:0;
}

.legal-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:80px 20px;
}

.legal-box{
    max-width:900px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;

    padding:30px;

    text-align:left;
    color:#d0d0d0;
    line-height:1.7;
}

.legal-box h1{
    var(--gold)
    margin-bottom:20px;
}

.legal-box h2{
    var(--gold)
    margin-top:20px;
    font-size:1.1rem;
}

.back-link{
    display:inline-block;
    margin-top:30px;
    var(--gold)
    text-decoration:none;
}

.back-link:hover{
    text-decoration:underline;
}

/* ==========================
 *  LEGAL APPLE STYLE
 = *========================= */

html{
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}

.legal-layout{
    max-width:1400px;
    margin:auto;
    padding:60px 20px;

    display:grid;
    grid-template-columns:260px 1fr;
    gap:40px;
}

.legal-nav{
    position:sticky;
    top:110px;

    display:flex;
    flex-direction:column;
    gap:10px;
}

.legal-nav a{
    text-decoration:none;
    color:white;

    padding:12px 14px;
    border-radius:12px;

    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);

    transition:0.25s ease;
}

.legal-nav a:hover{
    background:rgba(212,175,55,0.15);
    border-color:var(--gold);
}

.legal-content{
    display:flex;
    flex-direction:column;
    gap:60px;
}

.legal-section{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);

    padding:35px;
    border-radius:18px;
}

.legal-section h2{
    color:var(--gold);
    margin-bottom:20px;
}

.legal-section p{
    color:#d0d0d0;
    line-height:1.7;
    margin-bottom:12px;
}

/* MOBILE */
@media(max-width:900px){

    .legal-layout{
        grid-template-columns:1fr;
    }

    .legal-nav{
        position:static;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
    }

    .legal-nav a{
        flex:1 1 160px;
        text-align:center;
    }
}

@media(max-width:900px){

    .legal-layout{
        grid-template-columns:1fr;
    }

    .legal-nav{
        position:static;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
    }

    .legal-nav a{
        flex:1 1 160px;
        text-align:center;
    }
}

/* ==========================
 * GOLD DESIGN OVERRIDE
 * ========================== */

.nav-links a,
.cta-button,
.call-button{
    border:1px solid var(--gold);
    background:rgba(255,255,255,0.02);
    backdrop-filter:blur(3px);
    color:var(--gold);
}

.nav-links a:hover,
.cta-button:hover,
.call-button:hover{
    background:var(--gold);
    color:#000;
}
/* ========================= */
/* BAND */
/* ========================= */

.band-group-image {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.band-group-image img {
    width: 100%;
    max-width: 920px;

    border-radius: 20px;

    border:
    1px solid rgba(255,255,255,0.08);

    object-fit: cover;

    box-shadow:
    0 10px 35px rgba(0,0,0,0.45);
}

.band-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 50px;

    margin-bottom: 40px;
}

.band-row.small {
    gap: 70px;
}

/* ================= BAND ================= */

.band-container {
    max-width: 1200px;
    margin: auto;
}

.band-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.band-row.small {
    gap: 50px;
}

.member {
    width: 280px;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s ease;
    text-align: center;
    backdrop-filter: blur(10px);
}

.member:hover {
    transform: translateY(-8px);
}

.member img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.member p {
    padding: 15px;
    margin: 0;
}

/* ================= MODAL ================= */

.member-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.member-modal.active {
    display: flex;
}

.member-modal-content {
    background: rgba(20, 20, 22, 0.92);
    color: var(--text);
    max-width: 500px;
    width: 100%;
    padding: 30px;
    border-radius: 20px;
    position: relative;

    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
}

.member-modal-content h3 {
    color: var(--gold);
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.member-modal-content p {
    color: var(--text-muted);
    line-height: 1.6;
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 2rem;
    cursor: pointer;
}

.gold-text p,
.gold-text strong {
    background: linear-gradient(
        120deg,
        #8c4a1f,   /* dunkles Kupfer */
        #d4af37,   /* Gold */
        #ff8c3a,   /* dezentes Orange */
        #f5d28c,   /* helles Gold */
        #8c4a1f    /* zurück zu Kupfer */
    );

    background-size: 300% 300%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    animation: copperGoldFlow 8s ease-in-out infinite;
}

@keyframes copperGoldFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ==========================
 *  FOOTER SOCIAL MEDIA
 = *========================= */

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-social a {
    font-size: 1.5rem;
    transition: 0.3s ease;
    text-decoration: none;
}

.footer-social a:hover {
    transform: translateY(-3px) scale(1.1);
}

/* ICON FARBEN */

.footer-social .fa-mastodon {
    color: #6364ff;
}

.footer-social .fa-camera-retro {
    color: #00a6ff;
}

.footer-social .fa-facebook {
    color: #1877f2;
}

.footer-social .fa-instagram {
    background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-social .fa-youtube {
    color: #ff0000;
}

.footer-social .fa-play {
    color: #ff7a00;
}

/* MOBILE FEINSCHLIFF */
@media (max-width: 900px) {

    .footer-social {
        margin: 10px 0;
        justify-content: center;
    }

}

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    font-size: 2rem;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 12px;
    z-index: 10001;
    transition: 0.2s ease;
}

.lb-nav:hover {
    background: rgba(212,175,55,0.3);
}

.lb-prev {
    left: 20px;
}

.lb-next {
    right: 20px;
}

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

#lightbox img {
max-width: 90%;
max-height: 90%;
border-radius: 12px;
}