/* Werbefotograf: Regeln aus Foto.dc.html, die nicht in basis.css stehen. */
.hero{position:relative;min-height:calc(100dvh - var(--nav));display:flex;flex-direction:column;overflow:hidden}
.dias{position:absolute;inset:0;background:var(--panel)}
.dia{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 900ms ease}
.dia.an{opacity:1}
.dia img{width:100%;height:100%;object-fit:cover;display:block}
.dias::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,12,.5) 0%,rgba(14,15,12,0) 28%,rgba(14,15,12,.2) 52%,rgba(14,15,12,.94) 100%);pointer-events:none}
.hero .krumen{position:relative;z-index:2;padding-top:24px}
.hero-in{position:relative;z-index:2;margin-top:auto;padding-bottom:40px}
.hero .riesig{font-size:clamp(32px,10vw,160px)}
.regie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(242,243,238,.22)}
.balken{display:flex;gap:6px;flex:1;min-width:220px;max-width:520px}
.balken button{flex:1;height:44px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center}
.balken i{display:block;width:100%;height:3px;background:rgba(242,243,238,.28);position:relative;overflow:hidden}
.balken i::after{content:"";position:absolute;inset:0;background:var(--tx);transform:scaleX(0);transform-origin:left}
.balken .war i::after{transform:scaleX(1)}
.balken .jetzt i::after{transform:scaleX(1)}
.regie-r{display:flex;align-items:center;gap:12px}
.dia-text{min-width:0;font-size:15px;color:#D9DCD2;font-variant-numeric:tabular-nums}
.dia-text b{color:var(--tx);font-weight:600}
.intro{padding-top:130px;padding-bottom:110px}
.intro p{margin:0;font-size:19px;line-height:1.65;color:#C9CDC0;max-width:60ch}
.intro p+p{margin-top:20px}
.felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ln)}
.felder article{padding:36px 36px 40px 0;border-bottom:1px solid var(--ln)}
.felder article:not(:nth-child(3n+1)){padding-left:36px;border-left:1px solid var(--ln)}
.felder h3{margin:0 0 12px;font:800 28px/1.05 "Bricolage Grotesque",sans-serif;letter-spacing:-0.02em}
.felder p{margin:0;font-size:16px;line-height:1.6;color:var(--mut)}
.filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:40px 0 44px}
.chip{min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--ln2);background:transparent;color:var(--tx);font:600 15px/1 "Instrument Sans",sans-serif;cursor:pointer;transition:transform 160ms ease-out,background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--gr);border-color:var(--gr);color:var(--ink)}
.chip span{font-variant-numeric:tabular-nums;opacity:.7;margin-left:6px}
.galerie{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.galerie figure{margin:0;flex:0 0 calc((100% - 48px) / 3)}
.galerie button{display:block;position:relative;width:100%;padding:0;border:0;background:var(--panel);cursor:zoom-in;aspect-ratio:3/2;overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 700ms var(--ease-out)}
.galerie figcaption{margin-top:12px;display:flex;justify-content:space-between;gap:16px;font-size:15px;color:var(--mut)}
.galerie figcaption b{color:var(--tx);font-weight:600}
.gesch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px}
.gesch .bild{aspect-ratio:3/2;overflow:hidden;background:var(--panel)}
.gesch img{width:100%;height:100%;object-fit:cover;display:block}
.gesch h3{margin:22px 0 10px;font:800 28px/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-0.02em}
.gesch p{margin:0;font-size:17px;line-height:1.65;color:var(--mut);max-width:60ch}
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,11,8,.96);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:20px 24px 24px}
@starting-style{.lb{opacity:0}}
.lb{transition:opacity 220ms var(--ease-out)}
.lb-kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#D9DCD2;font-size:15px;font-variant-numeric:tabular-nums}
.lb-bild{display:flex;align-items:center;justify-content:center;min-height:0;padding:16px 0}
.lb-bild img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lb-fuss{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lb-fuss p{margin:0;font-size:16px;color:#D9DCD2}
.lb-fuss b{color:var(--tx)}
@media (prefers-reduced-motion:no-preference){.dia.an img{animation:ken 7s linear both}@keyframes ken{from{transform:scale(1.08)}to{transform:scale(1)}}
.laeuft .balken .jetzt i::after{animation:fuell 6.5s linear both}@keyframes fuell{from{transform:scaleX(0)}to{transform:scaleX(1)}}}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){.galerie figure{animation:auf linear both;animation-timeline:view();animation-range:entry 0% cover 30%}@keyframes auf{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}}}
@media (hover:hover) and (pointer:fine){.galerie button:hover img{transform:scale(1.04)}.chip:hover{border-color:var(--gr)}.balken button:hover i{background:rgba(242,243,238,.5)}}
@media (max-width:1100px){.galerie figure{flex-basis:calc((100% - 24px) / 2)}.felder{grid-template-columns:repeat(2,minmax(0,1fr))}.felder article:nth-child(n){padding-left:0;border-left:0}.felder article:nth-child(2n){padding-left:28px;border-left:1px solid var(--ln)}}
@media (max-width:900px){.gesch{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.galerie{gap:28px}.galerie figure{flex-basis:100%}.felder{grid-template-columns:minmax(0,1fr)}.felder article:nth-child(n){padding:28px 0;border-left:0}.intro{padding-top:90px;padding-bottom:80px}.regie{margin-top:28px}.lb{padding:12px 12px 16px}}
/* Ersatz für Inline Stile des Entwurfs */
.hero h1{margin:0}
.hero .wrap{position:relative;z-index:2}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.dia-text{margin:0}
.intro .zwei{align-items:start}
.intro .h2{font-size:clamp(44px,5vw,80px)}
.ab120{padding-bottom:120px}
.ab130{padding-bottom:130px}
.ab150{padding-bottom:150px}
.kopf56{margin-bottom:56px}
.ablauf-titel{margin-bottom:48px}
.q32{aspect-ratio:3/2}
.lb[hidden]{display:none}
.hero>.wrap{width:100%}
.hero .krumen ol{align-items:center}
.dia-lauf svg{display:block}
.hero.laeuft .ic-play,.hero:not(.laeuft) .ic-pause{display:none}