:root {
    --bg:#050505;
    --bg-soft:#0b0b0b;
    --panel:rgba(17,17,17,.96);
    --text:#f7f7f7;
    --muted:#8b8b8b;
    --line:rgba(255,255,255,.13);
    --ease:cubic-bezier(.2,.8,.2,1);
    --logo-height:100px;
}

* { box-sizing:border-box; }
html { background:var(--bg); color-scheme:dark; scroll-behavior:smooth; }
body {
    margin:0;
    min-width:320px;
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow-x:hidden;
}
body.overlay-open { overflow:hidden; }
button,input { font:inherit; }
button { color:inherit; }
img { image-orientation:from-image; }

.logo-button,.brand-small,.image-button,.footer-link,.lightbox-tool,.lightbox-nav,.modal-close {
    border:0;
    background:none;
    padding:0;
    cursor:pointer;
}

/* Landingpage */
.landing {
    min-height:100svh;
    display:grid;
    place-items:center;
    align-content:center;
    gap:1.5rem;
    padding:2rem;
    background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.035),transparent 35rem);
    transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
}
.landing.is-hidden {
    opacity:0;
    transform:scale(.985);
    visibility:hidden;
    pointer-events:none;
    position:absolute;
    inset:0;
}
.logo-button {
    display:block;
    width:min(78vw,560px);
    transition:transform .35s var(--ease),filter .35s var(--ease);
}
.logo-button:hover,.logo-button:focus-visible {
    transform:scale(1.025);
    filter:drop-shadow(0 14px 38px rgba(255,255,255,.08));
    outline:none;
}
.landing-logo { display:block; width:100%; height:auto; }
.enter-hint,.gallery-label,.gallery-meta {
    color:var(--muted);
    font-size:.68rem;
    letter-spacing:.35em;
    text-transform:uppercase;
}

/* Galerie: immer exakt eine Viewport-Höhe */
.gallery-view {
    display:none;
    opacity:0;
    transform:translateY(8px);
}
.gallery-view.is-visible {
    display:flex;
    flex-direction:column;
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
    animation:galleryIn .55s var(--ease) forwards;
}
@keyframes galleryIn { to { opacity:1; transform:none; } }

