/* ═══════════════════════════════════════════════════════════════
   SMO Startseite V3 "Agency Showreel" (03.10.2026)
   Typo + echte Arbeit + Daten + Raum. Keine Cards.
   Baut auf .smo-work (cases-v2.css) auf. Tokens: --w-bg/--w-fg/--w-mute/--w-line/--w-accent.
   Motion-Tokens: micro 160 / ui 240 / reveal 450 / scene 750 ms, ein Easing.
   ═══════════════════════════════════════════════════════════════ */
.smo-home3 {
    --h-micro: 160ms; --h-ui: 240ms; --h-reveal: 450ms; --h-scene: 750ms;
    --h-display: clamp(52px, 9.2vw, 168px);
    --h-section: clamp(40px, 6.2vw, 104px);
}
/* Enfold setzt overflow:hidden auf #wrap_all/body -> position:sticky waere wirkungslos. clip erzeugt keinen Scroll-Container. */
body:has(.smo-home3) #wrap_all, body:has(.smo-home3) #main { overflow: clip !important; }
body:has(.smo-home3) { overflow-x: clip !important; overflow-y: visible !important; }
html:has(.smo-home3) { overflow-x: clip; }
.smo-home3 section { position: relative; }
.smo-home3 .w-wrap { position: relative; }
/* immer dunkle Szenen (cinematic), unabhaengig vom Theme */
.smo-home3 .h-hero, .smo-home3 .h-wall, .smo-home3 .h-cxp {
    --w-bg: #0a0a0a; --w-fg: #f2f2ef; --w-mute: rgba(242,242,239,.58); --w-line: rgba(242,242,239,.16);
    background: var(--w-bg); color: var(--w-fg);
}
/* Anker-Farben (cases.css faerbt #smo-cases-wrap a blau) */
#smo-cases-wrap.smo-home3 a { color: inherit; }
#smo-cases-wrap.smo-home3 .h-link { color: var(--w-fg); }
#smo-cases-wrap.smo-home3 .h-link:hover { color: var(--w-accent); }

/* Masken-Reveal (Typografie zeilenweise) */
.h-line { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.h-line > span { display: block; }
.w-js .h-line > span { transform: translateY(108%); transition: transform .9s var(--w-ease) calc(var(--li, 0) * 90ms); }
.w-js .is-in .h-line > span, .w-js .h-line.is-in > span { transform: none; }
/* Zahlen rollen (keine Count-ups) */
.h-ch { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.h-ch > i { display: block; font-style: normal; }
.w-js .h-ch > i { transform: translateY(105%); transition: transform .8s var(--w-ease) calc(var(--ci, 0) * 45ms); }
.w-js .is-in .h-ch > i, .w-js .h-ch.is-in > i { transform: none; }

.h-display { font-size: var(--h-display); line-height: .9; --lh: .9; font-weight: 700; letter-spacing: -.05em; text-transform: uppercase; }
.h-section-title { font-size: var(--h-section); line-height: .92; --lh: .92; font-weight: 700; letter-spacing: -.045em; text-transform: uppercase; }
.h-link { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 6px; transition: color var(--h-ui) ease; }
.h-micro { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--w-mute); }
.h-kpis { display: flex; flex-wrap: wrap; gap: 20px clamp(24px, 3.5vw, 56px); margin: clamp(20px, 2.4vw, 36px) 0; }
.h-kpis strong { display: block; font-size: clamp(34px, 3.6vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -.035em; }
.h-kpis span { display: block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--w-mute); }
.h-kpis--lg strong { font-size: clamp(44px, 5.4vw, 96px); }

/* ─── 01 HERO / SHOWREEL ─── */
.h-hero { min-height: 100svh; display: flex; align-items: flex-end; padding: 150px 0 clamp(40px, 5vw, 72px); overflow: hidden; }
.h-hero__reel { position: absolute; inset: -2%; will-change: transform; transition: transform .6s var(--w-ease); }
.h-hero__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); clip-path: inset(0 0 0 100%); transition: opacity 0s linear .9s, clip-path .9s var(--w-ease); }
.h-hero__clip.is-on { opacity: 1; clip-path: inset(0); z-index: 2; transition: clip-path .9s var(--w-ease); animation: h-slow 14s linear forwards; }
.h-hero__clip.is-prev { opacity: 1; z-index: 1; transition: none; }
@keyframes h-slow { from { transform: scale(1); } to { transform: scale(1.04); } }
.h-hero__scrim { position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top, rgba(10,10,10,.88) 0%, rgba(10,10,10,.28) 48%, rgba(10,10,10,.5) 100%); }
.h-hero__inner { z-index: 4; }
.h-hero__title { font-size: clamp(34px, 7.2vw, 132px); line-height: .94; --lh: .94; font-weight: 700; letter-spacing: -.05em; text-transform: uppercase; margin-top: clamp(20px, 3vw, 48px); }
.h-hero__title .h-line { white-space: nowrap; }
@media (max-width: 767px) { .h-hero__title { font-size: 9.2vw; } }
.h-hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 64px); }
.h-hero__sub { font-size: clamp(13px, 1.1vw, 16px); line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--w-mute); margin: 0; }
.h-cta { display: inline-flex; align-items: center; gap: 12px; padding: 20px 34px; border: 1px solid rgba(242,242,239,.7); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: background var(--h-ui) ease, color var(--h-ui) ease, transform .3s var(--w-ease); will-change: transform; }
#smo-cases-wrap.smo-home3 .h-cta:hover { background: #f2f2ef; color: #0a0a0a; }

