/* BIM.Infra Kongress 2027, Variante v22 "Trasse" (Logo-Leiste als Zug). Weiss, Cardgrau, Navy. Orange nur fuer CTAs und den Positionspunkt auf der Linie. Linie nur auf der Startseite. */
:root{--white:#fff;--card:#eef1f3;--navy:#1c3d5a;--navy-2:#16324b;--text:#1a2027;--meta:#5b6670;--orange:#e8871e;--orange-2:#f39a3a;--rule:rgba(28,61,90,.16);--rule-2:rgba(28,61,90,.3);--wrap:1200px;--pad:clamp(20px,4vw,48px);--rail:64px;--gap:40px;--bead:200px;--cap:clamp(300px,32.5vw,470px);--hb:170px;--sign:300px;--pic:150px;--pgap:44px;--num:clamp(64px,7.5vw,104px);--day:clamp(72px,8vw,112px);--r:22px;--ease:cubic-bezier(.2,.7,.2,1);--line-bg:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.no-motion{scroll-behavior:auto}
body{background:var(--white);color:var(--text);font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;line-height:1.6;overflow-x:hidden;min-height:100vh}
img,picture,video,sv-image{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul{list-style:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:8px;top:-70px;background:var(--navy);color:#fff;padding:10px 14px;font-weight:700;z-index:300;border-radius:8px}
.skip:focus{top:8px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.kicker{display:block;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--meta)}
h1,h2,h3,h4{font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.08}
.h2{font-size:clamp(1.9rem,3.4vw,2.9rem);text-wrap:balance}
.lead{color:var(--meta);font-size:1.05rem;max-width:58ch;line-height:1.65}
.muted{color:var(--meta)}
.after-cta{margin-top:28px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:700;font-size:.92rem;border:2px solid var(--navy);background:transparent;color:var(--navy);transition:background .2s,border-color .2s,color .2s;cursor:pointer;line-height:1;white-space:nowrap}
.btn:hover{background:var(--navy);color:#fff}
.btn-primary{background:var(--orange);border-color:var(--orange);color:#fff}
/* Hover: Fuellung bleibt Orange, aussen legt sich ein weisser Zwischenring (3 px) und darum ein oranger Ring (2 px), wie der Button im Menue.
   Auf Weiss verschwindet der weisse Ring im Grund, auf Cardgrau und Navy bleibt er sichtbar. Dazu 1 px Lift. */
.btn-primary{box-shadow:0 0 0 0 #fff,0 0 0 0 var(--orange);transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--orange);transform:translateY(-1px);outline:none}
@media(prefers-reduced-motion:reduce){.btn-primary{transition:none}.btn-primary:hover,.btn-primary:focus-visible{transform:none}}
.btn-sm{padding:11px 18px;font-size:.86rem}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.pill{display:inline-block;padding:9px 14px;border-radius:999px;background:var(--card);color:var(--navy);font-weight:700;font-size:.86rem}

/* Header */
.hd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.hd-in{display:flex;align-items:center;gap:32px;height:88px}
.brand{display:flex;align-items:center;gap:4px;font-weight:700;letter-spacing:-.01em;font-size:1rem;color:var(--navy);white-space:nowrap}
.brand img{width:40px;height:40px;border-radius:9px}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{white-space:nowrap;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--navy);padding:8px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.nav a:hover,.nav a[aria-current]{border-color:var(--navy)}
.hd-actions{display:flex;gap:12px;align-items:center}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--navy);background:transparent;color:var(--navy);place-items:center;cursor:pointer}
.menu-btn svg{width:22px;height:22px}
@media(max-width:1180px){.nav{gap:20px}.nav a{font-size:.78rem;letter-spacing:.1em}}
@media(max-width:1000px){.nav{display:none}.menu-btn{display:grid}.hd-actions{margin-left:auto}.hd-actions .btn{padding:10px 14px;font-size:.86rem}}
.overlay{position:fixed;inset:0;background:#fff;z-index:150;display:flex;flex-direction:column;padding:0 var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));gap:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;overflow-y:auto}
html.no-motion .overlay{transition:none}
.overlay.open{opacity:1;visibility:visible}
/* Kopfzeile des Menues: Logo und Schliessen stehen genau dort, wo im Header Logo und Burger sitzen, damit beim Oeffnen nichts springt. */
.ov-top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:88px;flex:0 0 auto}
.ov-nav{display:flex;flex-direction:column;position:relative;padding-left:44px;flex:0 1 auto;margin:auto 0}
.ov-nav::before{content:"";position:absolute;left:12px;top:14px;bottom:14px;width:3px;background:var(--navy);border-radius:2px}
.overlay .big{font-size:clamp(1.7rem,7vw,2.8rem);font-weight:700;letter-spacing:-.02em;color:var(--navy);display:flex;align-items:center;gap:16px;padding:8px 0;line-height:1.1;position:relative}
.overlay .big::before{content:"";position:absolute;left:-40px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.overlay .big small{font-size:.9rem;font-weight:200;color:var(--meta);letter-spacing:.06em}
.overlay .foot{display:flex;flex-direction:column;gap:10px;margin-top:28px;flex:0 0 auto}
.overlay .foot .btn{width:100%;justify-content:center;padding:15px 20px}
.overlay .close{display:grid;flex:0 0 auto}

/* Die Trasse: ein SVG ueber die ganze Seite (Hauptlinie plus Straenge) */
main{position:relative}
.trasse{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;shape-rendering:geometricPrecision}
.trasse .track{fill:none;stroke:url(#trasse-track);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trasse .drawn{fill:none;stroke:url(#trasse-grad);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.trasse .dot{fill:var(--orange);stroke:#fff;stroke-width:3}
.trasse .dot.hide{display:none}
.trasse .s-track{fill:none;stroke:var(--navy);stroke-opacity:.16;stroke-width:2}
/* Strasse: 14 px Navy, 2 px Mittellinie. Schiene: Band 10 px Navy mit 4 px weissem Kern (zwei Schienen zu 3 px), Schwellen 2 x 18 px
   in voller Deckung, Raster 12 px. Alle Straenge liegen auf ganzen Pixeln (trasse.js), die Hauptlinie mit 3 px auf x.5. */
.trasse .sa{fill:none;stroke:var(--navy);stroke-width:14;stroke-linejoin:round}
.trasse .sb{fill:none;stroke:var(--line-bg);stroke-width:2;stroke-dasharray:14 12;stroke-linecap:butt}
.trasse .ra{fill:none;stroke:var(--navy);stroke-width:10;stroke-linejoin:round}
.trasse .rb{fill:none;stroke:var(--line-bg);stroke-width:4;stroke-linejoin:round}
.trasse .rc{fill:none;stroke:var(--navy);stroke-width:18;stroke-dasharray:2 10;stroke-linecap:butt}
.trasse .la{fill:none;stroke:var(--navy);stroke-width:2}
.trasse .lb{fill:none;stroke:var(--navy);stroke-width:9;stroke-dasharray:0 34;stroke-linecap:round}
.trasse .lc{fill:none;stroke:var(--line-bg);stroke-width:4;stroke-dasharray:0 34;stroke-linecap:round}
.trasse .pa{fill:none;stroke:var(--navy);stroke-width:3}
.station{position:relative;padding:clamp(72px,9vw,120px) 0}
.station>.wrap{position:relative;z-index:2}
.row{display:grid;grid-template-columns:var(--rail) 1fr;column-gap:var(--gap);align-items:start}
.row.right,.right .row{grid-template-columns:1fr var(--rail)}
.row.right .rail,.right .row .rail{order:2}
.rail{display:flex;justify-content:center;align-items:flex-start;min-width:0}
.rail>*{flex:0 0 auto}
.rail.bottom{align-self:stretch;align-items:flex-end}
.rail.both{align-self:stretch;flex-direction:column;justify-content:space-between;align-items:center}
.via{display:block;width:0;height:0}
.st{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--navy);display:block;transition:background .35s,transform .35s var(--ease)}
.st.on{background:var(--navy)}
.st.junction{width:38px;height:38px;border-width:4px}
.head-row .st{margin-top:calc(var(--num)*.45 - 13px)}
.head{max-width:760px;padding-bottom:clamp(36px,5vw,64px)}
.right .head{margin-left:auto;text-align:right}
.right .head .lead{margin-left:auto}
.num{display:block;font-weight:200;font-size:var(--num);line-height:.9;color:var(--navy);letter-spacing:-.03em;margin-bottom:14px}
.head .h2{margin-bottom:16px}
.head-cta{margin-top:18px}
.cta-row{margin-top:36px}
.cta-head{padding-bottom:0}

/* Hero: Text links, Kapsel rechts, die Linie startet unter der Headline und laeuft ins Bild */
.hero{position:relative;padding:clamp(36px,5vw,64px) 0 clamp(56px,7vw,96px)}
.hero>.wrap{position:relative;z-index:2}
.hero-body{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,5vw,72px);align-items:center}
.tag{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--meta);margin-bottom:26px}
.tag>span{white-space:nowrap}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--navy)}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.7rem);line-height:1;letter-spacing:-.035em;max-width:12ch}
.hero h1 .light{font-weight:200;display:block}
.hstart{position:relative;height:26px;margin:18px 0 18px}
.hstart .st{position:absolute;left:0;top:0}
.st.start{background:var(--navy);box-shadow:inset 0 0 0 4px #fff}
.st.start.on{background:var(--navy)}
.hero .lead{margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-cta .cal{font-weight:700;font-size:.88rem;color:var(--navy);border-bottom:2px solid var(--rule-2);padding:4px 0;margin-left:8px}
.hero-cta .cal:hover{border-color:var(--navy)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;border-top:1px solid var(--rule);max-width:560px}
.facts div{padding:18px 20px 18px 0;border-bottom:1px solid var(--rule)}
.facts div:nth-child(odd){border-right:1px solid var(--rule);padding-right:24px}
.facts div:nth-child(even){padding-left:24px}
.facts b{display:block;color:var(--navy);font-size:1.05rem;letter-spacing:-.01em}
.facts span{display:block;color:var(--meta);font-size:.86rem;line-height:1.45;margin-top:3px}
.cap-wrap{position:relative;display:flex;justify-content:flex-end;align-items:flex-start;align-self:start;margin-top:6px}
.capsule{width:var(--cap);height:calc(var(--cap)*1.24);border-radius:999px;overflow:hidden;position:relative;background:var(--card);isolation:isolate}
.cap-par{position:absolute;left:0;right:0;top:-12%;bottom:-12%;will-change:transform}
.capsule sv-image,.capsule picture,.capsule img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bead{position:absolute;width:var(--hb);height:var(--hb);border-radius:50%;overflow:hidden;background:var(--card);box-shadow:0 0 0 10px #fff;left:calc(100% - var(--cap) - 16px - var(--hb)/2);top:calc(var(--cap)*.74 + 78px - var(--hb)/2);z-index:3}
.hero-bead sv-image,.hero-bead picture,.hero-bead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap-cap{position:absolute;right:calc(var(--cap)*.08);bottom:-16px;transform:translateY(50%);z-index:3;background:#fff;border:2px solid var(--navy);border-radius:999px;padding:8px 16px;font-size:.78rem;color:var(--navy);display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.cap-cap b{font-weight:700}
.cap-cap span{color:var(--meta)}

/* Bereiche: Abzweig, drei Straenge nebeneinander, Einmuendung */
.strands-wrap{position:relative;margin-top:clamp(96px,8vw,120px)}
#bereiche .head{padding-bottom:8px}
.split-row,.merge-row{position:relative;display:flex;justify-content:center;align-items:flex-start;height:40px}
.merge-row{margin-top:clamp(56px,7vw,96px);height:40px}
.merge-media{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(20px,3vw,36px);margin-top:44px}
.mbox{grid-column:2;width:min(640px,calc(100vw - 2*var(--pad) - 40px));aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:var(--card);box-shadow:0 0 0 10px #fff;position:relative;isolation:isolate}
.mbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.16);transform-origin:8% 92%}
.mbox .mcap{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:999px;padding:7px 14px;font-size:.78rem;font-weight:700;color:var(--navy);display:flex;gap:8px;align-items:center;z-index:2}
.mbox .mcap i{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.merge-label{grid-column:3;display:flex;flex-direction:column;gap:8px;line-height:1.3;max-width:300px;position:relative}
.merge-label .via{display:none}
.merge-label b{color:var(--navy);font-weight:200;font-size:clamp(1.8rem,2.8vw,2.4rem);letter-spacing:-.03em;line-height:1}
.merge-label span{color:var(--meta);font-size:1rem}
.merge-label .satz{display:block}
.strand-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(64px,8vw,110px)}
.strand{display:flex;flex-direction:column;align-items:center}
.bead{width:var(--bead);height:var(--bead);border-radius:50%;overflow:hidden;position:relative;background:var(--card);box-shadow:0 0 0 10px #fff;flex:0 0 auto}
.bead sv-image,.bead picture,.bead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sign{margin-top:40px;width:100%;max-width:var(--sign);background:#fff;border:2px solid var(--navy);border-radius:18px;padding:22px 24px 24px;position:relative}
.sign h3{font-size:clamp(1.4rem,2.2vw,1.8rem);margin:6px 0 8px}
.sign p{color:var(--meta);font-size:.95rem;line-height:1.6}
/* Alle drei Kaesten gleich hoch: jeder fuellt die Resthoehe seiner Spalte */
.strand-cols>.strand>.sign{flex:1 0 auto}

/* Programm: drei Haltepunkte */
.stop-row{margin-top:clamp(20px,3vw,40px)}
.stop-row .st{margin-top:24px}
.stop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(20px,3vw,40px);max-width:980px;padding-bottom:clamp(20px,3vw,36px);border-bottom:1px solid var(--rule);align-items:start}
.simg{width:clamp(200px,20vw,260px);aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--card);position:relative;margin-top:4px}
.simg sv-image,.simg picture,.simg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stop-row:last-child .stop{border-bottom:0}
/* Die Tageszahl als Fallblatt wie an der Abfahrtstafel im Footer. Sie gehoert damit sichtbar zur
   Bahnhofswelt und wird nicht mehr mit den duennen Stationsnummern 01, 02 verwechselt. */
.day{position:relative;display:block;min-width:96px;height:clamp(56px,5vw,72px);background:#0f2537;color:#fff;border-radius:4px;font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow:hidden;perspective:300px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.day::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.35);z-index:3}
.day::before{content:"";position:absolute;left:0;right:0;top:calc(50% + 1px);height:1px;background:rgba(255,255,255,.06);z-index:3}
.stop h3{font-size:clamp(1.35rem,2.2vw,1.8rem);margin:8px 0 12px}
.stop h3+.ort{margin-top:-4px}
.stop .ort{margin:0 0 12px;font-size:.92rem;line-height:1.5}
.stop .ort svg{width:14px;height:14px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linejoin:round;vertical-align:-2px;margin-right:7px}
.stop .ort .ortlink{font-weight:600;color:var(--navy);border-bottom:1px solid var(--rule-2)}
.stop .ort .ortlink:hover{border-color:var(--navy)}

.stop ul li{position:relative;padding-left:22px;color:var(--meta);margin:6px 0;line-height:1.5}
.stop ul li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;border:2px solid var(--navy);background:#fff}
.stop .kicker{margin-top:6px}

/* Referenten: Ringlinie ueber zwei Reihen, an der Hauptlinie angebunden */
.people-row{margin-top:20px}
.ring-rail{position:relative;align-self:stretch}
.ring-rail .st{position:absolute;left:50%;margin-left:-13px}
.ring-rail .r1{top:calc(var(--pic)/2 - 13px)}
.ring-rail .r2{top:calc(50% + var(--pgap)/2 + var(--pic)/2 - 13px)}
.people{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:var(--pgap) 24px}
.people sv-speakers,.logos sv-collection,.logos sv-sponsors,.shots sv-gallery{display:contents}
.person{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.person .pic{width:var(--pic);height:var(--pic);border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 10px #fff,0 0 0 13px transparent;margin-bottom:16px;position:relative;z-index:1;transition:box-shadow .35s,transform .35s var(--ease),filter .35s}
.person .pic img{width:100%;height:100%;object-fit:cover;transition:filter .35s,opacity .35s}
.person .txt{display:flex;flex-direction:column;gap:3px;align-items:center}
.person b,.person .nbtn{color:var(--navy);font-size:1rem;line-height:1.3;font-weight:700}
.person .nbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--navy);cursor:pointer;text-align:inherit;transition:color .3s}
.person span{font-size:.86rem;color:var(--meta);line-height:1.35}
.person .org{font-weight:700;color:var(--text)}
.person:hover .nbtn,.person:hover b{text-decoration:underline}
.people .person{cursor:pointer}
/* Aktivierung durch den Punkt auf der Ringlinie: Portrait bekommt den Navy-Rahmen, Name wird kraeftig, Marker fuellt sich */
.people .person>.pic img{filter:saturate(.35);opacity:.72}
.people .person .nbtn{color:var(--meta);font-weight:400}
.people .person .mk{position:absolute;left:calc(50% + var(--pic)/2 + 16px);top:calc(var(--pic)/2 - 7px);width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--navy);z-index:1;transition:background .3s}
.people .person .pic.on{box-shadow:0 0 0 8px #fff,0 0 0 11px var(--navy);transform:scale(1.05)}
.people .person .pic.on img{filter:none;opacity:1}
.people .person:has(.pic.on) .nbtn{color:var(--navy);font-weight:700}
.people .person:has(.pic.on) .mk{background:var(--navy)}
.people .person:last-child .mk{display:none}
.empty-note{grid-column:1/-1;background:var(--card);border-radius:var(--r);padding:28px;color:var(--meta);position:relative;z-index:1}

/* Rueckblick */
.film{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--card);aspect-ratio:16/9;max-width:900px}
.film img{width:100%;height:100%;object-fit:cover}
.film::after,.clip::after{content:"";position:absolute;inset:0;background:rgba(28,61,90,0);transition:background .3s;pointer-events:none}
.film:hover::after,.film:focus-visible::after,.clip:hover::after,.clip:focus-visible::after{background:rgba(28,61,90,.28)}
.film .cap{position:absolute;left:20px;bottom:20px;background:#fff;border-radius:999px;padding:9px 18px;font-size:.86rem;color:var(--navy);display:flex;gap:10px;align-items:center;z-index:2;transition:transform .25s var(--ease),box-shadow .25s}
.film:hover .cap,.film:focus-visible .cap,.clip:hover .cap,.clip:focus-visible .cap{transform:translateY(-2px);box-shadow:0 0 0 2px var(--navy)}
.film .cap b{font-weight:700}
/* Play-Button: Outline-Kreis mittig auf dem Bild (72 px, Kurzfilme 56 px), innen halbtransparent dunkel, weisses Dreieck.
   Hover: Kreis fuellt sich weiss, Dreieck Navy, Bild dunkelt leicht ab (::after). Kein Orange. */
.playbtn{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:2px solid #fff;background:rgba(10,20,30,.35);color:#fff;display:grid;place-items:center;z-index:2;transition:background .25s,color .25s,transform .25s var(--ease)}
.playbtn svg{width:28px;height:28px;margin-left:4px}
.clip .playbtn{width:56px;height:56px;margin:-28px 0 0 -28px}
.clip .playbtn svg{width:22px;height:22px;margin-left:3px}
.film:hover .playbtn,.film:focus-visible .playbtn,.clip:hover .playbtn,.clip:focus-visible .playbtn{background:#fff;color:var(--navy)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;max-width:900px}
.shots figure{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);aspect-ratio:3/2;cursor:zoom-in}
.shots figure img{width:100%;height:100%;object-fit:cover}
.shots figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:.86rem;font-weight:700;color:#fff;background:linear-gradient(0deg,rgba(26,32,39,.7),rgba(26,32,39,0))}
.shots figcaption:empty{display:none}

/* Partner auf Cardgrau */
.station.card{background:var(--card)}
.card .bead,.card .person .pic{box-shadow:0 0 0 10px var(--card);background:var(--card)}
.card .st{background:var(--card)}
.card .st.on{background:var(--navy)}
.sub{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:36px 0 16px}
.sub h3{font-size:1.15rem}
.sub:first-child{margin-top:0}
/* Sponsoren 2027 als ruhige Reihe (Startseite 05 und Sponsorenseite 01): keine Kacheln, Logos nach Stufe gestaffelt (Gold 56, Silber 44, darunter 36 px), kleines Stufen-Label darunter, Plus-Kachel wie der Plus-Waggon im Zug */
.splus-grp{padding-right:200px}
.slogos{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:16px 36px}
.slogo{display:block;flex:0 0 auto}
.slogo img{height:36px;width:auto;max-width:200px;object-fit:contain;mix-blend-mode:multiply;transition:opacity .2s}
.slogo:hover img{opacity:.75}
[data-tier="0"] .slogo img{height:56px;max-width:300px}
[data-tier="1"] .slogo img{height:44px;max-width:240px}
.slbl{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--meta);line-height:1;text-align:center}
.splus-grp{display:flex;flex-direction:row;align-items:center;gap:24px;color:var(--navy);flex:0 0 auto;align-self:flex-start}
.splus{display:grid;place-items:center;width:112px;height:56px;border:2px dashed var(--navy);border-radius:12px;color:inherit;transition:border-color .2s,color .2s}
.splus svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.splus-grp:hover,.splus-grp:focus-visible{color:var(--orange)}
.splus-grp:hover .splus,.splus-grp:focus-visible .splus{border-style:solid;border-color:var(--orange)}
.splus-grp:hover .slbl{color:var(--orange)}

/* Ort */
.place{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.pimg{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--card)}
.pimg sv-image,.pimg picture,.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pbody .city{display:block;font-weight:200;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--navy);letter-spacing:-.03em;margin:6px 0 10px}
.pbody h3{font-size:1.35rem;margin-bottom:12px}
.pbody dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:20px 0 0;font-size:.95rem}
.pbody dt{color:var(--meta);font-weight:700;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.pbody dd{color:var(--text)}
.pfig{margin:0;min-width:0}
.credit{display:block;margin-top:8px;font-size:.78rem;color:var(--meta);letter-spacing:.02em}
.credit a{border-bottom:1px solid var(--rule-2)}
.credit a:hover{border-color:var(--navy);color:var(--navy)}
.pbody dd{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline}
.tlink{color:var(--navy);font-weight:700;font-size:.86rem;border-bottom:1px solid var(--rule-2);white-space:nowrap}
.tlink:hover{border-color:var(--navy)}

/* Endstation: Abschluss-CTA auf Navy */
.station.end{text-align:center}
.end-kicker{color:rgba(255,255,255,.7);margin-bottom:14px}
.end .h2,.end h2{color:#fff;max-width:16ch;margin-bottom:16px;font-size:clamp(2rem,4vw,3.4rem)}
.end p{color:rgba(255,255,255,.78);max-width:52ch;margin-bottom:30px;font-size:1.05rem}
.end .hero-cta{justify-content:center}
.end .pill{background:#fff}

/* Lightboxen */
dialog.lightbox,dialog.lb{border:0;padding:0;background:transparent;width:min(96vw,1280px);max-width:none;margin:auto}
dialog.lightbox::backdrop,dialog.lb::backdrop{background:rgba(28,61,90,.92);backdrop-filter:blur(6px)}
dialog.lightbox .lightbox-stage{width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
dialog.lightbox .lightbox-stage video,dialog.lightbox .lightbox-stage iframe{width:100%;height:100%;display:block;border:0}
dialog.lb img{width:100%;max-height:88vh;object-fit:contain;border-radius:var(--r)}
dialog.lightbox .lightbox-close,dialog.lb .x{position:fixed;top:18px;right:22px;width:46px;height:46px;border-radius:50%;border:2px solid #fff;background:var(--navy);color:#fff;font-size:26px;cursor:pointer;z-index:2;line-height:1}

/* Rechtsseiten */
.page-head{padding:clamp(48px,7vw,96px) 0 20px}
.page-head .wrap{display:block}
.page-head h1{font-size:clamp(1.9rem,4.5vw,3.6rem);letter-spacing:-.03em;overflow-wrap:anywhere;hyphens:auto}
.page-body{padding:16px 0 clamp(64px,8vw,110px)}
.page-body .wrap{display:block}
.prose{max-width:74ch;font-size:1rem;line-height:1.7}
.prose h2{font-size:1.25rem;margin:36px 0 10px}
.prose h3{font-size:1.05rem;margin:24px 0 8px}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 14px 22px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:4px 0}
.prose a{color:var(--navy);text-decoration:underline}

/* Bewegung */
html.no-motion *{transition:none!important;animation:none!important}
html.no-motion .cap-par{transform:none!important}

/* Tablet und Mobil: Linie an den linken Rand, alles einspaltig */
@media(max-width:1000px){
  :root{--bead:160px;--pic:110px;--cap:min(400px,72vw);--hb:150px}
  .stop{grid-template-columns:auto minmax(0,1fr)}
  .simg{grid-column:2;width:100%;max-width:420px;margin-top:8px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-body{padding-left:calc(var(--rail) + 12px)}
  .hstart .st{left:calc(-1*(var(--rail) + 12px) + var(--rail)/2 - 13px)}
  .hero h1{max-width:none}
  .facts{max-width:none}
  .cap-wrap{justify-content:flex-start;margin-top:0;padding-left:calc(var(--rail)/2 + 16px)}
  .hero-bead{--node:off;left:calc(var(--rail)/2 + 16px + var(--cap) - var(--hb)*.78);top:calc(var(--cap)*1.24 - var(--hb)*.85)}
  .cap-cap{right:auto;left:calc(var(--rail)/2 + 16px + var(--cap)*.1)}
  .people{display:flex;flex-direction:column;gap:34px;padding-top:4px}
  .ring-rail .r1{top:calc(var(--pic)/2 - 13px + 4px)}
  .ring-rail .r2{display:none}
  .person{flex-direction:row;text-align:left;align-items:center;gap:18px}
  .person .pic{margin:0;flex:0 0 auto;box-shadow:0 0 0 6px #fff}
  .people .person .pic.on{box-shadow:0 0 0 6px #fff,0 0 0 9px var(--navy)}
  .people .person .mk{left:calc(var(--pic)/2 - 7px);top:calc(50% + var(--pic)/2 + 10px)}
  .person .txt{align-items:flex-start}
  .merge-media{grid-template-columns:1fr;row-gap:22px;justify-items:start}
  .mbox,.merge-label{grid-column:1}
  .mbox{width:min(640px,100%)}
  .merge-label{max-width:none}
}
@media(max-width:760px){
  :root{--rail:40px;--gap:20px;--bead:112px;--pic:96px;--cap:min(300px,70vw);--hb:120px;--num:60px;--day:64px;--pad:20px}
  .station{padding:56px 0}
  .row,.row.right,.right .row{grid-template-columns:var(--rail) 1fr}
  .row.right .rail,.right .row .rail{order:0}
  .rail{justify-content:flex-start;padding-left:7px}
  .rail .via{margin-left:13px}
  .ring-rail .st{left:0;margin-left:7px}
  .right .head{margin-left:0;text-align:left}
  .right .head .lead{margin-left:0}
  .right .partner-body{margin-left:0}
  .rail.both{align-items:flex-start}
  .hero{padding:28px 0 48px}
  .hero-grid{gap:36px}
  .hero h1{font-size:2.3rem}
  .hstart{margin:14px 0}
  .cap-wrap{padding-left:calc(var(--rail)/2 + 16px)}
  .split-row,.merge-row{justify-content:flex-start;padding-left:calc(var(--bead)/2 - 19px)}
  .merge-row{height:40px;margin-top:40px}
  .merge-media{margin-top:96px;row-gap:40px}
  .mbox{box-shadow:0 0 0 8px #fff;border-radius:20px}
  .merge-label{padding-left:calc(var(--bead)/2 + 26px)}
  .merge-label .via{display:block;position:absolute;left:calc(var(--bead)/2);top:50%}
  .strand-cols{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .strand{display:grid;grid-template-columns:var(--bead) 1fr;column-gap:20px;align-items:start}
  .bead{box-shadow:0 0 0 8px #fff}
  .sign{margin-top:0;max-width:none;padding:16px 18px 18px}
  .stop{grid-template-columns:1fr;row-gap:4px;max-width:none}
  .day{display:none}
  .stop .kicker{margin-top:0}
  .stop-row .st{margin-top:6px}
  .simg{width:100%;max-width:420px;margin-top:8px}
  .film .cap{left:12px;bottom:12px;padding:7px 14px;font-size:.78rem}
  .playbtn{width:56px;height:56px;margin:-28px 0 0 -28px}
  .playbtn svg{width:22px;height:22px;margin-left:3px}
  .shots{grid-template-columns:1fr 1fr}
  .shots figure:first-child{grid-column:1/-1}
  [data-tier="0"] .slogo img{height:44px;max-width:220px}
  [data-tier="1"] .slogo img{height:38px}
  .slogo img{height:32px}
  .logos a{min-height:90px;padding:14px}
  .logos img{max-height:40px}
  .place{grid-template-columns:1fr}
}
@media(max-width:480px){
  .facts{grid-template-columns:1fr}
  .facts div:nth-child(odd){border-right:0;padding-right:0}
  .facts div:nth-child(even){padding-left:0}
  .hero-cta .cal{margin-left:0}
  .sign{padding:14px 14px 16px}
  .sign h3{font-size:1.3rem}
}

/* ============================================================
   Unterseiten (Programm, Referenten, Sponsoren, Mediathek)
   ============================================================ */
.phead{padding:clamp(40px,6vw,80px) 0 clamp(8px,2vw,24px)}
/* Seitenkoepfe der Unterseiten: Text links, rechts oben ein Foto (4:3, gerundet); unter 900 px steht das Foto unter dem Text im 16:9 */
.phead>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,460px);gap:clamp(28px,5vw,72px);align-items:center}
.phead-img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--card)}
.phead-img img,.phead-img picture{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.phead>.wrap{grid-template-columns:1fr;gap:28px}.phead-img{aspect-ratio:16/9}}
.phead .head{padding-bottom:0;max-width:860px}
.phead h1{font-size:clamp(2.3rem,5vw,4.2rem);letter-spacing:-.035em;line-height:1;margin:14px 0 22px;max-width:14ch}
.phead h1 .light{font-weight:200;display:block}
.phead .rail .st{margin-top:calc(1.1rem + 14px)}
.phead .lead{margin-bottom:26px}
.notice{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:2px solid var(--navy);border-radius:999px;font-size:.78rem;font-weight:700;color:var(--navy);letter-spacing:.06em;white-space:nowrap}
.notice i{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.hero-cta .notice{margin-left:4px}
.tabs,.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
/* Die Tagesschalter brauchen mehr Luft zum Programm darunter als ein reiner Filter */
.tabs{margin-bottom:clamp(34px,4.5vw,54px)}
/* Luft zwischen dem Hinweistext ueber dem Programm und der Tagesleiste */
.agenda .lnote{margin:0 0 clamp(26px,3.5vw,40px)}
.tab,.fbtn{padding:11px 18px;border-radius:999px;border:2px solid var(--navy);background:#fff;color:var(--navy);font-weight:700;font-size:.86rem;cursor:pointer;line-height:1;transition:background .2s,color .2s}
.tab small,.fbtn small{font-weight:400;color:inherit;opacity:.75;margin-left:6px;font-size:.8rem}
.tab:hover,.fbtn:hover{background:var(--card)}
.tab[aria-selected="true"],.fbtn[aria-pressed="true"]{background:var(--navy);color:#fff}
[hidden]{display:none!important}
.station .content{min-width:0}
.right .content{margin-left:auto;max-width:900px}
.right .content.wide{max-width:none}

/* Agenda 2027 */
.agenda{max-width:900px}
.agenda sv-agenda{display:block}
.day-head{display:flex;align-items:center;gap:18px;margin:0 0 18px;flex-wrap:wrap}
/* Tageskopf der Agenda im selben Fallblatt wie die Tage auf der Startseite und die Tafel im Footer */
.day-head .big{position:relative;display:block;min-width:72px;height:48px;background:#0f2537;color:#fff;border-radius:4px;font-weight:700;font-size:1.35rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow:hidden;perspective:240px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
@media(max-width:760px){.day-head .big{display:none}}
.day-head .big::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.35);z-index:3}
.day-head .big::before{content:"";position:absolute;left:0;right:0;top:calc(50% + 1px);height:1px;background:rgba(255,255,255,.06);z-index:3}
.day-head h3{font-size:1.25rem}
.day-head .kicker{width:100%}
.slot{display:grid;grid-template-columns:96px 1fr;column-gap:24px;padding:18px 0;border-top:1px solid var(--rule);cursor:pointer;position:relative}
.slot:last-child{border-bottom:1px solid var(--rule)}
.slot time{font-weight:700;color:var(--navy);font-size:.95rem;display:flex;flex-direction:column;gap:2px;padding-top:2px}
.slot time small{font-weight:400;color:var(--meta);font-size:.86rem}
.slot .tbtn{background:none;border:0;padding:0;text-align:left;font:inherit;font-weight:700;color:var(--navy);font-size:1.05rem;line-height:1.45;cursor:pointer;letter-spacing:-.01em;max-width:56ch;display:block}
.slot:hover .tbtn{text-decoration:underline}
.slot .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:.86rem;color:var(--meta)}
.slot .stage{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--navy)}
.slot .stage::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--stage,var(--navy));flex:0 0 auto}
.slot .spks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:13px}
.slot .spk{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;font-weight:600;color:var(--text)}
.slot .spk img{width:40px;height:40px;flex:0 0 auto;border-radius:50%;object-fit:cover;background:var(--card)}
.slot[data-hi="true"]::before{content:"";position:absolute;left:-18px;top:18px;bottom:18px;width:3px;border-radius:2px;background:var(--orange)}
.lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 26px;margin:14px 0 30px}
.lane .wip{display:inline-block;white-space:nowrap;font-size:.78rem;font-weight:600;color:var(--meta);border:1px solid var(--meta);border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:middle}
.lane .lnote{font-size:.86rem;color:var(--meta);margin:0 0 10px}
@media (max-width:1100px){.lanes{grid-template-columns:repeat(2,1fr)}}
/* Die vier Spalten sind parallele Raeume, keine Programmpunkte. Sie hatten
   frueher einen eigenen Rahmen, und weil die Punkte darin seit dem
   Farbleitsystem selbst Kaesten sind, las sich das als Kasten im Kasten, also
   als Programmpunkt im Programmpunkt. Der Rahmen ist deshalb weg: die Spalte
   ist eine Spalte mit Ueberschrift, darunter stehen ihre Punkte.
   Der Kopf traegt denselben offenen Ring wie ein Ort in der Tagesliste, damit
   klar ist, dass hier ein Raum steht und keine Kategorie. */
.lane{min-width:0}
.lane .lh{display:block;font-size:.95rem;margin:0 0 12px;
  padding-bottom:10px;border-bottom:2px solid var(--rule-2)}
.lane .lh::before{content:"";display:inline-block;vertical-align:middle;margin:-2px 10px 0 0;
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--stage,var(--navy));background:transparent}
.lane .slot{grid-template-columns:1fr;row-gap:4px;padding:12px 0}
.lane .slot[data-hi="true"]::before{left:-12px}
.lane .slot time{flex-direction:row;gap:6px;font-size:.86rem}
.lane .slot .tbtn{font-size:.95rem}
.lane .slot .stage{display:none}
.lane .spk img{width:34px;height:34px}
.sub-h{margin:26px 0 8px;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);font-weight:700}
.agenda-note{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:30px;padding-top:22px;border-top:1px solid var(--rule);color:var(--meta);font-size:.92rem}

/* Popup (Session, Referent) */
dialog.sheet{border:0;padding:0;background:#fff;border-radius:var(--r);width:min(92vw,760px);max-width:none;margin:auto;max-height:90vh;overflow:auto;color:var(--text);text-align:left;cursor:default}
dialog.sheet::backdrop{background:rgba(28,61,90,.9);backdrop-filter:blur(6px)}
.sheet-img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block;background:var(--card)}
.sheet-in{padding:28px 32px 30px}
.sheet-in .kicker{margin-bottom:8px}
.sheet-in h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 14px}
.sheet-in p.muted{margin-bottom:12px;line-height:1.5}
.sheet .bio{line-height:1.65;color:var(--text)}
.sheet .bio p{margin-bottom:10px}
.sheet .who{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.sheet .who .spk{display:flex;align-items:center;gap:12px;font-size:.92rem}
.sheet .who .spk img{width:44px;height:44px;flex:0 0 auto;border-radius:50%;object-fit:cover;background:var(--card)}
.sheet .who .spk b{display:block;color:var(--navy)}
.sheet .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sheet form{margin-top:22px}

/* Referenten: Raster */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
.pgrid .person,.pgrid .person .txt{min-width:0;max-width:100%}
.pgrid .person .txt>*{max-width:100%;overflow-wrap:break-word;hyphens:auto}
.pgrid sv-speakers,.pgrid sv-collection{display:contents}
.pgrid .person{cursor:pointer}
.pgrid .person .nbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--navy);font-size:1rem;line-height:1.3;cursor:pointer;text-align:center}
.pgrid .person .cat{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--meta)}
.pgrid.small{grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 20px;--pic:104px}
.pgrid.small .person .nbtn{font-size:.95rem}
.pgrid.small .person .txt>span{font-size:.88rem}
.pgrid.small .person .thema{font-style:italic;margin-top:4px;color:var(--meta)}
/* Auftrittsliste im Profil des Rueckblicks */
.pauf{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.pauf li{display:flex;flex-direction:column;gap:2px;padding-left:15px;position:relative}
.pauf li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.pauf .pa-r{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--meta)}
.pauf .pa-t{font-size:.95rem;line-height:1.4;color:var(--text)}
.pauf .pa-s{font-size:.82rem;color:var(--meta)}
.pgrid .empty-note{grid-column:1/-1}
.count{color:var(--meta);font-size:.9rem;margin:-8px 0 22px}

