:root {
  --bg: #07181a;
  --bg-2: #0a2023;
  --surface: #0e2427;
  --surface-2: #133033;
  --ink: #e9f2f0;
  --ink-soft: #cfe0dd;
  --muted: #9bb0ae;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.18);

  --teal: #023f44;
  --teal-2: #0e5e61;
  --teal-ink: #052a2d;
  --mint: #5cd0c2;
  --lime: #c4f933;
  --lime-soft: rgba(196, 249, 51, 0.14);
  --lime-dark: #9bd324;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 16px 38px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 36px 74px rgba(0, 0, 0, 0.5);
  --shadow-lime: 0 16px 34px rgba(127, 183, 10, 0.3);

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --pill: 999px;

  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-head: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;

  --maxw: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
}

img {
  max-width: 100%;
}

/* Scroll-Reveal, nur aktiv wenn JS läuft, damit ohne JS alles sichtbar bleibt. */
.js main > .section {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.js main > .section.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js main > .section {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px clamp(20px, 4vw, 56px);
  color: #fff;
  transition: background 240ms ease, box-shadow 240ms ease, padding 240ms ease, border-color 240ms ease;
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background: rgba(7, 24, 26, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-family: var(--font-head);
  margin-right: auto;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--lime);
  color: #06201d;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 15px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links a {
  font-size: 14.5px;
  font-weight: 600;
  opacity: 0.86;
  transition: opacity 160ms ease;
}

.nav-links a:hover {
  opacity: 1;
}

.nav-cta {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14.5px;
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.button.primary {
  background: var(--lime);
  color: #06201d;
  box-shadow: var(--shadow-lime);
}

.button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(127, 183, 10, 0.4);
}

.button.secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.button.secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
}

.button.full {
  width: 100%;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff;
}

.hero-image {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(4, 18, 20, 0.95) 0%, rgba(4, 18, 20, 0.74) 44%, rgba(4, 18, 20, 0.22) 100%),
    linear-gradient(0deg, var(--bg) 2%, rgba(5, 18, 20, 0) 46%),
    url("/assets/workshop-hero.jpg");
  background-position: center;
  background-size: cover;
  transform: scale(1.04);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(820px, calc(100% - 40px));
  margin: 0 0 clamp(48px, 10vh, 104px) clamp(20px, 6vw, 86px);
  padding-top: 120px;
}

.hero-eyebrow {
  margin: 0 0 18px;
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(46px, 7.4vw, 92px);
  line-height: 0.98;
  font-weight: 700;
  color: #fff;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.badge-accent {
  border-color: transparent;
  background: var(--lime);
  color: #06201d;
}

.hero-lede {
  max-width: 660px;
  margin: 24px 0 0;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.event-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  margin: 34px 0 0;
  max-width: 760px;
}

.event-facts > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fact-icon {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: var(--r-sm);
  background: var(--lime-soft);
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.event-facts span {
  display: block;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12.5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.event-facts strong {
  display: block;
  margin-top: 2px;
  font-size: 15.5px;
  font-weight: 600;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero-trust {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
}

/* ---------- Section base ---------- */
/* Die Polsterung wirkt doppelt: Zwischen zwei Abschnitten addieren sich unten und
   oben. Bei 104px waren das 208px Leerraum pro Uebergang und ueber die ganze Seite
   fast 2900px. 72px ergeben 144px pro Uebergang, was die Abschnitte immer noch klar
   trennt, die Seite aber spuerbar kompakter macht. */
.section {
  width: min(var(--maxw), calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) 0;
}

/* Der Header liegt fest über der Seite. Ohne diesen Abstand verschwinden
   die Überschriften der angesprungenen Abschnitte darunter. */
main > section[id],
main > section[id] > h2,
main > section[id] .section-copy > h2 {
  scroll-margin-top: 96px;
}

.section h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.04;
}

.section-copy {
  max-width: 760px;
}

.section-copy p,
.host-section p,
.tech-panel p {
  color: var(--muted);
  font-size: 18px;
}

/* ---------- Audience ---------- */
.audience-section .section-copy {
  max-width: 920px;
}

.audience-section p {
  margin-top: 22px;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.feature-grid article {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.feature-grid article:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  background: var(--surface-2);
}

.icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--mint);
}

.icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--mint);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-grid h3,
.host-card h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.feature-grid p,
.host-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
}

