/* Lokale UI-Vorschau. Verwendet die vorhandenen DESLOP-Tokens und Komponenten. */
:root{--dur-reveal:440ms;--reveal-shift:12px;--reveal-step:55ms}
.preview-hero{padding-bottom:var(--section-gap)}
.hero-grid{align-items:stretch;row-gap:28px;padding-top:clamp(36px,5vh,64px)}
.hero-copy{grid-column:span 7;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero-eyebrow{color:var(--text-secondary);max-width:40ch}
.hero-copy h1{font-size:max(var(--fs-display-m),clamp(44px,calc(min(6.4vw,8.4vh) / var(--schirm)),84px));line-height:var(--lh-display);max-width:18ch;text-wrap:initial;hyphens:none}
.hero-lede{font-size:var(--fs-body-lg);max-width:37ch;color:var(--text-secondary)}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hero-examples{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:var(--fs-body);font-weight:600}
.hero-stage>img{translate:0 var(--hero-before-y,0px)}
.hero-stage>figure{translate:0 var(--hero-after-y,0px)}
.preview-proof{display:grid;grid-template-columns:1fr 1fr;gap:24px var(--grid-gutter);align-items:end;padding:var(--s-7) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-block:var(--section-gap)}
.preview-proof>.ds-label{grid-column:1/-1}
.preview-proof h2{font-size:clamp(36px,4.5vw,60px)}
.preview-proof>p:last-child{font-size:var(--fs-body-lg);max-width:36ch;color:var(--text-secondary)}
.preview-scope{padding-block:var(--section-gap)}
.scope-grid{align-items:stretch;row-gap:28px}
.scope-copy{grid-column:span 7}
.scope-copy h2{margin-top:18px;max-width:13ch}
.scope-intro{font-size:var(--fs-body-lg);max-width:40ch;color:var(--text-secondary);margin:24px 0}
.scope-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.scope-list li{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.scope-list .ds-label{color:var(--text-muted);padding-top:5px}
.scope-list strong{font-weight:600}
.scope-list p{font-size:var(--fs-small);color:var(--text-secondary);max-width:43ch;margin-top:5px}
.scope-formats{grid-column:span 5;border-radius:var(--r-card);background:var(--murk);color:var(--cream);padding:var(--s-6);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.scope-formats>.ds-label{color:var(--cream)}
.scope-formats>p:last-child{color:var(--cream);font-size:var(--fs-small)}
.format-silhouettes{display:flex;align-items:flex-end;gap:12px;padding-block:34px;min-width:0}
.format-shape{border:2px solid var(--text-on-dark-muted);border-radius:10px;display:grid;place-items:center;flex:1;min-width:0;font-size:var(--fs-small);font-weight:600}
.format-square{aspect-ratio:1}.format-portrait{aspect-ratio:4/5}.format-story{aspect-ratio:9/16}
@media(min-width:768px){.hero-grid{min-height:510px} .hero-visual{min-height:380px}}
@media(max-width:767px){
  .hero-grid{padding-top:24px;row-gap:20px}
  .hero-copy{gap:18px}
  .hero-eyebrow{font-size:10px;letter-spacing:.07em;max-width:none}
  .hero-copy h1{font-size:clamp(38px,11.3vw,44px)}
  .hero-lede{font-size:17px;line-height:1.45;max-width:38ch}
  .hero-actions{gap:6px 20px}
  .hero-actions>a:first-child{min-height:54px}
  .hero-stage>img,.hero-stage>figure{translate:none}
  .preview-proof{grid-template-columns:1fr;gap:18px;padding-block:28px}
  .preview-proof h2{font-size:38px}
  .preview-proof>p:last-child{font-size:17px}
  .scope-intro{font-size:17px}
  .scope-list li{padding:16px 0}
  .scope-formats{padding:24px;gap:16px}
  .format-silhouettes{padding-block:10px;max-width:270px;align-self:center;width:100%}
  #kauf>.ds-grid>h2{max-width:none!important;font-size:38px}
  #kauf .ds-cards{gap:20px!important}
  #kauf .ds-cards>.sc-host-x>div{padding:24px!important;gap:20px!important}
  #kauf .ds-cards>.sc-host-x>div>ul>li{padding-block:10px!important}
  .hero-examples{font-size:var(--fs-body);gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .hero-stage>img,.hero-stage>figure{translate:none!important}
}

/* Header-Motive an der Höhe des Textblocks ausrichten. */
@media(min-width:768px){
  .hero-grid{min-height:0}
  .hero-visual{min-height:0}
  .hero-stage{height:100%;aspect-ratio:auto!important;container-type:size}
  .hero-stage>img,.hero-stage>figure{width:71.16cqh!important;translate:none}
}

.retainer-card{box-shadow:inset 0 0 0 2px var(--acid)}

#kauf .ds-cards li>span:first-child{display:none}