/*
====================================================

Familie-Leinberger.net
Datei........: michael/style.css  
Version......: 3.5.11
Autor........: Michael Leinberger & ChatGPT

====================================================
*/


/* =================================================
   01 - RESET
================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =================================================
   02 - GRUNDLAYOUT
================================================= */

html {

    font-size: 16px;

}

body {

    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(94,123,70,.20) 0%,
            rgba(94,123,70,0) 34%
        ),
        radial-gradient(
            circle at 82% 8%,
            rgba(255,255,255,.055) 0%,
            rgba(255,255,255,0) 28%
        ),
        linear-gradient(
            145deg,
            #090d09 0%,
            #121a11 38%,
            #1f2a1a 72%,
            #0b0f0b 100%
        );

}


/* =================================================
   03 - HEADER
================================================= */

.page-header {

    position: relative;

    min-height: min(760px, 80vh);

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    padding: 108px max(40px, calc((100vw - 1120px) / 2)) 92px;

    overflow: hidden;

    background-color: #0b0f0b;

}


.michael-hero-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: 40% center;

    z-index: 1;

}

.michael-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.16) 0%,
            rgba(0,0,0,.08) 42%,
            rgba(0,0,0,.42) 100%
        );

}

.michael-hero-card {

    position: relative;

    z-index: 4;

    width: min(380px, 100%);

    padding: 38px 38px 36px;

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

    color: #ffffff;

    background: rgba(255,248,236,.15);

    box-shadow:
        0 24px 58px rgba(0,0,0,.32);

    backdrop-filter: blur(18px) saturate(112%);
    -webkit-backdrop-filter: blur(18px) saturate(112%);

}

@media (min-width: 761px) {

    .michael-hero-card {

        transform: translate(28px, 28px);

    }

}

.michael-hero-card h1 {

    font-size: clamp(2.6rem, 5vw, 4.4rem);

    font-weight: 300;

    letter-spacing: 0;

}

.michael-hero-age {

    margin-top: 18px;

    font-size: 1.18rem;

    font-weight: 600;

}

.michael-hero-work {

    margin-top: 12px;

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

    font-size: 1rem;

    line-height: 1.55;

}

.michael-hero-spotify {

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

    gap: 8px;

    margin-top: 24px;

    color: #ffffff;

    font-size: .95rem;

    text-decoration: none;

    opacity: .88;

    transition: .25s ease;

}


.michael-hero-spotify:hover {

    opacity: 1;

    transform: translateX(3px);

}

.michael-hero-quote {

    margin-top: 28px;

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

    font-size: .98rem;

    font-style: italic;

    line-height: 1.65;

}

.back-link {

    position: fixed;

    top: 46%;
    left: 28px;

    z-index: 20;

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

    padding: 10px 14px;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;

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

    background: rgba(10,14,10,.36);

    font-size: .94rem;

    text-decoration: none;

    box-shadow:
        0 12px 28px rgba(0,0,0,.20);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;

}

.back-link:hover {

    color: #ffffff;

    border-color: rgba(255,255,255,.28);

    background: rgba(255,248,236,.13);

    transform: translateX(-3px);

}

.michael-hero-scroll {

    position: absolute;

    left: 50%;
    bottom: 26px;

    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: center;

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

    font-size: .86rem;

    letter-spacing: 0;

    text-align: center;

    text-shadow:
        0 2px 14px rgba(0,0,0,.48);

    transform: translateX(-50%);

    animation: heroScrollHint 2.8s ease-in-out infinite;

}

.michael-hero-scroll span {

    font-size: 1.18rem;
    line-height: 1;

}

.michael-hero-scroll p {

    margin-top: 8px;

}

@keyframes heroScrollHint {

    0%,
    100% {

        opacity: .68;
        transform: translate(-50%, 0);

    }

    50% {

        opacity: .96;
        transform: translate(-50%, 6px);

    }

}


@media (max-width: 760px) {

    .page-header {

        min-height: 100svh;

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

        padding: 138px 20px 82px;

    }

    .michael-hero-image {

        position: absolute;

        object-fit: cover;
        object-position: center 38%;

    }

    .michael-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.18) 0%,
                rgba(0,0,0,.20) 42%,
                rgba(0,0,0,.62) 100%
            );

    }

    .back-link {

        position: fixed;

        top: 14px;
        left: 16px;

        width: fit-content;

        padding: 9px 12px;

        font-size: .92rem;

        transform: none;

    }

    .back-link:hover {

        transform: none;

    }

    .michael-hero-card {

        width: 100%;

        padding: 30px 28px;

    }

    .michael-hero-scroll {

        bottom: 22px;

        width: calc(100% - 40px);

    }

}


/* =================================================
   04 - GALERIE
================================================= */

.gallery-section {

    width: min(1120px, calc(100% - 40px));

    margin: 0 auto;

    padding: 32px 0 82px;

}

.section-heading {

    margin-bottom: 28px;

}

.section-heading h2 {

    font-size: 1.35rem;

    font-weight: 400;

}

.section-heading p {

    margin-top: 8px;

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

    font-size: .98rem;

    line-height: 1.6;

}

.gallery-grid {

    display: grid;

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

    gap: 24px;

}

.gallery-card {

    position: relative;

    overflow: hidden;

    min-height: 320px;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 8px;

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

    cursor: pointer;

    box-shadow:
        0 18px 38px rgba(0,0,0,.22);

    transition:
        transform .32s cubic-bezier(.22, .61, .36, 1),
        box-shadow .32s cubic-bezier(.22, .61, .36, 1),
        border-color .32s cubic-bezier(.22, .61, .36, 1);

}


