/* Ranked – Stil wie das Ecom Founders Dinner: 12-Spalten-Raster, dunkel, monochrom warm, Farbe kommt aus den Fotos. */
:root{
  color-scheme: dark;
  --bg:#0D0C0B;
  --bg-2:#161412;
  --ink:#F3EEE6;
  --ink-2:rgba(243,238,230,.62);
  --ink-3:rgba(243,238,230,.36);
  --line:rgba(243,238,230,.12);

  --f-serif:"Spectral","Iowan Old Style","Baskerville",Georgia,serif;
  --w-serif:300;
  --ls-serif:-.045em;  /* eine Laufweite für alle Serif-Texte */
  --hd:0px;  /* Headlines auf dem Desktop etwas kleiner, mobil unverändert */
  --f-sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  --pad:clamp(0px, 2.2vw, 28px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
@media (min-width:821px){:root{--hd:12px; --hd-hero:12px}}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
html{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
body{
  margin:0;
  background:var(--bg); color:var(--ink);
  font-family:var(--f-sans); font-size:15px; line-height:1.5; font-weight:380;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:opacity .35s ease;
}
/* bis die Schriften geladen sind: unsichtbar, Intro-Animation wartet */
.wf body{opacity:0}
.wf .hero *{animation-play-state:paused}
::selection{background:var(--ink); color:var(--bg)}
a{color:inherit; text-decoration:none}
:focus-visible{outline:1px solid var(--ink); outline-offset:3px}
img{display:block; max-width:100%}

.wrap{padding-left:calc(var(--gl) + var(--pad)); padding-right:calc(var(--gr) + var(--pad))}
.grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px}
.grid > *{min-width:0}
.small{font-size:14px; line-height:1.4}
.mono{font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:400}
.dim{color:var(--ink-2)}
.dimmer{color:var(--ink-3)}
em{font-style:italic}

.pill{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  padding:9px 15px; border-radius:999px; transition:opacity .2s, border-color .2s; white-space:nowrap;
}
.pill:hover{opacity:.82}
.pill .arr{transition:transform .25s var(--ease)}
.pill:hover .arr{transform:translateX(3px)}
.pill.line{background:transparent; color:var(--ink); border-color:var(--line)}
.pill.line:hover{border-color:var(--ink); opacity:1}

/* ---------- Top bar ---------- */
.top{position:relative; z-index:3; display:flex; align-items:center; gap:24px; padding-block:22px}
/* Desktop: Kopfzeile so hoch wie beim Ecom Founders Dinner (dort dreizeilige Wortmarke), damit Menü und Button auf derselben Höhe sitzen */
@media (min-width:901px){.top{padding-block:18px; min-height:104px}}
.top nav{flex:1; justify-content:center}
/* Wortmarke: bestehendes Ranked-Logo, in der Schriftfarbe eingefärbt */
.logo{display:inline-flex; color:var(--ink)}
.logo svg{display:block; height:22px; width:auto; aspect-ratio:401/87}
.top nav{display:flex; gap:clamp(16px,3vw,40px)}
.top nav a{color:var(--ink-2); transition:color .2s}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top .cta{margin-left:auto; flex:none}
.bullet{display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; margin-right:8px; vertical-align:2px}
@media (max-width:900px){.top nav{display:none}}
.cta-short{display:none}
@media (max-width:520px){
  .top{gap:20px}
  .logo svg{height:19px}
  .cta-long{display:none}
  .cta-short{display:inline}
}
@media (max-width:420px){.top .pill{padding:8px 13px; font-size:12px}}

/* ---------- Hero: eine linke Achse – Kennung, Headline, Einleitung, Button ---------- */
.hero{padding-top:clamp(64px,9vw,148px)}
.hero-meta{margin:0 0 clamp(20px,2.2vw,30px)}
.hero h1{
  margin:0;
  font-family:var(--f-serif); font-weight:var(--w-serif); font-optical-sizing:auto;
  font-size:clamp(3rem,6.6vw,7.2rem); line-height:.88; letter-spacing:calc(var(--ls-serif) - .015em);  /* große Headline etwas enger */
  font-variant-numeric:lining-nums;
}
/* Maske für die Zeilen-Animation, mit genug Luft für Ober- und Unterlängen */
.hero h1 .l{display:block; width:fit-content; overflow:hidden; padding:.1em 0 .14em; margin:-.1em 0 -.14em}
.hero h1 .l > span{display:inline-block; animation:rise 1.1s var(--ease) both}
.hero h1 .l:nth-child(2) > span{animation-delay:.09s}
@keyframes rise{from{transform:translateY(.55em); opacity:.2} to{transform:none; opacity:1}}
.hero-grid{align-items:end}
.hero-main{grid-column:1 / span 8}
.hero-kpis{grid-column:10 / -1; display:grid; gap:clamp(20px,2.2vw,28px)}
.anim .hero-kpis .kpi > *{opacity:0; transform:translateY(10px); transition:opacity .9s var(--ease), transform 1s var(--ease); transition-delay:inherit}
.anim .hero-kpis .kpi.in > *{opacity:1; transform:none}
.hero-kpis .num{font-size:clamp(1.5rem,2.1vw,2.1rem)}
.hero-kpis .kpi{grid-column:auto}
@media (min-width:821px){.stats-sec{display:none}}
@media (min-width:821px){.hero h1{font-size:clamp(3rem,5.94vw,6.48rem)}}  /* Desktop: Headline 10 % kleiner, Handy unverändert */
@media (max-width:1100px) and (min-width:821px){.hero-main{grid-column:1 / span 7} .hero-kpis{grid-column:9 / -1} .hero h1{font-size:5.04vw}}
@media (max-width:820px){.hero-main{grid-column:1 / -1} .hero-kpis{display:none}}
.hero-foot{margin-top:clamp(36px,4vw,56px); display:grid; gap:28px; justify-items:start; animation:rise .9s var(--ease) .3s both}
.hero .intro{margin:0; font-size:17px; line-height:1.45; max-width:45ch}
/* Button mit kurzem Hinweis darunter, auf derselben Kante */
.hero-cta{display:grid; gap:16px; justify-items:start}
.cta-notes{list-style:none; margin:0; padding:0; display:grid; gap:6px; color:var(--ink-2)}
.cta-notes li{display:flex; align-items:flex-start; gap:10px}
.cta-notes li > :first-child{margin-top:calc(.7em - 3px)}  /* Punkt mittig zur ersten Zeile, auch wenn der Text umbricht */
.cta-notes .ring{flex:none; width:6px; height:6px; border-radius:50%; border:1px solid currentColor}
@media (max-width:820px){
  .hero h1 .l{display:inline; overflow:visible}
  .hero h1{line-height:.94}  /* Handy: Zeilenabstand wie vorher, nur der Desktop ist enger */
  .hero .intro{font-size:16px}
  .hero-foot{gap:24px}
}

/* Logo-Laufband direkt unter dem Hero: läuft langsam und ohne Pause durch */
.marquee{margin-top:clamp(88px,10vw,152px); border-block:1px solid var(--line); padding-block:14px 26px}
.marquee-head{padding-bottom:22px}
.marquee-track{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee-row{display:flex; width:max-content; align-items:center; gap:clamp(56px,7vw,112px); padding-right:clamp(56px,7vw,112px); animation:marquee 56s linear infinite}
.marquee-row img{height:30px; width:auto; max-width:150px; object-fit:contain; filter:brightness(0) invert(1); opacity:.6}
.marquee-row img.badge{height:36px}  /* zweizeiliger Schriftzug: etwas höher, damit er lesbar bleibt */
@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width:820px){.marquee-row img{height:24px} .marquee-row img.badge{height:30px} .marquee-row{animation-duration:28s}}

/* Kennzahlen: ruhig untereinander, getrennt durch feine Linien */
.kpi{position:relative; display:grid; gap:4px; align-content:start; padding-top:12px}
/* Trennlinie als eigene Fläche, damit sie sich beim Einblenden von links aufziehen kann */
.kpi::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); transform-origin:0 50%}
.anim .kpi::before{transform:scaleX(0); transition:transform 1.4s var(--ease); transition-delay:inherit}
.anim .kpi.in::before{transform:none}
.kpi [data-count]{font-variant-numeric:tabular-nums lining-nums}
.kpi .num{font-family:var(--f-serif); font-weight:var(--w-serif); font-size:clamp(1.9rem,3.2vw,3rem); line-height:1.05; letter-spacing:var(--ls-serif); font-variant-numeric:lining-nums; margin-top:4px}
.stats-band{padding-top:clamp(64px,9vw,112px); row-gap:28px}
.stats-band .kpi{grid-column:1 / -1}

