/* ==========================================================================
   marke.css – blueprint-summit.de
   Umsetzung des Canva-Mockups (Design DAG_EuikC4k, Seite 2, 1366 px breit).
   Maße, Schriften und Farben aus dem Mockup-PDF ausgelesen (12.10.2026),
   Farben stehen nur im :root-Block.
   ========================================================================== */

/* ---------- Schriften (lokal, kein CDN) ---------- */
@font-face { font-family: 'Unbounded'; font-weight: 200; font-display: swap; src: url('../fonts/unbounded-extralight-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 200; font-display: swap; src: url('../fonts/unbounded-extralight-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-weight: 300; font-display: swap; src: url('../fonts/unbounded-light-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 300; font-display: swap; src: url('../fonts/unbounded-light-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-weight: 400; font-display: swap; src: url('../fonts/unbounded-regular-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 400; font-display: swap; src: url('../fonts/unbounded-regular-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-weight: 500; font-display: swap; src: url('../fonts/unbounded-medium-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 500; font-display: swap; src: url('../fonts/unbounded-medium-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'RNS Sisma'; font-weight: 300; font-display: swap; src: url('../fonts/rns-sisma-light.woff2') format('woff2'); }
@font-face { font-family: 'RNS Sisma'; font-weight: 400; font-display: swap; src: url('../fonts/rns-sisma-regular.woff2') format('woff2'); }
@font-face { font-family: 'RNS Sisma'; font-weight: 500; font-display: swap; src: url('../fonts/rns-sisma-medium.woff2') format('woff2'); }
@font-face { font-family: 'RNS Sisma'; font-weight: 700; font-display: swap; src: url('../fonts/rns-sisma-bold.woff2') format('woff2'); }
@font-face { font-family: 'South Korea'; font-weight: 400; font-display: swap; src: url('../fonts/south-korea-serif.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --tuerkis: #01cec5;          /* Unbounded-Hervorhebungen, Nummern */
  --cyan: #5ce1e6;             /* aktive Navigation, Leuchtrahmen, Dachzeilen */
  --creme: #fef7f2;            /* Fließtext */
  --weiss: #ffffff;
  --nacht: #072330;            /* Schrift auf hellem Knopf */
  --grund: #070c16;            /* Seitengrund unter der Verlaufsfläche */
  --karte: #131923;            /* dunkle Karten */
  --karte-hell: #1c2230;
  --petrol: #081d29;           /* Countdown, Bluebox, Nutzen-Karte */
  --petrol-hell: #0c2533;      /* Asset-Liste */
  --fuss: #071e28;
  --linie: rgba(160, 196, 235, 0.07);   /* Raster im Hintergrund */
  --rand-zart: rgba(92, 225, 230, 0.28);
  --leuchten: 0 0 22px rgba(92, 225, 230, 0.32), inset 0 0 14px rgba(92, 225, 230, 0.06);
  --verlauf-knopf: linear-gradient(90deg, #01cec5 0%, #1785a6 52%, #0b2b44 100%);

  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body: 'RNS Sisma', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'South Korea', Georgia, serif;

  --rahmen: 1092px;            /* Inhaltsbreite im Mockup (137 bis 1229 px) */
  --rand: clamp(1.25rem, 5vw, 2.5rem);
  --abstand: clamp(4.5rem, 10vw, 9.5rem);
  --ue: clamp(1.75rem, 1.1rem + 2.4vw, 2.6rem);   /* H2 = 41,3 px im Mockup */
}

/* ---------- Grundgerüst ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.bs {
  margin: 0;
  background: var(--grund);
  color: var(--creme);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
  line-height: 1.45;
  letter-spacing: 0.03em;
  overflow-x: hidden;
}
/* Verlaufsfläche mit Körnung aus dem Brandkit, steht beim Scrollen still */
body.bs::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(0deg, var(--linie) 0 1px, transparent 1px 100px),
    var(--grund) url('../img/summit/grund.webp') center / cover no-repeat;
}
/* Feines Raster wie im Mockup */
body.bs main { position: relative; overflow-x: clip; }  /* Lichtinseln ragen bewusst über den Rand */
/* Licht unter dem Mauszeiger: dasselbe Raster, heller, nur im Lichtkegel (feine Zeiger) */
body.bs::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(90deg, rgba(92, 225, 230, .32) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(0deg, rgba(92, 225, 230, .32) 0 1px, transparent 1px 100px),
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(23, 133, 166, .16), transparent 32%);
  -webkit-mask: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 30%), #000, transparent 72%);
          mask: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 30%), #000, transparent 72%);
  transition: opacity .6s ease;
}
body.bs.hat-zeiger::after { opacity: 1; }
:where(.bs) :where(img, video, svg) { display: block; max-width: 100%; }
:where(.bs) img { height: auto; }
:where(.bs) a { color: inherit; }
:where(.bs) p { margin: 0 0 1.2em; }
:where(.bs) :where(b, strong) { font-weight: 700; }
:where(.bs) address { font-style: normal; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1.25rem; background: var(--cyan); color: var(--nacht);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bs :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.rahmen { width: min(var(--rahmen), 100% - 2 * var(--rand)); margin-inline: auto; }
.abschnitt { padding-block: calc(var(--abstand) / 2); }
.abschnitt--eng { padding-block: calc(var(--abstand) / 3); }

/* ---------- Überschriften ---------- */
.ue {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--ue);
  line-height: 1.14;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--weiss);
  overflow-wrap: break-word;
  hyphens: manual;
}
.ue b { font-weight: 400; }
.ue--light { font-weight: 300; }
.ue--rechts { text-align: right; }
.t { color: var(--tuerkis); }
.c { color: var(--cyan); }
.versal { text-transform: uppercase; }
.dachzeile {
  margin: 0 0 .6rem;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
}
.dachzeile--gross { font-size: clamp(1rem, .8rem + .6vw, 1.25rem); font-weight: 500; letter-spacing: .08em; }
.fliesstext p { max-width: 34em; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 3rem; min-width: 12.25rem;
  padding: .85rem 1.15rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: box-shadow .25s ease, filter .25s ease, transform .25s ease;
}
.knopf--primaer {
  color: var(--weiss);
  background-color: #0e4f6c;          /* Fallback und Kontrastbasis */
  background-image: var(--verlauf-knopf);
  border-right-color: var(--tuerkis);
  text-shadow: 0 1px 2px rgba(0, 20, 30, .55);
}
.knopf--hell {
  color: var(--nacht);
  background: var(--cyan);
  box-shadow: 0 0 26px rgba(92, 225, 230, .45);
}
.knopf--rahmen {
  color: var(--cyan);
  background: transparent;
  border-color: var(--cyan);
}
.knopf:hover { filter: brightness(1.12); box-shadow: 0 0 28px rgba(92, 225, 230, .45); }
.knopf:active { transform: translateY(1px); }
.knopf-stapel { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; }
.knopf-stapel small { font-size: .78rem; font-weight: 500; color: var(--weiss); }
.knopfpaar {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
}
.textlink {
  display: inline-block; padding-block: .75rem;
  font-weight: 700; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tuerkis); text-underline-offset: .25em;
}

