/* Inter, selbst gehostet — dieselben vier Schnitte, die auch
   www.eurospine.org ausliefert. Kein Google-Fonts-Aufruf: Die Seite soll
   keine Besucher-IPs an einen US-Dienst geben, aus demselben Grund, aus dem
   das Hosting nicht bei Cloudflare liegt. */
@font-face { font-family: Inter; font-style: normal; font-weight: 300;
             font-display: swap; src: url('font/Inter-Light.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 400;
             font-display: swap; src: url('font/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500;
             font-display: swap; src: url('font/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700;
             font-display: swap; src: url('font/Inter-Bold.woff2') format('woff2'); }

/* EUROSPINE E-Poster Library 2026
   Werte gemessen an www.eurospine.org, 20.09.2026.
   Abweichungen zum CD-Manual sind bewusst: massgeblich ist die Website,
   weil die Library daneben steht. */

:root {
  --es-blue: #242f62;
  --es-red: #e40134;        /* nur Alarm und Fehler, nie als CTA */
  --es-button: #4a5aa9;     /* ES Button Default aus der Web-Palette */
  --es-button-hover: #4f62d1;
  --text: #444446;
  --text-soft: #747579;
  --bg: #ffffff;
  --band: #f2f3f5;
  --footer: #edeff2;
  --chip: #dde0e7;
  --rule: #e1e6ed;
  --link: #366fe4;
  --es-light: #ecf2f6;      /* ES Light grey: Flaechen, Boxen */
  --es-soft-blue: #bfcaff;  /* ES Soft blue: Highlight-Rechteck */

  --container: 1220px;
  --pad: 40px;
  --radius-card: 12px;
  --radius-pill: 20px;

  /* Highlight-Palette aus dem CD-Manual, fuer die Duotone-Flaechen */
  --es-mint: #baffc7;
  --es-sky: #9fd7ff;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--es-blue); font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: 48px; line-height: 1.1; letter-spacing: -.5px; }
h2 { font-size: 32px; line-height: 1.2; }
h3 { font-size: 24px; line-height: 1.2; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Der Seitenrand nimmt den groesseren von zwei Werten: unseren eigenen und
   das, was das Geraet an seinen Raendern freihaelt. Auf einem Telefon mit
   gekrummtem Display beginnt der Text sonst in der Woelbung. */
.container {
  max-width: var(--container); margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

/* ---------- Kopf ---------- */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
}
.site-header .container {
  display: flex; align-items: center; gap: 24px;
  min-height: 72px;
}
.logo { display: block; flex: none; }
.logo img { display: block; height: 44px; width: auto; }
.site-title { font-size: 17px; font-weight: 700; color: var(--es-blue); }
.site-header .spacer { flex: 1; }
.back-link { font-size: 16px; font-weight: 500; }

.meeting-band { background: var(--es-blue); color: #fff; }
.meeting-band .container {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding-top: 14px; padding-bottom: 14px;
  font-size: 15px; letter-spacing: .3px;
}
.meeting-band strong { font-weight: 700; }
.band-link { color: #fff; text-decoration: none; }
.band-link:hover { color: #fff; text-decoration: underline; }
.band-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.meeting-band .muted { color: #bfcaff; }

.breadcrumb {
  font-size: 15px; color: var(--text-soft);
  padding: 20px 0 8px;
}
.breadcrumb a { color: var(--text-soft); }
.breadcrumb span { margin: 0 8px; }

/* ---------- Kategorie-Label ---------- */

.eyebrow {
  font-size: 15px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text);
  margin: 0 0 6px;
}

/* ---------- Filter ---------- */

.filters { padding: 8px 0 32px; border-bottom: 1px solid var(--rule); }
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.filter-row:last-child { margin-bottom: 0; }
/* Category Caps aus dem CD: fett, Versalien, ES Blue. */
.filter-label {
  font-size: 15px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--es-blue);
  width: 100%; margin-bottom: 2px;
}

.chip {
  border: 1px solid transparent; background: var(--chip); color: var(--text);
  border-radius: var(--radius-pill); padding: 7px 16px;
  font: inherit; font-size: 16px; line-height: 1.2; cursor: pointer;
}
.chip:hover { border-color: var(--es-blue); }
.chip[aria-pressed="true"] { background: var(--es-blue); color: #fff; }

.search {
  flex: 1; min-width: 260px;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  padding: 10px 18px; font: inherit; font-size: 17px; color: var(--text);
}
.search:focus { outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent; }

/* Eigener Look statt Systemfeld: gleicher Rahmen und Radius wie Suche und
   Chips, eigener Pfeil. appearance:none nimmt dem Feld das Aussehen, nicht
   die Bedienung — auf dem Telefon oeffnet weiterhin das Systemrad. */
select.filter-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  padding: 12px 46px 12px 18px; font: inherit; font-size: 17px;
  color: var(--text); background-color: #fff; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23242f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
select.filter-select:hover { border-color: var(--es-blue); }

/* Das eigene Auswahlfeld. Es steht an der Stelle des <select>, sieht aus wie
   Suche und Chips und zeichnet auch die geoeffnete Liste selbst — das native
   Feld kann das nicht, dort gehoert das Menue dem Betriebssystem. Das
   Original bleibt im Dokument und traegt den Zustand weiter. */
/* Das native Feld bleibt fuer Formular und Zustand stehen, sichtbar ist es
   nicht. Der Selektor nennt beide Klassen: Mit nur .nur-fuer-code gewann die
   Gestaltungsregel select.filter-select, und Mindesthoehe plus Innenabstand
   blaehten das angeblich versteckte Feld auf 160 px auf — die Seite war
   dadurch 511 statt 375 px breit und liess sich nach rechts schieben. */
select.filter-select.nur-fuer-code,
.nur-fuer-code {
  position: absolute; width: 1px; height: 1px; min-height: 0;
  padding: 0; margin: -1px; border: 0; background: none;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  appearance: none; -webkit-appearance: none;
}
.wahl { position: relative; display: inline-block; }
.wahl-knopf {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 12px 46px 12px 18px;
  font: inherit; font-size: 17px; color: var(--text); text-align: left;
  background-color: #fff; border: 1px solid var(--rule);
  border-radius: var(--radius-pill); cursor: pointer; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23242f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.wahl-knopf { -webkit-tap-highlight-color: transparent; }
.wahl-knopf:hover { border-color: var(--es-button); }
.wahl-knopf:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.wahl-knopf[aria-expanded="true"] {
  border-color: var(--es-blue); box-shadow: inset 0 0 0 1px var(--es-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 8l6-6 6 6' fill='none' stroke='%23242f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Die offene Liste im CD: weisse Box mit ES-grey-Rahmen, Eintraege durch
   ES-Light-grey-Linien getrennt, der gewaehlte als Highlight-Rechteck in
   ES Soft blue — ohne Rundung, wie das CD es fuer Hervorhebungen vorgibt.
   Hoehe und Richtung setzt app.js nach dem Platz im Fenster; ohne Skript
   gilt 60vh nach unten. */
.wahl-liste {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  min-width: 100%; margin: 0; padding: 6px 0; list-style: none;
  background: #fff; border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(36, 47, 98, .18);
  max-height: 60vh; overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--es-soft-blue) transparent;
}
.wahl-liste.nach-oben { top: auto; bottom: calc(100% + 6px); box-shadow: 0 -16px 40px rgba(36, 47, 98, .18); }
.wahl-liste::-webkit-scrollbar { width: 8px; }
.wahl-liste::-webkit-scrollbar-thumb { background: var(--es-soft-blue); border-radius: 4px; }
.wahl-eintrag {
  display: flex; align-items: center; min-height: 48px;
  padding: 10px 18px; border-top: 1px solid var(--es-light);
  font-size: 17px; white-space: nowrap; cursor: pointer; color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.wahl-eintrag:first-child { border-top: 0; }
.wahl-eintrag:hover, .wahl-eintrag.ist-aktiv { background: var(--es-light); }
.wahl-eintrag[aria-selected="true"] { background: var(--es-soft-blue); font-weight: 700; color: var(--es-blue); }
.wahl-eintrag[aria-selected="true"]::before {
  content: "✓"; margin-right: 10px; font-weight: 700;
}
/* Windows-Kontrastmodus: Hintergruende fallen dort weg. Ohne Umriss waeren
   Auswahl und Fokus in der Liste unsichtbar, und Knoepfe mit border: 0
   stuenden als blosser Text da. Nur die markierten Eintraege bekommen einen
   Rahmen — an allen sah die Liste aus wie ein Gitter. */
@media (forced-colors: active) {
  .wahl-eintrag.ist-aktiv { outline: 2px solid Highlight; outline-offset: -2px; }
  .wahl-eintrag[aria-selected="true"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}
.wahl-eintrag:not([aria-selected="true"])::before {
  content: ""; margin-right: 10px; width: 1ch; display: inline-block;
}

@media (pointer: coarse) {
  .wahl-knopf { min-height: clamp(56px, 14vmin, 68px); font-size: clamp(19px, 5.1vmin, 24px); }
  .wahl-eintrag { min-height: clamp(52px, 13vmin, 64px); font-size: clamp(18px, 5vmin, 23px); }
}
@media (pointer: coarse), (max-width: 600px) {
  .wahl { display: block; }
  .wahl-knopf { padding-right: 38px; background-position: right 14px center; }
}
select.filter-select:focus-visible {
  outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent;
}

.result-count { font-size: 16px; color: var(--text-soft); padding: 20px 0 4px; }

/* Die Chips waren bis zum 02.10.2026 der Weg fuer den grossen Schirm. Mit
   acht echten Themen brauchten sie dort drei Zeilen und 168 px vor der
   Liste — jetzt gilt das Auswahlmenue ueberall, die Regel dazu steht weiter
   unten bei den Vorlauf-Kuerzungen. */

/* ---------- Karten ---------- */

/* Eine Spalte. Drei Kacheln nebeneinander machen aus einem Poster eine
   Briefmarke — auf dem Telefon gab es sie nie, auf dem Tablet quer schon.
   Zwei Spalten erst, wenn eine davon breiter ist als ein Telefon. */
.grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  padding: 8px 0 64px;
}


/* [hidden] allein reicht nicht: display:flex unten ueberstimmt die
   Browserregel display:none. Ohne diese Zeile filtert die Suche sichtbar
   gar nicht, obwohl die Zaehlung stimmt. */
.card[hidden] { display: none; }

.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: var(--radius-card);
  background: #fff; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 12px 32px 4px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.08); }
.card a.card-link { color: inherit; text-decoration: none; }

/* Die Liste traegt kein Vorschaubild mehr. Ein 375 px breites Abbild eines
   A0-Posters ist auf dem Telefon nicht lesbar, es kostet nur Hoehe — und
   Hoehe ist genau das, was bei 245 Eintraegen fehlt. Stattdessen das, was
   man im Vorbeigehen wirklich liest: Nummer, Thema, Titel, Autor. */
.card a.card-link {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 0 20px; align-items: baseline; padding: 20px 24px;
}
.card-no {
  font-size: 17px; font-weight: 700; color: var(--es-blue);
  letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card-body .eyebrow { margin: 0; }
.card-title { font-size: 20px; line-height: 1.32; font-weight: 700; color: var(--es-blue); }
.card-meta { font-size: 16px; line-height: 1.45; color: var(--text-soft); }
.card a.card-link:hover .card-title { text-decoration: underline; }

/* ---------- Interessenwahl ---------- */

.match-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 18px 0 0; }
.btn-match {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px; font: inherit; font-weight: 700;
  background: var(--es-blue); color: #fff; border: 0;
  border-radius: var(--radius-pill); cursor: pointer;
}
.btn-match:hover { background: #1b2450; }
.btn-match:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.btn-schlicht {
  min-height: 48px; padding: 12px 22px; font: inherit; color: var(--text);
  background: #fff; border: 1px solid var(--rule);
  border-radius: var(--radius-pill); cursor: pointer;
}
.match-hinweis { font-size: 16px; color: var(--text-soft); }

/* Kopf und Knoepfe bleiben stehen, nur die Liste dazwischen scrollt. Ohne
   das rutschte auf dem Telefon der Abbrechen-Knopf aus dem Bild — wer nicht
   weiss, dass Escape schliesst, sass fest. */
.interests {
  border: 0; border-radius: var(--radius-card); padding: 28px;
  max-width: 620px; width: calc(100% - 32px);
  max-height: 88vh; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.24);
}
.interests form { display: flex; flex-direction: column; max-height: calc(88vh - 56px); }
.interests::backdrop { background: rgba(36, 47, 98, .45); }
.interests h2 { font-size: 26px; margin: 0 0 8px; }
.interests-lead { font-size: 17px; color: var(--text-soft); margin: 0 0 20px; }
.interests-liste {
  display: grid; gap: 10px; align-content: start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding-right: 4px;
}
.interests-wahl {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--rule); border-radius: var(--radius-card);
  padding: 14px 16px; cursor: pointer;
}
.interests-wahl:hover { border-color: var(--es-blue); }
/* Das Label umschliesst die Box, getroffen wird also die ganze Zeile —
   rund 130 px hoch. Die Box selbst ist trotzdem gross genug, um als Ziel
   erkannt zu werden. */
.interests-wahl input { margin-top: 3px; width: 26px; height: 26px; flex: none; accent-color: var(--es-blue); }
.interests-wahl strong { display: block; font-size: 18px; }
.interests-wahl em { display: block; font-style: normal; font-size: 15px; color: var(--text-soft); margin-top: 2px; }
.interests-wahl small { display: block; font-size: 14px; color: var(--text-soft); margin-top: 4px; }
.interests-knoepfe {
  display: flex; gap: 12px; justify-content: flex-end;
  margin: 20px 0 0; flex: none;
}

@media (pointer: coarse), (max-width: 600px) {
  .interests { padding: 20px; }
  .interests-knoepfe { flex-direction: column-reverse; }
  .interests-knoepfe button { width: 100%; }
}

.empty { padding: 48px 0 80px; font-size: 20px; color: var(--text-soft); }

/* ---------- Posterseite ---------- */

.poster-head { padding: 8px 0 24px; border-bottom: 1px solid var(--rule); }
/* Das Thema stand 6 px ueber der Ueberschrift und klebte daran. Eine ganze
   Zeile Abstand trennt die Einordnung sichtbar vom Titel. */
.poster-head .eyebrow { margin: 0 0 14px; }
.poster-head h1 { font-size: 40px; max-width: 24ch; margin-top: 0; }
.authors { font-size: 20px; line-height: 1.5; margin: 0 0 6px; }
.authors .presenting { font-weight: 700; }
.affiliations { font-size: 16px; line-height: 1.5; color: var(--text-soft); margin: 0; }
.affiliations li { margin-bottom: 2px; }
.affiliations ol { margin: 6px 0 0; padding-left: 20px; }

/* Bild links, Fakten und die PDF-Schaltfläche rechts daneben, der Abstract
   ueber die volle Breite darunter. So steht die Hauptaktion oben im Blick und
   der Text laeuft nicht als schmale Spalte neben einem hohen Bild herunter. */
.poster-layout {
  display: grid; gap: 48px; padding: 32px 0 8px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
}
.poster-meta { position: sticky; top: 24px; }

/* Schmal, oder mit dem Finger bedient: eine Spalte, Poster zuerst, nichts
   klebt. Die Breitengrenze allein reichte nicht — ein Samsung S20 Ultra
   meldet mehr als 900 CSS-Pixel und bekam damit zwei Spalten mit klebender
   Faktenbox neben dem Poster, also die Tabletansicht auf einem Telefon.
   Was zaehlt, ist der Finger, nicht die Zahl. */
@media (max-width: 900px), (pointer: coarse) {
  .poster-layout { grid-template-columns: 1fr; gap: 28px; }
  .poster-meta { position: static; }
}

.poster-figure {
  margin: 0; border: 1px solid var(--rule); border-radius: var(--radius-card);
  overflow: hidden; background: var(--band);
}
.poster-figure img { display: block; width: 100%; height: auto; }
.pdf-link { font-weight: 700; }
.poster-figure .sheet {
  aspect-ratio: 707 / 1000; /* A0 hoch */
  background-image: linear-gradient(160deg, var(--es-blue) 0%, #4a5aa9 60%, var(--es-mint) 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85); font-size: 16px; letter-spacing: .4px;
}

/* Die wichtigste Handlung der Seite. Ein 18-px-Textlink trifft niemand,
   der mit dem Telefon in einer Kongresshalle steht. */
.btn-poster {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px;
  background: var(--es-button); color: #fff; font-weight: 700;
  border-radius: 8px; text-decoration: none;
}
.btn-poster:hover { background: var(--es-button-hover); text-decoration: none; }
.btn-poster:focus-visible { outline: 3px solid var(--es-blue); outline-offset: 2px; }
.poster-meta .btn-poster { display: flex; width: 100%; }
.poster-meta .hint { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-soft); }
/* Zweiter Knopf: gleich breit und hoch wie der erste, aber umrandet —
   die Hauptaktion bleibt das Poster. */
.btn-zweit {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 48px; padding: 12px 24px; margin-top: 14px;
  border: 2px solid var(--es-button); border-radius: 8px;
  color: var(--es-button); font-weight: 700; text-decoration: none; background: #fff;
}
.btn-zweit:hover { background: var(--es-light); text-decoration: none; }
.btn-zweit:focus-visible { outline: 3px solid var(--es-blue); outline-offset: 2px; }

/* 404-Seite */
.fehlt { max-width: 640px; padding: 40px 0 72px; }
.fehlt h1 { margin: 0 0 14px; }
.fehlt-text { font-size: 20px; margin: 0 0 10px; }
.fehlt-poster { color: var(--text-soft); margin: 0 0 8px; }
.fehlt-poster[hidden] { display: none; }
.fehlt-wege { display: grid; gap: 0; max-width: 420px; margin: 26px 0 18px; }
.fehlt-wege .btn-poster { width: 100%; }
.fehlt-klein { font-size: 16px; }

/* Abbildungen aus dem Abstract-PDF */
.abbildungen { max-width: 900px; margin-top: 28px; }
.abbildungen h3 { font-size: 20px; margin: 0 0 14px; }
.abbildung { margin: 0 0 22px; border: 1px solid var(--rule); border-radius: var(--radius-card); overflow: hidden; background: #fff; }
.abbildung a { display: block; }
.abbildung img { display: block; width: 100%; height: auto; }
.abbildung figcaption { padding: 12px 16px 14px; font-size: 16px; line-height: 1.5; color: var(--text-soft); border-top: 1px solid var(--rule); }
.abb-hinweis { font-size: 15px; color: var(--text-soft); margin: 0; }

.blaettern {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 32px 0 8px; padding-top: 24px; border-top: 1px solid var(--rule);
}
.blatt {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-height: 72px; padding: 14px 18px;
  border: 1px solid var(--rule); border-radius: 10px;
  text-decoration: none; color: var(--text);
}
.blatt:hover { border-color: var(--es-button); text-decoration: none; }
.blatt:focus-visible { outline: 3px solid var(--es-blue); outline-offset: 2px; }
.blatt-next { text-align: right; }
.blatt-label { font-size: 15px; font-weight: 700; color: var(--es-button); }
.blatt-prev .blatt-label::before { content: '\2190\00a0'; }
.blatt-next .blatt-label::after { content: '\00a0\2192'; }
/* Zwei Zeilen Titel, danach abschneiden: Die Titel sind bis zu 200 Zeichen
   lang und wuerden die Flaeche sonst ins Unendliche ziehen. */
.blatt-titel {
  font-size: 16px; line-height: 1.35; color: var(--text-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Eine fehlende Seite laesst die andere an ihrer Haelfte stehen, damit
   „Next" nicht von links nach rechts springt. */
.blatt-leer { min-height: 0; border: 0; }

/* Was vor der Liste steht, kostet auf jedem Schirm. Gemessen am
   02.10.2026 mit den echten 230 Postern: 968 px auf dem Desktop, bevor das
   erste Poster kam — bei 768 px Fensterhoehe also keines. Die drei groessten
   Posten waren die Themen-Chips (168 px in mehreren Zeilen, weil es acht
   Themen sind), der Einleitungssatz (96 px) und sein Abstand. */

/* Der Einleitungssatz wiederholt Name und Ort des Kongresses — beides steht
   zwei Zeilen darueber im Band. */
.lead { display: none; }

/* Ein Weg zum Thema, nicht zwei: das Auswahlmenue auf jedem Schirm. Acht
   Chips brauchen drei Zeilen und waren der groesste einzelne Posten vor der
   Liste; das Menue braucht eine Zeile und steht neben der Sortierung. */
#topics { display: none; }
#topic-row-mobile { display: flex; }

/* Der Platzhalter im Feld sagt dasselbe wie das Etikett darueber. Fuer
   Vorleseprogramme bleibt es stehen, nur sichtbar ist es nicht mehr. */
#search-row .filter-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.filters .filter-row { margin-bottom: 0; }

/* showModal() faengt Klicks ueber den ::backdrop ab, haelt den Seitenlauf
   dahinter aber nicht an — auf dem Telefon scrollt die Liste unter dem
   Dialog einfach weiter. Die Klasse setzt app.js, solange er offen ist. */
body.dialog-offen { overflow: hidden; }

.facts { border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 20px 24px; margin-bottom: 20px; }
.facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 17px; }
.facts dt { color: var(--text-soft); }
.facts dd { margin: 0; }

.abstract { padding-top: 24px; border-top: 1px solid var(--rule); }
.abstract h2 { font-size: 24px; margin-top: 0; }
.abstract p { margin: 0 0 1em; font-size: 18px; line-height: 1.6; }
.abstract p:last-child { margin-bottom: 0; }
/* Eine Spalte. Zwei sparen Hoehe, zwingen aber zum Sprung zurueck nach oben
   — bei einem Fliesstext, den man einmal von oben nach unten liest, ist das
   der schlechtere Tausch. Die Zeilenlaenge begrenzt stattdessen die Breite. */
.abstract-text { max-width: 78ch; }


/* ---------- Fuss ---------- */

.site-footer { background: var(--footer); margin-top: 24px; }
.site-footer .container { padding-top: 40px; padding-bottom: 40px; font-size: 16px; }
.site-footer p { margin: 0 0 6px; }
.site-footer .muted { color: var(--text-soft); font-size: 15px; }
.site-footer .legal { margin-top: 14px; font-size: 15px; }
.site-footer .legal a { color: var(--link); }

/* Beruehrungsziele auf allem, was mit dem Finger bedient wird — nicht nur
   auf schmalen Schirmen. Das Tablet quer ist breit und trotzdem ein
   Touchgeraet. 48 px ist das Mass, unter dem im Stehen danebengetippt wird;
   die Zielgruppe steht in einer Kongresshalle, oft mit Kaffee in der Hand. */
@media (pointer: coarse) {
  /* Handflaechen-Masse: Knoepfe und Felder wachsen mit der Bildschirmbreite,
     damit sie auf jedem Geraet gleich gross wirken — ein 48-px-Ziel ist auf
     einem Schirm, der 700 CSS-Pixel meldet, physisch winzig. */
  .btn-match, .btn-schlicht {
    min-height: clamp(56px, 14vmin, 68px);
    /* Nicht kleiner als der Text um den Knopf herum. */
    font-size: clamp(20px, 5.6vmin, 26px);
    padding-left: clamp(22px, 6vmin, 32px); padding-right: clamp(22px, 6vmin, 32px);
  }
  .interests h2 { font-size: clamp(24px, 6.8vmin, 32px); }
  .interests-lead { font-size: clamp(17px, 4.6vmin, 22px); }
  .interests-wahl strong { font-size: clamp(18px, 5vmin, 23px); }
  .interests-wahl em { font-size: clamp(17px, 4.6vmin, 22px); }
  .interests-wahl small { font-size: clamp(16px, 4.4vmin, 21px); }
  .interests-wahl input { width: clamp(28px, 7vmin, 34px); height: clamp(28px, 7vmin, 34px); }
  .match-hinweis { font-size: clamp(17px, 4.6vmin, 22px); }

  /* Schriftgroessen fuer die Hand. Sie hingen bisher an (max-width: 600px)
     und griffen damit weder auf dem Telefon im Querformat (932 px) noch auf
     dem Tablet (768 / 1024 px) — dort las man Desktop-Groessen aus einem
     halben Meter Entfernung. Jetzt entscheidet das Eingabegeraet. */
  /* Eine Lesegroesse fuer alles, was man liest: Grundtext, Abstract,
     Datenschutz, KI-Dialog, Fakten. Bis 04.10. lagen die Nebenschauplaetze
     zwei bis acht Pixel darunter — auf dem S20 Ultra 19 px neben 23 px. */
  body { font-size: clamp(21px, 6vmin, 28px); }
  h1 { font-size: clamp(34px, 10.5vmin, 52px); }
  .lead { font-size: clamp(19px, 5.3vmin, 26px); }
  .breadcrumb { font-size: clamp(17px, 4.6vmin, 22px); }
  .site-title { font-size: clamp(16px, 4.4vmin, 21px); }
  .back-link { font-size: clamp(16px, 4.4vmin, 21px); }
  .meeting-band .container { font-size: clamp(17px, 4.6vmin, 22px); }
  .filter-label { font-size: clamp(17px, 4.6vmin, 22px); }
  .search, select.filter-select { font-size: clamp(19px, 5.1vmin, 24px); min-height: clamp(56px, 14vmin, 68px); }
  .result-count { font-size: clamp(18px, 5vmin, 24px); }
  .chip { font-size: clamp(17px, 4.6vmin, 22px); }

  .card-no { font-size: clamp(20px, 5.6vmin, 27px); }
  .card-body .eyebrow { font-size: clamp(17px, 4.6vmin, 22px); }
  .card-title { font-size: clamp(28px, 8.3vmin, 40px); line-height: 1.24; }

  /* Auf dem Telefon faellt zusaetzlich die Brotkrume weg — Kopf und
     Ueberschrift sagen dasselbe, und der Platz zaehlt hier mehr. */
  .breadcrumb { display: none; }
  h1 { font-size: clamp(30px, 8vmin, 38px); margin: 0 0 14px; line-height: 1.15; }
  .meeting-band .container { padding-top: 10px; padding-bottom: 10px; }
  #count { margin: 4px 0 10px; }

  /* Blaettern mit dem Daumen: Die Flaechen untereinander, damit jede die
     ganze Breite bekommt — nebeneinander bleiben auf 375 px zwei Spalten
     uebrig, in denen der Titel auf zwei Woerter zusammenfaellt. */
  .blaettern { grid-template-columns: 1fr; }
  .blatt { min-height: clamp(76px, 19vmin, 96px); padding: 16px 20px; }
  .blatt-next { text-align: left; }
  .blatt-label { font-size: clamp(18px, 4.8vmin, 23px); }
  .blatt-titel { font-size: clamp(17px, 4.4vmin, 21px); }
  .blatt-leer { display: none; }
  .card-meta { font-size: clamp(21px, 6vmin, 28px); }
  .empty { font-size: clamp(21px, 5.8vmin, 28px); }

  .poster-head .eyebrow { margin-bottom: clamp(14px, 3.6vmin, 20px); font-size: clamp(17px, 4.6vmin, 22px); }
  .poster-head h1 { font-size: clamp(30px, 9.2vmin, 46px); }
  .authors { font-size: clamp(20px, 5.8vmin, 28px); }
  .affiliations { font-size: clamp(17px, 4.8vmin, 23px); }
  .facts dl { font-size: clamp(21px, 6vmin, 28px); }
  .abstract h2 { font-size: clamp(25px, 7.2vmin, 34px); }
  .abstract p { font-size: clamp(21px, 6vmin, 28px); }
  .btn-poster, .btn-zweit { font-size: clamp(20px, 5.6vmin, 26px); }
  .btn-zweit { min-height: 52px; }
  .abbildungen h3 { font-size: clamp(22px, 6vmin, 28px); }
  .abbildung figcaption, .abb-hinweis { font-size: clamp(17px, 4.6vmin, 22px); }
  .poster-meta .hint { font-size: clamp(17px, 4.6vmin, 22px); }
  .links { font-size: clamp(18px, 5vmin, 24px); }
  .site-footer .container { font-size: clamp(17px, 4.8vmin, 23px); }
  .site-footer .muted, .site-footer .legal { font-size: clamp(17px, 4.6vmin, 22px); }

  .logo, .back-link, .breadcrumb a, .band-link {
    display: inline-flex; align-items: center; min-height: 48px;
  }
  .chip { min-height: clamp(52px, 13vmin, 64px); padding: 13px 22px; font-size: clamp(17px, 4.6vmin, 22px); }
  .filter-row { gap: 14px; }
  .search, select.filter-select { min-height: 52px; }
  .btn-poster { min-height: 52px; }
  .card-link { -webkit-tap-highlight-color: rgba(36, 47, 98, .12); }
  .links a, .site-footer p a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Am Eingabegeraet, nicht an einer Pixelgrenze. Ein Samsung S20 Ultra
   meldet je nach Anzeigegroesse deutlich mehr als 600 CSS-Pixel — dort
   griff bis zum 30.09. keine einzige dieser Regeln, und das Telefon
   zeigte die Desktop-Ansicht in schmal. */
/* Ohne Breitengrenze: Die Groessen stehen in clamp() und deckeln sich
   selbst, ein Tablet bekommt also nicht die Telefonschrift in XXL. Mit der
   Grenze bekam ein breit meldendes Telefon gar keine Telefonansicht. */
/* Alle Groessen am Finger haengen an vmin, der kuerzeren Bildschirmseite,
   nicht an vw. Mit vw bekam ein Telefon quer (915 x 412) die groesste Schrift
   der Seite — Kartentitel mit 40 px auf 412 px Hoehe —, weil es breit meldet.
   Ein Telefon ist in beiden Lagen dasselbe Telefon. Gemessen 04.10.2026. */
@media (pointer: coarse) {
  :root { --pad: clamp(22px, 5.5vmin, 36px); }

  /* Kopf kompakt halten — der QR-Code fuehrt auf ein Telefon, nicht auf einen
     Desktop, und bis zur ersten Kachel standen 800 px Vorspiel. */
  /* Auf 320 px (iPhone SE, erste Generation) stand der Kopf 31 px ueber
     und die ganze Seite liess sich seitlich schieben. Schrift und Abstand
     geben dort etwas nach; ab 364 px aendert sich nichts. */
  .site-header .container { min-height: 56px; gap: clamp(8px, 2.5vmin, 12px); }
  .logo img { height: 34px; }
  /* Der Kopf bleibt einzeilig, sonst waechst er mit der Schrift mit. */
  .site-title { font-size: clamp(14px, 4.4vmin, 16px); white-space: nowrap; }
  .back-link { font-size: clamp(14px, 4.4vmin, 16px); }

  /* Der Lead sagt auf dem Telefon nichts, was nicht schon im blauen Band
     darueber steht: Kongressname, Ort, Datum. Zwei Zeilen Wiederholung vor
     dem ersten Poster. */
  .lead { display: none; }
  .back-link { white-space: nowrap; }
  .meeting-band .container { flex-direction: column; gap: 2px; }
  .meeting-band .container { padding-top: 10px; padding-bottom: 10px; }
  .breadcrumb { padding: 4px 0 0; }
  .lead { line-height: 1.5; margin: 10px 0 20px; }
  .filters { margin-bottom: 4px; }
  .result-count { padding: 14px 0 2px; }

  /* Suche ueber die volle Breite, die beiden Auswahlfelder nebeneinander.
     Drei Zeilen Filter waren 260 px, bevor das erste Poster kam. */
  /* Eine Spalte, alles gleich breit. Vorher standen Sortierung und Thema
     nebeneinander in je 160 px, waehrend Suchfeld (331) und Knopf (223)
     zwei andere Breiten hatten — drei Kanten untereinander, die nirgends
     fluchten. Jetzt fuellt jedes Bedienelement die Zeile.
     Der Abstand im Paar (6 px) ist deutlich kleiner als der zwischen den
     Paaren (20 px): So gehoert „Sort by" sichtbar zu seinem Menue und nicht
     zum Feld darueber. */
  .filters { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .filter-row:not(#topics) {
    flex-direction: column; align-items: stretch; gap: 6px; margin: 0;
  }
  #search-row { grid-column: 1 / -1; }
  .search, select.filter-select { min-width: 0; width: 100%; }
  .wahl, .wahl-knopf { width: 100%; }
  #interests-open, .match-zeile > * { width: 100%; }
  .match-zeile { flex-direction: column; align-items: stretch; }
  select.filter-select { padding-right: 38px; background-position: right 14px center; }
  .nur-desktop { display: none; }
  .chip { min-height: 52px; padding: 13px 20px; }
  .btn-poster { width: 100%; }

  /* Die Liste hatte bis zum 01.10. keinen Rand: Sie lief ueber die volle
     Breite, um Platz zu gewinnen. Auf einem Telefon mit gekruemmtem Display
     beginnt der Text dann in der Woelbung — gewonnene Pixel, die niemand
     lesen kann. Jetzt steht sie im Satzspiegel wie alles andere. */
  /* Zwischen den Boxen so viel Luft wie zum Rand — ein Mass statt zwei.
     Vorher 14 px zwischen den Karten bei 22 bis 36 px Rand. */
  .grid { margin: 0; gap: var(--pad); padding-bottom: 40px; }
  .blaettern { gap: var(--pad); }
  .card { border: 1px solid var(--rule); border-radius: var(--radius-card); }
  .card:hover { box-shadow: none; }
  .card a.card-link {
    grid-template-columns: 1fr; gap: 8px;
    padding: clamp(18px, 4.5vmin, 26px) clamp(18px, 4.5vmin, 26px) clamp(20px, 5vmin, 28px);
  }

}

/* ---------- Jahresuebersicht, Fliesstext, Links ---------- */

.lead { max-width: 62ch; margin-top: 0; }

.years { list-style: none; padding: 0; margin: 8px 0 64px; display: grid; gap: 16px;
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.years a {
  display: block; padding: 24px; color: inherit; text-decoration: none;
  border: 1px solid var(--rule); border-radius: var(--radius-card);
}
.years a:hover { border-color: var(--es-blue); }
.years .year { display: block; font-size: 32px; font-weight: 700; color: var(--es-blue); }
.years .year-meta { font-size: 16px; color: var(--text-soft); }

.links { margin: 28px 0 64px; font-size: 17px; }

/* Am grossen Schirm stehen Sortierung und Thema nebeneinander und teilen
   sich die Zeile zu gleichen Teilen — sonst steht jedes Menue so breit da,
   wie sein laengster Eintrag zufaellig ist. */
@media (pointer: fine) {
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  #search-row { grid-column: 1 / -1; }
  .filter-row:not(#topics) {
    flex-direction: column; align-items: stretch; gap: 6px; margin: 0;
  }
  .wahl, .wahl-knopf, .search { width: 100%; }
  /* Der Knopf steht in einer eigenen Zeile, bekommt aber dasselbe Raster
     wie die Menues darueber. Mit calc() gerechnet war er sechs Pixel
     schmaler — dasselbe Raster trifft es exakt, ohne die Spaltenbreite
     nachzurechnen. */
  .match-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  #interests-open { width: 100%; }
}

/* ---------- KI-Suche ---------- */
.ki { padding: 24px 0 8px; }
.ki-titel { font-size: 24px; margin: 0 0 6px; }
.ki-hinweis { margin: 0 0 16px; color: var(--text-soft); font-size: 16px; line-height: 1.5; }
.ki-form { display: grid; gap: 10px; }
.ki-form textarea {
  width: 100%; min-height: 64px; padding: 14px 16px; font: inherit; font-size: 17px;
  border: 1px solid var(--rule); border-radius: 10px; resize: vertical; box-sizing: border-box;
}
.ki-form textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.ki-form .btn-match { width: 100%; }
/* Fehler im EUROSPINE-Rot, dem einzigen Ort, an dem es stehen darf. Das
   Ausrufezeichen im Kreis wiederholt die Farbe nicht nur — wer Rot schlecht
   sieht, erkennt die Meldung an der Form. */
.ki-fehler {
  display: flex; align-items: center; gap: 10px; margin: -2px 0 2px;
  color: var(--es-red); font-size: 16px; font-weight: 500; line-height: 1.4;
}
.ki-fehler[hidden] { display: none; }
.ki-fehler::before {
  content: "!"; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.4em; height: 1.4em; border-radius: 50%;
  background: var(--es-red); color: #fff; font-weight: 700; font-size: .9em;
}
.ki-form textarea[aria-invalid="true"] { border-color: var(--es-red); }
.ki-form textarea[aria-invalid="true"]:focus-visible { outline-color: var(--es-red); }
.ki-verlauf { display: grid; gap: 10px; margin-bottom: 10px; }
.ki-verlauf:empty, .ki-treffer:empty { display: none; }
.ki-du, .ki-antwort { padding: 12px 16px; border-radius: 10px; font-size: 17px; line-height: 1.5; max-width: 60ch; }
.ki-du { background: var(--band); justify-self: end; }
.ki-antwort { border: 1px solid var(--rule); justify-self: start; }
.ki-wartet { color: var(--text-soft); font-style: italic; }
.ki-treffer { display: grid; gap: 12px; margin: 6px 0 18px; }
.ki-karte { border: 1px solid var(--rule); border-radius: var(--radius-card); background: #fff; }
.ki-karte a { display: block; padding: 16px 20px; color: inherit; text-decoration: none; }
.ki-karte .card-no { display: inline-block; margin-right: 10px; }
.ki-karte .ki-thema { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); }
.ki-karte .ki-ktitel { display: block; font-weight: 700; color: var(--es-blue); font-size: 19px; line-height: 1.3; margin: 6px 0; }
.ki-karte .ki-grund { margin: 0; color: var(--text); font-size: 16px; line-height: 1.5; }
.ki-status { margin: 10px 0 0; color: var(--text-soft); font-size: 15px; }
/* Art. 13 DSGVO am Ort der Eingabe: wer tippt, soll vorher lesen koennen,
   wohin die Frage geht und dass sie gespeichert wird. */
.ki-datenschutz { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-soft); }
/* Eigene Zeile und unterstrichen: In der grauen Kleinschrift war nicht zu
   sehen, dass „Privacy policy" ein Link ist. */
.ki-datenschutz a { color: inherit; }
.ki-datenschutz-link {
  display: flex; align-items: center; width: fit-content; min-height: 28px;
  text-decoration: underline; text-underline-offset: 3px;
}
.ki-fuss { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }
.ki-neu { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
          color: var(--es-blue); border-color: var(--es-blue); font-weight: 600; }
.ki-neu:hover { background: var(--es-light); }
.ki-neu:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.ki-neu[hidden] { display: none; }
.ki-link { background: none; border: 0; padding: 10px 0; color: var(--link); font: inherit; font-size: 16px; cursor: pointer; text-decoration: underline; min-height: 44px; }
.ki-verlauf[dir="rtl"] .ki-du { justify-self: start; }
.ki-verlauf[dir="rtl"] .ki-antwort { justify-self: end; }
/* Englischer Titel in einer RTL-Karte: eigener Absatz, links-nach-rechts,
   ohne dass er die Richtung der Begruendung darunter beeinflusst. */
.ki-kopf { display: block; }
.ki-treffer[dir="rtl"] .ki-ktitel,
.ki-treffer[dir="rtl"] .ki-kopf { unicode-bidi: isolate; text-align: left; }
/* [hidden] allein reicht nicht — display: flex/grid der Grundregel
   ueberstimmt es (Befund vom 28.09., hier zum zweiten Mal getroffen). */
.match-zeile[hidden] { display: none; }

@media (pointer: coarse) {
  .ki-titel { font-size: clamp(24px, 6.4vmin, 30px); }
  .ki-hinweis, .ki-du, .ki-antwort, .ki-karte .ki-grund { font-size: clamp(21px, 6vmin, 28px); }
  .ki-form textarea { font-size: clamp(21px, 6vmin, 28px); min-height: 0; max-height: 40vh; resize: none; }
  .ki-karte .ki-thema { font-size: clamp(17px, 4.6vmin, 22px); }
  .ki-status { font-size: clamp(17px, 4.6vmin, 22px); }
  .ki-karte .ki-ktitel { font-size: clamp(20px, 5.4vmin, 25px); }
  .ki-link { font-size: clamp(16px, 4.4vmin, 20px); }
  .ki-datenschutz { font-size: clamp(17px, 4.6vmin, 22px); }
  .ki-fehler { font-size: clamp(17px, 4.6vmin, 22px); }
  /* Eine eigene Zeile ist kein Link im Fliesstext mehr — volle Tippflaeche. */
  .ki-datenschutz-link { min-height: 44px; }
  /* Hier und nicht weiter oben: Die Grundregeln dieser beiden stehen weiter
     unten in der Datei und gewaennen sonst. */
  .ki-treffer, .years { gap: var(--pad); }
}

/* ---------- Datenschutzerklaerung ---------- */
.rechtstext { max-width: 70ch; padding: 24px 0 64px; }
.rechtstext h1 { margin-bottom: 6px; }
.rechtstext h2 { font-size: 22px; margin: 32px 0 8px; }
.rechtstext p { font-size: 17px; line-height: 1.6; margin: 0 0 12px; }
.rechtstext .lead-klein { color: var(--text-soft); font-size: 15px; }
@media (pointer: coarse) {
  .rechtstext h2 { font-size: clamp(22px, 6vmin, 28px); }
  .rechtstext p { font-size: clamp(21px, 6vmin, 28px); }
  .rechtstext .lead-klein { font-size: clamp(17px, 4.6vmin, 22px); }
}


/* Oben so viel Luft wie links und rechts. Bis 04.10.2026 klebte die erste
   Ueberschrift mit 0 px am blauen Band, weil am Finger die Brotkrume wegfaellt
   und mit ihr der einzige Abstand. Das Mass kommt aus --pad, also exakt
   dasselbe wie der Seitenrand; die eigenen Oberabstaende der ersten Bloecke
   gehen dafuer auf null. Steht am Dateiende, damit es die Grundregeln von
   .poster-head und .rechtstext schlaegt. */
@media (pointer: coarse) {
  main.container { padding-top: var(--pad); }
  .poster-head, .rechtstext { padding-top: 0; }
  main.container > h1:first-of-type, .rechtstext > h1, .poster-head > :first-child { margin-top: 0; }
}

/* Kontrastmodus fuer Knoepfe ohne Rahmen. Am Dateiende, weil die Grundregeln
   von .btn-match und .btn-poster (border: 0) weiter unten stehen als der
   Block bei der Auswahlliste und ihn dort ueberstimmten. */
@media (forced-colors: active) {
  .btn-match, .btn-poster { border: 2px solid ButtonText; }
}