/* =====================================================================
   CONGENITAL HEART SUMMIT 2026 — STYLESHEET
   Farben, Typo und Baender exakt aus dem offiziellen Programm-PDF.
   Alle Design-Stellschrauben stehen unten in :root.
   ===================================================================== */

:root{
  /* Hoehe des festen Kopfes: Navigationszeile plus Laufband (nur Startseite,
     html.has-ticker). --ticker-h ist die feste Bandhoehe (fuer den Abstand
     des Hero, damit nichts springt), --ticker-vis die gerade sichtbare
     (0, wenn das Band beim Runterscrollen eingeklappt ist). */
  --nav-h:66px;
  --ticker-h:0px;
  --ticker-vis:var(--ticker-h);
  --head-h:calc(var(--nav-h) + var(--ticker-vis));
  /* --- Palette. Grundtoene aus assets/logo.svg (Stand 07.09.2026).
     Die abgeleiteten Toene sind nicht geraten: -soft, -mid und -tint sind
     mit Weiss gemischt, in denselben Verhaeltnissen wie zuvor. -ink, -display
     und -deep sind so weit abgedunkelt, dass sie ihr Kontrastziel treffen,
     strengster Fall ist meist der eigene Tint, nicht Cream. --- */
  --cream:#FFFBDC;          /* Titelseite */
  --paper:#FEF9F8;          /* Forum-/Plenum-Seiten */
  --paper-green:#EFF9F1;    /* Workshop-Seite, aus dem neuen Gruen gemischt */

  --cyan:#1DA7E0;           /* Forum Hall, Flaechen und Baender */
  --cyan-ink:#15769F;       /* Cyan als Textfarbe, klein: erfuellt AA 4.5:1 */
  --cyan-display:#1B99CD;   /* Cyan fuer grosse Schrift: erfuellt AA 3:1, bleibt leuchtend */
  --cyan-soft:#BCE5F6;      /* Keynote-Band */
  --cyan-tint:#E8F6FC;

  --navy:#00215C;           /* Plenum Hall, Pausenbaender */
  --navy-2:#133165;         /* Fliesstext */
  --navy-soft:#C9D2E4;
  --navy-tint:#EAEEF6;

  --green:#1F9F38;          /* Workshops */
  --green-ink:#187A2B;      /* Gruen als Textfarbe */
  --green-mid:#A5D9AF;
  --green-soft:#D2ECD7;
  --green-tint:#DDF1E1;

  --magenta:#E7358B;
  --magenta-ink:#CE1870;    /* Magenta als Textfarbe */
  --magenta-deep:#CE1870;   /* Magenta als Flaeche unter weisser Schrift */
  --magenta-tint:#FDEBF3;   /* heller Magentagrund, z. B. CV-Knopf Aachen */
  --pink:#E74993;
  --red:#E53016;
  --yellow:#FEE110;
  --violet:#334E98;

  --ink:#0E1B3A;
  --ink-2:#3D4C6E;
  --ink-3:#5A667F;          /* aufgedunkelt, damit Kleintext AA erreicht, auch auf navy-tint */
  --hair:#E2DFD4;
  --hair-2:#EFEDE4;
  --white:#FFFFFF;

  /* --- Struktur --- */
  --maxw:1240px;
  --pad:clamp(20px,4vw,44px);
  --radius:14px;
  --radius-sm:8px;
  --band-h:44px;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow:0 24px 60px -30px rgba(0,33,92,.42);
  --shadow-sm:0 10px 28px -18px rgba(0,33,92,.45);

  /* --- Typo --- */
  --display:"Figtree","Charite Headline","Avenir Next",-apple-system,sans-serif;
  --text:"Source Sans 3","Bliss Pro","Segoe UI",-apple-system,sans-serif;
}