/* ---------- Karten mit Leuchtrahmen ---------- */
.karte { background: var(--petrol); border: 1px solid var(--rand-zart); }
.karte--leuchten { border: 2px solid var(--cyan); box-shadow: var(--leuchten); }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 30;
  border-bottom: 1px solid transparent;
  transition: background-color .45s ease, border-color .45s ease, backdrop-filter .45s ease;
}
.kopf__innen {
  width: min(1180px, 100% - 2 * var(--rand)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-block: 2.6rem 1rem;
  transition: padding .45s cubic-bezier(.16, 1, .3, 1);
}
.kopf__nav { grid-column: 2; }
.kopf__marke, .kopf__cta { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s, transform .5s cubic-bezier(.16, 1, .3, 1); }
.kopf__marke { grid-column: 1; justify-self: start; display: flex; transform: translateX(-10px); }
.kopf__bildmarke { display: none; }
.kopf__wortmarke { width: 172px; height: auto; }
.kopf__cta { grid-column: 3; justify-self: end; min-width: 0; min-height: 2.6rem; padding: .6rem 1.2rem; font-size: .74rem; transform: translateX(10px); }
.bs.kopf-fest .kopf { background-color: rgba(6, 12, 22, .72); border-bottom-color: rgba(92, 225, 230, .16); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.bs.kopf-fest .kopf__innen { padding-block: .8rem; }
.bs.kopf-fest .kopf__nav ul { gap: .25rem 2.2rem; }
.bs.kopf-fest .kopf__nav a { font-size: 1rem; }
.bs.kopf-fest .kopf__marke, .bs.kopf-fest .kopf__cta { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-transparency: reduce) { .bs.kopf-fest .kopf { background-color: #070d17; } }
.kopf__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 2.75rem; margin: 0; padding: 0; list-style: none; }
.kopf__nav a {
  display: inline-block; padding: .5rem 0;
  font-weight: 300; font-size: 1.07rem; letter-spacing: .04em;
  color: var(--weiss); text-decoration: none;
}
.kopf__nav a:hover { color: var(--cyan); }
.kopf__nav a[aria-current="page"] { font-weight: 700; color: var(--cyan); }
.kopf__burger { display: none; }

@media (max-width: 900px) {
  .kopf__innen { display: flex; justify-content: space-between; padding-block: 1rem; }
  .bs.kopf-fest .kopf__innen { padding-block: .6rem; }
  .kopf__marke { display: grid; place-items: center; min-width: 44px; min-height: 44px; opacity: 1; visibility: visible; transform: none; }
  .kopf .kopf__bildmarke { display: block; width: 40px; height: auto; }
  .kopf .kopf__wortmarke, .kopf__cta { display: none; }
  .kopf__burger {
    display: grid; place-items: center;
    width: 48px; height: 48px; padding: 0;
    background: transparent; border: 1px solid var(--rand-zart); color: var(--weiss); cursor: pointer;
  }
  .kopf__burger span, .kopf__burger span::before, .kopf__burger span::after {
    display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform .25s ease, background .25s ease;
  }
  .kopf__burger span::before, .kopf__burger span::after { content: ""; position: absolute; left: 0; }
  .kopf__burger span::before { top: -6px; }
  .kopf__burger span::after { top: 6px; }
  .kopf__burger[aria-expanded="true"] span { background: transparent; }
  .kopf__burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .kopf__burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
  .kopf__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(7, 18, 29, .97);
    border-block: 1px solid var(--rand-zart);
    padding: 1rem var(--rand) 1.5rem;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .kopf__nav.ist-offen { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .kopf__nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .kopf__nav a { display: block; padding: .8rem 0; font-size: 1.1rem; }
}

/* ---------- 1 · Hero ---------- */
.held {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 960px); display: flex; align-items: center;
  padding-block: clamp(7rem, 12vw, 9.5rem) clamp(3rem, 7vw, 6rem);
}
.held__termin { margin: 0 0 1.4rem; font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.held__innen { display: grid; grid-template-columns: minmax(0, 330fr) minmax(0, 720fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; width: min(1180px, 100% - 2 * var(--rand)); }
.held__marke { width: 100%; max-width: 330px; justify-self: start; position: relative; }
.held__marke .bm { width: 100%; height: auto; overflow: visible; }
.held__titel { margin: 0 0 1.6rem; font-family: var(--font-display); text-transform: uppercase; line-height: .98; font-size: clamp(2.6rem, 1rem + 6.3vw, 6.15rem); letter-spacing: .005em; }
.held__blueprint { display: block; font-weight: 500; color: var(--weiss); }
.held__summit { display: block; font-weight: 200; color: var(--creme); }
@media (min-width: 761px) { .held .knopfpaar { flex-wrap: nowrap; } }
.held__unterzeile { font-weight: 300; font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem); letter-spacing: .05em; line-height: 1.35; margin-bottom: 0; }
.held .knopfpaar { justify-content: flex-end; margin-top: clamp(2.5rem, 6vw, 5rem); }

@media (max-width: 760px) {
  .held__innen { grid-template-columns: 1fr; }
  .held__marke { max-width: 150px; }
  .held { min-height: 0; }
  .held__unterzeile br { display: none; }
  .held .knopfpaar { justify-content: flex-start; }
  .held__text { min-width: 0; }
}

/* ---------- Zweispaltige Abschnitte ---------- */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 442px); gap: 2.5rem clamp(2rem, 8vw, 6.5rem); align-items: start; }
@media (max-width: 900px) { .zweispaltig { grid-template-columns: 1fr; } }

/* 2 · Nutzen-Karte */
.netzwerk__seite .knopfpaar { justify-content: space-between; flex-wrap: nowrap; gap: 1rem; margin-top: 2.25rem; }
@media (max-width: 480px) { .netzwerk__seite .knopfpaar { flex-wrap: wrap; } }
.nutzen { padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem) 2rem; }
.nutzen h3 { margin: 0 0 1.4rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, .95rem + .4vw, 1.18rem); text-transform: uppercase; color: var(--tuerkis); }
.nutzen__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.5rem; }
.nutzen__liste li { display: grid; grid-template-columns: 3.2rem 1fr; font-weight: 700; font-size: .92rem; line-height: 1.38; text-transform: uppercase; color: var(--weiss); }
.nutzen__liste b { font-weight: 700; }
.nr { font-family: var(--font-display); font-weight: 400; color: var(--tuerkis); }

