/* ------------------------------------------------------------------
Konferenz-Website — mobile first
Ein einziges Stylesheet, keine Abhängigkeiten, kein Build-Schritt.
Farben und Abstände hängen alle an den Variablen unten.
------------------------------------------------------------------- */
/* Instrument Sans, selbst ausgeliefert (SIL OFL 1.1, Lizenz in fonts/OFL.txt).
Geholt mit tools/fetch_fonts.py — bewusst nicht per von Google, siehe
CLAUDE.md Regel 2. Variable Schrift: eine Datei deckt 400 bis 700 ab.
font-display: swap — der Text steht sofort, die Schrift tauscht sich nach. */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('fonts/instrument-sans.woff2') format('woff2');
}
@font-face {
font-family: 'Instrument Sans';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url('fonts/instrument-sans-italic.woff2') format('woff2');
}
/* Palette aus dem IPSCSG-Logo: Orange #EF6320 auf Anthrazit #202020.
Das Anthrazit ist minimal erwärmt, damit es neben dem Orange nicht
kalt wirkt. Quelle: Content/Onedrive/Images, Logos, Templates/. */
:root {
/* ---------------------------------------------------------------------
Mass General Brigham — Werte unveraendert aus dem Farbschema des
PowerPoint-Templates (2602_MGB_PPT_Template.pptx, ppt/theme/theme1.xml).
Nicht vom Bildschirm abgegriffen, sondern aus der Datei gelesen.
--------------------------------------------------------------------- */
--mgb-teal: #01828e; /* accent1 — Primaerfarbe */
--mgb-navy: #003a96; /* accent2 */
--mgb-sky: #55b9d3; /* accent3 */
--mgb-yellow: #ffc83a; /* accent4 */
--mgb-coral: #df6d51; /* accent5 */
--mgb-green: #83d37f; /* accent6 */
--mgb-pale: #b0e3e2; /* dk2 */
--mgb-grey: #abb0ad; /* lt2 */
/* ---------------------------------------------------------------------
Rollen im Layout. Die Zuordnung folgt gemessenen Kontrasten (WCAG):
Petrol auf Weiss 4.58 ok fuer Fliesstext
Petrol mit weisser Schrift 4.58 ok fuer Knoepfe
Petrol auf Anthrazit 3.84 nur fuer grosse Schrift
Hellblau auf Anthrazit 7.75 deshalb der Akzent auf dunklem Grund
Koralle auf Anthrazit 5.39 Warnfarbe
Dunkelblau auf Anthrazit 1.71 unbrauchbar, nie als Text auf dunkel
Deshalb zwei Akzente statt einem: --accent fuer helle Flaechen,
--accent-on-dark fuer die Kopfleiste und den Hero.
--------------------------------------------------------------------- */
--accent: var(--mgb-teal);
--accent-on-dark: var(--mgb-sky);
--accent-deep: var(--mgb-navy);
--alert: var(--mgb-coral);
/* Altnamen aus der ersten Fassung. Sie stehen noch an rund zwanzig Stellen
im Stylesheet; statt alles umzubenennen zeigen sie jetzt auf die Rollen
oben. Neue Regeln bitte mit den Rollennamen schreiben. */
--orange: var(--accent);
--ember: var(--alert);
--amber: var(--accent-on-dark);
--sand: var(--mgb-pale);
--ink-soft: var(--mgb-navy);
--ink: #1c2224; /* Anthrazit mit leichtem Blaustich, passt zum Petrol */
--ink-deep: #121618;
--paper: #ffffff;
--paper-alt: #f4f8f8; /* sehr blasses Petrol statt des warmen Beige */
--line: #e0e8e9;
--text: #1c2224;
--text-mute: #5d6a6c;
/* „happening now" bleibt gruen: Koralle liegt zu dicht an der Warnfarbe
fuer Verspaetungen, und beides nebeneinander waere nicht zu trennen. */
--live: #0d7a58;
--radius: 14px;
--radius-lg: 22px;
--gap: 1rem;
--wrap: 1140px;
--font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--shadow: 0 1px 2px rgba(35, 33, 31, .07), 0 8px 24px rgba(35, 33, 31, .09);
}
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` muss verlässlich verstecken.
Der Browser bringt dafür `[hidden] { display: none }` mit — aber jede eigene
Regel mit `display` schlägt das, weil Autorenregeln vor denen des Browsers
kommen, unabhängig von der Spezifität. Die Seite steuert mehrere Elemente
über das Attribut (`data-meta-hide`, `data-meta-empty`, `.delay-strip`,
`#pub`), und drei davon hatten ein eigenes `display` und blieben deshalb
sichtbar: der Entwurfshinweis „Draft content", die Workshop-Zeile im Hero
und die Co-Host-Karte.
Aufgefallen ist es erst beim Abschalten von `meta.demo`: Das Flag stand auf
false, `el.hidden` war gesetzt — und der Hinweis stand trotzdem da.
Deshalb hier einmal zentral und mit `!important`, statt an jeder Regel
einzeln daran zu denken. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
color: var(--text);
background: var(--paper);
line-height: 1.55;
font-size: 16px;
}
h1, h2, h3, h4 {
margin: 0 0 .5em;
line-height: 1.06;
/* Instrument Sans laeuft von Haus aus etwas weiter als die Systemschrift;
in grossen Graden braucht sie deshalb mehr negative Laufweite. */
letter-spacing: -.03em;
font-weight: 700;
}
a { color: var(--ink-soft); }
img { max-width: 100%; display: block; }
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: 1.25rem;
}
.visually-hidden {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---------------------------------------------------------- Kopfzeile */
.masthead {
/* z-index über dem Menüpanel (50): die Kopfleiste bleibt sichtbar und das
Panel schiebt sich darunter. Damit entfällt jedes Ausmessen der
Kopfleistenhöhe — die schwankte je nach Scrollposition zwischen 62 und
96 px und ließ das Panel mal zu hoch, mal zu tief ansetzen. */
position: sticky; top: 0; z-index: 60;
background: var(--ink);
color: #fff;
box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}
.masthead .wrap {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; min-height: 62px;
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: #fff; }
/* Das Original-Logo hat dunkle Schrift und wäre auf dem Anthrazit-Kopf
unsichtbar. ipscsg-logo-reversed.png ist die aufgehellte Fassung —
Schriftzug weiß, orange Marke unverändert. */
.brand-logo {
height: 37px; width: auto; flex: none; /* 34px +10 % */
}
.brand-divider {
width: 1px; height: 30px; flex: none;
background: rgba(255, 255, 255, .22);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1rem; letter-spacing: -.02em; white-space: nowrap; }
.brand-sub { font-size: .72rem; color: rgba(255, 255, 255, .62); white-space: nowrap; }
/* Auf schmalen Displays trägt das Logo die Marke allein — Name und Termin
daneben würden nur umbrechen und den Kopf dreizeilig machen. */
@media (max-width: 599px) {
.brand-divider, .brand-text { display: none; }
}
/* Mobilmenü nach dem Vorbild von apple.com: Symbol morpht zum X, das Panel
legt sich mit Unschärfe über die Seite, die Einträge kommen zeitversetzt
herein, der Inhalt dahinter bleibt stehen.
Zeitkurve: cubic-bezier(.32,.72,0,1) — schneller Antritt, sanftes
Auslaufen. Genau das lässt die Bewegung „geführt" statt mechanisch wirken. */
.nav-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; /* Fingerkuppengröße nach Apples HIG */
background: none; border: 0; padding: 0;
color: #fff; cursor: pointer;
position: relative; z-index: 61;
}
.burger { position: relative; width: 19px; height: 12px; display: block; }
.burger i {
position: absolute; left: 0; right: 0; height: 1.5px;
background: currentColor; border-radius: 2px;
transition: transform .38s cubic-bezier(.32,.72,0,1),
top .28s cubic-bezier(.32,.72,0,1);
}
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 10.5px; }
/* Erst zur Mitte zusammenfahren, dann kreuzen — dieses Nacheinander macht
den Unterschied zwischen „klappt um" und „faltet sich". */
.nav-toggle[aria-expanded="true"] .burger i:nth-child(1) {
top: 5.25px; transform: rotate(45deg); transition-delay: 0s, 0s;
}
.nav-toggle[aria-expanded="true"] .burger i:nth-child(2) {
top: 5.25px; transform: rotate(-45deg); transition-delay: 0s, 0s;
}
.nav-toggle[aria-expanded="true"] .burger i { transition-delay: .1s, 0s; }
/* Das Panel liegt INNERHALB der Kopfleiste (`.nav` ist ein Kind von
`.masthead`). Deren z-index 60 hebt damit auch das Panel an — die 60 nuetzt
also nichts gegen das Panel, sie gilt nur nach aussen. Innerhalb entscheidet
die Reihenfolge, und `.brand` stand ohne z-index da: bei offenem Menue lag
das Panel darueber und die Logos waren weg. Der Umschaltknopf war nur
deshalb sichtbar, weil er 61 mitbekommen hatte.
Beide Marken sollen bei offenem Menue oben stehen bleiben. */
.brand { position: relative; z-index: 61; }
/* --------------------------------------------------------------- Panel */
.nav {
position: fixed;
inset: 0;
z-index: 50;
/* Platz für die darüberliegende Kopfleiste. Früher 96px = Topbar 34 +
Masthead 62; die Topbar ist entfallen, es bleibt der Masthead. */
padding-top: 62px;
/* Milchglas: deutlich durchlaessiger als zuvor (.82 -> .55), dafuer
staerkere Unschaerfe. Der Seiteninhalt schimmert durch, bleibt aber
unlesbar genug, dass die Menuepunkte klar im Vordergrund stehen. */
background: rgba(24, 22, 20, .55);
-webkit-backdrop-filter: saturate(150%) blur(34px);
backdrop-filter: saturate(150%) blur(34px);
padding-bottom: 2rem;
overflow-y: auto;
overscroll-behavior: contain;
opacity: 0; visibility: hidden;
transition: opacity .32s cubic-bezier(.32,.72,0,1),
visibility 0s linear .32s;
}
/* Ohne Unschärfe-Unterstützung deckend, sonst wäre der Text unlesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav { background: rgba(21, 19, 18, .98); }
}
.nav.open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.nav ul { list-style: none; margin: 0; padding: 0 1.25rem; max-width: var(--wrap); margin-inline: auto; }
.nav li {
opacity: 0;
transform: translateY(14px);
transition: opacity .3s ease, transform .42s cubic-bezier(.32,.72,0,1);
}
.nav.open li { opacity: 1; transform: none; }
/* Gestaffelter Auftritt, 42 ms Abstand. Beim Schließen ohne Verzögerung,
damit es nicht zäh wirkt — Apple macht das genauso asymmetrisch. */
.nav.open li:nth-child(1) { transition-delay: .05s; }
.nav.open li:nth-child(2) { transition-delay: .092s; }
.nav.open li:nth-child(3) { transition-delay: .134s; }
.nav.open li:nth-child(4) { transition-delay: .176s; }
.nav.open li:nth-child(5) { transition-delay: .218s; }
.nav.open li:nth-child(6) { transition-delay: .260s; }
.nav.open li:nth-child(7) { transition-delay: .302s; }
.nav a {
display: flex; align-items: center; justify-content: space-between;
padding: 1.05rem .25rem;
color: #fff; text-decoration: none;
font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em;
border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.nav a::after {
content: "›"; font-size: 1.35rem; font-weight: 400;
color: rgba(255, 255, 255, .35);
transition: transform .25s cubic-bezier(.32,.72,0,1);
}
.nav a:active::after { transform: translateX(3px); }
.nav a[aria-current="page"] { color: var(--amber); }
/* Abdunkelung zwischen Panel und Seiteninhalt */
.nav-scrim {
position: fixed; inset: 0; z-index: 45;
background: rgba(0, 0, 0, .3);
opacity: 0; transition: opacity .32s ease;
}
.nav-scrim.show { opacity: 1; }
/* Seite hinter dem offenen Menü festhalten */
html.nav-locked, html.nav-locked body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.burger i, .nav, .nav li, .nav-scrim, .nav a::after { transition-duration: .01ms; }
.nav.open li { transition-delay: 0s; }
}
/* Ab Tablet zurück zur waagerechten Leiste — dort gilt nichts von alledem. */
@media (min-width: 860px) {
.nav-toggle, .nav-scrim { display: none; }
.nav {
position: static; opacity: 1; visibility: visible;
background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
padding: 0; overflow: visible; transition: none;
}
.nav ul { display: flex; gap: 1.25rem; padding: 0; } /* sieben Einträge */
.nav li { opacity: 1; transform: none; transition: none; }
.nav a {
display: inline; border: 0; padding: 0;
font-size: .94rem; font-weight: 600; letter-spacing: normal;
}
.nav a::after { content: none; }
.nav a:hover { color: var(--amber); }
}
/* -------------------------------------------------------------- Hero */
.hero {
position: relative;
background: var(--ink);
color: #fff;
overflow: hidden;
padding: 3.5rem 0 3rem;
}
/* Organische Verläufe statt Bilddateien — nichts zu laden. */
.hero::before {
content: ""; position: absolute; inset: 0;
/* Grosse, weiche Farbwolken statt der frueheren harten Verlaeufe plus
Punktraster. Das Raster liess die Flaeche gemustert und damit aelter
wirken; ohne es traegt die Farbe allein. */
background:
/* MGB-Palette: Petrol als Hauptlicht, Dunkelblau in der Tiefe, Hellblau
als Aufheller. Werte als rgba, weil Verläufe Transparenz brauchen. */
radial-gradient(120% 90% at 82% 8%, rgba(1, 130, 142, .58), transparent 58%),
radial-gradient(90% 80% at 12% 92%, rgba(0, 58, 150, .40), transparent 62%),
radial-gradient(70% 60% at 58% 108%, rgba(85, 185, 211, .22), transparent 66%);
}
.hero::after {
content: ""; position: absolute; inset: 0;
/* Sanfte Abdunklung nach unten: haelt den Text lesbar, ohne eine sichtbare
Kante zu erzeugen. */
background: linear-gradient(180deg, transparent 45%, rgba(21, 19, 18, .45));
}
/* Das Netz sitzt zwischen den Farbwolken und der Abdunklung: `::before` wird
vor den Kindern gezeichnet, `::after` danach, und `.wrap` hebt sich mit
z-index 1 ueber beide. Reihenfolge also Wolken → Netz → Abdunklung → Text.
Damit legt sich das Netz nie vor die Schrift, und der Verlauf nach unten
daempft es dort, wo Ort und Termin stehen. */
.hero-net {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block; pointer-events: none;
/* Nach links ausblenden. Ohne diese Maske entscheidet der Zufall der
Startpositionen, ob beim naechsten Laden Linien mitten durch die
Schlagzeile laufen — auf dem Handy war genau das zu sehen. So liegt das
Netz dort, wo ohnehin das Licht der Farbwolken sitzt (oben rechts,
`.hero::before`), und die Textspalte links bleibt frei.
Ohne Maskenunterstuetzung zeigt sich das Netz vollflaechig; das ist
ertraeglich, weil es ohnehin sehr zurueckgenommen ist. */
-webkit-mask-image: linear-gradient(75deg, transparent 6%, rgba(0,0,0,.22) 36%, #000 82%);
mask-image: linear-gradient(75deg, transparent 6%, rgba(0,0,0,.22) 36%, #000 82%);
}
/* Auf dem Handy laeuft der Text ueber die volle Breite; die Maske muss
deshalb spaeter greifen und weiter oben enden. */
@media (max-width: 700px) {
.hero-net {
-webkit-mask-image: linear-gradient(62deg, transparent 24%, rgba(0,0,0,.18) 52%, #000 88%);
mask-image: linear-gradient(62deg, transparent 24%, rgba(0,0,0,.18) 52%, #000 88%);
}
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 {
font-size: clamp(2.4rem, 8.8vw, 4.6rem);
font-weight: 700; letter-spacing: -.042em;
margin-bottom: .35rem; max-width: 15ch;
}
.hero .tagline {
font-size: clamp(1.15rem, 4vw, 1.8rem);
font-weight: 700; letter-spacing: -.02em;
background: linear-gradient(90deg, var(--orange), var(--amber));
-webkit-background-clip: text; background-clip: text; color: transparent;
margin-bottom: .6rem;
}
.hero-facts {
display: flex; flex-wrap: wrap; gap: .45rem 1.4rem;
/* Kleiner als zuvor (war .96rem): Ort und Termin sind Beiwerk unter der
Überschrift, keine zweite Schlagzeile. Auf schmalen Geräten schrumpft
die Zeile mit, damit sie auch bei vergrößerter Systemschrift nicht
über zwei Zeilen hinauswächst. */
font-size: clamp(.8rem, 3.2vw, .9rem);
font-weight: 600; line-height: 1.45;
color: rgba(255, 255, 255, .82);
margin-bottom: 1.7rem;
max-width: 34ch;
}
/* Ortsangabe und Stadt sollen nicht getrennt umbrechen — sonst steht das
„MA" allein am Zeilenanfang und wirkt abgeschnitten. */
.hero-facts .nowrap { white-space: nowrap; }
/* Der Workshop am Vortag steht bewusst abgesetzt und leiser als der Termin
der Hauptkonferenz — er betrifft nur geladene Gäste. */
.hero-prelude {
flex-basis: 100%;
font-weight: 500;
color: rgba(255, 255, 255, .62);
}
.countdown-prelude {
margin: .9rem 0 0; padding-top: .8rem;
border-top: 1px solid var(--line);
font-size: .88rem; color: var(--text-mute);
}
/* Tagesreiter tragen zwei Zeilen, sobald ein Tag einen eigenen Namen hat. */
.daytabs button { line-height: 1.25; text-align: left; padding: .5rem .95rem; }
.daytab-main { display: block; }
.daytab-sub {
display: block; font-size: .72rem; font-weight: 600;
opacity: .62; letter-spacing: .01em;
}
.daytabs button.is-side .daytab-main { font-size: .82rem; }
/* Bewusst kein Flex: die Zeile enthält lose Textknoten (Emoji, Komma).
Als Flex-Container würde jeder davon zum eigenen Item und bekäme
beidseitig gap — das Komma stünde dann frei zwischen den Wörtern. */
.hero-facts > span { display: inline-block; }
.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .8rem 1.4rem; border-radius: 999px;
font-weight: 700; font-size: .95rem; text-decoration: none;
border: 2px solid transparent; cursor: pointer;
transition: transform .12s ease, background-color .12s ease;
}
.btn:active { transform: translateY(1px); }
/* Anthrazit statt Weiss auf dem Orange: Weiss käme nur auf 3,2:1 und
fiele damit unter die WCAG-Schwelle von 4,5:1 für Text dieser Größe. */
.btn-primary { background: var(--orange); color: var(--ink-deep); }
.btn-primary:hover { background: #f9773a; }
.btn-ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
/* ------------------------------------------------- Live: „Jetzt läuft" */
.live {
background: var(--paper-alt);
border-bottom: 1px solid var(--line);
padding-block: 2.2rem 2.6rem;
}
.live-head {
display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem;
margin-bottom: 1.2rem;
}
.live-head h2 { font-size: 1.5rem; margin: 0; }
.live-clock {
font-variant-numeric: tabular-nums;
font-size: .88rem; color: var(--text-mute); font-weight: 600;
}
.pulse {
display: inline-flex; align-items: center; gap: .45rem;
color: var(--live); font-weight: 800;
font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.pulse::before {
content: ""; width: 9px; height: 9px; border-radius: 50%;
background: var(--live); animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(13, 122, 88, .45); }
50% { opacity: .55; box-shadow: 0 0 0 7px rgba(13, 122, 88, 0); }
}
@media (prefers-reduced-motion: reduce) {
.pulse::before { animation: none; }
}
/* Einspurige Tagung: eine Karte. Ohne Breitenbegrenzung liefe der Titel auf
dem Bildschirm ueber die ganze Zeile und waere schlechter zu lesen. */
.room-card.is-single { max-width: 46rem; }
/* Beide Haelften der Karte fuehren in den Programmplan — die laufende Session
auf ihren Eintrag, „Next up" auf seinen. Der Sprung selbst kann die Seite
schon (program.html#): Tag umschalten, Pausenfilter loesen, aufklappen,
aufblinken. Hier wird nur verlinkt.
Kein Farbwechsel: der Text ist derselbe wie vorher, nur anklickbar. Der
Hinweis darauf ist die Unterstreichung des Titels beim Zeigen. */
.live-jump { display: block; color: inherit; text-decoration: none; border-radius: 12px; }
.live-jump:hover h3,
.live-jump:hover .next-title { text-decoration: underline; text-underline-offset: 3px; }
.live-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
.live-jump:hover { background: var(--tint, rgba(0,0,0,.02)); }
}
.next-where {
display: inline-block; margin-top: .3rem; font-size: .74rem; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute);
border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem;
}
.room-card {
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem;
box-shadow: var(--shadow);
display: flex; flex-direction: column; gap: .55rem;
}
.room-card.is-live { border-color: rgba(13, 122, 88, .45); }
.room-card.is-idle { opacity: .72; }
.room-name {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
font-size: .78rem; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--text-mute);
}
.room-card h3 { font-size: 1.06rem; margin: 0; letter-spacing: -.015em; }
.room-meta { font-size: .86rem; color: var(--text-mute); }
.room-speaker { font-size: .88rem; font-weight: 600; }
.progress {
height: 5px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.progress i {
display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--orange), var(--amber));
}
/* „Next up" als eigener, beschrifteter Block statt einer Nebenbemerkung —
auf dem Handy im Foyer ist das die zweitwichtigste Angabe nach dem, was
gerade laeuft. */
.next-label {
display: block; font-size: .68rem; font-weight: 800;
letter-spacing: .09em; text-transform: uppercase;
color: var(--accent); margin-bottom: .15rem;
}
.next-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.next-title { display: block; font-weight: 600; color: var(--text); line-height: 1.35; }
.next-who { display: block; font-size: .84rem; color: var(--text-mute); margin-top: .1rem; }
.room-next {
font-size: .82rem; color: var(--text-mute);
border-top: 1px dashed var(--line); padding-top: .55rem; margin-top: .1rem;
}
.room-next b { color: var(--text); font-weight: 700; }
.live-empty {
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 2rem 1.4rem; text-align: center;
}
.live-empty .countdown {
font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 800;
letter-spacing: -.03em; color: var(--ink);
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------- Karten */
/* padding-block, nicht die Kurzform: sonst wird der seitliche Abstand
von .wrap auf 0 gesetzt, sobald beide Klassen am selben Element
haengen. Genau daran klebten Programmliste und Abstract-Seite am
Bildschirmrand. */
.section { padding-block: 3rem; }
.section-alt { background: var(--paper-alt); }
.section h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.section > .wrap > p.lede {
color: var(--text-mute); max-width: 62ch; margin-top: -.2rem;
}
/* ------------------------------------------------- Sonderredner (Startseite) */
/* Kein eigener Hintergrund, sondern ein Rahmen mit farbiger Kante links. Ein
dritter Farbblock zwischen „On site" und den Zahlen hätte die Seite in lauter
gleich laute Bänder zerlegt; so hebt sich der Abschnitt ab, ohne zu schreien. */
.spotlight > .wrap > * { max-width: 62ch; }
.spotlight .spotlight-kicker {
margin: 0 0 .25rem; font-size: .78rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.spotlight h2 { margin: 0; }
.spotlight .spotlight-role {
margin: .25rem 0 0; color: var(--text-mute); font-size: 1rem;
}
/* Titel und Beschreibung sind EIN Block — beide handeln vom Vortrag. Deshalb
der Balken um beide statt nur um die Zeile: sonst steht die Beschreibung
optisch beim Namen darüber, wo sie nicht hingehört.
Zwei Breiten, weil zwei Aufgaben: der Titel soll in eine Zeile passen, der
Fliesstext darunter aber nicht über 62 Zeichen laufen — längere Zeilen
verliert das Auge beim Rücksprung. */
.spotlight .spotlight-quote {
max-width: 54rem; margin-top: 1.5rem;
padding-left: 1rem; border-left: 3px solid var(--accent);
}
.spotlight .spotlight-talk {
margin: 0; font-size: clamp(1.05rem, 2.6vw, 1.25rem); font-weight: 600;
line-height: 1.45; text-wrap: balance;
}
.spotlight .spotlight-blurb {
margin: .65rem 0 0; max-width: 62ch;
color: var(--text-mute); line-height: 1.6;
}
.spotlight .cta-row { margin-top: 1.75rem; }
.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.6rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card {
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--radius); padding: 1.3rem;
display: flex; flex-direction: column; gap: .5rem;
box-shadow: var(--shadow);
}
.card h3 { font-size: 1.1rem; margin: 0; }
.card p { margin: 0; font-size: .92rem; color: var(--text-mute); flex: 1; }
.card a {
font-weight: 800; font-size: .8rem; letter-spacing: .06em;
text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
}
.card a:hover { text-decoration: underline; }
/* ------------------------------------------------------------- Zahlen */
.numbers { background: var(--ink); color: #fff; padding-block: 2.6rem; }
/* Vier Zahlen: auf dem Telefon zwei mal zwei, ab Tablet nebeneinander.
Vier in einer Reihe bei 375 px liessen je 84 px — dort passt "Countries
represented" nicht mehr ohne Trennung mitten im Wort. */
.numbers-grid {
display: grid; gap: 1.6rem; text-align: center;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .numbers-grid { grid-template-columns: repeat(4, 1fr); } }
.numbers .n {
font-size: clamp(1.7rem, 6vw, 3rem); font-weight: 800;
letter-spacing: -.035em; display: block;
background: linear-gradient(90deg, var(--orange), var(--amber));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.numbers .l { font-size: .82rem; color: rgba(255, 255, 255, .74); }
/* ------------------------------------------------- Hinweiskasten */
.callout {
margin: 1.8rem 0 0;
padding: 1.1rem 1.25rem;
background: var(--paper);
border: 1px solid var(--line);
border-left: 4px solid var(--orange);
border-radius: var(--radius);
}
.callout h3 {
margin: 0 0 .35rem; font-size: .78rem; font-weight: 800;
letter-spacing: .09em; text-transform: uppercase; color: var(--ember);
}
.callout p { margin: 0; font-size: .95rem; color: var(--text-mute); }
/* Fahrplan im Kasten. Zwei Spalten, sobald Platz ist — bei drei Einträgen
liest sich das schneller als eine Liste, weil die Tageszeit links steht
und man nicht suchen muss. Darunter einspaltig, sonst wird die rechte
Spalte zu schmal für ganze Sätze. */
.shuttle-plan { margin: 0; font-size: .95rem; }
.shuttle-plan dt {
font-weight: 700; color: var(--text); margin-top: .8rem;
}
.shuttle-plan dt:first-child { margin-top: 0; }
.shuttle-plan dd { margin: .15rem 0 0; color: var(--text-mute); }
.shuttle-plan-note {
margin-top: .9rem !important; padding-top: .7rem;
border-top: 1px solid var(--line); font-size: .88rem !important;
}
@media (min-width: 720px) {
.shuttle-plan {
display: grid; grid-template-columns: minmax(11rem, auto) 1fr;
column-gap: 1.4rem; row-gap: .55rem;
}
.shuttle-plan dt, .shuttle-plan dt:first-child { margin-top: 0; }
/* Auf 62 Zeichen begrenzt wie überall sonst auf der Seite. Ohne das läuft
die Spalte auf 808 px und damit über 100 Zeichen — dort verliert das Auge
beim Zeilenwechsel den Anschluss. */
.shuttle-plan dd { margin: 0; max-width: 62ch; }
}
/* Ort im Kopfbereich, anklickbar */
.hero-place { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.hero-place:hover { border-bottom-color: var(--amber); color: var(--amber); }
/* Shuttle-Hinweis am Programmpunkt */
/* Ort einer auswärtigen Veranstaltung. Steht unter dem Titel statt darin —
eine Adresse in der Überschrift macht die Zeile unlesbar, und beim Blättern
sucht man den Namen, nicht die Hausnummer. */
.session-venue {
margin-top: .3rem; font-size: .87rem; line-height: 1.4;
}
.session-venue a {
color: var(--text-mute); text-decoration: none;
border-bottom: 1px solid var(--line);
}
.session-venue a:hover { color: var(--text); border-bottom-color: currentColor; }
.shuttle-chip {
margin-top: .35rem; font-size: .84rem; font-weight: 600;
color: var(--ember);
}
.shuttle-note {
margin: .6rem 0 0; padding: .55rem .75rem;
background: rgba(1, 130, 142, .09);
border-radius: 9px; font-size: .9rem; color: var(--text);
}
/* ------------------------------------------------- Verspätungsanzeige */
.delay-strip {
background: var(--ember); color: #fff;
font-size: .88rem; font-weight: 650;
padding: .6rem 0;
}
.delay-strip .wrap { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
/* Durchsage und Verspätung können gleichzeitig anliegen — dann zwei Zeilen,
Durchsage oben. Auf dem Handy bricht jede Zeile für sich um. */
.delay-strip .strip-line { display: flex; align-items: baseline; gap: .55rem; }
.delay-strip.notice { background: var(--accent-deep, #0d5f6b); }
.delay-strip .dot {
width: 8px; height: 8px; border-radius: 50%; background: #fff;
flex: none; animation: pulse 2s ease-in-out infinite;
position: relative; top: -1px;
}
.delay-strip small { font-weight: 500; opacity: .85; }
.delay-strip.ahead { background: #2f7d5b; }
@media (prefers-reduced-motion: reduce) { .delay-strip .dot { animation: none; } }
/* Schwelle vor dem Workshop-Tag. Bewusst ruhig gehalten: Sie soll erklaeren,
nicht abschrecken — der Tag ist kein Geheimnis, er ist nur nicht fuer alle. */
.gate {
background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
padding: 1.6rem 1.5rem; max-width: 34rem; margin: 1.5rem auto;
text-align: center;
}
.gate h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.015em; }
.gate-note {
margin: .3rem 0 0; font-size: .74rem; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.gate p { margin: .9rem 0 0; color: var(--text-mute); line-height: 1.55; }
.gate-form {
display: flex; gap: .5rem; justify-content: center;
margin-top: 1.2rem; flex-wrap: wrap;
}
.gate-form input {
font: inherit; padding: .6rem .85rem; min-width: 11rem;
border: 1px solid var(--line); border-radius: 10px;
background: var(--paper); color: var(--text);
}
.gate-form input:focus-visible {
outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.gate-form button {
font: inherit; font-weight: 650; padding: .6rem 1.1rem;
border: 1px solid var(--accent); border-radius: 10px;
background: var(--accent); color: #fff; cursor: pointer;
}
.gate-error { color: var(--ember); font-weight: 600; font-size: .9rem; }
/* ----------------------------------------------------------- Programm */
.filters {
position: sticky; top: 62px; z-index: 30;
background: var(--paper); border-bottom: 1px solid var(--line);
padding: .85rem 0;
}
.filters .wrap { display: flex; flex-direction: column; gap: .7rem; }
.daytabs { display: flex; gap: .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.daytabs button {
flex: none; border: 1px solid var(--line); background: var(--paper);
border-radius: 999px; padding: .5rem 1rem;
font: inherit; font-size: .88rem; font-weight: 700; color: var(--text-mute);
cursor: pointer; white-space: nowrap;
}
.daytabs button[aria-pressed="true"] {
background: var(--ink); border-color: var(--ink); color: #fff;
}
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-row select, .filter-row input[type="search"] {
font: inherit; font-size: .9rem;
padding: .5rem .7rem; border: 1px solid var(--line);
border-radius: 10px; background: var(--paper); color: var(--text);
min-width: 0;
}
.filter-row input[type="search"] { flex: 1 1 12rem; }
.filter-row select { flex: 0 1 auto; max-width: 100%; }
.chip-toggle {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .88rem; font-weight: 600; color: var(--text-mute);
border: 1px solid var(--line); border-radius: 999px;
padding: .45rem .8rem; cursor: pointer; background: var(--paper);
}
.chip-toggle input { accent-color: var(--ink-soft); margin: 0; }
.result-count { font-size: .84rem; color: var(--text-mute); font-weight: 600; }
/* padding-block, nicht die Kurzform: `padding: .4rem 0 2.5rem` hat den
waagerechten Innenabstand von .wrap auf 0 gesetzt, wodurch die Kästen
bis an den Bildschirmrand liefen. */
.daygroup { padding-block: .4rem 2.5rem; }
.slot-time {
position: relative;
font-size: .8rem; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--text-mute);
margin: 1.6rem 0 .7rem; padding-bottom: .4rem;
border-bottom: 2px solid var(--line);
}
.slot-time:first-child { margin-top: .8rem; }
.session {
border: 1px solid var(--line); border-left: 4px solid var(--line);
border-radius: var(--radius); background: var(--paper);
margin-bottom: .7rem; overflow: hidden;
}
.session.now { border-left-color: var(--live); background: #f4faf7; }
.session summary {
list-style: none; cursor: pointer;
padding: .95rem 1.05rem;
display: flex; flex-direction: column; gap: .35rem;
}
.session summary::-webkit-details-marker { display: none; }
.session summary:hover { background: var(--paper-alt); }
.session-top {
display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
font-size: .78rem; font-weight: 700; color: var(--text-mute);
}
.tag {
display: inline-flex; align-items: center;
padding: .18rem .55rem; border-radius: 999px;
font-size: .7rem; font-weight: 800; letter-spacing: .04em;
text-transform: uppercase;
background: var(--paper-alt); color: var(--text-mute);
border: 1px solid var(--line);
}
/* Ohne color im Datensatz bekommt der Track-Chip diesen warmen Grundton.
Bei einer einspurigen Tagung wären 15 verschiedene Farben nur Unruhe —
die Farbe ist deshalb optional und wird derzeit nicht gesetzt. */
.tag-track {
border: 0; color: #7a3c14;
background: rgba(1, 130, 142, .14);
}
.tag-now { background: var(--live); color: #fff; border-color: var(--live); }
/* „Abstract presentation" ist der haeufigste Typ am Workshop-Tag und soll sich
von den vier Lehrvortraegen abheben, ohne zu schreien. */
.tag-abstract { background: rgba(1, 130, 142, .12); border-color: rgba(1, 130, 142, .3); color: var(--accent); }
.abstract-jump { font-weight: 650; }
.session h3 { font-size: 1.02rem; margin: 0; letter-spacing: -.015em; font-weight: 700; }
.session .who { font-size: .88rem; color: var(--text-mute); }
.session .body {
padding: 0 1.05rem 1.05rem;
font-size: .93rem; color: var(--text-mute);
border-top: 1px dashed var(--line); margin-top: 0; padding-top: .8rem;
}
.no-results {
text-align: center; padding: 3rem 1rem; color: var(--text-mute);
}
/* ------------------------------------------------------------- Footer */
.footer {
background: var(--ink-deep); color: rgba(255, 255, 255, .7);
padding: 2.6rem 0 2rem; font-size: .9rem;
}
.footer h4 { color: #fff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.footer a { color: rgba(255, 255, 255, .82); }
.footer-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
/* Co-Hosts: auf der Startseite als eigene Karte, auf der Sprecherseite als
Auszeichnung am Profil. Beide speisen sich aus meta.cohosts. */
/* ------------------------------------------------------------ Abstracts */
.abstract-list { list-style: none; margin: 0; padding: 0; }
.abstract-item {
display: flex; align-items: center; gap: 1.2rem;
padding: .85rem 0; border-bottom: 1px solid var(--line);
/* Platz fuer die klebende Kopfleiste — sonst landet das Sprungziel aus dem
Programm darunter. Gleicher Wert wie bei den Programmpunkten. */
scroll-margin-top: 108px;
}
/* Aufleuchten, wenn man aus dem Programm über „Read the abstract" herkommt.
Programmpunkte bekommen dafuer einen Rahmen; das geht hier nicht, weil ein
Abstract eine flache Zeile ohne Karte ist. Stattdessen eine farbige
Unterlegung, die ueber `box-shadow` seitlich hinausreicht — so entsteht der
Eindruck von Innenabstand, ohne dass die Zeile beim Blinken springt. */
@keyframes abstract-found {
0%, 100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
8%, 70% { background: rgba(1, 130, 142, .11); box-shadow: 0 0 0 12px rgba(1, 130, 142, .11); }
25% { background: rgba(1, 130, 142, .045); box-shadow: 0 0 0 12px rgba(1, 130, 142, .045); }
}
.abstract-item.is-found {
animation: abstract-found 2.4s ease-in-out;
border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
.abstract-item.is-found {
animation: none;
background: rgba(1, 130, 142, .11);
box-shadow: 0 0 0 12px rgba(1, 130, 142, .11);
}
}
.abstract-text { flex: 1; min-width: 0; }
.abstract-title { margin: 0; font-weight: 650; line-height: 1.4; }
.abstract-authors { margin: .18rem 0 0; font-size: .86rem; color: var(--text-mute); }
.abstract-speakers { margin: .25rem 0 0; font-size: .84rem; }
.abstract-speakers a {
color: var(--accent); text-decoration: none;
border-bottom: 1px solid rgba(1, 130, 142, .35);
}
.abstract-speakers a:hover { border-bottom-color: var(--accent); }
.abstract-dl {
flex: none; display: flex; flex-direction: column; align-items: center;
gap: .1rem; min-width: 76px; padding: .45rem .7rem;
border: 1px solid var(--line); border-radius: 10px;
text-decoration: none; color: var(--accent);
transition: border-color .15s ease, background-color .15s ease;
}
.abstract-dl:hover { border-color: var(--accent); background: rgba(1, 130, 142, .06); }
.abstract-format { font-size: .74rem; font-weight: 800; letter-spacing: .06em; }
.abstract-size { font-size: .7rem; color: var(--text-mute); }
/* -------------------------------------------------------- Teilnehmende */
.attendee-list {
list-style: none; margin: 1.2rem 0 0; padding: 0;
columns: 1; column-gap: 2.4rem;
}
@media (min-width: 620px) { .attendee-list { columns: 2; } }
@media (min-width: 980px) { .attendee-list { columns: 3; } }
.attendee-list li {
break-inside: avoid;
padding: .42rem 0; border-bottom: 1px solid var(--line);
font-size: .94rem;
}
.attendee-list a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(1,130,142,.35); }
.attendee-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* ---------------------------------------------------------------- About */
.about-grid { display: grid; gap: 2.6rem; margin-top: 1.8rem; }
@media (min-width: 840px) {
.about-grid { grid-template-columns: 1fr 1fr; gap: 3.2rem; }
}
.about-col > h2 {
font-size: 1.32rem; margin-bottom: .7rem;
padding-bottom: .5rem; border-bottom: 2px solid var(--line);
}
.about-col h3 {
margin: 1.6rem 0 .6rem; font-size: .8rem; font-weight: 800;
letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
}
.about-col p { margin: 0 0 .85rem; color: var(--text-mute); line-height: 1.65; }
.about-col p b { color: var(--text); }
.about-people { list-style: none; margin: 0; padding: 0; }
.about-people li {
padding: .42rem 0; border-bottom: 1px solid var(--line);
font-size: .92rem; color: var(--text-mute);
}
.about-people li:last-child { border-bottom: 0; }
.about-people b { color: var(--text); font-weight: 650; }
.about-role {
margin-left: .4rem; padding: .1rem .45rem; border-radius: 999px;
background: rgba(1, 130, 142, .1); color: var(--accent);
font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.about-link { margin-top: 1.2rem; }
.about-link a {
font-weight: 700; color: var(--accent); text-decoration: none;
border-bottom: 1px solid rgba(1, 130, 142, .4);
}
.about-link a:hover { border-bottom-color: var(--accent); }
.about-note {
margin-top: 2.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
font-size: .84rem; color: var(--text-mute);
}
/* ------------------------------------------------------------------ FAQ */
/* Spezifisch genug, um .section h2 zu schlagen — sonst greift dort die
grosse Ueberschriftengroesse und die Rubrik dominiert die Fragen. */
.section h2.faq-group {
margin: 2.4rem 0 .9rem; padding-bottom: .45rem;
border-bottom: 2px solid var(--line);
font-size: .82rem; font-weight: 800;
letter-spacing: .09em; text-transform: uppercase;
color: var(--accent);
}
.section h2.faq-group:first-child { margin-top: .6rem; }
.faq-item summary h3 { font-size: 1.02rem; font-weight: 650; }
.faq-item .body p { margin: 0 0 .6rem; }
.faq-item .body p:last-child { margin-bottom: 0; }
.faq-item .body ul { margin: .2rem 0 .7rem; padding-left: 1.15rem; }
.faq-item .body li { margin-bottom: .3rem; }
.faq-item .body a { color: var(--accent); }
.card-cohosts { border-color: rgba(1, 130, 142, .35); background: rgba(1, 130, 142, .05); }
.card-cohosts p { font-weight: 600; color: var(--text); }
.card-cohosts a {
/* Die Karten-Links sind sonst Handlungsaufforderungen in Versalien
(„GO TO THE PROGRAM"). Namen gehoeren in normaler Schreibung gesetzt. */
text-transform: none; letter-spacing: normal;
font-size: inherit; font-weight: 700;
color: var(--accent); text-decoration: none;
border-bottom: 1px solid rgba(1, 130, 142, .4);
}
.card-cohosts a:hover { border-bottom-color: var(--accent); }
.person.is-cohost {
border-color: rgba(1, 130, 142, .45);
background: rgba(1, 130, 142, .045);
}
.cohost-badge {
display: inline-block; vertical-align: middle;
margin-left: .55rem; padding: .16rem .55rem;
border-radius: 999px; background: var(--accent); color: #fff;
font-size: .66rem; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase;
}
.brand-mgb {
display: flex; align-items: center; gap: .5rem; flex: none;
}
.brand-mgb img {
/* Gleiche optische Hoehe wie das Oval der IPSCSG-Marke. Nachgemessen: das
orange Oval nimmt 74 von 76 px des Logoinhalts ein, also praktisch die
volle Hoehe — bei 34px Anzeige sind das 33px. Die Querfassung ist rund
7:1 und wird damit 230px breit; dass das in die Kopfleiste passt, ist der
Grund, warum „Getting here" und „On site" aus dem Menue konnten.
Seit der Feinabstimmung nicht mehr gleich hoch: IPSCSG wurde um 10 %
groesser gestellt, MGB zweimal um 10 % kleiner — die Hauptmarke soll
fuehren, der Mitausrichter danebenstehen. Nur im Kopf; die Fusszeile
bleibt bei 31px, dort steht die Marke allein. */
height: 27px; width: auto; /* 33 → 30 → 27px */
}
@media (max-width: 700px) {
/* Auf schmalen Geraeten faellt der Schriftzug weg, das Zeichen bleibt.
Frueher verschwand hier beides — dadurch war MGB auf dem Handy gar
nicht vertreten, und genau das war die Beanstandung. */
.brand-mgb img { height: 23px; }
}
@media (max-width: 380px) {
.brand-mgb img { height: 20px; }
.brand-divider { margin-inline: .1rem; }
}
/* Haftungshinweis. Bewusst unter dem Raster und getrennt von der Rubrik
„Note", die vom Datenschutz handelt — Richtigkeit ist eine andere Frage.
Leise gesetzt: Er soll auffindbar sein, nicht mahnen. */
/* Korrekturhinweis am Ende einer Liste. Steht bewusst dort und nicht nur in
der Fusszeile: Wem auffaellt, dass sein Name falsch geschrieben ist, der
steht in diesem Moment auf genau dieser Seite. */
.list-correction {
margin-top: 2.4rem; padding-top: 1.1rem;
border-top: 1px solid var(--line);
font-size: .9rem; color: var(--text-mute); max-width: 62ch;
}
.list-correction p { margin: 0; line-height: 1.6; }
.list-correction b { color: var(--text); }
/* Zweckangabe unter einer Kontaktadresse. Zwei Adressen ohne Zweck erzeugen
die Frage "welche denn jetzt?" — und dann landet beides bei einer davon. */
.footer-hint {
font-size: .8rem; opacity: .72; display: inline-block; margin-top: .1rem;
}
.footer-disclaimer {
margin: 2rem 0 0;
max-width: 62ch;
font-size: .8rem; line-height: 1.55;
color: rgba(255, 255, 255, .5);
}
.footer-badge {
margin-top: 2rem; padding-top: 1.4rem;
border-top: 1px solid rgba(255, 255, 255, .14);
display: flex; align-items: center; gap: .8rem;
}
.footer-badge img {
height: 31px; width: auto; flex: none; /* 34px −10 %, wie im Kopf */
max-width: 100%;
}
/* ------------------------------------------------------ Ankündigungsband */
/* Erscheint nur, wenn meta.announcement gefüllt ist. Bewusst laut: es ist
der Kanal für kurzfristige Durchsagen während der Tagung. */
.announcement {
background: var(--amber);
color: var(--ink-deep);
font-weight: 700;
font-size: .95rem;
padding: .7rem 0;
border-bottom: 2px solid var(--ember);
}
.announcement .wrap { display: flex; align-items: center; gap: .6rem; }
.ann-dot {
width: 9px; height: 9px; border-radius: 50%; flex: none;
background: var(--ink-deep);
animation: pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .ann-dot { animation: none; } }
/* ------------------------------------------------------ Trägerhinweis */
.hosted-by {
font-size: .92rem; font-weight: 600;
color: rgba(255, 255, 255, .74);
/* Kein negativer Abstand: der Untertitel darüber kann leer und dann
ausgeblendet sein — der Hinweis würde sonst in die Überschrift rutschen. */
margin: .7rem 0 1.6rem;
max-width: 46ch;
line-height: 1.45;
}
/* -------------------------------------------------------- Sprecherseite */
.people { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .people { grid-template-columns: repeat(3, 1fr); } }
.person {
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem;
box-shadow: var(--shadow);
scroll-margin-top: 108px; /* Kopfleiste 96 px plus etwas Luft */
}
.person:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1, 130, 142, .20); }
/* Kurzes Aufblinken beim Ansteuern aus dem Programm heraus. Zweimal hell,
dann zurueck — einmal wird leicht uebersehen, dreimal wirkt hektisch. */
@keyframes person-found {
0%, 100% { box-shadow: 0 0 0 0 rgba(1, 130, 142, 0); border-color: var(--line); }
8%, 42% { box-shadow: 0 0 0 5px rgba(1, 130, 142, .30); border-color: var(--accent); }
25% { box-shadow: 0 0 0 2px rgba(1, 130, 142, .12); border-color: var(--accent); }
70% { box-shadow: 0 0 0 5px rgba(1, 130, 142, .30); border-color: var(--accent); }
}
.person.is-found {
animation: person-found 2.4s ease-in-out;
border-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
/* Ohne Bewegung: dauerhafte Markierung statt Blinken — der Zweck ist,
die Karte zu finden, nicht die Animation. */
.person.is-found {
animation: none;
box-shadow: 0 0 0 4px rgba(1, 130, 142, .28);
}
}
.person h3 { font-size: 1.08rem; margin: 0 0 .15rem; }
.person-meta { margin: 0 0 .6rem; font-size: .86rem; color: var(--text-mute); font-weight: 600; }
.person-bio { margin: 0 0 .9rem; font-size: .9rem; color: var(--text-mute); }
.person-bio.is-missing { font-style: italic; opacity: .7; }
.person-sessions h4 {
font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--text-mute); margin: 0 0 .4rem;
border-top: 1px dashed var(--line); padding-top: .7rem;
}
.person-sessions ul { list-style: none; margin: 0; padding: 0; }
.person-sessions li { font-size: .86rem; margin-bottom: .45rem; line-height: 1.4; }
.person-sessions a { font-weight: 600; text-decoration: none; }
.person-sessions a:hover { text-decoration: underline; }
.who-when { display: block; color: var(--text-mute); font-size: .8rem; }
.who-role { color: var(--text-mute); font-size: .8rem; }
/* ------------------------------------------------------------- Adresse */
.address {
display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
font-weight: 700; color: var(--ink-soft); text-decoration: none;
border-bottom: 2px solid rgba(1, 130, 142, .38);
}
.address:hover { border-bottom-color: var(--orange); }
.address-hint {
font-size: .72rem; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: var(--orange);
border: 1px solid rgba(1, 130, 142, .42); border-radius: 999px;
padding: .1rem .5rem;
}
/* --------------------------------------------------------------- Karte */
.orientation { margin: 1.6rem 0 0; }
.orientation .map-link { display: block; border-radius: var(--radius); overflow: hidden; }
.orientation img {
width: 100%; height: auto; display: block;
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--paper-alt);
}
.orientation .map-link:hover img { border-color: var(--orange); }
.orientation figcaption {
margin-top: .5rem; font-size: .8rem; color: var(--text-mute);
}
/* ------------------------------------------------------------ Ausdruck */
/* Manche Teilnehmenden drucken sich das Programm aus oder legen es als PDF
ab. Alles Interaktive fliegt raus, Details werden aufgeklappt, und die
dunklen Flächen werden hell — sonst frisst der Drucker eine Tonerpatrone. */
@media print {
.nav, .nav-toggle, .filters, .cta-row, .live,
.numbers, .footer, .orientation, .announcement { display: none !important; }
body { font-size: 10.5pt; }
.masthead { position: static; background: none; box-shadow: none; color: var(--ink); }
.brand-logo { filter: invert(1) grayscale(1); }
.brand-name, .brand-sub { color: var(--ink); }
.hero { background: none; color: var(--ink); padding: 0 0 1rem; }
.hero::before, .hero::after { display: none; }
.hero h1 { font-size: 20pt; }
.hero .tagline { -webkit-text-fill-color: var(--ink); color: var(--ink); font-size: 12pt; }
.hosted-by, .hero-facts { color: var(--ink); }
.session { break-inside: avoid; border-left-width: 1px; background: none !important; }
.session summary { padding: .35rem 0; }
.session .body { padding: 0 0 .5rem; }
.session[open] .body { display: block; }
.slot-time { break-after: avoid; }
.tag-now, .tag-track { display: none; }
.person { break-inside: avoid; box-shadow: none; }
.people { display: block; }
a { color: inherit; text-decoration: none; }
}
/* ------------------------------------------------------- „Now"-Balken */
/* Waagerechte Linie mit Beschriftung an der Stelle des Tagesplans, an der
man sich gerade befindet. Nur an dem Tag sichtbar, in dem die aktuelle
Zeit liegt. */
.now-marker {
position: relative;
height: 0;
border-top: 2px solid var(--live);
margin: 1.7rem 0 1.4rem;
}
.now-marker span {
position: absolute; top: 50%; left: 0;
transform: translateY(-50%);
background: var(--live); color: #fff;
font-size: .68rem; font-weight: 800;
letter-spacing: .12em; text-transform: uppercase;
padding: .2rem .6rem; border-radius: 999px;
}
.now-marker.is-end { opacity: .55; }
/* ------------------------------------------- Einklappende Filterleiste */
.filters {
transition: transform .22s ease;
will-change: transform;
}
.filters.is-tucked { transform: translateY(-115%); }
@media (prefers-reduced-motion: reduce) {
.filters { transition: none; }
.filters.is-tucked { transform: none; }
}
/* Sprungziele nicht unter der klebenden Kopfzeile parken. */
.session { scroll-margin-top: 108px; } /* Kopfleiste 96 px plus Luft */
/* Dasselbe Aufblinken wie bei den Sprecherprofilen — wer aus einem Profil
herkommt, soll den Punkt nicht suchen muessen. */
@keyframes session-found {
0%, 100% { box-shadow: 0 0 0 0 rgba(1, 130, 142, 0); }
8%, 42% { box-shadow: 0 0 0 5px rgba(1, 130, 142, .30); }
25% { box-shadow: 0 0 0 2px rgba(1, 130, 142, .12); }
70% { box-shadow: 0 0 0 5px rgba(1, 130, 142, .30); }
}
.session.is-found {
animation: session-found 2.4s ease-in-out;
border-left-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.session.is-found { animation: none; box-shadow: 0 0 0 4px rgba(1, 130, 142, .28); }
}
.now-marker { scroll-margin-top: 110px; }