/* =========================
   styles.css (SORTIERT)
   - Sticky Footer
   - Stage / Hintergrund
   - Masthead / Navbar / Hero
   - Navigation (Desktop/Mobile)
   - Footer
   - 404 Seite
========================= */

/* =========================================================
   1) CSS Variablen
========================================================= */
:root{
    /* Farben & Basis */
    --bg:#0f172a;
    --fg:#e2e8f0;
    --accent:#38bdf8;
    --radius:16px;
    --nav-height:64px;

    /* Masthead (Desktop/Tablet) */
    --mast-bg:#dcecff;
    --mast-logo-h:96px;

    --mast-title-size:34px;
    --mast-title-weight:800;
    --mast-title-font:Albertus;
    --mast-title-color:#0b1220;

    --mast-claim-size:20px;
    --mast-claim-weight:500;
    --mast-claim-font:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    --mast-claim-color:#3A5FCD;

    /* Page / Stage (Option 1+2) */
    --page-bg:#f5f7fb;
    --stage-bg:#ffffff;
    --stage-radius:24px;
}


/* =========================================================
   2) Reset / Base
========================================================= */
*{ box-sizing:border-box; }

body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

    /* Sticky Footer Layout */
    min-height:100vh;
    display:flex;
    flex-direction:column;

    /* Seitenhintergrund */
    background:var(--page-bg);
}

main{
    flex:1; /* nimmt freien Platz ein -> Footer bleibt unten */
}

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

/* Screenreader-only */
/* ✅ BEREINIGT: .sr-only war später nochmal doppelt vorhanden
   -> hier beibehalten und mit !important versehen (wie im Duplikat) */
.sr-only{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}


/* =========================================================
   3) Typografie
========================================================= */
h1, h2, h3{
    margin:0 0 10px;
    line-height:1.15;
    letter-spacing:-0.02em;
    color:#0b1220;
}

/* Seitenüberschrift (Router-H1) */
main > h1{
    font-size:clamp(1.9rem,1.2rem + 1.6vw,2.6rem);
    font-weight:800;
    margin:18px auto 12px;
    max-width:1100px;
    padding:0 16px;

    /* ✅ NEU: Albertus + Zentrierung */
    text-align:center;
    font-family:Albertus,
                "Albertus MT",
                "Albertus Nova",
                system-ui,
                -apple-system,
                Segoe UI,
                Roboto,
                Arial,
                sans-serif;
}

/* ✅ NEU: Unterstreichung wie im Beispiel */
main > h1::after{
    content:"";
    display:block;
    width:64px;
    height:3px;
    margin:10px auto 0;
    background:#f59e0b;
    border-radius:3px;
}

h2{
    font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem);
    font-weight:800;
}

h3{
    font-size:1.1rem;
    font-weight:800;
}

main p{
    margin:0 0 12px;
    line-height:1.55;
    color:rgba(0,0,0,.72);
}


/* =========================================================
   4) Page Stage (Option 2) – zentrierte Content-Fläche
========================================================= */
.page-stage{
    width:100%;
    padding:0 0 34px;
}

.page-stage__inner{
    max-width:1100px;
    margin:18px auto 0;
    background:var(--stage-bg);
    border-radius:var(--stage-radius);
    box-shadow:0 18px 50px rgba(15,23,42,.08);
    border:1px solid rgba(15,23,42,.06);
    overflow:hidden; /* damit Rundungen sauber greifen */
}

/* Wenn Hero aktiv ist: Stage leicht ins Bild ziehen */
.has-hero .page-stage__inner{
    margin-top:-28px;
}

/* Innenabstände */
.page-stage__pad{
    padding:18px 0 22px;
}

/* =======================
   NEU: Seitentitel (H1) zentriert in der Stage (Option 1)
   Schrift: Albertus
   Zum Entfernen: diesen Block löschen
======================= */
.page-stage__pad > h1{
    margin:0 auto 14px;
    padding:18px 16px 0;
    max-width:900px;
    text-align:center;

    font-family:Albertus,
                "Albertus MT",
                "Albertus Nova",
                system-ui,
                -apple-system,
                Segoe UI,
                Roboto,
                Arial,
                sans-serif;
}