/* ---------- Sections ---------- */
.sec{padding-block:clamp(96px,11vw,168px) 0}
.label{grid-column:1 / span 3}
.big{font-family:var(--f-serif); font-weight:var(--w-serif); font-size:calc(clamp(2.2rem,4.6vw,4.3rem) - var(--hd)); line-height:1.02; letter-spacing:var(--ls-serif); margin:0; text-wrap:balance}
@media (max-width:820px){.label{grid-column:1 / -1}}

/* Was Ranked anders macht: Fotos links (auf dem Desktop mitlaufend), Grundsätze rechts */
.anders-title{grid-column:4 / span 9}
.anders-title .dim{color:var(--ink-2)}
/* Nachsatz: kleine Mono-Zeile unter den zwei großen Sätzen, mit kurzem Strich davor */
.anders-title .nl{display:flex; align-items:center; gap:14px; margin-top:clamp(18px,2vw,28px); font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; line-height:1.4}
.anders-title .nl::before{content:""; flex:none; width:28px; height:1px; background:currentColor}
.anders{margin-top:clamp(56px,7vw,104px); align-items:start}
.anders-pics{grid-column:1 / span 6; position:sticky; top:clamp(24px,4vw,56px); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px}
.anders-pics figure{margin:0}
.anders-pics .p1{grid-column:1 / span 4}
.anders-pics .p2{grid-column:4 / span 3; margin-top:-38%}
.anders-pics .p1 img{width:100%; aspect-ratio:4/5; object-fit:cover}
.anders-pics .p2 img{width:100%; aspect-ratio:3/4; object-fit:cover}
.anders-pics .p2 .photo{outline:12px solid var(--bg)}  /* setzt das kleine Foto sauber vom großen ab */
.principles{grid-column:8 / -1; list-style:none; margin:0; padding:0; display:grid; gap:clamp(40px,5vw,72px)}
.principles li{border-top:1px solid var(--line); padding-top:14px; display:grid; gap:14px}
.principles h3{margin:0; font-family:var(--f-serif); font-weight:var(--w-serif); font-size:clamp(1.65rem,2.6vw,2.4rem); line-height:1.08; letter-spacing:var(--ls-serif)}
.principles p{margin:0; color:var(--ink-2); line-height:1.6; max-width:42ch}
@media (max-width:820px){
  .anders-title,.anders-pics,.principles{grid-column:1 / -1}
  .anders-pics{position:static; margin-bottom:48px}
  .anders-pics .p1{grid-column:1 / span 5}
  .anders-pics .p2{grid-column:3 / span 4; margin-top:-30%}
}