/* ─── 02 CLIENTS (Logos) ─── */
.h-clients { padding: clamp(26px, 3vw, 44px) 0; border-bottom: 1px solid var(--w-line); overflow: hidden; }
.h-clients__inner { display: flex; align-items: center; gap: clamp(20px, 3vw, 56px); }
.h-clients__inner .w-label { margin: 0; white-space: nowrap; flex: none; }
.h-clients__marquee { display: flex; width: max-content; min-width: 0; flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.h-clients__list { display: flex; flex: none; align-items: center; gap: clamp(36px, 4.4vw, 76px); padding-right: clamp(36px, 4.4vw, 76px); list-style: none; margin: 0; animation: h-marq 80s linear infinite; will-change: transform; }
.h-clients__marquee:hover .h-clients__list { animation-play-state: paused; }
@keyframes h-marq { to { transform: translate3d(-100%, 0, 0); } }
.h-clients__list li { flex: none; margin: 0; }
.h-clients__list a { display: flex; align-items: center; height: 44px; opacity: .85; transition: opacity var(--h-ui) ease, transform .4s var(--w-ease); }
.h-clients__list a:hover { opacity: 1; transform: scale(1.06); }
.h-logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; display: block; }
/* zwei Dateien je Logo (zentrale Bibliothek): hell = Original, dunkel = weisse Variante */
.h-logo--white { display: none; }
html[data-site-theme="dark"] .h-logo--color { display: none; }
html[data-site-theme="dark"] .h-logo--white { display: block; opacity: .9; }
.h-clients__preview { position: fixed; left: 0; top: 0; z-index: 50; width: 180px; aspect-ratio: 4/5; pointer-events: none; opacity: 0; transform: translate3d(-200px,-200px,0); transition: opacity var(--h-ui) ease; overflow: hidden; background: var(--w-frame); }
.h-clients__preview.is-on { opacity: 1; }
.h-clients__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 989px) { .h-clients__preview { display: none; } .h-clients__inner { flex-direction: column; align-items: flex-start; gap: 14px; } .h-clients__marquee { width: 100%; flex: none; } .h-logo { height: 28px; max-width: 120px; } .h-clients__list { animation-duration: 60s; } }
@media (prefers-reduced-motion: reduce) { .h-clients__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .h-clients__list { animation: none; } .h-clients__list[aria-hidden="true"] { display: none; } }