/* ✅ NEU: Unterstreichung auch in der Stage (damit ALLE H1 gleich sind) */
.page-stage__pad > h1::after{
    content:"";
    display:block;
    width:64px;
    height:3px;
    margin:10px auto 0;
    background:#f59e0b;
    border-radius:3px;
}

/* =======================
   /NEU
======================= */

/* Mobile: weniger Radius, keine Überlappung */
@media (max-width:859px){
    .page-stage__inner{
        margin-top:12px;
        border-radius:18px;
    }
    .has-hero .page-stage__inner{
        margin-top:0;
        border-radius:0;
    }
}


/* =========================================================
   5) Legacy Banner (aus)
========================================================= */
.site-banner,
.site-banner__inner,
.site-banner__img{
    display:none !important;
}


/* =========================================================
   6) Masthead (über Navbar)
========================================================= */
.masthead{
    width:100%;
    background:var(--mast-bg);
    margin-bottom:0; /* kein Abstand zur Navbar */
}

.masthead__inner{
    max-width:1100px;
    margin:0 auto;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:18px;
}

.masthead__logo img{
    height:var(--mast-logo-h);
    width:auto;
    display:block;
}

.masthead__text{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.masthead__title{
    font-size:var(--mast-title-size);
    font-weight:var(--mast-title-weight);
    font-family:var(--mast-title-font);
    color:var(--mast-title-color);
}

.masthead__claim{
    margin-top:8px;
    font-size:var(--mast-claim-size);
    font-weight:var(--mast-claim-weight);
    font-family:var(--mast-claim-font);
    color:var(--mast-claim-color);
}

/* Mobile: Masthead aus */
@media (max-width:859px){
    .masthead{ display:none; }
}


/* =========================================================
   7) Navbar (sticky)
========================================================= */
.nav{
    position:sticky;
    top:0;
    height:var(--nav-height);
    z-index:50;
    background:var(--bg);
    color:var(--fg);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.nav__inner{
    max-width:1100px;
    height:100%;
    margin:0 auto;
    padding:0 16px;
    display:flex;
    align-items:center;
    gap:12px;
    justify-content:space-between;
}


/* =========================================================
   8) Hero (unter Navbar)
========================================================= */
.hero{
    position:relative;
    width:100%;
    height:clamp(180px, 20vw, 320px);
    overflow:hidden;
    background:#000;
}

/* Sehr große Screens: Hero flacher halten */
@media (min-width:1400px){
    .hero{ height:280px; }
}

.hero__img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:scale(1.02);
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.10) 0%,
            rgba(0,0,0,.10) 45%,
            rgba(0,0,0,.55) 100%
        );
    pointer-events:none;
}

.hero__content{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    pointer-events:none;
}

.hero__inner{
    max-width:1100px;
    margin:0 auto;
    width:100%;
    padding:0 16px 22px;
}

