@import url(assets/fonts/manrope.css);

/* Sympscreen – Screen-Layout
   Glas-Panels auf dem Symposium-Hintergrund, große Typografie, kleine Uppercase-Labels.
   Alle Maße in vw/vh, damit 1080p, 4K und Beamer identisch aussehen. */

:root {
  --sidebar-w: 27vw;
  --bg: #ffffff;               /* Sidebar: rein weiß */
  --ink: #181716;
  --muted: #6b6b67;
  --font: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 2vw;

  /* Blauer Verlauf aus dem Original-Hintergrund gesampelt; der Swoosh liegt als
     eigene transparente Ebene (assets/bg/swoosh.png) darüber und wird animiert. */
  --slide-gradient: linear-gradient(180deg, #1a5e92 0%, #1364a5 20%, #247cc0 40%, #3894db 60%, #54b1f1 80%, #7ed4fd 100%);
  --swoosh-opacity: .16;

  /* Textschatten für Lesbarkeit direkt auf dem Verlauf */
  --text-shadow: 0 .3vh 1.6vh rgba(0, 20, 50, .28);
}

::selection { background: rgba(255, 255, 255, .25); }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  font-family: var(--font);
  color: var(--ink);
  overflow: hidden;
  cursor: none;
}

.screen {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  height: 100vh;
}

/* ================= Labels & Pills ================= */

/* Kein Glas: .glass ist nur noch ein Layout-Hook ohne eigene Fläche */
.glass { position: relative; }

.label {
  font-size: .72vw;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: .55em 1.1em;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .7);
  font-size: .8vw;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.pill.live::before {
  content: '';
  margin-right: .5vw;
  width: .5vw;
  height: .5vw;
  border-radius: 50%;
  background: #7ef0a8;
  box-shadow: 0 0 0 .25vw rgba(126, 240, 168, .3);
}

/* ================= Slides (links) ================= */

.stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--slide-gradient);
  color: #fff;
}

/* ---------- Animierter Hintergrund ----------
   Drei Ebenen, alle nur über transform/opacity animiert (GPU, kein Repaint):

   1. .breath   Ein zweiter Verlauf mit kühlerer Stimmung wird über 46 s ein- und
                ausgeblendet. Der Grundton "atmet", ohne dass ein Verlauf neu gemalt wird.
   2. .aurora   Drei große, weiche Lichtfelder. Jedes hängt in zwei verschachtelten
                Wrappern: der äußere pendelt nur horizontal, der innere nur vertikal,
                mit unterschiedlichen, teilerfremden Perioden. Das ergibt eine
                Lissajous-Bahn, die nie sichtbar in Schleife läuft und keinen
                "Ping-Pong"-Eindruck hat. Das Feld selbst atmet zusätzlich in der Größe.
   3. .bg       Der Swoosh (Logo-Motiv) treibt sehr langsam, eine weiche Kopie dahinter
                gibt Tiefe. */

