/*
   GUF 2026
   Visual idea: "Das Forum in Bewegung"
   Real event footage, the 18th edition and the intersecting GUF mark carry the identity.
*/
@font-face {
  font-family: 'Noto Sans GUF';
  src: url('../assets/fonts/noto-sans-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Inter GUF';
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --yellow: #f2c230;
  --yellow-deep: #d5a918;
  --teal: #71a9b8;
  --teal-deep: #386f7d;
  --night: #071b22;
  --ink: #0d242b;
  --stage: #163b45;
  --paper: #eef1e8;
  --paper-deep: #e1e7dc;
  --white: #fbfcf7;
  --text: #10272d;
  --text-muted: #506267;
  --text-inverse: #f5f7f1;
  --text-inverse-muted: #b4c4c5;
  --line: #c8d1c9;
  --line-dark: rgba(239, 247, 243, 0.18);

  --font-display: 'Noto Sans GUF', 'Noto Sans', Arial, sans-serif;
  --font-body: 'Inter GUF', Inter, Arial, sans-serif;
  --font-data: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 26px;
  --space-5: 38px;
  --space-6: 56px;
  --space-7: 84px;
  --space-8: 124px;

  --radius: 2px;
  --radius-lg: 4px;
  --container: 1240px;
  --nav-h: 64px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  --mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 560' fill='none' stroke='%2371a9b8' stroke-opacity='.2' stroke-width='3'%3E%3Cpath d='M40 450 220 60l180 255L690 45M220 60l270 460M40 450l360 70 320-210M400 315 490 45'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, iframe { display: block; max-width: 100%; }
a, button { touch-action: manipulation; }
button, [href] { cursor: pointer; }
[id] { scroll-margin-top: calc(var(--nav-h) + 30px); }

.skip-link {
  position: fixed;
  left: 18px;
  top: -90px;
  z-index: 200;
  padding: 12px 18px;
  color: var(--night);
  background: var(--yellow);
  font-weight: 750;
  text-decoration: none;
}
.skip-link:focus { top: 18px; }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

::selection { color: var(--night); background: var(--yellow); }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

h1 { font-size: clamp(3.2rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2.1rem, 3.7vw, 3.55rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
p { margin: 0 0 var(--space-3); }
a { color: inherit; }

.container {
  width: min(var(--container), calc(100% - 2 * clamp(22px, 4vw, 58px)));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--space-8);
  background: var(--paper);
}
.section--tight { padding-block: var(--space-7); }
.section-dark,
.section-ink {
  color: var(--text-inverse);
  background: var(--night);
  isolation: isolate;
  overflow: hidden;
}
.section-dark::before,
.section-ink::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  right: -16vw;
  top: -26vw;
  border: clamp(38px, 5vw, 82px) solid rgba(113, 169, 184, .08);
  border-radius: 50%;
}
.section-ink { background: #102a31; }
.section-dark .muted,
.section-ink .muted { color: var(--text-inverse-muted); }
.muted { color: var(--text-muted); }

.kicker {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  color: var(--teal-deep);
}
.kicker::before { content: none; }
.section-dark .kicker,
.section-ink .kicker,
.page-hero .kicker { color: var(--teal); }

.highlight,
h1 span[style],
h2 span[style] {
  color: var(--yellow) !important;
  background: none;
  box-shadow: none;
  padding: 0;
}

.lead {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
}

/* Buttons use one notched GUF silhouette. Content stays clear of every cut. */
.btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 30px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  font: 750 1rem/1.15 var(--font-body);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn--primary { color: var(--night); background: var(--yellow); }
.btn--primary:hover { background: var(--white); }
.btn--dark { color: var(--white); background: var(--night); }
.btn--dark:hover { color: var(--night); background: var(--teal); }
.btn--light { color: var(--night); background: var(--white); }
.btn--light:hover { background: var(--yellow); }
.btn--ghost {
  min-height: auto;
  padding: 12px 4px;
  clip-path: none;
  color: inherit;
  background: transparent;
}
.btn--ghost::after { content: "↗"; margin-left: 4px; transition: transform 180ms ease; }
.btn--ghost:hover { color: var(--yellow); }
.btn--ghost:hover::after { transform: translate(3px, -3px); }

/* Treated navigation */
.site-nav {
  position: fixed;
  z-index: 80;
  inset: 14px 0 auto;
  height: var(--nav-h);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.site-nav.is-before-hero {
  pointer-events: none;
}
.site-nav .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 12px 0 18px;
  color: var(--white);
  background: rgba(7, 27, 34, .86);
  backdrop-filter: blur(10px) saturate(.8);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background-color 220ms ease, color 220ms ease;
}
.site-nav.is-before-hero .container {
  background: transparent;
  backdrop-filter: none;
  clip-path: none;
}
.site-nav.is-before-hero .nav-brand { pointer-events: auto; }
.site-nav.is-before-hero .nav-links,
.site-nav.is-before-hero .nav-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-nav.is-scrolled .container,
.site-nav.is-solid .container {
  color: var(--night);
  background: rgba(245, 247, 240, .96);
}
.nav-brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { width: auto; }
.nav-brand .brand-logo { height: 38px; filter: brightness(0) invert(1); }
.site-nav.is-scrolled .brand-logo,
.site-nav.is-solid .brand-logo { filter: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.nav-links a:not(.btn) {
  display: block;
  padding: 10px 0;
  color: inherit;
  font-size: .94rem;
  font-weight: 650;
  text-decoration: none;
  transition: color 160ms ease;
}
.nav-links a:not(.btn):hover { color: var(--yellow); }
.nav-links a[aria-current="page"] { color: var(--yellow); font-weight: 800; }
.site-nav.is-scrolled .nav-links a[aria-current="page"],
.site-nav.is-solid .nav-links a[aria-current="page"] { color: var(--teal-deep); }
.nav-links .btn { min-height: 42px; padding: 10px 19px; font-size: .9rem; }
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  color: inherit;
  background: transparent;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.nav-toggle svg { width: 27px; height: 27px; }

/* Home hero: the first viewport is one composed frame. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
  background: var(--night);
  isolation: isolate;
}
.hero::after {
  content: "18";
  position: absolute;
  z-index: 1;
  right: -1vw;
  bottom: -4vh;
  font: 800 min(47vw, 34rem)/.74 var(--font-display);
  letter-spacing: -.035em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(242, 194, 48, .38);
  pointer-events: none;
}
.hero-media { position: absolute; z-index: 0; inset: 0; }
/* Statischer Hintergrund nur für den kurzen Moment vor dem ersten Videoframe. */
.hero-fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-color: var(--night);
  background-image: var(--mesh);
  background-repeat: no-repeat;
  background-position: 84% 44%;
  background-size: min(82vw, 980px) auto;
}
.hero-video-wrap { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.08);
}
.hero-grain {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: .07;
  background-image: var(--grain);
  pointer-events: none;
}
.hero-scrim {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 16, 21, .9) 0 35%, rgba(3, 16, 21, .38) 68%, rgba(3, 16, 21, .54) 100%);
}
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: calc(var(--nav-h) + 90px) 0 clamp(48px, 8vh, 88px);
}
.hero-content .container {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  grid-template-areas:
    "meta ."
    "title ."
    "copy ."
    "actions .";
  gap: 0 clamp(30px, 7vw, 100px);
  align-items: end;
}
.hero-content .container > * { min-width: 0; }
.hero-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 var(--space-3);
  font-size: .88rem;
  font-weight: 700;
  color: rgba(245, 247, 241, .82);
}
.hero-meta .dot { color: var(--yellow); }
.hero h1 { grid-area: title; max-width: 12ch; margin: 0; font-size: clamp(3.8rem, 6.2vw, 6.2rem); line-height: .94; white-space: normal; }
.hero h1.hero-title { max-width: 14ch; }
.hero-title__line {
  display: block;
  white-space: nowrap;
}
.hero-gradient-word {
  display: inline-block;
  padding-right: .06em;
  padding-bottom: .18em;
  margin-bottom: -.18em;
  color: var(--yellow);
  font-style: italic;
  background-image: linear-gradient(
    105deg,
    var(--yellow-deep) 0%,
    var(--yellow) 28%,
    #ffe58a 48%,
    #efbd27 68%,
    var(--yellow-deep) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hero-yellow-flow 9s ease-in-out infinite;
  will-change: background-position;
}
.hero-gradient-word--experience { animation-delay: -4.5s; }
@keyframes hero-yellow-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero-sub { grid-area: copy; max-width: 54ch; margin: 24px 0 0; color: rgba(245, 247, 241, .9); font-size: clamp(1rem, 1.35vw, 1.16rem); }
.hero-ctas { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.hero .btn--ghost {
  min-height: 50px;
  padding: 13px 26px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  color: var(--night);
  background: rgba(251, 252, 247, .9);
}
.hero .btn--ghost:hover { color: var(--night); background: var(--teal); }

/* Real network names move through the transition between hero and content. */
.marquee { overflow: hidden; color: var(--night); background: var(--yellow); }
.marquee-track {
  --marquee-distance: -50%;
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; flex: 0 0 auto; align-items: center; white-space: nowrap; font-weight: 750; font-size: .9rem; }
.marquee-group span { padding: 13px 18px; }
.marquee-group .dot { padding-inline: 0; }
.marquee-group .dot::before { content: "✦"; }
@keyframes marquee { to { transform: translate3d(var(--marquee-distance), 0, 0); } }

/* Open, typographic data rather than boxed statistics. */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.stat { min-width: 0; padding: 0; border: 0; }
.stat-num {
  font: 800 clamp(3.7rem, 7vw, 7rem)/.9 var(--font-display);
  color: var(--ink);
  letter-spacing: .02em;
}
.stat-num em { color: var(--teal-deep); font-style: normal; }
.stat-label { max-width: 18ch; margin-top: 16px; color: var(--text-muted); font-size: .88rem; font-weight: 650; line-height: 1.35; }
.section-dark .stat-num,
.section-ink .stat-num { color: var(--white); }
.section-dark .stat-num em,
.section-ink .stat-num em { color: var(--yellow); }
.section-dark .stat-label,
.section-ink .stat-label { color: var(--text-inverse-muted); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: clamp(48px, 8vw, 110px);
  align-items: center;
}

/* Drei SDW-Momente in einem ruhigen, filmischen Fotofenster. */
.sdw-carousel {
  --carousel-duration: 4000ms;
  width: 100%;
  min-width: 0;
}
.sdw-carousel-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--night);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sdw-carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}
.sdw-carousel-slide.is-active {
  z-index: 1;
  opacity: 1;
}
.sdw-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sdw-carousel-progress {
  position: absolute;
  z-index: 3;
  left: clamp(18px, 3vw, 28px);
  right: clamp(18px, 3vw, 28px);
  bottom: clamp(14px, 2.5vw, 24px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 9px;
}
.sdw-carousel-progress::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -46px -28px -24px;
  background: linear-gradient(to bottom, transparent, rgba(7, 27, 34, .72));
  pointer-events: none;
}
.sdw-carousel-progress-button {
  position: relative;
  height: 23px;
  margin: 0;
  padding: 10px 0;
  overflow: hidden;
  border: 0;
  color: inherit;
  background: transparent;
}
.sdw-carousel-progress-button::before,
.sdw-carousel-progress-button span {
  content: "";
  position: absolute;
  inset: 10px 0;
  height: 3px;
}
.sdw-carousel-progress-button::before { background: rgba(251, 252, 247, .42); }
.sdw-carousel-progress-button span {
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left center;
}
.sdw-carousel-progress-button.is-complete span { transform: scaleX(1); }
.sdw-carousel-progress-button.is-active span {
  animation: sdw-carousel-progress var(--carousel-duration) linear forwards;
}
.sdw-carousel.is-paused .sdw-carousel-progress-button.is-active span {
  animation-play-state: paused;
}
.sdw-carousel-progress-button:focus-visible {
  outline-color: var(--white);
  outline-offset: 1px;
}
@keyframes sdw-carousel-progress {
  to { transform: scaleX(1); }
}