/* ---------- Workshop details + technical requirements ---------- */
.detail-list {
  max-width: 860px;
}

.tech-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 52px;
  align-items: start;
}

.detail-list dl {
  margin: 30px 0 0;
  border-top: 1px solid var(--line);
}

.detail-list div {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

dt {
  color: var(--mint);
  font-weight: 700;
  font-size: 15px;
}

dd {
  margin: 0;
  color: var(--ink);
}

.tech-panel {
  padding: 36px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
}

.tech-panel h2 {
  font-size: 28px;
}

.check-list,
.plain-list {
  padding: 0;
  margin: 24px 0;
  list-style: none;
}

.check-list li,
.plain-list li {
  position: relative;
  padding-left: 32px;
  margin: 14px 0;
  color: var(--ink-soft);
}

.check-list li::before,
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--lime-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4f933' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

/* ---------- Highlight / credibility callout ---------- */
.highlight-card {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(196, 249, 51, 0.22);
  background:
    radial-gradient(820px 320px at 0% 0%, rgba(14, 94, 97, 0.42), transparent 60%),
    linear-gradient(155deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-md);
}

.highlight-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 44px;
  align-items: center;
}

.highlight-stat {
  text-align: center;
  padding-right: 44px;
  border-right: 1px solid var(--line);
}

.highlight-stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(54px, 8vw, 84px);
  line-height: 1;
  color: var(--lime);
  letter-spacing: -0.03em;
}

.highlight-stat span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.highlight-kicker {
  margin: 0 0 22px;
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.highlight-text p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
}

.highlight-text .highlight-link {
  margin-top: 16px !important;
  font-size: 15px !important;
}

.highlight-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.highlight-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.highlight-text .highlight-note {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
}

.highlight-note strong {
  color: var(--mint);
}

@media (max-width: 680px) {
  .highlight-body {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .highlight-stat {
    text-align: left;
    padding-right: 0;
    padding-bottom: 22px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

.outcome-list {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 40px;
}

.outcome-list li {
  margin: 8px 0;
  font-size: 17px;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .outcome-list {
    grid-template-columns: 1fr;
  }
}

.notice {
  margin-top: 26px;
  padding: 18px 20px;
  background: rgba(92, 208, 194, 0.1);
  border-radius: var(--r);
  border: 1px solid rgba(92, 208, 194, 0.26);
  color: var(--ink-soft);
  font-size: 15px;
}

.notice strong {
  color: var(--mint);
}

/* ---------- Agenda (timeline) ---------- */
.agenda-section {
  display: block;
}

.agenda-lede {
  margin: 18px 0 0;
  max-width: 660px;
  color: var(--muted);
  font-size: 18px;
}

.agenda-list {
  margin-top: 44px;
  max-width: 840px;
  display: flex;
  flex-direction: column;
}

.agenda-list article {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 30px;
}

.agenda-list time {
  justify-self: end;
  text-align: right;
  padding-top: 1px;
  color: var(--mint);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
}

.agenda-list article > div {
  position: relative;
  border-left: 2px solid var(--line);
  padding: 0 0 34px 34px;
}

.agenda-list article:last-child > div {
  border-color: transparent;
  padding-bottom: 0;
}

.agenda-list article > div::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--mint);
}

.agenda-list h3 {
  margin: -4px 0 6px;
  font-size: 19px;
}

.agenda-list p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
}

/* ---------- Leadership ---------- */
.leadership-section {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr;
  gap: 52px;
  align-items: start;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: transform 200ms ease, border-color 200ms ease;
}

.person-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
}

.person-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--surface-2);
  box-shadow: var(--shadow-md);
}

.person-card h3 {
  margin: 22px 0 10px;
  font-size: 21px;
}

