/* English-only comment: Variant B (Soft Cards). Calm cards, no lines/gradients, gentle depth. */

:root {
    --bg: #f2f3e9;
    --text: #313803;
    --muted: rgba(49, 56, 3, .70);

    --surface: rgba(255, 255, 255, .70);
    --surface2: rgba(255, 255, 255, .55);

    --radius: 18px;
    --shadow: 0 8px 20px rgba(246, 162, 30, .14);

    --container: 1120px;
    --pad: 18px;
    --section-pad-y: 56px;

    --grid-gap: 16px;

    --accent: rgb(246, 162, 30);
    --accent-text: rgba(246, 162, 30, .85);

    --footer-pad-y: 16px;
    --footer-content: 40px;
    --footer-height: calc(var(--footer-content) + (var(--footer-pad-y) * 2));

    --pdf-logo-color: rgb(244, 3, 35);

    /* announcement orange */
    --orange: rgb(246,162,30);
    --orange-ink: rgba(246,162,30,.92);
    --orange-bg: rgba(246,162,30,.12);
    --orange-border: rgba(246,162,30,.35);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
    margin:0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    line-height:1.6;
    padding-bottom: 0;
}

main{
    flex: 1 0 auto;
}

.main-nav{
    display: flex;
    align-items: center;
}

/* Hamburger button */
.menu-toggle{
    border: none;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#nav-menu{
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Mobile default: menu hidden */
@media (max-width: 800px){
    /* Hide desktop actions on small screens (optional) */
    .nav-actions{ display: none; }

    .main-nav{
        margin-left: auto;
    }

    #nav-menu{
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;

        display: none; /* becomes block when active */
        background: rgba(242,243,233,.96);
        backdrop-filter: blur(10px);

        padding: 10px var(--pad) 14px;
        border-top: 1px solid rgba(49,56,3,.16);
        box-shadow: 0 18px 40px rgba(49,56,3,.10);
    }

    #nav-menu.active{
        display: grid;
        gap: 8px;
    }

    #nav-menu a{
        display: block;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255,255,255,.72);
        box-shadow: var(--shadow);
        color: var(--muted);
        text-decoration: none;
        font-weight: 750;
    }

    #nav-menu a:hover{
        background: rgba(255,255,255,.88);
        color: var(--text);
    }

    #nav-menu .nav-divider{
        height: 1px;
        background: rgba(49,56,3,.14);
        border-radius: 999px;
        margin: 6px 0;
    }

    #nav-menu .nav-pdf{
        font-weight: 850;
    }
}

/* Desktop: menu inline, hamburger hidden */
@media (min-width: 800px){
    .menu-toggle{ display: none; }

    #nav-menu{
        display: flex;
        gap: 10px;
        align-items: center;
    }

    #nav-menu a{
        padding: 8px 10px;
        border-radius: 12px;
        color: var(--muted);
        text-decoration: none;
        font-weight: 650;
    }

    #nav-menu a:hover{
        background: rgba(255,255,255,.70);
        color: var(--text);
        text-decoration: none;
    }

    #nav-menu .nav-divider,
    #nav-menu .nav-pdf{
        display: none;
    }
}

a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;}

.container{
    width:min(var(--container),calc(100% - 2*var(--pad)));
    margin:0 auto;
}

.skip-link{
    position:absolute;
    left:-999px;
    top:10px;
    padding:10px 12px;
    background:#fff;
    color:#000;
    border-radius:10px;
}
.skip-link:focus{left:12px;}

/* English-only comment: Unified PDF download button */

.pdf-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;
    border-radius: 14px;          /* same rounding as other buttons */

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

    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--accent-text);

    border: 1.5px solid var(--accent); /* always orange */
}

.pdf-btn:hover{
    text-decoration: none;
}

/* English-only comment: Inline SVG PDF icon */

.pdf-icon{
    width: 28px;
    height: 28px;
    color: var(--pdf-logo-color);   /* <- this drives stroke because of currentColor */
}

/* Style the text inside SVG */
.pdf-icon text{
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .04em;
    fill: currentColor;
}


/* Header */
.site-header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(242,243,233,.92);
    backdrop-filter:blur(10px);
    box-shadow: 0 1px 0 rgba(246,162,30,.30);
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 0;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:850;
}
.brand-mark{
    width:34px;height:34px;
    border-radius:12px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.85);
    box-shadow: var(--shadow);
}

