/* =========================================================
   BLACK-LINE OWL – DESIGN „NACHTFAHRT“ · 1.0.0
   Gestaltungsebene über Theme + Plugins.
   Alle Regeln laufen über body.blo-d, damit sie auch gegen
   das „Zusätzliche CSS“ aus dem Customizer greifen.
   ========================================================= */


/* ---------- Schriften (lokal, kein Google-Server) ---------- */



/* ---------- Tokens ---------- */

body.blo-d{
    --d-black:#050505;
    --d-panel:#121214;
    --d-line:#26262b;
    --d-gold:#d7b46a;
    --d-gold-light:#f0d59a;
    --d-text:#f4f4f5;
    --d-muted:#9a9aa3;
    --d-tail:#e0262f;
    --d-ease:cubic-bezier(.2,.7,.2,1);
    /* Schrift wie im Theme: Arial / Helvetica */
    --d-display:Arial,Helvetica,sans-serif;
    --d-body:Arial,Helvetica,sans-serif;
    --d-header-h:98px;

    font-family:var(--d-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

body.blo-d ::selection{
    color:#111;
    background:var(--d-gold);
}

body.blo-d :focus-visible{
    outline:2px solid var(--d-gold);
    outline-offset:3px;
}

html:has(body.blo-d){
    scrollbar-color:#3a3a40 var(--d-black);
    scroll-padding-top:110px;
}


/* ---------- Überschriften & Navigation in der Display-Schrift ---------- */

body.blo-d .blo-page h1,
body.blo-d .blo-page h2,
body.blo-d .blo-page h3,
body.blo-d .blo-page h4,
body.blo-d .blo-hero-kicker,
body.blo-d .blo-footer h3,
body.blo-d .blo-nav-toggle,
body.blo-d .blo-nav-link,
body.blo-d .blo-mega a,
body.blo-d .blo-mobile-group-title,
body.blo-d .blo-mobile-single,
body.blo-d .blo-d-home h2,
body.blo-d .blo-d-home h3{
    font-family:var(--d-display);
}

/* Überschriften: Größe, Schnitt und Schreibweise kommen unverändert aus dem Theme */

/* Fließtext etwas ruhiger und lesbarer */
body.blo-d .blo-page p{
    line-height:1.65;
}

body.blo-d .blo-page [class$="-heading"] p,
body.blo-d .blo-page [class$="-heading"] > div > p{
    max-width:62ch;
    font-size:16px;
    color:var(--d-muted);
}

/* Kleine Überzeile: ruhiger, mit Lichtstrich davor */
body.blo-d .blo-section-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--d-display);
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em;
}

body.blo-d .blo-section-eyebrow::before{
    content:"";
    width:28px;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--d-gold));
}


/* ---------- Header: fixiert, mit Lesefortschritt ---------- */

body.blo-d .blo-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(0,0,0,.92);
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:background .3s, box-shadow .3s;
}

body.blo-d.admin-bar .blo-header{ top:32px; }

@media (max-width:782px){
    body.blo-d.admin-bar .blo-header{ top:46px; }
}

@media (max-width:600px){
    body.blo-d.admin-bar .blo-header{ top:0; }
}

@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
    body.blo-d .blo-header.is-scrolled{
        background:rgba(5,5,6,.72);
        -webkit-backdrop-filter:saturate(140%) blur(14px);
        backdrop-filter:saturate(140%) blur(14px);
    }
}

body.blo-d .blo-header.is-scrolled{
    box-shadow:0 10px 30px rgba(0,0,0,.45);
}

body.blo-d .blo-d-progress{
    position:absolute;
    left:0;
    bottom:-1px;
    height:2px;
    width:100%;
    background:linear-gradient(90deg, rgba(215,180,106,0), var(--d-gold) 60%, var(--d-gold-light));
    transform:scaleX(var(--d-progress, 0));
    transform-origin:0 50%;
    pointer-events:none;
}

/* Navigation: Unterstrich wächst beim Überfahren */
body.blo-d .blo-nav-toggle,
body.blo-d .blo-nav-link{
    font-size:15px;
    font-weight:800;
    letter-spacing:0;
    background-image:linear-gradient(var(--d-gold), var(--d-gold));
    background-repeat:no-repeat;
    background-size:0 2px;
    background-position:0 calc(100% - 28px);
    transition:background-size .3s var(--d-ease), color .2s;
}