/* ─── 03 SELECTED WORK / CASE STAGE ─── */
.h-stage { height: calc(var(--n) * 100svh + 30svh); }
.h-stage__sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.h-stage__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 4vw, 80px); align-items: center; width: 100%; padding-top: 70px; }
.h-stage__head { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0 12px; }
.h-stage__title { font-size: clamp(40px, 5.6vw, 96px); line-height: .92; --lh: .92; font-weight: 700; letter-spacing: -.045em; text-transform: uppercase; }
.h-stage__count { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--w-mute); font-variant-numeric: tabular-nums; }
.h-stage__media { position: relative; height: min(72svh, 740px); aspect-ratio: 9 / 16; background: var(--w-frame); }
.h-stage__frame { position: absolute; inset: 0; display: block; overflow: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .01s linear var(--h-scene), clip-path var(--h-scene) var(--w-ease); }
.h-stage__frame.is-on { opacity: 1; clip-path: inset(0); z-index: 2; transition: clip-path var(--h-scene) var(--w-ease); }
.h-stage__frame .w-media { transform: scale(1.04); transition: transform 1.4s var(--w-ease); }
.h-stage__frame.is-on .w-media { transform: scale(1); }
.h-stage__texts { display: grid; align-self: center; }
.h-stage__text { grid-area: 1 / 1; opacity: 0; transform: translateY(26px); pointer-events: none; transition: opacity var(--h-reveal) ease, transform var(--h-scene) var(--w-ease); }
.h-stage__text.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 120ms; }
.h-stage__text .w-label { margin-bottom: 20px; }
.h-stage__case { font-size: clamp(26px, 3vw, 52px); line-height: 1.04; --lh: 1.04; font-weight: 700; letter-spacing: -.035em; max-width: 16ch; }

@media (max-width: 989px) {
    .h-stage { height: auto; padding: clamp(56px, 12vw, 96px) 0; }
    .h-stage__sticky { position: static; height: auto; }
    .h-stage__grid { grid-template-columns: 1fr; gap: 24px; padding-top: 0; }
    .h-stage__head { flex-direction: row; align-items: flex-end; }
    .h-stage__media { height: auto; aspect-ratio: auto; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--w-pad) * -1); padding: 0 var(--w-pad); scroll-padding: 0 var(--w-pad); background: none; }
    .h-stage__media::-webkit-scrollbar { display: none; }
    .h-stage__frame { position: relative; inset: auto; flex: 0 0 74%; aspect-ratio: 9 / 16; scroll-snap-align: start; opacity: 1; clip-path: none; background: var(--w-frame); }
    .h-stage__frame .w-media { transform: none; }
    .h-stage__text { transform: none; }
}

/* ─── 04 ERGEBNISSE ─── */
.h-results { padding: clamp(80px, 11vw, 200px) 0; border-top: 1px solid var(--w-line); }
.h-results__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(40px, 6vw, 110px) 24px; margin-top: clamp(48px, 7vw, 120px); }
.h-result { display: block; grid-column: span 6; }
.h-result--0 { grid-column: 1 / span 6; } .h-result--1 { grid-column: 8 / span 5; margin-top: clamp(24px, 6vw, 110px); } .h-result--2 { grid-column: 3 / span 5; } .h-result--3 { grid-column: 9 / span 4; margin-top: clamp(20px, 4vw, 70px); }
.h-result strong { display: block; font-size: clamp(60px, 10vw, 180px); line-height: .88; font-weight: 700; letter-spacing: -.055em; }
.h-result > span { display: block; margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.h-result > em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--w-mute); transition: color var(--h-ui) ease; }
#smo-cases-wrap.smo-home3 .h-result:hover > em { color: var(--w-accent); }
@media (max-width: 767px) { .h-result, .h-result--0, .h-result--1, .h-result--2, .h-result--3 { grid-column: span 6; margin-top: 0; } .h-result strong { font-size: clamp(44px, 14vw, 72px); } }

/* ─── 05 CONTENT WALL ─── */
.h-wall { padding: clamp(40px, 5vw, 80px) 0; overflow: hidden; }
.h-wall__row { display: flex; gap: clamp(10px, 1.4vw, 22px); width: max-content; padding: clamp(8px, 1vw, 16px) 0; transform: translate3d(var(--dx, 0px), 0, 0); will-change: transform; }
.h-wall__row:nth-child(1) { margin-left: -6vw; } .h-wall__row:nth-child(2) { margin-left: -22vw; } .h-wall__row:nth-child(3) { margin-left: -12vw; }
.h-wall__item { position: relative; flex: none; display: block; height: clamp(230px, 36vh, 400px); overflow: hidden; background: #151515; }
.h-wall__item--0 { aspect-ratio: 9 / 16; } .h-wall__item--1 { aspect-ratio: 4 / 5; margin-top: clamp(14px, 3vh, 36px); } .h-wall__item--2 { aspect-ratio: 9 / 16; margin-top: clamp(-30px, -2vh, -10px); }
.h-wall__item .w-media { transition: transform 1.1s var(--w-ease); }
.h-wall__item:hover .w-media { transform: scale(1.05); }
@media (max-width: 767px) {
    .h-wall { padding: 28px 0; }
    .h-wall__row { width: auto; margin-left: 0 !important; overflow-x: auto; scroll-snap-type: x mandatory; transform: none; padding: 6px var(--w-pad); scrollbar-width: none; }
    .h-wall__row::-webkit-scrollbar { display: none; }
    .h-wall__item { scroll-snap-align: start; height: 44vh; }
    .h-wall__item[aria-hidden="true"] { display: none; }
}

/* ─── 06 HALTUNG ─── */
.h-statement { padding: clamp(100px, 14vw, 260px) 0; }
.h-statement__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: clamp(40px, 6vw, 100px); align-items: end; }
.h-statement__foot p { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; max-width: 44ch; --pc: var(--w-mute); }
@media (max-width: 767px) { .h-statement__foot { grid-template-columns: 1fr; } }