.announce-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 16px 20px;
    border-radius: var(--radius);

    background: rgba(246,162,30,.16);
    border: 1px solid rgba(246,162,30,.40);

    color: rgba(246,162,30,.95);
    box-shadow: var(--shadow);

    font-weight: 700;
}

.announce-text{
    font-size: 1.5rem;
    line-height: 1.8;
}

/* Right aligned action button */
.announce-action{
    flex-shrink: 0;

    padding: 10px 16px;
    border-radius: 999px;

    background: var(--surface2);
    border: 1px solid rgba(246,162,30,.55);

    color: rgba(246,162,30,.95);
    text-decoration: none;
    font-weight: 800;

    transition: transform 150ms ease, background 150ms ease;
}

.announce-action:hover{
    transform: translateY(-1px);
    background: rgba(246,162,30,.32);
    text-decoration: none;
}

/* Hero: clean, with a soft card feel */
.hero{
    position:relative;
    overflow:hidden;
    box-shadow: 0 1px 0 rgba(246,162,30,.30);
}

.hero .announce-bar{
    backdrop-filter: blur(6px);
}

.hero-announce{
    background: var(--surface2);
    box-shadow: 0 18px 42px rgba(246,162,30,.22);
    border-radius: var(--radius);
    border-left: 4px solid rgba(246,162,30,.75);
    padding-left: 16px; /* compensate border */
    border-right: 4px solid rgba(246,162,30,.75);
    padding-right: 16px; /* compensate border */
}

.hero-announce[hidden]{
    display: none !important;
}

.hero-title{
    display: flex;
    flex-direction: column;
    margin-top: var(--section-pad-y);
    gap: 12px; /* small typographic spacing between h1 and lead */
}

.hero-bg{
    position:absolute; inset:0;
    background:url("assets/img/hero.jpg") center/cover no-repeat;
    filter:saturate(.95) contrast(.95);
    opacity:.25;
}
.hero-inner{
    position:relative;
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
}

.hero-stack{
    display: flex;
    flex-direction: column;
    gap: var(--section-pad-y);           /* always 56px between elements */
}

.kicker{
    display:inline-block;
    margin:0 0 12px;
    padding:8px 12px;
    border-radius:999px;
    background:var(--surface);
    box-shadow:var(--shadow);
    color:var(--muted);
    font-weight:750;
    font-size:.95rem;
}

h1{
    margin:0 0 12px;
    font-size:clamp(2.0rem,4.2vw,3.2rem);
    letter-spacing:-.02em;
    line-height:1.12;
}
.lead{
    margin:0;
    color:var(--muted);
    font-size:1.15rem;
    max-width:64ch;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 14px;
    border-radius:14px;
    background:var(--surface);
    box-shadow:var(--shadow);
    font-weight:850;
    transition:transform 150ms ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn.primary{ background:rgba(255,255,255,.85); }
.btn.ghost{
    background:rgba(255,255,255,.55);
    color:var(--muted);
}

/* Sections */
.section{
    padding: calc(var(--section-pad-y) * 2) 0;
}

.section-muted{ background:transparent; }

#services{
    padding-top: calc(var(--section-pad-y) * 2);
    padding-bottom: var(--section-pad-y);
}

/* Soft cards everywhere */
.grid{
    display:grid;
    grid-template-columns:1fr;
    gap: var(--grid-gap);
}

.card{
    background:var(--surface2);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
    transition:transform 160ms ease;
}
.card:hover{ transform:translateY(-2px); }

.card h2{
    font-size:1.1rem;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 12px;}

.card p{ margin:0; color:var(--muted); }

.card h2::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;
    background: rgba(49,56,3,.28);
}

/* Gallery tiles as cards */
.gallery{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}

.img-card{
    margin:0;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--surface2);
    box-shadow:var(--shadow);
}

.img-card img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
}


.section-headline{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

#impressum .section-headline{
    margin-bottom: var(--section-pad-y);
}

#impressum .section-headline h2{
    margin-top: var(--section-pad-y);
}


.section-headline h1{
    margin: 0;
}

.section-membership-question{
    padding-top: var(--section-pad-y);
}