/* Überschrift über Leistungen und Manifest, damit man auf dem Desktop sofort weiß, worum es geht */
.sec-title{grid-column:4 / -1}
.sec-title + :is(.services, .manifest){margin-top:clamp(40px,5vw,72px)}
@media (max-width:820px){.sec-title{grid-column:1 / -1}}

/* Leistungen als Liste: Nummer, Name groß, kurzer Satz */
.services{grid-column:4 / -1; list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line)}
.services li{display:grid; grid-template-columns:clamp(48px,5vw,80px) minmax(0,1.1fr) minmax(0,1fr); gap:16px; align-items:center; padding-block:clamp(18px,2vw,26px); border-top:1px solid var(--line); transition:padding-left .5s var(--ease)}  /* Nummer, Name und Text mittig in der Zeile */
.services h3{margin:0; font-family:var(--f-serif); font-weight:var(--w-serif); font-size:calc(clamp(1.8rem,3.4vw,3.2rem) - var(--hd) / 2); line-height:1.02; letter-spacing:var(--ls-serif)}
.services p{margin:0; max-width:36ch}
@media (hover:hover){.services li:hover{padding-left:12px}}
@media (max-width:820px){
  .services{grid-column:1 / -1}
  .services li{grid-template-columns:40px minmax(0,1fr); row-gap:8px; align-items:baseline}
  .services p{grid-column:2}
}

/* Termin unter den Leistungen, ruhig auf der Kante der Liste */
/* Potenzialanalyse: aufgebaut wie die anderen Sections, Satz in Serif und Button darunter */
.analyse-body{grid-column:4 / -1; display:grid; gap:clamp(24px,3vw,36px); justify-items:start}
.analyse-lead{margin:0; font-family:var(--f-serif); font-weight:var(--w-serif); font-size:clamp(1.65rem,3vw,2.75rem); line-height:1.12; letter-spacing:var(--ls-serif); text-wrap:pretty}
.analyse-lead .dim{color:var(--ink-2)}
@media (min-width:821px){.analyse-lead .dim{display:block}}  /* Desktop: Frage und Antwort je eine Zeile */
@media (max-width:820px){.analyse-body{grid-column:1 / -1}}

