/* ════════════════════════════════════════════════════════════════
   LEISTUNGEN · FOTOGRAFIE — Hero (Full-Bleed, distinct) + Bento-Lesbarkeit
   Scoped auf .leistungen-foto. Theme-safe: Weiß auf Scrim = modus-unabhängig.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero: Full-Bleed-Bild + Text-Overlay (eigener Aufbau, nicht der Grafik-Split) ── */
.leistungen-foto .lf-hero {
    position: relative; min-height: 80vh;
    display: flex; align-items: flex-end; overflow: hidden;
    border-radius: 12px;
    margin-block: clamp(1rem, 3vh, 2rem) clamp(2rem, 5vh, 3.5rem);
}
.leistungen-foto .lf-hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.leistungen-foto .lf-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(15,10,6,0.35) 0%, transparent 26%, rgba(15,10,6,0.5) 58%, rgba(15,10,6,0.92) 100%),
        linear-gradient(90deg, rgba(15,10,6,0.62), transparent 62%);
}
.leistungen-foto .lf-hero site-breadcrumb {
    position: absolute; top: clamp(1rem, 3vh, 1.6rem); left: clamp(1.5rem, 4vw, 3rem); z-index: 3;
}
.leistungen-foto .lf-hero-overlay {
    position: relative; z-index: 2; color: #fff;
    padding: clamp(1.6rem, 4vw, 3.2rem); width: 100%; max-width: 760px;
}
.leistungen-foto .lf-hero-eyebrow {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: rgba(255,255,255,0.72);
    display: inline-flex; align-items: center; gap: 0.7rem;
}
.leistungen-foto .lf-hero-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); }
.leistungen-foto .lf-hero .case-title {
    color: #fff; margin: 1.1rem 0 1.2rem; text-shadow: 0 2px 26px rgba(0,0,0,0.45);
}
.leistungen-foto .lf-hero-lead {
    font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55;
    color: rgba(255,255,255,0.9); max-width: 46ch; margin-bottom: 1.7rem;
}
.leistungen-foto .lf-hero-lead b { color: #fff; }
.leistungen-foto .lf-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Bento „Was ich fotografiere": Text in BEIDEN Modi lesbar ── */
/* Bild abdunkeln + Scrim + weiße Schrift mit Shadow = immer lesbar, theme-unabhängig. */
.leistungen-foto .ld-bento-img,
.leistungen-foto .ld-bento-inset { filter: brightness(0.58) saturate(1.05) !important; }
.leistungen-foto .ld-bento-item { position: relative; }
.leistungen-foto .ld-bento-item::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,7,4,0.12) 0%, rgba(10,7,4,0.52) 55%, rgba(10,7,4,0.88) 100%);
}
.leistungen-foto .ld-bento-num,
.leistungen-foto .ld-bento-item h3,
.leistungen-foto .ld-bento-item p,
.leistungen-foto .ld-bento-tag {
    position: relative; z-index: 2; color: #fff !important; text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.leistungen-foto .ld-bento-item p { color: rgba(255,255,255,0.92) !important; }
.leistungen-foto .ld-bento-tag { color: rgba(255,255,255,0.8) !important; }

/* ── Foto-Streifen „Schon mal sehen?" (build-generierbar, Marker foto-strip:start/end) ── */
.leistungen-foto .lf-photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: 1.8rem 0 2rem; }
@media (max-width: 760px) { .leistungen-foto .lf-photo-strip { grid-template-columns: repeat(2, 1fr); } }
.leistungen-foto .lf-strip-tile { aspect-ratio: 1; overflow: hidden; border-radius: 8px; border: 1px solid var(--tdeco); display: block; }
.leistungen-foto .lf-strip-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) { .leistungen-foto .lf-strip-tile:hover img { transform: scale(1.07); } }

/* ── Breadcrumb im Full-Bleed-Hero: theme-fest dark-glass + weiß (liegt immer auf dunklem Bild) ── */
.leistungen-foto .lf-hero .bc-path { background: rgba(20,14,8,0.5) !important; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.18) !important; }
.leistungen-foto .lf-hero .bc-label,
.leistungen-foto .lf-hero .bc-crumb,
.leistungen-foto .lf-hero .bc-sep { color: rgba(255,255,255,0.9) !important; }
.leistungen-foto .lf-hero .bc-icon { color: rgba(255,255,255,0.75) !important; }
.leistungen-foto .lf-hero .bc-crumb.is-active .bc-label,
.leistungen-foto .lf-hero .bc-crumb.is-active .bc-icon { color: #fff !important; }

/* ── Hero-CTA weiß (Full-Bleed-Hero ist immer dunkel, in beiden Modi) ── */
.leistungen-foto .lf-hero .btn-briefing--primary { background: #fff !important; color: #1d1d1d !important; border-color: #fff !important; }
.leistungen-foto .lf-hero .btn-briefing--primary:hover { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* ── Hero-Headline em (Playfair-Italic) weiß auf dunklem Bild, beide Modi ── */
.leistungen-foto .lf-hero .case-title em { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.leistungen-foto .lf-hero .case-title .title-dot { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }