/* =========================================================
   Jagdhornbläsergruppe Mannheim e.V.
   style.css
   Version 3.0
=========================================================*/


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

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;
    font-size:18px;
    line-height:1.8;

    color:#2d312d;

    background:#f8f5ee;

    overflow-x:hidden;

}



/* =========================================================
   FARBPALETTE
=========================================================*/

:root{

    --green:#35543c;

    --green-dark:#24412f;

    --green-light:#dfe8dd;

    --cream:#f8f5ee;

    --cream-dark:#ede8dc;

    --gold:#b89649;

    --gold-light:#d7bf82;

    --white:#ffffff;

    --text:#2d312d;

    --grey:#6b706c;

    --border:#d7d1c4;

    --shadow:
        0 20px 45px rgba(0,0,0,.10);

}



/* =========================================================
   TYPOGRAFIE
=========================================================*/

h1,
h2,
h3,
h4{

    font-family:"Cormorant Garamond",serif;

    color:var(--green-dark);

    line-height:1.15;

    font-weight:700;

}

h1{

    font-size:clamp(3.4rem,7vw,5.8rem);

}

h2{

    font-size:clamp(2.5rem,5vw,3.8rem);

    margin-bottom:30px;

}

h3{

    font-size:2rem;

}

p{

    margin-bottom:24px;

    color:var(--text);

}



.section-title{

    display:inline-block;

    color:var(--gold);

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:1.1rem;

    font-weight:700;
    text-shadow:0 0 1px rgba(0,0,0,.75);

    margin-bottom:18px;

}



/* =========================================================
   CONTAINER
=========================================================*/

.container{

    width:min(1180px,92%);

    margin:auto;

}



/* =========================================================
   LINKS
=========================================================*/

a{

    color:inherit;

    text-decoration:none;

    transition:.35s;

}



/* =========================================================
   BUTTONS
=========================================================*/

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 36px;

    border-radius:999px;

    background:var(--green);

    color:#fff;

    font-weight:600;

    box-shadow:

        0 12px 30px rgba(53,84,60,.22);

}

.button:hover{

    transform:translateY(-4px);

    background:var(--gold);

}

.button-outline{

    background:transparent;

    border:2px solid var(--green);

    color:var(--green);

    margin-left:15px;

}

.button-outline:hover{

    background:var(--green);

    color:#fff;

}



/* =========================================================
   HEADER / NAVIGATION
   Einheitlicher Header für öffentliche Seiten und Mitgliederbereich
========================================================= */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:var(--cream);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:box-shadow .30s ease;
}

header.scrolled{
    background:var(--cream);
    box-shadow:0 12px 32px rgba(0,0,0,.12);
}

header .header-container{
    width:min(1180px,92%);
    min-height:100px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
}

.logo{
    display:flex;
    align-items:center;
    justify-self:start;
}

.logo img{
    height:100px;
    width:auto;
    padding:0;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    display:block;
    transition:transform .30s ease;
}

.logo img:hover{
    transform:scale(1.04);
}

.desktop-nav{
    justify-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    white-space:nowrap;
}

.desktop-nav a,
.header-member-link,
.header-user-logout{
    position:relative;
    display:inline-block;
    font-family:"Inter",sans-serif;
    font-size:1rem;
    line-height:1.2;
    font-weight:600;
    color:var(--green-dark);
    text-decoration:none;
    transition:color .25s ease;
}

.desktop-nav a::after,
.header-member-link::after,
.header-user-logout::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-7px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:width .25s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active,
.header-member-link:hover,
.header-member-link.active,
.header-user-logout:hover,
.header-user-logout:focus-visible{
    color:var(--gold);
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after,
.header-member-link:hover::after,
.header-member-link.active::after,
.header-user-logout:hover::after,
.header-user-logout:focus-visible::after{
    width:100%;
}

.header-user{
    justify-self:end;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
    min-width:0;
    white-space:nowrap;
}

.header-user-info{
    display:inline-flex;
    align-items:center;
    font-family:"Inter",sans-serif;
    font-size:.84rem;
    line-height:1.25;
    font-weight:500;
    color:#77786f;
}

.header-user-info strong{
    color:var(--green-dark);
    font-weight:600;
    margin-left:4px;
}

.menu-toggle{
    display:none;
    width:48px;
    height:48px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    position:relative;
}

.menu-toggle span{
    position:absolute;
    left:9px;
    width:30px;
    height:3px;
    background:var(--green-dark);
    border-radius:3px;
    transition:all .3s ease;
}

.menu-toggle span:nth-child(1){ top:13px; }
.menu-toggle span:nth-child(2){ top:22px; }
.menu-toggle span:nth-child(3){ top:31px; }

.menu-toggle.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

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

.menu-toggle.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}