body.blo-d .blo-nav-item:hover > .blo-nav-toggle,
body.blo-d .blo-nav-item:focus-within > .blo-nav-toggle,
body.blo-d .blo-nav-link:hover,
body.blo-d .blo-nav-link:focus-visible,
body.blo-d .blo-nav-link.is-current{
    color:var(--d-gold-light);
    background-size:100% 2px;
}

body.blo-d .blo-mega{
    border:1px solid #2e2e34;
    border-top:2px solid var(--d-gold);
    border-radius:0 0 10px 10px;
    background:rgba(10,10,12,.96);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    box-shadow:0 24px 50px rgba(0,0,0,.55);
    padding:6px 0;
}

body.blo-d .blo-mega a{
    font-size:14px;
    font-weight:700;
    letter-spacing:0;
    padding:11px 22px;
    transition:color .2s, background .2s, padding .25s var(--d-ease);
}

body.blo-d .blo-mega a:hover,
body.blo-d .blo-mega a:focus-visible{
    color:var(--d-gold-light);
    background:rgba(215,180,106,.07);
}

body.blo-d .blo-social svg{
    transition:fill .2s, transform .2s;
}

body.blo-d .blo-social:hover svg{
    fill:var(--d-gold);
}


/* ---------- Mobilmenü: fährt ein, Punkte erscheinen nacheinander ---------- */

body.blo-d .blo-mobile-panel.is-open{
    animation:bloDPanel .35s var(--d-ease) both;
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(215,180,106,.10), transparent 60%),
        #050505;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
}

body.blo-d .blo-mobile-panel.is-open .blo-mobile-group,
body.blo-d .blo-mobile-panel.is-open .blo-mobile-single,
body.blo-d .blo-mobile-panel.is-open .blo-mobile-socials{
    animation:bloDUp .45s var(--d-ease) both;
}

body.blo-d .blo-mobile-panel.is-open > :nth-child(2){ animation-delay:.06s; }
body.blo-d .blo-mobile-panel.is-open > :nth-child(3){ animation-delay:.10s; }
body.blo-d .blo-mobile-panel.is-open > :nth-child(4){ animation-delay:.14s; }
body.blo-d .blo-mobile-panel.is-open > :nth-child(5){ animation-delay:.18s; }
body.blo-d .blo-mobile-panel.is-open > :nth-child(6){ animation-delay:.22s; }
body.blo-d .blo-mobile-panel.is-open > :nth-child(7){ animation-delay:.26s; }
body.blo-d .blo-mobile-panel.is-open > :nth-child(8){ animation-delay:.30s; }
body.blo-d .blo-mobile-panel.is-open > :nth-child(n+9){ animation-delay:.34s; }

body.blo-d .blo-mobile-group-title,
body.blo-d .blo-mobile-single{
    min-height:58px;
}

body.blo-d .blo-mobile-group-title span{
    color:var(--d-gold);
    font-style:normal;
    transition:transform .25s var(--d-ease);
}

body.blo-d .blo-mobile-group.open .blo-mobile-group-title span{
    transform:rotate(45deg);
}

body.blo-d .blo-mobile-group.open .blo-mobile-sub{
    animation:bloDFade .3s ease both;
}

body.blo-d .blo-mobile-sub a{
    min-height:46px;
    display:flex;
    align-items:center;
    padding:10px 14px;
    border-left:2px solid var(--d-line);
    font-size:16px;
    transition:border-color .2s, color .2s;
}

body.blo-d .blo-mobile-sub a:hover,
body.blo-d .blo-mobile-sub a:focus-visible{
    color:#fff;
    border-left-color:var(--d-gold);
}


/* ---------- Hero: einmaliger Auftritt mit Lichtspuren ---------- */

body.blo-d .blo-d-trails{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
}

body.blo-d .blo-d-trail{
    position:absolute;
    left:0;
    width:70%;
    height:2px;
    border-radius:2px;
    opacity:0;
    transform:translateX(-110%) skewX(-12deg);
    filter:blur(.3px);
    animation:bloDTrail 1.9s cubic-bezier(.55,.05,.25,1) forwards;
}

