/* =========================================================
   Aperto – Birne Layout
   Apple-inspiriert: SF Pro · Frosted Glass · 18 px Radius
   ========================================================= */

/* ── Apple Systemfont-Stack (SF Pro via OS) ── */
:root {
    --birne-font:    -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                     'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    --g-bg:          #F5F5F7;
    --g-surface:     #FFFFFF;
    --g-border:      rgba(0, 0, 0, .08);
    --g-text:        #1D1D1F;
    --g-muted:       #6E6E73;
    --g-accent:      #0071E3;
    --background:    #F5F5F7;
}

/* ── Reset & Basis ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background:                 #F5F5F7;
    color:                      #1D1D1F;
    font-family:                var(--birne-font);
    -webkit-font-smoothing:     antialiased;
    -moz-osx-font-smoothing:   grayscale;
}

/* ── Header — Frosted Glass (apple.com) ── */
.site-header {
    background:         rgba(255, 255, 255, .72) !important;
    backdrop-filter:    saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom:      1px solid rgba(0, 0, 0, .08) !important;
}

.site-logo {
    font-family:    var(--birne-font) !important;
    font-size:      1.05rem !important;
    font-weight:    600 !important;
    letter-spacing: -.3px !important;
    color:          #1D1D1F !important;
}

.site-nav a {
    font-family:    var(--birne-font) !important;
    font-size:      .875rem !important;
    font-weight:    400 !important;
    color:          #1D1D1F !important;
    letter-spacing: -.01em !important;
    opacity:        .85;
    transition:     opacity .15s, color .15s;
}

.site-nav a:hover {
    color:   #0071E3 !important;
    opacity: 1;
}

/* ── Footer ── */
.site-footer {
    background:  #F5F5F7;
    border-top:  1px solid rgba(0, 0, 0, .08);
    color:       #6E6E73;
    font-family: var(--birne-font);
    font-size:   .75rem;
}

.site-footer a       { color: #6E6E73; }
.site-footer a:hover { color: #0071E3; }

/* ── Gallery Header — zentriert, Apple-Style ── */
.gallery-header {
    padding:    3.5rem 0 2rem;
    text-align: center;
}

.gallery-title {
    font-family:    var(--birne-font);
    font-size:      clamp(2rem, 5vw, 3rem);
    font-weight:    700;
    color:          #1D1D1F;
    letter-spacing: -.045em;
    line-height:    1.06;
    margin-bottom:  .5rem;
}

.gallery-meta {
    color:          #6E6E73;
    font-size:      .875rem;
    font-family:    var(--birne-font);
    letter-spacing: -.01em;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            .6rem;
    flex-wrap:      wrap;
}

.gallery-desc {
    color:        #6E6E73;
    font-size:    1rem;
    font-family:  var(--birne-font);
    line-height:  1.65;
    margin:       .75rem auto 0;
    max-width:    560px;
    letter-spacing: -.01em;
}

/* ── Badge ── */
.badge-muted {
    background:     rgba(0, 0, 0, .05);
    color:          #6E6E73;
    border:         none;
    border-radius:  980px;
    padding:        .15rem .65rem;
    font-family:    var(--birne-font);
    font-size:      .7rem;
    font-weight:    500;
    letter-spacing: -.01em;
}

/* ── Back-Link ── */
.birne-back {
    display:        inline-flex;
    align-items:    center;
    gap:            .25rem;
    color:          #0071E3;
    font-family:    var(--birne-font);
    font-size:      .875rem;
    font-weight:    400;
    text-decoration: none;
    letter-spacing: -.01em;
    margin-bottom:  .75rem;
    transition:     opacity .15s;
}

.birne-back:hover { opacity: .75; }

/* ── Grid — sauberes Raster wie apple.com ── */
.birne-gallery {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   1rem;
    padding-bottom:        4rem;
}

/* ── Karte ── */
.birne-item {
    position:     relative;
    border-radius: 18px;
    overflow:     hidden;
    cursor:       pointer;
    background:   #E8E8ED;
    box-shadow:   0 2px 8px rgba(0, 0, 0, .06),
                  0 0 0 .5px rgba(0, 0, 0, .04);
    transition:   transform .45s cubic-bezier(.25,.46,.45,.94),
                  box-shadow .45s cubic-bezier(.25,.46,.45,.94);
    display:      block;
}

.birne-item:hover {
    transform:  scale(1.025);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14),
                0 0 0 .5px rgba(0, 0, 0, .04);
}

.birne-item img {
    width:      100%;
    height:     auto;
    display:    block;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}

.birne-item:hover img {
    transform: scale(1.03);
}

/* ── Overlay — minimal, nur unterer Gradient ── */
.birne-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .52)  0%,
        rgba(0, 0, 0, .18)  28%,
        transparent         56%
    );
    opacity:    0;
    transition: opacity .3s ease;
    display:    flex;
    align-items: flex-end;
    padding:    1rem 1.1rem;
    gap:        .4rem;
}

.birne-item:hover .birne-overlay { opacity: 1; }

.birne-caption {
    flex:          1;
    color:         #FFFFFF;
    font-family:   var(--birne-font);
    font-size:     .8rem;
    font-weight:   500;
    letter-spacing: -.01em;
    line-height:   1.3;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* ── Download-Button ── */
.photo-download-btn {
    opacity:         0 !important;
    background:      rgba(255, 255, 255, .2) !important;
    backdrop-filter: blur(12px) !important;
    border:          1px solid rgba(255, 255, 255, .35) !important;
    color:           #FFFFFF !important;
    border-radius:   8px;
    font-family:     var(--birne-font);
    font-size:       .75rem;
    font-weight:     500;
    padding:         .3rem .65rem;
    cursor:          pointer;
    transition:      opacity .2s, background .15s !important;
    text-decoration: none;
}

.birne-item:hover .photo-download-btn { opacity: 1 !important; }

.photo-download-btn:hover {
    background: rgba(255, 255, 255, .38) !important;
}

/* ── Share Bar ── */
.share-bar { border-top-color: rgba(0, 0, 0, .08) !important; }

.share-btn {
    background:     #FFFFFF !important;
    border:         1px solid rgba(0, 0, 0, .12) !important;
    border-radius:  980px !important;
    color:          #1D1D1F !important;
    font-family:    var(--birne-font) !important;
    font-size:      .8rem !important;
    font-weight:    500 !important;
    transition:     background .2s, color .2s, border-color .2s !important;
}

.share-btn:hover {
    background:   #0071E3 !important;
    border-color: #0071E3 !important;
    color:        #FFFFFF !important;
}

/* ── Kaufen-Badge: auf hellem Hintergrund sichtbar ── */
.sale-badge {
    background: rgba(0, 113, 227, .88);
    color: #fff;
}

/* ── Hilfstexte ── */
.text-muted { color: #6E6E73; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .birne-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .birne-gallery { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}
@media (max-width: 480px) {
    .birne-gallery { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .gallery-title { letter-spacing: -.03em; }
}