.headline-actions{
    display: flex;
    gap: 8px;          /* Abstand zwischen Buttons */
    align-items: center;
}

/* Reuse announcement button styling */
.section-headline .announce-btn{
    white-space: nowrap;
}

/* English-only comment: Timeline with year labels on the left + card-like content */

.timeline{
    position: relative;
    width: min(980px, 100%);
    margin: 0 auto;
}

.timeline-intro{
    text-align: center;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: var(--section-pad-y);
}

.timeline-intro img{
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.timeline-intro-text h2{
    margin: 0 0 6px;
}

.timeline-intro-text p{
    margin: 0;
    color: var(--muted);
}

/* Vertical line */
.timeline::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(246,162,30,.55);
    transform: translateX(-50%);
    border-radius: 999px;
}

/* Year row aligned to the left column */
.timeline-year-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 44px 0 18px;
}

.timeline-year{
    text-align: right;
    padding-right: 30px;
    font-weight: 950;
    font-size: 2rem;
}

/* Item layout */
.timeline-item{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 18px;
}

/* Dot on the line */
.timeline-item::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 0.4rem;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--bg);
    border: 2px solid rgba(246,162,30,.90);
    transform: translateX(-50%);
    box-shadow: 0 0 0 3px rgba(246,162,30,.18);
}

/* Left: date */
.timeline-date{
    text-align: right;
    padding-right: 30px;
}

.timeline-date h3{
    margin: 0;
    font-size: 1.15rem;
    font-weight: 850;
}

/* Right: content behaves like a card */
.timeline-content.card{
    padding: 14px 16px; /* override card padding if you want */
}

/* Ensure headings inside look nice */
.timeline-content h4{
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 900;
}

.timeline-content p{
    margin: 0;
    color: var(--muted);
}

/* Hover effect like other cards (if your .card has hover, this is optional) */
.timeline-content.card:hover{
    transform: translateY(-2px);
}

/* Mobile: stack, keep line left */
@media (max-width: 800px){

    .timeline::before{
        left: 22px;
        transform: translateX(-50%);
    }

    .timeline-year-row,
    .timeline-item{
        grid-template-columns: 1fr;
        padding-left: 52px;
        gap: 8px;
    }

    .timeline-year{
        text-align: left;
        padding-right: 0;
        font-size: 1.8rem;
        margin-top: 10px;
    }

    .timeline-item::before{
        left: 22px;
        transform: translate(-50%, -50%);
        top: 0.55rem;
    }

    .timeline-date{
        text-align: left;
        padding-right: 0;
        position: relative;
    }

    .timeline-content{
        padding: 0;
    }
}

/* Contact */
#kontakt{
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
}

.contact-list{
    display: grid;
    grid-template-columns: 120px 1fr; /* label width */
    row-gap: 12px;
    column-gap: 12px;
    margin: 0;
}

.contact-list dt{
    font-weight: 700;
    color: var(--text);
}

.contact-list dd{
    margin: 0;
    color: var(--muted);
}

.contact-note{
    display: block;
    margin-top: 4px;

    font-size: 0.95em;
    line-height: 1.4;
    font-weight: 500;;
}

.contact-list dd .contact-note{
    color: var(--accent-text);
}

.contact-list li{ color:var(--muted); }
.contact-list span{ color:var(--text); font-weight:850; margin-right:6px; }

/* Footer */
.site-footer{
    min-height: var(--footer-height);
    padding: var(--footer-pad-y) 0;

    background: rgba(242,243,233,.95);
    box-shadow: 0 -1px 0 rgba(246,162,30,.30);
}

.footer-inner{
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
    align-items:center;
    justify-content:space-between;
}
.footer-links{ display:flex; gap:10px; color:var(--muted); }
.footer-links a{
    padding:6px 8px;
    border-radius:12px;
    background:transparent;
}
.footer-links a:hover{
    text-decoration:none;
    background:rgba(255,255,255,.65);
    color:var(--text);
}

/* Desktop */
@media (min-width: 800px){
    .nav{ display:inline-flex; }
    .nav-toggle, .nav-mobile{ display:none; }

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

    .split{ grid-template-columns:1.3fr .9fr; }
}

/* Spans (desktop only) */
@media (min-width: 800px){
    .span-2{ grid-column: span 2; }
    .span-4{ grid-column: 1 / -1; }
}