/* Manifest: Gegenüberstellung. Links gedämpft und durchgestrichen, rechts die Ranked-Antwort */
.manifest{grid-column:4 / -1; list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line)}
.manifest li{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 32px; align-items:baseline; padding-block:clamp(18px,2vw,26px); border-top:1px solid var(--line); font-family:var(--f-serif); font-weight:var(--w-serif); font-size:calc(clamp(1.5rem,2.6vw,2.4rem) - var(--hd) / 3); line-height:1.12; letter-spacing:var(--ls-serif)}
.manifest .them{color:var(--ink-3)}
.manifest s{text-decoration:none; position:relative; display:inline}
/* Durchstreichen als eigene Linie, damit sie sich von links aufziehen kann (auch über Zeilenumbrüche hinweg) */
.manifest s{background:linear-gradient(currentColor, currentColor) 0 58% / 100% 1px no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.manifest .us{color:var(--ink)}
.anim .manifest s{background-size:0% 1px; transition:background-size .9s var(--ease) .15s}
.anim .manifest li.in s{background-size:100% 1px}
.anim .manifest .us{opacity:0; transform:translateY(10px); transition:opacity .9s var(--ease) .7s, transform 1s var(--ease) .7s}
.anim .manifest li.in .us{opacity:1; transform:none}
@media (max-width:820px){
  .manifest{grid-column:1 / -1}
  .manifest li{grid-template-columns:1fr; gap:6px}
}

/* Über Ranked / Marcus */
.host{align-items:start}
.host figure{grid-column:10 / -1; grid-row:1; margin:0}
.photo{position:relative; isolation:isolate; overflow:hidden; background:var(--bg-2)}
.host figure img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%}
.host figure figcaption{margin-top:10px; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap}
.host .txt{grid-column:1 / span 8; grid-row:1}
.host .lead{font-family:var(--f-serif); font-weight:var(--w-serif); font-size:clamp(1.65rem,3vw,2.75rem); line-height:1.12; letter-spacing:var(--ls-serif); margin:16px 0 0; text-wrap:pretty}
.host .lead span{color:var(--ink-2)}
.host .body{display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; margin-top:36px; color:var(--ink-2); line-height:1.6}
.host .body p{margin:0; max-width:40ch}
.sig{margin-top:44px;  /* optisch gleich viel Luft wie über dem Text (die große Überschrift bringt Unterlängen mit) */
  display:flex; flex-wrap:wrap; gap:16px 24px; align-items:flex-start; justify-content:space-between; border-top:1px solid var(--line); padding-top:16px}
.sig .who{display:grid; gap:2px; min-width:0}
.creds{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:4px}
.creds li{display:flex; flex-wrap:wrap; gap:0 10px}
@media (max-width:600px){.creds{gap:12px} .creds li{flex-direction:column; gap:2px}}
.brandlink{display:inline-flex; align-items:baseline; gap:3px; color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:3px; transition:text-decoration-color .2s}
.brandlink .arr{font-size:.85em; color:var(--ink-2); display:inline-block; transition:transform .25s var(--ease), color .2s}
.brandlink:hover{text-decoration-color:var(--ink)}
.brandlink:hover .arr{color:var(--ink); transform:translate(2px,-2px)}
.sig .name{font-family:var(--f-serif); font-weight:var(--w-serif); font-size:clamp(1.6rem,2.2vw,2rem); line-height:1.1; letter-spacing:var(--ls-serif)}
.sig .btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:calc(clamp(1.6rem,2.2vw,2rem) * 1.1 / 2 - 17px)}
@media (max-width:820px){
  .host figure{grid-column:1 / span 8; grid-row:auto}
  .host .txt{grid-column:1 / -1; grid-row:auto; margin-top:24px}
  .host .body{grid-template-columns:1fr}
}