body.blo-d .blo-d-trail::after{
    content:"";
    position:absolute;
    right:-6px;
    top:50%;
    width:14px;
    height:14px;
    border-radius:50%;
    transform:translateY(-50%);
    background:inherit;
    filter:blur(6px);
    opacity:.9;
}

body.blo-d .blo-d-trail--gold{ background:linear-gradient(90deg, rgba(240,213,154,0), rgba(240,213,154,.95)); }
body.blo-d .blo-d-trail--white{ background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85)); }
body.blo-d .blo-d-trail--red{
    left:auto;
    right:0;
    transform:translateX(110%) skewX(12deg);
    background:linear-gradient(270deg, rgba(224,38,47,0), rgba(224,38,47,.9));
    animation-name:bloDTrailBack;
}
body.blo-d .blo-d-trail--red::after{ right:auto; left:-6px; }

html.blo-d-js body.blo-d .blo-hero-inner > *{
    animation:bloDUp .9s var(--d-ease) both;
}

html.blo-d-js body.blo-d .blo-hero-inner > :nth-child(1){ animation-delay:.25s; }
html.blo-d-js body.blo-d .blo-hero-inner > :nth-child(2){ animation-delay:.40s; }
html.blo-d-js body.blo-d .blo-hero-inner > :nth-child(3){ animation-delay:.55s; }
html.blo-d-js body.blo-d .blo-hero-inner > :nth-child(4){ animation-delay:.70s; }
html.blo-d-js body.blo-d .blo-hero-inner > :nth-child(n+5){ animation-delay:.85s; }

body.blo-d .blo-home-video-toggle{
    transition:transform .2s, border-color .2s, color .2s;
}

body.blo-d .blo-home-video-toggle:hover{
    transform:scale(1.06);
}


/* ---------- Karten: Lichtkegel folgt dem Mauszeiger ---------- */

body.blo-d .blo-d-spot{
    position:relative;
    isolation:isolate;
}

body.blo-d .blo-d-spot::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:5;
    border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(240,213,154,.13), transparent 62%);
    opacity:0;
    transition:opacity .35s;
}

@media (hover:hover) and (pointer:fine){
    body.blo-d .blo-d-spot:hover::after{ opacity:1; }
}


/* ---------- Aufbau beim ersten Erscheinen (nur Listen) ---------- */

html.blo-d-js body.blo-d [data-d-reveal]{
    opacity:0;
    transform:translateY(16px);
}

html.blo-d-js body.blo-d [data-d-reveal].is-in{
    opacity:1;
    transform:none;
    transition:
        opacity .6s var(--d-ease) var(--d-delay, 0s),
        transform .7s var(--d-ease) var(--d-delay, 0s);
}

/* Bilder blenden weich ein, sobald sie geladen sind */
html.blo-d-js body.blo-d img.blo-d-img{
    opacity:0;
    transition:opacity .6s ease;
}

html.blo-d-js body.blo-d img.blo-d-img.is-loaded{
    opacity:1;
}


/* ---------- Seiten-Feinschliff ---------- */

body.blo-d .blo-main{
    background:
        radial-gradient(80% 40% at 50% 0%, rgba(215,180,106,.05), transparent 70%),
        #0a0a0a;
}

body.blo-d .blo-page{
    padding-top:clamp(40px, 7vw, 80px);
}

/* Event-Karten: Meta-Zeile wie eine Fahrkarte */
body.blo-d .blo-announcement-meta strong{
    font-family:var(--d-display);
    font-size:11px;
    letter-spacing:.1em;
}

body.blo-d .blo-announcement-meta span{
    font-size:15px;
}

body.blo-d .blo-announcement-pin{
    font-family:var(--d-display);
    font-size:11px;
    letter-spacing:.08em;
    border-radius:4px;
}

/* Partner/Sponsoren: Logos ruhiger, hell beim Überfahren */
@media (hover:hover){
    body.blo-d .blo-partner-image img,
    body.blo-d .blo-sponsor-image img{
        filter:grayscale(.35) brightness(.92);
        transition:filter .35s, transform .35s var(--d-ease);
    }

    body.blo-d .blo-partner-card:hover .blo-partner-image img,
    body.blo-d .blo-sponsor-card:hover .blo-sponsor-image img{
        filter:none;
    }
}

