/* ──────────────────────────────────────────────────────────────
   DDX — mission + research only. Everything shared lives in ddx.css.
   ────────────────────────────────────────────────────────────── */

/* ── page hero ───────────────────────────────────────────────── */
.phero{padding-block:clamp(130px,20vh,230px) clamp(50px,7vw,110px);position:relative}
.phero--tight{padding-bottom:clamp(8px,1.2vw,20px)}
.h-xl{font-size:clamp(2.6rem,1.4rem + 5.4vw,6.4rem);font-weight:800;letter-spacing:-.045em;
  line-height:.94;margin:.5rem 0 0;max-width:17ch;text-wrap:balance}
.phero .lede{margin-top:clamp(20px,2.4vw,34px)}

/* ── the two first-principles swaps ──────────────────────────── */
.shift{display:grid;gap:12px;margin-top:clamp(34px,4vw,56px)}
@media(min-width:760px){.shift{grid-template-columns:repeat(2,1fr)}}
.shift__p{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);flex-wrap:wrap;
  border:1px solid currentColor;border-radius:999px;padding:clamp(14px,1.6vw,22px) clamp(20px,2.4vw,32px)}
.shift__from{opacity:.4;text-decoration:line-through;text-decoration-thickness:1px;
  font-weight:500;font-size:clamp(.95rem,.85rem + .4vw,1.2rem)}
.shift__ar{opacity:.35}
.shift__to{font-weight:800;letter-spacing:-.03em;font-size:clamp(1.1rem,.9rem + .9vw,1.7rem)}

.purpose{margin-top:clamp(26px,3vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.08;
  font-size:clamp(1.3rem,1rem + 1.4vw,2.1rem);max-width:20ch;
  border-left:2px solid var(--yellow);padding-left:clamp(16px,1.6vw,24px)}

/* ── pull quote ──────────────────────────────────────────────── */
.pull{margin:clamp(40px,5vw,72px) 0 0;font-size:clamp(1.5rem,1rem + 2.4vw,3.2rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.08;max-width:18ch;color:var(--yellow)}
.pull cite{display:block;margin-top:1.3rem;font-style:normal;font-weight:300;font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:currentColor;opacity:.45}
.pillar--wide .pillar__n{color:var(--yellow);font-size:clamp(1.1rem,1rem + .6vw,1.5rem);
  font-weight:800;letter-spacing:-.03em;opacity:1}
.pillar--wide .pillar__t{font-weight:400;font-size:clamp(.95rem,.9rem + .3vw,1.1rem);
  line-height:1.4;letter-spacing:-.01em;max-width:52ch}
.pillar--wide:hover .pillar__n{color:#000}

/* ── impact cards ────────────────────────────────────────────── */
.imps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(36px,4vw,64px);grid-template-columns:1fr}
@media(min-width:720px){.imps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.imps{grid-template-columns:repeat(4,1fr)}}
.imp{background:var(--bg);padding:clamp(24px,2.6vw,36px);display:grid;gap:1rem;
  align-content:start;position:relative;overflow:hidden;transition:background .5s}
.imp::before{content:"";position:absolute;inset:0;background:var(--yellow);
  transform:translateY(100%);transition:transform .6s var(--ease)}
.imp:hover::before{transform:translateY(0)}
.imp > *{position:relative;z-index:1;transition:color .45s}
.imp:hover > *{color:#000}
.imp__n{font-weight:300;font-size:11px;letter-spacing:.26em;opacity:.35}
.imp__h{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.3rem,1rem + 1vw,1.8rem)}
.imp__h span{opacity:.45}
.imp:hover .imp__h span{opacity:.6}
.imp__p{margin:0;font-size:14px;line-height:1.45;opacity:.55}
.imp__d{margin:0;padding-top:1rem;border-top:1px solid currentColor;font-weight:700;
  letter-spacing:-.02em;font-size:15px;line-height:1.3}
.imp:hover .imp__d{border-color:rgba(0,0,0,.25)}

/* ── design drives x ─────────────────────────────────────────── */
.dx__h{margin:.6rem 0 0;font-weight:800;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(2.8rem,1.2rem + 7vw,8rem)}

/* ── research: lead story ────────────────────────────────────── */
.lead{display:grid;gap:clamp(22px,3vw,48px);align-items:center;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  padding:clamp(16px,1.6vw,20px);transition:border-color .4s,background .5s}
@media(min-width:900px){.lead{grid-template-columns:1.15fr 1fr}}
.lead:hover{border-color:var(--line);background:rgba(255,255,255,.03)}
.lead__img{border-radius:9px;aspect-ratio:16/10}
.lead__img img{width:100%;height:100%;object-fit:cover}
.lead__b{padding:clamp(6px,1.4vw,26px) clamp(10px,1.6vw,26px) clamp(18px,1.6vw,26px)}
.lead__h{margin:.8rem 0 0;font-weight:800;letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.6rem);text-wrap:balance}
.lead__x{margin:1rem 0 0;opacity:.55;font-size:15px;line-height:1.5;max-width:46ch}

/* ── der Zitatstrom hinter der Überschrift ─────────────────────
   Dasselbe Bild, mit dem vision.ddxconference.com empfängt: drei Spalten
   mit Karten, die langsam vorbeiziehen. Hier steht es hinter der
   Überschrift: gerade unscharf genug, dass niemand anfängt zu lesen, und
   gerade scharf genug, dass man Karten erkennt — Scheibe, Name, Zitat. Zu
   weich war es zuerst, da blieb nach der Unschärfe nur ein Grauschleier
   übrig und die Wand war keine mehr.

   Die Unschärfe sitzt auf der bewegten Spur selbst, nicht auf dem Rahmen
   darum: so rechnet der Browser die weiche Fassung einmal und schiebt
   danach nur noch. Läge sie auf dem Rahmen, müsste er sie in jedem Bild
   neu rechnen.

   Der Abstand zwischen den Karten steht als margin-bottom und nicht als
   gap — sonst wäre die Spur nicht doppelt so hoch wie ihr halber Weg und
   der Wechsel am Ende der Schleife würde springen. */
/* Mehr Luft als die anderen Überschriften: der Strom braucht Platz,
   sonst sieht man nur zwei Ecken davon. */
.phero--river{overflow:hidden;
  padding-block:clamp(150px,23vh,270px) clamp(150px,20vw,250px)}
.phero--river .wrap{position:relative;z-index:1}
.qr{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 40%,transparent 74%);
  mask-image:linear-gradient(#000 40%,transparent 74%)}
/* Der Schatten liegt links, wo die Überschrift steht; nach rechts gibt er
   die Wand frei. Ein Teich in der Mitte hätte genau die Karten verschluckt,
   die man sehen soll. */
.qr::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(5,5,5,.96) 0%,rgba(5,5,5,.93) 30%,
    rgba(5,5,5,.62) 46%,rgba(5,5,5,.2) 64%,transparent 84%)}