/* Cases: horizontaler Slider. Karten laufen bis an den Bildschirmrand, die nächste ragt angeschnitten ins Bild */
.cases-title{grid-column:4 / span 6}
.cases-nav{grid-column:10 / -1; justify-self:end; align-self:end; display:flex; align-items:center; gap:10px}
.cases-nav .mono{margin-right:8px; font-variant-numeric:tabular-nums}
.arrow{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-size:16px; cursor:pointer; transition:border-color .2s, opacity .2s}
.arrow:hover{border-color:var(--ink)}
.arrow[disabled]{opacity:.3; cursor:default; border-color:var(--line)}
.cases{
  grid-column:1 / -1; list-style:none; padding:0; display:flex; gap:16px;
  margin:clamp(40px,5vw,72px) calc(-1 * (var(--gr) + var(--pad))) 0 0;  /* rechts bis an den Rand, damit die nächste Karte angeschnitten ist */
  padding-right:calc(var(--gr) + var(--pad));
  overflow-x:auto; overflow-y:hidden;  /* nur seitlich scrollbar; sonst fängt der Slider das senkrechte Scrollen der Seite ab */
  overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.cases::-webkit-scrollbar{display:none}
.cases:focus-visible{outline:1px solid var(--line); outline-offset:8px}
.case{flex:0 0 clamp(320px, 41vw, 640px); scroll-snap-align:start; display:grid; gap:0; align-content:start}
.case figure{margin:0}
.case img{width:100%; aspect-ratio:3/2; object-fit:cover}
.case-txt{display:grid; align-content:start; padding-top:18px}
.stats{display:flex; flex-wrap:wrap; gap:8px 36px; margin-top:clamp(18px,2vw,28px)}
.stats > div{display:grid; gap:8px}
.stat{font-family:var(--f-serif); font-weight:var(--w-serif); font-size:calc(clamp(2.4rem,4vw,3.8rem) - var(--hd)); line-height:.95; letter-spacing:calc(var(--ls-serif) - .01em); font-variant-numeric:lining-nums; white-space:nowrap}
.case-head{margin:clamp(22px,2.6vw,34px) 0 0; font-family:var(--f-serif); font-weight:var(--w-serif); font-size:calc(clamp(1.2rem,1.5vw,1.45rem) + 2px); line-height:1.22; letter-spacing:var(--ls-serif); max-width:24em}
.case dl{margin:18px 0 0; display:grid; gap:10px}
.case dl > div{display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:12px; padding-top:10px; border-top:1px solid var(--line)}
.case dt{padding-top:1px}
.case dd{margin:0; color:var(--ink-2); max-width:44ch}
@media (max-width:820px){
  .cases-title{grid-column:1 / -1}
  .cases-nav{grid-column:1 / -1; justify-self:start; margin-top:20px}
  .arrow{display:none}  /* Handy: wischen statt klicken */
  .case{flex-basis:84vw}
  .case dl > div{grid-template-columns:1fr; gap:4px}
}

/* Karriere: Benefits als ruhige Zeile unter den Grundsätzen */
.perks{grid-column:8 / -1; margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line); padding-top:14px; display:grid; gap:12px}
.perks ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.perks li{border:1px solid var(--line); border-radius:999px; padding:6px 12px; color:var(--ink-2)}
@media (max-width:820px){.perks{grid-column:1 / -1}}

/* Karriere: offene Stellen als Zeilen mit Titel, Eckdaten und Button */
.jobs{grid-column:4 / -1; list-style:none; margin:clamp(40px,5vw,72px) 0 0; padding:0; border-bottom:1px solid var(--line)}
.jobs li{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto; gap:12px 24px; align-items:center; padding-block:clamp(18px,2vw,26px); border-top:1px solid var(--line)}
.jobs h3{margin:0; font-family:var(--f-serif); font-weight:var(--w-serif); font-size:calc(clamp(1.4rem,2.2vw,2rem) - var(--hd) / 2); line-height:1.1; letter-spacing:var(--ls-serif)}
@media (max-width:820px){.jobs{grid-column:1 / -1} .jobs li{grid-template-columns:1fr; justify-items:start}}

