/* =========================================================
   Aperto – Birne Flow Layout
   Apple Photos-Style: gerechtfertigte Reihen im natürlichen
   Seitenverhältnis, identische Zeilenhöhe, kein Beschnitt.
   Gleiche Apple-DNA wie Birne (SF Pro · #F5F5F7 · Frosted Glass)
   ========================================================= */

/* ── Apple Systemfont + Farbsystem (identisch zu Birne) ── */
:root {
    --bf-font:       -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                     'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    --bf-row-h:      260px;   /* Zeilenhöhe Desktop */
    --bf-gap:        6px;
    --bf-radius:     12px;
    --g-bg:          #F5F5F7;
    --g-surface:     #FFFFFF;
    --g-border:      rgba(0, 0, 0, .08);
    --g-text:        #1D1D1F;
    --g-muted:       #6E6E73;
    --g-accent:      #0071E3;
    --background:    #F5F5F7;
}

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

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

/* ── Header — Apple Frosted Glass ── */
.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(--bf-font) !important;
    font-size:      1.05rem !important;
    font-weight:    600 !important;
    letter-spacing: -.3px !important;
    color:          #1D1D1F !important;
}

.site-nav a {
    font-family:    var(--bf-font) !important;
    font-size:      .875rem !important;
    color:          #1D1D1F !important;
    opacity:        .8;
    letter-spacing: -.01em !important;
    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(--bf-font);
    font-size:   .75rem;
}
.site-footer a       { color: #6E6E73; }
.site-footer a:hover { color: #0071E3; }

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

.gallery-title {
    font-family:    var(--bf-font);
    font-size:      clamp(1.8rem, 4.5vw, 2.8rem);
    font-weight:    700;
    color:          #1D1D1F;
    letter-spacing: -.045em;
    line-height:    1.06;
}

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

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

.bf-badge {
    background:     rgba(0, 0, 0, .05);
    color:          #6E6E73;
    border-radius:  980px;
    padding:        .15rem .65rem;
    font-size:      .68rem;
    font-weight:    500;
    letter-spacing: -.01em;
    border:         none;
}

.bf-back {
    display:        inline-flex;
    align-items:    center;
    gap:            .25rem;
    color:          #0071E3;
    font-family:    var(--bf-font);
    font-size:      .875rem;
    text-decoration: none;
    letter-spacing: -.01em;
    margin-bottom:  .75rem;
    transition:     opacity .15s;
}
.bf-back:hover { opacity: .72; }

/* ═══════════════════════════════════════════════════════
   JUSTIFIED ROWS — das Herzstück
   Jedes .bf-item bekommt via style="--ar:..." sein
   Seitenverhältnis. flex-grow proportional dazu →
   alle Bilder einer Reihe teilen exakt dieselbe Höhe.
   ═══════════════════════════════════════════════════════ */
.bf-gallery {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--bf-gap);
    padding-bottom: 4rem;
    /* Verhindert übermäßiges Strecken der letzten Reihe */
    align-content: flex-start;
}

.bf-item {
    /* flex: grow shrink basis — grow = Seitenverhältnis */
    flex:         var(--ar, 1.5) 1 calc(var(--ar, 1.5) * 140px);
    height:       var(--bf-row-h);
    overflow:     hidden;
    border-radius: var(--bf-radius);
    cursor:       pointer;
    position:     relative;
    background:   #E8E8ED;
    box-shadow:   0 1px 4px rgba(0, 0, 0, .07),
                  0 0 0 .5px rgba(0, 0, 0, .04);
    transition:   transform .4s cubic-bezier(.25,.46,.45,.94),
                  box-shadow .4s cubic-bezier(.25,.46,.45,.94);
    /* Sehr breite oder sehr schmale Einzelfotos begrenzen */
    max-width:    calc(var(--bf-row-h) * 3.2);
    min-width:    calc(var(--bf-row-h) * 0.5);
}

.bf-item:hover {
    transform:  translateY(-1px) scale(1.008);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .14),
                0 0 0 .5px rgba(0, 0, 0, .04);
}

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

.bf-item:hover img {
    transform: scale(1.04);
}

/* ── Overlay — Apple-minimal ── */
.bf-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .55) 0%,
        rgba(0, 0, 0, .15) 30%,
        transparent        58%
    );
    opacity:    0;
    transition: opacity .28s ease;
    display:    flex;
    align-items: flex-end;
    padding:    .85rem 1rem;
    gap:        .4rem;
}
.bf-item:hover .bf-overlay { opacity: 1; }

.bf-caption {
    flex:          1;
    color:         #FFFFFF;
    font-family:   var(--bf-font);
    font-size:     .78rem;
    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, .18) !important;
    backdrop-filter: blur(12px) !important;
    border:          1px solid rgba(255, 255, 255, .32) !important;
    color:           #FFFFFF !important;
    border-radius:   7px;
    font-family:     var(--bf-font);
    font-size:       .72rem;
    font-weight:     500;
    padding:         .28rem .6rem;
    cursor:          pointer;
    transition:      opacity .2s, background .15s !important;
    text-decoration: none;
    flex-shrink:     0;
}
.bf-item:hover .photo-download-btn  { opacity: 1 !important; }
.photo-download-btn:hover            { background: rgba(255, 255, 255, .34) !important; }

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

/* ── 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(--bf-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;
}

.text-muted { color: #6E6E73; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    :root { --bf-row-h: 220px; }
}
@media (max-width: 768px) {
    :root { --bf-row-h: 175px; --bf-gap: 4px; --bf-radius: 8px; }
}
@media (max-width: 480px) {
    :root { --bf-row-h: 130px; --bf-gap: 3px; --bf-radius: 6px; }
    .bf-item { min-width: calc(var(--bf-row-h) * 0.55); }
}