/* ─── 07 LEISTUNGEN ─── */
.h-caps { padding: clamp(80px, 10vw, 180px) 0; border-top: 1px solid var(--w-line); }
.h-caps__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 120px); align-items: start; }
.h-caps__list { margin-top: clamp(32px, 5vw, 80px) !important; list-style: none; }
.h-cap { border-top: 1px solid var(--w-line); }
.h-cap:last-child { border-bottom: 1px solid var(--w-line); }
.h-cap__row { display: flex; align-items: baseline; gap: 24px; padding: clamp(18px, 2.2vw, 34px) 0; }
.h-cap__name { font-size: clamp(34px, 5vw, 84px); line-height: 1; font-weight: 700; letter-spacing: -.045em; text-transform: uppercase; transition: transform .5s var(--w-ease), opacity var(--h-ui) ease; opacity: .38; }
.h-cap.is-on .h-cap__name { opacity: 1; transform: translateX(14px); }
.h-cap__subs { display: flex; flex-wrap: wrap; gap: 4px 22px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--w-ease), opacity var(--h-reveal) ease; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--w-mute); padding-left: 56px; list-style: none; }
.h-cap.is-on .h-cap__subs { max-height: 80px; opacity: 1; padding-bottom: 22px; }
.h-caps__media { position: sticky; top: 110px; aspect-ratio: 4 / 5; max-height: 78vh; background: var(--w-frame); }
.h-caps__frame { position: absolute; inset: 0; overflow: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .01s linear .6s, clip-path .7s var(--w-ease); }
.h-caps__frame.is-on { opacity: 1; clip-path: inset(0); z-index: 2; transition: clip-path .7s var(--w-ease); }
.h-caps__tag { position: absolute; left: 18px; bottom: 16px; z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
@media (max-width: 989px) { .h-caps__grid { grid-template-columns: 1fr; } .h-caps__media { display: none; } .h-cap__name { opacity: 1; } .h-cap__subs { max-height: none; opacity: 1; padding: 0 0 20px 56px; } .h-cap.is-on .h-cap__name { transform: none; } }

/* ─── 08 KREATION × PERFORMANCE ─── */
.h-cxp { height: 260svh; }
.h-cxp__sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.h-cxp__words { display: flex; align-items: baseline; justify-content: center; gap: .18em; font-size: clamp(40px, 10.5vw, 190px); line-height: 1; font-weight: 700; letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap; }
.h-cxp__a { transform: translate3d(calc((1 - var(--e, 0)) * -38vw), 0, 0); }
.h-cxp__b { transform: translate3d(calc((1 - var(--e, 0)) * 38vw), 0, 0); }
.h-cxp__x { color: var(--w-accent); transform: rotate(calc(var(--e, 0) * 90deg)) scale(var(--e, 0)); display: inline-block; }
.h-cxp__lines { display: flex; justify-content: space-between; gap: 40px; margin-top: clamp(40px, 7vw, 120px); opacity: var(--l, 0); transform: translate3d(0, calc((1 - var(--l, 0)) * 40px), 0); }
.h-cxp__lines p { font-size: clamp(26px, 3.6vw, 64px); line-height: 1.02; --pc: var(--w-fg); font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; margin: 0; }
.h-cxp__l2 { text-align: right; color: var(--w-mute); }
@media (max-width: 767px) { .h-cxp { height: auto; padding: 100px 0; } .h-cxp__sticky { position: static; height: auto; } .h-cxp__words { flex-direction: column; align-items: flex-start; font-size: 14vw; } .h-cxp__a, .h-cxp__b, .h-cxp__x { transform: none; } .h-cxp__lines { flex-direction: column; opacity: 1; transform: none; } .h-cxp__l2 { text-align: left; } }

/* ─── 09 FEATURED CASE ─── */
.h-featured { padding: clamp(80px, 11vw, 200px) 0 clamp(60px, 8vw, 140px); border-top: 1px solid var(--w-line); }
.h-featured__media { display: block; position: relative; margin: clamp(32px, 5vw, 80px) auto 0; width: min(1200px, calc(100% - 2 * var(--w-pad))); aspect-ratio: 16 / 9; overflow: hidden; background: var(--w-frame); }
.h-featured__media .w-media { transition: transform 1.2s var(--w-ease); }
.h-featured__media:hover .w-media { transform: scale(1.03); }
.h-featured__foot { display: grid; grid-template-columns: 1fr auto; gap: 24px 60px; align-items: end; margin-top: clamp(24px, 3vw, 48px); }
.h-featured__claim { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; max-width: 40ch; --pc: var(--w-mute); }
@media (max-width: 767px) { .h-featured__media { width: 100%; aspect-ratio: 4 / 5; } .h-featured__foot { grid-template-columns: 1fr; } }

/* ─── 10 MENSCHEN ─── */
.h-people { padding: clamp(80px, 10vw, 180px) 0; border-top: 1px solid var(--w-line); }
.h-people__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 120px); align-items: center; }
.h-people__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--w-frame); }
.h-people__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.h-people__big { font-size: clamp(34px, 4.6vw, 80px); line-height: .98; --pc: var(--w-fg); font-weight: 700; letter-spacing: -.045em; text-transform: uppercase; margin: clamp(24px, 3vw, 48px) 0 !important; }
.h-people__text p:not(.h-people__big) { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; max-width: 44ch; --pc: var(--w-mute); margin-bottom: 28px; }
@media (max-width: 767px) { .h-people__grid { grid-template-columns: 1fr; } }

