/* ──────────────────────────────────────────────────────────────
   Conference page — the parts the home page doesn't have.
   Everything else comes from ddx.css, so the two stay in step.
   ────────────────────────────────────────────────────────────── */

/* hero: the city photo sits under the same WebGL wash as the home page */
.chero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.chero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.42);transform:scale(1.06);will-change:transform}
.chero .hero__canvas{mix-blend-mode:screen;opacity:.62}
.chero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,.7) 0%,rgba(5,5,5,.18) 38%,rgba(5,5,5,.95) 100%)}
.chero__in{position:relative;z-index:2;width:100%;padding-block:0 clamp(42px,6vw,92px)}
.chero__date{margin:0 0 clamp(14px,1.7vw,24px);font-weight:300;
  font-size:clamp(13px,.4vw + 12px,16px);
  letter-spacing:.22em;text-transform:uppercase;opacity:.72}
.chero__clock{position:absolute;z-index:3;top:calc(50% - 20px);right:var(--gutter);
  display:flex;align-items:center;gap:9px;padding:.55em .95em;border-radius:999px;
  background:rgba(5,5,5,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:600;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;animation:breathe 2.6s ease-in-out infinite}
.chero__tzl{font-weight:300;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
@media(max-width:760px){
  .chero{min-height:90svh}
  .chero__clock{top:auto;bottom:calc(100% - 100svh + 18px);right:16px}
}

/* countdown */
.cd{display:flex;gap:clamp(10px,2vw,28px);flex-wrap:wrap;margin-top:clamp(20px,2.4vw,34px)}
.cd__u{display:grid;gap:.6rem;justify-items:start}
.cd__v{font-size:clamp(2.6rem,1.2rem + 5vw,6rem);font-weight:800;letter-spacing:-.05em;
  line-height:1;font-variant-numeric:tabular-nums}
.cd__l{font-weight:300;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.5}
.cd__sep{font-size:clamp(2rem,4vw,4rem);font-weight:200;opacity:.25;line-height:1.1;align-self:start}
.cd--done{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;letter-spacing:-.03em}

/* venue card */
.venue{border:1px solid rgba(10,10,9,.14);border-radius:10px;padding:clamp(24px,2.6vw,36px);background:#fff}
.venue__k{font-weight:300;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.45}
.venue__n{font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem);font-weight:800;letter-spacing:-.03em;margin-top:.9rem}
.venue__a{margin:.6rem 0 0;opacity:.6;font-size:14.5px;max-width:34ch}
.venue__meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:1.6rem;padding-top:1.3rem;
  border-top:1px solid rgba(10,10,9,.12);
  font-weight:300;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.55}

/* theme block */
.theme__h{font-size:clamp(2.6rem,1rem + 8vw,8.5rem);line-height:.9;letter-spacing:-.05em}

/* line-up not yet announced */
.soonbox{grid-column:1/-1;border:1px dashed var(--line);border-radius:10px;
  padding:clamp(26px,3vw,44px);background:#0D0D0C}

/* host row */
.host{display:grid;gap:clamp(20px,3vw,56px);grid-template-columns:1fr;align-items:center;
  border-top:1px solid var(--line);padding-top:clamp(26px,3vw,44px)}
@media(min-width:900px){.host{grid-template-columns:auto 1fr}}
.host__n{font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem);font-weight:800;letter-spacing:-.035em;margin-top:.7rem}

/* ── venue map ───────────────────────────────────────────────── */
/* A picture, not an embed: a live map would pull a third party and the whole
   consent apparatus back onto the page. The link opens the real thing. */
.vmap{display:block;position:relative;margin-top:1.6rem;border-radius:8px;overflow:hidden;
  aspect-ratio:16/10;background:#f4f1ec;isolation:isolate}
.vmap img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s}
.vmap:hover img{transform:scale(1.04)}
.vmap__cta{position:absolute;left:14px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:.4em;padding:.55em .95em;border-radius:999px;
  background:var(--yellow);color:#000;font-size:12px;font-weight:600;letter-spacing:-.01em;
  transform:translateY(6px);opacity:0;transition:opacity .4s,transform .4s var(--ease)}
.vmap:hover .vmap__cta,.vmap:focus-visible .vmap__cta{opacity:1;transform:translateY(0)}
.vmap__att{position:absolute;right:10px;bottom:9px;z-index:2;font-size:9px;letter-spacing:.06em;
  color:#fff;opacity:.4}
@media(prefers-reduced-motion:reduce){
  .vmap__cta{opacity:1;transform:none}
  .vmap img{transition:none}
  .vmap:hover img{transform:none}
}

/* ── host portrait ───────────────────────────────────────────── */
/* 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%)}
.hostpic img{display:block;width:100%;height:auto;transition:transform .9s var(--ease)}
.hostpic:hover img{transform:scale(1.03)}
.split--host{align-items:center}
@media(max-width:899px){.hostpic{max-width:240px}}
.hostshot{border-radius:10px;overflow:hidden;max-width:420px}
.hostshot img{width:100%;height:auto;display:block}

/* ── what is on: the conference plus whatever runs around it ──── */
.sides{display:grid;gap:1px;background:rgba(10,10,9,.16);border:1px solid rgba(10,10,9,.16);
  margin-top:clamp(30px,3.4vw,50px);grid-template-columns:1fr}
@media(min-width:820px){.sides{grid-template-columns:repeat(2,1fr)}}
.side{background:var(--bg);padding:clamp(24px,2.6vw,38px);display:grid;gap:.75rem;
  align-content:start;position:relative}
.side__k{font-weight:300;font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.45}
.side--live .side__k{color:#0A0A09;opacity:.75}
.side__n{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem)}
.side__w{display:flex;flex-direction:column;gap:.2rem;font-size:13px;opacity:.6}
.side__w span:first-child{font-weight:600;opacity:.9}
.side__p{margin:.3rem 0 0;font-size:14px;line-height:1.5;opacity:.6;max-width:46ch}
.side__g{margin-top:.6rem;font-size:13px;font-weight:600;display:inline-flex;gap:.4em;
  align-items:center;box-shadow:inset 0 -.45em 0 var(--yellow);width:fit-content;
  transition:box-shadow .35s var(--ease)}
.side__g:hover{box-shadow:inset 0 -1.1em 0 var(--yellow)}
.side--soon .side__n{opacity:.75}

/* ── host card ───────────────────────────────────────────────── */
/* One card, the portrait bleeding into its own column, a yellow rule along
   the top so the block reads as a signature rather than another section. */
.hostcard{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#0A0A09;position:relative;grid-template-columns:1fr}
@media(min-width:760px){.hostcard{grid-template-columns:clamp(190px,26%,280px) 1fr}}
.hostcard::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.hostcard.is-in::before{transform:scaleX(1)}
.hostcard__pic{overflow:hidden;background:#0A0A09;aspect-ratio:4/5}
@media(max-width:759px){.hostcard__pic{aspect-ratio:16/9}}
.hostcard__pic img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform 1s var(--ease)}
.hostcard:hover .hostcard__pic img{transform:scale(1.04)}
.hostcard__b{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;
  gap:.6rem;justify-content:center}
.hostcard__k{margin:0;font-weight:300;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--yellow);opacity:.9}
.hostcard__n{margin:.2rem 0 0;font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem)}
.hostcard__r{margin:0;font-size:13.5px;opacity:.55;letter-spacing:-.01em}
.hostcard__p{margin:.7rem 0 0;font-size:15px;line-height:1.55;opacity:.72;max-width:52ch}
.hostcard__foot{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 20px;
  font-weight:300;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.45}
.hostcard__foot a{box-shadow:inset 0 -1px 0 currentColor}
.hostcard__cta{margin-top:1.4rem;display:flex;gap:10px;flex-wrap:wrap}



/* ── London's branded speaker cards ──────────────────────────── */
.spcard{margin:0;border-radius:10px;overflow:hidden;background:#0A0A09;
  transition:transform .6s var(--ease),box-shadow .5s}
.spcard img{width:100%;height:auto;display:block;transition:transform .9s var(--ease)}
.spcard:hover{transform:translateY(-5px);box-shadow:0 26px 54px -26px rgba(0,0,0,.9)}
.spcard:hover img{transform:scale(1.03)}

/* ── the press quote gets a face ─────────────────────────────── */
.press--face{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px)}
.press__pic{width:clamp(34px,3.2vw,44px);height:clamp(34px,3.2vw,44px);border-radius:50%;
  object-fit:cover;flex:none}