.hero__title{
    display:inline-block;
    color:#fff;
    font-weight:800;
    font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    letter-spacing:-0.02em;

    background:rgba(15,23,42,.45);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:16px;
    padding:10px 14px;

    text-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Mobile: Hero kompakter + ohne Titeloverlay */
@media (max-width:859px){
    .hero{
        height:clamp(160px, 34vw, 240px);
    }
    .hero__content{
        display:none;
    }
}


/* =========================================================
   9) Brand (Mobile)
========================================================= */
.brand--mobile{
    display:flex;
    align-items:center;
    gap:10px;
}

.brand__logo-mobile{
    height:34px;
    width:auto;
    flex-shrink:0;
    display:block;
}

.brand__text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.brand__title{
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
}

.brand__claim{
    font-size:11px;
    font-weight:400;
    color:#94a3b8;
}

/* Desktop/Tablet: Mobile Brand aus */
@media (min-width:860px){
    .brand--mobile{ display:none; }
}


/* =========================================================
   10) Desktop / Tablet Links + Active State
========================================================= */
.links{
    display:none;
    align-items:center;
    gap:10px;
    width:100%;
    flex-wrap:nowrap;
}

.links a{
    padding:10px 14px;
    border-radius:10px;
    white-space:nowrap;
}

.links a:hover{
    background:rgba(255,255,255,.08);
}

.links a:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

@media (min-width:860px){
    .links{ display:flex; }

    .links a{ position:relative; }

    .links a[aria-current="page"]{
        color:var(--accent);
        font-weight:600;
    }

    .links a[aria-current="page"]::after{
        content:"";
        position:absolute;
        left:10px;
        right:10px;
        bottom:4px;
        height:2px;
        background:var(--accent);
        border-radius:2px;
    }
}

/* Mitglieder Login – Button (Desktop/Tablet) */
@media (min-width:860px){
    .links .nav-login{
        margin-left:auto;
        border-radius:6px;
        background:transparent;
        border:1px solid currentColor;
        color:inherit;
        font-weight:700;
        line-height:1;
    }

    .links .nav-login:hover{
        background:rgba(255,255,255,.08);
    }

    .links .nav-login:focus-visible{
        outline:2px solid #fff;
        outline-offset:2px;
    }

    .links .nav-login[aria-current="page"]::after{
        display:none;
    }
}

/* Tablet: 860–1099px */
@media (min-width:860px) and (max-width:1099px){
    .links{ gap:6px; }

    .links a{
        font-size:14px;
        padding:8px 10px;
    }

    .links .nav-login{
        font-size:13px;
        padding:7px 12px;
    }
}

/* Desktop: ab 1100px */
@media (min-width:1100px){
    .links{ gap:10px; }

    .links a{
        font-size:15px;
        padding:10px 14px;
    }

    .links .nav-login{
        font-size:14px;
        padding:8px 14px;
    }
}


/* =========================================================
   11) Burger (Mobile)
========================================================= */
.burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.15);
    background:transparent;
    color:var(--fg);
    border-radius:12px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    flex-shrink:0;
}

.burger:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.burger__icon{
    width:20px;
    height:14px;
    position:relative;
}

.burger__icon span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:currentColor;
    border-radius:2px;
    transition:transform .2s ease, top .2s ease, opacity .2s ease;
}

.burger__icon span:nth-child(1){ top:0; }
.burger__icon span:nth-child(2){ top:6px; }
.burger__icon span:nth-child(3){ top:12px; }

.burger[aria-expanded="true"] .burger__icon span:nth-child(1){
    top:6px; transform:rotate(45deg);
}
.burger[aria-expanded="true"] .burger__icon span:nth-child(2){
    opacity:0;
}
.burger[aria-expanded="true"] .burger__icon span:nth-child(3){
    top:6px; transform:rotate(-45deg);
}

/* Desktop/Tablet: Burger aus */
@media (min-width:860px){
    .burger{ display:none; }
}


/* =========================================================
   12) Overlay + Mobile Panel + Mobile Dropdown
========================================================= */
.overlay{
    position:fixed;
    top:var(--nav-height);
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.55);
    z-index:100;
}

.panel{
    position:fixed;
    top:var(--nav-height);
    bottom:0;
    right:0;
    width:min(84vw, 360px);
    background:rgba(15,23,42,.98);
    color:var(--fg);
    z-index:200;
    transform:translateX(100%);
    transition:transform .22s ease;
    border-left:1px solid rgba(255,255,255,.1);
    padding:18px 14px;

    display:flex;
    flex-direction:column;

    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}

.panel.is-open{ transform:translateX(0); }

/* ✅ BEREINIGT: .panel__inner war später nochmal vorhanden (position/padding-bottom)
   -> hier zusammengeführt, damit es nur 1x existiert */
.panel__inner{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:100%;

    position: relative;
    padding-bottom: 84px; /* Platz, damit das Icon nichts überdeckt */
}

/* Panel Links */
.panel__inner a{
    display:block;
    width:100%;
    padding:12px;
    border-radius:12px;
    white-space:normal;
}

.panel__inner a:hover{
    background:rgba(255,255,255,.08);
}