/* Farbrolle je Schiene. Wird per data-track gesetzt. */
[data-track="forum"]{ --track:var(--cyan); --track-ink:var(--cyan-ink); --track-display:var(--cyan-display); --track-soft:var(--cyan-soft); --track-tint:var(--cyan-tint); --track-paper:var(--paper); --track-on:var(--navy); }
[data-track="plenum"]{ --track:var(--navy); --track-ink:var(--navy); --track-display:var(--navy); --track-soft:var(--navy-soft); --track-tint:var(--navy-tint); --track-paper:var(--paper); --track-on:var(--white); }
[data-track="workshops"]{ --track:var(--green); --track-ink:var(--green-ink); --track-display:var(--green-ink); --track-soft:var(--green-mid); --track-tint:var(--green-tint); --track-paper:var(--paper-green); --track-on:var(--white); }
[data-track="overview"]{ --track:var(--navy); --track-ink:var(--navy); --track-display:var(--navy); --track-soft:var(--navy-soft); --track-tint:var(--navy-tint); --track-paper:var(--cream); --track-on:var(--white); }
/* Farbrolle je Zentrum. Nur fuer die CV-Panels, passend zu den Avataren. */
[data-track="berlin"]{ --track:var(--cyan); --track-ink:var(--cyan-ink); --track-display:var(--cyan-display); --track-soft:var(--cyan-soft); --track-tint:var(--cyan-tint); --track-paper:var(--paper); --track-on:var(--navy); }
[data-track="kiel"]{ --track:var(--green); --track-ink:var(--green-ink); --track-display:var(--green-ink); --track-soft:var(--green-mid); --track-tint:var(--green-tint); --track-paper:var(--paper-green); --track-on:var(--white); }
[data-track="aachen"]{ --track:var(--magenta); --track-ink:var(--magenta-ink); --track-display:var(--magenta-ink); --track-soft:var(--magenta); --track-tint:var(--magenta-tint); --track-paper:var(--paper); --track-on:var(--white); }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 10px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--text);
  font-size:17px;
  line-height:1.62;
  color:var(--navy-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
svg{display:block}
::selection{background:var(--cyan-soft);color:var(--navy)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:900px}

/* ---------- Typo-Primitive ---------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);line-height:1.08;letter-spacing:-.015em;font-weight:700}
.kicker{
  font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan-ink);margin-bottom:14px;
}
.kicker--navy{color:var(--navy)}
.kicker--green{color:var(--green-ink)}
.kicker--magenta{color:var(--magenta-ink)}
.h1{font-size:clamp(40px,6.4vw,78px)}
.h2{font-size:clamp(30px,4.4vw,52px)}
.h3{font-size:clamp(20px,2.4vw,27px)}
.lead{font-size:clamp(17px,1.5vw,20.5px);color:var(--ink-2);max-width:64ch;margin-top:18px}
.section{padding:clamp(64px,8vw,116px) 0;position:relative}
.section--paper{background:var(--paper)}
.section--cream{background:var(--cream)}
.section--navy{background:var(--navy);color:#D7DEEE}
.section--navy h2,.section--navy h3{color:var(--white)}
.section__head{max-width:66ch;margin-bottom:clamp(34px,4vw,56px)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:.005em;
  padding:14px 26px;border-radius:100px;border:2px solid transparent;
  transition:transform .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--cyan);color:var(--navy)}
.btn--primary:hover{background:#39BDEE}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:#00194A}
.btn--magenta{background:var(--magenta-ink);color:var(--white)}
.btn--ghost{border-color:var(--navy);color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:var(--white)}
.btn--sm{padding:10px 18px;font-size:14px}
.btn__arrow{font-size:15px;line-height:1}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(255,251,220,.92);
  -webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--hair);background:rgba(254,249,248,.94)}

/* Laufband mit Neuigkeiten, oberster Streifen im festen Kopf.
   Inhalt in content.js -> news. Zwei identische Kopien hintereinander,
   die Spur laeuft um genau eine Kopie (-50 %) und beginnt nahtlos neu.
   Tempo fest 36 px/s (app.js rechnet die Dauer aus der Breite).
   Haelt an bei Maus darueber und bei Tastaturfokus. Klappt beim
   Runterscrollen ein (html.ticker-off) und kommt beim Hochscrollen wieder,
   damit beim Lesen nichts im Augenwinkel laeuft. */
html.has-ticker{--ticker-h:32px}  /* am html, weil --head-h dort aufgeloest wird */
html.has-ticker.ticker-off{--ticker-vis:0px}
.ticker{
  height:var(--ticker-vis);display:flex;align-items:center;background:var(--navy);color:var(--white);
  font-family:var(--display);font-size:13px;font-weight:600;overflow:hidden;
  transition:height .3s var(--ease),visibility 0s linear 0s;
}
html.ticker-off .ticker{visibility:hidden;transition:height .3s var(--ease),visibility 0s linear .3s}
html.ticker-off .ticker__track{animation-play-state:paused}
.ticker__label{
  flex:none;display:inline-flex;align-items:center;height:19px;padding:0 9px;margin:0 6px 0 var(--pad);
  border-radius:999px;background:var(--magenta-ink);color:var(--white);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;position:relative;z-index:1;
}
.ticker__viewport{flex:1;align-self:stretch;overflow:hidden;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent)}
.ticker__track{display:flex;width:max-content;animation:ticker var(--ticker-dur,40s) linear infinite}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
.ticker__copy{display:flex;align-items:center;flex:none}
.ticker__item{display:inline-flex;align-items:center;gap:10px;padding:0 44px 0 0;white-space:nowrap;color:rgba(255,255,255,.92)}
.ticker__item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot,var(--yellow));flex:none}
.ticker__item b{color:var(--yellow);font-weight:700}
a.ticker__item:hover{color:var(--white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px}
.ticker :focus-visible{outline-color:var(--yellow);outline-offset:-2px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nav__in{display:flex;align-items:center;gap:28px;height:var(--nav-h);max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.nav__brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;color:var(--navy);font-size:16px;letter-spacing:-.01em}
.nav__brand img{height:30px;width:auto}
.nav__brand span small{display:block;font-size:11.5px;font-weight:600;color:var(--cyan-ink);letter-spacing:.09em;text-transform:uppercase;line-height:1.3}
.nav__links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav__links a{
  font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--navy-2);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav__links a:hover{color:var(--cyan-ink)}
.nav__links a.is-active{color:var(--navy);border-bottom-color:var(--cyan)}
.nav__cta{margin-left:6px}
.nav__links a.btn--primary{color:var(--navy)}  /* schlaegt die allgemeine Link-Farbe */
.nav__burger{display:none;margin-left:auto;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav__burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  background:var(--cream);position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + var(--ticker-h) + clamp(48px,7vw,96px)) 0 clamp(56px,7vw,96px);
}
.hero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero__kicker{
  display:inline-block;font-family:var(--display);font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--magenta-ink);
  border:2px solid var(--magenta-ink);border-radius:100px;padding:6px 15px;margin-bottom:26px;
}
.hero h1{font-size:clamp(42px,7.2vw,86px);letter-spacing:-.028em;line-height:.98}
.hero h1 em{font-style:normal;color:var(--cyan-display)}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero__chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--white);
  border-radius:100px;padding:9px 17px;font-family:var(--display);font-weight:600;
  font-size:14.5px;color:var(--navy);box-shadow:var(--shadow-sm);
}
.hero__chip i{width:8px;height:8px;border-radius:50%;background:var(--cyan);font-style:normal}
.hero__chip:nth-child(2) i{background:var(--magenta)}
.hero__chip:nth-child(3) i{background:var(--green)}
.hero__lead{font-size:clamp(17px,1.6vw,20.5px);color:var(--ink-2);max-width:52ch;margin-top:24px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero__note{margin-top:18px;font-size:14.5px;color:var(--ink-3)}
/* Eigener Beat fuer die Drei-Zentren-Kooperation */
.coop{
  margin-top:34px;background:var(--white);border-radius:16px;padding:20px 24px 22px;
  box-shadow:var(--shadow-sm);max-width:min(600px,100%);position:relative;overflow:hidden;
}
.coop::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--cyan) 0 33.33%,var(--green) 33.33% 66.66%,var(--magenta) 66.66% 100%)}
.coop__dots{display:inline-flex;gap:4px;margin-right:10px;vertical-align:-1px}
.coop__dots i{width:9px;height:9px;border-radius:50%;font-style:normal}
.coop__dots i:nth-child(1){background:var(--cyan)}
.coop__dots i:nth-child(2){background:var(--green)}
.coop__dots i:nth-child(3){background:var(--magenta)}
.coop__eyebrow{display:flex;align-items:center;font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.coop__title{font-family:var(--display);font-size:clamp(17px,1.6vw,20px);font-weight:800;color:var(--navy);letter-spacing:-.015em;margin-top:4px}
.coop__text{font-size:15.2px;color:var(--ink-2);margin-top:6px}
.hero__art{display:flex;justify-content:center;align-items:center}
.hero__art img{
  width:auto;max-width:100%;max-height:clamp(150px,34vw,420px);
  filter:drop-shadow(0 30px 50px rgba(0,33,92,.18));
}

/* farbige Grundlinie unter dem Hero, wie die Baender im PDF */
.rainbow{display:flex;height:9px}
.rainbow span{flex:1}
.rainbow span:nth-child(1){background:var(--cyan)}
.rainbow span:nth-child(2){background:var(--navy)}
.rainbow span:nth-child(3){background:var(--green)}
.rainbow span:nth-child(4){background:var(--yellow)}
.rainbow span:nth-child(5){background:var(--red)}
.rainbow span:nth-child(6){background:var(--magenta)}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(32px,5vw,76px);align-items:start}
.about__body p{margin-bottom:18px;max-width:62ch}
.about__body p:first-child{font-size:19.5px;color:var(--navy-2)}
.factcard{background:var(--white);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow-sm);border-top:5px solid var(--cyan)}
.factcard dl{display:grid;gap:16px}
.factcard dt{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.factcard dd{font-family:var(--display);font-size:17px;font-weight:700;color:var(--navy);margin-top:2px}

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.step{background:var(--white);border-radius:var(--radius);padding:26px 24px 28px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.step::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--cyan)}
.step:nth-child(2)::before{background:var(--navy)}
.step:nth-child(3)::before{background:var(--green)}
.step:nth-child(4)::before{background:var(--magenta)}
.step__n{font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--cyan-ink)}
.step:nth-child(2) .step__n{color:var(--navy)}
.step:nth-child(3) .step__n{color:var(--green-ink)}
.step:nth-child(4) .step__n{color:var(--magenta-ink)}
.step h3{font-size:18.5px;margin:10px 0 10px;line-height:1.16}
.step p{font-size:15.4px;color:var(--ink-2)}
.steps__note{grid-column:1 / -1;margin-top:6px;font-size:15.5px;color:var(--ink-2);max-width:70ch;padding-left:2px}

