/* =====================================================================
   INVESTICOM 2026 — DESIGNSYSTEM
   Umsetzung des Figma-Frames "1440-desktop" (1440 px breit, 22.321 px hoch).

   DESKTOP FIRST: die Basisregeln sind das Desktop-Layout. Mobile wird
   später über `@media (max-width: 1023px)` am Ende der Datei nachgezogen,
   damit die Desktop-Regeln unangetastet bleiben. Das ist die Umkehrung
   der anderen EYL-Projekte und hier bewusst so, weil das Design in dieser
   Reihenfolge vorliegt.

   Farben sind aus dem Design gemessen, nicht geschätzt.
   ===================================================================== */

@import url("https://api.fontshare.com/v2/css?f%5B%5D=clash-display@400,500,600,700&display=swap");

:root {
  /* --- Flächen ------------------------------------------------------ */
  --bg:              #010101;   /* Seitengrund */
  --bg-deep:         #000000;
  --hero-mid:        #010327;   /* Navy in der Hero-Mitte */
  --card:            #1A1A1A;   /* Icon-Karten, Timeline, Agenda, FAQ */
  --card-2:          #141416;
  --card-ink:        #03030D;   /* Classic-Ticket, fast schwarz mit Blaustich */

  /* --- Blau ---------------------------------------------------------- */
  --blue-deep:       #000980;   /* grosse Inhaltskarten */
  --blue:            #010ECC;   /* Buttons, Premium-Ticket, Badges */
  --blue-bright:     #0011FF;   /* Footer, offener FAQ-Kopf */
  --blue-glow:       rgba(1, 14, 204, .55);

  /* --- Akzent -------------------------------------------------------- */
  --lime:            #E1FF20;
  --lime-ink:        #050505;   /* Text auf Lime, nie Weiss */

  /* --- Text ---------------------------------------------------------- */
  --fg:              #FFFFFF;
  --fg-dim:          rgba(255, 255, 255, .78);
  --fg-mute:         rgba(255, 255, 255, .58);
  --grad-a:          #FFFFFF;   /* Stops des Headline-Verlaufs */
  --grad-b:          #B3C7FF;

  /* --- Linien -------------------------------------------------------- */
  --line:            rgba(255, 255, 255, .10);
  --line-lime:       rgba(225, 255, 32, .55);

  /* --- Raster -------------------------------------------------------- */
  --maxw:            1200px;    /* Inhaltsspalte, 120 px Rand bei 1440 */
  --gut:             120px;

  /* --- Radien -------------------------------------------------------- */
  --r-xl:            28px;
  --r-lg:            20px;
  --r-md:            14px;
  --r-sm:            10px;
  --r-pill:          999px;

  /* --- Schrift ------------------------------------------------------- */
  --display: "Clash Display", "Switzer", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Bewegung ------------------------------------------------------ */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t: 320ms;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Ein Wrapper für alles, was in der Inhaltsspalte liegt */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.sec { position: relative; }

/* =====================================================================
   Headline-Verlauf
   Radialer Verlauf mit fünf Stops, exakt aus dem Figma übernommen:
   0% weiss, 25% #B3C7FF, 50% weiss, 75% #B3C7FF, 100% weiss.
   Ergibt bei breiten Headlines das typische Schimmern in Bändern.
   ===================================================================== */
.grad {
  background: radial-gradient(
    ellipse 75% 180% at 50% 50%,
    var(--grad-a) 0%,
    var(--grad-b) 25%,
    var(--grad-a) 50%,
    var(--grad-b) 75%,
    var(--grad-a) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback, falls background-clip nicht greift */
  -webkit-text-fill-color: transparent;
}

/* Variante für einzelne Wörter innerhalb einer weissen Headline */
.grad-word { display: inline-block; }

/* =====================================================================
   Typo-Skala
   ===================================================================== */
.h1 { font-size: 70px; font-weight: 700; letter-spacing: -.005em; }
.h1-sub { font-size: 40px; font-weight: 600; letter-spacing: -.015em; }
.h2 { font-size: 46px; }
.h3 { font-size: 28px; }
.h4 { font-size: 21px; }

.lead { font-size: 19px; color: var(--fg-dim); }
.small { font-size: 14px; }
.mute { color: var(--fg-mute); }

.center { text-align: center; }

/* Abschnittsüberschrift, die fast überall gleich sitzt */
.sec-head {
  text-align: center;
  margin-bottom: 56px;
}
.sec-head .h2 { margin-bottom: 14px; }
.sec-head p { max-width: 720px; margin-inline: auto; color: var(--fg-dim); }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  padding: 17px 30px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  box-shadow: 0 0 0 rgba(1, 14, 204, 0), 0 10px 30px -8px var(--blue-glow);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 34px -4px var(--blue-glow), 0 16px 40px -10px var(--blue-glow);
}
.btn:active { transform: translateY(0); }

.btn-white { background: #fff; color: var(--blue); }
.btn-white:hover { box-shadow: 0 0 30px -6px rgba(255,255,255,.4); }

/* Formular um einen CTA soll das Layout nicht verändern */
form.cta-form { margin: 0; display: inline-flex; }

/* =====================================================================
   Chips (Hero: Datum, Ort, Preis)
   ===================================================================== */
.chips { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: 7px 15px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.chip-lime  { background: var(--lime); color: var(--lime-ink); }
.chip-blue  { background: var(--blue); color: #fff; }
.chip-white { background: #fff; color: #0A0A0A; }

/* =====================================================================
   Karten
   ===================================================================== */
.card {
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 34px;
}

/* Dunkle Karte mit ganz leichtem Blauschimmer, wie in den Phasen-Blöcken */
.card-sheen {
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(1, 14, 204, .16) 0%, transparent 60%),
    var(--card-2);
  border-radius: var(--r-xl);
}

.card-blue {
  background: var(--blue-deep);
  border-radius: var(--r-xl);
  padding: 46px;
}

/* Icon-Karte: Badge sitzt oben und überlappt die Kartenkante */
.icard {
  position: relative;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 54px 28px 32px;
  text-align: center;
}
.icard-badge {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: linear-gradient(180deg, #1B2AE8 0%, var(--blue) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px -10px var(--blue-glow);
}
.icard-badge img, .icard-badge svg { width: 30px; height: 30px; }
.icard h3 { font-size: 19px; margin-bottom: 12px; }
.icard p { font-size: 15px; color: var(--fg-dim); line-height: 1.6; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

/* =====================================================================
   Aufzählung mit Punkt, wie in den Inhaltskarten
   ===================================================================== */
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.5;
}
.list li::before {
  content: "";
  position: absolute;
  left: 4px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}

/* Häkchen-Liste der Ticket-Karten */
.list-check { list-style: none; margin: 0; padding: 0; }
.list-check li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  font-size: 15.5px;
  line-height: 1.45;
}
.list-check li::before {
  content: "";
  position: absolute;
  left: 0; top: .18em;
  width: 17px; height: 17px;
  background: currentColor;
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
  opacity: .95;
}
:root {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 16px;
}

/* =====================================================================
   Weisser CTA-Balken (kommt dreimal auf der Seite)
   ===================================================================== */
.ctabar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 18px 18px 18px 46px;
  max-width: 980px;
  margin-inline: auto;
}
.ctabar-txt {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 500;
  color: #0A0A0A;
  letter-spacing: -.02em;
}
.ctabar-txt b { font-weight: 700; }
.ctabar .btn { padding: 19px 34px; font-size: 18px; }

/* =====================================================================
   Zitatblöcke
   ===================================================================== */
.quote {
  position: relative;
  border-radius: var(--r-xl);
  padding: 40px 56px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.32;
  letter-spacing: -.02em;
  text-align: center;
}
.quote-blue { background: linear-gradient(180deg, #1226FF 0%, var(--blue) 100%); }
.quote-dark { background: var(--card); }
/* Anführungszeichen-Ornament oben links, ragt aus dem Block heraus */
.quote-mark {
  position: absolute;
  top: -46px; left: -46px;
  width: 118px;
  opacity: 1;
  pointer-events: none;
}

/* =====================================================================
   Reveals — sanftes Einblenden beim Scrollen
   ===================================================================== */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* =====================================================================
   Abstände zwischen den Sektionen
   ===================================================================== */
.sec-pad    { padding-block: 118px; }
.sec-pad-sm { padding-block: 62px; }

/* =====================================================================
   1 · Hero
   Höhe im Design ~650 px. Der Grund ist ein Navy-Verlauf, darüber liegt
   das exportierte Hintergrundbild mit den Bogenlinien.
   ===================================================================== */
.hero {
  position: relative;
  min-height: 652px;
  padding-top: 87px;
  padding-bottom: 40px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 42%, var(--hero-mid) 0%, #01020F 46%, var(--bg) 78%);
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: .9;
}
/* Weicher Übergang in das Schwarz der nächsten Sektion */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 92%);
  z-index: -1;
  pointer-events: none;
}

/* static, damit die absolut gesetzten 3D-Objekte sich am .hero orientieren
   und nicht am Innenabstand dieses Containers hängen. */
.hero-inner { position: static; text-align: center; }

.hero-logo { width: 300px; height: auto; margin: 0 auto 67px; }

.hero-kicker {
  font-size: 15px;
  color: var(--fg-dim);
  margin-bottom: 26px;
}

.hero .h1 { margin-bottom: -10px; }
.hero .h1-sub { margin-bottom: 14px; }

.hero .chips { margin-bottom: 188px; }

/* Anker-Navigation mit senkrechten Trennstrichen */
.hero-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
}
.hero-nav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 34px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}
.hero-nav a + a { border-left: 1px solid var(--line); }
.hero-nav a:hover { color: #fff; }
.hero-nav .is-strong { color: #fff; font-weight: 600; }

/* Container der 3D-Objekte. Auf Desktop löst er sich auf, damit die
   Kinder absolut im Hero liegen. Auf Mobile wird er zur Reihe. */
.hero-objs { display: contents; }

/* Ein <picture> muss sich wie das <img> darin verhalten, sonst brechen
   die Layout-Regeln, die auf die Bildklassen zielen. */
picture { display: block; }
picture.loc-cell, picture.split-img { display: block; }
picture img { display: block; width: 100%; height: 100%; }

/* 3D-Objekte. Positionen aus dem Figma abgemessen. */
.hero-obj {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.hero-obj-wallet { left: 6.9%;   top: 392px; width: 226px; }
.hero-obj-cards  { right: 4.5%;  top: 281px; width: 120px; }
.hero-obj-btc    { right: 12.6%; top: 364px; width: 160px; }

/* =====================================================================
   3 + 4 · Split-Karten
   Bild und Textfläche teilen sich die Inhaltsspalte 50/50 und bilden
   zusammen einen Block mit gemeinsamem Aussenradius.
   ===================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 34px;
}
.split:last-child { margin-bottom: 0; }

.split-img { position: relative; min-height: 560px; }
.split-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-body {
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 52px;
}
.split-body .h3 { margin-bottom: 18px; }
.split-body p { color: rgba(255,255,255,.9); font-size: 16px; }
.split-body .eyebrow { margin-top: 26px; }
.split-body .list { color: rgba(255,255,255,.94); }

/* =====================================================================
   6 · CTA-Balken
   ===================================================================== */
.ctabar-sec { padding-block: 74px; }

/* =====================================================================
   8 · Gruppenbild mit Namens-Badges
   ===================================================================== */
.duo {
  position: relative;
  margin: 0 auto 96px;
  max-width: 936px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.duo img { width: 100%; height: auto; }
/* Verlauf nach unten, damit die Badges lesbar bleiben */
.duo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
  pointer-events: none;
}
.duo-tag {
  position: absolute;
  bottom: 26px;
  z-index: 2;
  font-family: var(--display);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -.02em;
  padding: 10px 26px;
  border-radius: var(--r-sm);
  background: rgba(20,20,24,.55);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid var(--line);
}
.duo-tag-l { left: 26px; }
.duo-tag-r { right: 26px; }

/* =====================================================================
   9 + 10 · Speaker-Biografien
   ===================================================================== */
.bio {
  display: grid;
  grid-template-columns: 375px 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 104px;
}
.bio:last-child { margin-bottom: 0; }
.bio-rev { grid-template-columns: 1fr 375px; }

.bio-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
}
.bio-img img { width: 100%; height: auto; }

.bio-name { font-size: 38px; margin-bottom: 12px; }

/* Rollen-Badge in Blau unter dem Namen */
.role {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  margin-bottom: 24px;
}
.bio-body p { font-size: 16px; color: var(--fg-dim); }
.bio-body p b { color: #fff; }

/* =====================================================================
   11 · Consulting-Block
   ===================================================================== */
.consult {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 20px;
  padding: 56px 0 0 56px;
  overflow: hidden;
}
.consult-body { padding-bottom: 56px; }
.consult-body .h2 { margin-bottom: 24px; }
.consult-body p { font-size: 16px; color: var(--fg-dim); max-width: 570px; }

.consult-trust { margin-top: 32px; }
.consult-trust img { max-width: 470px; width: 100%; height: auto; }

.consult-team { align-self: end; }
.consult-team img { width: 100%; height: auto; display: block; }

/* =====================================================================
   13 · Timeline 2025 / 2026
   ===================================================================== */
.tl { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.tl-card { background: var(--card); border-radius: var(--r-xl); padding: 38px 40px; }
.tl-card p { font-size: 16px; color: var(--fg-dim); }
.tl-year { font-size: 44px; margin-bottom: 16px; }
/* Das laufende Jahr ist blau und leuchtet */
.tl-card-now {
  background: linear-gradient(180deg, #1226FF 0%, var(--blue) 100%);
  box-shadow: 0 0 60px -12px var(--blue-glow);
}
.tl-card-now p { color: rgba(255,255,255,.94); }
.tl-card-now .tl-year { color: #fff; }

/* =====================================================================
   14 bis 16 · Phasen
   Die grosse Ziffer liegt hinter der Karte und wird von ihr überlappt.
   ===================================================================== */
.phase { position: relative; margin-bottom: 86px; }
.phase:last-child { margin-bottom: 0; }

.phase-num {
  position: absolute;
  top: -70px;
  width: 300px;
  z-index: 0;
  opacity: .9;
  pointer-events: none;
}
.phase-num-r { right: -130px; }
.phase-num-l { left: -130px; }

.phase-in { position: relative; z-index: 1; padding: 48px 52px 52px; }
.phase-h { font-size: 38px; text-align: center; margin-bottom: 22px; }

.phase-quote {
  font-size: 22px;
  line-height: 1.42;
  text-align: center;
  margin-bottom: 34px;
  color: #fff;
}
.phase-quote-sm {
  font-size: 17px;
  text-align: center;
  color: var(--fg-dim);
  margin-top: -22px;
  margin-bottom: 32px;
}

.phase-cols { display: grid; grid-template-columns: 350px 1fr; gap: 40px; align-items: start; }
.phase-img { border-radius: var(--r-md); overflow: hidden; }
.phase-img img { width: 100%; height: auto; }
.phase-cols .list { color: var(--fg-dim); }

.disclaimer {
  margin-top: 22px;
  font-size: 14.5px;
  font-style: italic;
  color: var(--fg-mute);
  line-height: 1.5;
}

/* =====================================================================
   Zitate
   ===================================================================== */
.quote-wrap { position: relative; max-width: 1010px; margin-inline: auto; }
.quote-wrap-sm { max-width: 700px; }
.quote-mark { width: 118px; }
/* Das dunkle Zitat hat ein blaues Ornament */
.quote-mark-blue { filter: none; }
.quote-dark .quote { font-size: 25px; }

.btn-row { margin-top: 44px; }

/* =====================================================================
   22 · Bonus-Bild mit Bildunterschrift im Bild
   ===================================================================== */
.bonus { position: relative; margin: 0 0 34px; border-radius: var(--r-xl); overflow: hidden; }
.bonus img { width: 100%; height: auto; }
.bonus::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.86));
  pointer-events: none;
}
.bonus figcaption {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  z-index: 2;
  width: min(720px, 82%);
  text-align: center;
}
.bonus figcaption .h3 { margin-bottom: 12px; }
.bonus figcaption p { font-size: 15px; color: var(--fg-dim); }
.bonus-cards { margin-top: 60px; }

/* =====================================================================
   25 + 26 · Ergebnisse
   ===================================================================== */
.result { display: grid; grid-template-columns: 500px 1fr; gap: 48px; align-items: center; }
.result-img { border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.result-img img { width: 100%; height: auto; }
.result .h3 { margin-bottom: 20px; }
.result p { font-size: 16px; color: var(--fg-dim); }
.result p b { color: #fff; }

.result-cards { margin-top: 52px; }
/* Karte mit blauem Schimmer von innen */
.card-glow {
  border-radius: var(--r-xl);
  padding: 40px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(24, 42, 220, .55) 0%, rgba(6, 11, 89, .5) 55%, rgba(3, 3, 13, .6) 100%),
    var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(120,140,255,.14);
}
.card-glow .h3 { margin-bottom: 20px; }
.card-glow p { font-size: 15.5px; color: rgba(255,255,255,.86); }

/* =====================================================================
   29 · Galerie
   ===================================================================== */
.gallery { line-height: 0; }
.gallery img { width: 100%; height: auto; }

/* =====================================================================
   31 · Platzhalter-Karten
   ⚠️ Im Figma leer. Sobald der Inhalt da ist, hier <video> oder <img>.
   ===================================================================== */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.slot {
  aspect-ratio: 337 / 425;
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, rgba(88,96,160,.42) 0%, rgba(62,62,66,.55) 45%, rgba(70,74,120,.42) 100%);
}
.slots-note { margin-top: 40px; font-size: 15px; color: var(--fg-dim); }

/* =====================================================================
   34 · Ticket-Karten
   ===================================================================== */
.tickets-sec {
  background: radial-gradient(90% 55% at 50% 0%, rgba(2, 10, 78, .85) 0%, transparent 62%), var(--bg);
}
.tickets-logo { width: 150px; height: auto; margin: 0 auto 22px; }

.tickets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
  /* Platz fuer die Ticket-Bilder, die oben herausragen */
  padding-top: 66px;
}

.tk {
  position: relative;
  border-radius: var(--r-xl);
  /* Das gekippte Ticket-Bild ragt oben heraus und ist bei 84 % Breite rund
     180 px hoch. Der Innenabstand muss darunter bleiben, sonst überdeckt
     es Badge und Ticketnamen. */
  padding: 152px 32px 28px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
/* Das gekippte Ticket-Bild ragt über die Kartenkante */
.tk-vis {
  position: absolute;
  top: -52px; left: 50%;
  transform: translateX(-50%);
  width: 84%;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.6));
}

.tk-classic {
  background: linear-gradient(180deg, #0A1140 0%, var(--card-ink) 52%);
  box-shadow: inset 0 0 0 1px rgba(120,140,255,.16);
}
.tk-premium {
  background: linear-gradient(180deg, #0A18FF 0%, var(--blue) 55%, #060B59 100%);
  box-shadow: 0 0 70px -18px var(--blue-glow);
}
.tk-vip {
  background: linear-gradient(180deg, #C8F216 0%, var(--lime) 55%, #E8FF6A 100%);
  color: var(--lime-ink);
  box-shadow: 0 0 70px -18px rgba(225,255,32,.45);
}

.tk-badge {
  display: inline-block;
  align-self: flex-start;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  padding: 6px 13px;
  margin-bottom: 16px;
}
.tk-name { font-family: var(--display); font-size: 31px; font-weight: 700; margin-bottom: 10px; }
.tk-sub { font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 22px; }
.tk-plus { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.tk .list-check { margin-bottom: 26px; }

.tk-price { margin-top: auto; margin-bottom: 20px; font-family: var(--display); }
.tk-price s { font-size: 30px; font-weight: 600; opacity: .55; margin-right: 6px; }
.tk-now { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }

.tk-form { display: block; margin-bottom: 18px; }
.tk-form .btn { width: 100%; }
.tk-vip .tk-form .btn { background: var(--blue); color: #fff; }

/* Verkaufszähler */
.tcount {
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  border-radius: var(--r-sm);
  padding: 9px 11px;
}
.tk-vip .tcount { background: rgba(0,0,0,.14); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.tcount-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tcount-head img { width: 17px; height: 17px; opacity: .8; }
.tcount-head span { display: flex; flex-direction: column; line-height: 1.15; font-size: 11.5px; }
.tcount-head b { font-size: 12.5px; }
.tcount-head i { font-style: normal; opacity: .6; font-size: 10px; }
.tcount-left { margin-left: auto; text-align: right; }
.tcount-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.tk-vip .tcount-bar { background: rgba(0,0,0,.18); }
.tcount-fill { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.tk-vip .tcount-fill { background: #0A0A0A; }

/* =====================================================================
   36 · Agenda
   ===================================================================== */
.agenda {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 38px 42px;
  margin-bottom: 26px;
}
.agenda:last-child { margin-bottom: 0; }
.agenda-vip { box-shadow: inset 0 0 0 1px var(--line-lime); }
.is-lime { color: var(--lime); }

.agenda-l .h3 { margin-bottom: 12px; }
.agenda-tiers { font-size: 17px; color: var(--fg-dim); }
.agenda-tiers .off { opacity: .45; }
.agenda-tiers .on { color: var(--lime); font-weight: 600; }

.agenda-r .list { color: var(--fg-dim); }
.agenda-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--fg-mute);
}
.agenda-meta-h { font-weight: 700; font-style: italic; color: var(--fg-dim); margin-bottom: 4px; }
.agenda-meta .list li { font-size: 14.5px; margin-bottom: 6px; }

/* =====================================================================
   37 bis 40 · Location
   ===================================================================== */
.hall { margin: 0; border-radius: var(--r-xl); overflow: hidden; }
.hall img { width: 100%; height: auto; }

.loc-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 58px;
}
.loc-intro .h2 { font-weight: 500; }
.loc-intro .h2 b { font-weight: 700; }
.loc-intro p { font-size: 16px; color: var(--fg-dim); padding-top: 6px; }

.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.loc-cell { margin: 0; border-radius: var(--r-xl); overflow: hidden; }
.loc-cell.card { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 40px; }
.loc-cell img { width: 100%; height: 100%; object-fit: cover; }
.loc-cell .h4 { margin-bottom: 14px; }
.loc-cell p { font-size: 15px; color: var(--fg-dim); }

/* =====================================================================
   42 + 44 · Anreise und Aufenthalt
   ===================================================================== */
.info-h { font-weight: 500; margin-bottom: 40px; }
.info-h b { font-weight: 700; }

.info { display: grid; grid-template-columns: 300px 1fr; gap: 26px 40px; margin: 0; }
.info dt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
}
.info dt img { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.info dd { margin: 0; font-size: 16px; color: var(--fg-dim); }
.info dd b { color: #fff; }
.lnk { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   46 · Grosses Location-Bild mit Schriftzug
   ===================================================================== */
.bigshot { position: relative; overflow: hidden; min-height: 700px; display: grid; place-items: center; }
.bigshot-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bigshot::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,17,255,.55) 0%, rgba(1,17,255,.28) 45%, rgba(0,0,0,.75) 100%);
  z-index: 1;
}
.bigshot-in { position: relative; z-index: 2; text-align: center; width: 100%; padding-inline: 20px; }
.bigshot-in .chip { margin-bottom: 18px; }
.bigshot-logo { width: min(1180px, 92%); height: auto; margin-inline: auto; }

/* =====================================================================
   48 · FAQ
   ===================================================================== */
.faq { display: flex; flex-direction: column; gap: 14px; }
.faq details {
  background: var(--card);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: background var(--t) var(--ease);
}
.faq details[open] { background: transparent; }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  padding: 19px 26px;
  border-radius: var(--r-md);
  background: var(--card);
  transition: background var(--t) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary { background: var(--blue-bright); }
.faq summary:hover { background: #232328; }
.faq details[open] summary:hover { background: var(--blue-bright); }
.faq-a { padding: 22px 26px 6px; }
.faq-a p { font-size: 16px; color: var(--fg-dim); }

/* =====================================================================
   49 · Footer
   ===================================================================== */
.foot {
  background: var(--blue-bright);
  padding: 60px 20px 54px;
  text-align: center;
}
.foot-logo { width: 300px; height: auto; margin: 0 auto 18px; }
.foot-nav { display: flex; justify-content: center; gap: 26px; font-size: 15px; }
.foot-nav a { color: #fff; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   FAQ: Kategorien und offene Stellen
   Das Design zeigt sieben Fragen am Stück, die finale Copy hat 27 in
   fünf Gruppen. Die Kategorie-Überschriften strukturieren das, ohne die
   Optik der Einträge zu verändern.
   ===================================================================== */
.faq-cat {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  margin: 34px 0 6px;
  padding-left: 4px;
}
.faq-cat:first-child { margin-top: 0; }

.faq-a p + p { margin-top: 1em; }

/* Noch offene Angaben in der Copy. Bewusst knallig, damit sie beim
   Durchklicken auffallen und nie versehentlich live gehen.
   Vor dem Livegang muss `grep -c "class=\"todo\"" index.html` 0 ergeben. */
.todo {
  background: var(--lime);
  color: #101010;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Investicom-Bildmarke als Zeilen-Icon (Anreise, Aufenthalt) */
.info dt .mark { width: 22px; height: 22px; color: var(--lime); margin-top: 1px; }



/* =====================================================================
   Bogenlinien als Hintergrund-Ornament
   Die SVGs sind 883 bzw. 738 px hoch. Die Sektionen sind flacher, deshalb
   bekommt das Ornament eine eigene, hohe Ebene und die Sektion selbst
   darf NICHT clippen — sonst bleibt vom Bogen nur ein Streifen übrig.
   ===================================================================== */
.lines { position: relative; }
.lines > * { position: relative; z-index: 1; }
.lines::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--lines-y, 50%);
  width: 1926px;
  height: 883px;
  transform: translate(-50%, -50%);
  background: url("/assets/18_lines.svg") center / 100% 100% no-repeat;
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}
/* Gegenläufige Bögen, laufen nach links aus */
.lines-alt::before {
  width: 1680px;
  height: 860px;
  background-image: url("/assets/27_lines.svg");
  opacity: .8;
}

/* Der CTA-Balken sitzt mittig auf den Bögen, deshalb hier mehr Luft */
.ctabar-sec { padding-block: 150px; }

/* =====================================================================
   Hero: leichtes Schweben der 3D-Objekte
   Drei leicht verschiedene Dauern, damit die Bewegung nie synchron wirkt.
   Nur transform, das läuft auf der Compositor-Ebene und kostet keine
   Layout-Berechnung.
   ===================================================================== */
@keyframes floaty {
  0%   { transform: translate3d(0, 0, 0)      rotate(0deg); }
  50%  { transform: translate3d(0, -16px, 0)  rotate(-1.4deg); }
  100% { transform: translate3d(0, 0, 0)      rotate(0deg); }
}
.hero-obj { will-change: transform; animation: floaty 7s ease-in-out infinite; }
.hero-obj-wallet { animation-duration: 7.5s; }
.hero-obj-cards  { animation-duration: 6.2s; animation-delay: -1.8s; }
.hero-obj-btc    { animation-duration: 8.4s; animation-delay: -3.1s; }

@media (prefers-reduced-motion: reduce) {
  .hero-obj { animation: none; }
}

/* =====================================================================
   Phasen: Glaskarten
   Die grosse Ziffer liegt hinter der Karte und soll durchscheinen.
   Deshalb halbtransparent statt deckend.
   ===================================================================== */
.phase-in {
  background: linear-gradient(160deg, rgba(22,24,42,.62) 0%, rgba(10,10,16,.58) 100%);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 70px -30px rgba(0,0,0,.8);
}
/* Ziffer kräftiger, sie ist jetzt das Motiv hinter dem Glas */
.phase-num { opacity: 1; }

/* =====================================================================
   Timeline: das laufende Jahr ist grösser und leuchtet stärker.
   Beide Karten mittig ausgerichtet, damit die grössere oben und unten
   gleichmässig übersteht.
   ===================================================================== */
.tl { align-items: center; }
.tl-card-now {
  padding: 74px 48px;
  box-shadow: 0 0 130px -12px rgba(1, 30, 255, .9), 0 0 50px -10px var(--blue-glow);
}
.tl-card-now .tl-year { font-size: 50px; }
.tl-card-now p { font-size: 17px; }

/* =====================================================================
   Speaker-Biografien: Bild und Textspalte oben bündig
   ===================================================================== */
.bio { align-items: stretch; }
.bio-img { align-self: start; }
.bio-body { padding-top: 2px; }
.bio-name { line-height: 1; }

/* =====================================================================
   Consulting: freigestelltes Team ragt über die Kartenkante
   ===================================================================== */
.consult { align-items: stretch; padding: 56px 0 0 56px; }
.consult-team {
  align-self: end;
  margin-right: -26px;
  margin-bottom: -1px;
}
.consult-team img { width: 100%; height: auto; }

/* Abstand vor den Icon-Karten: "…und vieles mehr" gehört zu den Phasen */
.after-phases .sec-head { margin-bottom: 96px; }

/* Blauer Schimmer unter den Gegenbögen (Bonus-Sektion).
   Liegt unter dem Linien-Ornament, deshalb ein zweites Pseudo-Element. */
.lines-alt::after {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background:
    radial-gradient(60% 55% at 78% 55%, rgba(10, 30, 220, .38) 0%, transparent 62%),
    radial-gradient(50% 60% at 18% 45%, rgba(6, 18, 150, .26) 0%, transparent 66%);
  pointer-events: none;
  z-index: -1;
}
.lines-alt { isolation: isolate; }

/* Das freigestellte Team darf oben leicht über die Kartenkante ragen */
.consult-team { margin-top: -34px; }


/* =====================================================================
   Nachjustierung Feedback-Runde 2
   ===================================================================== */

/* Timeline: die Karten überlappen und sind in der Höhe versetzt */
.tl {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}
.tl-card { position: relative; }
.tl-card-now {
  /* überlappt die linke Karte und sitzt tiefer */
  margin-left: -58px;
  margin-top: 62px;
  z-index: 2;
}

/* Bonus: die Bögen gehören zwischen Bild und die drei Karten,
   nicht hinter das Bild. Deshalb weit nach unten geschoben. */
.lines-alt { --lines-y: 88%; }
.lines-alt::before { opacity: .7; }

/* Rhein-Mosel-Halle: Bögen hinter das grosse Saalbild */
.hall-lines { --lines-y: 62%; }

/* Blaues Anführungszeichen als eigenes Asset, das dunkle Zitat
   bekommt damit die Farbe aus dem Design. */
.quote-mark-blue { width: 123px; top: -38px; left: -38px; }

/* Das freigestellte Team ist ein reines Desktop-Asset. Der Mobile-Schnitt
   kommt später als eigene Datei. */
.consult-team img { width: 100%; height: auto; }

/* =====================================================================
   Location-Raster: kompakter und mit blauem Grund
   Alle vier Zellen teilen dasselbe Seitenverhältnis wie die Bilder
   (762×475 = 1.6), damit Text- und Bildkarten gleich hoch sind und der
   Block nicht auseinanderläuft.
   ===================================================================== */
.loc-sec { position: relative; isolation: isolate; }
.loc-sec::before {
  content: "";
  position: absolute;
  inset: -6% -18% -12%;
  background:
    radial-gradient(58% 52% at 74% 62%, rgba(10, 30, 220, .40) 0%, transparent 64%),
    radial-gradient(52% 58% at 16% 48%, rgba(6, 18, 160, .30) 0%, transparent 66%);
  pointer-events: none;
  z-index: -1;
}
.loc-sec .wrap { position: relative; z-index: 1; }

.loc-cell { aspect-ratio: 762 / 475; }
.loc-cell.card { padding: 32px 40px; }
.loc-cell .h4 { margin-bottom: 12px; }
.loc-cell p { font-size: 14.5px; line-height: 1.55; }

/* =====================================================================
   Grosses Location-Bild: war unten hart abgeschnitten
   Das Motiv ist 2560×2295 (1.12), bei 1440 Breite also 1286 px hoch.
   Mehr Höhe und ein Bildausschnitt weiter unten zeigen das Gebäude
   vollständig, der Verlauf blendet die Kante weich aus.
   ===================================================================== */
.bigshot { min-height: 880px; }
.bigshot-bg { object-position: center 62%; }
.bigshot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, var(--bg));
  z-index: 1;
  pointer-events: none;
}

/* =====================================================================
   =====================================================================
   RESPONSIVE
   Desktop-first: die Regeln oben sind das 1440er Layout, hier wird nach
   unten angepasst. Zwei Stufen:
     · bis 1023 px  Tablet, zweispaltig wo es trägt, sonst gestapelt
     · bis 640 px   Mobile, alles einspaltig nach dem 400er Design
   =====================================================================
   ===================================================================== */

/* ---------------------------------------------------------------------
   TABLET
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root { --maxw: 100%; }
  .wrap { padding-inline: 32px; }

  .sec-pad    { padding-block: 84px; }
  .sec-pad-sm { padding-block: 48px; }

  .h1 { font-size: 54px; }
  .h1-sub { font-size: 32px; }
  .h2 { font-size: 36px; }
  .h3 { font-size: 24px; }
  .phase-h { font-size: 30px; }
  .bio-name { font-size: 32px; }

  /* Drei Spalten werden zwei, die dritte rutscht in die nächste Zeile */
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .grid-3 > *:last-child { grid-column: 1 / -1; max-width: calc(50% - 11px); margin-inline: auto; }

  .split { grid-template-columns: 1fr; }
  /* Bildausschnitt oben ansetzen, sonst schneidet cover die Köpfe ab */
  .split-img { min-height: 380px; }
  .split-img img { object-position: center 18%; }
  .bio-img img, .phase-img img { object-position: center top; }
  /* Auf schmalen Breiten steht das Bild immer oben, auch bei der
     im Desktop gespiegelten Karte. */
  .split-rev .split-img { order: -1; }
  .split-body { padding: 30px 34px 36px; }

  .bio, .bio-rev { grid-template-columns: 1fr; gap: 28px; }
  .bio-img { max-width: 340px; }
  .bio-rev .bio-img { order: -1; }

  .consult { grid-template-columns: 1fr; padding: 44px 34px 0; }
  .consult-body { padding-bottom: 0; }
  .consult-team { margin: 20px -34px -1px; }

  .phase-cols { grid-template-columns: 1fr; gap: 26px; }
  .phase-img { max-width: 340px; }
  .phase-in { padding: 38px 30px 42px; }
  .phase-num { width: 220px; top: -46px; }
  .phase-num-r { right: -60px; }
  .phase-num-l { left: -60px; }

  .result { grid-template-columns: 1fr; gap: 30px; }
  .result-cards, .grid-2 { grid-template-columns: 1fr; }

  .tickets { grid-template-columns: 1fr; gap: 84px; max-width: 460px; margin-inline: auto; }

  .agenda { grid-template-columns: 1fr; gap: 22px; padding: 32px 30px; }
  .agenda-meta { grid-template-columns: 1fr; gap: 20px; }

  .loc-intro { grid-template-columns: 1fr; gap: 20px; }
  .loc-grid { grid-template-columns: 1fr; }
  .loc-cell { aspect-ratio: auto; }
  .loc-cell.card { padding: 30px 28px; }

  .info { grid-template-columns: 1fr; gap: 8px 0; }
  .info dt { margin-top: 18px; }

  .slots { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .ctabar { flex-direction: column; align-items: stretch; text-align: center; padding: 26px; gap: 18px; }
  .ctabar-txt { font-size: 20px; }

  .duo { max-width: 100%; }
  .duo-tag { font-size: 18px; padding: 8px 16px; }

  .bigshot { min-height: 520px; }
  .quote { font-size: 22px; padding: 32px 30px; }
  .quote-mark { width: 84px; top: -30px; left: -18px; }
  .quote-mark-blue { width: 84px; top: -26px; left: -16px; }
}

/* ---------------------------------------------------------------------
   MOBILE
   Gebaut nach dem 400er Frame. Alles einspaltig, Bild immer vor Text.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .wrap { padding-inline: 20px; }

  body { font-size: 15px; }
  .sec-pad    { padding-block: 62px; }
  .sec-pad-sm { padding-block: 38px; }

  .h1 { font-size: 33px; letter-spacing: -.02em; }
  .h1-sub { font-size: 19px; }
  .h2 { font-size: 25px; }
  .h3 { font-size: 20px; }
  .h4 { font-size: 18px; }
  .lead { font-size: 16px; }
  .sec-head { margin-bottom: 30px; }
  .sec-head p { font-size: 15px; }

  /* --- Hero --------------------------------------------------------- */
  .hero {
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 44px;
  }
  .hero-logo { width: 200px; margin-bottom: 30px; }
  .hero-kicker { font-size: 14px; margin-bottom: 14px; max-width: 300px; margin-inline: auto; }
  .hero .h1 { margin-bottom: -4px; }
  .hero .h1-sub { margin-bottom: 18px; }
  /* Im Design stehen Datum und Ort in Zeile 1, der Preis-Chip darunter.
     Der Umbruch wird erzwungen, statt ihn der Breite zu überlassen. */
  .hero .chips { margin-bottom: 0; gap: 8px; }
  .chip { font-size: 12.5px; padding: 6px 11px; }
  .hero .chips .chip:nth-child(3) { flex-basis: 100%; justify-content: center; margin-inline: auto; max-width: max-content; }

  /* Nav-Beschriftungen dürfen nicht abschneiden */
  .hero-nav a { padding: 12px 4px; font-size: 12.5px; white-space: nowrap; }

  /* Die 3D-Objekte stehen auf Mobile nebeneinander unter den Chips,
     nicht mehr links und rechts vom Text. */
  .hero-obj { position: static; animation-duration: 8s; }
  .hero-objs {
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 22px;
  }
  .hero-obj-wallet { width: 132px; }
  .hero-obj-btc    { width: 108px; margin-top: -14px; }
  .hero-obj-cards  { width: 74px;  margin-top: -46px; }

  /* Anker-Navigation als 2×2 */
  .hero-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    font-size: 13.5px;
    border-top: 1px solid var(--line);
  }
  .hero-nav a { padding: 13px 8px; justify-content: center; border-left: 0; }
  .hero-nav a:nth-child(2n) { border-left: 1px solid var(--line); }
  .hero-nav a:nth-child(n+3) { border-top: 1px solid var(--line); }

  /* --- Inhaltsblöcke ------------------------------------------------ */
  .split { border-radius: var(--r-lg); margin-bottom: 22px; }
  .split-img { min-height: 300px; }
  .split-body { padding: 20px 22px 30px; }
  .split-body .h3 { margin-bottom: 12px; }
  .split-body p, .list li { font-size: 14.5px; }

  .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 44px; }
  .grid-3 > *:last-child { grid-column: auto; max-width: none; }
  .icard { padding: 46px 22px 26px; }
  .icard-badge { width: 54px; height: 54px; top: -22px; }

  .ctabar { border-radius: var(--r-lg); padding: 22px; }
  .ctabar-txt { font-size: 17px; }
  .ctabar .btn, .btn { width: 100%; font-size: 15px; padding: 15px 20px; }

  .duo img { min-height: 260px; object-fit: cover; }
  .duo-tag { font-size: 14px; bottom: 14px; padding: 6px 12px; }
  .duo-tag-l { left: 12px; }
  .duo-tag-r { right: 12px; }

  .bio { margin-bottom: 54px; }
  .bio-img { max-width: 100%; }
  .bio-name { font-size: 26px; }
  .role { font-size: 12.5px; padding: 5px 11px; }
  .bio-body p { font-size: 14.5px; }

  .consult { padding: 32px 20px 0; border-radius: var(--r-lg); }
  .consult-team { margin: 14px -20px -1px; }
  .consult-trust img { max-width: 100%; }

  /* Timeline wieder untereinander, ohne Überlappung */
  .tl { grid-template-columns: 1fr; gap: 18px; }
  .tl-card { padding: 28px 24px; }
  .tl-card-now { margin: 0; padding: 32px 24px; }
  .tl-year, .tl-card-now .tl-year { font-size: 34px; }
  .tl-card p, .tl-card-now p { font-size: 14.5px; }

  .phase { margin-bottom: 46px; }
  .phase-in { padding: 30px 20px 34px; border-radius: var(--r-lg); }
  .phase-h { font-size: 22px; margin-bottom: 16px; }
  .phase-quote { font-size: 16px; margin-bottom: 22px; }
  .phase-quote-sm { font-size: 14px; }
  .phase-img { max-width: 100%; }
  .phase-num { width: 130px; top: -26px; }
  .phase-num-r { right: -8px; }
  .phase-num-l { left: -8px; }
  .disclaimer { font-size: 13px; }

  .quote { font-size: 17px; padding: 26px 22px; border-radius: var(--r-lg); }
  .quote-mark { width: 62px; top: -22px; left: -8px; }
  .quote-mark-blue { width: 62px; top: -20px; left: -8px; }

  .bonus figcaption { width: 88%; bottom: 20px; }
  .bonus figcaption .h3 { font-size: 18px; }
  .bonus figcaption p { font-size: 13px; }

  .card-glow { padding: 28px 22px; }

  /* --- Tickets ------------------------------------------------------ */
  .tickets { gap: 92px; padding-top: 74px; max-width: 100%; }
  .tk { padding: 128px 22px 24px; border-radius: var(--r-lg); }
  .tk-vis { width: 92%; top: -46px; }
  .tk-name { font-size: 26px; }
  .tk-sub, .tk-plus { font-size: 14px; }
  .list-check li { font-size: 14px; }
  .tk-now { font-size: 34px; }
  .tk-price s { font-size: 24px; }

  /* --- Agenda, Location, Infos -------------------------------------- */
  .agenda { padding: 26px 22px; border-radius: var(--r-lg); }
  .agenda-tiers { font-size: 15px; }
  .agenda-r .list li, .agenda-meta { font-size: 14px; }

  .loc-intro .h2 br { display: none; }
  .loc-cell.card { padding: 26px 22px; }
  .loc-cell p { font-size: 14px; }

  .info dt { font-size: 16px; }
  .info dd { font-size: 14.5px; }

  .hall, .gallery img { border-radius: var(--r-lg); }

  /* --- Grosses Location-Bild ---------------------------------------- */
  .bigshot { min-height: 420px; }
  .bigshot-logo { width: 88%; }
  .bigshot-in .chip { margin-bottom: 12px; }

  /* --- FAQ ---------------------------------------------------------- */
  .faq-cat { font-size: 18px; margin-top: 26px; }
  .faq summary { font-size: 14.5px; padding: 15px 18px; }
  .faq-a { padding: 16px 18px 4px; }
  .faq-a p { font-size: 14.5px; }

  /* --- Footer ------------------------------------------------------- */
  .foot { padding: 40px 20px 36px; }
  .foot-logo { width: 210px; }

  /* --- Bögen: auf Mobile schmaler, sonst überlaufen sie --------------- */
  .lines::before { width: 760px; height: 350px; }
  .lines-alt::before { width: 700px; height: 340px; }
}

/* =====================================================================
   Mobile-Feinschliff nach Sichtprüfung auf dem Gerät
   ===================================================================== */
@media (max-width: 640px) {

  /* --- Abstände durchgehend kompakter ------------------------------- */
  .sec-pad    { padding-block: 42px; }
  .sec-pad-sm { padding-block: 26px; }
  .ctabar-sec { padding-block: 54px; }
  .sec-head   { margin-bottom: 22px; }
  .bio        { margin-bottom: 34px; }
  .phase      { margin-bottom: 30px; }
  .split      { margin-bottom: 16px; }
  .btn-row    { margin-top: 26px; }
  .grid-3, .grid-2 { gap: 40px; }
  .bonus-cards, .result-cards { margin-top: 34px; }
  .duo        { margin-bottom: 34px; }
  .slots-note { margin-top: 24px; }
  .after-phases .sec-head { margin-bottom: 34px; }

  /* --- Hero --------------------------------------------------------- */
  .hero { padding-bottom: 0; }
  /* Eigenes Linien-Motiv fürs Handy */
  .hero-bg img { content: url("/assets/m/1_hero_lines.svg"); object-fit: cover; }

  /* Objekte weiter auseinander, Karte deutlich kleiner */
  .hero-objs { gap: 14px; margin: 16px 0 26px; }
  .hero-obj-wallet { width: 124px; }
  .hero-obj-btc    { width: 116px; margin-top: -8px; }
  .hero-obj-cards  { width: 58px;  margin-top: -54px; }

  /* Nav: nur eine waagerechte Linie zwischen den beiden Reihen */
  .hero-nav { border-top: 0; }
  .hero-nav a { border-left: 0 !important; }
  .hero-nav a:nth-child(2n) { border-left: 0; }
  .hero-nav a:nth-child(n+3) { border-top: 1px solid var(--line); }

  /* --- CTA-Balken: kompakter, ruhigerer Button ---------------------- */
  .ctabar { padding: 18px 16px; gap: 14px; }
  .ctabar-txt { font-size: 16px; line-height: 1.3; }
  .ctabar .btn {
    padding: 14px 18px;
    font-size: 15px;
    box-shadow: 0 6px 18px -8px var(--blue-glow);
  }
  .ctabar .btn:hover { box-shadow: 0 6px 18px -8px var(--blue-glow); transform: none; }

  /* --- Phasen: Ziffer sitzt ÜBER der Karte, nicht dahinter ---------- */
  .phase { padding-top: 44px; }
  .phase-num {
    position: absolute;
    top: 0;
    width: 116px;
    height: auto;
    z-index: 0;
  }
  .phase-num-r, .phase-num-l { left: 20px; right: auto; }
  .phase-in { position: relative; z-index: 1; }

  /* --- Tickets: Bild überlappte den Ticketnamen --------------------- */
  .tickets { padding-top: 96px; gap: 104px; }
  .tk { padding-top: 150px; }
  .tk-vis { width: 88%; top: -58px; }

  /* --- Location: Text gehört unter das jeweilige Bild --------------- */
  .loc-grid { display: flex; flex-direction: column; gap: 16px; }
  .loc-cell[style*="--ord"] { order: 1; }

  /* --- Fliesstext etwas ruhiger setzen ------------------------------ */
  .bio-body p, .split-body p, .phase-cols .list li, .agenda-r .list li,
  .info dd, .faq-a p, .icard p, .card-glow p, .tl-card p {
    line-height: 1.5;
  }
  .split-body p, .bio-body p { margin-bottom: .7em; }
}

/* =====================================================================
   Mobile-Nachschliff: CTA-Balken und Hero-Objekte
   ===================================================================== */
@media (max-width: 640px) {
  /* Der CTA soll zweizeilig stehen: fette Zeile, darunter der Preis.
     Der Umbruch wird erzwungen, statt ihn der Textbreite zu überlassen. */
  .ctabar { padding: 26px 20px 24px; gap: 18px; }
  .ctabar-txt { font-size: 19px; line-height: 1.25; }
  .ctabar-txt b { display: block; font-size: 21px; }

  .ctabar .btn {
    padding: 18px 20px;
    font-size: 17px;
    /* kräftiger Schein wie im Design */
    box-shadow: 0 0 34px -2px rgba(60, 80, 255, .75), 0 10px 26px -8px var(--blue-glow);
  }
  .ctabar .btn:hover {
    box-shadow: 0 0 34px -2px rgba(60, 80, 255, .75), 0 10px 26px -8px var(--blue-glow);
    transform: none;
  }

  /* Objekte sitzen tiefer, mehr Luft zu den Chips */
  .hero-objs { margin: 34px 0 26px; }
}

/* =====================================================================
   DANKE-SEITEN
   Eigene Blöcke, gleiches Designsystem wie die Landingpage.
   ===================================================================== */
.danke-hero {
  min-height: 0;
  padding-top: 56px;
  padding-bottom: 74px;
  text-align: center;
}
.danke-hero .hero-logo { margin-bottom: 34px; }
.danke-chip { margin-bottom: 26px; }
.danke-h1 { max-width: 880px; margin-inline: auto; margin-bottom: 20px; }
.danke-lead { max-width: 720px; margin-inline: auto; margin-bottom: 18px; }
.danke-sub {
  max-width: 700px;
  margin-inline: auto;
  font-size: 16px;
  color: var(--fg-mute);
}

/* Ticketkarte mit den gekauften Leistungen */
.danke-ticket {
  max-width: 720px;
  margin-inline: auto;
  padding: 42px 46px;
}
.danke-ticket .h3 { margin-bottom: 24px; }
.danke-ticket .list-check li { font-size: 16px; }
.danke-hinweis {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--fg-mute);
}

/* Die drei unfairen Vorteile */
.vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.vorteil {
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 34px 30px;
}
.vorteil-nr {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--lime);
  margin-bottom: 14px;
}
.vorteil .h3 { font-size: 21px; margin-bottom: 14px; }
.vorteil p { font-size: 15px; color: var(--fg-dim); }
.vorteil-kicker {
  margin-top: 16px;
  font-weight: 600;
  color: #fff !important;
}