/* WebGL-Verlauf (components/fluid-bg.js). Ist er aktiv, werden die CSS-Ebenen ausgeblendet. */
.fluid {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.stage.has-webgl .breath,
.stage.has-webgl .aurora { display: none; }

.breath {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(200deg, #0f4f8f 0%, #1a72b8 35%, #2f96d8 65%, #6fd0f6 100%);
  opacity: 0;
  animation: breath 46s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes breath { from { opacity: 0; } to { opacity: .85; } }

.aurora {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  pointer-events: none;
}
.orb-x, .orb-y { position: absolute; top: 0; right: 0; bottom: 0; left: 0; will-change: transform; }
.orb {
  position: absolute;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  will-change: transform;
  /* Weicher Abfall über den Verlauf selbst statt filter: blur – deutlich günstiger */
  background: radial-gradient(circle at center, var(--c) 0%, transparent 62%);
}
.o1 { --c: rgba(160, 225, 255, .55); top: -30vw; left: -20vw; animation: pulse 23s ease-in-out infinite alternate; }
.o2 { --c: rgba(6, 40, 95, .55);     top: 10vw;  left: 25vw;  width: 60vw; height: 60vw; animation: pulse 31s ease-in-out infinite alternate-reverse; }
.o3 { --c: rgba(215, 245, 255, .40); top: 25vw;  left: -25vw; width: 50vw; height: 50vw; animation: pulse 37s ease-in-out infinite alternate; }

.x1 { animation: sway-x 41s ease-in-out infinite alternate; }
.y1 { animation: sway-y 29s ease-in-out infinite alternate; }
.x2 { animation: sway-x 53s ease-in-out infinite alternate-reverse; }
.y2 { animation: sway-y 34s ease-in-out infinite alternate; }
.x3 { animation: sway-x 47s ease-in-out infinite alternate; }
.y3 { animation: sway-y 61s ease-in-out infinite alternate-reverse; }

@keyframes sway-x { from { transform: translateX(-9vw); } to { transform: translateX(9vw); } }
@keyframes sway-y { from { transform: translateY(-7vh); } to { transform: translateY(7vh); } }
@keyframes pulse  { from { transform: scale(.9);       } to { transform: scale(1.12);      } }

.bg {
  position: absolute;
  top: -6%; right: -6%; bottom: -6%; left: -6%;
  background: url(assets/bg/swoosh.png) center / cover no-repeat;
  opacity: var(--swoosh-opacity);
  will-change: transform;
  animation: drift 52s ease-in-out infinite alternate;
  pointer-events: none;
}
.bg.echo {
  opacity: calc(var(--swoosh-opacity) * .45);
  filter: blur(1.6vw);
  transform-origin: 65% 35%;
  animation: drift-echo 75s ease-in-out infinite alternate;
}
@keyframes drift      { from { transform: translate(-1.6%, -1%) scale(1);    } to { transform: translate(1.6%, 1.2%) scale(1.06); } }
@keyframes drift-echo { from { transform: translate(1.5%, 1.5%) scale(1.08); } to { transform: translate(-1.5%, -1%) scale(1.02); } }

/* Reduzierte Bewegung: Lichtfelder bleiben stehen, nur das langsame Atmen des Farbtons bleibt */
@media (prefers-reduced-motion: reduce) {
  .bg, .orb, .orb-x, .orb-y { animation: none; }
}

/* Kopfzeile: Event-Logo links */
.topbar {
  position: absolute;
  top: 4vh;
  left: 3vw;
  right: 3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
}
.event-logo {
  height: 6.2vh;
  width: auto;
  filter: drop-shadow(0 .4vh 1.4vh rgba(0, 0, 0, .25));
}

/* Slide-Container mit Überblendung */
.slide {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s ease;
  padding: 14vh 3vw 5vh;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 3vh;
}
.slide.active { opacity: 1; }

/* ---------- Session-Karte: Titel + Zeitleiste ---------- */

.session-card {
  padding: 0 0 3.5vh;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 1.4vh 2.5vw;
  align-items: end;
}
.session-card .pill { grid-column: 1; grid-row: 1; justify-self: start; }
.session-card .title {
  grid-column: 1; grid-row: 2;
  margin: 0;
  font-size: 4.4vw;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-shadow: var(--text-shadow);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.session-card .subtitle {
  grid-column: 1; grid-row: 3;
  margin: 0;
  font-size: 1.25vw;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
  text-shadow: var(--text-shadow);
  overflow-wrap: anywhere;
}
.session-card .timebox {
  grid-column: 2; grid-row: 1 / 4;
  align-self: end;
  display: flex;
  justify-content: flex-end;
  font-size: 2.3vw;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: var(--text-shadow);
  white-space: nowrap;
}
.session-card .timebox > span + span { margin-left: 2.2vw; }
.session-card .timebox small {
  font-size: .38em;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
  display: block;
  margin-bottom: .9vh;
}

/* Session ohne Personen (Hackathon, Panel ohne Fotos): Block vertikal mittig */
.slide.solo { grid-template-rows: 1fr; align-items: center; }
.slide.solo .session-card { border-bottom: 0; padding-bottom: 0; }

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

.people {
  display: grid;
  gap: 2.2vh 1.2vw;
  min-height: 0;
  --portrait: 16vh;
}
.people[data-count="1"] { grid-template-columns: 1fr; --portrait: 32vh; }
.people[data-count="2"] { grid-template-columns: 1fr 1fr; --portrait: 22vh; }
.people[data-count="3"],
.people[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; --portrait: 17vh; }
.people[data-count="3"] figure:nth-child(3) { grid-column: 1 / -1; }
.people[data-count="5"],
.people[data-count="6"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; --portrait: 14vh; }

.people figure {
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 1vh 0;
}
.people figure img { margin-right: 1.8vw; }
.people[data-count="1"] figure { padding: 2vh 0; }
.people[data-count="1"] figure img { margin-right: 2.6vw; }
.people figure img {
  flex: none;
  width: var(--portrait);
  height: var(--portrait);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: .35vh solid rgba(255, 255, 255, .85);
  box-shadow: 0 1vh 2.6vh rgba(0, 0, 0, .25);
  background: rgba(255, 255, 255, .15);
}
.people .initials {
  flex: none;
  width: var(--portrait);
  height: var(--portrait);
  margin-right: 1.8vw;
  border-radius: 50%;
  border: .35vh solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--portrait) * .34);
  font-weight: 600;
  letter-spacing: .04em;
}
.people[data-count="1"] .initials { margin-right: 2.6vw; }
.people figcaption { min-width: 0; text-shadow: var(--text-shadow); overflow-wrap: anywhere; }
.people figcaption b {
  display: block;
  font-size: 1.75vw;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin-bottom: .9vh;
}
.people figcaption span {
  display: block;
  font-size: .82vw;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  opacity: .82;
}
.people[data-count="1"] figcaption b { font-size: 3.1vw; }
.people[data-count="1"] figcaption span { font-size: 1.05vw; }
.people[data-count="2"] figcaption b { font-size: 2.1vw; }

/* ---------- Zentrierte Slides: Pause, Welcome, Ansage ---------- */

.slide.centered {
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
}
.centered-card {
  padding: 0;
  text-align: center;
  max-width: 64vw;
  text-shadow: var(--text-shadow);
}
.centered-card .pill { margin-bottom: 3vh; }
.centered-card .title {
  margin: 0;
  font-size: 5vw;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.centered-card .sub {
  margin-top: 2vh;
  font-size: 2vw;
  font-weight: 500;
  opacity: .9;
  font-variant-numeric: tabular-nums;
}
.centered-card .next {
  margin-top: 5vh;
  padding-top: 3.5vh;
  border-top: 1px solid rgba(255, 255, 255, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5vw;
  font-weight: 600;
}
.centered-card .next .pill { margin: 0 1.2vw 0 0; }

/* Bild-Slide */
.slide.image { padding: 0; display: block; }
.slide.image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================= Sidebar (rechts) ================= */

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.5vh 2.2vw 3vh;
  box-sizing: border-box;
  min-height: 0;
}

.watch {
  width: 16.5vw;
  filter: drop-shadow(0 1.2vh 2.4vh rgba(0, 0, 0, .22));
}

.sidebar .label { margin-top: 2vh; }
.brand {
  width: 13.5vw;
  height: auto;
  display: block;
  margin-top: 1.2vh;
}

.partners {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin-top: 2.5vh;
  display: grid;
  grid-template-columns: repeat(var(--partner-cols, 3), 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 0 .8vw;
}
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: .5vh .3vw;
  box-sizing: border-box;
}
.partner img {
  max-width: 84%;
  max-height: 78%;
  object-fit: contain;
}
.partner .text {
  font-size: .7vw;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  color: var(--ink);
  opacity: .7;
}

/* ================= Vollbild-Hinweis ================= */

.fs-hint {
  position: fixed;
  left: 50%;
  bottom: 3vh;
  transform: translateX(-50%);
  padding: .6em 1.2em;
  border-radius: 99px;
  background: rgba(24, 23, 22, .75);
  color: #fff;
  font-size: .9vw;
  font-weight: 600;
  letter-spacing: .04em;
  z-index: 10;
  pointer-events: none;
  transition: opacity 1s ease;
}
.fs-hint.fade { opacity: 0; }
.fs-hint[hidden] { display: none; }