/* ─── 11 BEWERTUNG ─── */
.h-proof { padding: clamp(80px, 10vw, 170px) 0; border-top: 1px solid var(--w-line); text-align: center; }
.h-proof__score { display: block; font-size: clamp(90px, 18vw, 320px); line-height: .85; font-weight: 700; letter-spacing: -.06em; }
.h-proof__score span { font-size: .22em; letter-spacing: 0; margin-left: .12em; color: var(--w-mute); }
.h-proof__stars { margin: clamp(16px, 2vw, 32px) 0; font-size: clamp(22px, 2.4vw, 36px); letter-spacing: .3em; color: var(--w-accent); }
.h-proof__inner p { max-width: 46ch; margin: 0 auto; --pc: var(--w-mute); font-size: 15px; line-height: 1.55; }

/* ─── 12 ALLE PROJEKTE ─── */
.h-projects { padding: clamp(80px, 10vw, 180px) 0; border-top: 1px solid var(--w-line); }
.h-projects__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 88px); }
.h-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(36px, 5vw, 80px) clamp(14px, 1.6vw, 28px); }
.h-mosaic__item { display: block; grid-column: span 4; }
.h-mosaic__item--0 { grid-column: span 5; } .h-mosaic__item--1 { grid-column: span 7; margin-top: clamp(30px, 8vw, 140px); } .h-mosaic__item--2 { grid-column: span 4; } .h-mosaic__item--3 { grid-column: span 4; margin-top: clamp(16px, 4vw, 70px); } .h-mosaic__item--4 { grid-column: span 4; margin-top: clamp(8px, 2vw, 36px); } .h-mosaic__item--5 { grid-column: span 4; }
.h-mosaic__media { aspect-ratio: 4 / 5; }
.h-mosaic__item--1 .h-mosaic__media { aspect-ratio: 4 / 3; }
.h-mosaic__media .w-media { transition: transform 1.1s var(--w-ease), opacity .4s ease; }
.h-mosaic__item:hover .h-mosaic__media .w-media:first-child { transform: scale(1.035); }
.h-mosaic__media .w-item__hover { opacity: 0; }
.h-mosaic__item.is-playing .w-item__hover { opacity: 1; }
@media (max-width: 767px) { .h-mosaic { grid-template-columns: 1fr 1fr; } .h-mosaic__item, .h-mosaic__item--0, .h-mosaic__item--1, .h-mosaic__item--2, .h-mosaic__item--3, .h-mosaic__item--4, .h-mosaic__item--5 { grid-column: span 1; margin-top: 0; } .h-mosaic__item--0, .h-mosaic__item--1 { grid-column: span 2; } .h-mosaic__item--1 .h-mosaic__media { aspect-ratio: 4 / 5; } }