/* 3 · Countdown */
.countdown { display: grid; grid-template-columns: 1fr auto; gap: 2rem 3rem; align-items: center; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 6vw, 5.75rem); }
.countdown__datum { margin: .25rem 0 .9rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1rem + 2vw, 1.9rem); text-transform: uppercase; color: var(--weiss); }
.countdown__ort { font-weight: 300; font-size: .9rem; color: #e1e7ec; }
.countdown__uhr { text-align: center; }
.countdown__zahlen { display: flex; gap: clamp(1rem, 3vw, 2.4rem); justify-content: center; }
.countdown__zahlen > span { display: flex; flex-direction: column; align-items: center; font-weight: 300; font-size: .8rem; color: var(--weiss); }
.countdown__zahlen b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.15rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown__sek b { color: var(--tuerkis); }
.countdown__hinweis { margin: 1.6rem 0 0; font-weight: 700; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cyan); }
@media (max-width: 760px) { .countdown { grid-template-columns: 1fr; } .countdown__uhr { text-align: left; } .countdown__zahlen { justify-content: flex-start; } }

/* 4 · Ökosystem: Überschrift rechts, Text links */
.zweispaltig--gespiegelt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.zweispaltig--gespiegelt .ue { grid-column: 2; grid-row: 1; }
.zweispaltig--gespiegelt .fliesstext { grid-column: 1; grid-row: 1 / span 2; }
.oekosystem__knopf { grid-column: 2; grid-row: 2; align-self: center; text-align: right; }
@media (max-width: 900px) {
  .zweispaltig--gespiegelt { grid-template-columns: 1fr; }
  .zweispaltig--gespiegelt .ue, .zweispaltig--gespiegelt .fliesstext, .oekosystem__knopf { grid-column: 1; grid-row: auto; }
  .zweispaltig--gespiegelt .ue { text-align: left; }
  .oekosystem__knopf { text-align: left; }
}

/* 5 · Das Event */
.event__raster { display: grid; grid-template-columns: minmax(0, 430fr) minmax(0, 607fr); gap: 2.5rem clamp(2rem, 6vw, 5.5rem); align-items: center; }
.event__raster .fliesstext p:last-child { margin-bottom: 0; }
.film { position: relative; aspect-ratio: 16 / 9; background: #000; }
.film__video { width: 100%; height: 100%; object-fit: cover; }
.film__start {
  position: absolute; inset: 0; display: grid; place-items: center;
  width: 100%; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(4, 12, 22, 0) 40%, rgba(4, 12, 22, .35));
  color: var(--weiss);
}
.film__start svg { width: clamp(56px, 7vw, 76px); height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); transition: transform .25s ease, color .25s ease; }
.film__start:hover svg, .film__start:focus-visible svg { transform: scale(1.08); color: var(--cyan); }
.film.ist-aktiv .film__start { display: none; }
@media (max-width: 900px) { .event__raster { grid-template-columns: 1fr; } }