.qr__cols{--g:clamp(14px,2vw,30px);
  position:absolute;inset:-14% -1%;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--g)}
.qr__c{overflow:hidden}
/* Die Karten bleiben voll deckend; gedimmt wird allein durch den Verlauf
   darüber. Jede Deckkraft hier unten frisst nach der Unschärfe genau das
   weg, was die Karten als Karten erkennbar macht. */
.qr__t{filter:blur(2px);will-change:transform;
  animation:qrdrift 86s linear infinite}
.qr__c:nth-child(2) .qr__t{animation-duration:112s;animation-direction:reverse}
.qr__c:nth-child(3) .qr__t{animation-duration:74s}
@keyframes qrdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
.qr__card{margin-bottom:var(--g);padding:20px 20px 18px;border-radius:4px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55)}
.qr__who{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.qr__pic{flex:none;width:54px;height:54px;border-radius:50%;object-fit:cover;
  object-position:center 30%;background:rgba(255,255,255,.14)}
.qr__n,.qr__r{display:block}
.qr__n{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.qr__r{font-size:11px;opacity:.55;margin-top:3px}
.qr__q{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.95)}
.qr__q::before{content:"\201C"}
.qr__q::after{content:"\201D"}
/* Schmale Geräte tragen eine Spalte: drei unscharfe Flächen übereinander
   kosten dort mehr, als das Bild hergibt. */
@media(max-width:860px){.qr__cols{grid-template-columns:repeat(2,1fr)}
  .qr__c:nth-child(3){display:none}
  /* Schmal läuft die Zeile über die ganze Breite — der Schatten kann sich
     nicht mehr auf eine Seite zurückziehen und legt sich flächig. */
  .qr::after{background:radial-gradient(130% 72% at 18% 54%,rgba(5,5,5,.95) 0%,
    rgba(5,5,5,.84) 48%,rgba(5,5,5,.5) 100%)}}
@media(max-width:560px){.qr__cols{grid-template-columns:1fr}
  .qr__c:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){.qr__t{animation:none}}

/* ── research: filters ─────────────────────────────────────────
   Zwei Dinge in diesem Blatt heißen .chip: der Filterknopf hier und das
   Auswahlfeld im Formular weiter unten. Beim Filter trägt der Knopf selbst
   die Pille, im Formular das <span> im <label> — stand beides unqualifiziert
   da, bekam jedes Formularfeld zwei Umrandungen ineinander. Deshalb hier
   button.chip und dort label.chip. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3vw,42px)}
button.chip{font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  padding:.62em 1.1em;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:inherit;opacity:.6;transition:opacity .3s,background .3s,color .3s,border-color .3s}
button.chip:hover{opacity:1;border-color:currentColor}
button.chip.is-on{opacity:1;background:var(--yellow);color:#000;border-color:var(--yellow)}

/* ── research: article grid ──────────────────────────────────── */
.arts{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:1fr}
@media(min-width:680px){.arts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.arts{grid-template-columns:repeat(3,1fr)}}
.art{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:rgba(255,255,255,.015);
  transition:border-color .4s,transform .5s var(--ease),background .5s}
.art:hover{border-color:var(--line);transform:translateY(-4px);background:rgba(255,255,255,.055)}
.art[hidden]{display:none}
.art__img{aspect-ratio:1/1;border-radius:0}
.art__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.art:hover .art__img img{transform:scale(1.05)}
.art__img--none{aspect-ratio:1/1;background:linear-gradient(135deg,#111 0%,#0b0b0a 100%)}
.art__b{padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column;gap:.7rem;flex:1}
.art__m{display:flex;align-items:center;gap:9px;font-weight:300;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;opacity:.5}
.art__k{color:var(--yellow);opacity:.9}
.art__dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.art__h{margin:0;font-weight:700;letter-spacing:-.028em;line-height:1.16;
  font-size:clamp(1.02rem,.95rem + .35vw,1.25rem);text-wrap:balance}
.art__x{margin:0;font-size:13.5px;line-height:1.5;opacity:.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art__g{margin-top:auto;padding-top:.6rem;font-size:12px;font-weight:600;opacity:.55;
  transition:opacity .3s,color .3s}
.art:hover .art__g{opacity:1;color:var(--yellow)}
.arts__none{margin-top:24px}

@media(max-width:620px){
  .phero{padding-block:clamp(110px,18vh,150px) 40px}
  /* Die Reihe braucht ihren Fuß auch hier — sonst stehen die Leute
     mitten im Vorspann. Kommt nach `.phero`, sonst gewinnt die Zeile
     darüber. */
  .phero--river{padding-bottom:clamp(120px,32vw,160px)}
  .lead{padding:10px}
  .pull{margin-top:34px}
}

/* ── partner: the five formats ───────────────────────────────── */
.opts{display:grid;gap:1px;background:currentColor;border:1px solid currentColor;
  margin-top:clamp(34px,4vw,60px);grid-template-columns:1fr}
/* Five cards never divide evenly, so the last one widens to close the row. */
@media(min-width:680px) and (max-width:1079px){
  .opts{grid-template-columns:repeat(2,1fr)}
  .opt:nth-child(5){grid-column:span 2}
}
@media(min-width:1080px) and (max-width:1179px){
  .opts{grid-template-columns:repeat(3,1fr)}
  .opt:nth-child(5){grid-column:span 2}
}
@media(min-width:1180px){.opts{grid-template-columns:repeat(5,1fr)}}
.opt{background:var(--bg);padding:clamp(22px,2.4vw,32px);display:grid;gap:.6rem;
  align-content:start;min-height:clamp(180px,17vw,250px);position:relative;overflow:hidden;
  transition:background .5s}
.opt::before{content:"";position:absolute;inset:0;background:var(--yellow);
  transform:translateY(100%);transition:transform .6s var(--ease)}
.opt:hover::before{transform:translateY(0)}
.opt > *{position:relative;z-index:1;transition:color .45s}
.opt__n{font-weight:300;font-size:11px;letter-spacing:.26em;opacity:.35}
.opt__h{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.2rem,1rem + .9vw,1.7rem)}
.opt__k{margin:0;font-weight:600;font-size:13px;letter-spacing:-.01em;opacity:.75}
.opt__p{margin:.3rem 0 0;font-size:13.5px;line-height:1.45;opacity:.5}

/* ── speak: was vor und am Tag zu tun ist ────────────────────── */
/* Drei Formate nebeneinander, je zwei kurze Listen. Bewusst keine
   Karten mit Hover: das liest jemand, der schon zugesagt hat, nicht
   jemand, der noch auswählt. */
.fmts{display:grid;gap:1px;background:currentColor;border:1px solid currentColor;
  margin-top:clamp(34px,4vw,60px);grid-template-columns:1fr}
@media(min-width:860px){.fmts{grid-template-columns:repeat(3,1fr)}}
.fmt{background:var(--bg);padding:clamp(24px,2.6vw,36px)}
.fmt__h{margin:0 0 clamp(16px,1.8vw,24px);font-weight:800;letter-spacing:-.035em;
  line-height:1;font-size:clamp(1.2rem,1rem + .9vw,1.7rem)}
.fmt__k{margin:0 0 .55rem;font-weight:300;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;opacity:.4}
.fmt ul{margin:0 0 clamp(20px,2vw,28px);padding-left:1.1em}
.fmt ul:last-child{margin-bottom:0}
.fmt li{font-size:13.5px;line-height:1.5;opacity:.6;margin-bottom:.5rem}
.fmt li::marker{color:var(--yellow)}

/* ── partner: testimonials ───────────────────────────────────── */
.says{display:grid;gap:clamp(18px,2.4vw,34px);margin-top:clamp(30px,3.4vw,52px);
  grid-template-columns:1fr}
@media(min-width:900px){.says{grid-template-columns:repeat(2,1fr)}}
.say{margin:0;border:1px solid var(--line);border-radius:12px;
  padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column;gap:1.6rem;
  justify-content:space-between;transition:border-color .4s,background .5s}
.say:hover{border-color:rgba(255,242,0,.4);background:rgba(255,255,255,.02)}
.say blockquote{margin:0;font-weight:700;letter-spacing:-.028em;line-height:1.22;
  font-size:clamp(1.05rem,.95rem + .7vw,1.5rem);text-wrap:balance}
.say figcaption{display:flex;flex-direction:column;gap:.5rem}
.say__n{font-weight:800;letter-spacing:-.03em;font-size:clamp(1.2rem,1rem + .7vw,1.6rem)}
.say__r{font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.45}
.say .press__m{width:clamp(104px,11vw,164px);filter:none}   /* dark card */

/* ── host portrait ───────────────────────────────────────────── */
/* Cut-out on the same near-black as the section, so it reads as a person
   standing on the page rather than a photo in a box. */
/* No box at all: the cut-out is feathered into the page, so JPEG noise in
   the flat black never shows up as a rectangle. */
.hostpic{background:transparent;max-width:380px;
  -webkit-mask-image:radial-gradient(118% 104% at 50% 38%,#000 52%,transparent 100%);
  mask-image:radial-gradient(118% 104% at 50% 38%,#000 52%,transparent 100%);
  margin-top:clamp(20px,2.4vw,32px)}
.hostpic img{display:block;width:100%;height:auto;transition:transform .9s var(--ease)}
.hostpic:hover img{transform:scale(1.03)}
@media(max-width:899px){.hostpic{max-width:260px}}

/* ── host ────────────────────────────────────────────────────────
   The stage photograph carries the section; the podcast still sits
   half on top of it, the way a magazine would set an inset. */
.hostsec__h{max-width:none}
.hostlay{display:grid;gap:clamp(30px,4vw,64px);align-items:center;
  margin-top:clamp(30px,3.6vw,56px)}
@media(min-width:960px){.hostlay{grid-template-columns:1.1fr .9fr}}

.hostlay__media{margin:0;position:relative;padding-bottom:clamp(54px,7vw,86px)}
.hostshot{border-radius:10px;overflow:hidden}
.hostshot img{width:100%;height:auto;display:block}
.hostlay__inset{position:absolute;left:clamp(14px,2.4vw,32px);bottom:0;width:clamp(120px,19%,186px);
  border-radius:8px;overflow:hidden;box-shadow:0 18px 44px -18px rgba(0,0,0,.95);
  outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}
.hostlay__inset .hostshot{border-radius:8px}
.hostlay__media figcaption{position:absolute;right:0;bottom:clamp(12px,1.6vw,22px);
  max-width:min(46%,30ch);text-align:right;
  font-weight:300;font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;opacity:.4}
@media(max-width:620px){
  .hostlay__media{padding-bottom:0}
  .hostlay__inset{position:static;width:140px;margin-top:-28px;margin-left:14px;position:relative}
  .hostlay__media figcaption{position:static;max-width:none;text-align:left;margin-top:12px}
}

.hostlead{margin:0;font-size:clamp(1.15rem,.95rem + 1vw,1.6rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.24;max-width:24ch;text-wrap:balance}
.hostbody{margin:clamp(16px,1.8vw,24px) 0 0;max-width:46ch;font-size:15px;line-height:1.55}

/* A short credentials list, set as a table rather than another paragraph. */
.hostfacts{margin:clamp(26px,3vw,40px) 0 0;display:grid;gap:0;
  border-top:1px solid var(--line)}
.hostfacts > div{display:grid;grid-template-columns:minmax(96px,30%) 1fr;gap:clamp(10px,1.6vw,22px);
  padding:clamp(11px,1.3vw,15px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.hostfacts dt{font-weight:300;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.4}
.hostfacts dd{margin:0;font-size:14.5px;letter-spacing:-.012em;line-height:1.35}

/* ── ticket picker ───────────────────────────────────────────── */
.tks{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin-top:clamp(24px,3vw,40px)}
.tk{display:grid;align-items:center;gap:clamp(14px,2vw,26px);background:#0A0A09;
  grid-template-columns:auto 1fr auto;padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  position:relative;transition:background .45s}
@media(min-width:860px){.tk{grid-template-columns:auto 1fr auto auto}}
.tk:hover{background:#111110}
.tk__pic{width:clamp(56px,6vw,82px);aspect-ratio:4/3;border-radius:7px;overflow:hidden;flex:none;
  background:#141413}
.tk__pic img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.82);transition:filter .5s,transform .9s var(--ease)}
.tk:hover .tk__pic img{filter:brightness(1);transform:scale(1.07)}
.tk__b{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.tk__c{font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.15rem,1rem + .9vw,1.7rem)}
.tk__w{font-weight:300;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.5}
.tk__s{font-weight:300;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:.5em .85em;border-radius:999px;white-space:nowrap;justify-self:start}
.tk__s--live{background:var(--yellow);color:#000}
.tk__s--soon{border:1px solid var(--line);opacity:.5}
.tk__g{grid-column:1/-1;font-size:12.5px;font-weight:600;opacity:.6;
  transition:opacity .35s,color .35s}
@media(min-width:860px){.tk__g{grid-column:auto;white-space:nowrap;text-align:right}}
.tk:hover .tk__g{opacity:1;color:var(--yellow)}
.tk--soon .tk__c{opacity:.72}


/* ── the loop: three words, nothing under them ─────────────────
   The line is the whole section, so it is set as large as the page allows. */
.loopbig{text-align:center;padding-block:clamp(90px,13vw,220px)}
.loopbig .eyebrow{justify-content:center}
.loopbig__h{margin:clamp(18px,2.4vw,34px) 0 0;
  font-size:clamp(2.6rem,.6rem + 8.4vw,9rem);font-weight:800;
  letter-spacing:-.045em;line-height:.92;text-wrap:balance}


/* ── the host's two photographs: where it started, where it is now ── */
/* Two stops on the same journey, so they carry the same weight: one row,
   equal boxes, each with its own line underneath. */
/* Photographs first, across the whole column; the words sit under them. */
.hostlay--stack{grid-template-columns:1fr;align-items:start;
  gap:clamp(24px,3vw,44px)}
@media(min-width:960px){.hostlay--stack{grid-template-columns:1fr}}
/* Under the photographs the column is wide, so the lines may run to about
   three quarters of it instead of keeping the narrow side-by-side measure. */
.hostlay--stack .hostlay__text{max-width:75%}
.hostlay--stack .hostlead{max-width:none}
.hostlay--stack .hostbody{max-width:68ch}
@media(max-width:760px){.hostlay--stack .hostlay__text{max-width:none}}
.hostpair{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:1fr 1fr;
  padding-bottom:0}
/* the older absolute caption rule above must not reach these */
.hostpair figcaption{position:static;max-width:none;text-align:left}
.hostshot2{margin:0;display:flex;flex-direction:column}
.hostshot2 .frame{aspect-ratio:4/3}
.hostshot2 .frame img{width:100%;height:100%;object-fit:cover}
.hostshot2 figcaption{margin-top:.65rem;font-size:12.5px;line-height:1.35;
  opacity:.55;letter-spacing:.01em}
.hostshot2 figcaption a{color:inherit;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.hostshot2 figcaption a:hover{color:var(--yellow)}

/* ── the podcast it grew out of ────────────────────────────────
   Short muted loops, converted from the GIFs on the live site: a 12 MB
   animation becomes a 200 KB clip that behaves the same on the page. */
.pods{display:grid;gap:clamp(10px,1.2vw,18px);grid-template-columns:repeat(3,1fr);
  margin-top:clamp(16px,2vw,26px)}
.pod{margin:0;border-radius:10px;overflow:hidden;background:#111}
.pod video{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
@media(max-width:620px){.pods{grid-template-columns:1fr 1fr}.pods .pod:last-child{display:none}}

/* ── praise ────────────────────────────────────────────────────
   Three cards, portrait over name over quote, as on the live site. */
.praise{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:1fr;
  margin-top:clamp(34px,4vw,58px)}
@media(min-width:860px){.praise{grid-template-columns:repeat(3,1fr)}}
.prz{margin:0;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:12px;padding:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;gap:.9rem}
.prz img{width:clamp(56px,5vw,72px);height:clamp(56px,5vw,72px);border-radius:50%;
  object-fit:cover;filter:grayscale(1)}
.prz figcaption{display:flex;flex-direction:column;gap:.2rem}
.prz figcaption b{font-size:clamp(1rem,.94rem + .3vw,1.18rem);letter-spacing:-.02em}
.prz figcaption span{font-size:12px;color:var(--yellow);opacity:.85;line-height:1.35}
.prz blockquote{margin:0;font-size:13.5px;line-height:1.6;opacity:.72;font-style:italic}

/* ── the hovered edition, echoed behind the top of the page ────
   Anchored to the document top so the picture reaches up behind the hero,
   and dissolving at the bottom so it never collides with the list below. */
.tksbg{position:absolute;top:0;left:0;right:0;height:min(1100px,92vh);
  z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 54%,transparent 100%)}
.tksbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s var(--ease);
  filter:saturate(1.08) brightness(1.04) blur(9px);transform:scale(1.07)}
.tksbg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 100% at 50% 40%,rgba(5,5,5,.04),rgba(5,5,5,.46))}
.phero,.tks{position:relative;z-index:1}

/* ── die Reihe am Fuß des Research-Kopfes ──────────────────────── */
/* Von ddxconference.com/insights übernommen: acht Ausgeschnittene stehen
   auf der Unterkante, dahinter läuft das Wort durch. Dort war der Grund
   hellgrau und das Wort #E9E9E9 — hier ist es umgekehrt, also ein paar
   Prozent Weiß auf Schwarz. Die Leute selbst bewegen sich nicht: ein
   Foto, das wandert, sieht aus wie ein Fehler. */
.band{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:clamp(132px,19vw,238px);overflow:hidden}
.band__m{position:absolute;left:0;right:0;bottom:clamp(30px,4.4vw,62px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.band__t{display:flex;width:max-content;will-change:transform;
  animation:bandrun 54s linear infinite;
  font-size:clamp(44px,8.2vw,112px);font-weight:700;letter-spacing:-.02em;
  line-height:1;text-transform:uppercase;white-space:nowrap;
  color:rgba(255,255,255,.075)}
.band__t span{padding-right:.4em}
@keyframes bandrun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Unten bündig, mittig, und bewusst breiter als der Textsatz: die Reihe
   soll den Kopf zumachen, nicht in ihm stehen. */
/* Unten laufen sie aus, statt abgeschnitten zu werden. Auf der alten Seite
   erledigte das die weiße Karte, die über ihnen lag; auf Schwarz braucht es
   einen Verlauf, sonst liegt da ein Lineal quer durch acht Oberkörper. */
.band__p{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:block;width:min(1340px,98vw);height:auto;
  -webkit-mask-image:linear-gradient(#000 76%,transparent 99%);
  mask-image:linear-gradient(#000 76%,transparent 99%)}
@media(max-width:860px){.band{height:clamp(104px,26vw,150px)}
  .band__p{width:170vw;max-width:none}}
@media(max-width:560px){.band__p{width:220vw}}
@media(prefers-reduced-motion:reduce){.band__t{animation:none}}

/* ── the quote wall, teased under the research header ──────────── */
/* Ten of the voices from vision.ddxconference.com, drifting past. Each card
   is a link to the wall itself, so there is no wrong place to click. */
.vis{padding-block:clamp(26px,3.4vw,44px) clamp(40px,5vw,70px);
  border-bottom:1px solid var(--line)}
.vis__h{display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;flex-wrap:wrap}
.vis__cta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--yellow);text-decoration:none;white-space:nowrap}
.vis__cta:hover{text-decoration:underline;text-underline-offset:4px}
.vis__v{overflow:hidden;margin-top:clamp(18px,2.2vw,30px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vis__t{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;
  padding-inline:var(--gutter);will-change:transform}
.vis__c{flex:none;width:clamp(260px,24vw,340px);
  display:flex;flex-direction:column;gap:.5rem;
  padding:clamp(18px,1.8vw,24px);border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:inherit;
  transition:background .45s,transform .6s var(--ease)}
.vis__c:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
.vis__q{margin:0 0 auto;font-size:14px;line-height:1.5;opacity:.86}
.vis__q::before{content:"\201C"}
.vis__q::after{content:"\201D"}
.vis__by{display:flex;align-items:center;gap:11px;margin-top:.6rem}
.vis__p{flex:none;width:54px;height:54px;border-radius:50%;object-fit:cover;
  object-position:center 30%;background:rgba(255,255,255,.06)}
.vis__n{margin:0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--yellow)}
.vis__r{margin:0;font-size:12px;opacity:.5;line-height:1.35}
@media(max-width:620px){.vis__c{width:min(76vw,290px)}}

/* ── the mission film, behind the three words ──────────────────── */
/* Muted and looping: the line stays the loudest thing in the section, the
   film only gives it somewhere to happen. It dissolves into the page at the
   top and bottom so the section still has no edges. */
.loopbig{position:relative;overflow:hidden;isolation:isolate}
.loopbig__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-1;pointer-events:none;opacity:.5;filter:saturate(1.05) brightness(.9) blur(5px);
  transform:scale(1.06);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.loopbig::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,rgba(5,5,5,.3),rgba(5,5,5,.78))}

/* ── legal pages ───────────────────────────────────────────────── */
/* Long-form statutory text. One narrow column, generous leading, nothing
   decorative: the only job here is that it can be read and cited. */
.legal{max-width:68ch;font-size:15px;line-height:1.72}
.legal--wide{max-width:none}
.legal h2{margin:clamp(34px,4vw,56px) 0 .7rem;font-size:clamp(1.1rem,.95rem + .5vw,1.5rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.2}
.legal h2:first-child{margin-top:0}
.legal h3{margin:clamp(22px,2.6vw,34px) 0 .5rem;font-size:1rem;font-weight:600}
.legal p{margin:0 0 1.05rem;opacity:.82}
.legal strong{opacity:1;font-weight:600}
.legal ul,.legal ol{margin:0 0 1.05rem;padding-left:1.3rem;opacity:.82}
.legal li{margin-bottom:.45rem}
/* links in running text, but never the buttons: a yellow label on a yellow
   pill is an invisible button */
.legal a:not(.btn){color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.legal .btn{text-decoration:none}
.legal__kv{display:grid;gap:1.1rem 2.4rem;margin:0 0 1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.legal__kv dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.45;
  margin-bottom:.3rem}
.legal__kv dd{margin:0;opacity:.86}
.legal__foot{margin-top:clamp(34px,4vw,56px);padding-top:clamp(20px,2.4vw,32px);
  border-top:1px solid var(--line);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.4}

/* ── press: the collage from the live page, rebuilt ─────────────── */
/* Three shots overlapping at the left, the material on the right. The
   stack only holds together above tablet width; narrower, the pictures
   become a plain row above the text. */
.pressrow{display:grid;gap:clamp(26px,4vw,60px);align-items:center;max-width:none}
@media(min-width:900px){.pressrow{grid-template-columns:1.05fr .95fr}}
.presscol{position:relative;aspect-ratio:4/3}
.pressshot{position:absolute;margin:0;border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.pressshot img{width:100%;height:100%;object-fit:cover;display:block}
.pressshot--a{left:0;top:2%;width:34%;aspect-ratio:2/3;z-index:2}
.pressshot--b{left:6%;top:34%;width:34%;aspect-ratio:2/3;z-index:3}
.pressshot--c{right:0;top:10%;width:62%;aspect-ratio:4/3;z-index:1}
@media(max-width:899px){
  .presscol{position:static;aspect-ratio:auto;display:grid;gap:10px;
    grid-template-columns:1fr 1fr}
  .pressshot{position:static;width:auto;box-shadow:none}
  .pressshot--a,.pressshot--b{aspect-ratio:2/3}
  .pressshot--c{grid-column:1 / -1;aspect-ratio:16/10}}
.presstext > :first-child{margin-top:0}
.presstext h2:first-of-type{margin-top:clamp(28px,3.4vw,46px)}

/* ── /partner: Anfrage und die sechs Formate ──────────────────────────
   Das Formular steht oben, weil die Frage „passt das zu uns" meist schon
   vor der Preisliste entschieden ist. Die Kacheln darunter sind die
   OPTIONS-Folie aus dem Partner-Deck. */
.req{display:grid;gap:clamp(26px,3vw,48px);align-items:start}
@media(min-width:960px){.req{grid-template-columns:.85fr 1.15fr}}
.req__h{font-size:clamp(1.9rem,1.2rem + 2vw,3rem);font-weight:800;letter-spacing:-.045em;
  line-height:1;margin:.4rem 0 0;text-wrap:balance}
.req__p{margin:1.1rem 0 0;font-size:15px;line-height:1.55;opacity:.72;max-width:40ch}
.req__m{margin:1.4rem 0 0;font-size:13.5px;opacity:.6}
.req__m a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}

.req__form{display:grid;gap:clamp(14px,1.5vw,20px);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:clamp(20px,2.4vw,34px)}
.req__row{display:grid;gap:inherit;grid-template-columns:1fr}
@media(min-width:620px){.req__row{grid-template-columns:1fr 1fr}}
.fld{display:grid;gap:.5rem;min-width:0}
.fld__l{font-weight:300;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.55}
.fld__l i{font-style:normal;letter-spacing:.14em;opacity:.7}
.fld__i{font:inherit;font-size:15px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:.78em .9em;
  width:100%;min-width:0;transition:border-color .3s,background .3s}
.fld__i:focus{outline:none;border-color:var(--yellow);background:rgba(255,255,255,.07)}
.fld__i[aria-invalid="true"]{border-color:#ff6b5e}
.fld__t{resize:vertical;line-height:1.5}
.fset{border:0;padding:0;margin:0;display:grid;gap:.7rem;min-width:0}
.fset .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:0}
label.chip{position:relative;cursor:pointer;display:inline-flex}
label.chip input{position:absolute;opacity:0;width:1px;height:1px}
label.chip span{display:inline-block;font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  padding:.5em .9em;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  transition:background .25s,border-color .25s,color .25s}
label.chip input:focus-visible + span{outline:2px solid var(--yellow);outline-offset:2px}
label.chip:hover span{border-color:rgba(255,255,255,.45)}
label.chip input:checked + span{background:var(--yellow);border-color:var(--yellow);color:#0A0A09;font-weight:700}
.req__send{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.req__msg{margin:0;font-size:13.5px;opacity:.75;min-height:1.2em}

.optiles{display:grid;gap:clamp(10px,1vw,15px);grid-template-columns:1fr}
@media(min-width:860px){
  .optiles{grid-template-columns:repeat(12,1fr)}
  .optile:nth-child(1),.optile:nth-child(2),
  .optile:nth-child(3),.optile:nth-child(4){grid-column:span 6}
  .optile:nth-child(5){grid-column:span 12}
}
.optile{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;
  background:#0D0D0C;border:0;color:#fff;text-align:left;font:inherit;cursor:pointer;
  min-height:clamp(148px,15vw,206px);padding:clamp(20px,2.1vw,30px);
  display:flex;flex-direction:column;justify-content:center}
.optile img{position:absolute;inset:0 0 0 auto;width:62%;height:100%;object-fit:cover;
  z-index:0;transition:transform 1s var(--ease)}
/* Der Verlauf trägt die Schrift: ohne ihn liegt sie auf dem Foto. */
.optile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#0D0D0C 32%,rgba(13,13,12,.78) 56%,rgba(13,13,12,.22) 100%)}
.optile > *{position:relative;z-index:2}
.optile:hover img{transform:scale(1.05)}
.optile__h{margin:0;font-size:clamp(1.3rem,1.9vw,1.95rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.optile__p{margin:.55rem 0 0;max-width:30ch;font-size:clamp(13px,1vw,14.5px);
  line-height:1.45;font-style:italic;opacity:.8}
.optile__x{margin:.8rem 0 0;max-width:30ch;font-size:12px;opacity:.5}
/* Die letzte Kachel liegt allein in der Reihe, das Foto darf schmaler sein. */
.optile:nth-child(5) img{width:48%}
.optile[data-picked]{box-shadow:inset 0 0 0 2px var(--yellow)}

/* ── /partner: Leadership Roundtables ─────────────────────────────────
   Das Format verkauft sich über Nähe, nicht über Reichweite, also steht
   hier die Liste und nicht die Bühne. Preise bleiben draußen. */
.rt{display:grid;gap:clamp(24px,3vw,52px);align-items:start}
@media(min-width:980px){.rt{grid-template-columns:1.05fr .95fr}}
.rt__h{font-size:clamp(1.9rem,1.1rem + 2.3vw,3.2rem);font-weight:800;letter-spacing:-.05em;
  line-height:.98;margin:.5rem 0 0;max-width:16ch;text-wrap:balance}
.rt__lede{margin:1.1rem 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.5;
  font-style:italic;opacity:.8;max-width:46ch}
.rt__list{list-style:none;margin:clamp(20px,2.2vw,30px) 0 0;padding:0;display:grid;gap:.72rem;max-width:52ch}
.rt__list li{position:relative;padding-left:1.5rem;font-size:14.5px;line-height:1.5;opacity:.85}
.rt__list li::before{content:"";position:absolute;left:0;top:.56em;width:7px;height:7px;
  background:var(--yellow);border-radius:1px;transform:rotate(45deg)}
.rt__note{margin:1.4rem 0 0;font-size:13px;line-height:1.5;opacity:.52;max-width:46ch}
.rt__cta{margin-top:clamp(22px,2.4vw,34px)}

.rt__media{display:grid;gap:clamp(10px,1vw,14px);grid-template-columns:1fr 1fr}
.rt__wide{grid-column:span 2;margin:0}
.rt figure{margin:0;border-radius:14px;overflow:hidden;background:#0D0D0C}
.rt__wide img{display:block;width:100%;height:auto}
.rt__pic img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* ── /research/<slug>: der Artikel selbst ─────────────────────────────
   Notion liefert den Text, hier bekommt er eine Spalte, in der man ihn
   auch liest: eine Maßzeile, kein Rand bis zum Bildschirmrand. */
.apost__h{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(120px,14vw,220px) clamp(34px,4vw,60px)}
.apost__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(1) brightness(.4) contrast(1.05);transform:scale(1.04)}
.apost__h::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,.72),rgba(5,5,5,.5) 40%,#050505 100%)}
.apost__hin{max-width:min(100%,78ch)}
.apost__m{margin:0 0 clamp(14px,1.6vw,22px);display:flex;align-items:center;gap:10px;
  font-weight:300;font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.apost__m a{opacity:.8}.apost__m a:hover{opacity:1;color:var(--yellow)}
.apost__t{margin:0;font-size:clamp(2rem,1.1rem + 2.8vw,3.9rem);font-weight:800;
  letter-spacing:-.045em;line-height:1;max-width:22ch;text-wrap:balance}
.apost__x{margin:clamp(16px,1.8vw,26px) 0 0;font-size:clamp(15px,1.2vw,18px);
  line-height:1.5;opacity:.72;max-width:56ch}
.apost__by{margin:clamp(18px,2vw,28px) 0 0;font-size:14px;display:flex;flex-wrap:wrap;gap:.5rem 1rem}
.apost__role{opacity:.55}
.apost{padding-top:clamp(26px,3vw,46px)}
.apost__body{max-width:68ch;font-size:clamp(16px,1.15vw,17.5px);line-height:1.68}
.apost__body > * + *{margin-top:1.45em}
.apost__body p{margin:0}
.apost__body h2{font-size:clamp(1.4rem,1rem + 1.2vw,2rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.12;margin-top:2.2em}
.apost__body h3{font-size:clamp(1.15rem,.95rem + .7vw,1.5rem);font-weight:700;
  letter-spacing:-.02em;margin-top:1.9em}
.apost__body h4{font-size:1.05rem;font-weight:700;margin-top:1.7em}
.apost__body a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.apost__body ul,.apost__body ol{margin-left:1.1rem;padding:0;display:grid;gap:.55em}
.apost__body li{padding-left:.2rem}
.apost__body blockquote{margin:1.8em 0;padding-left:clamp(16px,2vw,26px);
  border-left:2px solid var(--yellow);font-size:clamp(17px,1.4vw,21px);line-height:1.4;
  font-weight:500;letter-spacing:-.02em}
.apost__body hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:2.4em 0}
.apost__fig{margin:2em 0}
.apost__fig img{width:100%;height:auto;border-radius:10px;display:block}
.apost__fig figcaption{margin-top:.7rem;font-size:12.5px;opacity:.5}
.apost__note{padding:1em 1.2em;border-radius:10px;background:rgba(255,242,0,.07);
  border:1px solid rgba(255,242,0,.18)}

/* ── /congrats: die drei Schritte ─────────────────────────────────────
   Die Kacheln aus .imps stehen hier untereinander statt zu viert
   nebeneinander — jeder Schritt trägt einen ganzen Absatz. Ohne Maß
   liefe der über die volle Breite und wäre am Zeilenende verloren. */
#steps .imp__p{max-width:62ch}

/* ── /congrats: der Weg bis zur Bühne ─────────────────────────────────
   Eine Liste von Fristen erzeugt keine Vorfreude. Die Schritte hängen
   deshalb an einer Achse: man sieht auf einen Blick, wie weit es noch
   ist — und dass der erste Schritt längst erledigt ist. */
.tl{list-style:none;margin:clamp(36px,4vw,64px) 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:16px;bottom:16px;width:1px;
  background:var(--line)}
.tl__i{position:relative;padding:0 0 clamp(30px,3.4vw,46px) clamp(34px,3.4vw,54px)}
.tl__i:last-child{padding-bottom:0}
.tl__i::before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px;
  box-sizing:border-box;border-radius:50%;border:1px solid var(--line);
  background:var(--bg);transition:background .5s var(--ease),border-color .5s var(--ease)}
/* Der gelbe Balken läuft beim Scrollen die Achse herunter (ddx.js) und
   schaltet die Punkte ein, an denen er vorbeikommt. Ohne JS bleibt die
   Achse grau und die Punkte hell genug — nichts hängt daran. */
.tl__fill{position:absolute;left:7px;top:16px;width:1px;height:0;
  background:linear-gradient(180deg,rgba(255,242,0,.25),var(--yellow) 22%,var(--yellow));
  box-shadow:0 0 7px rgba(255,242,0,.75),0 0 18px rgba(255,242,0,.3);
  will-change:height}
.tl__fill::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;
  transform:translate(-50%,50%);border-radius:50%;background:var(--yellow);
  box-shadow:0 0 10px 2px rgba(255,242,0,.55)}
.tl__i--done::before,.tl__i--on::before{background:var(--yellow);border-color:var(--yellow)}
.tl__i--on::before{box-shadow:0 0 12px rgba(255,242,0,.5)}
.tl__i:hover::before{border-color:var(--yellow)}
.tl__w{font-weight:300;font-size:11px;letter-spacing:.26em;opacity:.4}
.tl__h{margin:.55rem 0 0;font-weight:800;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(1.25rem,1rem + .9vw,1.7rem)}
.tl__p{margin:.75rem 0 0;max-width:58ch;opacity:.72}
.tl__d{margin:.6rem 0 0;font-size:.8rem;letter-spacing:.05em;opacity:.42}
/* Rechts neben der Achse stehen die Dinge, die dabei entstehen: die
   Sprecherkarten, der Raum. Ab 1000px bleibt die Spalte stehen, während
   man die Schritte durchscrollt. */
.tllay{display:grid;gap:clamp(30px,3.2vw,56px);margin-top:clamp(36px,4vw,64px);align-items:start}
.tllay .tl{margin-top:0}
@media(min-width:1000px){
  .tllay{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}
  .tlart{position:sticky;top:clamp(80px,9vh,118px)}
}
.tlart__c{margin:.9rem 0 0;font-size:.8rem;letter-spacing:.045em;opacity:.45;max-width:44ch}

/* ── /congrats: das Bühnenbild steht neben der Begrüßung ──────────────
   Nicht über die volle Breite: der Satz "You are speaking at DDX" soll
   die Seite tragen, das Bild daneben zeigt, worum es geht. Unter 1000px
   rutscht es unter den Text. */
.phlay{display:grid;gap:clamp(26px,3.2vw,52px);align-items:center}
@media(min-width:1000px){.phlay{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
.phlay__m{margin:0;overflow:hidden}
.phlay__m img{display:block;width:100%;height:auto}
/* Erëza unter der Achse: ein kleines rundes Bild neben dem Satz, damit
   man weiß, an wen man schreibt — nicht mehr als das. */
.tlask{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(24px,2.6vw,38px)}
.tlask img{flex:none;width:clamp(54px,5vw,70px);height:clamp(54px,5vw,70px);
  border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.tlask .dim{margin:0;max-width:60ch}
/* Die Formate stehen auf /speak, nicht hier — ein sichtbarer Verweis
   statt eines Links, der im Fließtext untergeht. */
.tlx{margin:clamp(20px,2.2vw,30px) 0 0;padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line);font-size:14px;opacity:.6}
.tlx__a{color:var(--yellow);text-decoration:none}
.tlx__a:hover{text-decoration:underline;text-underline-offset:4px}

/* ── /speak: ein Block je Format ───────────────────────────────────────
   Name und Eckdaten links, was es ist und die beiden Listen rechts. So
   stand es auf der alten Seite: man versteht ein Format, ohne zu
   springen. Unter 900px fällt es in eine Spalte. */
.fxs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(36px,4vw,64px)}
.fx{background:var(--bg);display:grid;gap:clamp(18px,2.2vw,38px);
  padding:clamp(26px,3vw,46px);align-content:start}
@media(min-width:900px){.fx{grid-template-columns:minmax(0,.33fr) minmax(0,.67fr)}}
.fx__n{font-weight:300;font-size:11px;letter-spacing:.26em;opacity:.35}
.fx__h{margin:.55rem 0 0;font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.4rem)}
.fx__k{margin:.7rem 0 0;font-weight:300;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);opacity:.75;line-height:1.6}
.fx__p{margin:0;max-width:64ch;opacity:.78}
.fx__cols{display:grid;gap:clamp(16px,1.8vw,30px);margin-top:clamp(20px,2.2vw,30px)}
@media(min-width:620px){.fx__cols{grid-template-columns:1fr 1fr;align-items:start}}
.fx__l{margin:0 0 .6rem;font-weight:300;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;opacity:.4}
.fx ul{margin:0;padding-left:1.05em}
.fx li{font-size:13.5px;line-height:1.55;opacity:.62;margin-bottom:.5rem}
.fx li:last-child{margin-bottom:0}
.fx li::marker{color:var(--yellow)}
/* Je ein Bild vom alten Auftritt unter Name und Eckdaten — das Format
   erklärt sich halb von selbst, wenn man sieht, wie es aussieht. */
.fx__img{margin:clamp(18px,2vw,26px) 0 0;overflow:hidden;border-radius:10px}
.fx__img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;filter:saturate(1.02)}

/* ── Archivseiten vergangener Editionen ───────────────────────────────
   /munich-2026 und was danach kommt. Eine Edition, die vorbei ist,
   verkauft nichts mehr: kein Ticketknopf, kein Countdown. Was bleibt,
   sind die Eckdaten, wer auf der Buehne stand und ein Verweis auf die
   naechste Ausgabe. Deshalb eine eigene, ruhigere Anordnung. */
.arh{display:grid;gap:clamp(10px,1.2vw,16px);margin-top:clamp(22px,2.4vw,34px);
  max-width:72ch}
.arh__d{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(1.15rem,1rem + .8vw,1.7rem)}
.arh__v{margin:0;opacity:.72}
/* Die Zahlen der Edition. Dieselbe Rasterlogik wie auf den Stadtseiten,
   nur ohne Animation — hier bewegt sich nichts mehr. */
.arst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-top:clamp(30px,3.4vw,52px)}
@media(min-width:760px){.arst{grid-template-columns:repeat(4,minmax(0,1fr))}}
.arst__c{background:var(--bg);padding:clamp(20px,2.4vw,34px)}
.arst__n{display:block;font-weight:800;letter-spacing:-.05em;line-height:1;
  font-size:clamp(2rem,1.4rem + 2.2vw,3.4rem)}
.arst__l{display:block;margin-top:.5rem;font-weight:300;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;opacity:.42}
/* Wer auf der Buehne stand. Name, Rolle, Haus — in dieser Reihenfolge,
   weil danach gesucht wird. */
.arsp{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(28px,3vw,44px);list-style:none;padding:0}
@media(min-width:620px){.arsp{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.arsp{grid-template-columns:1fr 1fr 1fr}}
.arsp li{background:var(--bg);padding:clamp(16px,1.8vw,24px)}
.arsp b{display:block;font-weight:800;letter-spacing:-.02em;font-size:16px}
.arsp span{display:block;margin-top:.3rem;font-size:13px;line-height:1.5;opacity:.62}
/* Der Verweis auf die naechste Ausgabe: der einzige Weg nach vorn auf
   einer Seite, die sonst nur zurueckschaut. */
.arnx{margin-top:clamp(34px,3.6vw,56px);padding:clamp(24px,2.8vw,40px);
  border:1px solid var(--line);border-radius:12px;display:grid;
  gap:clamp(12px,1.4vw,20px);justify-items:start}
.arnx__k{margin:0;font-weight:300;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--yellow);opacity:.8}
.arnx__p{margin:0;max-width:62ch;opacity:.78}