.mobile-nav{
    position:fixed;
    top:100px;
    left:0;
    width:100%;
    display:flex;
    flex-direction:column;
    padding:12px 25px 20px;
    background:var(--cream);
    box-shadow:0 10px 20px rgba(0,0,0,.12);
    z-index:2000;
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.mobile-nav.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.mobile-nav > a{
    position:relative;
    display:block;
    width:max-content;
    max-width:100%;
    padding:13px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
    font-family:"Inter",sans-serif;
    font-size:1rem;
    line-height:1.2;
    font-weight:600;
    color:var(--green-dark);
    text-decoration:none;
    transition:color .25s ease;
}

.mobile-nav > a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:6px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:width .25s ease;
}

.mobile-nav > a:hover,
.mobile-nav > a.active{
    color:var(--gold);
}

.mobile-nav > a:hover::after,
.mobile-nav > a.active::after{
    width:100%;
}

.mobile-user{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    margin-top:8px;
    padding:12px 0 0;
    border-top:1px solid rgba(0,0,0,.10);
}

.mobile-user:empty{
    display:none;
}

.mobile-user-info{
    display:block;
    padding:0 0 4px;
    font-family:"Inter",sans-serif;
    font-size:.84rem;
    line-height:1.3;
    font-weight:500;
    color:#77786f;
}

.mobile-user-info strong{
    color:var(--green-dark);
    font-weight:600;
    margin-left:4px;
}

.mobile-user-logout{
    position:relative;
    display:inline-block;
    padding:9px 0 8px;
    font-family:"Inter",sans-serif;
    font-size:1rem;
    line-height:1.2;
    font-weight:600;
    color:var(--green-dark);
    text-decoration:none;
    transition:color .25s ease;
}

.mobile-user-logout::after{
    content:"";
    position:absolute;
    left:0;
    bottom:1px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:width .25s ease;
}

.mobile-user-logout:hover,
.mobile-user-logout:focus-visible{
    color:var(--gold);
}

.mobile-user-logout:hover::after,
.mobile-user-logout:focus-visible::after{
    width:100%;
}

body.menu-open{
    overflow:hidden;
}

@media (max-width:900px){
    .logo img{
        height:88px;
    }

    header .header-container{
        min-height:90px;
        display:flex;
        justify-content:space-between;
        gap:0;
    }

    header .desktop-nav,
    header .header-user{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .mobile-nav{
        top:90px;
    }
}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

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

    text-align:center;

    color:#fff;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(248,245,238,.54),
            rgba(248,245,238,.82)
        );

    z-index:1;

}

.hero-fog{

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            transparent 0%,
            rgba(0,0,0,.005) 70%,
            rgba(0,0,0,.01) 100%
        );

    z-index:2;

}

.hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            transparent 0%,
            rgba(0,0,0,.005) 70%,
            rgba(0,0,0,.01) 100%
        );

}

.hero-content{

    position:relative;

    z-index:3;

    width:min(900px,92%);

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    transform:translateY(40px);

    animation:fadeUp .9s ease;

}

/* V68 – Hero-Texte besser lesbar */
.hero .section-title,
.hero p{
    font-weight:700;
}



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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.hero .button{

    background:var(--green);

}

.hero .button:hover{

    background:var(--gold);

}

.hero .button-outline{

    border:2px solid var(--green);

    color:var(--green);

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(8px);

}

.hero .button-outline:hover{

    background:var(--green);

    color:#fff;

}



/* =========================================================
   SCROLL INDICATOR
=========================================================*/

.scroll-down{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    animation:bounce 2.2s infinite;

    z-index:5;

}

.scroll-down i{

    font-size:1.6rem;

    color:#fff;

}



/* =========================================================
   ALLGEMEINE ABSCHNITTE
=========================================================*/

section{

    padding:110px 0;

}

.content-section{

    background:var(--cream);

}

.content-section.alt{

    background:var(--green-light);

}

.section-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}



/* =========================================================
   TEXTBLÖCKE
=========================================================*/

.text-content{

    max-width:760px;

}

.text-content p:last-child{

    margin-bottom:0;

}



/* =========================================================
   KARTEN
=========================================================*/

.card{

    background:#fff;

    border-radius:22px;

    padding:40px;

    box-shadow:var(--shadow);

    border:1px solid rgba(0,0,0,.04);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 28px 55px rgba(0,0,0,.12);

}



/* =========================================================
   BILDER
=========================================================*/

.image-box{

    overflow:hidden;

    border-radius:22px;

    box-shadow:var(--shadow);

}

.image-box img{

    display:block;

    width:100%;

    transition:.6s;

}

.image-box:hover img{

    transform:scale(1.05);

}



/* =========================================================
   ZWEISPALTIGE BEREICHE
=========================================================*/