/* 6 · Formate */
.formate .ue { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.formate__reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; align-items: start; padding-top: 2.4rem; }
.formatkarte {
  min-height: 19.5rem;
  padding: 2.75rem 1.7rem 2rem;
  background: linear-gradient(160deg, #141923 0%, #1d2331 100%);
  border: 1px solid rgba(92, 160, 230, .45);
}
.formatkarte h3 { margin: 0 0 2rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, .9rem + .5vw, 1.25rem); line-height: 1.12; text-transform: uppercase; color: var(--weiss); }
.formatkarte p { font-weight: 300; font-size: 1rem; line-height: 1.35; letter-spacing: .04em; }
.formatkarte .dachzeile { color: var(--tuerkis); font-size: .85rem; margin-bottom: .75rem; }
.formatkarte--vorbild { min-height: 24.5rem; margin-top: -2.4rem; border: 2px solid var(--cyan); box-shadow: var(--leuchten); display: flex; flex-direction: column; }
.formatkarte--vorbild .textlink { margin-top: auto; }
.formate .knopfpaar { margin-top: clamp(2.5rem, 6vw, 5rem); }
.wisch-fortschritt { display: none; }
/* Am Handy: Wischreihe mit Anschnitt der nächsten Karte und Fortschrittslinie (Agenturregel 02.10.2026) */
@media (max-width: 760px) {
  .formate__reihe {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
    margin-inline: calc(-1 * var(--rand)); padding: 1rem var(--rand) 1rem;
    scrollbar-width: none;
  }
  .formate__reihe::-webkit-scrollbar { display: none; }
  .formatkarte { flex: 0 0 78%; scroll-snap-align: start; min-height: 21rem; }
  .formatkarte--vorbild { margin-top: 0; min-height: 21rem; }
  .wisch-fortschritt { display: block; height: 2px; margin-top: 1rem; background: rgba(255, 255, 255, .14); }
  .wisch-fortschritt span { display: block; height: 100%; width: 25%; background: var(--cyan); transform-origin: left; transition: transform .15s linear; }
}

/* 7 · Bluebox */
.bluebox { position: relative; background: var(--petrol); padding: clamp(1.75rem, 4.5vw, 3.6rem) clamp(1.25rem, 4.5vw, 3.6rem) clamp(1.75rem, 4vw, 3.25rem); }
.bluebox__kopf { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); gap: 2rem clamp(1.5rem, 5vw, 4rem); align-items: center; }
.bluebox .dachzeile--gross { color: var(--tuerkis); font-weight: 700; }
.bluebox__bild { width: 100%; max-width: 340px; justify-self: center; }
.bluebox__sprung { display: flex; width: max-content; max-width: 100%; margin: 2.75rem 0 2rem auto; }
.assets {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1.75rem;
  margin: 0; padding: 2.5rem clamp(1.25rem, 3vw, 2.6rem); list-style: none;
  background: var(--petrol-hell); border-left: 4px solid var(--tuerkis);
  scroll-margin-top: 2rem;
}
.assets li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .25rem .5rem; }
.assets .nr { font-size: 1.05rem; color: var(--cyan); line-height: 1.2; }
.assets h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-weight: 400; font-size: .83rem; text-transform: uppercase; color: var(--weiss); }
.assets p { margin: 0; font-weight: 300; font-size: .85rem; line-height: 1.3; color: #e3e8ec; }
@media (max-width: 900px) { .assets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .bluebox__kopf { grid-template-columns: 1fr; }
  .bluebox__bild { max-width: 260px; grid-row: 1; }
  .bluebox__sprung { margin-left: 0; }
  /* Bündeln statt stapeln (Julian, 12.10.2026): sieben Assets als Wischreihe */
  .assets {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 1.5rem 1.25rem; scrollbar-width: none;
  }
  .assets::-webkit-scrollbar { display: none; }
  .assets li { flex: 0 0 72%; scroll-snap-align: start; padding: 1.1rem 1rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--rand-zart); }
}

/* 9 · Plattform */
.plattform__raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "t t t t t t g g g g g g"
    "k k k l l l l l r r r r";
  gap: 2rem clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.plattform__text { grid-area: t; align-self: center; }
.plattform__knoepfe { grid-area: k; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-top: 2rem; }
.plattform__foto img { width: 100%; height: 100%; object-fit: cover; }
.plattform__foto--gross { grid-area: g; aspect-ratio: 439 / 297; }
.plattform__foto--links { grid-area: l; aspect-ratio: 312 / 250; }
.plattform__foto--rechts { grid-area: r; aspect-ratio: 312 / 317; }
@media (max-width: 900px) {
  .plattform__raster { grid-template-columns: 1fr 1fr; grid-template-areas: "t t" "g g" "l r" "k k"; }
  .plattform__knoepfe { align-items: flex-start; padding-top: 0; }
}