.person-bio {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.person-links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.icon-link {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: #0a66c2;
  color: #fff;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.icon-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(10, 102, 194, 0.4);
}

.icon-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.text-link {
  color: var(--mint);
  font-weight: 600;
  border-bottom: 1px solid rgba(92, 208, 194, 0.4);
  transition: color 160ms ease, border-color 160ms ease;
}

.text-link:hover {
  color: #8fe4d8;
  border-bottom-color: #8fe4d8;
}

/* ---------- Host / location ---------- */
.host-section {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 48px;
  align-items: center;
}

.host-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.host-logo {
  display: grid;
  place-items: center;
  min-height: 120px;
  border-radius: var(--r);
  background: #000;
  border: 1px solid var(--line);
  color: #fff;
  font-family: Georgia, serif;
  letter-spacing: 2px;
  text-align: center;
}

/* ---------- Video (Platzhalter und späteres Embed) ---------- */
.video-panel {
  display: grid;
  place-items: center;
  gap: 16px;
  align-content: center;
  margin-top: 34px;
  aspect-ratio: 16 / 9;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(14, 94, 97, 0.45), transparent 60%),
    linear-gradient(155deg, #0c3034, #07181a);
  text-align: center;
}

.play-badge {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--lime-soft);
  border: 1px solid var(--lime);
}

.play-badge svg {
  width: 34px;
  height: 34px;
  fill: var(--lime);
}

.video-panel-text {
  margin: 0;
  max-width: 480px;
  color: var(--muted);
  font-size: 15px;
}

.video-embed {
  display: block;
  width: 100%;
  margin-top: 34px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #000;
}

/* Der zweite Selektor ist nötig, weil .audience-section p spezifischer ist als
   .video-note und der Bildunterschrift sonst bis zu 24px aufzwingt. Sie sieht dann
   aus wie eine Überschrift für das, was darunter folgt. */
.video-note,
.audience-section p.video-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.5;
}

/* ---------- Teilnehmerstimmen ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
}

.quote-card {
  display: grid;
  gap: 18px;
  align-content: start;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.quote-card blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
}

.quote-card blockquote::before {
  content: "„";
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-head);
  font-size: 44px;
  line-height: 0.5;
  color: var(--lime);
}

.quote-card figcaption cite {
  font-style: normal;
  color: var(--muted);
  font-size: 14.5px;
}

@media (max-width: 980px) {
  .quote-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- FAQ ---------- */
.faq-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 52px;
  align-items: start;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 0 24px;
  transition: border-color 160ms ease, background 160ms ease;
}

.faq-list details[open] {
  border-color: var(--line-2);
  background: var(--surface-2);
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cd0c2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  transition: transform 220ms ease;
}

.faq-list details[open] summary::after {
  transform: rotate(135deg);
  background-color: rgba(92, 208, 194, 0.16);
}

.faq-list details p {
  margin: 0;
  padding: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
}

/* ---------- Checkout (focal conversion block) ---------- */
.checkout-section {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 56px;
  align-items: center;
  padding: clamp(36px, 5vw, 60px);
  margin: 0 auto clamp(72px, 9vw, 110px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(196, 249, 51, 0.16);
  background:
    radial-gradient(1100px 420px at 0% 0%, rgba(14, 94, 97, 0.5), transparent 60%),
    linear-gradient(155deg, #0c3034, #07181a);
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.checkout-copy h2 {
  color: #fff;
}

.price-tag {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 20px 0 18px;
}

.price-tag strong {
  font-family: var(--font-head);
  font-size: 42px;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: -0.02em;
}

.price-tag span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}

.checkout-copy p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 17px;
}

.checkout-section .plain-list li {
  color: rgba(255, 255, 255, 0.92);
}

.checkout-talk {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.78);
  font-size: 15.5px;
}