.halls{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px);margin-top:clamp(24px,3vw,40px)}
.hallcard{border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.hallcard__band{height:var(--band-h);display:flex;align-items:center;padding:0 22px;background:var(--track);color:var(--track-on);font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em}
.hallcard__body{padding:22px;flex:1;display:flex;flex-direction:column;gap:12px}
.hallcard__meta{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hallcard p{font-size:15.8px;color:var(--ink-2)}
.hallcard__link{margin-top:auto;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--track-ink);display:inline-flex;gap:7px;align-items:center}

/* =====================================================================
   PROGRAMME  (Nachbau der PDF-Seiten)
   ===================================================================== */
.programme{padding-bottom:0}
.prog__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}

/* Das Hall-Band, exakt wie die Kopfzeile im PDF */
.hallbar{
  display:flex;background:var(--track);min-height:52px;align-items:stretch;
  transition:background .3s var(--ease);border-radius:10px 10px 0 0;overflow:hidden;
  scrollbar-width:none;
}
.hallbar::-webkit-scrollbar{display:none}
.hallbar__btn{
  flex:1;display:flex;align-items:center;justify-content:center;padding:0 12px;
  font-family:var(--display);font-weight:800;font-size:clamp(15px,1.9vw,25px);letter-spacing:-.015em;
  color:var(--track-on);position:relative;transition:opacity .2s var(--ease);white-space:nowrap;
}
.hallbar__btn:hover{opacity:.78}
.hallbar__btn.is-active{color:var(--track-ink);background:var(--track-paper);border-radius:8px;margin:6px;box-shadow:0 2px 0 rgba(0,0,0,.05)}
.hallbar__btn.is-active:hover{opacity:1}

.prog__sheet{
  background:var(--track-paper);padding:clamp(22px,3vw,42px) 0 clamp(30px,4vw,52px);
  border-radius:0 0 10px 10px;transition:background .3s var(--ease);
}
.prog__sheetin{padding:0 clamp(14px,2.2vw,30px)}
/* Alle vier Schienen liegen im Dokument, nur die aktive ist sichtbar.
   [hidden] muss hier ausdruecklich gesetzt werden, weil Flex- und
   Grid-Regeln die Voreinstellung des Browsers sonst ueberschreiben. */
.prog__panel[hidden]{display:none}
.prog__hint{font-size:14.5px;color:var(--ink-3);margin-bottom:20px;display:flex;align-items:center;gap:8px}

/* Zeilen */
.row{display:grid;grid-template-columns:118px 1fr;gap:0 18px;align-items:start}
.row__time{
  font-family:var(--text);font-size:14px;font-weight:600;color:var(--cyan-ink);
  padding-top:3px;letter-spacing:.01em;white-space:nowrap;
}
[data-track="plenum"] .row__time{color:var(--navy)}
[data-track="workshops"] .row__time{color:var(--green-ink)}

.row--block{margin:clamp(34px,4vw,52px) 0 20px}
.row--block h3{font-size:clamp(20px,2.2vw,25px);color:var(--navy)}
.row--block p{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.8vw,21px);color:var(--navy);opacity:.9;margin-top:2px}