/* 10 · Videoband */
.band { height: clamp(220px, 29vw, 420px); overflow: hidden; background: #000; }
.band__video { width: 100%; height: 100%; object-fit: cover; }

/* 11 · Preise */
.preise { position: relative; isolation: isolate; }
.preise::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../img/summit/hoehenlinien.svg') center / cover no-repeat;
  opacity: .22;
}
.preise__titel { max-width: 21em; margin-inline: clamp(0rem, 4vw, 3.6rem) 0; margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.preise__karten { display: grid; grid-template-columns: repeat(2, minmax(0, 427px)); justify-content: center; gap: 2.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; padding-top: 2.2rem; }
.preiskarte {
  position: relative; display: flex; flex-direction: column;
  min-height: 30rem;
  padding: 3.4rem clamp(1.5rem, 3.5vw, 2.9rem) 2.7rem;
  background: linear-gradient(170deg, #141923 0%, #1b2130 100%);
  border: 1px solid rgba(92, 160, 230, .45);
}
.preiskarte--empfohlen { margin-top: -2.2rem; min-height: 33.5rem; border: 2px solid var(--cyan); box-shadow: var(--leuchten); }
.preiskarte__schild {
  position: absolute; top: -1px; left: 50%; transform: translate(-50%, -50%);
  margin: 0; padding: .55rem 1.25rem;
  background: var(--verlauf-knopf); background-color: #0e4f6c;
  font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--weiss);
}
.preiskarte .dachzeile { font-size: .7rem; }
.preiskarte__name { margin: 0 0 1.4rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1rem + 1.2vw, 1.72rem); line-height: 1; text-transform: uppercase; color: var(--weiss); overflow-wrap: anywhere; }
.preiskarte__name b { font-weight: 400; }
.preiskarte__name--klein { font-size: clamp(1.15rem, .9rem + .7vw, 1.36rem); letter-spacing: -.01em; overflow-wrap: normal; }
.preiskarte__preis { display: flex; align-items: baseline; gap: .9rem; margin: 0 0 .35rem; }
.preiskarte__preis b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 2.52rem); color: var(--weiss); }
.preiskarte__preis span { font-weight: 300; font-size: 1.12rem; }
.preiskarte__vorher { margin: 0 0 1rem; font-family: var(--font-display); font-weight: 200; font-size: 1rem; text-transform: uppercase; color: var(--cyan); }
.pfeilliste { margin: 1.3rem 0 2.5rem; padding: 0; list-style: none; display: grid; gap: .65rem; font-size: .9rem; }
.pfeilliste li { position: relative; padding-left: 2.25rem; }
.pfeilliste li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 1.1rem; height: .9rem;
  background: linear-gradient(90deg, #2aa4c8, var(--cyan));
  -webkit-mask: url('../img/summit/pfeil.svg') center / contain no-repeat;
          mask: url('../img/summit/pfeil.svg') center / contain no-repeat;
}
.preiskarte .knopf { margin-top: auto; align-self: center; }
@media (max-width: 760px) {
  .preise__karten { grid-template-columns: 1fr; gap: 4rem; }
  .preiskarte, .preiskarte--empfohlen { min-height: 0; margin-top: 0; }
  .preise__titel { margin-inline: 0; }
}