/* Header: kompakt, mit 100px Logo und bewusst mehr Luft zum oberen Rand. */
.gallery-header {
    position:relative;
    flex:0 0 calc(var(--logo-height) + 52px);
    min-height:calc(var(--logo-height) + 52px);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:26px clamp(.75rem,2vw,1.5rem) 26px;
    background:linear-gradient(to bottom,rgba(5,5,5,.98),rgba(5,5,5,.88));
    z-index:20;
}
.brand-small {
    display:flex;
    align-items:center;
    justify-content:center;
    height:var(--logo-height);
    width:auto;
    max-width:min(70vw,620px);
    opacity:.96;
    transition:opacity .2s ease,transform .2s ease;
}
.brand-small:hover { opacity:1; transform:translateY(-1px); }
.brand-small img {
    display:block;
    width:auto;
    height:var(--logo-height);
    max-width:100%;
    object-fit:contain;
}
.gallery-actions {
    position:absolute;
    right:clamp(.7rem,2vw,1.5rem);
    top:50%;
    transform:translateY(-50%);
    display:flex;
    gap:.55rem;
    z-index:2;
}
.mode-button,.login-submit {
    border:1px solid var(--line);
    background:rgba(255,255,255,.035);
    color:#eee;
    border-radius:999px;
    padding:.62rem .9rem;
    cursor:pointer;
    font-size:.69rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.mode-button:hover,.login-submit:hover {
    background:rgba(255,255,255,.09);
    border-color:rgba(255,255,255,.28);
    transform:translateY(-1px);
}
.mode-button--muted { color:#929292; }

.gallery-label {
    flex:0 0 34px;
    height:34px;
    line-height:24px;
    margin:8px 1rem 12px;
    padding:0;
    text-align:center;
    font-size:1rem;
    font-weight:500;
    letter-spacing:.34em;
    position:relative;
    z-index:2;
}

/* Slider: kompakter Bildstreifen wie in der ersten Version */
.slider-shell {
    position:relative;
    flex:0 0 auto;
    display:grid;
    grid-template-columns:72px minmax(0,1fr) 72px;
    align-items:center;
    width:100%;
    min-height:0;
    margin:auto 0;
    overflow:hidden;
}
.portfolio-slider {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(280px,38vw);
    gap:clamp(.65rem,1.2vw,1.25rem);
    align-items:center;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:inline mandatory;
    scrollbar-width:none;
    padding:.35rem clamp(.25rem,1vw,1rem);
    cursor:grab;
    touch-action:pan-x;
}
.portfolio-slider::-webkit-scrollbar { display:none; }
.portfolio-slider.is-dragging {
    cursor:grabbing;
    scroll-snap-type:none;
    user-select:none;
}
.portfolio-card {
    margin:0;
    height:min(31dvh,330px);
    min-height:0;
    max-height:330px;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    overflow:hidden;
    background:var(--bg-soft);
}
.image-button {
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
}
.portfolio-card img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#0a0a0a;
    filter:saturate(.92) contrast(1.02);
    transform:scale(1.001);
    transition:transform .7s var(--ease),filter .5s ease,opacity .3s ease;
}
.image-button:hover img,.image-button:focus-visible img {
    transform:scale(1.025);
    filter:saturate(1) contrast(1.04);
}
.image-button:focus-visible { outline:1px solid rgba(255,255,255,.65); outline-offset:4px; }
.slider-control {
    z-index:3;
    width:52px;
    height:76px;
    margin:auto;
    border:0;
    background:none;
    color:rgba(255,255,255,.58);
    font-size:3.6rem;
    line-height:1;
    cursor:pointer;
    transition:color .2s ease,transform .2s ease;
}
.slider-control:hover { color:#fff; transform:scale(1.10); }
.slider-control--prev { justify-self:end; margin-right:18px; }
.slider-control--next { justify-self:start; margin-left:18px; }
.slider-meta {
    flex:0 0 18px;
    min-height:18px;
    display:flex;
    justify-content:space-between;
    gap:1rem;
    width:calc(100% - 144px);
    margin:.15rem auto 0;
    color:#737373;
    font-size:.64rem;
    line-height:1.2;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.site-footer {
    flex:0 0 34px;
    min-height:34px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:.25rem 1rem .55rem;
}
.footer-link {
    color:#777;
    font-size:.70rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    transition:color .2s ease;
}
.footer-link:hover { color:#fff; }
.empty-state { margin:auto; padding:2rem; text-align:center; color:var(--muted); }
.empty-state p { color:#fff; }

/* Lightbox */
.lightbox,.modal {
    position:fixed;
    inset:0;
    z-index:100;
    visibility:hidden;
    opacity:0;
    background:rgba(0,0,0,.955);
    backdrop-filter:blur(15px);
    transition:opacity .22s ease,visibility .22s;
}
.lightbox.is-open,.modal.is-open { visibility:visible; opacity:1; }
.lightbox {
    display:grid;
    grid-template-columns:70px 1fr 70px;
    grid-template-rows:58px 1fr;
}
.lightbox-toolbar {
    grid-column:1/-1;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:.45rem;
    padding:.6rem .85rem;
}
.lightbox-counter {
    margin-right:auto;
    padding-left:.65rem;
    color:#8f8f8f;
    font-size:.72rem;
    letter-spacing:.15em;
}
.lightbox-tool {
    width:42px;
    height:42px;
    color:#aaa;
    font-size:1.45rem;
    border-radius:50%;
    transition:color .2s,background .2s;
}
.lightbox-tool:hover { color:#fff; background:rgba(255,255,255,.07); }
.lightbox-close { font-size:2rem; }
.lightbox-stage {
    grid-column:2;
    grid-row:2;
    display:grid;
    place-items:center;
    min-width:0;
    min-height:0;
    touch-action:pan-y;
    user-select:none;
}
.lightbox-stage img {
    max-width:100%;
    max-height:calc(100svh - 72px);
    width:auto;
    height:auto;
    object-fit:contain;
    opacity:1;
    transform:translateZ(0);
    transition:opacity .16s ease;
    image-orientation:from-image;
}
.lightbox-stage img.is-switching { opacity:.25; }
.lightbox-nav {
    grid-row:2;
    align-self:stretch;
    color:rgba(255,255,255,.56);
    font-size:3.6rem;
    transition:color .2s,background .2s;
}
.lightbox-nav:hover { color:#fff; background:rgba(255,255,255,.025); }
.lightbox-nav--prev { grid-column:1; }
.lightbox-nav--next { grid-column:3; }

/* Modals */
.modal { display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-panel {
    position:relative;
    width:min(680px,100%);
    max-height:min(82svh,760px);
    overflow:auto;
    background:var(--panel);
    border:1px solid var(--line);
    padding:clamp(1.5rem,4vw,3rem);
    box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.modal-panel h2 { margin:0 0 1.4rem; font-size:clamp(1.5rem,3vw,2.2rem); font-weight:500; }
.modal-close { position:absolute; right:1rem; top:.75rem; color:#888; font-size:2rem; }
.modal-close:hover { color:#fff; }
.imprint-content { color:#c7c7c7; line-height:1.65; }
.imprint-content a { color:#fff; }
.eyebrow { margin:0 0 .5rem; color:#777; font-size:.65rem; letter-spacing:.28em; }
.login-panel { width:min(460px,100%); }
.login-form { display:grid; gap:1rem; }
.login-form label {
    display:grid;
    gap:.42rem;
    color:#9b9b9b;
    font-size:.74rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.login-form input {
    width:100%;
    border:1px solid var(--line);
    background:#080808;
    color:#fff;
    padding:.85rem .95rem;
    outline:none;
}
.login-form input:focus { border-color:rgba(255,255,255,.42); }
.login-submit { margin-top:.35rem; border-radius:0; }
.login-submit:disabled { opacity:.45; cursor:wait; }
.login-error { min-height:1.2em; margin:0; color:#d79a9a; font-size:.82rem; }

/* Tablet */
@media (max-width:820px) {
    .gallery-header {
        flex-basis:calc(var(--logo-height) + 38px);
        min-height:calc(var(--logo-height) + 38px);
        padding:20px .65rem 18px;
    }
    .brand-small { max-width:62vw; }
    .gallery-actions {
        right:.55rem;
        top:.55rem;
        transform:none;
    }
    .mode-button { padding:.5rem .65rem; font-size:.58rem; }
    .gallery-label { flex-basis:30px; height:30px; line-height:22px; font-size:.86rem; letter-spacing:.30em; margin:6px .75rem 9px; }
    .slider-shell { grid-template-columns:0 minmax(0,1fr) 0; }
    .slider-control { display:none; }
    .portfolio-slider { grid-auto-columns:82vw; padding-inline:9vw; padding-top:.25rem; padding-bottom:.25rem; }
    .portfolio-card { height:min(29dvh,280px); max-height:280px; }
    .slider-meta { width:82%; font-size:.58rem; }
    .slider-meta span:last-child { display:none; }
    .site-footer { flex-basis:31px; min-height:31px; padding:.2rem .6rem .4rem; }
}

/* Smartphone */
@media (max-width:520px) {
    .gallery-header {
        flex-basis:calc(var(--logo-height) + 32px);
        min-height:calc(var(--logo-height) + 32px);
        padding:16px .45rem 16px;
    }
    .brand-small { max-width:72vw; }
    .gallery-actions { right:.4rem; top:.4rem; gap:.3rem; }
    .mode-button { max-width:112px; white-space:normal; line-height:1.1; padding:.42rem .5rem; font-size:.53rem; }
    .gallery-label { flex-basis:28px; height:28px; line-height:20px; font-size:.78rem; letter-spacing:.25em; margin:5px .6rem 8px; }
    .portfolio-slider { grid-auto-columns:88vw; padding-inline:6vw; }
    .portfolio-card { height:min(27dvh,235px); max-height:235px; }
    .slider-meta { width:88%; font-size:.55rem; }
    .site-footer { flex-basis:29px; min-height:29px; padding:.15rem .45rem .35rem; }
    .footer-link { font-size:.63rem; }
    .lightbox { grid-template-columns:38px 1fr 38px; }
    .lightbox-nav { font-size:2.7rem; }
}

/* Sehr niedrige Displays: Logo bleibt 100px, nur Slider schrumpft weiter. */
@media (max-height:650px) {
    .portfolio-card { height:min(23dvh,190px); max-height:190px; }
    .portfolio-slider { padding-top:.15rem; padding-bottom:.15rem; }
    .gallery-label { margin-bottom:.05rem; }
    .slider-meta { margin-top:.05rem; }
}

@media (max-height:520px) {
    .portfolio-card { height:min(18dvh,130px); max-height:130px; }
    .slider-meta { display:none; }
    .site-footer { flex-basis:27px; min-height:27px; }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}

/* =========================================================
   V13 – Slider focus cleanup + robuste Mobile-Darstellung
   ========================================================= */

/* Der Slider wird per JS fokussiert. Browser/Safari zeichnen sonst einen
   weißen bzw. blauen Fokusrahmen um den gesamten Slider. */
.portfolio-slider,
.portfolio-slider:focus,
.portfolio-slider:focus-visible {
    outline:none !important;
    border:none !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent;
}

.portfolio-card,
.image-button,
.portfolio-card img {
    -webkit-tap-highlight-color:transparent;
}

/* Nur echte Tastaturfokussierung eines Bildes sichtbar machen. */
.image-button:focus { outline:none; }
.image-button:focus-visible {
    outline:1px solid rgba(255,255,255,.55);
    outline-offset:-1px;
}

/* iPhone/iPad: Inhalte nicht unter Status-/Home-Bereiche schieben. */
@supports (padding: max(0px)) {
    .gallery-view {
        padding-left:env(safe-area-inset-left);
        padding-right:env(safe-area-inset-right);
    }

    .gallery-header {
        padding-top:max(26px, env(safe-area-inset-top));
    }

    .site-footer {
        padding-bottom:max(.55rem, env(safe-area-inset-bottom));
    }
}

/* Tablet und Smartphone: Flex ist in Mobile Safari für horizontale
   Bildstreifen stabiler als grid-auto-flow. */
@media (max-width:820px) {
    .slider-shell {
        display:block;
        width:100%;
        overflow:hidden;
        margin:auto 0;
    }

    .portfolio-slider {
        display:flex;
        align-items:center;
        gap:12px;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        padding:4px 9vw;
        scroll-padding-inline:9vw;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
    }

    .portfolio-card {
        flex:0 0 82vw;
        width:82vw;
        min-width:82vw;
        height:min(30dvh,280px);
        max-height:280px;
        scroll-snap-align:center;
        scroll-snap-stop:always;
    }

    .portfolio-card img {
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .slider-meta {
        width:82vw;
        max-width:calc(100% - 2rem);
    }
}

@media (max-width:520px) {
    .gallery-header {
        /* 100px Logo + ausreichend Luft, ohne Überlagerung. */
        flex-basis:calc(var(--logo-height) + 46px);
        min-height:calc(var(--logo-height) + 46px);
        padding-left:.55rem;
        padding-right:.55rem;
        padding-bottom:14px;
    }

    .brand-small {
        max-width:68vw;
    }

    .gallery-label {
        flex:0 0 32px;
        height:32px;
        line-height:24px;
        margin:10px .6rem 8px;
        font-size:.82rem;
        letter-spacing:.27em;
        white-space:nowrap;
    }

    .portfolio-slider {
        gap:10px;
        padding-left:8vw;
        padding-right:8vw;
        scroll-padding-inline:8vw;
    }

    .portfolio-card {
        flex-basis:84vw;
        width:84vw;
        min-width:84vw;
        height:min(29dvh,245px);
        max-height:245px;
    }

    .slider-meta {
        width:84vw;
        max-width:84vw;
        margin-top:6px;
    }

    /* Aktionsbutton bleibt erreichbar, ohne das Logo zu überdecken. */
    .gallery-actions {
        right:8px;
        top:8px;
    }

    .mode-button {
        max-width:132px;
        padding:.46rem .58rem;
        font-size:.54rem;
    }
}

/* Sehr schmale Telefone: etwas mehr vom Nachbarbild sichtbar lassen. */
@media (max-width:390px) {
    .portfolio-slider {
        padding-left:10vw;
        padding-right:10vw;
        scroll-padding-inline:10vw;
    }

    .portfolio-card {
        flex-basis:80vw;
        width:80vw;
        min-width:80vw;
    }

    .slider-meta {
        width:80vw;
        max-width:80vw;
    }

    .gallery-label {
        font-size:.74rem;
        letter-spacing:.22em;
    }
}

/* Niedrige mobile Viewports: weiterhin alles auf einer Seite halten. */
@media (max-width:820px) and (max-height:700px) {
    .portfolio-card {
        height:min(24dvh,190px);
        max-height:190px;
    }
}