/* FAQ */
.faq{grid-column:4 / -1; border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:22px; font-family:var(--f-serif); font-weight:var(--w-serif); font-size:calc(clamp(1.4rem,2.2vw,2rem)); line-height:1.15; letter-spacing:var(--ls-serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .plus{border-color:var(--ink)}
.plus{position:relative; flex:none; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; transition:border-color .2s, transform .4s var(--ease)}
.plus::before,.plus::after{content:""; position:absolute; left:50%; top:50%; width:11px; height:1px; background:var(--ink); transform:translate(-50%,-50%)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .plus{transform:rotate(45deg)}
.answer{display:grid; gap:12px; padding-bottom:28px; padding-right:56px; color:var(--ink-2); line-height:1.6}  /* eine Spalte, Absätze untereinander */
.answer p{margin:0; max-width:62ch}
.faq details[open] .answer{animation:rise .6s var(--ease) both}
@media (max-width:820px){.faq{grid-column:1 / -1} .answer{padding-right:0}}

/* Footer */
footer{padding-block:clamp(128px,15vw,240px) calc(16px + env(safe-area-inset-bottom,0px))}
.closing{align-items:end; padding-bottom:clamp(40px,5vw,72px)}
.closing .big{grid-column:1 / span 8; font-size:clamp(1.65rem,3vw,2.75rem)}
.closing .act{grid-column:9 / span 4; justify-self:end; display:grid; gap:16px; justify-items:start}
@media (max-width:820px){.closing .big,.closing .act{grid-column:1 / -1; justify-self:start; justify-items:start}}
.foot{border-top:1px solid var(--line); padding-top:16px}
.foot > *{grid-column:span 3}
@media (max-width:820px){.foot > *{grid-column:span 6}}
.foot a{color:var(--ink-2)} .foot a:hover{color:var(--ink)}
.giant{display:block; margin-top:clamp(64px,9vw,140px)}
/* Große Wortmarke: Weiß, aber zurückgenommen. Das Logo dient als Maske für die Fläche */
.giant i{display:block; width:100%; aspect-ratio:401/87;
  background:var(--ink); opacity:.16;
  -webkit-mask:url(logo.svg) center / contain no-repeat; mask:url(logo.svg) center / contain no-repeat}

/* ---------- Bildlook „Portra 400“ ----------
   Farbkurven sind fest in die JPGs eingerechnet. Hier nur noch Vignette und feines Korn.
   Abschalten: Klasse "portra" am <html> entfernen. */
.photo::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s ease;
  background:radial-gradient(130% 100% at 50% 45%, transparent 62%, rgba(45,24,10,.2) 100%);
}
.portra .photo::after{opacity:1}
.grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .6s ease; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.portra .grain{opacity:.5}
.portra .anders-pics .p1 .grain{opacity:.25}  /* großes Workshop-Foto: halb so viel Korn */
/* Vor dem Einblenden keine Effekte über leeren Flächen */
.anim figure:not(.in) .photo::after, .anim figure:not(.in) .photo .grain{opacity:0}

/* ---------- Scroll-Animationen ---------- */
.anim :is(main .label, main .big, .analyse-body, .perks, .jobs li, .stats-band .kpi, .manifest li, footer .big, .principles li, .services li, .host .txt > .mono, .host .lead, .host .body, .sig, .case-txt, .faq details, .closing .act, .foot){
  opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1.1s var(--ease), padding-left .5s var(--ease);
}
.anim :is(main .label, main .big, .analyse-body, .perks, .jobs li, .stats-band .kpi, .manifest li, footer .big, .principles li, .services li, .host .txt > .mono, .host .lead, .host .body, .sig, .case-txt, .faq details, .closing .act, .foot).in{opacity:1; transform:none}
/* Große Wortmarke im Footer: steigt aus einer Maske auf */
.giant{overflow:hidden}
.anim .giant i{transform:translateY(60%); transition:transform 1.4s var(--ease)}
.anim .giant.in i{transform:none}
/* Handy: Texte kommen früher, mit kürzerem Weg; Zoom fällt weg (Filmkorn bleibt wie auf dem Desktop) */
@media (max-width:820px){
  .anim :is(main .label, main .big, .analyse-body, .perks, .jobs li, .stats-band .kpi, .manifest li, footer .big, .principles li, .services li, .host .txt > .mono, .host .lead, .host .body, .sig, .case-txt, .faq details, .closing .act, .foot){
    transform:translateY(16px); transition-duration:.9s, 1s;
  }
}

/* Vorhang: Fläche über dem Bild fährt nach oben weg. Nur transform, damit es auf der Grafikkarte läuft */
.anim .photo::before{
  content:""; position:absolute; inset:-2px; z-index:3; pointer-events:none;
  background:var(--bg-2); transform-origin:50% 0;
  transition:transform 1.3s var(--ease); transition-delay:inherit;
}
.anim figure.in .photo::before{transform:scaleY(0)}
.anim .photo img{transform:scale(1.14); transition:transform 1.8s var(--ease); transition-delay:inherit}
.anim figure.in .photo img{transform:scale(1)}
@media (max-width:820px){.anim .photo img{transform:none}}
.anim .host figcaption{opacity:0; transition:opacity 1s var(--ease) .5s}
.anim .host figure.in figcaption{opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}