/* ==========================================================================
   SUMFIN — The Finance Summit
   Backlog 0425. Derived from the agency design dummy
   (ai-kb/_learning_local/Sumfin/sumfin-dummy-v2_Inhalt.html).

   Two deliberate deviations from the dummy:

   1. Fonts are self-hosted, not loaded from fonts.googleapis.com. A German
      event site pulling webfonts from a US CDN discloses every visitor's IP
      without consent -- the exact constellation German courts have ruled on.

   2. The dummy asks for Bricolage Grotesque + Inter Tight. Neither is in the
      asset delivery; the folder contains Montserrat. Montserrat therefore ships
      and carries the hierarchy through weight and tracking instead of through
      three families. Which family is final is still open (0425 Phase 0) -- to
      swap, replace the @font-face blocks and the --display/--body values below.
      Nothing else in this file needs to change.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2-variations"),
       url("../fonts/montserrat-var.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var-italic.woff2") format("woff2-variations"),
       url("../fonts/montserrat-var-italic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #0E1330;
  --ink-2: #161E4D;
  --paper: #F4F5FB;
  /* Verbindlicher Markenton, festgelegt 2026-08-20. Loest das frühere
     #6C72F6 ab; auch die Logodateien tragen exakt diesen Wert. */
  --indigo: #5965ff;
  --lime: #D8FF4A;
  --muted: #98A0CE;

  /* Trennlinien tragen jetzt den Markenton statt eines neutralen Grauschleiers
     und sind doppelt so stark. Beides zentral, damit sich die Wirkung an einer
     Stelle nachjustieren laesst. */
  --line: rgba(89, 101, 255, .38);
  --line-strong: rgba(89, 101, 255, .62);
  --line-w: 2px;

  --display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Small uppercase labels only -- a system stack is enough and saves a
     download that would otherwise cost more than the text it renders. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --max: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 26px; }

/* Keyboard users should not have to tab through the whole nav on every page. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lime); color: var(--ink); padding: 12px 20px;
  font-family: var(--display); font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Nur fuer Vorleser und Crawler: im Baum, nicht im Bild. */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Typography ---- */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--indigo); flex: none; }

/* Die Ueberzeile des Abendteils traegt Lime und eine Spur mehr Groesse: der
   Abend ist der zweite Teil des Tages und nicht der naechste Abschnitt unter
   vielen. Dieselbe Auszeichnung wie in der Zeitleiste (01.09.2026). */
.evening-box .eyebrow { font-size: 14px; letter-spacing: .2em; color: var(--lime); }
.evening-box .eyebrow::before { background: var(--lime); width: 28px; }

h2.big {
  font-family: var(--display); font-weight: 800; letter-spacing: -.035em;
  line-height: .95; font-size: clamp(32px, 5.4vw, 62px); margin: 14px 0 26px;
}
/* Der Wortbestandteil im Fliesstext traegt den Markenton (2026-08-20).
   Zuvor Lime -- das kollidierte mit der Signalfarbe der Schaltflaechen. */
/* Punkt F2: SUMFIN steht aufrecht. Das Lila bleibt -- kursiv war die
   Abweichung, nicht die Farbe. */