/* Nächste Schritte */
.steps {
  list-style: none;
  counter-reset: s;
  margin: 0 auto 48px;
  padding: 0;
  max-width: 720px;
  display: grid;
  gap: 18px;
}
.steps li {
  counter-increment: s;
  position: relative;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 24px 28px 24px 78px;
  font-size: 15.5px;
  color: var(--fg-dim);
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 26px; top: 22px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
}
.steps b { display: block; color: #fff; margin-bottom: 4px; }
.steps .lnk { display: inline-block; margin-top: 8px; }

/* Kalender-Block */
.cal { text-align: center; }
.cal .btn { padding: 19px 38px; font-size: 18px; }
.cal-alt {
  display: block;
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--fg-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cal-alt:hover { color: #fff; }

/* Offener Link, damit er beim Durchklicken auffällt */
[data-todo] {
  background: var(--lime);
  color: #101010;
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
}

@media (max-width: 1023px) {
  .vorteile { grid-template-columns: 1fr; gap: 20px; }
  .danke-ticket { padding: 34px 30px; }
}

@media (max-width: 640px) {
  .danke-hero { padding-top: 34px; padding-bottom: 44px; }
  .danke-hero .hero-logo { width: 200px; margin-bottom: 22px; }
  .danke-h1 { font-size: 22px; }
  .danke-lead { font-size: 15px; }
  .danke-sub { font-size: 14px; }
  .danke-ticket { padding: 26px 22px; }
  .danke-ticket .list-check li { font-size: 14.5px; }
  .vorteil { padding: 26px 22px; }
  .vorteil .h3 { font-size: 18px; }
  .steps li { padding: 20px 20px 20px 62px; font-size: 14.5px; }
  .steps li::before { left: 18px; top: 19px; width: 28px; height: 28px; font-size: 14px; }
  .cal .btn { width: 100%; font-size: 16px; padding: 17px 20px; }
}

/* Ticketbild auf den Danke-Seiten, gekippt wie auf der Landingpage.
   Zwei Masse hängen zusammen:
   · padding-top hält den Ticketnamen unter dem Bild (420 px breit bei
     Verhältnis 1.76 sind rund 239 px, davon ragen 44 px heraus)
   · margin-top schafft Platz für genau diesen Überhang, sonst schiebt sich
     das Bild in die Zeile darüber. */
.danke-ticket { position: relative; padding-top: 232px; margin-top: 66px; }
.danke-ticket-vis {
  position: absolute;
  top: -44px; left: 50%;
  transform: translateX(-50%);
  width: 74%;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.6));
}
@media (max-width: 640px) {
  .danke-ticket { padding-top: 168px; margin-top: 54px; }
  .danke-ticket-vis { width: 88%; top: -34px; }
}

/* =====================================================================
   AGB-SEITE
   Reine Textseite, deshalb ruhiger als der Rest: kein Verlauf, kein
   Ornament, dafür bequeme Zeilenlänge.
   ===================================================================== */
.agb-kopf { padding: 54px 0 40px; border-bottom: 1px solid var(--line); }
.agb-logo { width: 240px; height: auto; margin-bottom: 34px; }
.agb-kopf .h2 { margin-bottom: 14px; }
.agb-sub { color: var(--fg-mute); font-size: 15px; }

.agb-wrap {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 60px;
  align-items: start;
  padding-block: 54px 90px;
}

/* Inhaltsverzeichnis bleibt beim Scrollen stehen */
.agb-nav {
  position: sticky;
  top: 28px;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}
.agb-nav-h {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
}
.agb-nav ol { margin: 0; padding-left: 0; list-style: none; counter-reset: agb; }
.agb-nav li { margin-bottom: 7px; }
.agb-nav a {
  color: var(--fg-mute);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
  display: block;
}
.agb-nav a:hover { color: #fff; }

.agb-text { max-width: 760px; }
.agb-h {
  position: relative;
  font-size: 22px;
  margin: 42px 0 16px;
  padding-left: 40px;
  scroll-margin-top: 24px;
}
.agb-h:first-child { margin-top: 0; }
.agb-h > span {
  position: absolute;
  left: 0;
  color: var(--lime);
  font-weight: 700;
}
.agb-p {
  position: relative;
  padding-left: 46px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-dim);
}
.agb-p > span {
  position: absolute;
  left: 0;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.agb-p b { color: #fff; }

@media (max-width: 1023px) {
  .agb-wrap { grid-template-columns: 1fr; gap: 30px; padding-block: 34px 60px; }
  .agb-nav { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .agb-kopf { padding: 32px 0 26px; }
  .agb-logo { width: 190px; margin-bottom: 22px; }
  .agb-h { font-size: 18px; padding-left: 32px; margin: 32px 0 12px; }
  .agb-p { padding-left: 36px; font-size: 14.5px; }
  .agb-p > span { font-size: 13px; }
}

/* =====================================================================
   Countdown im Hero
   Liegt absolut in der freien Mitte zwischen den schwebenden Objekten
   (links Geldbörse, rechts Coins und Karten). Dadurch wächst der Hero
   nicht, das war die ausdrückliche Vorgabe.
   ===================================================================== */
.cd {
  position: absolute;
  left: 50%;
  top: 452px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.cd-i {
  min-width: 74px;
  padding: 10px 6px 8px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
}
.cd-i b {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-i i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* =====================================================================
   Anker-Navigation als erkennbare Schaltflächen
   Vorher wirkten die vier Einträge wie kleine Textlinks. Jetzt tragen sie
   eine Fläche, der Ticket-Eintrag zusätzlich die Markenfarbe.
   ===================================================================== */
.hero-nav {
  gap: 12px;
  border-top: 0;
}
.hero-nav a {
  padding: 13px 22px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 600;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.hero-nav a + a { border-left: 0; }
.hero-nav a:hover {
  background: rgba(255,255,255,.11);
  transform: translateY(-1px);
}
/* Der wichtigste Einstieg trägt die Markenfarbe */
.hero-nav .is-strong {
  background: var(--blue);
  box-shadow: 0 0 26px -6px var(--blue-glow), inset 0 0 0 1px rgba(255,255,255,.16);
  color: #fff;
}
.hero-nav .is-strong:hover {
  background: #0A18FF;
  box-shadow: 0 0 32px -4px var(--blue-glow), inset 0 0 0 1px rgba(255,255,255,.24);
}

/* =====================================================================
   Ticket-Karten deutlicher vom Grund abheben
   Rückmeldung: „kommen kaum raus aus dem Design". Deshalb hellerer Grund,
   sichtbare Kante und ein Schatten, der die Karte vom Schwarz löst.
   ===================================================================== */
.tk-classic {
  background: linear-gradient(180deg, #141C4E 0%, #0A0F2E 55%, #070A1E 100%);
  box-shadow: inset 0 0 0 1px rgba(140,160,255,.28), 0 26px 60px -26px rgba(0,0,0,.9);
}
.tk-premium {
  box-shadow: 0 0 80px -18px var(--blue-glow), inset 0 0 0 1px rgba(255,255,255,.18),
              0 26px 60px -26px rgba(0,0,0,.9);
}
.tk-vip {
  box-shadow: 0 0 80px -18px rgba(225,255,32,.5), inset 0 0 0 1px rgba(0,0,0,.2),
              0 26px 60px -26px rgba(0,0,0,.9);
}
.tk-classic .tk-badge { background: rgba(255,255,255,.16); }

@media (max-width: 640px) {
  /* Auf Mobile stehen die Objekte in einer Reihe, dort läuft der
     Countdown normal im Fluss und bleibt schmal. */
  .cd {
    position: static;
    transform: none;
    gap: 7px;
    margin-top: 14px;
  }
  .cd-i { min-width: 0; flex: 1; padding: 8px 2px 6px; }
  .cd-i b { font-size: 20px; }
  .cd-i i { font-size: 9.5px; letter-spacing: .04em; }

  .hero-nav { gap: 8px; }
  .hero-nav a { padding: 12px 6px; font-size: 13px; }
  .hero-nav a:nth-child(2n) { border-left: 0; }
  .hero-nav a:nth-child(n+3) { border-top: 0; }
}

/* =====================================================================
   Nachschliff 31.07. (zweite Runde internes Feedback)
   ===================================================================== */

/* Location-Bild: Ausschnitt so wählen, dass der Schriftzug IM Motiv
   ausserhalb bleibt. Sonst stünde er doppelt neben unserem Logo. */
.bigshot-bg { object-position: center 78%; }

/* Ticket-Sektion: kräftigerer Grund, damit sich die Karten lösen.
   Vorher lagen dunkle Karten auf fast schwarzem Grund. */
.tickets-sec {
  background:
    radial-gradient(72% 46% at 50% 30%, rgba(12, 26, 150, .55) 0%, transparent 68%),
    radial-gradient(120% 70% at 50% 100%, rgba(2, 8, 60, .8) 0%, transparent 70%),
    var(--bg);
}
/* Zusätzlich ein weicher Schein direkt hinter der Kartenreihe */
.tickets { position: relative; }
.tickets::before {
  content: "";
  position: absolute;
  inset: 8% -6% 4%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(20, 40, 220, .34) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.tk { z-index: 1; }

/* Split-Karten: Headline sass zu tief unter der Oberkante.
   Der Inhalt war vertikal zentriert, dadurch hing der Abstand an der
   Textlänge und war bei beiden Karten unterschiedlich. Jetzt sitzt er
   oben an, der Abstand ist überall gleich. */
.split-body { padding: 38px 52px 46px; justify-content: flex-start; }

@media (max-width: 640px) {
  .tickets::before { inset: 4% -10% 2%; }
}

/* =====================================================================
   Ort-Sektion
   Karte plus Eckdaten, mittig auf der Seite. Das Motiv bringt den
   Blauton schon mit, deshalb hier kein zusätzlicher Verlauf.
   ===================================================================== */
.ort-sec { padding-block: 74px; }
.ort {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(120deg, #05081F 0%, #030413 60%);
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px rgba(120,140,255,.16);
  padding: 46px 20px 46px 52px;
  overflow: hidden;
}
.ort-txt .eyebrow { color: var(--lime); margin-bottom: 10px; }
.ort-txt .h2 { margin-bottom: 18px; }
.ort-txt p { font-size: 16px; color: var(--fg-dim); }
.ort-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

.ort-map { margin: 0; }
/* Das Motiv bringt einen eigenen fast schwarzen Grund mit. `screen` löst
   ihn auf, sodass nur die leuchtenden Linien stehen bleiben und die Karte
   nicht wie ein Kasten im Kasten wirkt. */
.ort-map img {
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}

@media (max-width: 1023px) {
  .ort { grid-template-columns: 1fr; gap: 26px; padding: 36px 30px; }
  .ort-map { order: -1; }
}
@media (max-width: 640px) {
  .ort-sec { padding-block: 34px; }
  .ort { padding: 26px 20px; border-radius: var(--r-lg); }
  .ort-txt p { font-size: 14.5px; }
  .ort-chips { margin-top: 18px; }
}

/* Impressum: einspaltig, kein Inhaltsverzeichnis nötig */
.agb-wrap-solo { grid-template-columns: 1fr; max-width: 780px; }
.agb-h-plain { padding-left: 0; font-size: 20px; }
.agb-p-plain { padding-left: 0; }

/* Datenschutz: dritte Ebene und Listen */
.ds-h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  margin: 26px 0 10px;
}
.ds-ul { margin: 0 0 14px; padding-left: 20px; }
.ds-ul li { font-size: 15px; line-height: 1.6; color: var(--fg-dim); margin-bottom: 8px; }
.ds-text .agb-h-plain { margin-top: 44px; }
.ds-text .agb-h-plain:first-of-type { margin-top: 0; }