.row--single{padding:11px 0;border-bottom:1px solid var(--hair-2)}
.row--single .row__title{font-family:var(--display);font-size:17px;font-weight:700;color:var(--navy);line-height:1.2}
.row--single .who{font-size:15px;color:var(--ink-2);margin-top:2px}

/* Band-Zeilen: Pause, Lunch, Quiz */
.band{
  display:grid;grid-template-columns:118px 1fr auto;gap:0 18px;align-items:center;
  padding:8px 14px;margin:9px -14px;border-radius:5px;
  font-family:var(--text);font-size:14px;font-weight:600;
}
.band .band__t{font-family:var(--display);font-weight:700}
.band--break{background:var(--navy);color:#B9C6DF}
.band--break .band__t{color:var(--white)}
.band--lunch{background:var(--cyan);color:var(--navy)}
.band--lunch .band__t{color:var(--navy)}
.band--quiz{background:var(--green-soft);color:var(--navy-2)}
.band--quiz .band__t{color:var(--navy)}
.band__who{font-size:14px;text-align:right}

/* Session-Karte */
.sess{
  margin:clamp(20px,2.4vw,30px) 0;border-radius:10px;background:transparent;
  transition:background .2s var(--ease);
}
.sess__head{
  display:grid;grid-template-columns:118px 1fr;gap:0 18px;align-items:start;
  width:100%;text-align:left;padding:10px 14px 12px;margin:0 -14px;border-radius:8px;
  transition:background .2s var(--ease);
}
.sess__head:hover{background:var(--track-tint)}
.sess__code{
  display:inline-block;font-family:var(--display);font-weight:800;font-size:19px;
  color:var(--navy);margin-right:14px;
}
.sess__title{font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,22px);color:var(--navy);display:inline}
.sess__mods{font-size:15px;color:var(--ink-2);margin-top:7px}
.sess__mods b{font-family:var(--display);font-weight:700;color:var(--navy-2)}
.sess__open{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--track-ink);
}
.sess__open svg{width:13px;height:13px;flex:none}
.sess__open--row{display:flex;margin-top:7px}
.sess__head--row{width:100%;padding-top:11px;padding-bottom:12px}

/* Keynote-Band, hellcyan wie im PDF */
.keyrow{
  display:grid;grid-template-columns:118px 1fr auto;gap:0 18px;align-items:center;
  background:var(--cyan-soft);padding:9px 14px;margin:6px -14px;border-radius:5px;
}
[data-track="plenum"] .keyrow{background:var(--navy-tint)}
.keyrow__label{font-size:14.5px;color:var(--navy-2)}
.keyrow__label b{font-family:var(--display);font-weight:700;color:var(--navy)}
.keyrow__who{font-size:14.5px;font-weight:600;color:var(--navy);text-align:right;white-space:nowrap}
.keyrow__tag{
  display:inline-block;font-family:var(--display);font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--white);background:var(--navy);
  border-radius:3px;padding:2px 7px;margin-right:9px;vertical-align:1px;
}
[data-track="plenum"] .keyrow__tag{background:var(--cyan)}

/* Beitragszeilen */
.itemlist{margin-top:9px}
.item{
  display:grid;grid-template-columns:118px 62px 1fr auto;gap:0 14px;align-items:baseline;
  padding:7px 14px;margin:0 -14px;border-radius:5px;transition:background .18s var(--ease);
}
.item:hover{background:var(--track-tint)}
.item__code{font-family:var(--text);font-size:14px;font-weight:600;color:var(--navy-2)}
.item__title{font-size:15.4px;color:var(--navy-2)}
.item__who{font-size:14.6px;color:var(--navy-2);text-align:right;white-space:nowrap}
.tbd{color:var(--magenta-ink);font-weight:600}