/* ─── 13 INSIGHTS ─── */
.h-insights { padding: clamp(80px, 10vw, 180px) 0; border-top: 1px solid var(--w-line); }
.h-insights__list { list-style: none; display: grid; grid-template-columns: 7fr 5fr; gap: 0 clamp(24px, 5vw, 90px); }
.h-insight a { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--w-line); }
.h-insight--lead { grid-row: span 2; }
.h-insight--lead a { grid-template-columns: 56px 1fr; }
.h-insight--lead .h-insight__img { grid-column: 1 / -1; aspect-ratio: 16 / 10; display: block; margin-bottom: 8px; }
.h-insight--lead .h-insight__title { grid-column: 2; font-size: clamp(26px, 2.8vw, 46px); }
.h-insight--lead .h-insight__read { grid-column: 2; }
.h-insight__title { font-size: clamp(18px, 1.7vw, 26px); line-height: 1.18; font-weight: 700; letter-spacing: -.025em; }
.h-insight__read { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--w-mute); white-space: nowrap; }
#smo-cases-wrap.smo-home3 .h-insight a:hover .h-insight__read { color: var(--w-accent); }
@media (max-width: 767px) { .h-insights__list { grid-template-columns: 1fr; } .h-insight--lead { grid-row: auto; } .h-insight a { grid-template-columns: 40px 1fr; } .h-insight__read { grid-column: 2; } }

/* ─── 15 SEO-EBENE (ruhig) ─── */
.h-seo { padding: clamp(80px, 9vw, 160px) 0; border-top: 1px solid var(--w-line); }
.h-seo__h2 { font-size: clamp(28px, 3.6vw, 60px); line-height: 1.02; --lh: 1.02; font-weight: 700; letter-spacing: -.035em; max-width: 18ch; margin-bottom: clamp(32px, 4vw, 64px) !important; }
.h-seo__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 6vw, 110px); }
.h-seo h3 { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--w-mute); margin: 28px 0 10px !important; }
.h-seo__cols p { font-size: 16px; line-height: 1.7; max-width: 60ch; }
#smo-cases-wrap.smo-home3 .h-seo p a { border-bottom: 1px solid var(--w-line); }
#smo-cases-wrap.smo-home3 .h-seo p a:hover { color: var(--w-accent); border-color: var(--w-accent); }
.h-seo__hubs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 6vw, 110px); margin-top: clamp(48px, 6vw, 96px); }
.h-seo__hubs ul { list-style: none; }
.h-seo__hubs li a { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--w-line); font-size: 17px; font-weight: 700; letter-spacing: -.01em; transition: padding var(--h-ui) ease; }
.h-seo__hubs li:last-child a { border-bottom: 1px solid var(--w-line); }
#smo-cases-wrap.smo-home3 .h-seo__hubs li a:hover { padding-left: 8px; color: var(--w-accent); }
.h-seo__index { margin-top: clamp(48px, 6vw, 96px); }
.h-seo__index dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 6vw, 110px); margin: 0; }
.h-seo__index dl > div { padding: 16px 0; border-top: 1px solid var(--w-line); }
.h-seo__index dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--w-mute); margin-bottom: 8px; }
.h-seo__index dd { margin: 0; font-size: 14px; line-height: 1.9; }
#smo-cases-wrap.smo-home3 .h-seo__index dd a:hover { color: var(--w-accent); }
@media (max-width: 767px) { .h-seo__cols, .h-seo__hubs, .h-seo__index dl { grid-template-columns: 1fr; } }

/* ─── 16 FAQ ─── */
.h-faq { padding: 0 0 clamp(80px, 9vw, 160px); }
.h-faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 6vw, 110px); border-top: 1px solid var(--w-line); padding-top: clamp(40px, 5vw, 80px); }
.h-faq details { border-bottom: 1px solid var(--w-line); }
.h-faq details:first-child { border-top: 1px solid var(--w-line); }
.h-faq summary { cursor: pointer; list-style: none; padding: 22px 36px 22px 0; font-size: clamp(17px, 1.5vw, 22px); font-weight: 700; letter-spacing: -.015em; position: relative; }
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 300; transition: transform var(--h-ui) ease; }
.h-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.h-faq details p { padding: 0 0 24px; max-width: 60ch; font-size: 16px; line-height: 1.65; --pc: var(--w-mute); }
#smo-cases-wrap.smo-home3 .h-faq details p a { border-bottom: 1px solid var(--w-line); }
@media (max-width: 767px) { .h-faq__grid { grid-template-columns: 1fr; } }