.two-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



/* =========================================================
   HIGHLIGHT BOX
=========================================================*/

.highlight{

    background:#fff;

    border-left:5px solid var(--gold);

    border-radius:18px;

    padding:35px;

    box-shadow:var(--shadow);

    margin-top:35px;

}

.highlight p{

    margin:0;

}



/* =========================================================
   TRENNLINIE
=========================================================*/

.divider{

    width:110px;

    height:3px;

    background:var(--gold);

    margin:25px auto 0;

    border-radius:999px;

}
/* =========================================================
   PARTNER
=========================================================*/

.partner-section{

    background:var(--cream);

}

.partner-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    margin-top:60px;

}

.partner-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    border:1px solid rgba(0,0,0,.05);

}

.partner-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 30px 55px rgba(0,0,0,.12);

}

.partner-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.partner-card:hover img{

    transform:scale(1.05);

}

.partner-content{

    padding:32px;

}

.partner-content h3{

    margin-bottom:15px;

}

.partner-content p{

    color:var(--grey);

    margin-bottom:25px;

}

.partner-content a{

    color:var(--green);

    font-weight:600;

}

.partner-content a:hover{

    color:var(--gold);

}

.partner-link {
    display: inline-flex;
    margin-top: 20px;
    padding: 11px 22px;
    text-align: center;
    text-decoration: none;
    font-size: .92rem;
}


/* =========================================================
   VEREINSHEIM
=========================================================*/

.vereinsheim{

    background:var(--green-light);

}

.vereinsheim-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:60px;

    align-items:center;

}



/* =========================================================
   GOOGLE KALENDER
=========================================================*/

.calendar-wrapper{

    background:#fff;

    padding:25px;

    border-radius:24px;

    box-shadow:var(--shadow);

    border:1px solid rgba(0,0,0,.05);

}

.calendar-wrapper iframe{

    width:100%;

    min-height:720px;

    border:none;

    border-radius:18px;

    background:#fff;

}



/* =========================================================
   INFOBOXEN
=========================================================*/

.info-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

    margin-top:45px;

}

.info-card{

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.3s;

}

.info-card:hover{

    transform:translateY(-6px);

}

.info-card h3{

    margin-bottom:15px;

}

.info-card p{

    margin:0;

}



/* =========================================================
   KONTAKT
=========================================================*/

.contact-section{

    background:var(--cream);

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.contact-card{

    background:#fff;

    padding:40px;

    border-radius:24px;

    box-shadow:var(--shadow);

}

.contact-card h3{

    margin-bottom:20px;

}

.contact-card p{

    margin-bottom:16px;

}

.contact-card a{

    color:var(--green);

    font-weight:600;

}

.contact-card a:hover{

    color:var(--gold);

}



/* =========================================================
   FORMULARE
=========================================================*/

input,
textarea,
select{

    width:100%;

    padding:16px 18px;

    margin-bottom:18px;

    border-radius:12px;

    border:1px solid var(--border);

    background:#fff;

    font:inherit;

    transition:.3s;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:
        0 0 0 4px rgba(184,150,73,.15);

}

textarea{

    min-height:180px;

    resize:vertical;

}



/* =========================================================
   FOOTER
=========================================================*/

footer{

    background:var(--green-dark);

    color:rgba(255,255,255,.82);

    padding:90px 0 35px;

}

.footer-grid{

    display:grid;

    grid-template-columns:1.2fr 1fr 1fr;

    gap:60px;

    margin-bottom:60px;

}

.footer-logo{

    width:110px;

    padding:10px;

    border-radius:50%;

    background:var(--cream);

    margin-bottom:25px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

}

/* ---------- Texte ---------- */

footer h3,
footer h4{

    color:#fff;

    margin-bottom:20px;

}

footer p,
footer li{

    color:rgba(255,255,255,.82);

    margin-bottom:12px;

    list-style:none;

}

footer a{

    color:rgba(255,255,255,.82);

}

footer a:hover{

    color:var(--gold-light);

}

/* ---------- Untere Zeile ---------- */

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.12);

    padding-top:30px;

    text-align:center;

    font-size:.92rem;

    color:rgba(255,255,255,.60);

}



/* =========================================================
   SOCIAL ICONS
=========================================================*/

.social-links{

    display:flex;

    gap:15px;

    margin-top:20px;

}

.social-links a{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    transition:.3s;

}

.social-links a:hover{

    background:var(--gold);

    color:#fff;

    transform:translateY(-3px);

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

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translate(-50%,0);

    }

    40%{

        transform:translate(-50%,-10px);

    }

    60%{

        transform:translate(-50%,-5px);

    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-in{

    animation:fadeIn 1s ease both;

}



/* =========================================================
   GALERIE
=========================================================*/

.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

}