/* Workshop-Raster */
.wsgrid{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wsgrid table{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;table-layout:fixed}
/* fixed: alle fuenf Raeume gleich breit, egal wie lang der Workshoptitel ist */
.wsgrid th{
  font-family:var(--display);font-weight:700;font-size:16px;color:var(--green-ink);
  text-align:left;padding:0 0 16px 16px;
}
.wsgrid th:first-child{width:118px;padding-left:0}
.wsgrid td{padding:0;vertical-align:top}
.ws__bandrow td{padding:0}
.ws__band{
  display:grid;grid-template-columns:118px 1fr;gap:0 18px;align-items:center;
  padding:7px 14px;margin:5px 0;border-radius:5px;font-size:14px;font-weight:600;
}
.ws__band--sess{background:var(--green-mid);color:var(--navy)}
.ws__band--sess .band__t{font-family:var(--display);font-weight:700;color:var(--navy)}
.ws__band--break{background:var(--navy);color:#B9C6DF}
.ws__band--break .band__t{color:var(--white);font-family:var(--display);font-weight:700}
.ws__band--lunch{background:var(--cyan);color:var(--navy)}
.ws__band--lunch .band__t{color:var(--navy);font-family:var(--display);font-weight:700}
.ws__cell{
  padding:18px 16px 20px;min-height:112px;border-radius:6px;margin:0 4px;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
}
.ws__cell--on{background:var(--green-tint)}
.ws__cell--off{background:transparent;border:1px dashed var(--green-soft)}
.ws__topic{font-family:var(--display);font-weight:700;font-size:16px;color:var(--navy)}
.ws__instr{font-size:13.6px;color:var(--ink-2)}
.ws__free{font-size:13.4px;color:var(--ink-3)}

/* Sponsoren-Workshop: stehender Spaltentitel und Untertitel in der Zelle */
.wsgrid__note{
  display:block;font-family:var(--text);font-size:12.5px;font-weight:600;
  color:var(--ink-3);letter-spacing:0;margin-top:3px;max-width:22ch;line-height:1.3;
}
.ws__sub{display:block;font-size:12.6px;color:var(--ink-2);margin-top:4px;line-height:1.35}

/* Baender, hinter denen ein Programm liegt */
.band--open{
  width:100%;text-align:left;cursor:pointer;
  transition:filter .18s var(--ease),transform .18s var(--ease);
}
.band--open:hover{filter:brightness(1.06)}
.band--open .band__t{display:inline-flex;align-items:center;gap:8px}
.band--open .band__t svg{width:13px;height:13px;flex:none}

.prog__foot{height:14px;background:var(--magenta);border-radius:0 0 10px 10px;margin-top:-10px}

/* =====================================================================
   DRAWER
   ===================================================================== */
.backdrop{position:fixed;inset:0;background:rgba(14,27,58,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:80;opacity:0;animation:fade .22s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(620px,100%);z-index:90;
  background:var(--paper);box-shadow:var(--shadow);overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);animation:slide .32s var(--ease) forwards;
}
@keyframes slide{to{transform:translateX(0)}}
.drawer__band{height:12px;background:var(--track)}
.drawer__close{
  position:absolute;top:26px;right:22px;width:38px;height:38px;border-radius:50%;
  background:var(--white);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--navy);z-index:2;
}
.drawer__in{padding:clamp(26px,4vw,44px)}
.drawer__eyebrow{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--track-ink)}
.drawer h3{font-size:clamp(24px,3.2vw,34px);margin:10px 0 6px}
.drawer__time{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink-2)}
.drawer__where{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:var(--track-tint);
  border-radius:100px;padding:7px 15px;font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--navy);
}
.drawer__where i{width:8px;height:8px;border-radius:50%;background:var(--track);font-style:normal}
.drawer__mods{margin-top:20px;font-size:16px}
.drawer__mods b{font-family:var(--display);color:var(--navy)}
.dsec{margin-top:30px}
.dsec__h{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.dkey{background:var(--cyan-soft);border-radius:10px;padding:18px 20px}
[data-track="plenum"] .dkey{background:var(--navy-tint)}
.dkey__mode{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--white);background:var(--navy);border-radius:3px;padding:2px 7px;display:inline-block;margin-bottom:9px}
[data-track="plenum"] .dkey__mode{background:var(--cyan)}
.dkey h4{font-size:18.5px;line-height:1.3}
.dkey__who{margin-top:8px;font-weight:600;color:var(--navy-2)}
.ditem{display:grid;grid-template-columns:64px 1fr;gap:0 14px;padding:13px 0;border-bottom:1px solid var(--hair-2)}
.ditem:last-child{border-bottom:none}
.ditem__code{font-size:14px;font-weight:700;color:var(--navy)}
.ditem__title{display:block;font-size:16px;color:var(--navy-2)}
.ditem__who{display:block;font-size:14.6px;color:var(--ink-2);margin-top:4px}
.dparallel{background:var(--white);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow-sm);display:flex;gap:14px;align-items:flex-start}
.dparallel + .dparallel{margin-top:10px}
.dparallel__dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none}
.dparallel h5{font-family:var(--display);font-size:15.5px;font-weight:700;color:var(--navy)}
.dparallel p{font-size:14.6px;color:var(--ink-2);margin-top:2px}

/* =====================================================================
   VENUE
   ===================================================================== */
/* Bildkopf */
.vhero{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.vhero img{width:100%;height:clamp(300px,44vw,560px);object-fit:cover;object-position:center}
.vhero__panel{
  position:absolute;left:clamp(14px,2.6vw,38px);bottom:clamp(14px,2.6vw,38px);
  background:var(--cream);border-radius:16px;padding:clamp(20px,2.6vw,34px) clamp(22px,3vw,40px);
  max-width:min(620px,80%);box-shadow:0 20px 50px -26px rgba(0,33,92,.6);
}
.vhero__panel .kicker{margin-bottom:9px}
.vhero__panel h2{font-size:clamp(26px,3.6vw,46px)}
.vhero__cap{font-size:14px;color:var(--ink-3);margin:12px 2px 0}

/* Einleitung */
.venue__intro{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  margin:clamp(34px,5vw,64px) 0 clamp(30px,4vw,52px);align-items:start;
}
.venue__intro .lead{margin-top:0;font-size:clamp(19px,1.9vw,24px);color:var(--navy);max-width:26ch;line-height:1.32;font-family:var(--display);font-weight:700;letter-spacing:-.015em}
.venue__intro p + p{margin-top:15px}
.venue__intro .venue__body p{color:var(--ink-2);max-width:60ch}

/* Raumkarten mit Foto */
.venue__rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.vroom{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.vroom__img{aspect-ratio:4/3;overflow:hidden;background:var(--navy-tint)}
.vroom__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.vroom:hover .vroom__img img{transform:scale(1.04)}
.vroom__band{height:6px;background:var(--track)}
.vroom__in{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.vroom h3{font-size:21px;color:var(--track-display)}
.vroom p{font-size:15.6px;color:var(--ink-2)}
.vroom__fact{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--hair-2);
  font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);
}

/* Plan-Ueberleitung */
/* Anreise */
.venue__travel{
  margin-top:clamp(44px,6vw,84px);display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(24px,4vw,60px);align-items:start;
}
.travel__h{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.venue__travelintro{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,22px);line-height:1.32;letter-spacing:-.015em;color:var(--navy);max-width:26ch}
.travel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 30px;align-content:start}
.travel div{border-top:3px solid var(--navy);padding-top:12px}
.travel dt{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.travel dd{font-size:15.6px;color:var(--navy-2);margin-top:6px}
.venue__credit{margin-top:clamp(28px,4vw,44px);font-size:13.4px;color:var(--ink-3)}

/* =====================================================================
   CENTRES
   ===================================================================== */
.centres{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:clamp(16px,2.4vw,28px);align-items:stretch}
.centre{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.centre__photo{aspect-ratio:16/10;background:var(--navy-tint);position:relative;overflow:hidden}
.centre__photo img{width:100%;height:100%;object-fit:cover}
.centre--host .centre__photo{aspect-ratio:16/9}
.ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  color:var(--ink-3);font-size:13.4px;text-align:center;padding:18px;background:
    repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(0,33,92,.035) 9px,rgba(0,33,92,.035) 18px);
}
.ph svg{width:30px;height:30px;opacity:.4}
.centre__in{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.centre__city{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:800;color:var(--navy);letter-spacing:-.02em}
.centre--host .centre__city{color:var(--cyan-display)}
.centre__role{
  align-self:flex-start;font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;padding:4px 10px;border-radius:100px;margin-bottom:12px;
  background:var(--navy-tint);color:var(--navy);
}
.centre--host .centre__role{background:var(--cyan-ink);color:var(--white)}
.centre__inst{font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--navy);margin-top:8px}
.centre__dept{font-size:14.8px;color:var(--ink-2);margin-top:4px}
.centre__lead{margin-top:auto;padding-top:16px;font-size:15px;color:var(--navy-2)}
.centre__lead b{font-family:var(--display);color:var(--navy)}