.sf { color: var(--indigo); font-style: normal; }
p.lead { font-size: clamp(18px, 2vw, 21px); color: #DDE1F5; max-width: 62ch; }
p.body { color: #C3C9E8; max-width: 62ch; }

/* Panel-Beschreibungen kommen seit 31.08. aus dem Editor der Verwaltung.
   Vorher war jeder Absatz ein <p class="body"> aus der Schleife -- dieselbe
   Optik gilt jetzt fuer alles, was der Editor erzeugen darf. */
.pbody { color: #C3C9E8; max-width: 62ch; }
.pbody p, .pbody ul, .pbody ol { margin: 0 0 16px; }
.pbody :last-child { margin-bottom: 0; }
.pbody ul, .pbody ol { padding-left: 20px; }
.pbody li { margin: 0 0 6px; }
.pbody strong, .pbody b { color: #E6E9FA; font-weight: 700; }
.pbody h4 {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: #E6E9FA; margin: 22px 0 8px; letter-spacing: -.01em;
}
.pbody a { color: var(--lime); text-decoration: underline; }

/* Seit 01.09. steht im Editor die volle Leiste -- Farbe, Groesse, Ausrichtung,
   Tabelle. Was dort gesetzt werden kann, muss hier auch anstaendig aussehen:
   ein unformatiertes <h2> oder eine Tabelle ohne Linien waere auf dunklem
   Grund schlechter als gar keine Formatierung. Inline gesetzte Farben und
   Groessen stechen diese Regeln ohnehin -- das ist gewollt. */
.pbody h2, .pbody h3, .pbody h5 {
  font-family: var(--display); color: #E6E9FA; letter-spacing: -.01em;
  margin: 24px 0 10px; line-height: 1.25;
}
.pbody h2 { font-size: 24px; font-weight: 800; }
.pbody h3 { font-size: 20px; font-weight: 700; }
.pbody h5 { font-size: 15px; font-weight: 700; }
.pbody blockquote {
  margin: 16px 0; padding: 4px 0 4px 16px;
  border-left: 3px solid var(--indigo); color: #DDE1F5;
}
.pbody hr { border: none; border-top: 1px solid rgba(89, 101, 255, .35); margin: 22px 0; }
.pbody s, .pbody del, .pbody strike { opacity: .7; }
.pbody sub, .pbody sup { font-size: .75em; }

/* Tabellen duerfen breiter sein als der Lesetext und muessen auf dem Handy
   scrollen koennen, statt die Seite auseinanderzuschieben. */
.pbody table {
  width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px;
  display: block; overflow-x: auto;
}
.pbody th, .pbody td {
  border: 1px solid rgba(89, 101, 255, .28); padding: 7px 10px; text-align: left;
  vertical-align: top;
}
.pbody th { color: #E6E9FA; font-weight: 700; background: rgba(89, 101, 255, .10); }
.pbody table.fr-dashed-borders th, .pbody table.fr-dashed-borders td { border-style: dashed; }
.pbody table.fr-alternate-rows tbody tr:nth-child(2n) { background: rgba(255, 255, 255, .03); }

section { padding: 100px 0; }

/* ---- Draft banner ---- */
.draft {
  background: var(--indigo); color: #fff; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; padding: 9px;
}

/* ---- Nav ---- */
header.nav {
  /* Leaflet legt seine Ebenen auf z-index 400 bis 1000 -- die Karte lief
     damit UEBER die mitlaufende Navigation. Der Kopf steht deshalb darueber
     (01.09.2026). Der Wert ist bewusst gross gewaehlt und nicht 1001: die
     naechste Bibliothek bringt ihre eigenen Zahlen mit. */
  position: sticky; top: 0; z-index: 2000;
  backdrop-filter: blur(16px); background: rgba(14, 19, 48, .82);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 24px; }
.brand { display: flex; align-items: center; }
/* The mark carries a "The Finance Summit" sub-line inside the SVG; below ~32px
   that line stops being readable and just looks like noise. */
.brand img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 26px; font-size: 14px; color: var(--muted); }
.nav-links a:hover { color: var(--paper); }

/* Punkt 1.3: robuste vertikale Zentrierung. inline-flex mit place-items
   zentriert unabhaengig von Schriftgroesse und Zeilenhoehe -- anders als
   line-height, das bei zwei Zeilen auseinanderfaellt. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; line-height: 1.15;
  font-family: var(--display); font-weight: 600;
  font-size: 14.5px; color: var(--ink); background: var(--lime);
  padding: 11px 22px; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .15s, filter .2s;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--paper); border: var(--line-w) solid var(--line); }
.btn.ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

@media (max-width: 940px) { .nav-links { display: none; } }

/* ---- Hero ---- */
.hero { padding: 92px 0 84px; position: relative; overflow: hidden; border-top: none; }
.hero::after {
  content: ""; position: absolute; top: -160px; right: -140px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(89, 101, 255, .35), transparent 62%);
  pointer-events: none;
}
/* The flow artwork sits behind the headline, heavily dimmed: it should read as
   texture, never compete with the wordmark. */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .18; filter: saturate(.7);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.05em;
  line-height: .86; font-size: clamp(58px, 13vw, 164px);
}
.hero .sub {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(19px, 2.6vw, 30px); color: var(--muted); margin-top: 6px;
}
.motto { margin: 34px 0 30px; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.motto span {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(22px, 3.6vw, 42px); letter-spacing: -.03em; line-height: 1.05;
}
.motto span:nth-child(1) { color: var(--paper); }
.motto span:nth-child(2) { color: var(--indigo); }
.motto span:nth-child(3) { color: var(--lime); }
/* .facts-line entfiel mit Punkt 1.2 -- Regel geloescht, damit keine tote
   Angabe zurueckbleibt. */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero-Logo: die Fassung MIT Unterzeile, mittig. Ersetzt die frühere
   Text-Überschrift -- ein gesetzter Schriftzug ist nie so exakt wie die
   Originaldatei, und die Wortmarke traegt hier die ganze Aussage.
   Die Breite ist gedeckelt, damit die Marke auf grossen Schirmen nicht ins
   Plakathafte kippt. */
.hero.hero-brand { text-align: center; padding: 104px 0 88px; }
.hero-logo {
  width: min(560px, 82vw); height: auto; margin: 0 auto 26px;
}
.hero.hero-brand .motto,
.hero.hero-brand .cta-row { justify-content: center; }
.hero.hero-brand .facts-line { text-align: center; }

/* ---- Absenderzeile unter den Knoepfen (01.09.2026) ----
   Alles im Hero steht mittig -- die Absenderzeile und die Sponsoren aber
   nicht: beides sind Flex-Reihen, und die richten sich ohne Zutun links aus.
   Unter zentrierter Wortmarke, zentriertem Claim und zentrierten Knoepfen
   sass das Logo damit als einziges am linken Rand.

   Logo oben, Zeile darunter: nebeneinander liest sich die Herkunftsangabe wie
   eine Bildunterschrift zum Logo. Untereinander ist sie, was sie ist -- der
   Absender.

   Der groessere Abstand trennt den Block von den Knoepfen: er ist
   Herkunftsangabe, nicht die dritte Handlungsmoeglichkeit. */
.hero.hero-brand .host-hero {
  flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 14px; margin-top: 72px;
}

/* Dieselbe Auszeichnung wie „sponsored by": beide Zeilen sind Beiwerk unter
   der Marke und sollen als ein System auftreten, nicht als zwei Schriften. */
.hero.hero-brand .host-hero span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

.hero.hero-brand .sponsors { justify-content: center; margin-top: 30px; }

/* ---- Facts grid ---- */
/* Vier Angaben in drei Spalten liessen die vierte allein in der zweiten Reihe
   stehen. Zwei mal zwei ist die ruhigere Ordnung (01.09.2026). */
.facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-top: 44px;
}
.facts > div { background: rgba(89, 101, 255, .10); padding: 24px; border-radius: 12px; }
.facts dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.facts dd { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr; } }

/* ---- Pull quote / host ---- */
.pull {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 3.2vw, 34px); line-height: 1.2; letter-spacing: -.03em;
  color: var(--lime); border-left: 2px solid var(--lime);
  padding-left: 24px; margin: 34px 0; max-width: 24ch;
}
.host {
  display: flex; align-items: center; gap: 20px; margin-top: 40px;
  padding-top: 0; color: var(--muted); font-size: 14px; flex-wrap: wrap;
}
.host img { height: 44px; width: auto; flex: none; opacity: .9; }