/* 12 · Stimmen (Karussell) */
.stimmen .ue { margin-bottom: 2rem; }
.stimmen__einleitung { text-align: right; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }
.karussell { position: relative; }
.karussell__spur {
  --karte-b: min(700px, 86vw);
  display: flex; gap: clamp(1rem, 3vw, 2.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2rem calc((100% - var(--karte-b)) / 2);
  scrollbar-width: none;
}
.karussell__spur::-webkit-scrollbar { display: none; }
.stimme {
  flex: 0 0 var(--karte-b); scroll-snap-align: center;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 1rem;
  min-height: 22rem; margin: 0;
  padding: clamp(1.5rem, 3.5vw, 2.6rem) clamp(1.25rem, 3vw, 2.6rem);
  background: #141922;
  border: 2px solid transparent;
  overflow: hidden;
  opacity: .45;
  transition: opacity .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.stimme.ist-aktiv { opacity: 1; border-color: var(--cyan); box-shadow: var(--leuchten); }
.stimme__name { margin: 0 0 1.1rem; font-weight: 700; font-size: 1.1rem; color: var(--creme); }
.stimme blockquote { margin: 0; }
.stimme blockquote p { margin: 0; font-weight: 300; font-size: .92rem; line-height: 1.45; }
.stimme__bild { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.stimme__bild::before {
  content: ""; position: absolute; inset: -18%;
  background: url('../img/summit/bildmarke.svg') center / contain no-repeat;
  opacity: .12;
}
.stimme__bild picture { position: relative; width: 52%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid #2aa4d8; }
.stimme__bild img { width: 100%; height: 100%; object-fit: cover; }
.karussell__punkte { display: flex; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
.karussell__punkte button {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.karussell__punkte button::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #2a6f86; transition: background .25s ease, transform .25s ease; }
.karussell__punkte button[aria-current="true"]::before { background: var(--cyan); transform: scale(1.15); }
@media (max-width: 760px) {
  .stimme { grid-template-columns: 1fr; }
  .stimme__bild { grid-row: 1; max-width: 200px; justify-self: center; }
  .stimmen__einleitung, .stimmen .ue { text-align: left; }
}

/* 13 · Einreichen + Formular */
.einreichen .fliesstext p { font-size: .92rem; }
.einreichen { scroll-margin-top: 1rem; }
.hinweisbox {
  margin: 2.5rem 0 3rem; padding: 1.75rem 2rem 1.75rem 2.6rem;
  background: rgba(20, 26, 36, .9); border-left: 4px solid var(--tuerkis);
  font-weight: 300; font-size: .85rem !important; line-height: 1.45;
}
.hinweisbox b { font-weight: 700; }
.formular { background: #151a23; border: 1px solid rgba(255, 255, 255, .55); padding: clamp(1.5rem, 3.5vw, 2.4rem) clamp(1.25rem, 3.5vw, 2.4rem); }
.formular__titel { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 400; font-size: .9rem; text-transform: uppercase; color: var(--tuerkis); }
.formular__meldung:empty { display: none; }
.formular__meldung { margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-left: 4px solid var(--cyan); background: rgba(92, 225, 230, .08); font-size: .92rem; }
.formular__meldung.ist-fehler { border-color: #ff8a8a; background: rgba(255, 138, 138, .08); }
.formular__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.feld { margin-bottom: 1.35rem; }
.feld label { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; font-weight: 700; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; color: var(--weiss); }
.feld__optional { font-weight: 300; text-transform: none; letter-spacing: .02em; color: #c9d1d8; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea, .feld input[type="file"] {
  width: 100%;
  padding: .85rem 1.1rem;
  font: 300 1.05rem/1.4 var(--font-body); letter-spacing: .04em;
  color: var(--weiss);
  background: linear-gradient(90deg, #12171f 0%, #1f2631 100%);
  border: 1px solid transparent; border-top-color: var(--tuerkis); border-left-color: var(--tuerkis);
  border-radius: 0;
}
.feld textarea { min-height: 9.5rem; resize: vertical; }
.feld ::placeholder { color: rgba(254, 247, 242, .62); }
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.feld [aria-invalid="true"] { border-color: #ff8a8a; }
.feld input[type="file"] { padding: .6rem .8rem; font-size: .9rem; cursor: pointer; }
.feld input[type="file"]::file-selector-button {
  margin-right: 1rem; padding: .55rem 1rem; cursor: pointer;
  font: 700 .75rem var(--font-body); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cyan); background: transparent; border: 1px solid var(--cyan);
}
.feld--datei label svg { color: #cfd6dc; }
.feld__hinweis { margin: .45rem 0 0; font-size: .8rem; font-weight: 300; color: #c9d1d8; }
.feld__fehler { margin: .4rem 0 0; font-size: .85rem; color: #ffb0b0; }
.feld__fehler:empty { display: none; }
.feld--haken { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.4rem; margin-top: 2rem; border-bottom: 1px solid rgba(1, 206, 197, .35); }
.feld--haken label { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: .92rem; line-height: 1.25; color: var(--tuerkis); cursor: pointer; }
.feld--haken input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 46px; height: 46px; margin: 0; cursor: pointer;
  background: linear-gradient(135deg, #12171f, #222a35);
  border: 1px solid transparent; border-left-color: var(--tuerkis); border-top-color: var(--tuerkis);
  display: grid; place-items: center;
}
.feld--haken input::after { content: ""; width: 12px; height: 22px; border: solid var(--cyan); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-2px, -2px); opacity: 0; transition: opacity .15s ease; }
.feld--haken input:checked::after { opacity: 1; }
.formular__datenschutz { font-size: .8rem; font-weight: 300; line-height: 1.45; margin: 1.5rem 0 1.75rem; }
.formular__datenschutz a { color: var(--cyan); }
.formular__senden { display: flex; margin-inline: auto; }
.formular.ist-sendend .formular__senden { opacity: .6; pointer-events: none; }

/* ---------- Fuß ---------- */
.fuss { background: var(--fuss); color: var(--weiss); padding: clamp(3rem, 6vw, 4.5rem) 0 1.75rem; }
.fuss__innen { width: min(1172px, 100% - 2 * var(--rand)); margin-inline: auto; }
.fuss__spalten { display: grid; grid-template-columns: repeat(3, auto); justify-content: end; gap: 2.5rem clamp(2.5rem, 9vw, 6.5rem); margin-right: clamp(0rem, 6vw, 5.5rem); }
.fuss h2 { margin: 0 0 1.25rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.13rem; letter-spacing: .08em; text-transform: uppercase; }
.fuss ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.fuss p, .fuss a { font-weight: 300; font-size: .92rem; line-height: 1.65; text-decoration: none; }
.fuss a:hover { color: var(--cyan); text-decoration: underline; }
.fuss__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
.fuss__leiste p { margin: 0; }
.fuss__recht { display: flex; gap: 1.5rem; margin-left: auto !important; font-size: .78rem; }
.fuss__social { display: flex; gap: .5rem; }
.fuss__social a { display: grid; place-items: center; width: 44px; height: 44px; }
@media (max-width: 760px) {
  .fuss__spalten { grid-template-columns: 1fr; justify-content: start; margin-right: 0; }
  .fuss__recht { margin-left: 0 !important; }
}

@media (max-width: 760px) {
  .ue--rechts { text-align: left; }
  .bluebox .ue { font-size: clamp(1.35rem, 6.2vw, 2.6rem); }
}


/* ==========================================================================
   Bewegung und Tiefe (Runde 2, 12.10.2026)
   Nur Bauteile, die das Mockup selbst zeigt: Konstruktionslinien, Bildmarke,
   Leuchtrahmen, Raster, Höhenlinien, Polarlicht, Countdown. Alles fällt bei
   prefers-reduced-motion weg (Block ganz unten).
   ========================================================================== */
@property --spur { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --weich: cubic-bezier(.16, 1, .3, 1); }

/* --- Hero: Konstruktionslinien zeichnen sich, dann die Bildmarke --- */
.held__linien { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.held__linien path { fill: none; stroke: #c8dcff; stroke-opacity: .2; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 2.2s var(--weich) forwards; }
.held__linien path:nth-child(2) { animation-delay: .15s; }
.held__linien path:nth-child(3) { animation-delay: .3s; stroke-opacity: .12; }
.held__linien path:nth-child(4) { animation-delay: .45s; stroke-opacity: .12; }
.held__linien path:nth-child(5) { animation-delay: .6s; stroke-opacity: .14; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }

.held__licht {
  position: absolute; z-index: -1; pointer-events: none;
  left: -8vw; top: 12%; width: 62vw; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(28, 120, 190, .55), rgba(28, 120, 190, 0) 70%);
  filter: blur(20px);
  animation: atmen 9s ease-in-out infinite alternate;
}
@keyframes atmen { from { transform: translate3d(0, 0, 0) scale(1); opacity: .75; } to { transform: translate3d(4vw, -2vw, 0) scale(1.08); opacity: 1; } }

.bm__bogen { fill: #fff; fill-opacity: 0; stroke: #fff; stroke-width: .35; stroke-dasharray: 1; stroke-dashoffset: 1; animation: bm-zeichnen 1.5s var(--weich) forwards, bm-fuellen .9s ease forwards; }
.bm__bogen:nth-of-type(1) { animation-delay: .5s, 1.5s; }
.bm__bogen:nth-of-type(2) { animation-delay: .6s, 1.6s; }
.bm__bogen:nth-of-type(3) { animation-delay: .7s, 1.7s; }
.bm__bogen:nth-of-type(4) { animation-delay: .8s, 1.8s; }
.bm__bogen:nth-of-type(5) { animation-delay: .9s, 1.9s; }
.bm__bogen:nth-of-type(6) { animation-delay: 1s, 2s; }
.bm__bogen:nth-of-type(7) { animation-delay: 1.1s, 2.1s; }
.bm__bogen:nth-of-type(8) { animation-delay: 1.2s, 2.2s; }
.bm__bogen:nth-of-type(9) { animation-delay: 1.3s, 2.3s; }
.bm__pfeil { opacity: 0; transform: translateY(14%); transform-box: fill-box; animation: bm-pfeil 1.2s var(--weich) 1.9s forwards; }
.bm__glanz { mix-blend-mode: overlay; pointer-events: none; }
@keyframes bm-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes bm-fuellen { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes bm-pfeil { to { opacity: 1; transform: none; } }

/* Titel: Zeilen fahren aus einer Maske, Rest folgt weich */
.held__blueprint, .held__summit { overflow: hidden; padding-bottom: .06em; }
.held__blueprint > span, .held__summit > span { display: block; transform: translateY(105%); animation: hoch 1.1s var(--weich) forwards; }
.held__blueprint > span { animation-delay: .35s; }
.held__summit > span { animation-delay: .5s; }
.held__termin, .held__unterzeile, .held .knopfpaar { opacity: 0; transform: translateY(14px); animation: einblenden .9s var(--weich) forwards; }
.held__termin { animation-delay: .2s; }
.held__unterzeile { animation-delay: .75s; }
.held .knopfpaar { animation-delay: .95s; }
@keyframes hoch { to { transform: none; } }
@keyframes einblenden { to { opacity: 1; transform: none; } }

/* --- Abschnitte: Lichtinseln wie im Mockup statt einer gleichförmigen Fläche --- */
.netzwerk, .event, .formate, .bluebox-abschnitt, .stimmen, .einreichen { position: relative; isolation: isolate; }
.netzwerk::before, .event::before, .formate::before, .bluebox-abschnitt::before, .stimmen::before, .einreichen::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(70vw, 900px); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(30, 110, 180, .3), rgba(30, 110, 180, 0));
}
.netzwerk::before { right: -20vw; top: -10%; }
.event::before { left: -24vw; top: 0; }
.formate::before { right: -18vw; top: 20%; }
.bluebox-abschnitt::before { left: 10%; top: 5%; width: min(90vw, 1100px); background: radial-gradient(closest-side, rgba(1, 206, 197, .12), transparent); }
.stimmen::before { left: 50%; top: 35%; transform: translateX(-50%); width: min(100vw, 1200px); }
.einreichen::before { right: -10vw; bottom: -10%; }

/* --- Überschriften: Zeile für Zeile aus der Maske (JS teilt an <br>) --- */
.ue .zeile { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ue .zeile > span { display: block; }
.js-bewegung .ue.wartet .zeile > span { transform: translateY(108%); }
.js-bewegung .ue .zeile > span { transition: transform 1.1s var(--weich); transition-delay: calc(var(--z, 0) * 90ms); }

/* --- Inhalte: weich von unten, Geschwister gestaffelt --- */
.js-bewegung .wartet:not(.ue) { opacity: 0; transform: translateY(26px); }
.js-bewegung [data-zeige] { transition: opacity .9s var(--weich), transform 1s var(--weich); transition-delay: calc(var(--n, 0) * 80ms); }

/* --- Leuchtrahmen: ein Lichtpunkt läuft beim Erscheinen einmal um --- */
.leuchtspur { position: relative; }
.leuchtspur::after {
  content: ""; position: absolute; inset: -2px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spur), transparent 0 62%, rgba(92, 225, 230, .2) 76%, #ffffff 86%, var(--cyan) 90%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
}
.leuchtspur.ist-da::after { animation: umlauf 2.6s cubic-bezier(.45, 0, .2, 1) .3s; }
@keyframes umlauf { 0% { --spur: 0deg; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { --spur: 360deg; opacity: 0; } }

/* --- Formatkarten: Rahmen leuchtet dort, wo der Zeiger ist --- */
.formatkarte { position: relative; transition: transform .5s var(--weich), border-color .4s ease; }
.formatkarte::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), var(--cyan), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .formatkarte:hover { transform: translateY(-6px); }
  .formatkarte:hover::before { opacity: 1; }
  .formatkarte--vorbild:hover { transform: translateY(-6px); }
}

/* --- Countdown: Ziffern rollen wie ein Zählwerk --- */
.countdown__zahlen b { display: inline-flex; height: 1.1em; overflow: hidden; line-height: 1.1; }
.rolle { display: block; height: 1.1em; overflow: hidden; }
.rolle__band { display: flex; flex-direction: column; transition: transform .7s var(--weich); }
.rolle__band span { display: block; height: 1.1em; }

/* --- Knöpfe: Lichtkante streicht beim Zeigen über die Fläche --- */
.knopf--primaer, .knopf--hell { position: relative; overflow: hidden; isolation: isolate; }
.knopf--primaer::after, .knopf--hell::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
  transform: translateX(-120%);
}
.knopf--primaer:hover::after, .knopf--hell:hover::after, .knopf--primaer:focus-visible::after { transform: translateX(120%); transition: transform .8s var(--weich); }
.knopf--rahmen:hover { background: rgba(92, 225, 230, .08); }

/* --- Bluebox: Koffer schwebt über seinem Licht --- */
.bluebox__kopf { position: relative; }
.bluebox__bild { position: relative; animation: schweben 6s ease-in-out infinite alternate; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.bluebox__kopf::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 4%; top: 18%; width: 42%; aspect-ratio: 1.6;
  background: url('../img/summit/polarlicht.webp') center / contain no-repeat;
  filter: blur(34px); opacity: .45;
  animation: polarlicht 14s ease-in-out infinite alternate;
}
.bluebox__kopf > * { position: relative; z-index: 1; }
@keyframes schweben { from { transform: translateY(6px); } to { transform: translateY(-10px); } }
@keyframes polarlicht { from { transform: translateX(-4%) scaleY(.9); opacity: .35; } to { transform: translateX(5%) scaleY(1.1); opacity: .55; } }
.assets li { transition: background-color .3s ease; }
.assets li:hover .nr { text-shadow: 0 0 14px rgba(92, 225, 230, .8); }

/* --- Plattform: Fotos öffnen sich wie ein Vorhang --- */
/* Vorhang am Bild, nicht am beobachteten Rahmen: IntersectionObserver rechnet die clip-path des Ziels mit */
.js-bewegung .plattform__foto.wartet { opacity: 1; transform: none; }
.plattform__foto { overflow: hidden; }
.plattform__foto img { clip-path: inset(0); transition: clip-path 1.3s var(--weich), transform 1.8s var(--weich); transition-delay: calc(var(--n, 0) * 120ms); }
.plattform__foto.wartet img { clip-path: inset(0 0 100% 0); transform: scale(1.12); }

/* --- Videoband: fährt beim Scrollen leicht gegen die Seite --- */
@supports (animation-timeline: view()) {
  .band__video { height: 124%; animation: band-gegen linear both; animation-timeline: view(); }
  @keyframes band-gegen { from { transform: translateY(-16%); } to { transform: translateY(0); } }
}

/* --- Preise: Höhenlinien und Polarlicht bewegen sich langsam --- */
.preise::before { animation: hoehenlinien 40s ease-in-out infinite alternate; }
.preise::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: 4%; width: min(110vw, 1400px); aspect-ratio: 2.4; transform: translateX(-50%);
  background: url('../img/summit/polarlicht.webp') center / contain no-repeat;
  filter: blur(60px); opacity: .22;
  animation: polarlicht-unten 18s ease-in-out infinite alternate;
}
@keyframes hoehenlinien { from { transform: scale(1.05) translate3d(-1.5%, 0, 0); } to { transform: scale(1.12) translate3d(1.5%, -2%, 0); } }
@keyframes polarlicht-unten { from { transform: translateX(-52%) scaleX(.95); opacity: .16; } to { transform: translateX(-48%) scaleX(1.05); opacity: .28; } }
.preiskarte--empfohlen { animation: glimmen 5s ease-in-out infinite alternate; }
@keyframes glimmen { from { box-shadow: var(--leuchten); } to { box-shadow: 0 0 38px rgba(92, 225, 230, .42), inset 0 0 18px rgba(92, 225, 230, .08); } }

/* --- Formular: Ablagefläche für das PDF, Erfolg als eigener Zustand --- */
.feld__titel { display: flex; align-items: center; gap: .6rem; margin: 0 0 .55rem; font-weight: 700; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; color: var(--weiss); }
.feld__titel svg { color: #cfd6dc; }
.feld .ablage__flaeche { margin: 0; font-weight: 300; font-size: .95rem; letter-spacing: .03em; text-transform: none; }
.ablage { position: relative; }
.ablage__eingabe { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.ablage__flaeche {
  display: grid; place-items: center; min-height: 5.5rem; padding: 1rem; text-align: center;
  font-weight: 300; font-size: .95rem; color: var(--creme);
  background: linear-gradient(90deg, #12171f 0%, #1f2631 100%);
  border: 1px dashed rgba(1, 206, 197, .55);
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.ablage__flaeche u { color: var(--cyan); text-underline-offset: .2em; }
.ablage:hover .ablage__flaeche, .ablage.ist-drueber .ablage__flaeche { border-color: var(--cyan); box-shadow: 0 0 22px rgba(92, 225, 230, .25); }
.ablage__eingabe:focus-visible + .ablage__flaeche { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ablage.hat-datei .ablage__flaeche { border-style: solid; color: var(--weiss); }
.ablage__eingabe[aria-invalid="true"] + .ablage__flaeche { border-color: #ff8a8a; }
.formular__danke { display: grid; justify-items: center; text-align: center; gap: .3rem; padding: 3rem 1rem 2rem; }
.formular__danke svg { margin-bottom: 1rem; fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.formular__danke circle, .formular__danke path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 1.1s var(--weich) forwards; }
.formular__danke path { animation-delay: .5s; }
.formular__danke-titel { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; text-transform: uppercase; color: var(--weiss); }
.formular.ist-gesendet > :not(.formular__titel):not(.formular__danke) { display: none; }
.formular__danke[hidden] { display: none; }
.formular.ist-gesendet .formular__danke[hidden] { display: grid; }

/* --- Reduzierte Bewegung: alles steht, alles ist sichtbar --- */
@media (prefers-reduced-motion: reduce) {
  .held__linien path, .bm__bogen, .bm__pfeil, .held__blueprint > span, .held__summit > span,
  .held__termin, .held__unterzeile, .held .knopfpaar { animation: none !important; transform: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .bm__bogen { fill-opacity: 1 !important; stroke-opacity: 0 !important; }
  .bm__glanz, .held__licht, .bluebox__kopf::after, .preise::after { display: none; }
  .js-bewegung .wartet, .js-bewegung .wartet .zeile > span, .plattform__foto.wartet img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .bluebox__bild, .preise::before, .preiskarte--empfohlen, .band__video { animation: none !important; transform: none !important; }
  .leuchtspur::after { display: none; }
  body.bs::after { display: none; }
}

/* ---------- Bewegung zurücknehmen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.assets:focus { outline: none; }