/* Buttons im Theme: gleiche Pillenform wie VIP */
body.blo-d .blo-garage-btn,
body.blo-d .blo-application-status-pass > a,
body.blo-d .blo-application-status-input-row button,
body.blo-d .blo-instagram-profile-button{
    border-radius:999px;
}

body.blo-d .blo-photographers-apply-button,
body.blo-d .blo-partners-apply-button,
body.blo-d .blo-sponsors-apply-button{
    font-family:var(--d-display);
    font-size:15px;
    font-weight:800;
    letter-spacing:.01em;
}

/* Shop „Coming soon“ */
body.blo-d .blo-shop-card{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(215,180,106,.14), transparent 65%),
        #111113;
}

body.blo-d .blo-shop-stay{
    font-family:var(--d-display);
    font-size:15px;
    letter-spacing:.14em;
}


/* ---------- Footer ---------- */

body.blo-d .blo-footer{
    position:relative;
    border-top:0;
    background:
        radial-gradient(70% 120% at 50% 0%, rgba(215,180,106,.06), transparent 60%),
        #030303;
}

body.blo-d .blo-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(215,180,106,.55), transparent);
}

body.blo-d .blo-footer-links a{
    transition:color .2s, padding .25s var(--d-ease);
}

body.blo-d .blo-footer-links a:hover{
    color:var(--d-gold-light);
}

@media (hover:hover){
    body.blo-d .blo-footer-links a:hover{
        padding-left:4px;
    }
}


/* =========================================================
   STARTSEITE – neue Abschnitte unter dem Hero
   ========================================================= */

body.blo-d .blo-d-home{
    position:relative;
    background:#070707;
    color:var(--d-text);
}

body.blo-d .blo-d-home[hidden]{ display:none !important; }

body.blo-d .blo-d-wrap{
    width:min(1180px, calc(100% - 48px));
    margin:0 auto;
}

body.blo-d .blo-d-block{
    padding:clamp(56px, 9vw, 110px) 0;
    border-top:1px solid rgba(255,255,255,.05);
}

body.blo-d .blo-d-block-title{
    margin:0 0 clamp(24px, 4vw, 40px);
    font-size:32px;
    font-weight:900;
    line-height:1.1;
}

/* --- Nächstes Treffen --- */

body.blo-d .blo-d-next{
    display:grid;
    grid-template-columns:minmax(200px, 300px) 1fr;
    gap:clamp(24px, 5vw, 64px);
    align-items:center;
}

body.blo-d .blo-d-date{
    position:relative;
    font-family:var(--d-display);
    font-weight:900;
    line-height:.82;
    color:var(--d-text);
}

body.blo-d .blo-d-date-day{
    display:block;
    font-size:clamp(92px, 13vw, 170px);
    letter-spacing:-.04em;
    background:linear-gradient(180deg, #fff 30%, var(--d-gold-light) 70%, var(--d-gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

body.blo-d .blo-d-date-month{
    display:block;
    margin-top:12px;
    font-size:clamp(22px, 2.8vw, 32px);
    color:var(--d-gold);
}

body.blo-d .blo-d-date-weekday{
    display:block;
    margin-top:8px;
    font-family:var(--d-body);
    font-style:normal;
    font-weight:500;
    font-size:15px;
    color:var(--d-muted);
    line-height:1.3;
}

body.blo-d .blo-d-next-body h3{
    margin:0 0 14px;
    font-size:clamp(22px, 2.6vw, 28px);
    font-weight:900;
    line-height:1.15;
}

body.blo-d .blo-d-next-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 22px;
    margin:0 0 18px;
    padding:0;
    list-style:none;
    color:var(--d-text);
    font-size:16px;
}

body.blo-d .blo-d-next-meta li{
    display:flex;
    align-items:center;
    gap:8px;
}

body.blo-d .blo-d-next-meta svg{
    width:18px;
    height:18px;
    fill:var(--d-gold);
    flex:0 0 18px;
}

body.blo-d .blo-d-next-text{
    max-width:60ch;
    margin:0 0 26px;
    color:var(--d-muted);
}

body.blo-d .blo-d-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

body.blo-d .blo-d-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    padding:13px 26px;
    border-radius:999px;
    font-family:var(--d-display);
    font-size:15px;
    font-weight:800;
    letter-spacing:.02em;
    text-decoration:none !important;
    transition:transform .2s var(--d-ease), background .2s, box-shadow .25s, border-color .2s;
}