/* =====================================================================
   TEAM
   ===================================================================== */
.teamgroup + .teamgroup{margin-top:clamp(34px,4vw,54px)}
.teamgroup__h{
  font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);padding-bottom:12px;border-bottom:2px solid var(--navy);margin-bottom:24px;
}
/* Drei Spalten, eine je Zentrum, links nach rechts alphabetisch.
   Die Breiten stehen inline (grid-template-columns aus content.js →
   columnsPerCentre), damit Berlin doppelt breit laufen kann. */
.teamcols{--team-row:78px;display:grid;gap:0 34px;align-items:start}
.teamcol + .teamcol{position:relative}
.teamcol + .teamcol::before{
  content:"";position:absolute;left:-17px;top:0;bottom:0;width:1px;background:var(--hair);
}
.teamcol__h{
  font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan-ink);display:flex;align-items:center;gap:8px;
  height:20px;margin-bottom:18px;   /* feste Hoehe: alle Listen starten gleich */
}
.teamcol__h::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none}
.teamcol--kiel .teamcol__h{color:var(--green-ink)}
.teamcol--kiel .teamcol__h::before{background:var(--green)}
.teamcol--aachen .teamcol__h{color:var(--magenta-deep)}
.teamcol--aachen .teamcol__h::before{background:var(--magenta)}
/* Festes Zeilenraster. Alle Spalten und auch Berlins zwei Unterspalten
   benutzen dieselbe Zeilenhoehe, deshalb stehen die Namen ueber die ganze
   Tabelle auf einer Linie, egal ob ein Name ein- oder zweizeilig bricht.
   --rows kommt aus app.js (Personen je Unterspalte, aufgerundet), das Raster
   fuellt spaltenweise, die alphabetische Reihenfolge bleibt erhalten. */
.teamcol__list{
  display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(var(--rows,1),var(--team-row));
  grid-auto-columns:minmax(0,1fr);column-gap:30px;
}
.person{display:flex;gap:13px;align-items:center;min-width:0}
.person__av{
  width:50px;height:50px;border-radius:50%;flex:none;overflow:hidden;
  /* Flaeche im -ink-Ton, nicht im Bandton: weisse Initialen auf dem hellen
     Markenton erreichen nur 2,7:1, auf dem -ink-Ton ueber 5:1. */
  background:var(--cyan-ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:16px;color:var(--white);letter-spacing:-.02em;
}
.person__av img{width:100%;height:100%;object-fit:cover}
.person--kiel .person__av{background:var(--green-ink)}
.person--aachen .person__av{background:var(--magenta-deep)}
.person__name{font-family:var(--display);font-weight:700;font-size:16px;color:var(--navy);line-height:1.25}
.team__hint{margin-top:14px;font-size:15px;color:var(--ink-3)}
.person__in{min-width:0}
/* Farbe je Zentrum wie beim Avatar. Ruhezustand: Markenton als Schrift auf
   hellem Grund. Hover: umgekehrt. Beide Richtungen erfuellen WCAG AA 4.5:1,
   deshalb steht unter weisser Schrift der dunklere Ton, nicht die Bandfarbe. */
.cvbtn{
  margin-top:5px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan-ink);background:var(--cyan-tint);border-radius:999px;padding:5px 13px;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.cvbtn::after{content:"→";font-size:12px;letter-spacing:0;transition:transform .18s var(--ease)}
.cvbtn:hover{background:var(--cyan-ink);color:var(--white)}
.cvbtn:hover::after{transform:translateX(2px)}
.person--kiel .cvbtn{color:var(--green-ink);background:var(--paper-green)}
.person--kiel .cvbtn:hover{background:var(--green-ink);color:var(--white)}
.person--aachen .cvbtn{color:var(--magenta-deep);background:var(--magenta-tint)}
.person--aachen .cvbtn:hover{background:var(--magenta-deep);color:var(--white)}

/* --- CV-Panel (gleiches Geruest wie das Session-Panel) --- */
.drawer--cv{width:min(560px,100%)}
.cvhead{display:flex;gap:20px;align-items:flex-start;padding-right:34px} /* Platz fuer den Schliessen-Knopf */
.person__av--lg{width:84px;height:84px;font-size:26px;background:var(--track)}
.cvhead h3{font-size:clamp(22px,2.8vw,29px);margin:6px 0 4px}
.cvhead__role{font-size:16px;color:var(--ink-2);line-height:1.4}
.cvhead__org{font-size:14.6px;color:var(--ink-3);margin-top:4px}
.cvbody{margin-top:26px;padding-top:24px;border-top:2px solid var(--track)}
.cvbody p{font-size:17px;line-height:1.65;color:var(--navy-2)}
.cvbody p + p{margin-top:14px}
.cvbody--pending p{
  background:var(--track-tint);border-radius:10px;padding:18px 20px;
  color:var(--ink-2);font-style:italic;
}

/* =====================================================================
   SPONSORS
   ===================================================================== */
.tier + .tier{margin-top:34px}
.tier__h{font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta-ink);margin-bottom:16px}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.logo{
  background:var(--white);border-radius:var(--radius-sm);height:118px;display:flex;align-items:center;justify-content:center;
  padding:20px 26px;box-shadow:var(--shadow-sm);
}
.logo img{max-height:70px;max-width:100%;width:auto;object-fit:contain}
.logo span{font-family:var(--display);font-weight:700;font-size:16px;color:var(--navy);text-align:center}
.tier__empty{
  border:1px dashed var(--hair);border-radius:var(--radius-sm);padding:26px;text-align:center;
  color:var(--ink-3);font-size:14.8px;background:rgba(255,255,255,.5);
}
.sponsorcta{
  margin-top:clamp(30px,4vw,48px);background:var(--navy);color:#CBD5E8;border-radius:var(--radius);
  padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
}
.sponsorcta h3{font-size:clamp(21px,2.4vw,28px);color:var(--white)}
.sponsorcta p{margin-top:8px;max-width:56ch;font-size:16px}

