/* ==========================================================================
   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; }
/* Kontur-Schriftzüge (Fuß, Galerie): Unbounded Medium mit vereinigten Konturen. Das Original setzt E, T, B, P, R
   aus überlappenden Teilformen zusammen, -webkit-text-stroke zeichnete deren Nähte nach. Bau: 03_DEPLOY/tools/schrift/ */
@font-face { font-family: 'Unbounded Wortmarke'; font-weight: 500; font-display: swap; src: url('../fonts/unbounded-medium-wortmarke.woff2') format('woff2'); }
@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'); }

/* ---------- 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;

  --rahmen: 68.25rem;          /* Inhaltsbreite im Mockup (137 bis 1229 px bei 1366 px = 1092 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%; }
/* Das Mockup ist 1366 px breit. Darüber wächst die ganze Seite mit (alle Maße in rem),
   damit sie auf großen Bildschirmen so groß wirkt wie das Mockup in Canva. Obergrenze 150 %. */
@media (min-width: 1367px) { html { font-size: max(100%, min(100vw / 85.375, 150%)); } }
@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(73.75rem, 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: 10.75rem; 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(73.75rem, 100% - 2 * var(--rand)); }
.held__marke { width: 100%; max-width: 21.25rem; 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, 27.625rem); 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: 21.25rem; 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 { overflow: hidden; background: #000; }

/* 11 · Preise */
.preise { position: relative; isolation: isolate; }
/* Höhenlinien wie in der Canva-Hintergrundanimation, live gezeichnet (summit.js), ohne eigenes Raster:
   das einzige Raster bleibt das der Seite, nichts kann sich überlagern */
.preise__linien {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%);
}
.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, 26.7rem)); 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: Bühne mit einer Stimme im Fokus, Porträt in den Ringen der Bildmarke (Mockup) */
.stimmen .ue { margin-bottom: 2rem; }
.stimmen__einleitung { text-align: right; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }
.buehne__karte {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, #121a26 0%, #0b131e 55%, #0d1c29 100%);
  border: 2px solid var(--cyan); box-shadow: var(--leuchten), 0 40px 90px -40px rgba(0, 0, 0, .8);
}
/* Blaupausen-Papier: feines Raster nur in der Karte, zur Mitte hin sichtbar */
.buehne__karte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(92, 225, 230, .06) 0 1px, transparent 1px 2.5rem),
    repeating-linear-gradient(0deg, rgba(92, 225, 230, .06) 0 1px, transparent 1px 2.5rem);
  -webkit-mask: radial-gradient(ellipse 60% 70% at 24% 50%, #000, transparent 75%);
          mask: radial-gradient(ellipse 60% 70% at 24% 50%, #000, transparent 75%);
}
.folie {
  display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem); margin: 0;
  padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 5vw, 4.25rem) clamp(1.5rem, 3vw, 2rem);
}
.folie + .folie { border-top: 1px solid var(--rand-zart); }
.folie__bild { position: relative; aspect-ratio: 1; }
.folie__bild::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(1, 206, 197, .28), transparent);
  filter: blur(18px);
}
/* Jeder Ring ist eine eigene Ebene: die Drehung übernimmt die Grafikkarte, nichts wird neu gezeichnet */
.folie__ringe { position: absolute; inset: 0; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.ring circle { fill: none; stroke: var(--cyan); }
.ring--1 circle { stroke-width: 3.2; stroke-opacity: .55; stroke-dasharray: 64 5 18 13; }
.ring--2 circle { stroke-width: 2; stroke-opacity: .4; stroke-dasharray: 52 9 24 15; }
.ring--3 circle { stroke-width: 1.2; stroke-opacity: .3; stroke-dasharray: 38 12 30 20; }
.ring--rahmen circle { stroke-width: 1.5; stroke-opacity: .9; }
.folie__foto { position: absolute; inset: 18.75%; border-radius: 50%; overflow: hidden; background: #0b131e; }
.folie__foto img { width: 100%; height: 100%; object-fit: cover; }
.folie__zeichen { width: 2.6rem; height: auto; margin-bottom: 1.5rem; color: var(--tuerkis); }
.folie blockquote { margin: 0; }
.folie blockquote p { margin: 0; max-width: 38em; font-weight: 300; font-size: clamp(1rem, .92rem + .3vw, 1.15rem); line-height: 1.62; color: var(--creme); }
.folie__name { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; font-family: var(--font-display); font-weight: 400; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--weiss); }
.folie__name::before { content: ""; width: 2.5rem; height: 1px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.buehne__steuerung, .buehne__personen { display: none; }

/* Mit JavaScript: alle Folien in einer Zelle, nur die aktive ist da */
/* Nur die aktive Folie bestimmt die Höhe; die Höhe gleitet beim Wechsel (summit.js) */
.js-buehne .buehne__folien { position: relative; }
.js-buehne .folie { visibility: hidden; transition: visibility 0s linear .8s; }
.js-buehne .folie:not(.ist-aktiv) { position: absolute; top: 0; left: 0; width: 100%; }
.js-buehne .folie + .folie { border-top: 0; }
.js-buehne .folie.ist-aktiv { visibility: visible; transition-delay: 0s; }
.js-buehne .folie__ringe { opacity: 0; transform: rotate(-50deg) scale(.86); transition: opacity .6s ease, transform 1.6s var(--weich); }
.js-buehne .folie__foto { clip-path: circle(0% at 50% 50%); transition: clip-path .7s cubic-bezier(.7, 0, .3, 1); }
.js-buehne .folie__foto img { transform: scale(1.18); transition: transform 1.8s var(--weich); }
.js-buehne .folie__text > * { opacity: 0; transform: translateY(1.1rem); transition: opacity .45s ease, transform .6s var(--weich); }
.js-buehne .folie.ist-aktiv .folie__ringe { opacity: 1; transform: translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -10px)); }
.js-buehne .folie.ist-aktiv .folie__foto { clip-path: circle(50% at 50% 50%); transition: clip-path 1.1s var(--weich) .15s; }
.js-buehne .folie.ist-aktiv .folie__foto img { transform: translate(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 8px)) scale(1.06); }
.js-buehne .folie.ist-aktiv .folie__text > * { opacity: 1; transform: none; transition: opacity .8s ease, transform 1s var(--weich); }
.js-buehne .folie.ist-aktiv .folie__zeichen { transition-delay: .2s; }
.js-buehne .folie.ist-aktiv blockquote { transition-delay: .3s; }
.js-buehne .folie.ist-aktiv .folie__name { transition-delay: .45s; }
.js-buehne .folie.ist-aktiv .ring--1 { animation: drehen 70s linear infinite; }
.js-buehne .folie.ist-aktiv .ring--2 { animation: drehen 52s linear infinite reverse; }
.js-buehne .folie.ist-aktiv .ring--3 { animation: drehen 90s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

.js-buehne .buehne__steuerung { display: flex; align-items: center; gap: 1.25rem; padding: 0 clamp(1.5rem, 5vw, 4.25rem) clamp(1.5rem, 3vw, 2.25rem); }
.buehne__pfeil {
  display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border-radius: 50%;
  background: transparent; border: 1px solid rgba(92, 225, 230, .5); color: var(--cyan); cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.buehne__pfeil svg { width: 1.3rem; height: auto; }
.buehne__pfeil:hover { background: rgba(92, 225, 230, .12); box-shadow: 0 0 20px rgba(92, 225, 230, .35); }
.buehne__pfeil:active { transform: scale(.94); }
.buehne__zaehler { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: .85rem; letter-spacing: .08em; color: #aeb9c2; }
.buehne__zaehler b { font-weight: 400; color: var(--weiss); }
.buehne__zeit { flex: 1; height: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.buehne__zeit span { display: block; height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transform-origin: left; transform: scaleX(0); }
.buehne__zeit span.laeuft { animation: zeitleiste var(--dauer, 9s) linear forwards; }
.buehne__karte:hover .buehne__zeit span.laeuft, .buehne__karte:focus-within .buehne__zeit span.laeuft { animation-play-state: paused; }
@keyframes zeitleiste { to { transform: scaleX(1); } }
.js-buehne .buehne__personen { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; margin-top: 1.75rem; }
.person {
  display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; padding: .35rem 1.2rem .35rem .35rem;
  border: 1px solid rgba(92, 225, 230, .25); border-radius: 999px; background: rgba(8, 15, 25, .7);
  font: 500 .88rem/1 var(--font-body); letter-spacing: .03em; color: #c9d1d8; cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.person img { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; opacity: .7; transition: opacity .25s ease; }
.person:hover { border-color: var(--cyan); color: var(--weiss); }
.person[aria-current="true"] { border-color: var(--cyan); color: var(--weiss); box-shadow: 0 0 20px rgba(92, 225, 230, .3); }
.person[aria-current="true"] img, .person:hover img { opacity: 1; }
@media (max-width: 760px) {
  .folie { grid-template-columns: 1fr; gap: 1.75rem; }
  .folie__bild { width: min(15rem, 72%); justify-self: center; }
  .stimmen__einleitung, .stimmen .ue { text-align: left; }
  .person { padding-right: .9rem; font-size: .82rem; }
  .person img { width: 2.2rem; height: 2.2rem; }
}

/* 13 · Einreichen + Formular */
.einreichen .fliesstext p { font-size: .92rem; }
.einreichen { scroll-margin-top: 1rem; }
.einreichen .zweispaltig { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 2.5rem clamp(2rem, 6vw, 5rem); }
@media (max-width: 900px) { .einreichen .zweispaltig { grid-template-columns: 1fr; } }
.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, .feld textarea { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.feld input:focus, .feld textarea:focus { outline: 2px solid transparent; border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 26px rgba(92, 225, 230, .22); }
.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__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ß: dieselben Schriften wie die Seite, Logo vorn, Lichtkante oben ---------- */
.fuss {
  position: relative; color: var(--weiss);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 1.75rem;
  background: linear-gradient(180deg, rgba(5, 10, 18, .82) 0%, #04080f 70%);
  border-top: 1px solid rgba(92, 225, 230, .16);
}
.fuss::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: min(70%, 46rem); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 18px var(--cyan);
}
.fuss__innen { width: min(var(--rahmen), 100% - 2 * var(--rand)); margin-inline: auto; }
.fuss__spalten { display: grid; grid-template-columns: minmax(14rem, 1.6fr) repeat(3, auto); justify-content: space-between; gap: 2.5rem clamp(2rem, 4vw, 3.5rem); }
.fuss__spalte a { white-space: nowrap; }
.fuss__logo { display: inline-block; }
.fuss__logo img { width: 13rem; height: auto; }
.fuss__satz { margin: 1.25rem 0 1.5rem; max-width: 17em; font-weight: 300; font-size: .95rem; line-height: 1.5; color: #c9d1d8; }
.fuss__termin { display: grid; gap: .4rem; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; color: var(--weiss); }
.fuss__termin span { font-family: var(--font-body); font-weight: 700; font-size: .7rem; letter-spacing: .12em; color: var(--cyan); }
.fuss h2 { margin: .35rem 0 1.25rem; font-family: var(--font-display); font-weight: 400; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.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__spalte a { position: relative; color: #e3e8ec; transition: color .25s ease; }
.fuss__spalte a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1em; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--weich); }
.fuss a:hover { color: var(--cyan); }
.fuss__spalte a:hover::after { transform: scaleX(1); }
.fuss__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.fuss__leiste p { margin: 0; font-size: .82rem; color: #aeb9c2; }
.fuss__recht { display: flex; gap: 1.5rem; margin-left: auto !important; }
.fuss__recht a { font-size: .82rem; color: #c9d1d8; }
.fuss__social { display: flex; gap: .5rem; }
.fuss__social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(92, 225, 230, .25); border-radius: 50%; color: var(--weiss); transition: border-color .25s ease, box-shadow .25s ease, color .25s ease; }
.fuss__social a:hover { border-color: var(--cyan); box-shadow: 0 0 16px rgba(92, 225, 230, .35); }
@media (max-width: 900px) { .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } .fuss__marke { grid-column: 1 / -1; } }
@media (max-width: 520px) {
  .fuss__spalten { grid-template-columns: 1fr; }
  .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 wachsen aus der Pfeilspitze und den Kreistangenten --- */
.bm__linien { pointer-events: none; }
.bm__strahl {
  fill: none; stroke: #c8dcff; stroke-opacity: .22; stroke-width: 1; vector-effect: non-scaling-stroke;
  transform-box: view-box; transform: scale(0);
  animation: strahl 2.4s cubic-bezier(.65, 0, .2, 1) forwards;
}
.bm__strahl--spitze { transform-origin: 63.82px 55.54px; animation-delay: .15s; stroke-opacity: .34; }
.bm__strahl--oben   { transform-origin: 63.38px 0;       animation-delay: .45s; stroke-opacity: .28; }
.bm__strahl--unten  { transform-origin: 63.38px 122.69px; animation-delay: .55s; stroke-opacity: .28; }
.bm__strahl--links  { transform-origin: 0 61.52px;       animation-delay: .65s; stroke-opacity: .24; }
@keyframes strahl { to { transform: scale(1); } }
@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); }


/* --- Preise: Höhenlinien und Polarlicht bewegen sich langsam --- */
.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 polarlicht-unten { from { transform: translateX(-52%) scaleX(.95); opacity: .16; } to { transform: translateX(-48%) scaleX(1.05); opacity: .28; } }
/* Glimmen über die Deckkraft einer Schattenebene: läuft auf der Grafikkarte statt neu zu zeichnen */
.preiskarte--empfohlen::before { content: ""; position: absolute; inset: -2px; pointer-events: none; box-shadow: 0 0 38px rgba(92, 225, 230, .42), inset 0 0 18px rgba(92, 225, 230, .08); opacity: 0; animation: glimmen 5s ease-in-out infinite alternate; }
@keyframes glimmen { to { opacity: 1; } }

/* --- 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 .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: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 6rem; 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(.funnel__kopf):not(.formular__danke) { display: none; }
.formular__danke[hidden] { display: none; }
.formular.ist-gesendet .formular__danke[hidden] { display: grid; }

/* --- Funnel: drei Blätter eines Bauplans, liegen in 3D hintereinander --- */
.funnel { position: relative; isolation: isolate; scroll-margin-top: 6.5rem; padding: clamp(1.5rem, 3.5vw, 2.6rem); background: linear-gradient(160deg, #141c28 0%, #0e151f 100%); border: 1px solid rgba(92, 225, 230, .4); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), 0 0 30px rgba(92, 225, 230, .12); }
.funnel::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(30rem circle at var(--gx, 50%) var(--gy, 0%), rgba(140, 240, 245, .09), transparent 60%);
  transition: opacity .5s ease;
}
.js-funnel .funnel { transform: perspective(1800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--weich), opacity .9s ease; transform-style: preserve-3d; }
.js-funnel .funnel.wartet-3d { opacity: 0; transform: perspective(1800px) rotateX(18deg) translateY(3rem); }
.funnel.hat-zeiger::after { opacity: 1; }
.funnel__lagen span {
  position: absolute; z-index: -1; height: .7rem; pointer-events: none;
  background: #0e151f; border: 1px solid rgba(92, 225, 230, .28); border-top: 0;
  transition: opacity .5s ease, transform .6s var(--weich);
}
.funnel__lagen span:nth-child(1) { left: 2.5%; right: 2.5%; bottom: -.7rem; }
.funnel__lagen span:nth-child(2) { left: 5%; right: 5%; bottom: -1.4rem; border-color: rgba(92, 225, 230, .16); }
.funnel[data-rest="1"] .funnel__lagen span:nth-child(2), .funnel[data-rest="0"] .funnel__lagen span { opacity: 0; transform: translateY(-.7rem); }
.funnel:not(.js-funnel) .funnel__lagen { display: none; }

.funnel__kopf { margin-bottom: 1.75rem; }
.funnel .formular__titel { margin-bottom: 1.25rem; }
.funnel__weg { display: flex; margin: 0; padding: 0; list-style: none; }
.funnel__weg li { position: relative; flex: 1; display: flex; align-items: center; gap: .65rem; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #8d9aa6; transition: color .4s ease; }
.funnel__weg li:last-child { flex: 0 0 auto; }
.funnel__weg li:not(:last-child)::after {
  content: ""; flex: 1; height: 1px; margin-right: .65rem;
  background: linear-gradient(var(--cyan), var(--cyan)) left / 0% 100% no-repeat, rgba(92, 225, 230, .2);
  transition: background-size .9s var(--weich);
}
.funnel__weg li.ist-fertig:not(:last-child)::after { background-size: 100% 100%, auto; }
.funnel__punkt { display: grid; place-items: center; flex: 0 0 auto; width: 2.2rem; height: 2.2rem; font-family: var(--font-display); font-weight: 400; font-size: .68rem; letter-spacing: 0; color: #aeb9c2; background: #0e151f; border: 1px solid rgba(92, 225, 230, .3); transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease; }
.funnel__weg li.ist-aktiv { color: var(--weiss); }
.funnel__weg li.ist-aktiv .funnel__punkt { color: var(--nacht); background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 20px rgba(92, 225, 230, .55); }
.funnel__weg li.ist-fertig { color: var(--cyan); }
.funnel__weg li.ist-fertig .funnel__punkt { color: var(--cyan); border-color: var(--cyan); }
@media (max-width: 480px) { .funnel__weg li > span:last-child { display: none; } }
.funnel:not(.js-funnel) .funnel__weg { display: none; }

.funnel__schritt { min-width: 0; margin: 0; padding: 0; border: 0; }
.funnel:not(.js-funnel) .funnel__schritt + .funnel__schritt { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rand-zart); }
.funnel:not(.js-funnel) [data-weiter], .funnel:not(.js-funnel) [data-zurueck] { display: none; }
.funnel__frage { float: left; width: 100%; display: flex; align-items: baseline; gap: .8rem; margin: 0 0 1.5rem; padding: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.1rem, .95rem + .55vw, 1.4rem); line-height: 1.22; text-transform: uppercase; color: var(--weiss); }
.funnel__frage + * { clear: both; }
.funnel__nr { flex: 0 0 auto; font-weight: 400; font-size: .72em; color: var(--tuerkis); }

.js-funnel .funnel__stapel { position: relative; perspective: 1400px; }
.js-funnel .funnel__schritt:not(.ist-aktiv) { position: absolute; top: 0; left: 0; width: 100%; }
.js-funnel .funnel__schritt { transform-origin: 50% 0; backface-visibility: hidden; transition: transform .95s var(--weich), opacity .55s ease, visibility 0s linear .95s; }
.js-funnel .funnel__schritt.ist-aktiv { visibility: visible; opacity: 1; transform: none; transition-delay: .12s, .2s, 0s; }
.js-funnel .funnel__schritt.ist-danach { visibility: hidden; opacity: 0; transform: translate3d(0, 2.5rem, -180px) rotateX(-10deg); }
.js-funnel .funnel__schritt.ist-davor { visibility: hidden; opacity: 0; transform: translate3d(0, -1.5rem, 140px) rotateX(22deg); }

.themen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.thema {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: .9rem;
  min-height: 6.4rem; padding: 1rem 1.1rem; cursor: pointer;
  background: linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
  border: 1px solid rgba(92, 225, 230, .22);
  transition: border-color .25s ease, background-color .3s ease, box-shadow .3s ease, transform .45s var(--weich);
}
.thema input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.thema__nr { font-family: var(--font-display); font-size: .72rem; color: var(--tuerkis); }
.thema__text { font-family: var(--font-display); font-weight: 400; font-size: .82rem; line-height: 1.28; text-transform: uppercase; color: var(--weiss); }
.thema::after {
  content: ""; position: absolute; top: .9rem; right: .9rem; width: 1.15rem; height: 1.15rem;
  border: 1px solid rgba(92, 225, 230, .4);
  background: no-repeat center / 70% linear-gradient(transparent, transparent);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.thema:hover { border-color: rgba(92, 225, 230, .7); transform: translateY(-3px); }
.thema:has(input:checked) { border-color: var(--cyan); background-color: rgba(92, 225, 230, .1); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 26px rgba(92, 225, 230, .22); }
.thema:has(input:checked)::after { background-color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.thema:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 3px; }

.funnel__nav { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; margin-top: 1.75rem; }
.funnel__nav .formular__senden { margin: 0; }
.funnel__zurueck { margin-right: auto; padding: .8rem 0; background: none; border: 0; cursor: pointer; font: 700 .78rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: #c9d1d8; }
.funnel__zurueck::before { content: "‹"; margin-right: .5rem; font-size: 1.2em; }
.funnel__zurueck:hover { color: var(--cyan); }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.feld__zaehler { text-align: right; }
.ablage__pfeil { color: var(--cyan); transition: transform .4s var(--weich); }
.ablage:hover .ablage__pfeil, .ablage.ist-drueber .ablage__pfeil { transform: translateY(-4px); }
@media (max-width: 560px) {
  .themen, .feld-paar { grid-template-columns: 1fr; }
  .themen { gap: .5rem; }
  .thema { flex-direction: row; align-items: center; justify-content: flex-start; gap: .9rem; min-height: 0; padding: .85rem 3rem .85rem 1rem; }
  .thema::after { top: 50%; transform: translateY(-50%); }
  .thema:hover { transform: none; }
}

/* --- Reduzierte Bewegung: alles steht, alles ist sichtbar --- */
@media (prefers-reduced-motion: reduce) {
  .bm__strahl, .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, .preiskarte--empfohlen, .preiskarte--empfohlen::before { 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; }
.buehne:not(.im-blick) .buehne__zeit span.laeuft { animation-play-state: paused; }

/* ==========================================================================
   Runde 4 (12.10.2026): echtes Summit-Material und Feinheiten
   ========================================================================== */

/* --- Lesefortschritt in der Glasleiste --- */
.kopf__fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.kopf__fortschritt span { display: block; height: 100%; background: linear-gradient(90deg, var(--tuerkis), var(--cyan)); box-shadow: 0 0 10px rgba(92, 225, 230, .7); transform-origin: left; transform: scaleX(0); }
.bs.kopf-fest .kopf__fortschritt { opacity: 1; }

/* --- Nähte: Konstruktionslinie mit Abschnittsnummer am Kopf großer Abschnitte --- */
.oekosystem, .plattform, .galerie { position: relative; }
.naht { position: absolute; top: 0; left: max(var(--rand), calc((100% - var(--rahmen)) / 2)); right: max(var(--rand), calc((100% - var(--rahmen)) / 2)); height: 1px; z-index: 1; pointer-events: none; }
.naht::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(92, 225, 230, .55), rgba(92, 225, 230, .1) 65%, transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--weich);
}
.naht::after {
  content: attr(data-nr); position: absolute; left: 0; top: .8rem;
  font: 700 .62rem/1 var(--font-body); letter-spacing: .24em; color: rgba(92, 225, 230, .8);
  opacity: 0; transform: translateY(6px); transition: opacity .8s ease .5s, transform .9s var(--weich) .5s;
}
.naht.ist-da::before { transform: scaleX(1); }
.naht.ist-da::after { opacity: 1; transform: none; }
.galerie.ist-gepinnt .naht { display: none; }

/* --- Schnittmarken an Fotos und Film, erscheinen mit dem Bild --- */
.marken { position: relative; }
.marken::after {
  content: ""; position: absolute; inset: .6rem; z-index: 3; pointer-events: none; --m: rgba(140, 236, 240, .9);
  background:
    linear-gradient(var(--m), var(--m)) left top / 1rem 1.5px no-repeat, linear-gradient(var(--m), var(--m)) left top / 1.5px 1rem no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 1rem 1.5px no-repeat, linear-gradient(var(--m), var(--m)) right top / 1.5px 1rem no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 1rem 1.5px no-repeat, linear-gradient(var(--m), var(--m)) left bottom / 1.5px 1rem no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 1rem 1.5px no-repeat, linear-gradient(var(--m), var(--m)) right bottom / 1.5px 1rem no-repeat;
  opacity: 0; transform: scale(1.06); transition: opacity .6s ease .3s, transform 1.1s var(--weich) .3s;
}
.marken.ist-da::after, .galerie__bild:hover::after, .galerie__bild:focus-visible::after { opacity: 1; transform: none; }
.js-bewegung .film.ist-aktiv::after { opacity: 0; }

/* --- Aftermovie: Kinomodus, die Seite tritt beim Abspielen zurück --- */
.kino-schleier { position: fixed; inset: 0; z-index: 1; background: rgba(2, 5, 10, .9); opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.event.ist-kino { z-index: 45; }
.ist-kino .kino-schleier { opacity: 1; pointer-events: auto; cursor: pointer; }
.film { z-index: 2; transition: box-shadow .9s ease; }
.ist-kino .film { box-shadow: 0 0 0 1px rgba(92, 225, 230, .45), 0 40px 120px rgba(0, 0, 0, .8), 0 0 90px rgba(92, 225, 230, .2); }
.film__start::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: clamp(56px, 7vw, 76px); aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%; border: 1px solid rgba(92, 225, 230, .7); pointer-events: none;
  animation: puls 2.6s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes puls { from { scale: 1; opacity: .9; } to { scale: 2.1; opacity: 0; } }
.film video { transition: scale 1.2s var(--weich); }
@media (hover: hover) { .film:not(.ist-aktiv):hover video { scale: 1.03; } }
.film { overflow: hidden; }

/* --- Videoband: echte 4K-Szenen im Kinoformat, Sucher-Ecken und Zeitcode --- */
.band { position: relative; height: auto; aspect-ratio: 2560 / 1068; max-height: 82vh; width: 100%; }
.band__video { width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3, 8, 15, .45), transparent 22%, transparent 75%, rgba(3, 8, 15, .5)); }
.band__sucher { position: absolute; inset: clamp(.8rem, 2.2vw, 2rem); z-index: 1; pointer-events: none; }
.band__ecke { position: absolute; width: 1.6rem; height: 1.6rem; border: 0 solid rgba(220, 245, 248, .85); }
.band__ecke--lo { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.band__ecke--ro { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.band__ecke--lu { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.band__ecke--ru { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.band__label, .band__zeit { position: absolute; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(.6rem, .5rem + .3vw, .78rem); letter-spacing: .14em; text-transform: uppercase; color: #eaf8fa; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.band__label { left: 2.4rem; top: .55rem; display: flex; align-items: center; gap: .6rem; }
.band__zeit { right: 2.4rem; bottom: .55rem; font-variant-numeric: tabular-nums; }
.band__punkt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blinken 1.6s steps(2, jump-none) infinite; }
@keyframes blinken { 50% { opacity: .15; } }
@media (max-width: 760px) {
  .band { aspect-ratio: 16 / 9; }
  .band__zeit { display: none; }
  .band__label { left: 2rem; }
}

/* --- Galerie vom letzten Summit --- */
.galerie { padding-block: calc(var(--abstand) / 2); overflow-x: clip; }
.galerie__buehne { position: relative; }
.galerie__kopf { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.galerie__kopf .ue { margin-bottom: 0; }
.galerie__stand { display: flex; align-items: center; gap: 1rem; width: min(18rem, 100%); padding-bottom: .4rem; }
.galerie__zaehler { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: .85rem; letter-spacing: .08em; color: #aeb9c2; white-space: nowrap; }
.galerie__zaehler b { font-weight: 400; color: var(--weiss); }
.galerie__linie { flex: 1; height: 2px; background: rgba(255, 255, 255, .12); }
.galerie__linie span { display: block; height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transform-origin: left; transform: scaleX(.04); transition: transform .15s linear; }
.galerie__schriftzug {
  position: absolute; left: 0; bottom: 4%; z-index: 0; margin: 0; white-space: nowrap; pointer-events: none;
  font-family: 'Unbounded Wortmarke', var(--font-display); font-weight: 500; font-size: clamp(4rem, 13vw, 16rem); line-height: 1; text-transform: uppercase; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1px rgba(92, 225, 230, .13);
}
.galerie__spur {
  position: relative; z-index: 1; display: flex; gap: clamp(1rem, 2vw, 1.75rem); margin: 0; list-style: none;
  padding: .5rem max(var(--rand), calc((100% - var(--rahmen)) / 2)) 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.galerie__spur::-webkit-scrollbar { display: none; }
.galerie__eintrag { flex: 0 0 min(78vw, 30rem); scroll-snap-align: start; }
.galerie__bild { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #0b131e; cursor: zoom-in; overflow: hidden; }
.galerie__bild img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; transition: filter .5s ease; filter: saturate(.9) brightness(.92); }
.galerie__bild:hover img, .galerie__bild:focus-visible img { filter: saturate(1.05) brightness(1); }
.galerie__bild:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* Am Desktop steht die Bühne, die Spur fährt seitlich (summit.js setzt die Höhe des Abschnitts) */
.galerie.ist-gepinnt { padding-block: 0; }
.galerie.ist-gepinnt .galerie__buehne { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: 4.5rem; }
.galerie.ist-gepinnt .galerie__spur { overflow: visible; height: min(56vh, 40rem); align-items: center; padding-right: 14vw; will-change: transform; scroll-snap-type: none; }
.galerie.ist-gepinnt .galerie__eintrag { flex: 0 0 auto; height: 100%; display: flex; }
.galerie.ist-gepinnt .galerie__bild { height: 100%; width: auto; }
.galerie.ist-gepinnt .galerie__eintrag--gross .galerie__bild { aspect-ratio: 3 / 2; }
.galerie.ist-gepinnt .galerie__eintrag--hoch { align-items: flex-start; }
.galerie.ist-gepinnt .galerie__eintrag--hoch .galerie__bild { height: 86%; aspect-ratio: 4 / 5; }
.galerie.ist-gepinnt .galerie__eintrag--klein { align-items: flex-end; }
.galerie.ist-gepinnt .galerie__eintrag--klein .galerie__bild { height: 60%; aspect-ratio: 3 / 2; }

/* Lichtkasten */
.lichtbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(3, 7, 13, .95); color: var(--weiss); overflow: hidden; }
.lichtbox::backdrop { background: rgba(0, 0, 0, .55); }
.lichtbox[open] { display: grid; place-items: center; animation: lichtbox-auf .5s var(--weich); }
@keyframes lichtbox-auf { from { opacity: 0; } }
html.lichtbox-offen { overflow: hidden; }
.lichtbox__bild { display: grid; justify-items: center; gap: 1rem; margin: 0; padding: 4.5rem 1rem 2rem; }
.lichtbox__bild img { display: block; width: auto; height: auto; max-width: min(90vw, 1700px); max-height: 78vh; object-fit: contain; box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(92, 225, 230, .25); transition: opacity .35s ease, transform .6s var(--weich); }
.lichtbox.wechselt .lichtbox__bild img { opacity: 0; transform: scale(.985); }
.lichtbox__text { display: flex; gap: 1.25rem; align-items: baseline; max-width: 90vw; font-size: .88rem; color: #c9d1d8; }
.lichtbox__text span:first-child { font-family: var(--font-display); font-size: .78rem; letter-spacing: .1em; color: var(--cyan); white-space: nowrap; }
.lichtbox__knopf { position: fixed; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0; border-radius: 50%; border: 1px solid rgba(92, 225, 230, .5); background: rgba(6, 12, 22, .6); color: var(--cyan); cursor: pointer; transition: background-color .25s ease, box-shadow .25s ease; }
.lichtbox__knopf:hover, .lichtbox__knopf:focus-visible { background: rgba(92, 225, 230, .14); box-shadow: 0 0 22px rgba(92, 225, 230, .35); }
.lichtbox__zu { top: 1.25rem; right: 1.25rem; }
.lichtbox__zurueck { left: 1.25rem; top: 50%; translate: 0 -50%; }
.lichtbox__vor { right: 1.25rem; top: 50%; translate: 0 -50%; }
@media (max-width: 760px) {
  .lichtbox__zurueck, .lichtbox__vor { top: auto; bottom: 1.25rem; translate: none; }
  .lichtbox__zurueck { left: calc(50% - 4rem); }
  .lichtbox__vor { right: calc(50% - 4rem); }
  .lichtbox__bild { padding-bottom: 6rem; }
}

/* --- Hero: Zeigertiefe und Ausblenden beim Scrollen --- */
.held__marke { translate: calc(var(--hx, 0) * -14px) calc(var(--hy, 0) * -10px); transition: translate 1.4s var(--weich); }
.held__text { translate: calc(var(--hx, 0) * 7px) calc(var(--hy, 0) * 5px); transition: translate 1.4s var(--weich); }
@supports (animation-timeline: scroll()) {
  .held__innen { animation: held-raus linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes held-raus { to { opacity: .15; transform: translateY(9vh) scale(.965); } }
}

/* --- Magnetische Knöpfe und Karten, die sich neigen --- */
.magnet { translate: var(--mgx, 0px) var(--mgy, 0px); }
.knopf.magnet { transition: box-shadow .25s ease, filter .25s ease, transform .25s ease, translate .45s cubic-bezier(.2, .8, .2, 1), background-color .25s ease, color .25s ease; }
.buehne__pfeil.magnet, .fuss__social a.magnet { transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease, border-color .25s ease, translate .45s cubic-bezier(.2, .8, .2, 1); }
.formate__reihe, .preise__karten, .netzwerk__seite, .bluebox__kopf { perspective: 1100px; }
.js-bewegung .neigt.ist-da, .neigt:not([data-zeige]) { transition: opacity .9s var(--weich), transform .5s var(--weich), rotate .5s cubic-bezier(.2, .8, .2, 1), border-color .4s ease, box-shadow .4s ease; }
.bluebox__bild.neigt { transition: rotate .7s cubic-bezier(.2, .8, .2, 1); }

/* --- Parallaxe in den Plattform-Fotos --- */
.plattform__foto img { translate: 0 var(--para, 0%); scale: 1.12; }

/* --- Zeigerbeschriftung über Film und Galerie --- */
.zeiger-etikett {
  position: fixed; left: 0; top: 0; z-index: 60; width: 5.5rem; height: 5.5rem; margin: -2.75rem 0 0 -2.75rem;
  display: grid; place-items: center; border-radius: 50%; pointer-events: none;
  background: rgba(92, 225, 230, .92); color: var(--nacht); box-shadow: 0 0 30px rgba(92, 225, 230, .45);
  font: 700 .66rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; scale: .3; transition: opacity .3s ease, scale .45s var(--weich);
}
.zeiger-etikett.ist-da { opacity: 1; scale: 1; }
@media (hover: hover) and (pointer: fine) {
  .js-bewegung .film:not(.ist-aktiv), .js-bewegung .film:not(.ist-aktiv) .film__start, .js-bewegung .galerie__bild { cursor: none; }
}

/* --- Fuß: großer Schriftzug füllt sich zum Seitenende --- */
.fuss__innen { container-type: inline-size; }
.fuss .fuss__schriftzug {
  margin: clamp(3rem, 6vw, 5rem) 0 0; overflow: hidden; white-space: nowrap; text-align: center; user-select: none;
  font-family: 'Unbounded Wortmarke', var(--font-display); font-weight: 500; font-size: 7.1vw; font-size: 8cqi; line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(92, 225, 230, .28); paint-order: stroke fill;
  background: linear-gradient(90deg, rgba(92, 225, 230, .85), rgba(1, 206, 197, .4)) 0 0 / var(--fuell, 0%) 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.fuss__schriftzug + .fuss__leiste { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* --- Reduzierte Bewegung: Feinheiten aus, Inhalte bleiben --- */
@media (prefers-reduced-motion: reduce) {
  .held__innen { animation: none !important; }
  .held__marke, .held__text, .magnet { translate: none !important; }
  .band__punkt, .film__start::before { animation: none !important; }
  .plattform__foto img { translate: none; }
  .zeiger-etikett { display: none; }
  .fuss__schriftzug { background-size: 100% 100%; }
}

/* Außerhalb des Sichtfelds ruhen alle Dauer-Animationen (summit.js setzt .ruht) */
.ruht, .ruht *, .ruht::before, .ruht::after, .ruht *::before, .ruht *::after { animation-play-state: paused !important; }