body.blo-d .blo-d-btn--gold{
    color:#111 !important;
    background:linear-gradient(135deg, #e8c77e, var(--d-gold) 55%, #b8944b);
    box-shadow:0 10px 30px rgba(215,180,106,.22);
}

body.blo-d .blo-d-btn--ghost{
    color:var(--d-gold-light) !important;
    border:1px solid rgba(215,180,106,.45);
}

body.blo-d .blo-d-btn:hover{
    transform:translateY(-2px);
}

body.blo-d .blo-d-btn--ghost:hover{
    background:rgba(215,180,106,.08);
    border-color:var(--d-gold);
}

body.blo-d .blo-d-empty{
    max-width:60ch;
    color:var(--d-muted);
    font-size:17px;
}

/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width:900px){
    body.blo-d{ --d-header-h:78px; }
}

@media (max-width:760px){

    body.blo-d .blo-d-next{
        grid-template-columns:1fr;
        gap:18px;
    }

    body.blo-d .blo-d-date{
        display:flex;
        align-items:flex-end;
        gap:14px;
    }

    body.blo-d .blo-d-date-day{
        font-size:100px;
    }

    body.blo-d .blo-d-block-title{
        font-size:26px;
    }

    body.blo-d .blo-d-date-side{
        padding-bottom:10px;
    }

    body.blo-d .blo-d-date-month{
        margin-top:0;
    }

    body.blo-d .blo-d-actions .blo-d-btn{
        flex:1 1 100%;
    }

    /* Partner/Sponsoren: zwei Spalten statt riesiger Einzelkacheln */
    body.blo-d .blo-partners-grid,
    body.blo-d .blo-sponsors-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:12px;
    }

    body.blo-d .blo-partner-image,
    body.blo-d .blo-sponsor-image{
        aspect-ratio:1 / 1;
        padding:14px;
    }

    body.blo-d .blo-partner-image.has-benefit{
        padding-bottom:70px;
    }

    /* Theme setzt mobil jedes <strong> im Hero auf 13 px */
    body.blo-d .blo-hero .blo-hero-kicker strong{
        display:block;
        font-size:inherit !important;
        line-height:inherit;
    }

    body.blo-d .blo-hero .blo-hero-copy,
    body.blo-d .blo-hero .blo-hero-copy strong{
        font-size:15px !important;
    }

    body.blo-d .blo-page [class$="-heading"] p{
        font-size:15px;
    }

    body.blo-d .blo-nav-toggle,
    body.blo-d .blo-nav-link{
        background-image:none;
    }
}

@media (max-width:420px){
    body.blo-d .blo-d-wrap{
        width:calc(100% - 32px);
    }
}


/* ---------- Animationen ---------- */

@keyframes bloDUp{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:none; }
}

@keyframes bloDFade{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes bloDPanel{
    from{ opacity:0; transform:translateY(-12px); }
    to{ opacity:1; transform:none; }
}

@keyframes bloDTrail{
    0%{ opacity:0; transform:translateX(-110%) skewX(-12deg); }
    15%{ opacity:1; }
    70%{ opacity:1; }
    100%{ opacity:0; transform:translateX(160%) skewX(-12deg); }
}

@keyframes bloDTrailBack{
    0%{ opacity:0; transform:translateX(110%) skewX(12deg); }
    15%{ opacity:1; }
    70%{ opacity:1; }
    100%{ opacity:0; transform:translateX(-160%) skewX(12deg); }
}


/* ---------- Weniger Bewegung gewünscht ---------- */

@media (prefers-reduced-motion:reduce){

    html.blo-d-js body.blo-d [data-d-reveal],
    html.blo-d-js body.blo-d img.blo-d-img{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    body.blo-d .blo-d-trails{ display:none !important; }

    html.blo-d-js body.blo-d .blo-hero-inner > *,
    body.blo-d .blo-mobile-panel.is-open,
    body.blo-d .blo-mobile-panel.is-open > *{
        animation:none !important;
    }

}