/* =====================================================================
   REGISTRATION
   ===================================================================== */
.reg__grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(28px,4vw,64px);align-items:start}
.fees{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.fees__head{display:grid;grid-template-columns:1fr 108px 108px;gap:10px;padding:16px 24px;background:var(--navy);color:var(--white)}
.fees__head span{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.fees__head span:not(:first-child){text-align:right}
.fee{display:grid;grid-template-columns:1fr 108px 108px;gap:10px;padding:17px 24px;border-bottom:1px solid var(--hair-2);align-items:center}
.fee:last-child{border-bottom:none}
.fee__g{font-family:var(--display);font-weight:700;font-size:16px;color:var(--navy)}
.fee__e,.fee__r{text-align:right;font-family:var(--display);font-weight:700;font-size:17px}
.fee__e{color:var(--magenta-ink)}
.fee__r{color:var(--ink-3)}
.fees__note{padding:16px 24px;background:var(--cyan-tint);font-size:14.2px;color:var(--ink-2)}
.regside .earlybird{
  background:var(--magenta-deep);color:var(--white);border-radius:var(--radius);padding:22px 24px;
  font-family:var(--display);font-weight:700;font-size:17px;line-height:1.35;
}
.regside .btn{margin-top:18px;width:100%;justify-content:center}
.regside__after{font-size:14.2px;color:var(--ink-3);margin-top:12px;text-align:center}

/* =====================================================================
   DOWNLOADS
   ===================================================================== */
.dls{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.dl{
  display:flex;align-items:center;gap:16px;background:var(--white);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-sm);transition:transform .18s var(--ease);
}
.dl:hover{transform:translateY(-3px)}
.dl__ic{width:42px;height:42px;border-radius:10px;background:var(--cyan-ink);color:var(--white);display:flex;align-items:center;justify-content:center;flex:none;font-family:var(--display);font-weight:800;font-size:12px}
.dl__t{display:block;font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--navy)}
.dl__m{display:block;font-size:14px;color:var(--ink-3);margin-top:2px}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{background:var(--navy);color:#A9B7D3;padding:clamp(46px,6vw,78px) 0 34px}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
.foot__brand{display:flex;gap:14px;align-items:flex-start}
.foot__brand img{width:38px;flex:none}
.foot__brand h3{color:var(--white);font-size:19px}
.foot__brand p{font-size:14.6px;margin-top:8px;max-width:46ch;line-height:1.55}
.foot h5{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.foot a:hover{color:var(--white)}
.foot ul{list-style:none;display:grid;gap:8px;font-size:15px}
.foot__save{
  margin-top:clamp(34px,4vw,52px);padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;font-size:14px;
}
.foot__save strong{font-family:var(--display);color:var(--yellow);font-size:15px}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Drei Spalten tragen bis hier. Darunter wird die schmalste Spalte so eng,
   dass der laengste Name dreizeilig bricht und das Zeilenraster sprengt. */
@media (max-width:999px){
  /* Ab hier stapeln die drei Zentren untereinander. Jedes Zentrum hat dann die
     volle Breite, deshalb fuellen alle Listen zeilenweise so viele Spalten wie
     hineinpassen. Alphabetisch wird dabei von links nach rechts gelesen, was
     bei einem breiten Block die natuerliche Leserichtung ist. */
  .teamcols{grid-template-columns:1fr !important;gap:38px 0}
  .teamcol + .teamcol::before{display:none}
  .teamcol + .teamcol{padding-top:34px;border-top:1px solid var(--hair)}
  .teamcol__list{
    grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    grid-auto-rows:var(--team-row);
  }
}

@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .hero__grid{grid-template-columns:1fr;gap:34px}
  .hero__art{order:-1;justify-content:flex-start}
  .hero__art img{max-height:170px}
  .about__grid,.reg__grid,.venue__intro,.venue__travel{grid-template-columns:1fr}
  .venue__intro .lead,.venue__travelintro{max-width:38ch}
  .centres{grid-template-columns:1fr 1fr}
  .centre--host{grid-column:1 / -1}
}
@media (max-width:860px){
  .nav__links{
    position:fixed;inset:var(--head-h) 0 auto;background:var(--paper);flex-direction:column;align-items:stretch;
    gap:0;padding:12px var(--pad) 24px;border-bottom:1px solid var(--hair);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);
  }
  .nav.is-open .nav__links{opacity:1;transform:none;pointer-events:auto}
  .nav__links a{padding:13px 0;border-bottom:1px solid var(--hair-2)}
  .nav__cta{margin:14px 0 0;justify-content:center}
  .nav__burger{display:flex}
  /* Rechtsseite hat kein Burger-Menue: der einzelne Zurueck-Link bleibt inline. */
  .nav--simple .nav__links{
    position:static;flex-direction:row;align-items:center;background:none;border:none;
    padding:0;margin-left:auto;transform:none;opacity:1;pointer-events:auto;
  }
  .nav--simple .nav__links a{padding:6px 0;border-bottom:none;white-space:nowrap}
  .nav__brand{font-size:14.5px;max-width:calc(100% - 60px)}
  .nav__brand img{height:26px}
  .nav__brand span small{font-size:10.5px;letter-spacing:.07em}
  .halls,.venue__rooms{grid-template-columns:1fr}
  .vhero__panel{position:static;max-width:none;border-radius:0}
  .vhero{box-shadow:var(--shadow-sm)}
  .centres{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .sponsorcta{grid-template-columns:1fr}
  .row,.sess__head{grid-template-columns:88px 1fr;gap:0 12px}
  .band,.keyrow{grid-template-columns:88px 1fr;gap:0 12px}
  .band__who,.keyrow__who{grid-column:2;text-align:left;margin-top:2px}
  .item{grid-template-columns:56px 1fr;gap:0 10px;margin-left:88px;padding-left:0}
  .item__code{grid-column:1}
  .item__title{grid-column:2}
  .item__who{grid-column:2;text-align:left;margin-top:2px;white-space:normal;color:var(--ink-2)}
  .fees__head,.fee{grid-template-columns:1fr 78px 78px}

  /* Workshop-Raster: auf dem Handy keine Tabelle mit Seitwaerts-Scroll,
     sondern gestapelte Karten unter der jeweiligen Session. */
  .wsgrid{overflow:visible}
  .wsgrid table{min-width:0;width:100%;table-layout:auto}
  .wsgrid thead{display:none}
  .wsgrid tbody,.wsgrid tr,.wsgrid td{display:block;width:auto}
  .ws__spacer{display:none}
  .ws__cell--off{display:none}
  .ws__cell{margin:8px 0 0;min-height:0;padding:16px 18px;gap:8px}
  .ws__cell--on::before{
    content:attr(data-room);font-family:var(--display);font-size:11px;font-weight:800;
    letter-spacing:.13em;text-transform:uppercase;color:var(--green-ink);
  }
  .ws__band{grid-template-columns:88px 1fr;gap:0 12px}
}
@media (max-width:620px){
  /* Erst hier lohnt Einspaltigkeit: darueber nutzen kurze Karten die Breite besser */
  .steps{grid-template-columns:1fr}
  .teamcols{--team-row:74px}
  .teamcol__list{grid-template-columns:1fr}
  /* Elf Logos untereinander waeren zu viel Scrollweg */
  .logos{grid-template-columns:repeat(2,1fr);gap:12px}
  .logo{height:92px;padding:14px 16px}
  .logo img{max-height:52px}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav__brand{font-size:13.5px}
  .nav__brand span small{display:none}
  .item{margin-left:0}
  .row__time{font-size:13px}
  /* Vier Reiter passen bei 375px nicht nebeneinander: 2x2 statt Seitwaerts-Scroll,
     sonst uebersieht man den vierten. */
  .hallbar{display:grid;grid-template-columns:1fr 1fr;overflow:visible;padding:5px;gap:2px}
  .hallbar__btn{font-size:14px;padding:11px 8px;border-radius:7px}
  .hallbar__btn.is-active{margin:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  /* Laufband steht still: ohne das wuerde die Endlos-Animation mit
     0,01 ms flackern. Zweite Kopie weg, Meldungen nebeneinander. */
  .ticker__track{animation:none !important;transform:none !important}
  .ticker__copy[aria-hidden="true"]{display:none}
  .ticker__viewport{overflow-x:auto}
}

/* ---------- Print ---------- */
@media print{
  .nav,.drawer,.backdrop,.hero__actions{display:none}
  .section{padding:18px 0}
  body{background:var(--white)}
}

/* =====================================================================
   RECHTSSEITE
   ===================================================================== */
.legal{padding-top:calc(var(--head-h) + clamp(40px,6vw,86px))}
.legal h1{margin-bottom:6px}
.legal h2{font-size:19px;margin:34px 0 10px;color:var(--navy)}
.legal p{max-width:70ch;margin-bottom:12px}
.legal a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.legal hr{border:none;border-top:1px solid var(--hair);margin:clamp(44px,6vw,72px) 0}
.legal .lead{margin-bottom:6px}

/* =====================================================================
   ZUGAENGLICHKEIT UND GERAETE
   ===================================================================== */

/* Sichtbarer Tastaturfokus. Maus- und Touch-Nutzung bleibt unberuehrt. */
:focus-visible{
  outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px;
}
.band--break :focus-visible,.foot :focus-visible,.sponsorcta :focus-visible{outline-color:var(--yellow)}

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzung */
.skiplink{
  position:absolute;left:12px;top:-70px;z-index:200;
  background:var(--navy);color:var(--white);padding:12px 20px;border-radius:0 0 10px 10px;
  font-family:var(--display);font-weight:700;font-size:15px;transition:top .18s var(--ease);
}
.skiplink:focus{top:0}

/* Ohne JavaScript bleiben wenigstens die Eckdaten stehen */
.noscript{
  background:var(--navy);color:#DCE4F2;padding:18px var(--pad);font-size:15.5px;
  text-align:center;line-height:1.5;
}
.noscript strong{color:var(--white);font-family:var(--display)}
.noscript a{color:var(--cyan);text-decoration:underline}

/* Randlose Geraete: Inhalt nicht unter Notch oder Home-Indikator schieben */
@supports (padding: max(0px)){
  .nav__in{padding-left:max(var(--pad), env(safe-area-inset-left));padding-right:max(var(--pad), env(safe-area-inset-right))}
  .wrap{padding-left:max(var(--pad), env(safe-area-inset-left));padding-right:max(var(--pad), env(safe-area-inset-right))}
  .drawer{padding-bottom:env(safe-area-inset-bottom)}
  .foot{padding-bottom:max(34px, env(safe-area-inset-bottom))}
}