.checkout-form {
  display: grid;
  gap: 15px;
  padding: 28px;
  background: #ffffff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

label {
  display: grid;
  gap: 7px;
  color: #0c1618;
  font-weight: 600;
  font-size: 14.5px;
}

input {
  min-height: 50px;
  border: 1px solid #d6e0dc;
  border-radius: var(--r-sm);
  padding: 0 14px;
  font: inherit;
  color: #0c1618;
  background: #fff;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

input::placeholder {
  color: #9aa8a6;
}

input:focus {
  outline: none;
  border-color: var(--teal-2);
  box-shadow: 0 0 0 4px rgba(14, 94, 97, 0.16);
}

.checkout-form .button.primary {
  margin-top: 6px;
}

.form-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  color: #5e6f72;
  font-size: 13px;
}

.form-secure svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--teal-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-note {
  margin: 0;
  color: #c0392b;
  font-size: 14px;
}

.form-note:empty {
  display: none;
}

.form-privacy {
  margin: 2px 0 0;
  color: #5e6f72;
  font-size: 12.5px;
}

.soldout-banner {
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: rgba(14, 94, 97, 0.1);
  border: 1px solid var(--teal-2);
  color: var(--teal);
  font-size: 15px;
}

.soldout-banner strong {
  display: block;
  margin-bottom: 2px;
}

/* ---------- Draft markers ---------- */
.draft {
  display: inline-block;
  padding: 1px 9px;
  border-radius: var(--pill);
  background: var(--lime-soft);
  border: 1px dashed var(--lime);
  color: #dcff8f;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* ---------- Mobile CTA bar ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  z-index: 40;
  left: 12px;
  right: 12px;
  bottom: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px 12px 18px;
  border-radius: var(--pill);
  background: rgba(8, 30, 32, 0.97);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateY(140%);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mobile-cta.visible {
  transform: none;
}

.mobile-cta-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.mobile-cta-info strong {
  font-family: var(--font-head);
  font-size: 18px;
}

.mobile-cta-info span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
}

.mobile-cta .button {
  min-height: 46px;
  padding: 0 22px;
}

/* ---------- Footer ---------- */
.site-footer {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 56px 20px 110px;
  text-align: center;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 700;
}

.footer-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.footer-links {
  display: flex;
  gap: 22px;
}

.footer-links a {
  color: var(--muted);
  font-size: 14px;
  border-bottom: 1px solid transparent;
}

.footer-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--line-2);
}

/* ---------- Status & legal pages ---------- */
.status-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: var(--bg);
  padding: 24px;
}

.status-card {
  width: min(620px, 100%);
  padding: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.status-card h1 {
  margin: 26px 0 12px;
  font-size: clamp(34px, 5vw, 44px);
  line-height: 1.05;
}

.status-card p {
  color: var(--muted);
  font-size: 18px;
}

.status-card .button {
  margin-top: 26px;
}

.legal-page {
  background: var(--bg);
}

.legal-content {
  width: min(780px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0 80px;
}

.legal-content .brand {
  color: var(--ink);
  margin-bottom: 8px;
}

.legal-content h1 {
  margin: 40px 0 18px;
  font-size: clamp(40px, 6vw, 52px);
  line-height: 1;
}

.legal-content h2 {
  margin-top: 32px;
}

.legal-content p {
  color: var(--muted);
  font-size: 18px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-links {
    display: none;
  }

  .tech-section,
  .leadership-section,
  .faq-section,
  .host-section,
  .checkout-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .site-header {
    padding: 12px 18px;
  }

  /* Auf dem Handy war der Hero rund 1290px hoch, der CTA lag damit unterhalb
     des ersten Bildschirms. Deshalb: kompakter, und der Button rutscht über
     die Eventdetails, die Datum und Ort ohnehin schon in den Badges nennen. */
  .hero {
    min-height: 0;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 40px;
    padding-top: 84px;
  }

  .hero-eyebrow { order: 1; }
  .hero h1 { order: 2; }
  .hero-badges { order: 3; }
  .hero-lede { order: 4; }
  .hero-actions { order: 5; }
  .hero-trust { order: 6; }
  .event-facts { order: 7; }

  .hero-badges {
    margin-top: 18px;
  }

  .hero-lede {
    margin-top: 18px;
  }

  .hero-actions {
    margin-top: 24px;
  }

  .event-facts {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 26px;
  }

  /* Der zweite Button kostet auf dem Handy nur Höhe, das Ziel steht direkt darunter. */
  .hero-actions .button.secondary {
    display: none;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .people-grid {
    grid-template-columns: 1fr;
  }

  .detail-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .mobile-cta {
    display: flex;
  }

  .nav-cta {
    display: none;
  }
}

@media (max-width: 540px) {
  .hero h1 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .hero-actions .button {
    width: 100%;
  }

  .agenda-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .agenda-list time {
    justify-self: start;
    text-align: left;
    padding: 4px 12px;
    border-radius: var(--pill);
    background: var(--surface-2);
  }

  .agenda-list article > div {
    border-left: none;
    padding: 0 0 24px;
  }

  .agenda-list article > div::before {
    display: none;
  }

  .checkout-form {
    padding: 22px;
  }
}