/* ---- Section image ---- */
.section-img { margin-top: 44px; overflow: hidden; }
.section-img img { width: 100%; }
.section-img figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  padding: 12px 16px;
}

/* ---- Speaker ----------------------------------------------------------
   Organische "Bubble"-Formen statt Rechtecke, angelehnt an die runden
   Fragment-Formen der CCF-Bildwelt.
   ENTWURF: der Referenz-Screenshot der Website lag nicht vor (abgelegt wurde
   versehentlich ein anderes Bild), das hier ist eine Auslegung.

   Technik: border-radius mit vier unterschiedlichen Radien je Achse ergibt
   eine unregelmässige, weiche Form. Vier Varianten wechseln sich ab, damit
   das Raster nicht wie gestempelt wirkt. Die Animation verschiebt die Radien
   langsam -- sie soll auffallen, wenn man hinsieht, und nicht, wenn man
   liest. */
.speakers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; margin-top: 12px; }

.spk { text-align: center; }

.spk .ph {
  position: relative; aspect-ratio: 1; overflow: hidden;
  margin: 0 auto 16px; width: 100%; max-width: 240px;
  background: linear-gradient(160deg, #1D2559, #232C6B);
  /* Punkt 3.1: Kontur beibehalten, Staerke verdreifachen.
     Ausgangswert war --line-w (2px), verbindlich sind daher 6px.
     Gilt ausschliesslich fuer Speaker-Bilder. */
  border: 6px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: .02em; color: var(--indigo);
  border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .45s;
  animation: sf-bubble 18s ease-in-out infinite;
}
.spk .ph img { width: 100%; height: 100%; object-fit: cover; }

.spk:nth-child(4n+2) .ph { border-radius: 44% 56% 58% 42% / 46% 54% 46% 54%; animation-delay: -4s; }
.spk:nth-child(4n+3) .ph { border-radius: 52% 48% 40% 60% / 58% 42% 58% 42%; animation-delay: -9s; }
.spk:nth-child(4n+4) .ph { border-radius: 60% 40% 54% 46% / 44% 58% 42% 56%; animation-delay: -13s; }

.spk:hover .ph { transform: translateY(-6px) scale(1.02); border-color: var(--lime); }

/* Die Radien wandern gegenlaeufig -- dadurch "atmet" die Form, statt sich
   sichtbar zu drehen. */
@keyframes sf-bubble {
  0%, 100% { border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%; }
  33%      { border-radius: 44% 56% 60% 40% / 44% 60% 40% 56%; }
  66%      { border-radius: 62% 38% 40% 60% / 60% 42% 58% 40%; }
}

.spk h3 { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.spk p { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }

/* Wer noch kein Foto geliefert hat, bekommt die Initialen in derselben Form --
   eine leere Kachel neben Portraets sieht nach Fehler aus, Initialen nach
   Absicht. */
.spk .ph.is-empty { background: linear-gradient(160deg, #1A2150, #232C6B); }

.note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 26px; letter-spacing: .06em; }

@media (max-width: 900px) { .speakers { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } }
@media (max-width: 460px) { .speakers { grid-template-columns: 1fr; } }

/* ---- Programme ---- */
.slot {
  display: grid; grid-template-columns: 150px 1fr 130px; gap: 24px;
  padding: 22px 0; align-items: baseline;
}
.slot time { font-family: var(--mono); font-size: 14px; color: var(--lime); letter-spacing: .04em; }
.slot h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.slot p { font-size: 14.5px; color: var(--muted); }
.slot .tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); text-align: right;
}
.pno-inline {
  font-family: var(--display); font-weight: 800; font-size: 30px;
  line-height: 1.05; letter-spacing: -.035em; color: var(--indigo);
}
.slot.evening h3 { color: var(--indigo); }
@media (max-width: 780px) {
  .slot { grid-template-columns: 1fr; gap: 6px; }
  .slot .tag { text-align: left; }
}

/* ---- Panels ---- */
/* Ohne die durchlaufenden Trenner: bei vier Formaten ergaben sie fuenf lange
   Linien in einem Abschnitt und liessen die Panels wie Tabellenzeilen wirken.
   Der Abstand trennt sie ausreichend. */
.panel {
  padding: 40px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
.pnum { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.pnum .pno {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(40px, 6.4vw, 74px); line-height: .9;
  letter-spacing: -.045em; color: var(--indigo);
}
.pnum .pcat {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.panel h3 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 3.2vw, 36px); line-height: 1.05;
  letter-spacing: -.035em; margin-bottom: 12px;
}
.pmeta { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.pmeta em { color: var(--lime); font-style: italic; }
.panel ul { list-style: none; margin-top: 18px; }
.panel li {
  font-size: 15px; color: #C3C9E8; padding: 9px 0 9px 22px;
  /* Listenzeilen bewusst feiner als die Abschnittstrenner: mit voller Staerke
     wirkt die Aufzaehlung wie eine Tabelle. */
  position: relative;
}
.panel li::before { content: "\2192"; position: absolute; left: 0; color: var(--indigo); }
@media (max-width: 820px) { .panel { grid-template-columns: 1fr; gap: 16px; } }

/* ---- Evening ---- */
.evening-box {
  padding: clamp(28px, 5vw, 56px); border-radius: 16px;
  background: linear-gradient(140deg, rgba(89, 101, 255, .18), rgba(89, 101, 255, .04) 70%);
}
.evening-img { margin-top: 30px; overflow: hidden; }
.evening-img img { width: 100%; }

/* ---- Access / forms ---- */
.access {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 12px;
}
.access > div { background: rgba(89, 101, 255, .10); padding: clamp(26px, 4vw, 40px); border-radius: 14px; }
.access h3 { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.025em; margin-bottom: 10px; }
.access p { font-size: 14.5px; color: var(--muted); margin-bottom: 22px; }

label {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
input, textarea {
  width: 100%; background: #131A42; border: var(--line-w) solid var(--line);
  color: var(--paper); font-family: var(--body); font-size: 15px;
  padding: 11px 13px; margin-bottom: 16px; border-radius: 4px;
}
input:focus, textarea:focus { border-color: var(--indigo); outline: none; }
input:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.code-input { font-family: var(--mono); letter-spacing: .3em; text-transform: uppercase; font-size: 17px; }
.hint { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; margin-top: 14px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.consent input { width: auto; margin: 4px 0 0; flex: none; accent-color: var(--lime); }
.consent label {
  font-family: var(--body); font-size: 13px; letter-spacing: 0;
  text-transform: none; color: var(--muted); margin: 0; line-height: 1.5;
}
.consent a { color: var(--lime); text-decoration: underline; }

/* Honeypot: must be reachable for a bot that parses the DOM, invisible and
   unreachable for a human. display:none is skipped by some bots, so this hides
   it positionally instead. */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.form-notice {
  border: 1px solid var(--indigo); background: rgba(89, 101, 255, .1);
  padding: 14px 16px; font-size: 13.5px; color: #DDE1F5; margin-bottom: 22px;
}

@media (max-width: 820px) {
  .access { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
}

/* ---- Legal pages ---- */
.legal { padding: 60px 0 90px; }
.legal h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.04em; margin-bottom: 28px; }
.legal h2 { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -.02em; margin: 34px 0 10px; }
.legal p, .legal li { color: #C3C9E8; font-size: 15.5px; max-width: 70ch; }
.legal ul { margin: 10px 0 0 20px; }
.legal li { padding: 3px 0; }
.legal .todo {
  background: rgba(108, 114, 246, .08); border-radius: 8px;
  padding: 14px 18px; margin: 18px 0; font-size: 14.5px; color: #DDE1F5;
}

/* ---- Footer ---- */
footer { padding: 56px 0 70px; font-size: 14px; color: var(--muted); }
.foot-motto {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 5.4vw, 58px); letter-spacing: -.04em;
  line-height: 1; color: var(--paper); margin-bottom: 34px;
}
.foot-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot-row a:hover { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---- Abstands-Hilfsklassen ------------------------------------------------
   Ersetzen die früheren style="..."-Attribute im Markup. Grund ist nicht
   Stilfrage, sondern die Content-Security-Policy des vHosts: mit
   style-src 'self' blockiert der Browser jedes Inline-Style-Attribut. Die
   Alternative wäre 'unsafe-inline' gewesen — damit wäre die Richtlinie
   wirkungslos, denn genau darüber läuft der Grossteil von DOM-basiertem XSS. */
.u-mt-16 { margin-top: 16px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-22 { margin-top: 22px; }
.u-mt-34 { margin-top: 34px; }
.u-mt-36 { margin-top: 36px; }
.u-mb-36 { margin-bottom: 36px; }
.u-mb-40 { margin-bottom: 40px; }
.u-mb-44 { margin-bottom: 44px; }
.u-measure-52 { max-width: 52ch; }

/* Hero-Hintergrundbild. Lag als Inline-Style im Markup, weil der Pfad aus PHP
   kam; der Pfad ist aber konstant. Bei einem Bildwechsel muss die
   Cache-Kennung des Stylesheets mitwandern ($sumfin_asset_version). */
.hero-bg { background-image: url("../img/hero-flow.webp"); }

/* Kurze Hero-Variante für Unterseiten ohne Fliesstext (z.B. confirm.php). */
.hero.hero-compact { padding: 120px 0 100px; }

/* Rückmeldung der Formulare. Wird von assets/js/forms.js eingeblendet und
   ist für Screenreader als aria-live-Bereich ausgezeichnet. */
.form-status { font-size: 14px; margin-top: 14px; padding: 11px 14px; border-radius: 6px; }
.form-status.is-ok    { background: rgba(216,255,74,.10); color: var(--lime);  border: 1px solid rgba(216,255,74,.35); }
.form-status.is-error { background: rgba(255,116,116,.10); color: #ff9a9a; border: 1px solid rgba(255,116,116,.35); }

/* Hinweis unter den Wallet-Knoepfen: leiser als der Fliesstext, aber lesbar. */
.sf-note-small { margin-top: 14px; font-size: 13px; color: var(--muted); max-width: 52ch; }

/* Veranstalterzeile im Kopfbereich: dieselbe Anordnung wie im Abschnitt
   darunter, aber ohne Trennlinie und enger gesetzt -- im Kopf steht sie
   direkt unter den Knoepfen und braucht keine eigene Abgrenzung. */
.host-hero { margin-top: 30px; padding-top: 0; border-top: none; }
/* Der Absender steht ueber den Sponsoren -- also auch eine Spur groesser.
   32 px sind die Logos im Streifen, 46 px die eigene Marke. */
.host-hero img { height: 46px; }

/* ---- Rueckmeldung auf der Ticket-Seite ----
   Zwei Haken statt eines Knopfes: das Abendprogramm ist ein eigener Termin,
   und die Kuechenplanung braucht die Zahl getrennt. */
.rsvp { max-width: 52ch; }
.rsvp-parts { border: none; padding: 0; margin: 0 0 22px; }
.rsvp-parts legend {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 12px;
}
.rsvp-parts label {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  background: rgba(89,101,255,.10); border-radius: 10px;
  transition: background .15s;
}
.rsvp-parts label:hover { background: rgba(89,101,255,.20); }
.rsvp-parts input { margin-top: 3px; accent-color: var(--indigo); width: 18px; height: 18px; flex: none; }
.rsvp-parts span { font-size: 15px; line-height: 1.45; }
.rsvp-parts span strong { font-weight: 600; }
/* Hinweiszeilen im Zusageformular: leise, aber lesbar. Sie erklaeren, was
   die zwei Kaestchen erlauben -- ohne sie liest sich das wie ein Paket. */
.rsvp-hint { font-size: 13px; color: var(--muted); margin: -4px 0 12px; line-height: 1.5; }
/* Die Absage steht abgesetzt unter den beiden Programmteilen: sie ist keine
   dritte Teilnahme, sondern deren Gegenteil. */
.rsvp-parts .rsvp-nein {
  margin-top: 12px; padding-top: 14px;
  border-top: 1px solid rgba(89, 101, 255, .22);
}
.rsvp-hint[hidden] { display: none; }

.rsvp-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
.rsvp-note summary { cursor: pointer; }
.rsvp-note textarea {
  width: 100%; margin-top: 10px; padding: 10px 12px; font: inherit;
  color: inherit; background: transparent;
  border: var(--line-w) solid var(--line); border-radius: 8px;
}

/* ---- sponsored by ----
   Unter der Veranstalterzeile im Kopf. Die Logos kommen in unterschiedlichen
   Seitenverhaeltnissen, deshalb wird die HOEHE festgelegt und die Breite laeuft
   mit -- sonst steht ein breites Wortmarken-Logo neben einem quadratischen und
   beide wirken verschieden gross. */
/* ---- Sponsoren als eigene Sektion (01.09.2026) ----
   Vorher hingen sie unten im Hero und rutschten dort an den linken Rand.
   Jetzt ein eigener, gerahmter Streifen zwischen Hero und Einleitung: eng
   genug an der Marke, um dazuzugehoeren, und deutlich genug abgesetzt, um
   als Aussage gelesen zu werden. Die Sektion traegt bewusst wenig Polsterung
   -- die 100px der uebrigen Sektionen wuerden den Streifen vom Hero
   abreissen, zu dem er gehoert. */
.sponsors-band { padding: 56px 0 8px; }
/* Derselbe Kasten, aber innerhalb einer bestehenden Sektion -- dort traegt
   schon `.wrap` die Breite, und die Polsterung kommt von den Nachbarn. */
.sponsors-band-inline { padding: 0; margin: 44px 0 0; }
.sponsors-band .sponsors {
  margin: 0 auto; justify-content: center; gap: 30px;
  border: 1px solid rgba(89, 101, 255, .30); border-radius: 14px;
  padding: 26px 40px; background: rgba(89, 101, 255, .05);
  /* Ueber die volle Breite der Seite: der Streifen soll auf einer Linie mit
     den uebrigen Abschnitten stehen. Ein schmalerer Kasten sah aus wie ein
     Etikett um zwei Logos statt wie eine eigene Sektion. */
  width: 100%;
}
/* Mehrere Sektionen untereinander: ein Kasten je Sektion, mit Luft dazwischen. */
.sponsors-band .sponsors + .sponsors { margin-top: 14px; }
@media (max-width: 560px) {
  .sponsors-band .sponsors { flex-direction: column; gap: 18px; padding: 20px; }
}

.sponsors { margin-top: 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sponsors-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); flex: none;
}
.sponsors ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
/* Gleiche Hoehe UND gedeckelte Breite: eine einzeilige Wortmarke wie Morgan
   Stanley wuerde sonst dreimal so breit wie ein kompaktes Logo und damit
   dreimal so laut. Die Hoehe macht sie vergleichbar, die Breite haelt die
   Reihe im Gleichgewicht. Voraussetzung ist der Zuschnitt beim Hochladen
   (sfp_logo_trim) -- ohne ihn misst die Hoehe den leeren Rand mit. */
.sponsors img {
  /* 36 px Hoehe, 240 px Breite: der Deckel lag bei 190 px und stauchte jede
     breite Wortmarke -- das börsenbuchverlag-Logo kam so auf 23 px Hoehe und
     stand neben Morgan Stanley wie eine Fussnote (02.09.2026). */
  height: 36px; width: auto; max-width: 240px; object-fit: contain;
  opacity: .9; transition: opacity .15s;
}
.sponsors a:hover img { opacity: 1; }
@media (max-width: 560px) { .sponsors img { height: 24px; } }

/* ---- Veranstaltungsorte ----
   Die Links stehen klein hinter der Anschrift statt als Knopf: sie sind ein
   Angebot, keine Handlungsaufforderung -- der Gast ist schon eingeladen. */
.venue-links { display: block; margin-top: 8px; font-size: 13px; }
.venue-links a { color: var(--lime); text-decoration: none; border-bottom: 1px solid transparent; }
.venue-links a:hover { border-bottom-color: var(--lime); }
.venue-links a + a { margin-left: 16px; }

.venue {
  margin-top: 30px; padding: 22px 24px;
  border-radius: 12px; background: rgba(89,101,255,.10);
}
/* Name und Anschrift untereinander statt nebeneinander: die Anschrift ist
   keine Fussnote zum Namen, sondern die Angabe, die man abschreibt. Gleiche
   Groesse, fett -- der Name traegt die Farbe. */
.venue-head { display: block; margin-bottom: 10px; }
.venue-head h3 {
  font-family: var(--display); font-size: 19px; font-weight: 600; margin: 0 0 4px;
  color: var(--lime);
}
.venue-head span {
  display: block; font-family: var(--display); font-size: 19px; font-weight: 700;
  color: #E6E9FA;
}
.venue .body { margin: 0; font-size: 15px; }

/* Abweichender Ort in der Zeitleiste -- faellt auf, weil er die Ausnahme ist. */
.tag-venue { color: var(--lime); }

/* ---- Kartenausschnitt ----
   Serverseitig aus OpenStreetMap-Kacheln erzeugt und von dieser Domain
   ausgeliefert: der Browser des Gastes spricht mit keinem fremden Server. */
.venue-map { margin: 18px 0 0; }
.venue-map img {
  display: block; width: 100%; height: auto; max-width: 640px;
  border-radius: 10px;
}
.venue-map figcaption { margin-top: 6px; font-size: 11px; color: var(--muted); }
.venue-main { margin-top: 34px; }

/* ---- Fotos einer Location ----
   Waagerecht scrollbar statt umbrechend: bei zwei Bildern sieht ein Raster
   zufaellig aus, bei fuenf wird die Seite lang. Eine Reihe bleibt in beiden
   Faellen ruhig -- und am Handy wischt man ohnehin. */
.venue-photos {
  display: flex; gap: 14px; margin-top: 18px;
  overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.venue-photos figure { margin: 0; flex: 0 0 auto; max-width: 320px; scroll-snap-align: start; }
.venue-photos img {
  display: block; width: 100%; height: 200px; object-fit: cover;
  border-radius: 10px;
}
.venue-photos figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.venue-photos .credit { opacity: .7; }
@media (max-width: 560px) { .venue-photos figure { max-width: 82vw; } }

/* ---- Interaktive Ortskarte ----
   Vor dem Start steht hier das serverseitig gerenderte Bild; `is-live` setzt
   das Skript, bevor es Leaflet startet -- ohne feste Hoehe faellt der
   Behaelter sonst auf null zusammen, sobald das Bild entfernt wird. */
/* Eigener Stapelkontext um die Karte: damit bleiben Leaflets Ebenen INNERHALB
   des Kastens und koennen nichts ausserhalb ueberlagern -- unabhaengig davon,
   welche Zahlen die Bibliothek intern vergibt. */
.venue-map-box { max-width: 640px; position: relative; z-index: 0; isolation: isolate; }
.venue-map-box.is-live {
  height: 340px; border-radius: 10px; overflow: hidden;
}
.venue-map-box .leaflet-container { background: #0b0f20; font: inherit; }
.venue-map-box .leaflet-control-attribution {
  background: rgba(15,20,38,.86); color: var(--muted); font-size: 11px;
}
.venue-map-box .leaflet-control-attribution a { color: var(--lime); }
.venue-map-box .leaflet-bar a {
  background: rgba(15,20,38,.9); color: #e8ecff; border-bottom-color: var(--line);
}
.venue-map-box .leaflet-bar a:hover { background: var(--indigo); color: #fff; }
@media (max-width: 560px) { .venue-map-box.is-live { height: 260px; } }

/* ---- Bruch zwischen Tag und Abend ----
   Vorher unterschied nur die Schriftfarbe die beiden Teile. Das ist zu wenig
   fuer eine Information, an der ein Gast seinen Abend plant -- inklusive der
   Frage, ob er nach 18 Uhr noch woandershin muss. */
.slot-break {
  display: grid; grid-template-columns: 150px 1fr; gap: 24px;
  padding: 22px 20px; margin: 14px 0;
  background: rgba(89, 101, 255, .16); border-radius: 12px;
}
.slot-break-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lime);
}
.slot-break-text { font-size: 15px; line-height: 1.6; color: #C3C9E8; max-width: 58ch; }
.slot-break-text strong { color: #fff; font-weight: 600; }
/* Der Ort ist verlinkt -- das muss man sehen, sonst klickt niemand. Dieselbe
   Auszeichnung wie bei den Links unter der Anschrift. */
.slot-break-text a { color: var(--lime); text-decoration: none; border-bottom: 1px solid transparent; }
.slot-break-text a strong { color: inherit; }
.slot-break-text a:hover { border-bottom-color: var(--lime); }

/* Der Abendblock stand bis 01.09. in einem eigenen Kasten. Der Kasten ist
   raus -- die Zeile hebt sich jetzt ueber die Ueberzeile „Abendveranstaltung"
   ab, so wie „Panel 1" oder „Ausklang". Schrift und Farben bleiben, damit der
   Abend weiterhin als eigener Teil des Tages lesbar ist. */
.slot.evening h3 { color: #fff; }
.slot.evening time { color: var(--indigo); }

/* Zusatzzeile in den Eckdaten (Ort unter der Uhrzeit). */
/* Der Ort steht gleichrangig neben der Uhrzeit: gleiche Groesse, gleicher
   Schnitt -- nur in Lime, damit man ihn als das Zweite im Feld erkennt. */
.fact-sub {
  color: var(--lime); font-family: var(--display); font-weight: 600;
  font-size: 22px; letter-spacing: -.02em; display: inline-block; margin-top: 2px;
}

@media (max-width: 780px) {
  .slot-break { grid-template-columns: 1fr; gap: 8px; }
}


/* ---- Uhrzeit-Trennzeichen ----
   Kein Abstand: die Zeitspanne steht als 14:45-15:20 zusammen. Punkt 5.3 war
   zuvor zweimal falsch ausgelegt (0,0325 em, dann 0,125 em um einen
   Halbgeviertstrich) -- gemeint war die schlichte Schreibweise ohne Luft. */
.slot time .sep { margin: 0; }


/* ---- Punkt F3: Subline ueberall gleich ----
   ACHTUNG beim Aendern: zwischen den Spans steht je ein <br>, und
   :nth-child zaehlt die mit. Deshalb :nth-of-type -- damit werden nur die
   Spans gezaehlt. Mit :nth-child blieben Wort zwei und drei ungefaerbt, weil
   sie die Kinder 3 und 5 sind. */
   Im Kopfbereich stand sie dreifarbig, im Fussbereich einfarbig. Die
   Drei-Farben-Logik wird bis zu einer anderen Freigabe beibehalten und an
   beiden Stellen identisch angewendet. */
.foot-motto span:nth-of-type(1) { color: var(--paper); }
.foot-motto span:nth-of-type(2) { color: var(--indigo); }
.foot-motto span:nth-of-type(3) { color: var(--lime); }

/* ---- Schrift im Textkasten ----
   Die Aenderungsanweisung (Punkt 2.2) verlangt grelles Gruen. Marcus hat das
   am 31.08. auf Weiss geaendert -- der Absatz ist lang, und ueber sieben
   Zeilen ermuedet das Gruen. WIDERSPRUCH ZUM FREIGEGEBENEN DOKUMENT: vor der
   Veroeffentlichung mit Gaby abstimmen, wer recht behaelt. */
.textbox { max-width: 62ch; margin: 0; }
.textbox, .textbox p { color: var(--paper); }
.textbox p { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.6; margin: 0 0 18px; }
.textbox p:last-child { margin-bottom: 0; }

/* ---- Punkt F5: Moodbilder als Uebergang ----
   Volle Breite zwischen den Abschnitten, ohne Rahmen und ohne Trennlinie.
   Die Hoehe ist begrenzt, damit ein Moodbild einen Uebergang setzt und
   nicht selbst zum Abschnitt wird. */
.mood { width: 100%; overflow: hidden; line-height: 0; }
/* Bahnen nur mit Motiven, die einen Beschnitt vertragen -- Stadtansichten.
   Etwas hoeher als zuvor: bei 26vw wurde aus jedem Motiv ein Streifen, in dem
   nichts mehr zu erkennen war. */
.mood img { width: 100%; height: clamp(220px, 32vw, 420px); object-fit: cover; display: block; }
/* Der Turm sitzt links der Mitte; ein mittiger Beschnitt schneidet ihn an. */
.mood-tower img { object-position: 34% center; }
/* Personenbilder bleiben ungeschnitten -- sonst faellt der Kopf weg. */
.mood-full { border-radius: 16px; margin: 0 auto; }
.mood-full img { height: auto; object-fit: contain; }

/* Flowfragmente im Einstiegsbereich -- hinter dem Text, nie darueber. */
.hero-flow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* `cover` statt einer einzelnen, rechts gesetzten Kopie: vorher endete das
     Muster in der linken Bildhaelfte und der Einstiegsbereich wirkte halb
     leer. `cover` fuellt die ganze Flaeche, unabhaengig vom Seitenverhaeltnis
     des Fensters -- ohne Kachelfugen, die bei diesem Motiv auffallen wuerden. */
  background: url("/assets/img/flow-fragments.svg") center center / cover no-repeat;
  opacity: .16;
}
.hero .wrap { position: relative; z-index: 1; }

/* ---- Punkt 7.2: Keyvisual und Sublogo ----
   Eine Gruppe, ohne Rahmen. Die gelieferte Datei traegt Wortmarke und
   Jubilaeums-Sublogo bereits gemeinsam. */
.fmf-key { margin-top: 30px; overflow: hidden; border-radius: 14px; line-height: 0; }
.fmf-key img { width: 100%; height: auto; display: block; }


/* Sobald die Karte laeuft, traegt Leaflet die Namensnennung selbst.
   Die Unterzeile bleibt fuer den Fall ohne JavaScript -- doppelt gehoert
   sie nicht auf die Seite. */
.venue-map:has(.venue-map-box.is-live) figcaption { display: none; }


/* Der Aufruf im Teilnahmehinweis muss als Link erkennbar sein. */
p.lead a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
p.lead a:hover { color: var(--paper); }


/* Sprung von der Zeitleiste in den Panel-Detailbereich. */
.slot-jump { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(216,255,74,.45); }
.slot-jump:hover { color: var(--lime); border-bottom-color: var(--lime); }

/* „mehr" am Ende des gekuerzten Anrisses -- der Weg zum vollen Text. */
.slot-more {
  color: var(--lime); text-decoration: none; font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.slot-more:hover { border-bottom-color: var(--lime); }

/* Der Abend traegt seine Ueberzeile groesser und in Lime: er ist der zweite
   Teil des Tages und nicht das siebte Panel. */
.slot.evening .pno-inline { color: var(--lime); font-size: 36px; }

/* ---- „more to come" unter der Speaker-Galerie ----
   Die Linien links und rechts machen daraus einen Abschluss statt einer
   vergessenen Zeile. */
.more-to-come {
  display: flex; align-items: center; gap: 18px;
  margin: 40px 0 0; color: var(--muted);
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase;
}
.more-to-come::before, .more-to-come::after {
  content: ''; flex: 1; height: 1px; background: rgba(89, 101, 255, .30);
}
.more-to-come span { color: var(--lime); }
/* Beim Springen nicht unter der klebenden Kopfzeile landen. */
.panel[id] { scroll-margin-top: 90px; }

/* Ortskarte im Abendbereich: gleiche Bauart, aber ohne eigene Flaeche --
   sie sitzt bereits in der Flaeche des Abendblocks. */
.venue-evening { background: transparent; padding: 0; margin-top: 26px; }


/* Punkt F6: der Verweis auf Cash Cow Farmers muss als Link erkennbar sein --
   in derselben Farbe wie der Fliesstext waere er nur ein Wort. */
footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: var(--lime); }