/* Sponsorenwand 2027: nur Stufen mit Inhalt (data-sv-show="sponsors"), je Stufe eine Reihe plus hoechstens eine Plus-Kachel */
.tier{margin-top:36px;padding-top:24px;border-top:1px solid var(--rule)}
.tier:first-child{margin-top:0;padding-top:0;border-top:0}
.tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.tier-head h3{font-size:1.1rem}
.tier-head .free{font-size:.78rem;font-weight:700;color:var(--navy);letter-spacing:.06em}
.trow{display:flex;flex-wrap:wrap;align-items:center;gap:24px 44px}
.trow .splus-grp{gap:10px}
.tier[data-tier="1"] .splus,.tier[data-tier="2"] .splus,.tier[data-tier="3"] .splus{height:48px;width:104px}
.tiers .none{display:none;margin:0}
/* Startseite 05: dieselben Stufen wie auf der Sponsorenseite, auf Cardgrau (multiply braucht den Grund am Element), darunter Hinweis mit Button */
.card .tiers{background:var(--card)}
.partner-body{min-width:0;max-width:100%}
.partner-body .tiers,.partner-body .tier-head{max-width:100%}
.partner-note{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid var(--rule);color:var(--meta);font-size:.95rem}
.partner-note .btn{min-height:44px}
.tiers:not(:has(.tier)) .none{display:block}