.press--face .press__t{display:flex;flex-direction:column;gap:.45rem}
.press--face .press__m{width:clamp(80px,8vw,112px)}

/* the host card is a signature, not a feature — keep it small */
@media(min-width:760px){.hostcard{grid-template-columns:clamp(132px,17%,176px) 1fr}}
.hostcard__pic{aspect-ratio:1/1}
.hostcard__pic img{object-position:center 30%}



/* ── hero claim ──────────────────────────────────────────────── */
/* Datum und Ort stehen als Zeile über der Überschrift: wer die Seite
   aufmacht, will zuerst wissen wann und wo, der Satz trägt dann. */
.chero__claim{margin:0;font-weight:800;letter-spacing:-.045em;
  line-height:.98;font-size:clamp(2.1rem,1.2rem + 4.2vw,5.2rem);max-width:26ch;text-wrap:pretty}
.chero__tags{margin:.9rem 0 0;font-weight:300;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.38}

/* ── the three people who run the day ────────────────────────── */
/* Three credits, not three features: a round portrait and two lines each. */
.team{display:grid;gap:clamp(14px,2vw,28px);margin-top:clamp(22px,2.6vw,34px);
  grid-template-columns:1fr}
@media(min-width:560px){.team{grid-template-columns:repeat(3,1fr)}}
.tm{display:flex;align-items:center;gap:13px;background:none;border:0;padding:0}
.tm__pic{width:clamp(48px,5.4vw,62px);height:clamp(48px,5.4vw,62px);flex:none;
  border-radius:50%;overflow:hidden;background:#141413}
.tm__pic img{width:100%;height:100%;object-fit:cover;object-position:center 26%;
  transition:transform .9s var(--ease)}
.tm:hover .tm__pic img{transform:scale(1.07)}
.tm__b{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.tm__k{margin:0;font-weight:300;font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--yellow);opacity:.85}
.tm__n{margin:.15rem 0 0;font-weight:700;letter-spacing:-.025em;line-height:1.1;font-size:15px}
.tm__r{margin:0;font-size:12px;opacity:.5;letter-spacing:-.01em}
.tm__p{display:none}

/* ── secure your spot ────────────────────────────────────────── */
/* The whole band goes yellow, the way the live page does it. */
.tix__in{display:grid;gap:clamp(28px,4vw,64px);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.tix__in{grid-template-columns:1.05fr .95fr}}
.tix__h{margin:.3rem 0 0}
.perk{list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;display:grid;gap:.85rem}
.perk li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.45;
  font-weight:500;letter-spacing:-.01em}