/* Three GUF formats become one continuous editorial module. */
.block-grid { display: grid; gap: 3px; }
.block-card {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 4px 20px;
  padding: var(--space-4);
  color: var(--text-inverse);
  background: var(--stage);
}
.block-card:nth-child(2) { background: #214b54; }
.block-card:nth-child(3) { background: var(--teal-deep); }
.block-card .icon-badge {
  grid-row: 1 / span 2;
  width: auto;
  height: auto;
  margin: 2px 0 0;
  border: 0;
  border-radius: 0;
  color: var(--yellow);
}
.block-card .icon-badge svg { width: 30px; height: 30px; }
.block-card h3 { margin: 0; font-size: 1.9rem; }
.block-card p { margin: 0; color: #d7e2df; font-size: .96rem; }

/* Die drei GUF-Themen als vollhohes, bildgeführtes Karussell. */
.about-split { align-items: stretch; }
.format-slider {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 540px;
  overflow: visible;
  color: var(--text-inverse);
  background: transparent;
}
.format-slider__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: rgba(255, 255, 255, .28);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.format-slider.is-grabbing .format-slider__viewport { cursor: grabbing; }
.format-slide {
  position: absolute;
  inset: 1px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #163b45;
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(var(--format-slide-x, 0px), 0, 0);
  transition: opacity 360ms ease, transform 240ms ease, visibility 0s linear 360ms;
}
.format-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.format-slide.is-drag-neighbor {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition-delay: 0s;
}
.format-slider.is-grabbing .format-slide.is-active,
.format-slider.is-grabbing .format-slide.is-drag-neighbor { transition: none; }
.format-slider.is-settling .format-slide.is-active,
.format-slider.is-settling .format-slide.is-drag-neighbor {
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.format-slide__copy {
  position: relative;
  z-index: 1;
  min-height: 215px;
  padding: clamp(28px, 4vw, 42px);
  background: #163b45;
}
.format-slide__copy h3 {
  margin: 0 0 8px;
  font-size: clamp(2.05rem, 3.2vw, 2.55rem);
  line-height: 1;
}
.format-slide__copy p {
  max-width: 47ch;
  margin: 0;
  color: #d7e2df;
  font: 500 clamp(1.04rem, 1.4vw, 1.16rem)/1.52 var(--font-body);
}
.format-slide__art {
  min-height: 0;
  overflow: hidden;
  background: #163b45;
}
.format-slide__art iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #163b45;
  user-select: none;
}
.format-slider__pagination {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -42px;
  display: flex;
  gap: 5px;
  padding: 0;
  transform: translateX(-50%);
  background: transparent;
}
.format-slider__dot {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.format-slider__dot::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 0;
  border-radius: 50%;
  background: rgba(22, 59, 69, .34);
  transition: background-color 180ms ease, transform 180ms ease;
}
.format-slider__dot:hover::before { background: rgba(22, 59, 69, .62); }
.format-slider__dot.is-active::before {
  background: #163b45;
  transform: scale(1.12);
}
.format-slider__dot:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 1px;
}

/* Speaker wall: typography is honest when photography is not available. */
.speaker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.speaker-card {
  min-height: 150px;
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: end;
  gap: 18px;
  padding: 24px;
  color: var(--text-inverse);
  background: rgba(245, 247, 241, .065);
  text-decoration: none;
  transition: background-color 170ms ease;
}
.speaker-card:hover { background: rgba(245, 247, 241, .12); }
/* Verlinkte Speaker-Karten fuehren ins Programm - gelber Hover wie bei .recap-card. */
a.speaker-card:hover { background: rgba(242, 194, 48, .13); }
.speaker-photo,
.g-1, .g-2, .g-3, .g-4, .g-5, .g-6 {
  width: auto;
  aspect-ratio: auto;
  overflow: visible;
  display: block;
  color: var(--yellow);
  background: none;
}
.speaker-photo::after { content: none; }
.speaker-photo .initials { position: static; font: 800 3.8rem/.9 var(--font-display); color: inherit; }
/* Speaker mit Porträt: quadratisches Foto in der schmalen Spalte, mit der
   abgeschrägten Ecke der übrigen Bildkacheln. Ohne Foto greift weiterhin die
   Variante darüber mit den gelben Initialen. */
img.speaker-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: rgba(245, 247, 241, .09);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.speaker-body { padding: 0; }
.speaker-body h3 { margin-bottom: 6px; font-size: 1.65rem; line-height: 1; }
.speaker-body p { margin: 0; color: var(--text-inverse-muted); font: 500 .82rem/1.4 var(--font-body); }

.frame-tile {
  min-height: 390px;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  overflow: hidden;
  position: relative;
  text-align: center;
  border-radius: 0;
  background: var(--night) !important;
}
.frame-tile::before,
.frame-tile::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border: 36px solid var(--yellow);
  border-radius: 50%;
  opacity: .16;
}
.frame-tile::before { transform: translateX(-72px); }
.frame-tile::after { transform: translateX(72px); border-color: var(--teal); }
.frame-tile > * { position: relative; z-index: 1; }