.panel__inner a:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.panel__inner a[aria-current="page"]{
    color:var(--accent);
    background:rgba(56,189,248,.18);
    font-weight:600;
}

/* Mobile Dropdown */
.m-parent{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px;
    border-radius:12px;
}

.m-parent__chev{
    transition:transform .2s ease;
}

.m-parent[aria-expanded="true"] .m-parent__chev{
    transform:rotate(180deg);
}

.m-sub__panel{
    display:none;
    width:100%;
    padding-left:10px;
    margin:6px 0 10px;
}

.m-sub__panel[data-open="true"]{
    display:block;
}

.m-sub__panel a{
    display:block;
    width:100%;
    padding:10px 12px;
    border-radius:12px;
}

/* Mitglieder Login – Mobile */
.panel__inner .nav-login{
    margin-top:auto;
    background:var(--accent);
    color:#0b2a4a;
    font-weight:700;
    text-align:center;
}


/* =========================================================
   13) Desktop Dropdown (Klick)
========================================================= */
@media (min-width:860px){
    .dropdown{ position:relative; }

    .dropdown__trigger{
        display:inline-flex;
        align-items:center;
        gap:8px;
    }

    .dropdown__menu{
        position:absolute;
        top:calc(100% + 8px);
        left:0;
        min-width:220px;
        padding:8px;
        border-radius:14px;
        background:rgba(15,23,42,.98);
        border:1px solid rgba(255,255,255,.12);
        box-shadow:0 12px 30px rgba(0,0,0,.25);
        display:none;
        z-index:80;
    }

    .dropdown__menu a{
        display:block;
        width:100%;
        padding:10px 12px;
        border-radius:12px;
        white-space:nowrap;
    }

    .dropdown__menu a:hover{
        background:rgba(255,255,255,.08);
    }

    .dropdown.is-open .dropdown__menu{ display:block; }
    .dropdown.is-open .dropdown__chev{ transform:rotate(180deg); }
}


/* =========================================================
   14) Accessibility / Motion
========================================================= */
@media (prefers-reduced-motion: reduce){
    .panel,
    .burger__icon span,
    .m-parent__chev{
        transition:none !important;
    }
}


/* =========================================================
   15) Desktop/Tablet: Mobile Panel & Overlay wirklich aus
========================================================= */
@media (min-width:860px){
    .panel,
    .overlay{
        display:none !important;
    }
}


/* =========================================================
   16) Footer
========================================================= */
.site-footer{
    background:var(--bg);
    color:var(--fg);
    border-top:1px solid rgba(255,255,255,.08);
}