/* Warum, Pakete, Sonderformate, Kontakt */
.statline{display:flex;flex-wrap:wrap;gap:10px 0;margin:0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--meta);font-size:.88rem;line-height:1.4}
.statline>span{display:inline-flex;align-items:baseline;gap:8px;padding:0 20px;border-left:1px solid var(--rule);white-space:nowrap}
.statline>span:first-child{padding-left:0;border-left:0}
.statline b{font-weight:200;font-size:1.7rem;line-height:1;color:var(--navy);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.args{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 48px;margin-top:40px;max-width:900px}
.args>div{padding-top:14px;border-top:2px solid var(--navy)}
.args h3{font-size:1.05rem;margin-bottom:6px}
.args p{color:var(--meta);font-size:.92rem;line-height:1.55}
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pack{background:#fff;border:2px solid var(--navy);border-radius:18px;padding:24px 22px;display:flex;flex-direction:column;min-width:0}
.pack .pn{font-weight:200;font-size:2.4rem;line-height:1;color:var(--navy);letter-spacing:-.03em;margin-bottom:8px}
.pack h3{font-size:1rem;margin-bottom:14px;min-height:2.6em}
.pack ul li{position:relative;padding-left:20px;margin:7px 0;font-size:.88rem;color:var(--meta);line-height:1.5}
.pack ul li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;border:2px solid var(--navy);background:#fff}
.pack .slots{margin-top:auto;padding-top:18px;font-size:.86rem;font-weight:700;color:var(--navy)}
.pack .slots:empty{display:none}
.pack .slots.full{color:var(--meta)}
.pack .slots+.note{margin-top:0;padding-top:6px}
.pack.hi .slots{color:#fff}
.pack.hi .slots.full{color:rgba(255,255,255,.7)}
.pack .note{margin-top:auto;padding-top:16px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.pack.hi{background:var(--navy);color:#fff}
.pack.hi .pn,.pack.hi h3,.pack.hi .note{color:#fff}
.pack.hi ul li{color:rgba(255,255,255,.82)}
.pack.hi ul li::before{border-color:#fff;background:var(--navy)}
.specials{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.special{background:#fff;border-radius:16px;padding:20px 20px 18px}
.card .special{background:#fff}
.special h4{font-size:1rem;margin-bottom:6px}
.special p{color:var(--meta);font-size:.88rem;line-height:1.5}
.contact{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:#fff;border:2px solid var(--navy);border-radius:18px;padding:24px 28px;margin-top:36px}
.contact>div{min-width:0;overflow-wrap:anywhere}
.contact .ini{width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;letter-spacing:.04em}
.contact b{display:block;color:var(--navy);font-size:1.1rem}
.contact span{display:block;color:var(--meta);font-size:.9rem}
.contact a.mail{color:var(--navy);font-weight:700;text-decoration:underline}

/* Mediathek */
.film.big{max-width:none}
.clips{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
/* Kurzfilme als Karten: Bild 16:9 mit Play-Button, darunter Titel · Dauer in einer Zeile und die Beschreibung einzeilig, per Klick aufklappbar (details/summary, kein JS) */
.clipcard{display:flex;flex-direction:column;gap:12px;min-width:0}
.ccap .cline{display:flex;align-items:baseline;gap:10px;margin:0;font-size:1rem;color:var(--navy)}
.ccap .cline b{font-weight:700}
.ccap .cdur{color:var(--meta);font-size:.86rem;white-space:nowrap}
.ccap .cdur::before{content:"· ";}
.cdesc summary{display:flex;align-items:flex-start;gap:8px;cursor:pointer;list-style:none;color:var(--meta);font-size:.9rem;line-height:1.5}
.cdesc summary::-webkit-details-marker{display:none}
.cdesc summary>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;min-width:0;flex:1}
.cdesc[open] summary>span{-webkit-line-clamp:unset;display:block}
.cdesc .chev{flex:0 0 auto;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cdesc[open] .chev{transform:rotate(180deg)}
.cdesc summary:hover{color:var(--navy)}
.clips sv-collection{display:contents}
.clip{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--card);aspect-ratio:16/9}
.clip img{width:100%;height:100%;object-fit:cover}
.clip .cap{display:none;transition:transform .25s var(--ease),box-shadow .25s}
.clip .cap b{font-weight:700}
.clip .cap b+span{margin-top:-2px}
.clip .cap span{color:var(--meta)}
.clip .cap .desc{color:var(--meta);font-size:.86rem;line-height:1.4;margin-top:2px}
.shots.gal{grid-template-columns:repeat(4,1fr);gap:14px;max-width:none;margin-top:0}
.shots.gal figure{aspect-ratio:3/2}

/* Endstation als Doppel-CTA */
.end .hero-cta .btn{white-space:normal;text-align:center}

@media(max-width:1000px){
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pgrid.small{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pgrid .person{flex-direction:column;text-align:center;align-items:center;gap:4px}
  .pgrid .person .txt{align-items:center}
  .pgrid .person .pic{margin-bottom:12px}
  .lanes{grid-template-columns:1fr}
  .packs{grid-template-columns:repeat(2,1fr)}
  .specials{grid-template-columns:repeat(2,1fr)}
  .shots.gal{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .phead h1{font-size:2.2rem}
  .phead .rail .st{margin-top:calc(1.1rem + 6px)}
  .slot{grid-template-columns:1fr;row-gap:4px}
  .slot time{flex-direction:row;gap:8px;align-items:baseline}
  .slot[data-hi="true"]::before{left:-14px}
  .pgrid,.pgrid.small{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  .pgrid .person .pic{box-shadow:0 0 0 6px #fff}
  .packs,.specials{grid-template-columns:1fr}
  .pack h3{min-height:0}
  .contact{grid-template-columns:auto 1fr;padding:18px}
  .contact .btn{grid-column:1/-1}
  .sub{flex-direction:column;align-items:flex-start;gap:4px}
  .clips{grid-template-columns:1fr}
  .shots.gal{grid-template-columns:repeat(2,1fr)}
  .shots.gal figure:first-child{grid-column:auto}
  .trow{gap:20px 28px}
  .trow .splus-grp{width:100%;flex-direction:row;justify-content:center;gap:14px}
  .args{grid-template-columns:1fr}
  .statline{flex-direction:column;gap:10px;padding:14px 0}
  .statline>span{padding:0;border-left:0}
  .sheet-in{padding:22px 20px 24px}
  .hero-cta .notice{margin-left:0}
}
@media(max-width:480px){.pgrid,.pgrid.small{grid-template-columns:repeat(2,minmax(0,1fr))}.contact{grid-template-columns:1fr}}

/* ============================================================
   v18: Social Proof nach dem Hero (Presse-Karten, Stimmen), Speaker-Panel, Footer als Bruecke mit Strasse
   ============================================================ */
:root{--sb:clamp(150px,12.5vw,184px)}
.h3{font-size:clamp(1.35rem,2.2vw,1.8rem);margin-bottom:10px}
.sub-row{margin-top:clamp(56px,7vw,88px)}
.sub-row .head{padding-bottom:clamp(20px,3vw,32px)}
.sub-row .st{margin-top:calc(.65em + 2px)}
.proof .head{max-width:820px}
.proof .head-row:first-child .st{margin-top:calc(.5em + 2px)}
/* Presse-Karten: Screenshot des Beitrags, leicht gedreht, Quelle und Datum darunter. Reihe, die umbricht, kein Slider. */
.press{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1000px}
.press sv-collection{display:contents}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:18px;box-shadow:0 2px 6px rgba(28,61,90,.06),0 14px 36px rgba(28,61,90,.12);overflow:hidden;min-width:0;transition:transform .3s var(--ease),box-shadow .3s;order:2}
.pcard:nth-of-type(-n+2){order:0}
.pcard.zahl{order:1}
.pcard:hover,.pcard:focus-visible{transform:translateY(-4px);box-shadow:0 4px 10px rgba(28,61,90,.08),0 22px 48px rgba(28,61,90,.18)}
.pframe{position:relative;display:block;aspect-ratio:16/10;background:var(--card);overflow:hidden;isolation:isolate}
.pframe img{position:absolute;left:7%;top:9%;width:100%;height:auto;border-radius:6px;box-shadow:0 6px 24px rgba(28,61,90,.28);transform:rotate(-2.5deg);transform-origin:0 0;transition:transform .4s var(--ease)}
.pcard:hover .pframe img{transform:rotate(-1deg) translateY(-6px)}
.pframe:has(img[src]:not([hidden])) .pbig{display:none}
.pbig{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;font-weight:700;color:var(--navy);font-size:1.15rem;line-height:1.25;letter-spacing:-.01em}
.pmeta{display:flex;flex-direction:column;gap:2px;padding:14px 18px 16px;border-top:1px solid var(--rule)}
.pmeta b{color:var(--text);font-size:.86rem;line-height:1.35;overflow-wrap:break-word;hyphens:auto}
.pmeta span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--meta)}
.pcard.zahl{background:var(--navy);color:#fff;justify-content:flex-end;padding:24px 24px 22px;gap:10px;box-shadow:0 14px 36px rgba(28,61,90,.22)}
.pcard.zahl b{font-weight:200;font-size:clamp(3rem,5vw,4.4rem);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff}
.pcard.zahl>span{color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.45}
.pcard.zahl:hover{transform:none;box-shadow:0 14px 36px rgba(28,61,90,.22)}
/* Stimmen: fuenf runde Standbilder in einer Reihe, Play-Hinweis klein unten rechts, Hover Ring in Navy. Keine Linie hindurch. */
.voices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 16px;max-width:1000px}
.voices sv-collection{display:contents}
.voice{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.vbead{position:relative;display:block;width:var(--sb);height:var(--sb);border-radius:50%;background:#fff;box-shadow:0 0 0 3px transparent;transition:box-shadow .3s,transform .3s var(--ease);cursor:pointer;flex:0 0 auto}
.vbead img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:50%;display:block;transition:filter .35s,opacity .35s}
.vbead .play{position:absolute;right:calc(var(--sb)*.02);bottom:calc(var(--sb)*.02);width:34px;height:34px;border-radius:50%;background:rgba(10,20,30,.35);border:2px solid #fff;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(28,61,90,.25);transition:transform .25s var(--ease),background .25s,color .25s}
.vbead .play svg{width:15px;height:15px;margin-left:2px}
.vbead:hover,.vbead:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--navy);outline:none}
.vbead:hover .play,.vbead:focus-visible .play{background:#fff;color:var(--navy)}
/* Stichstrecke: die Kreise sind erst blass und werden aktiv, wenn der Punkt des Zweigs sie passiert */
.branch-rail{position:relative}
.branch-rail .st{margin-top:calc(var(--sb)/2 - 13px)}
.voices-row.branched .vbead img{filter:saturate(.35);opacity:.72}
.voices-row.branched .vbead.on img,.voices-row.branched .vbead:hover img{filter:none;opacity:1}
.voices-row.branched .vbead.on{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--navy)}
.trasse .btrack{fill:none;stroke:var(--navy);stroke-opacity:.16;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trasse .bdrawn{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vbead:hover .play,.vbead:focus-visible .play{transform:scale(1.1)}
.vtag{position:relative;z-index:2;margin-top:-12px;background:#fff;border:2px solid var(--navy);border-radius:999px;padding:4px 12px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--navy);line-height:1.2}
.vtag:empty{display:none}
.vtxt{display:flex;flex-direction:column;gap:3px;margin-top:14px;align-items:center;max-width:100%}
.vtag+.vtxt{margin-top:10px}
.vtxt b{color:var(--navy);font-size:.98rem;line-height:1.3}
.vtxt span{font-size:.86rem;color:var(--meta);line-height:1.35;overflow-wrap:anywhere}
.vtxt .org{font-weight:700;color:var(--text)}
.voice:hover .vtxt b{text-decoration:underline}

/* Speaker-Panel: faehrt von rechts herein, weiss, Navy-Gleis am linken Rand, Portrait als Perle auf einem kurzen Abzweig mit Stationsmarker */
dialog.panel{border:0;padding:0;margin:0;position:fixed;top:0;right:0;bottom:0;left:auto;height:100dvh;max-height:none;width:min(520px,100vw);max-width:none;background:#fff;color:var(--text);text-align:left;cursor:default;overflow:auto;box-shadow:-24px 0 60px rgba(28,61,90,.25)}
dialog.panel::backdrop{background:rgba(28,61,90,.55);backdrop-filter:blur(3px)}
dialog.panel[open]{animation:panel-in .3s var(--ease)}
dialog.panel[open]::backdrop{animation:panel-fade .3s}
@keyframes panel-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes panel-fade{from{opacity:0}to{opacity:1}}
.panel-in{position:relative;min-height:100%;padding:52px 40px 44px 76px}
/* Sponsorenprofil als Haltestelle an der Trasse, wie das Referentenprofil: die Linie des Panels laeuft
   waagerecht in das Logo, rechts daneben der Haltepunkt. Der Ring traegt die Farbe der Stufe (--tier,
   gesetzt aus dem Feld color in pages.js), damit Gold, Silber und Bronze auch im Profil unterscheidbar sind. */
.sp-item{display:block;flex:0 0 auto}
.sp-item .slogo{background:none;border:0;padding:0;font:inherit;cursor:pointer;display:block}
/* Das Logo sitzt auf einem liegenden Haltestellenschild, weil Firmenlogos fast immer breiter als hoch sind.
   Die Trasse laeuft von links hinein und endet am Haltepunkt rechts daneben. Rahmen in der Stufenfarbe. */
.sp-top{position:relative;display:flex;align-items:center;gap:24px;margin:10px 0 30px}
.sp-top::before{content:"";position:absolute;left:-44px;width:56px;top:50%;margin-top:-1.5px;height:3px;background:var(--navy);z-index:0}
.sp-dot::before{content:"";position:absolute;right:100%;width:24px;top:50%;margin-top:-1.5px;height:3px;background:var(--navy)}
.sp-mark{position:relative;z-index:1;flex:0 1 300px;min-width:0;height:116px;background:#fff;border:3px solid var(--tier,var(--navy));border-radius:10px;box-shadow:0 0 0 8px #fff}
.sp-dot{position:relative;z-index:1;flex:0 0 auto;margin-right:auto;width:22px;height:22px;border-radius:50%;background:var(--tier,var(--navy));border:3px solid var(--tier,var(--navy));box-shadow:inset 0 0 0 3px #fff}
.sp-mark img{position:absolute;left:24px;top:14px;width:calc(100% - 48px);height:calc(100% - 28px);object-fit:contain;object-position:center;mix-blend-mode:multiply}
.sp-panel .sp-cat{display:block;color:var(--meta);margin:0 0 6px}
.sp-panel h3{font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.02em;margin:0 0 12px}
.sp-panel .sp-desc{color:var(--meta);line-height:1.6;max-width:46ch;margin:0 0 22px}
.sp-panel .sp-banner{display:block;margin:0 0 24px;border-radius:14px;overflow:hidden;background:var(--card);aspect-ratio:16/9;max-width:520px}
.sp-panel .sp-banner img{width:100%;height:100%;object-fit:cover;display:block}
.sp-docs{margin:0 0 24px;max-width:520px}
.sp-docs-h{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--navy);margin:0 0 10px}
.sp-doc{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--rule);border-radius:12px;color:var(--navy);font-weight:700;font-size:.86rem;margin:0 0 8px;transition:border-color .2s,background .2s}
.sp-doc:hover{border-color:var(--navy);background:var(--card)}
.sp-doc svg{width:18px;height:18px;flex:0 0 auto}
.sp-panel .sp-cta{margin:0}
@media(max-width:760px){
  .sp-top{gap:16px;margin-bottom:24px}
  .sp-mark{height:96px;box-shadow:0 0 0 6px #fff}
  .sp-dot::before{width:16px}
  .sp-mark img{left:18px;top:12px;width:calc(100% - 36px);height:calc(100% - 24px)}
}
.panel-in::before{content:"";position:absolute;left:32px;top:0;bottom:0;width:3px;background:var(--navy)}
.pclose{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:2px solid var(--navy);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;z-index:2;transition:background .2s,color .2s}
.pclose svg{width:20px;height:20px}
.pclose:hover{background:var(--navy);color:#fff}
.ptop{position:relative;height:150px;margin:6px 0 26px}
.ptop::before{content:"";position:absolute;left:-44px;top:74px;width:230px;height:3px;background:var(--navy)}
.ppic{position:absolute;left:0;top:0;width:150px;height:150px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 8px #fff,0 0 0 11px var(--navy);z-index:1}
.ppic img{width:100%;height:100%;object-fit:cover;display:block}
.pmk{position:absolute;left:176px;top:63px;width:22px;height:22px;border-radius:50%;background:var(--navy);border:3px solid var(--navy);box-shadow:inset 0 0 0 3px #fff;z-index:1}
.panel-in .kicker{margin-bottom:8px}
.panel-in h2{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.08;margin-bottom:12px;letter-spacing:-.03em}
.prole{display:flex;flex-direction:column;gap:2px;color:var(--meta);line-height:1.45;margin-bottom:26px}
.prole b{color:var(--text)}
.pbeitrag{position:relative;padding:20px 0 4px;border-top:1px solid var(--rule)}
.pbeitrag::before{content:"";position:absolute;left:-52px;top:20px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.pbeitrag .bio{line-height:1.65;color:var(--text)}
.pbeitrag .bio p{margin-bottom:10px}
.panel-in .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* Endstation als eigene Karte (nur noch Referenten: Call for Papers, und Sponsoren: Anfrage): abgerundete Navy-Box (32 px) in der
   Inhaltsspalte auf weissem Grund, darunter 64 px Weiss bis zum Footer. Auf Startseite, Programm und Mediathek ist die CTA in der Abfahrtstafel. */
.station.end{background:transparent;color:var(--text);padding:clamp(48px,6vw,72px) 0 64px;text-align:center}
.ctabox{position:relative;z-index:2;background:var(--navy);color:#fff;border-radius:32px;padding:clamp(56px,7vw,80px) var(--pad) clamp(56px,7vw,76px);display:flex;flex-direction:column;align-items:center;width:100%}
.end .wrap{display:block}
.end p{margin-bottom:28px}

/* Footer als Abfahrtstafel (v25): CTA-Box und Footer sind EINE Navy-Tafel im Wrap. Auf der Startseite links die Schienenspalte (--rail),
   in der die Trasse senkrecht herunterkommt; rechts die Tafel: Kopfzeile (Kicker links, Uhr als Text rechts), Ueberschrift mit Buttons,
   darunter die Fallblatt-Zeilen (Zeit | Ziel | Gleis | Hinweis) als dunkle Kaestchen mit Klappkante in der Mitte. Die Trasse knickt
   48 px ueber dem Gleis (.via-in) und faehrt 24 px unter der Tafel bis zum Prellbock rechts (.prell). Unterseiten: ohne Schienenspalte,
   ohne Knoten. Die Rechtszeile steht als ruhige Zeile unter der Tafel. */
.ft{--fbg:var(--navy);--ft:#fff;--fm:#b6c4d1;--cell:#0f2537;--edge:rgba(255,255,255,.16);--track:24px;background:var(--fbg);color:var(--ft);position:relative;padding:clamp(56px,7vw,96px) 0 22px}
.tafel{position:relative;display:grid;grid-template-columns:var(--rail) 1fr;column-gap:var(--gap);padding-bottom:calc(var(--track) + 44px)}
.trail,.tafel-in{min-width:0}
/* Kopfzeile wie bei einer Bahnhofstafel: Kicker links, Uhr rechts, darunter Ueberschrift und Buttons */
.th{padding-bottom:30px;border-bottom:1px solid var(--edge);margin-bottom:24px}
.th-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 32px;flex-wrap:wrap;margin-bottom:26px}
.th-k{color:var(--fm);padding-top:6px}
.th-clock{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px}
.th-time{display:inline-block;font-variant-numeric:tabular-nums;font-weight:700;font-size:1rem;letter-spacing:.06em;color:#fff;border:1px solid var(--edge);border-radius:6px;padding:6px 12px;line-height:1.3}
.th-place{color:#d5dde5;font-size:.98rem;line-height:1.5}
.th-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end}
.th-h{color:#fff;font-size:clamp(2rem,4vw,3.4rem);max-width:16ch;margin-bottom:12px}
.th-p{color:rgba(255,255,255,.78);font-size:1.05rem;max-width:52ch}
.th-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-bottom:6px}
.ft .btn-ghost{border-color:#fff;color:#fff}
.ft .btn-ghost:hover{background:#fff;color:var(--navy)}
.ft .pill{background:#fff;color:var(--navy)}
/* Tafelzeilen: vier Spalten, jede Zelle ein Kaestchen. Ziffern tabellarisch (Montserrat bleibt), Ziel in Versalien. */
.bhead,.brow{display:grid;grid-template-columns:148px minmax(0,1fr) 144px minmax(0,1.1fr);gap:4px}
.bhead{padding:0 12px 10px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--fm)}
.bhead>span{display:block;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;font-variant-numeric:normal}
.bhead .bc-gleis{text-align:center}
.brows{display:flex;flex-direction:column;gap:4px;perspective:1400px}
.brow{transform-origin:50% 0;backface-visibility:hidden}
.brow.grp{margin-top:18px}
.bc{position:relative;display:flex;align-items:center;min-height:48px;padding:8px 12px;background:var(--cell);border-radius:4px;color:#fff;font-size:.9rem;line-height:1.3;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;font-variant-numeric:tabular-nums}
/* Klappkante: schmale dunkle Linie in der Zellenmitte mit hellem Saum darunter */
.bc::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.3);pointer-events:none}
.bc::before{content:"";position:absolute;left:0;right:0;top:calc(50% + 1px);height:1px;background:rgba(255,255,255,.06);pointer-events:none}
.bc-zeit{color:var(--fm);font-size:.86rem;gap:10px;white-space:nowrap}
.bc-zeit .bt{color:#fff;font-weight:700}
.bc-zeit.bg{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:#d5dde5}
.bc-ziel{text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.98rem;padding:0;overflow-wrap:anywhere}
.bc-ziel a{display:flex;align-items:center;flex-wrap:wrap;min-width:0;width:100%;min-height:48px;padding:8px 12px;color:#fff;transition:color .2s}
.bc-ziel a:hover,.bc-ziel a:focus-visible{color:var(--orange)}
.bc-ziel .rolle{flex:0 0 auto;margin-right:12px;color:#d5dde5;font-size:.86rem;font-weight:400;letter-spacing:.04em;text-transform:none}
.bc-ziel:has(.rolle){display:flex;align-items:center;flex-wrap:wrap}
.bc-ziel:has(.rolle) a{width:auto;flex:0 1 auto}
.bc-gleis{justify-content:center;font-weight:700;font-size:1.3rem;letter-spacing:.04em;text-align:center}
.bc-gleis.sm{font-size:.86rem;letter-spacing:.06em;text-transform:uppercase}
.bc-hint{display:block;padding:15px 12px 14px;color:#d5dde5;font-size:.92rem;overflow-wrap:break-word}
/* Kontakt: Initialen-Kreis als Platzhalter, bis A+S Portraets liefert */
.bc-ziel .av{flex:0 0 auto;width:34px;height:34px;margin-left:10px;border-radius:50%;overflow:hidden;background:#fff}
.bc-ziel .av img,.bc-ziel .av picture{display:block;width:100%;height:100%;object-fit:cover}
.bc-ziel:has(.av) a{padding-left:10px}
.bc-hint a{color:#fff}
.bc-hint a:hover,.bc-hint a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.bc-hint .tel{white-space:nowrap}
/* Einmalige Fallblatt-Animation beim ersten Sichtbarwerden (site.js setzt --i in ms und die Klassen pre/flip). Ohne JS und bei reduced motion steht die Tafel. */
.board.pre .brow{opacity:0;transform:rotateX(-90deg)}
.board.flip .brow{animation:flap .4s var(--ease) both;animation-delay:calc(var(--i,0) * 1ms)}
@keyframes flap{0%{opacity:0;transform:rotateX(-90deg)}60%{opacity:1;transform:rotateX(9deg)}100%{opacity:1;transform:rotateX(0)}}
/* Fallblatt wie an einer Bahnhofsanzeige: die obere Haelfte des alten Werts klappt nach unten weg und gibt
   die obere Haelfte des neuen Werts frei, danach faellt die untere Haelfte des neuen Werts von oben nach.
   Vier Ebenen: f-tn oben neu, f-bo unten alt, f-ft das fallende obere Blatt, f-fb das fallende untere. */
.flip>span{position:absolute;inset:0;display:grid;place-items:center;background:#0f2537;backface-visibility:hidden}
.f-tn,.f-ft{clip-path:inset(0 0 50% 0)}
.f-bo,.f-fb{clip-path:inset(50% 0 0 0)}
.f-tn{z-index:1}.f-bo{z-index:0}
.flip .f-ft{z-index:2;transform-origin:50% 50%;display:none}
.flip .f-fb{z-index:2;transform-origin:50% 50%}
.flip.flipping .f-ft{display:grid;animation:fl-top var(--flt,.2s) linear both}
.flip.flipping .f-fb{animation:fl-bot var(--flb,.22s) var(--flt,.2s) var(--ease) both}
@keyframes fl-top{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
@keyframes fl-bot{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
@media(prefers-reduced-motion:reduce){.flip.flipping .f-ft{display:none}.flip.flipping .f-fb{animation:none}}
html.no-motion .flip.flipping .f-ft{display:none}html.no-motion .flip.flipping .f-fb{animation:none}
@media(prefers-reduced-motion:reduce){.board.pre .brow,.board.flip .brow{opacity:1;transform:none;animation:none}}
html.no-motion .board.pre .brow,html.no-motion .board.flip .brow{opacity:1;transform:none;animation:none}
/* Trasse: Knick 48 px ueber dem Gleis in der Schienenspalte, Gleis 24 px unter der Tafel, Prellbock rechts (Knoten 20 px links vom Querbalken) */
.tafel .via-in{position:absolute;left:calc(var(--rail)/2);bottom:calc(var(--track) + 48px);width:0;height:0}
.tafel .prell{position:absolute;right:0;bottom:calc(var(--track) - 10px);width:40px;height:20px;display:block;line-height:0}
.tafel .prell svg{width:40px;height:20px;display:block}
.tafel .prell-m svg{width:20px;height:40px}
.tafel .prell path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:opacity .35s}
.tafel .prell.on path{opacity:1}
.tafel .prell-m{--node:off;display:none;right:auto;bottom:auto;width:20px;height:40px}
body.subpage .tafel{grid-template-columns:1fr;padding-bottom:0}
body.subpage .trail,body.subpage .tafel [data-node]{display:none}
/* Rechtszeile: ruhige Zeile unter der Tafel */
.ft-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px 24px;padding-top:22px;border-top:1px solid var(--edge);font-size:.86rem;color:#8ea2b5}
body.subpage .ft-bottom{margin-top:44px}
.ft-bottom .legal{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.ft-bottom .powered{justify-self:end}
.ft-bottom a{color:#8ea2b5;font-weight:400}
.ft-bottom a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft :focus-visible{outline-color:#fff}

@media(max-width:1100px){
  .bhead,.brow{grid-template-columns:128px minmax(0,1fr) 128px minmax(0,1fr)}
  .bc-zeit{font-size:.86rem;gap:8px}
  .bc-ziel{font-size:.86rem}
  .bc-gleis.sm{font-size:.78rem;letter-spacing:.04em;padding:8px 6px}
}
@media(max-width:760px){
  /* Mobil: zwei Spalten (Ziel und Gleis), Zeit ueber dem Ziel, Hinweis darunter, alles in einer Zelle links. Die Trasse endet als
     Stummel oben links am senkrechten Prellbock (.prell-m), bevor sie die Tafel erreicht; Knick und Gleis sind aus. */
  .ft{padding-top:96px}
  .tafel{display:block;position:static;padding-bottom:0}
  .th{padding-bottom:26px;margin-bottom:20px}
  .th-top{margin-bottom:20px}
  .th-clock{align-items:flex-start;text-align:left}
  .th-main{grid-template-columns:1fr;gap:18px}
  .th-cta{padding-bottom:0}
  .bhead{display:none}
  .brow{grid-template-columns:minmax(0,1fr) 116px;grid-template-areas:"zeit gleis" "ziel gleis" "hint gleis";row-gap:0;border-radius:4px;overflow:hidden}
  .bc{border-radius:0}
  .bc-zeit{grid-area:zeit;min-height:0;padding:10px 12px 0;white-space:normal}
  .bc-zeit:empty{display:none}
  .bc-ziel{grid-area:ziel}
  .bc-ziel a{min-height:44px;padding:6px 12px}
  .bc-ziel:has(.rolle){flex-wrap:wrap}
  .bc-ziel .rolle{flex-basis:calc(100% - 24px);margin:-8px 12px 8px}
  .bc-hint{grid-area:hint;min-height:0;padding:0 12px 10px;font-size:.86rem;line-height:1.45}
  .bc-hint .tel{display:block}
  .bc-hint .sep{display:none}
  .bc-gleis{grid-area:gleis}
  .bc-gleis.sm{font-size:.78rem;letter-spacing:.04em;padding:8px}
  .bc-zeit::before,.bc-zeit::after,.bc-hint::before,.bc-hint::after{display:none}
  .bc-zeit,.bc-hint{box-shadow:none}
  .bc-zeit:empty+.bc-ziel{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .brow.grp{margin-top:14px}
  .tafel .via-in,.tafel .prell{--node:off;display:none}
  .tafel .prell-m{--node:on;display:block;position:absolute;top:24px;left:calc(var(--pad) + var(--rail)/2 - 10px)}
  body.subpage .tafel .prell-m{display:none}
  .ft-bottom{margin-top:36px}
  body.subpage .ft-bottom{margin-top:36px}
}
@media(max-width:560px){
  .ft-bottom{grid-template-columns:1fr;justify-items:start;gap:12px;padding-top:22px}
  .ft-bottom .legal{justify-content:flex-start}
  .ft-bottom .powered{justify-self:start}
}

@media(max-width:1100px){
}
@media(max-width:1000px){
  .press{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcard,.pcard:nth-of-type(-n+2){order:0}
  .pcard.zahl{order:0}
}
@media(max-width:900px){
  .voices{display:flex;flex-direction:column;gap:26px;padding-top:36px}
  .branch-rail .st{margin-top:0}
  .voice{display:grid;grid-template-columns:var(--sb) minmax(0,1fr);grid-template-rows:auto auto;column-gap:22px;text-align:left;align-items:center}
  .vbead{grid-row:1/3}
  .vtag{grid-column:2;grid-row:1;justify-self:start;align-self:end;margin:0 0 8px}
  .vtxt,.vtag+.vtxt{grid-column:2;grid-row:2;align-items:flex-start;margin-top:0;align-self:start}
  .vtag:empty+.vtxt{grid-row:1/3;align-self:center}
}
@media(max-width:760px){
  :root{--sb:104px}
  .sub-row{margin-top:48px}
  .press{grid-template-columns:1fr;gap:16px}
  .pcard{flex-direction:row;align-items:stretch}
  .pframe{flex:0 0 44%;aspect-ratio:auto;min-height:124px}
  .pframe img{left:8%;top:10%;width:135%}
  .pbig{font-size:.9rem;padding:12px}
  .pmeta{border-top:0;border-left:1px solid var(--rule);justify-content:center;padding:12px 14px;min-width:0}
  .pmeta b{font-size:.86rem}
  .pcard.zahl{flex-direction:column;justify-content:center;padding:20px 22px}
  .pcard.zahl b{font-size:2.6rem}
  .vbead .play{width:28px;height:28px}
  .vbead .play svg{width:12px;height:12px}
  .panel-in{padding:76px 24px 36px 60px}
  .panel-in::before{left:24px}
  .ptop{height:120px}
  .ppic{width:120px;height:120px;box-shadow:0 0 0 6px #fff,0 0 0 9px var(--navy)}
  .ptop::before{left:-36px;top:59px;width:190px}
  .pmk{left:146px;top:48px}
  .pbeitrag::before{left:-44px}
  .pclose{top:14px;right:14px}
  .ctabox{border-radius:24px;padding-left:20px;padding-right:20px}
  .station.end{padding-bottom:64px}
}
@media(max-width:420px){
  .voice{column-gap:14px}
}

/* ============================================================
   v19: Logo-Bruecke, Endstation rund, Unterseiten ohne Linie, Programm-Karten, Logo-Wand
   ============================================================ */
/* Logo-Leiste als Zug in der Draufsicht (v22): ein Gleis ueber die volle Seitenbreite (zwei Schienen 2 px, Spurweite 60 px, Schwellen 2 px
   im 24-px-Raster, als SVG-Pattern pixelscharf, weisser Grund nur unter dem Gleis), darauf ein Zug aus Lok, einem Waggon je Organisation und
   einem Schlusswaggon, der von rechts nach links faehrt (40 px/s, CSS-Animation nur auf transform, Zug per JS dupliziert, Laenge gemessen).
   Hover, Tastaturfokus (:has(:focus-visible)) und Ziehen halten ihn an, Wischen, Pfeiltasten und die zwei Pfeile verschieben ihn (zweite Ebene .train-set). data-autoplay="false"
   an der Sektion oder prefers-reduced-motion schaltet die Fahrt ab. Die Trasse laeuft unter Gleis und Zug hindurch (Bahnuebergang), oberhalb
   flankieren zwei Andreaskreuze die Linie. Weisse Logo-Hintergruende verschwinden per mix-blend-mode: multiply im Waggon. */
.band-station{padding:0}
.tunnel-row{grid-template-columns:var(--rail) minmax(0,1fr);height:56px}
.tunnel-row .rail{align-items:flex-end;align-self:stretch}
.tunnel-row.out .rail{align-items:flex-start}
.xing{position:relative;display:block;width:44px;height:16px;z-index:3;margin-bottom:8px}
.xing svg{display:block;width:44px;height:16px;overflow:visible}
.xing path{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round}
.xout{display:block;width:0;height:0}
.band-head{display:flex;align-items:flex-end;height:56px;min-width:0;padding-bottom:16px}
.band-h{margin:0;line-height:1;font-size:.78rem}
.band-h .kicker{color:var(--navy)}
.gleis{--gh:104px;--wh:84px;position:relative;z-index:2;height:var(--gh)}
.rails{position:absolute;left:0;top:0;width:100%;height:var(--gh);display:block;pointer-events:none}
.train-view{position:relative;height:100%;overflow:hidden;overflow:clip;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.train-view.drag{cursor:grabbing}
.train-view:focus-visible{outline-offset:-3px}
.train-run{display:flex;height:100%;width:max-content;will-change:transform;animation:fahrt var(--dur,180s) linear infinite}
@keyframes fahrt{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1*var(--len,7200px)),0,0)}}
.gleis:hover .train-run,.gleis:has(:focus-visible) .train-run,.train-view.drag .train-run{animation-play-state:paused}
html.no-motion .train-run,.band-station[data-autoplay="false"] .train-run{animation:none}
.train-set{display:flex;align-items:center;height:100%;gap:320px;will-change:transform}
.train{display:flex;align-items:center;gap:10px;height:100%}
.train sv-collection{display:contents}
.train .muted{margin:0;white-space:nowrap;font-size:.86rem}
.loco{flex:0 0 auto;position:relative;width:150px;height:var(--wh);background:var(--navy);border-radius:30px 12px 12px 30px}
.loco::before{content:"";position:absolute;left:30px;right:14px;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.55);border-radius:1px}
.loco::after{content:"";position:absolute;left:-4px;top:28px;width:4px;height:3px;background:var(--navy);box-shadow:0 25px 0 var(--navy)}
.wagon{flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center;width:232px;height:var(--wh);background:#fff;border:2px solid var(--navy);border-radius:12px;padding:0 18px}
.wagon::before{content:"";position:absolute;left:-12px;top:50%;width:10px;height:2px;margin-top:-1px;background:var(--navy)}
.wagon img{display:block;height:42px;max-width:180px;width:auto;object-fit:contain;mix-blend-mode:multiply;-webkit-user-drag:none}
.wagon img.sq{height:50px}
.wagon img.tall{height:48px}
.wagon img.wide{height:34px}
.wagon{transition:border-color .25s}
.wagon:hover{border-color:var(--orange)}
.wagon:hover::before{background:var(--orange)}
.lname{font-size:.72rem;font-weight:700;color:var(--navy);line-height:1.25;text-align:center;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:.01em;max-width:100%}
.wagon .lname{font-size:.72rem;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;-webkit-line-clamp:2}
.wagon.tail{background:transparent;border:2px dashed var(--navy);border-radius:10px 22px 22px 10px;color:var(--navy);padding:0;width:120px;text-decoration:none}
.wagon.tail svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.wagon.tail:hover{border-style:solid;border-color:var(--orange);color:var(--orange)}
.wagon.tail::after{content:"";position:absolute;right:-6px;top:13px;width:4px;height:3px;background:var(--navy);box-shadow:0 23px 0 var(--navy)}
.band-nav{display:flex;justify-content:flex-end;align-items:flex-start;gap:8px;padding-top:12px}
.bnav{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--rule-2);background:transparent;color:var(--navy);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .2s,opacity .2s}
.bnav svg{width:12px;height:12px}
.bnav:hover{border-color:var(--navy)}

/* Kein Abstand unter main: die Endstation traegt die Luft bis zur Halle selbst */
main{padding-bottom:0}

/* Unterseiten: gleiche Typografie und Karten, aber ohne Linie, ohne Rails, ruhige Kapitelnummern */
body.subpage{--num:clamp(44px,5vw,64px)}
body.subpage .head{padding-bottom:clamp(28px,4vw,48px)}
body.subpage .content{max-width:none}

/* Programm: drei Tage als kompakte Karten */
.days3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dcard{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;min-width:0;transition:box-shadow .25s,transform .25s var(--ease);color:inherit}
.dcard:hover{box-shadow:0 12px 32px rgba(28,61,90,.14);transform:translateY(-2px)}
.dimg{position:relative;aspect-ratio:16/9;background:var(--card);overflow:hidden}
.dimg sv-image,.dimg picture,.dimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dtxt{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.dtxt .kicker{margin-bottom:2px}
.dtxt h3{font-size:1.2rem}
.dtxt p{color:var(--meta);font-size:.92rem;line-height:1.5}
.dtxt .more{margin-top:6px;font-size:.86rem;font-weight:700;color:var(--navy);border-bottom:2px solid var(--rule-2);align-self:flex-start;padding-bottom:2px}
.dcard:hover .more{border-color:var(--navy)}

/* Referenten: Rueckfall auf 2026, solange sv-speakers leer ist */
.b2026{grid-column:1/-1;display:flex;flex-direction:column;gap:18px}
/* Rückblick Programm 2026 im Leerzustand der Agenda */
.p2026{display:flex;flex-direction:column}
.slot26{display:grid;grid-template-columns:120px 1fr auto;column-gap:24px;align-items:start;padding:13px 0;border-top:1px solid var(--rule)}
.slot26 time{font-weight:700;color:var(--navy);font-size:.86rem;padding-top:2px;white-space:nowrap}
.slot26 h4{margin:0;font-size:1rem;line-height:1.35}
.slot26 .s26r{margin:3px 0 0;font-size:.88rem;color:var(--meta);line-height:1.45}
.slot26 .s26h{margin:3px 0 0;font-size:.84rem;color:var(--meta);font-style:italic}
.slot26 .s26m{display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding-top:3px}
.slot26 .s26f{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--meta);font-weight:600}
.slot26 .s26q{font-size:.78rem;color:var(--navy);font-weight:600}
@media(max-width:700px){.slot26{grid-template-columns:1fr;row-gap:4px}.slot26 .s26m{align-items:flex-start;flex-direction:row;gap:10px}}

.b2026 .lead{max-width:70ch}
.b2026 .pgrid{display:grid}
.b2026 .filters{margin-bottom:6px}
.b2026 .count{margin:-4px 0 4px}

/* Sponsoren 02, "2026 auf der Bühne": fliessende Reihe einfarbiger Logos auf Weiss, gleiche Hoehe, Breite nach Seitenverhaeltnis, Farbe erst beim Hover. Einfaerbung ueber den SVG-Filter #sv-navy in sponsoren.html (Luminanz auf Weiss bis Navy abgebildet, Weiss bleibt Weiss), damit auch PNGs mit weissem Grund (30 von 37) mitmachen: multiply nimmt das Weiss weg. Farbe erst beim Hover. */
.flow2026{display:flex;flex-wrap:wrap;align-items:center;gap:32px 40px}
.flow2026 sv-collection{display:contents}
.flogo{display:flex;align-items:center;flex:0 0 auto;min-height:44px}
.flogo img{height:34px;width:auto;max-width:190px;object-fit:contain;mix-blend-mode:multiply}
.flogo img.sq{height:42px}
.flogo img.tall{height:38px}
.flogo img.wide{height:26px}
.flogo .lname{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);opacity:.75;-webkit-line-clamp:2;max-width:150px}

@media(max-width:1000px){
  .flow2026{gap:26px 32px}
}
@media(max-width:760px){
  .tunnel-row .rail{justify-content:center;padding-left:0}
  .days3{grid-template-columns:1fr}
  .flow2026{gap:18px 26px}
  .flogo img{height:26px;max-width:140px}
  .flogo img.sq{height:32px}
  .flogo img.tall{height:30px}
  .flogo img.wide{height:20px}
}
/* Programm: schneller zum Programm, engere Abstaende zwischen Kopf, Karten und Agenda */
body.subpage .station.tight{padding-top:clamp(40px,5vw,64px)}
body.subpage #tage .head{padding-bottom:clamp(20px,3vw,32px)}
/* Referenten: Hinweis nur, wenn 2027er Namen da sind; 2026er Block aus dem empty-Template im Raster */
.speakers-wrap .hint2027{margin:-10px 0 22px;font-size:.92rem}
.speakers-wrap:has(#b2026) .hint2027{display:none}

/* Zwischenhalt unter dem Hero-Foto, damit die Linie nicht durch die Fakten laeuft */
.hero-grid{position:relative}
.hero-via{position:absolute;right:calc(var(--pad) + var(--cap) + 16px);bottom:-6px}
@media (max-width:760px){.hero-via{--node:off}}
@media(max-width:760px){.loco{width:110px}.wagon{width:190px;padding:0 14px}.wagon img{max-width:150px}}

/* ============================================================
   Markenzeichen 2027: Wortmarke im Kopf, Signet auf schmalen Bildschirmen
   Die Marke traegt ihre Trassenlinie schon, deshalb steht im Kopf kein Signet daneben.
   Unter 680 px bleibt neben Ticket-Knopf und Menue kein Platz fuer die Wortmarke,
   dort steht das Signet, wie im Favicon.
   ============================================================ */
/* Die quadratische Marke oben links, so wie A+S sie gewuenscht hat: das ganze
   Zeichen mit der Zeile "Kongress 2027", ohne Zusatztext daneben. Die Kopfzeile
   ist dafuer von 76 auf 88 px gewachsen, damit das Quadrat 64 px tragen kann. */
.brand img.qm{width:64px;height:64px;border-radius:0;flex:0 0 auto}
@media(max-width:1180px){.brand img.qm{width:58px;height:58px}}
@media(max-width:680px){.brand img.qm{width:52px;height:52px}}
/* Im Menue folgt die Marke der Groesse der Kapitelzeilen: deren Schriftgrad ist
   clamp(1.7rem,7vw,2.8rem), die Versalhoehe davon 0,7. Die Marke steht auf 0,8 dieser
   Versalhoehe, umgerechnet auf die Dateihoehe (Faktor 2,7, weil die Datei ihren
   Schutzraum mitbringt). So bleibt das Verhaeltnis auf jeder Breite gleich. */
.ov-top .brand img.qm{width:clamp(64px,13vw,84px);height:clamp(64px,13vw,84px)}

/* Zwei Logofassungen im Markup, hell ist der Standard */
.brand img.qm-dunkel{display:none}
.brand img.qm-hell{display:block}


/* Die Trasse endet jetzt am Haltepunkt neben "Naechster Halt: Dresden" statt unten
   rechts am Prellbock. Damit bekommt die Tafel die volle Breite wie auf den
   Unterseiten, und "Organisation" bzw. "Sponsoring" brechen nicht mehr um.
   Der Knoten ist offen und faellt orange aus, sobald die Linie ihn erreicht. */
body.home .tafel{grid-template-columns:1fr;padding-bottom:0}
/* Ohne das Polster der Tafel klebte die letzte Kontaktzeile auf der Trennlinie */
@media(min-width:761px){body.home .ft-bottom{margin-top:44px}}
body.home .tafel .trail{position:absolute;left:0;top:0;width:26px;height:26px}
/* Deckend wie alle anderen Haltepunkte, damit die Linie dahinter endet und nicht
   durch den offenen Punkt hindurchscheint. */
body.home .tafel .st-end{position:absolute;left:0;top:4px;background:var(--fbg);border-color:var(--fm)}
body.home .tafel .st-end.on{background:var(--orange);border-color:var(--orange)}
body.home .th-top{padding-left:46px}
@media(max-width:600px){body.home .th-top{padding-left:38px}}

/* Newsletter im Kopf der Abfahrtstafel, rechte Spalte ueber den Buttons.
   Das Feld ist eine Pille wie die Knoepfe daneben, damit die Gruppe als Einheit liest.
   Orange bleibt dem Ticketknopf vorbehalten, der Newsletter tritt eine Stufe leiser auf. */
.th-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px;min-width:0}
.th-nl{display:flex;align-items:center;gap:4px;width:100%;max-width:360px;
  border:2px solid var(--edge);border-radius:999px;padding:4px 4px 4px 20px;
  background:rgba(255,255,255,.04);transition:border-color .2s}
.th-nl:focus-within{border-color:var(--orange)}
.nl-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nl-input{flex:1 1 auto;min-width:0;background:transparent;border:0;color:#fff;font:inherit;
  font-size:.92rem;padding:9px 0}
.nl-input::placeholder{color:var(--fm)}
.nl-input:focus{outline:none}
.nl-input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s}
.nl-btn{flex:0 0 auto;border:0;border-radius:999px;padding:11px 20px;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font:inherit;font-weight:700;font-size:.88rem;
  transition:background .2s,color .2s}
.nl-btn:hover,.nl-btn:focus-visible{background:#fff;color:var(--fbg)}
.nl-btn[disabled]{cursor:default;background:rgba(255,255,255,.06);color:var(--fm)}
.nl-status{display:none;margin:0;max-width:360px;font-size:.86rem;line-height:1.4;text-align:right}
.th-side.is-done .nl-status,.th-side.has-error .nl-status{display:block}
.th-side.is-done .th-nl{display:none}
.th-side.is-done .nl-status{color:#fff}
.th-side.has-error .nl-status{color:var(--orange-2)}
@media(max-width:900px){
  .th-side{align-items:stretch}
  .th-nl{max-width:none}
  .nl-status{max-width:none;text-align:left}
}

/* ============================================================
   Farbleitsystem im Programm
   Ein Programmpunkt traegt drei Angaben verschiedener Art, und sie werden
   verschieden dargestellt, damit man sie nicht verwechselt:

     Format  Vortrag, Podium, Pause      faerbt die ganze Zeile
     Thema   Politik, Bahn, KI           steht als Marke (Pille)
     Ort     Plenum, Workshop 1          steht mit offenem Ring davor

   A+S wuenschte "verschiedene Farben fuer Vortraege, Workshops, Pausen",
   also traegt das Format die Farbe der Flaeche: eine Pause sieht auf einen
   Blick anders aus als ein Vortrag, ohne dass man lesen muss.
   Alle drei Farben kommen aus dem CMS (tagDefinitions, categoryDefinitions,
   stageDefinitions). Die Formatfarbe haengt als data-typ-farbe am Punkt und
   wird in pages.js zu --typ, die Themenfarbe als data-farbe an der Marke und
   wird zu --tagfarbe. Ohne hinterlegte Farbe faellt beides neutral aus.
   Die Zeilen sind dafuer flache Kaesten statt Zeilen mit Trennlinie: eine
   Flaeche braucht eine Kante, sonst franst die Faerbung aus.
   ============================================================ */
.slot{border-top:0;border-radius:16px;padding:16px 20px;margin-bottom:8px;
  background:color-mix(in oklab,var(--typ,var(--meta)),transparent 88%)}
.slot:last-child{border-bottom:0;margin-bottom:0}
/* Der orange Balken fuer hervorgehobene Punkte wird zur linken Kante des Kastens */
.slot[data-hi="true"]::before{left:0;top:0;bottom:0;width:4px;border-radius:16px 0 0 16px}
.slot .meta{gap:8px 12px;align-items:center}
/* Das Format steht als Wort in seiner Farbe, nicht als Pille: es faerbt schon
   die Flaeche, eine zweite Pille daneben waere doppelt gemoppelt. */
.slot .format{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--typ,var(--meta))}
.slot .format:empty{display:none}
.slot .mk{display:inline-flex;align-items:center;border-radius:999px;padding:3px 11px;
  font-size:.76rem;font-weight:700;letter-spacing:.02em;line-height:1.55;
  color:var(--tagfarbe,var(--meta));
  background:color-mix(in oklab,var(--tagfarbe,var(--meta)),transparent 90%);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--tagfarbe,var(--meta)),transparent 66%)}
.slot .mk:empty{display:none}
.slot .ort{display:inline-flex;align-items:center;gap:7px;color:var(--meta);font-weight:600}
.slot .ort:empty{display:none}
/* Der Ring traegt die Farbe der Buehne aus den Event-Einstellungen. Damit sind
   alle drei Farben, die A+S im CMS pflegen kann, auf der Seite sichtbar:
   Tag faerbt die Flaeche, Kategorie die Pille, Buehne den Ring. Ohne
   hinterlegte Farbe faellt der Ring neutral aus. */
.slot .ort::before{content:"";width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--stage,currentColor);background:transparent}
/* Im Popup stehen dieselben Angaben unter der Zeitzeile */
.sheet .sheet-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:10px 0 4px;font-size:.86rem}
/* In den Workshop-Spalten traegt der Spaltenkopf schon den Ort, dort steht
   nur das Format, und enger gesetzt. */
.lane .slot{padding:11px 13px;margin-bottom:6px;border-radius:12px}
.lane .slot[data-hi="true"]::before{left:0;border-radius:12px 0 0 12px}
.lane .slot .meta{margin-top:5px}

/* ============================================================
   Vorspann
   Beim ersten Aufruf einer Sitzung und bei jedem Neuladen liegt die Marke
   einmal gross auf dem Markennavy, zeichnet sich in 2,0 s selbst und gibt
   danach die Seite frei. Wer von einer Unterseite zurueckkommt, sieht sie
   nicht noch einmal. Gebunden ist das an body.home, die Unterseiten zeigen
   sie ohnehin nie.
   Die Entscheidung faellt im Kopf der Seite, sichtbar wird sie ueber die
   Klasse vorspann-an am <html>. Ausgeblendet wird per CSS-Animation, nicht
   per Skript: ein Fehler danach kann die Seite also nicht verdecken.
   ?vorspann erzwingt sie, ?vorspann=0 schaltet sie ab.
   Der Grund ist fest #1c3d5a, nicht der Themenwert: der Vorspann gehoert der
   Marke, nicht der Fassung, und traegt deshalb immer den Negativsatz.
   ============================================================ */
.vorspann{display:none}
html.vorspann-an body.home .vorspann{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:#1c3d5a;touch-action:none;overscroll-behavior:contain;
  animation:vorspann-weg .52s cubic-bezier(.2,.7,.2,1) 2.42s forwards}
.vorspann svg{width:clamp(132px,17vw,196px);height:auto}
/* Die Marke baut sich in 1,7 s selbst auf: erst BIM, dann Infra, der Punkt
   dahinter, die Linie zeichnet sich von links, der Haltepunkt springt an,
   zuletzt die Zeile "Kongress 2027". Die Klassen sitzen auf Huellen, nicht
   auf den verschobenen Gruppen: eine CSS-transform ueberschreibt in SVG das
   transform-Attribut und wuerde das Bauteil an den Ursprung werfen. */
.vs-b{animation:vs-txt .76s cubic-bezier(.2,.7,.2,1) .12s both}
.vs-i{animation:vs-txt .76s cubic-bezier(.2,.7,.2,1) .34s both}
.vs-p{transform-box:fill-box;transform-origin:center;opacity:0;animation:vs-punkt .54s cubic-bezier(.2,1.6,.4,1) .72s forwards}
.vs-l{stroke-dasharray:97.09;stroke-dashoffset:97.09;animation:vs-linie .72s cubic-bezier(.3,.7,.3,1) .86s forwards}
.vs-d{transform-box:fill-box;transform-origin:center;opacity:0;animation:vs-punkt .54s cubic-bezier(.2,1.6,.4,1) 1.16s forwards}
.vs-k{animation:vs-txt .68s cubic-bezier(.2,.7,.2,1) 1.30s both}
@keyframes vs-txt{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vs-linie{to{stroke-dashoffset:0}}
@keyframes vs-punkt{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes vorspann-weg{to{opacity:0;visibility:hidden}}
/* Wer Bewegung reduziert, sieht die Marke kurz stehen statt sie zu bauen:
   die Datei selbst schaltet ihre Animation ab, hier verkuerzt sich die Standzeit. */
@media(prefers-reduced-motion:reduce){html.vorspann-an body.home .vorspann{animation-delay:.7s;animation-duration:.2s}
  .vs-b,.vs-i,.vs-p,.vs-l,.vs-d,.vs-k{animation:none;opacity:1;stroke-dashoffset:0;transform:none}}

/* ============================================================
   Filterleiste ueber der Agenda
   Ein Tag ist eine chronologische Liste, kein Spaltenraster. Wer nur einen
   Raum oder nur eine Art sehen will, schaltet hier um. Die Schalter baut
   pages.js aus den vorhandenen Werten, das Markup kennt keine Raumnamen.
   Ohne Javascript bleibt die Leiste versteckt und die Liste vollstaendig.
   ============================================================ */
.agf{margin:18px 0 22px}
/* Der Filter steht immer bereit, aber eingeklappt: die Leiste soll den Tag
   nicht zustellen, und sie darf auch dann nicht verschwinden, wenn heute nur
   ein Raum im Programm steht. Morgen koennen es fuenf sein. */
.agf-auf{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:.86rem;
  font-weight:700;cursor:pointer;color:var(--navy);background:transparent;
  border:2px solid var(--rule-2);border-radius:999px;padding:7px 16px;transition:border-color .18s}
.agf-auf:hover{border-color:var(--navy)}
.agf-auf svg{width:14px;height:14px;flex:0 0 auto;transition:transform .2s}
.agf-auf[aria-expanded="true"] svg{transform:rotate(180deg)}
.agf-auf .agf-n{font-weight:700;color:var(--orange)}
.agf-in{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.agf-in[hidden]{display:none}
.agf-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.agf-l{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--meta);margin-right:4px;min-width:44px}
.agf-b{font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;white-space:nowrap;
  border:2px solid var(--rule-2);background:transparent;color:var(--navy);
  border-radius:999px;padding:6px 14px;transition:border-color .18s,background .18s,color .18s}
.agf-b:hover{border-color:var(--navy)}
.agf-b[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media(max-width:600px){.agf-l{min-width:0;width:100%;margin:2px 0 -2px}}

/* ============================================================
   Zeitraster
   Ein Kongresstag laeuft in Zeitscheiben: um 09:30 drei Vortraege parallel, um
   10:30 wieder drei, dazwischen eine Pause fuer alle. Genau so steht es da.
   Links die Uhrzeit als Schiene, rechts alles, was zu dieser Zeit beginnt,
   nebeneinander.
   Die Spaltenzahl kommt aus den Daten, nicht aus einer Raumliste: auto-fit
   macht aus einem Punkt eine breite Zeile, aus dreien drei Spalten, und bei
   acht bricht das Raster um. Damit traegt es jede Programmaenderung mit.
   Gebaut wird in pages.js nach dem Rendern, die Uhrzeit wandert dabei aus dem
   Punkt in den Reihenkopf.
   ============================================================ */
.zr{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:24px;
  align-items:start;margin-bottom:10px}
.zr-zeit{position:sticky;top:106px;display:flex;flex-direction:column;gap:2px;
  padding-top:16px;font-size:.95rem;line-height:1.25}
.zr-zeit b{font-weight:700;color:var(--navy)}
.zr-zeit small{font-weight:400;color:var(--meta);font-size:.86rem}
.zr-punkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:10px;min-width:0}
/* Eine Reihe mit mehreren Punkten sagt das auch: der Hinweis steht unter der
   Uhrzeit und verschwindet, sobald nur ein Punkt zu dieser Zeit laeuft. */
.zr-par .zr-zeit::after{content:attr(data-wort);font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--meta);margin-top:6px}
.zr-par .zr-zeit{--x:0}
.zr-par[data-n] .zr-zeit::after{content:"gleichzeitig"}
/* Im Raster traegt der Punkt seine Uhrzeit nicht mehr selbst, die steht links */
.ag-raster .slot{grid-template-columns:minmax(0,1fr);margin-bottom:0;height:100%}
.ag-raster .slot>time{display:none}
.ag-raster .slot .tbtn{max-width:none}
@media(max-width:760px){
  .zr{grid-template-columns:1fr;column-gap:0;row-gap:6px;margin-bottom:16px}
  .zr-zeit{position:static;flex-direction:row;align-items:baseline;gap:8px;padding-top:0}
  .zr-par .zr-zeit::after{margin:0 0 0 4px}
  .zr-punkte{grid-template-columns:1fr}
}

/* Initialen statt leerem Kreis, wenn zu einem Referenten kein Bild hinterlegt
   ist oder die Datei fehlt. Masse wie das Bild, das es ersetzt. */
.slot .spk .ini-sm{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;
  place-items:center;background:var(--card);color:var(--navy);
  font-size:.78rem;font-weight:800;letter-spacing:.02em}
.sheet .who .spk .ini-sm{width:44px;height:44px;font-size:.84rem}
/* Im Raster stehen die Punkte einer Zeit nebeneinander, jeder so hoch wie er
   ist. Gleiche Hoehe zu erzwingen hiesse, dass ein Punkt mit acht Referenten
   sieben leere Zeilen in die Nachbarn schreibt. */
.zr-punkte{align-items:start}
.ag-raster .slot{height:auto}

/* Spur eines Programmpunkts (Workshop 1, 2, 3).
   Die Marke steht nur dort, wo ein Tag mehrere Spuren hat. Ohne Javascript
   liegen alle Punkte in einer Liste, dann zeigt sie den Tagesnamen und macht
   die Liste lesbar. */
.spur{display:none}
.ag-quelle .spur{display:inline;color:var(--meta);font-size:.8rem;letter-spacing:.04em}
.ag-spuren .slot[data-spur] .spur{display:inline;color:var(--navy);font-weight:700;font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase}
.ag-spuren .zr-par .slot[data-spur] .spur{display:block;margin-bottom:2px}

/* ------------------------------------------------------------------
   Spaltenraster fuer parallele Spuren

   Eine Spur steht in jeder Zeitreihe an derselben Stelle, ihr Name einmal
   oben. Punkte, die fuer alle gelten (Fuehrung, Pause, Schlusswort), nehmen
   die ganze Breite. Unter 900 px faellt alles wieder untereinander, dort
   traegt der Ort im Punkt die Information.
   ------------------------------------------------------------------ */
.ag-spalten .zr-punkte{grid-template-columns:repeat(var(--spalten),minmax(0,1fr));align-items:stretch}
.ag-spalten .slot[data-voll]{grid-column:1 / -1}

/* Nicht sticky: die Spaltenkoepfe stehen einmal ueber dem Raster.
   Ein mitlaufender Kopf braeuchte eine deckende Flaeche, und die gab es hier
   nicht (die erste Fassung nutzte var(--bg), eine Variable, die es im
   Stylesheet gar nicht gibt: die Regel fiel weg, der Kopf war durchsichtig
   und lag beim Scrollen lesbar ueber den Karten). */
.zr-kopf{margin-bottom:6px}
.zr-kopf .zr-punkte{gap:16px}
.sp-kopf{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--meta);padding:0 0 8px;border-bottom:2px solid var(--rule-2)}

/* Der Spaltenkopf sagt schon, welche Spur es ist: die Marke im Punkt und das
   Wort "gleichzeitig" waeren hier nur Wiederholung. */
.ag-spalten .slot .spur{display:none}
.ag-spalten .zr-par .zr-zeit::after{content:none}

@media(max-width:900px){
  .zr-kopf{display:none}
  .ag-spalten .zr-punkte{grid-template-columns:1fr}
  .ag-spalten .slot,.ag-spalten .slot[data-voll]{grid-column:auto !important}
  .ag-spalten .slot[data-spur] .spur{display:block;margin-bottom:2px}
}

/* Filter zuruecksetzen: steht unter den Reihen, erscheint nur wenn ein Filter
   greift. Leiser als die Filterknoepfe, es ist ein Rueckweg, kein Angebot. */
.agf-reset{align-self:flex-start;margin-top:2px;font:inherit;font-size:.82rem;font-weight:700;
  cursor:pointer;background:none;border:0;padding:4px 0;color:var(--meta);
  border-bottom:1px solid var(--rule-2)}
.agf-reset:hover,.agf-reset:focus-visible{color:var(--navy);border-color:var(--navy)}
.agf-reset[hidden]{display:none}

/* ------------------------------------------------------------------
   Programm-Widget aus: Hinweis statt Zeitraster

   Geschaltet wird ueber data-programm am Agenda-Block. "aus" blendet Tage,
   Raster und Filter aus und zeigt den Hinweis mit dem Link auf den Kongress
   2026. Die Agenda bleibt im Markup, damit das Zurueckschalten ein Wort ist.
   ------------------------------------------------------------------ */
.ag-aus{display:none}
.agenda[data-programm="aus"] .ag-aus{display:block;max-width:64ch}
.agenda[data-programm="aus"] .ag-aus p{margin:0 0 18px;font-size:1.05rem;line-height:1.6}
.agenda[data-programm="aus"] .ag-aus p:last-child{margin:0}
.agenda[data-programm="aus"] .tabs,
.agenda[data-programm="aus"] [data-tage-panels],
.agenda[data-programm="aus"] .lnote,
.agenda[data-programm="aus"] .agenda-note{display:none}

/* ==================================================================
   TICKETSHOP-SCHALTER  (eine Stelle, zwei Zeilen)

   AUS (jetzt): der Ticketshop ist noch nicht live. Die "Ticket kaufen"-Knoepfe
   sind ausgeblendet, an ihrer Stelle steht der Newsletter-Knopf, der das Popup
   oeffnet.

   AN (ab naechster Woche): in den beiden Regeln direkt unter diesem Kommentar die
   Werte tauschen, der Ticket-Knopf wird sichtbar, der Newsletter-Knopf verschwindet.
   Mehr ist nicht zu tun, die Ticket-Knoepfe stehen unveraendert im Markup.
   (Die Werte stehen hier bewusst nicht woertlich, sonst trifft ein Suchen-und-Ersetzen
   diesen Kommentar statt der Regel.)
   ================================================================== */
.ticket-cta{display:none}
.nl-open{display:inline-flex}

/* Newsletter-Popup ------------------------------------------------ */

/* margin:auto ist Pflicht: der globale Reset (*{margin:0}) setzt die Regel des
   Browsers ausser Kraft, mit der ein modaler Dialog mittig steht. Ohne sie
   klebt er oben links. dialog.sheet macht es aus demselben Grund. */
.nlp{border:0;padding:0;margin:auto;width:min(92vw,520px);max-width:none;max-height:90vh;
  overflow:auto;border-radius:var(--r);background:var(--white);color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.35)}
.nlp::backdrop{background:rgba(12,28,44,.62);backdrop-filter:blur(3px)}
.nlp-in{position:relative;padding:clamp(24px,4vw,38px)}
.nlp-in .kicker{color:var(--orange)}
.nlp-in h2{font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.02em;margin:8px 0 10px;
  color:var(--text)}
.nlp-in>p{margin:0 0 20px;line-height:1.6;color:var(--meta);max-width:42ch}
.nlp-close{position:absolute;top:14px;right:14px;width:38px;height:38px;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:50%;
  background:none;cursor:pointer;color:var(--text);flex:0 0 auto}
.nlp-close:hover,.nlp-close:focus-visible{border-color:var(--orange);color:var(--orange)}
.nlp-close svg{width:17px;height:17px}

/* Eigene Zeile statt der Fusszeilen-Pille: dort ist die Schrift hart auf #fff
   gesetzt, das waere hier im hellen Modus weiss auf weiss. */
.nlp-zeile{display:flex;align-items:center;gap:6px;
  border:2px solid var(--rule-2);border-radius:999px;padding:4px 4px 4px 18px;
  background:var(--card);transition:border-color .2s}
.nlp-zeile:focus-within{border-color:var(--orange)}
.nlp .nl-input{flex:1 1 auto;min-width:0;background:transparent;border:0;
  color:var(--text);font:inherit;font-size:.95rem;padding:10px 0}
.nlp .nl-input::placeholder{color:var(--meta)}
.nlp .nl-btn{flex:0 0 auto;border:0;border-radius:999px;padding:11px 22px;cursor:pointer;
  background:var(--orange);color:#fff;font:inherit;font-weight:700;font-size:.9rem;
  transition:background .2s}
.nlp .nl-btn:hover,.nlp .nl-btn:focus-visible{background:var(--orange-2)}
.nlp .nl-btn[disabled]{cursor:default;background:var(--meta)}

/* Die Statuszeile ist global auf display:none gesetzt und wird in der Fusszeile
   ueber .th-side eingeblendet. Im Popup gibt es dieses Geruest nicht. */
.nlp .nl-status{display:block;margin:12px 0 0;max-width:none;text-align:left;
  font-size:.88rem;min-height:1.2em;color:var(--meta)}
.nlp-in.has-error .nl-status{color:#c0392b}
.nlp-in.is-done .nl-status{color:var(--orange);font-weight:700}
.nlp-fein{font-size:.8rem;color:var(--meta);margin:16px 0 0;line-height:1.5;max-width:42ch}
@media(max-width:520px){
  .nlp-zeile{flex-wrap:wrap;border-radius:var(--r);padding:10px}
  .nlp .nl-input{flex:1 1 100%;padding:8px 6px}
  .nlp .nl-btn{width:100%}
}