/* Retrospective as an archive index, not a card row. */
.recap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.recap-card {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  color: var(--text-inverse);
  text-decoration: none;
  background: rgba(245, 247, 241, .06);
  border: 0;
  border-radius: 0;
  transition: background-color 180ms ease;
}
a.recap-card:hover { background: rgba(242, 194, 48, .13); }
.recap-year { padding: 28px 28px 0; color: var(--yellow); font: 800 5rem/.9 var(--font-display); }
.recap-body { display: flex; flex: 1; flex-direction: column; padding: 20px 28px 30px; }
.recap-body h3 { font-size: 2rem; }
.recap-link { margin-top: auto; padding-top: 22px; color: var(--white); font-weight: 750; font-size: .86rem; }
.recap-link svg { width: 16px; height: 16px; margin-left: 5px; vertical-align: -3px; transition: transform 170ms ease; }
.recap-card:hover .recap-link svg { transform: translate(3px, -3px) rotate(-45deg); }

/* Page heroes carry the GUF mark's line geometry, with one ring as counterweight. */
.page-hero {
  position: relative;
  min-height: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--night);
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(58vw, 720px);
  aspect-ratio: 572 / 352;
  right: -8vw;
  bottom: -9vw;
  background: url("../assets/logo-lines.svg") right bottom / contain no-repeat;
  opacity: .5;
}
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  bottom: -18vw;
  left: -15vw;
  border: clamp(34px, 5vw, 66px) solid rgba(242, 194, 48, .13);
  border-radius: 50%;
}
.page-hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: var(--space-4) clamp(40px, 8vw, 120px);
  align-items: end;
  padding: calc(var(--nav-h) + 80px) 0 clamp(48px, 6vw, 72px);
}
.page-hero .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.page-hero h1 { max-width: 15ch; margin: 0; font-size: clamp(2.8rem, 4.25vw, 4.2rem); }
.page-hero .lead { align-self: end; margin: 0 !important; color: #e2e9e5; }
.notice {
  grid-column: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--teal);
  font: 650 .88rem/1.45 var(--font-body);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.notice svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }

/* Program tabs are real controls with a strong selected state. */
.day-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 0 0 var(--space-6);
  border: 0;
}
.day-tab {
  min-height: 86px;
  margin: 0;
  padding: 18px 20px;
  border: 0;
  color: var(--text);
  background: var(--paper-deep);
  font: 700 1.65rem/1.1 var(--font-display);
  text-align: left;
  transition: background-color 170ms ease, color 170ms ease;
}
.day-tab:hover { background: #d4ded4; }
.day-tab[aria-selected="true"] { color: var(--night); background: var(--yellow); }
.day-tab-date { display: block; margin-top: 8px; font: 650 .78rem/1.3 var(--font-body); }
.agenda { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.agenda-item {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: 26px 30px;
  border: 0;
  background: rgba(255, 255, 255, .42);
}
.agenda-item:nth-child(even) { background: rgba(225, 231, 220, .72); }
.agenda-time { padding-top: 2px; color: var(--ink); font: 700 1.05rem/1.3 var(--font-data); }
.agenda-body h3 { margin-bottom: 6px; font-size: 1.75rem; }
.agenda-body p { margin: 0; color: var(--text-muted); }
.agenda-tag {
  display: block;
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  font: 750 .78rem/1.3 var(--font-body);
}
.tag-keynote { color: #6b5709; }
.tag-panel { color: var(--teal-deep); }
.tag-masterclass { color: #77594c; }
.tag-networking { color: #3e6b51; }
.tag-special { color: #6b5709; background: none; }

/* Rückblick-Seiten: parallele Tracks innerhalb eines Programmpunkts. */
.agenda-tracks {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.agenda-tracks li {
  padding-left: 16px;
  border-left: 2px solid var(--line);
  color: var(--text-muted);
  font-size: .94rem;
  line-height: 1.5;
}
.agenda-tracks strong {
  display: block;
  color: var(--text);
  font-weight: 700;
}

/* Fotostrecke der vergangenen Ausgaben. */
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.gallery-grid figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--night);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms ease;
}
.gallery-grid figure:hover img { transform: scale(1.05); }

/* Partner und Sponsoren als Wortmarken-Liste. */
.logo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-list li {
  padding: 15px 24px;
  background: rgba(245, 247, 241, .07);
  font: 750 1.02rem/1.2 var(--font-body);
}
.section:not(.section-dark):not(.section-ink) .logo-list li { background: rgba(255, 255, 255, .5); }

/* Partner- und Sponsorenband: steht auf jeder Seite über dem Footer
   (Markup und Logo-Liste in js/partials.js). */
.sponsor-band {
  padding-block: var(--space-7);
  background: var(--paper-deep);
}
.sponsor-band__inner {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 2fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
.sponsor-band h2 {
  margin: 0;
  color: var(--stage);
  font: 700 clamp(1.45rem, 2.3vw, 1.95rem)/1.14 var(--font-display);
}
.sponsor-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sponsor-logos li { display: flex; }
.sponsor-logos a {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 112px;
  padding: 22px 26px;
  background: var(--white);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background-color 170ms ease, transform 170ms ease;
}
.sponsor-logos a:hover { background: #fff; transform: translateY(-2px); }
.sponsor-logos img {
  width: auto;
  max-width: 100%;
  max-height: 40px;
  opacity: .84;
  transition: opacity 170ms ease;
}
.sponsor-logos a:hover img { opacity: 1; }

/* Unterstützer: zweite Zeile im selben Band, eine Hierarchiestufe unter den
   Partnern. Die Kacheln bleiben schmal (sonst bläht eine Zeile mit zwei Logos
   sie auf halbe Bandbreite auf) und die Logos dürfen höher werden, weil eine
   mehrzeilige Wortmarke bei 40px Deckelung optisch verschwindet. */
.sponsor-band__inner--sub {
  margin-top: clamp(26px, 3.6vw, 48px);
  padding-top: clamp(26px, 3.6vw, 48px);
  border-top: 1px solid rgba(13, 36, 43, .13);
}
.sponsor-band__subtitle {
  margin: 0;
  color: var(--stage);
  font: 700 clamp(1.15rem, 1.7vw, 1.5rem)/1.14 var(--font-display);
}
.sponsor-logos--supporters {
  grid-template-columns: repeat(auto-fit, minmax(180px, 232px));
  justify-content: start;
}
.sponsor-logos--supporters img {
  max-height: 56px;
  /* Breite und Höhe werden unabhängig gedeckelt. Ohne object-fit zieht der
     Browser das Bitmap auf die entstandene Box und streckt breite Wortmarken
     vertikal (betrifft die Partnerzeile oben ebenfalls, dort nicht angefasst). */
  object-fit: contain;
}

@media (max-width: 900px) {
  .sponsor-band { padding-block: var(--space-6); }
  .sponsor-band__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .sponsor-logos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .sponsor-logos a { min-height: 92px; padding: 18px 20px; }
  /* wie die Partnerzeile zweispaltig, nicht schmaler */
  .sponsor-logos--supporters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .sponsor-logos--supporters img { max-height: 46px; }
}

/* Team: names and roles lead; initials are typographic markers, not fake avatars. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1em; }
.team-card {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 26px;
  text-align: left;
  background: rgba(255, 255, 255, .48);
  border: 0;
  border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: background-color 170ms ease;
}
.team-card:hover { background: rgba(255, 255, 255, .76); }
.team-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 0 20px;
  display: block;
  object-fit: cover;
  background: var(--paper-deep);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.team-photo--initials {
  display: grid;
  place-items: center;
  color: var(--teal-deep);
  font: 800 4.5rem/1 var(--font-display);
}
.team-links { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.team-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--teal-deep);
  font: 750 .8rem/1.2 var(--font-body);
  text-decoration: none;
  transition: color 150ms ease;
}
.team-links a:hover { color: var(--ink); text-decoration: underline; }
.team-links svg { width: 15px; height: 15px; flex: none; }
.avatar {
  width: auto;
  height: auto;
  margin: 0 0 34px;
  display: block;
  color: var(--teal-deep);
  font: 800 4.5rem/.9 var(--font-display);
  background: none;
}
.team-card h3 { margin-bottom: 7px; font-size: 1.9rem; min-height: 2.04em; }
.team-role { margin-bottom: 14px; color: var(--teal-deep); font: 750 .78rem/1.35 var(--font-body); }
.team-card p { margin: 0; color: var(--text-muted); font-size: .94rem; }
.info-list { display: grid; gap: 3px; margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.info-list li { display: grid; grid-template-columns: 42px 1fr; gap: 15px; padding: 18px 0; align-items: start; }
.info-list .icon-badge { width: auto; height: auto; border: 0; border-radius: 0; color: var(--teal-deep); }
.info-list .icon-badge svg { width: 25px; height: 25px; }
.info-list strong { display: block; margin-bottom: 2px; font: 700 1.45rem/1.1 var(--font-display); }
.venue-figure {
  margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.venue-figure img { display: block; width: 100%; height: auto; }

/* A literal admission ticket replaces the default pre-footer CTA slab. */
.cta-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  color: var(--night);
  background: var(--yellow);
  border: 0;
  border-radius: 0;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.cta-banner__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: clamp(38px, 6vw, 74px);
}
.cta-banner__img {
  align-self: stretch;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cta-banner::before {
  content: "18";
  position: absolute;
  right: 42%;
  bottom: -32px;
  color: rgba(7, 27, 34, .1);
  font: 800 13rem/.7 var(--font-display);
  pointer-events: none;
}
.cta-banner::after { content: none; }
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner .kicker { color: rgba(7, 27, 34, .7) !important; }
.cta-banner h2 { max-width: 16ch; margin-bottom: 4px; font-size: clamp(2.25rem, 3.8vw, 3.8rem); }
.cta-banner p { max-width: 44ch; margin: 0; }
.cta-banner .btn { margin-top: 12px; }

/* Footer is one balanced grid with the GUF word anchored to the floor. */
.site-footer {
  overflow: hidden;
  padding: var(--space-7) 0 var(--space-5);
  color: var(--text-inverse);
  background-color: #06171d;
  background-image: var(--grain);
  background-blend-mode: soft-light;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(150px, .55fr) minmax(260px, 1fr);
  gap: clamp(36px, 7vw, 100px);
  margin-bottom: var(--space-6);
  align-items: start;
}
.footer-brand { margin-bottom: 22px; }
.footer-brand .brand-logo { height: 46px; filter: brightness(0) invert(1); }
.site-footer h4 { margin-bottom: 16px; color: var(--yellow); font: 700 1.35rem/1.1 var(--font-display); }
.site-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--text-inverse-muted); text-decoration: none; transition: color 160ms ease; }
.site-footer a:hover { color: var(--yellow); }
.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: 0;
  color: var(--text-inverse-muted);
  border: 0;
  font-size: .82rem;
}

/* Overscroll am Seitenende: die Seite lässt sich über den Footer hinaus
   ziehen. Im aufgespannten Feld erscheint ein ovaler Spektral-Gradient
   (Regenbogen), der beim Loslassen zurückfedert und sich auflöst.
   Höhe (--s, px) und Intensität (--t, 0..1) setzt js/main.js pro Frame. */
.overscroll-bow {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  /* Die letzte Spektralfarbe liegt auch unter dem weichgezeichneten Rand,
     damit der Bogen unten nicht wieder ins Dunkle ausläuft. */
  background-color: #ff4d5e;
  background-image: var(--grain);
  background-blend-mode: soft-light;
}
.overscroll-bow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  /* Die stark überbreite, leicht gestauchte Ellipse lässt die Farbringe
     an beiden Seiten ansetzen und nur sanft zur Mitte hin absinken. */
  width: 340vw;
  height: calc(var(--s, 0px) * 1.86 + 46px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: calc(var(--t, 0) * 0.95);
  filter: blur(calc(4px + var(--t, 0) * 10px)) saturate(1.15);
  will-change: height, opacity;
  background: radial-gradient(closest-side,
    #071820 0%,
    #071820 30%,
    #7c5cff 38%,
    #3f7bff 48%,
    #2fd0c9 58%,
    #58d66b 67%,
    #f2c230 77%,
    #ff8a3c 86%,
    #ff4d5e 93%,
    #ff4d5e 100%);
}
/* Zartes Nachleuchten direkt an der Kante, damit der Bogen "anliegt". */
.overscroll-bow::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: calc(var(--t, 0) * 0.35);
  background: linear-gradient(rgba(6, 23, 29, .85), rgba(6, 23, 29, 0) 60%);
}
/* Modal: functioning choices, aligned to a shared grid. */
.modal-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  color: var(--text);
  background: rgba(3, 16, 21, .82);
  transition: opacity 180ms ease;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.ticket-modal {
  position: relative;
  width: min(940px, 100%);
  max-height: min(90svh, 100%);
  overflow-y: auto;
  padding: clamp(34px, 5vw, 70px);
  color: var(--text);
  background: var(--paper);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transform: translateY(16px);
  transition: transform 200ms ease;
}
.modal-overlay.is-open .ticket-modal { transform: none; }
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--night);
  background: var(--yellow);
  transition: background-color 160ms ease;
}
.modal-close:hover { background: var(--white); }
.modal-close svg { width: 20px; height: 20px; }
.ticket-modal h2 { max-width: 18ch; margin-bottom: 8px; font-size: clamp(2rem, 4.2vw, 3.5rem); }
.modal-intro { max-width: 52ch; margin-bottom: var(--space-2); color: var(--text-muted); }
.ticket-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ticket-option {
  position: relative;
  overflow: hidden;
  min-height: 290px;
  display: grid;
  grid-template-rows: 42px auto minmax(70px, auto) 1fr;
  gap: 12px;
  padding: 26px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: var(--paper-deep);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  font: 1rem/1.45 var(--font-body);
  text-align: left;
  transition: background-color 160ms ease, opacity 240ms ease, transform 240ms ease;
}
.ticket-option[data-group="stipendiat"] { background-image: url("../assets/img/ticket-sonnenweg.png"); }
.ticket-option[data-group="alumni"] { background-image: url("../assets/img/ticket-flusslandschaft.png"); }
.ticket-option[data-group="extern"] { background-image: url("../assets/img/ticket-bruecke.webp"); }

/* Externe: Zwischenschritt (Studium ja/nein) */
.ticket-sub { display: none; }
.ticket-options[data-step="extern"] { grid-template-columns: repeat(2, 1fr); }
.ticket-options[data-step="extern"] .ticket-sub {
  display: grid;
  background-color: var(--paper-deep);
  background-image: none;
}
.ticket-options[data-step="extern"] [data-group="stipendiat"],
.ticket-options[data-step="extern"] [data-group="alumni"],
.ticket-options[data-step="extern"] [data-group="extern"] { display: none; }

/* Zweiphasiger Wechsel: weichende Boxen ausblenden (Transition),
   neue Boxen per Keyframe einblenden. Ruhezustand ist immer sichtbar,
   damit eine verpasste JS-Runde keine Box unsichtbar stehen lässt. */
.ticket-option.is-swapping-out {
  opacity: 0;
  transform: translateY(12px) scale(.965);
  pointer-events: none;
}
@keyframes ticketOptionIn {
  from { opacity: 0; transform: translateY(12px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
.ticket-option.is-entering { animation: ticketOptionIn 300ms ease both; }
.ticket-option::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(13, 36, 43, 0);
  transition: background-color 160ms ease;
  pointer-events: none;
}
.ticket-option:hover::after { background-color: rgba(13, 36, 43, 0.07); }
.ticket-option > * { position: relative; }
.ticket-option .option-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ticket-option.has-art { background-image: none; }
.ticket-option .icon-badge { width: auto; height: auto; border: 0; border-radius: 0; color: var(--teal-deep); }
.ticket-option .icon-badge svg { width: 28px; height: 28px; }
.ticket-option strong { font: 700 1.75rem/1.1 var(--font-display); }
.ticket-option span { color: var(--ink); font-size: .92rem; }
.ticket-option .option-cta { align-self: end; color: var(--ink); font-weight: 800; font-size: .86rem; }
.option-cta svg { width: 15px; height: 15px; margin-left: 5px; vertical-align: -3px; }

/* Zurück-Button im Extern-Schritt: sitzt direkt über den Boxen und
   behält seinen Platz auch im Hauptschritt, damit nichts springt. */
.modal-back {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 26px;
  gap: 6px;
  margin: 0 0 0 -4px;
  padding: 0 4px;
  border: 0;
  color: var(--teal-deep);
  background: none;
  font: 800 .82rem var(--font-body);
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease, transform 140ms ease;
}
.modal-back[hidden] { visibility: hidden; pointer-events: none; }
.modal-back:hover { transform: translateX(-3px); }
.modal-back svg { width: 16px; height: 16px; }

/* Spendenticket: dezenter Hinweis unter den Boxen */
.ticket-note {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: .9rem;
}
.ticket-note a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.ticket-note a:hover { color: var(--teal-deep); }

/* Content is visible by default. Motion never controls whether it exists. */
.reveal,
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  :root { --space-8: 96px; }
  .nav-toggle { display: inline-flex; }
  /* Der clip-path der Leiste würde das fixed positionierte Dropdown
     mit abschneiden (und zu seinem containing block werden): auf
     Mobilgröße daher ohne Clip; die Eckschrägen wandern ans Panel. */
  .site-nav .container { clip-path: none; }
  .nav-links {
    position: fixed;
    inset: calc(var(--nav-h) + 14px) clamp(18px, 4vw, 40px) auto;
    display: none;
    align-items: stretch;
    gap: 0;
    padding: 16px 20px 22px;
    color: var(--night);
    background: var(--white);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  }
  .nav-links.is-open { display: flex; flex-direction: column; }
  .nav-links a:not(.btn) { padding: 12px 2px; }
  .nav-links li:last-child { margin-top: 12px; }
  .nav-links .btn { width: 100%; }
  .hero-content .container,
  .page-hero .container { grid-template-columns: 1fr; grid-template-areas: none; }
  .hero-meta,
  .hero h1,
  .hero-sub,
  .hero-ctas,
  .page-hero .kicker,
  .page-hero h1,
  .page-hero .lead,
  .notice { grid-column: 1; grid-area: auto; }
  .hero h1 { max-width: 12ch; font-size: clamp(3.4rem, 9.5vw, 5.6rem); }
  .hero-sub { max-width: 48ch; margin-top: 20px; }
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .format-slider { min-height: 590px; }
  .speaker-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recap-grid { grid-template-columns: 1fr; }
  .recap-card { min-height: 250px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cta-banner { grid-template-columns: 1fr; }
  .cta-banner__img { height: 260px; }
  .cta-banner::before { right: 8%; }
  .footer-grid { grid-template-columns: 1.3fr .7fr; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root {
    --space-6: 44px;
    --space-7: 64px;
    --space-8: 78px;
  }
  body { font-size: 16px; }
  h2 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .container { width: min(100% - 38px, var(--container)); }
  .site-nav { top: 10px; }
  .site-nav .container { width: calc(100% - 24px); }
  .nav-brand .brand-logo { height: 33px; }
  /* Auf kleinen Displays werden Video und Inhalt bewusst untereinander
     angeordnet: ein großzügiger Bewegtbild-Auftakt, danach gut lesbarer Text. */
  .hero {
    min-height: 0;
    display: block;
  }
  .hero::after { content: none; }
  .hero-media {
    position: relative;
    height: 40svh;
  }
  .hero-grain { opacity: .035; }
  .hero-scrim {
    background: linear-gradient(to bottom, transparent 72%, rgba(14, 40, 51, .7) 100%);
  }
  .hero-content {
    padding: 28px 0 38px;
    background: var(--night);
  }
  .hero h1 { max-width: 12ch; width: 100%; font-size: clamp(2.65rem, 11vw, 3.5rem); white-space: normal; }
  .hero-meta { gap: 4px 9px; font-size: .78rem; }
  .hero-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 10px; }
  .hero-ctas .btn { width: 100%; min-width: 0; min-height: 52px; padding: 12px 7px; gap: 6px; font-size: .78rem; white-space: nowrap; }
  .page-hero h1 { font-size: clamp(2.15rem, 8.8vw, 2.85rem); line-height: 1.04; overflow-wrap: normal; hyphens: auto; }
  .page-hero .container { padding-top: calc(var(--nav-h) + 62px); padding-bottom: 42px; }
  .stats-grid,
  .speaker-grid,
  .day-tabs,
  .ticket-options { grid-template-columns: 1fr !important; }
  .stat { min-height: 130px; }
  .block-card { grid-template-columns: 38px 1fr; padding: 22px; }
  .format-slider { min-height: 520px; }
  .format-slide__copy { min-height: 0; padding: 28px 24px 30px; }
  .format-slide__copy h3 { font-size: 2rem; }
  .format-slide__copy p { font-size: 1.04rem; }
  .format-slide__art iframe { pointer-events: none; }
  .speaker-card { min-height: 135px; grid-template-columns: 76px 1fr; padding: 20px; }
  .speaker-photo .initials { font-size: 3.2rem; }
  .agenda-item { grid-template-columns: 1fr; gap: 8px; padding: 22px 20px; }
  .agenda-time { font-size: .9rem; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: 1fr; }
  .team-card { min-height: 290px; }
  .cta-banner__content { padding: 38px 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > :last-child { grid-column: auto; }
  .footer-legal { flex-direction: column; }
  /* Ticket-Modal kompakt: mehr Breite, weniger Innenabstand, damit alle
     Gruppen ohne langes Scrollen erreichbar sind. */
  .modal-overlay { padding: 12px; }
  .ticket-modal {
    max-height: min(94svh, 100%);
    padding: 22px 20px 18px;
  }
  .ticket-modal .kicker { margin-bottom: 8px; }
  .modal-close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .ticket-modal h2 { margin-bottom: 6px; font-size: clamp(1.6rem, 7vw, 2rem); }
  .modal-intro { margin-bottom: 10px; font-size: .95rem; }
  /* Boxen flacher: Icons ausblenden, Zeilenraster ohne Icon-Reihe. */
  .ticket-option {
    min-height: 148px;
    grid-template-rows: auto auto 1fr;
    gap: 6px;
    padding: 16px 18px 14px;
  }
  .ticket-option .icon-badge { display: none; }
  .ticket-option strong { font-size: 1.4rem; }
  .ticket-option span { font-size: .88rem; }
  /* Heller Verlauf über der Grafik: oben kräftig für lesbaren Text, nach
     unten auslaufend, damit die Illustration sichtbar bleibt. Die Grafik
     ist ein per JS eingefügtes Canvas (.option-art) — daher explizite
     Staffelung: Canvas unten, Scrim darüber, Text ganz oben. */
  .ticket-option::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(225, 231, 220, .95) 0%,
      rgba(225, 231, 220, .85) 60%,
      rgba(225, 231, 220, .45) 100%
    );
    pointer-events: none;
  }
  .ticket-option > * { z-index: 2; }
  .ticket-option .option-art { z-index: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee-track { animation: none; }
  .hero-gradient-word {
    animation: none;
    background-position: 50% 50%;
    will-change: auto;
  }
  .sdw-carousel-progress-button.is-active span {
    animation: none;
    transform: scaleX(1);
  }
}