.site-footer__inner{
    max-width:1100px;
    margin:0 auto;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.site-footer__left{
    font-size:14px;
    color:rgba(226,232,240,.92);
}

.site-footer__right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.site-footer__sep{
    opacity:.55;
}

.footer-link{
    color:rgba(226,232,240,.92);
    padding:6px 8px;
    border-radius:10px;
}

.footer-link:hover{
    background:rgba(255,255,255,.08);
}

.footer-link:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.footer-wa{
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.footer-wa__icon{
    font-size:12px;
}

/* Mobile: Footer untereinander */
@media (max-width:520px){
    .site-footer__inner{
        flex-direction:column;
        align-items:flex-start;
    }
    .site-footer__right{
        justify-content:flex-start;
    }
}


/* =========================================================
   17) 404 Seite (am Ende, damit es alles übersteuern kann)
========================================================= */
.is-404 .page-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:calc(100vh - var(--nav-height) - 120px);
}

.is-404 .page-stage__inner{
    margin-top:18px;
    border-radius:24px;
    width:100%;
}

.is-404 .page-stage > .page-stage__inner > .page-stage__pad > h1{
    display:none;
}

.is-404 .error-page{
    padding:26px 16px 32px;
    text-align:center;
}

.is-404 .error-page__code{
    font-weight:900;
    font-size:clamp(2.6rem, 2.2rem + 3vw, 4.4rem);
    letter-spacing:-0.04em;
    color:rgba(15,23,42,.20);
    margin-bottom:2px;
}

.is-404 .error-page__title{
    font-weight:800;
    font-size:clamp(1.4rem, 1.2rem + 1vw, 2rem);
    color:#0b1220;
    margin-bottom:8px;
}

.is-404 .error-page__text{
    max-width:60ch;
    margin:0 auto 14px;
    color:rgba(0,0,0,.68);
}

.is-404 .error-page__btn{
    display:inline-block;
    background:var(--bg);
    color:var(--fg);
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
}

.is-404 .error-page__btn:hover{
    filter:brightness(1.07);
}

/* Mobile: keine vertikale Zentrierung */
@media (max-width:859px){
    .is-404 .page-stage{
        display:block;
        min-height:auto;
    }
}

/* ===== Logout Icon im Menü ===== */

/* ===== sr-only (falls nicht vorhanden) ===== */
/* ✅ ENTFERNT: Dieser Block war ein Duplikat von .sr-only oben */


/* ===== Logout SVG Icon ===== */

/* Desktop: Icon ganz rechts */
.links .nav-logout{
    margin-left: auto;          /* drückt Logout ganz nach rechts */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 6px 10px;          /* klein */
}

/* Farbe + Größe über currentColor */
.nav-logout{
    color: #c62828;             /* schönes Rot */
}

/* SVG */
.nav-logout__svg{
    display:block;
    width:18px;
    height:18px;
}

/* Hover */
.links .nav-logout:hover,
.links .nav-logout:focus{
    color: #8e1414;             /* dunkleres Rot */
}

/* Mobile: auch nur Icon, kein Text */
.nav-logout--mobile{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    color: #c62828;
}
.nav-logout--mobile:hover,
.nav-logout--mobile:focus{
    color: #8e1414;
}

/* =========================================
   FIX: Logout Icon im Mobile Panel unten rechts
   OHNE das Panel selbst zu verändern
========================================= */

/* WICHTIG: NICHT .panel { position: relative; } setzen! */

/* Wir nutzen .panel__inner als Positionierungsbasis */
/* ✅ ENTFERNT: .panel__inner stand hier nochmal doppelt
   -> ist oben im .panel__inner Block bereits enthalten */


/* Logout-Link im Panel aus dem Flow nehmen */
.panel__inner .nav-logout{
    position: absolute;
    bottom: 24px;
    right: 24px;

    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;

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

    background: rgba(198,40,40,0.15);
    color: #c62828;
    text-decoration: none;

    margin-left: 0 !important; /* Desktop Push neutralisieren */
}

/* SVG im Panel etwas größer */
.panel__inner .nav-logout .nav-logout__svg{
    width: 22px;
    height: 22px;
}

/* Hover/Focus */
.panel__inner .nav-logout:hover,
.panel__inner .nav-logout:focus{
    background: rgba(198,40,40,0.25);
    color: #8e1414;
}

/* ===== Admin Icon ===== */

/* Desktop */
.links .nav-admin{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    color:#f59e0b; /* Gold */
}

.nav-admin__svg{
    width:18px;
    height:18px;
    display:block;
}

.links .nav-admin:hover,
.links .nav-admin:focus{
    color:#d97706;
}

/* Mobile Panel */
.panel__inner .nav-admin{
    position:absolute;
    bottom:24px;
    right:80px; /* links vom Logout */
    width:44px;
    height:44px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(245,158,11,.18);
    color:#f59e0b;
}

.panel__inner .nav-admin:hover,
.panel__inner .nav-admin:focus{
    background:rgba(245,158,11,.28);
    color:#d97706;
}

.panel__inner .nav-admin__svg{
    width:22px;
    height:22px;
}

/* =========================================================
   ✅ FIX: Admin + Logout als Icon-Gruppe rechts (Desktop)
   - Nichts löschen, nur überschreiben
========================================================= */
@media (min-width:860px){
    .links .nav-admin{
        margin-left:auto; /* Admin schiebt die Icon-Gruppe nach rechts */
    }
    .links .nav-logout{
        margin-left:0;    /* Logout nicht mehr "auto", damit er direkt neben Admin sitzt */
    }
}