.gallery-card::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 58%;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.48) 42%,
            rgba(0,0,0,.78) 100%
        );

    pointer-events: none;

    z-index: 1;

}

.gallery-card:focus-visible {

    outline: 2px solid rgba(255,255,255,.62);
    outline-offset: 4px;

}

.gallery-card:hover {

    transform: translateY(-3px);

    border-color: rgba(255,255,255,.18);

    box-shadow:
        0 30px 60px rgba(0,0,0,.38);

}

.gallery-card img {

    display: block;

    width: 100%;
    height: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    transition:
        transform .32s cubic-bezier(.22, .61, .36, 1),
        filter .32s cubic-bezier(.22, .61, .36, 1);

}

.gallery-card:hover img {

    transform: scale(1.03);
    filter: brightness(1.08) contrast(1.035);

}

.gallery-card-content {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 56px 20px 22px;

}

.gallery-card h3 {

    margin-bottom: 8px;

    font-size: 1rem;

    font-weight: 500;

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

}

.gallery-card p {

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

    font-size: .96rem;

    line-height: 1.5;

    text-shadow:
        0 2px 10px rgba(0,0,0,.50);

}

.gallery-message {

    grid-column: 1 / -1;

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

    line-height: 1.6;

}


/* =================================================
   05 - LIGHTBOX
================================================= */

.gallery-lightbox {

    position: fixed;

    inset: 0;

    z-index: 100;

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

    padding: 34px;

    background: rgba(0,0,0,.84);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .26s ease,
        visibility 0s linear .26s;

}

.gallery-lightbox.visible {

    opacity: 1;

    visibility: visible;

    transition:
        opacity .26s ease,
        visibility 0s linear 0s;

}

.lightbox-content {

    width: min(1240px, 100%);
    max-height: calc(100vh - 68px);

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    align-items: center;

    gap: 34px;

    transform: scale(.96);

    opacity: 0;

    transition:
        opacity .26s ease,
        transform .26s ease;

}

.gallery-lightbox.visible .lightbox-content {

    opacity: 1;

    transform: scale(1);

}

.lightbox-image-area {

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

    min-width: 0;

}

.lightbox-content img {

    display: block;

    max-width: 100%;
    max-height: calc(100vh - 92px);

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 8px;

    box-shadow:
        0 24px 76px rgba(0,0,0,.50);

    opacity: 1;

    transition:
        opacity .24s ease;

}

.lightbox-content.changing img,
.lightbox-content.changing .lightbox-info-panel {

    opacity: 0;

}

.gallery-lightbox.visible .lightbox-content img {

    animation:
        albumFadeUp .38s ease both;

}

.gallery-lightbox.visible .lightbox-info-panel {

    animation:
        albumFadeUp .38s ease .12s both;

}

@keyframes albumFadeUp{

    from{

        opacity: 0;

        transform: translateY(10px);

    }

    to{

        opacity: 1;

        transform: translateY(0);

    }

}

.lightbox-info-panel {

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;

    min-height: 456px;

    padding: 42px 40px;

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

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

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

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 1;

    transition:
        opacity .24s ease;

}

.lightbox-text-content {

    flex: 1;

}

.lightbox-info-panel strong {

    display: block;

    margin-bottom: 28px;

    color: #ffffff;

    font-size: 1.05rem;
    font-weight: 600;

}

.lightbox-info-panel span {

    display: block;

    font-size: 1.2rem;
    line-height: 1.9;

    white-space: pre-line;

}

.lightbox-album-navigation {

    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;

    margin-top: 34px;

    gap: 14px;

}

.lightbox-album-button {

    flex: 1;

    padding: 10px 16px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;

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

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

    font: inherit;
    font-size: .92rem;

    cursor: pointer;

    transition:
        color .24s ease,
        background .24s ease,
        border-color .24s ease,
        transform .24s ease;

}

.lightbox-album-button:hover {

    color: #ffffff;

    border-color: rgba(255,255,255,.34);

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

    transform: translateY(-2px);

}

.lightbox-album-button:disabled {

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

    border-color: rgba(255,255,255,.08);

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

    cursor: default;

    transform: none;

}

.lightbox-album-button:disabled:hover {

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

    border-color: rgba(255,255,255,.08);

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

    transform: none;

}

.lightbox-counter {

    margin-top: 18px;

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

    font-size: .82rem;

    text-align: center;

}

.lightbox-close {

    position: absolute;

    top: 24px;
    right: 24px;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;

    color: #ffffff;

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

    font-size: 1.8rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background .24s ease,
        transform .24s ease,
        border-color .24s ease;

}

.lightbox-close:hover {

    border-color: rgba(255,255,255,.34);

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

    transform: scale(1.04);

}

@media (max-width: 860px) {

    .gallery-lightbox {

        align-items: flex-start;

        padding: 68px 18px 24px;

        overflow-y: auto;

    }

    .lightbox-content {

        grid-template-columns: 1fr;

        gap: 22px;

        max-height: none;

    }

    .lightbox-content img {

        max-height: 52vh;

    }

    .lightbox-info-panel {

        min-height: auto;

        padding: 30px 26px;

    }

    .lightbox-info-panel span {

        font-size: 1.1rem;

    }

    .lightbox-album-navigation {

        margin-top: 28px;

    }

    .lightbox-album-button {

        padding: 10px 12px;

        font-size: .88rem;

    }

}