/* No disc behind them: the animations are black line art on white, so they
   multiply straight onto the yellow and only the strokes remain. */
.perk__i{flex:none;width:40px;height:40px;display:grid;place-items:center;
  color:inherit;margin-top:-4px}
.tix__cta{margin-top:clamp(26px,3vw,38px);display:flex;gap:12px;flex-wrap:wrap}
.tix__n{margin:16px 0 0;font-weight:300;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55}
.tix__pic{border-radius:12px;overflow:hidden;background:rgba(10,10,9,.08);
  box-shadow:0 34px 70px -40px rgba(10,10,9,.6)}
.tix__pic img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
.tix__pic:hover img{transform:scale(1.03)}
/* ink buttons, for the yellow band */
.btn--ink{background:#0A0A09;color:var(--yellow);border-color:#0A0A09}
.btn--ink::after{background:#fff}
.btn--ink:hover span{color:#0A0A09}
.btn--inkline{border-color:#0A0A09;color:#0A0A09}
.btn--inkline::after{background:#0A0A09}
.btn--inkline:hover span{color:var(--yellow)}

/* ── hero film ───────────────────────────────────────────────── */
/* Muted, looping, behind the still — the photograph stays as the poster so
   there is never an empty hero while the file loads. */
.chero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;opacity:.9}
.chero__bg{z-index:0}
@media(prefers-reduced-motion:reduce){.chero__vid{display:none}}

/* a small locator, not a feature: pale linework on the page's own paper */
.vmap{aspect-ratio:3/2;max-width:300px;border:1px solid rgba(10,10,9,.1)}


/* The live page animates these three; the GIFs were 0.6–2.6 MB each, so they
   ship as muted loops instead. */
.perk__i video{width:100%;height:100%;object-fit:cover;display:block}

/* ── questions, with the venue card alongside ──────────────────
   The venue is a fact to look up, not a chapter of its own, so it sits
   beside the questions at the foot of the page. */
.faqlay{display:grid;gap:clamp(28px,3.4vw,56px);grid-template-columns:1fr}
@media(min-width:980px){.faqlay{grid-template-columns:1.35fr .65fr;align-items:start}}
.venue--foot{background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:12px;padding:clamp(20px,2.2vw,30px);margin-top:0}
@media(min-width:980px){.venue--foot{margin-top:clamp(54px,6vw,96px)}}
.venue--foot .vmap{max-width:none;aspect-ratio:16/10}

/* ── the edition's own programme cards ─────────────────────────
   Built like the city row on the homepage: the panel pins and the cards
   travel sideways as you scroll down. Phones get a plain swipeable row,
   because pinning and a horizontal scrub fight a touch screen. */
.xpsec{position:relative}
.xppin{height:100svh;overflow:hidden;position:relative;display:flex;
  flex-direction:column;justify-content:center;gap:clamp(18px,3vh,40px)}
.xp{display:flex;gap:clamp(12px,1.4vw,22px);will-change:transform;
  padding-inline:var(--gutter) calc(var(--gutter) + clamp(30px,5vw,90px))}
/* Fewer cards than the screen is wide: nothing to scrub, so the row simply
   sits in a normal section instead of pinning an empty screen. */
.xppin--static{height:auto;padding-block:clamp(70px,9vw,130px);display:block}
.xppin--static .xp{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  margin-top:clamp(24px,3vw,44px);padding-block:12px}
.xppin--static .xp::-webkit-scrollbar{display:none}
.xp__c{margin:0;padding:0;border:0;font:inherit;color:inherit;cursor:pointer;
  flex:none;width:clamp(300px,44vh,520px);aspect-ratio:1;
  border-radius:12px;overflow:hidden;background:#0A0A09;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.xp__c:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.xp__c img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.xp__c:hover img{transform:scale(1.05)}
@media(max-width:899px){
  .xppin{height:auto;padding-block:clamp(56px,13vw,96px);display:block}
  .xp{overflow-x:auto;scroll-snap-type:x proximity;padding-block:12px;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-top:clamp(24px,5vw,40px)}
  .xp::-webkit-scrollbar{display:none}
  .xp__c{scroll-snap-align:start;width:min(78vw,340px)}
}
@media(prefers-reduced-motion:reduce){.xp__c,.xp__c img{transition:none}}

/* ── a session, opened from its card ───────────────────────────
   The graphic already carries the headline, so the panel repeats it as real
   text: readable, selectable and there for anyone not seeing the image. */
.xpd{border:0;padding:0;max-width:min(880px,92vw);width:100%;border-radius:16px;
  overflow:hidden;background:#0F0F0E;color:#fff;grid-template-columns:1fr;
  max-height:88svh}
/* `display:grid` on a <dialog> overrides the browser's own display:none, so a
   closed dialog would otherwise sit in the page as an empty box. */
.xpd[open]{display:grid}
@media(min-width:720px){.xpd[open]{grid-template-columns:1fr 1fr}}
.xpd::backdrop{background:rgba(5,5,5,.72);backdrop-filter:blur(6px)}
.xpd__img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1;
  min-height:0}
.xpd__t{padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;
  justify-content:center;gap:.6rem;min-height:0;overflow-y:auto}
.xpd__w{margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow)}
.xpd__h{margin:0;font-size:clamp(1.3rem,1rem + 1.1vw,2rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.1}
.xpd__b{margin:0;font-size:15px;line-height:1.55;opacity:.74}
.xpd__host{margin:.4rem 0 0;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.5}
.xpd__host:empty{display:none}
.xpd__x{position:absolute;top:10px;right:12px;z-index:2;width:34px;height:34px;
  border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(10,10,9,.6);
  color:#fff;font-size:20px;line-height:1;cursor:pointer}
.xpd__x:hover{background:#FFF200;color:#000;border-color:#FFF200}

/* ── getting there, beside the map ─────────────────────────────── */
.venue__how{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:1fr;
  margin-top:1.4rem;align-items:start}
@media(min-width:620px){.venue__how{grid-template-columns:minmax(0,300px) 1fr}}
.trav{margin:0;display:grid;gap:.75rem;align-content:start}
.trav div{display:grid;gap:.2rem}
.trav dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.5}
.trav dd{margin:0;font-size:13.5px;line-height:1.5;opacity:.82}
/* In the narrow card beside the questions there is no room for two columns:
   the map sits above the directions instead. */
.venue--foot .venue__how{grid-template-columns:1fr}
.venue--foot .vmap{max-width:none}

/* ── Partner im Kopf ──────────────────────────────────────────────────
   In derselben Zeile wie die Knöpfe, durch einen Strich getrennt. Bricht
   der Kopf um, rutscht die Gruppe als Ganzes auf die nächste Zeile. */
.cpart{display:flex;align-items:center;gap:clamp(12px,1.5vw,20px);
  margin-left:clamp(4px,1vw,14px);padding-left:clamp(12px,1.5vw,20px);
  border-left:1px solid rgba(255,255,255,.2)}
.cpart__k{font-weight:300;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  opacity:.45;flex:0 0 auto}
.cpart__l{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(13px,1.6vw,22px)}
.cpart img{height:clamp(21px,2vw,30px);width:auto;max-width:170px;object-fit:contain;
  opacity:.82;transition:opacity .3s}
.cpart img:hover{opacity:1}
@media(max-width:620px){
  .cpart{margin-left:0;padding-left:0;border-left:0;width:100%}
}

/* ── der grobe Ablauf, unter den Programmkarten ───────────────────────
   Zeit links, Programmpunkt rechts, Haarlinie dazwischen — eine Liste,
   kein Raster aus Kästen: sie soll sich wie ein Aushang lesen und nicht
   mit den Karten darüber konkurrieren. Die beiden Side Events am Morgen
   stehen gedämpft, weil sie nicht im Ticket stecken. */
.agsec{padding-top:0}
.ag{list-style:none;margin:clamp(26px,3.4vw,46px) 0 0;padding:0;
  border-top:1px solid rgba(255,255,255,.14)}
.ag__r{display:grid;grid-template-columns:clamp(62px,6.5vw,98px) 1fr;
  gap:clamp(10px,2vw,28px);align-items:baseline;
  padding:clamp(13px,1.5vw,19px) 0;border-bottom:1px solid rgba(255,255,255,.14)}
.ag__t{font-weight:600;font-size:clamp(13px,.35vw + 12px,15px);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--yellow)}
.ag__b{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem}
.ag__h{font-weight:600;font-size:clamp(15px,.4vw + 14px,18px);letter-spacing:-.015em}
.ag__n{font-weight:300;font-size:13px;line-height:1.5;opacity:.56}
.ag__r--side .ag__t{color:rgba(255,255,255,.42)}
.ag__r--side .ag__h{font-weight:500;opacity:.82}
/* Pausen, Tueren, Wege und der Abschluss tragen den Tag, sind aber nicht
   der Grund zu kommen. Sie stehen deshalb grau hinter den Sessions. */
.ag__r--min .ag__t{color:rgba(255,255,255,.34)}
.ag__r--min .ag__h{font-weight:400;opacity:.52}
.ag__r--min .ag__n{opacity:.38}
.ag__note{margin:clamp(16px,2vw,24px) 0 0;font-weight:300;font-size:12px;
  line-height:1.6;opacity:.45;max-width:58ch}

/* ── Sprecherkarten laufen als eine Reihe ────────────────────────
   Die Reihe steht bewusst ausserhalb von .wrap: sie soll an beiden
   Rändern aus dem Bild laufen, nicht im Textmass enden. Die Maske
   macht aus dem harten Schnitt am Rand ein Ausblenden, damit die
   Bewegung nicht an einer Kante abreisst. */
.spkcar{margin-top:clamp(34px,4vw,58px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.spkcar .spk__row{gap:clamp(10px,1.2vw,18px);padding-inline:clamp(10px,1.2vw,18px)}
.spkcar .spcard{flex:none;width:clamp(196px,20vw,276px)}
.spkcar + .wrap .dim{margin-top:clamp(18px,2vw,26px)}

/* ── Anzeigen-Landingpages ───────────────────────────────────────
   Keine Navigation, keine Tour, kein Weg nach nebenan. Was bleibt,
   ist eine Leiste, die bei jedem Scrollstand dieselbe Frage stellt.
   Das DDX-Zeichen darin ist absichtlich kein Link. */
.confbar{position:fixed;inset:0 0 auto;z-index:90;display:flex;align-items:center;
  gap:clamp(10px,1.6vw,22px);
  padding:10px max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));
  background:rgba(5,5,5,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.1)}
.confbar__mark{width:58px;height:auto;flex:none}
.confbar__t{display:flex;flex-direction:column;line-height:1.15;min-width:0;
  font-size:13px;letter-spacing:-.01em;color:#fff}
.confbar__t b{font-weight:700}
.confbar__d{font-size:11px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.confbar__cta{margin-left:auto;flex:none;white-space:nowrap}
/* Die Leiste liegt ueber dem Hero, also muss der Hero darunter anfangen. */
.is-conf .chero{padding-top:62px}
@media(max-width:620px){
  .confbar__mark{width:46px}
  .confbar__d{display:none}
  .confbar__cta{padding-inline:14px;font-size:13px}
}
.foot--conf{background:#050505;border-top:1px solid rgba(255,255,255,.1);padding:22px 0}
.confoot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:12px;opacity:.5;color:#fff}
.confoot a{color:inherit;box-shadow:inset 0 -1px 0 currentColor}
.confoot a:hover{opacity:1}
/* Logo der Partner-Session direkt in der Zeile: bei "Hosted by" steht
   sonst nur ein Name, wo eine Marke hingehoert. */
.ag__lg{height:clamp(14px,1.4vw,19px);width:auto;max-width:110px;object-fit:contain;
  align-self:center;opacity:.9}

/* ── Telefon, 1.11.2026 ───────────────────────────────────────────
   Die Partnerlogos im Hero brachen bei vier Marken auf zwei Reihen um
   und sahen dort aus wie zwei Gruppen. Eine Reihe, dafuer kleiner. */
@media(max-width:599px){
  /* Der Hero-Titel darf groesser: 2.1rem Untergrenze liess ihn neben
     dem Stadtbild zu klein wirken. */
  .chero__claim{font-size:clamp(2.9rem,1.8rem + 5vw,4rem)}
  .cpart{align-items:flex-start;gap:8px;flex-direction:column}
  .cpart__l{flex-wrap:nowrap;gap:14px;width:100%}
  .cpart img{height:18px;max-width:none;flex:0 1 auto;min-width:0}
}