/* reduced motion: nichts bewegt sich */
@media (prefers-reduced-motion: reduce) {
    .w-js .h-line > span, .w-js .h-ch > i { transform: none !important; transition: none !important; }
    .h-hero__clip.is-on { animation: none; }
        .h-stage__frame, .h-caps__frame { transition: none !important; }
    .h-wall__row { transform: none !important; }
}

/* Mobil: lange deutsche Woerter duerfen nicht ueber den Rand laufen; Zahlen nie umbrechen */
.h-result > strong { white-space: nowrap; }
.h-ch { white-space: nowrap; }
@media (max-width: 767px) {
    .smo-home3 { --h-display: 10.4vw; --h-section: 13vw; }
    .h-display { letter-spacing: -.045em; }
    .h-cxp__words { font-size: 11.6vw; }
    .h-result strong { font-size: clamp(40px, 12.4vw, 64px); }
    .h-proof__score { font-size: 34vw; }
    .h-stage__title { font-size: 13vw; }
}
@media (max-width: 767px) { .smo-home3 { --h-display: 9.4vw; } }
html[data-theme="light"] .h-proof__stars { color: #0a0a0a; }

/* Hero-Leiste unter dem CTA: Case-Angabe links, 'Zur Arbeit' rechts, mit Luft zum Button (nicht mehr absolut ueber dem Button) */
.h-hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 84px); padding-top: 20px; border-top: 1px solid rgba(242,242,239,.2); }
.h-hero__case, .h-hero__scroll { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--w-mute); margin: 0; }
.h-hero__case-k { opacity: .6; margin-right: 8px; }
#smo-cases-wrap.smo-home3 .h-hero__case-v:hover, #smo-cases-wrap.smo-home3 .h-hero__scroll:hover { color: #f2f2ef; }
.h-hero__scroll span { display: inline-block; margin-left: 6px; animation: w-bob 2.4s var(--w-ease) infinite; }
.h-hero__foot { margin-top: clamp(32px, 4.4vw, 72px); }
.h-hero__sub { line-height: 1.7; }
@media (max-width: 767px) { .h-hero__bar { margin-top: 36px; } .h-hero__case { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .h-hero__scroll span { animation: none; } }
/* Portrait: scharfes Hochformat, keine Kreis-/Konturreste */
.h-people__photo { aspect-ratio: 4 / 5; border-radius: 0; background: var(--w-frame); }
.h-people__photo img { border-radius: 0; filter: none; }

/* ── Mehrsprachigkeit (03.10.2026) ── */
/* lange lateinische Titel (fr/es/it/pt/en): kleiner, damit "L'AGENCE DE PUBLICITE" mobil nicht abgeschnitten wird */
.smo-home3:not(.smo-home3--de):not(.smo-home3--ja):not(.smo-home3--zh-hans) .h-hero__title { font-size: clamp(22px, 5.6vw, 112px); }
/* CJK: keine negative Laufweite, mehr Zeilenhoehe (Glyphen sind quadratisch) */
.smo-home3--ja :is(.h-hero__title, .h-display, .h-section-title, .h-stage__title, .h-stage__case, .h-people__big, .h-cxp__words, .h-cxp__l1, .h-cxp__l2, .w-contact__link, .h-seo__h2, .h-featured__claim, .h-insight__title),
.smo-home3--zh-hans :is(.h-hero__title, .h-display, .h-section-title, .h-stage__title, .h-stage__case, .h-people__big, .h-cxp__words, .h-cxp__l1, .h-cxp__l2, .w-contact__link, .h-seo__h2, .h-featured__claim, .h-insight__title) { letter-spacing: 0; line-height: 1.14; --lh: 1.14; }
.smo-home3--ja :is(.h-hero__sub, .h-link, .h-micro, .w-label, .h-cta), .smo-home3--zh-hans :is(.h-hero__sub, .h-link, .h-micro, .w-label, .h-cta) { letter-spacing: .06em; }