.gallery img{

    width:100%;

    border-radius:20px;

    display:block;

    box-shadow:var(--shadow);

    transition:.45s;

}

.gallery img:hover{

    transform:scale(1.03);

}



/* =========================================================
   TABELLEN
=========================================================*/

table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

th{

    background:var(--green);

    color:#fff;

    text-align:left;

    padding:18px;

}

td{

    padding:18px;

    border-bottom:1px solid rgba(0,0,0,.06);

}

tr:last-child td{

    border-bottom:none;

}



/* =========================================================
   LISTEN
=========================================================*/

ul{

    padding-left:22px;

}

li{

    margin-bottom:10px;

}



/* =========================================================
   BILDER
=========================================================*/

img{

    max-width:100%;

    height:auto;
	
}

.content-section .image {
    margin-top: 1.5rem;
}


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

@media (max-width:1100px){

    .two-columns,
    .vereinsheim-grid,
    .contact-grid,
    .footer-grid{

        grid-template-columns:1fr;

    }

}


@media (max-width:900px){

    h1{

        font-size:3.2rem;

    }

    h2{

        font-size:2.4rem;

    }

    .hero{

        text-align:center;

        padding:140px 0 90px;

    }

    .hero-logo {
		width: 240px;
		max-width: 70vw;
	}

    section{

        padding:80px 0;

    }

    .partner-grid,
    .gallery,
    .info-grid{

        grid-template-columns:1fr;

    }

}


@media (max-width:600px){

    body{

        font-size:17px;

    }

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

    .button,
    .button-outline{

        width:100%;

        margin:0;

    }

    .hero-buttons{

        flex-direction:column;

    }

    /* Abstand zwischen den untereinander umbrechenden Kontakt-Buttons nur mobil */
    .contact-buttons > .button + .button{

        margin-top:18px;

    }

    .calendar-wrapper{

        padding:12px;

    }

    .calendar-wrapper iframe{

        min-height:620px;

    }

    .partner-card,
    .contact-card,
    .card{

        padding:28px;

    }

    .footer-logo{

        width:90px;

    }

}



/* =========================================================
   SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:var(--cream);

}

::-webkit-scrollbar-thumb{

    background:var(--green);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}



/* =========================================================
   TEXTAUSWAHL
=========================================================*/

::selection{

    background:var(--gold);

    color:#fff;

}



/* =========================================================
   FOKUS
=========================================================*/

:focus-visible{

    outline:3px solid var(--gold);

    outline-offset:3px;

}



/* =========================================================
   GALERIE LIGHTBOX
========================================================= */

.lightbox{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:rgba(18,32,22,.92);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
}

.lightbox.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.lightbox img{
    display:block;
    max-width:min(1100px,92vw);
    max-height:86vh;
    width:auto;
    height:auto;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.lightbox-close{
    position:absolute;
    top:18px;
    right:24px;
    z-index:1;
    color:#fff;
    font-size:48px;
    line-height:1;
    font-weight:300;
    cursor:pointer;
    user-select:none;
    transition:opacity .2s ease, transform .2s ease;
}

.lightbox-close:hover{
    opacity:.7;
    transform:scale(1.05);
}


/* =========================================================
   DRUCKANSICHT
=========================================================*/

@media print{

    header,
    footer,
    .hero,
    .scroll-down,
    .button,
    .button-outline{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

    }

    section{

        padding:20px 0;

    }

}



/* =========================================================
   UTILITIES
=========================================================*/

.text-center{

    text-align:center;

}

.mt-0{

    margin-top:0;

}

.mt-1{

    margin-top:20px;

}

.mt-2{

    margin-top:40px;

}

.mt-3{

    margin-top:60px;

}

.mb-0{

    margin-bottom:0;

}

.mb-1{

    margin-bottom:20px;

}

.mb-2{

    margin-bottom:40px;

}

.mb-3{

    margin-bottom:60px;

}



/* =========================================================
   404
=========================================================*/
.error-number {

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(8rem, 18vw, 14rem);
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    line-height: 1;
    opacity: 0.2;
    user-select: none;

}
/* =========================================================
   ENDE
=========================================================*/

/* =========================================================
   V41 – PARTNER-BUTTONS AB 601PX ZENTRIERT
   Hochformat-Handy bis 600px bleibt unverändert; ab 601px
   wird der Button ebenfalls mittig und unten in der Kachel positioniert.
=========================================================*/
@media (min-width:601px){

    .partner-card{
        display:flex;
        flex-direction:column;
    }

    .partner-content{
        flex:1;
        display:flex;
        flex-direction:column;
    }

    .partner-link{
        align-self:center;
        margin-top:auto;
        margin-bottom:4px;
    }

}