/* ============================================================
   BrandZaps — Korrekturen von Hand
   Diese Datei wird NICHT generiert. Alles hier Stehende ueberschreibt
   bewusst das aus dem Entwurf uebernommene site.css. Jede Regel mit
   Begruendung, damit spaeter nachvollziehbar bleibt, warum sie existiert.
   ============================================================ */

/* Kartenkopf in Sektion „Umsetzen": links der Statustext (absolut
   positioniert, nowrap), rechts das Kontextlabel. Unter 760px reicht die
   Breite nicht und beide Texte liegen uebereinander. Auf schmalen Schirmen
   entfaellt das Kontextlabel — dieselbe Loesung, die der Entwurf an anderen
   Stellen bereits verwendet (Sprachumschalter, Kanban-Badges). */
@media (max-width: 760px) {
  [data-bz-ctxlabel] { display: none; }
}

/* ---------- Fallback ohne JavaScript ----------
   Der Ablauf der Seite wird von Scroll-Variablen gesteuert; ohne JS stünden
   sie alle auf 0 und die Sektionen blieben leer. Der noscript-Block blendet
   die choreografierten Sektionen aus und zeigt stattdessen diese Kurzfassung. */
.bz-nojs { display: none; max-width: 720px; margin: 0 auto; padding: clamp(48px,8vh,96px) clamp(20px,4vw,32px); }
.bz-nojs__hint { font: 400 13px/1.6 var(--font-ui); color: var(--text-muted);
  border-left: 2px solid var(--bz-signal); padding-left: 14px; margin: 0 0 40px; }
.bz-nojs section { margin: 0 0 34px; }
.bz-nojs h2 { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 10px; }
.bz-nojs p { font: 500 clamp(17px,2.2vw,22px)/1.35 var(--font-display); color: var(--text-strong);
  letter-spacing: var(--tracking-display); margin: 0 0 8px; }
.bz-nojs__cta a { display: inline-flex; align-items: center; height: 46px; padding: 0 22px;
  border-radius: 4px; background: var(--bz-signal-bright); color: #062B14;
  font: 600 14.5px/1 var(--font-ui); text-decoration: none; }

/* ---------- Wartelisten-Formular ----------
   Der Entwurf hatte neun CTAs auf #warteliste, aber kein Formular — die Marke
   sass im Hero, jeder Klick sprang also an den Seitenanfang zurueck. Das
   Formular sitzt jetzt im Abschluss-CTA des Footers und traegt die Marke. */
.bz-waitlist { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bz-waitlist__row { display: flex; flex-wrap: wrap; gap: 12px; }
.bz-waitlist__input {
  flex: 1 1 260px; min-width: 0; height: 46px; padding: 0 16px;
  border: 1px solid rgba(250, 250, 248, .28); border-radius: 4px;
  background: rgba(250, 250, 248, .06); color: #FAFAF8;
  font: 400 14.5px/1 var(--font-ui);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bz-waitlist__input::placeholder { color: rgba(250, 250, 248, .45); }
.bz-waitlist__input:hover { border-color: rgba(250, 250, 248, .45); }
.bz-waitlist__input:focus { outline: none; border-color: var(--bz-signal-bright);
  background: rgba(250, 250, 248, .10); box-shadow: 0 0 0 3px rgba(0, 255, 102, .18); }
.bz-waitlist__input[aria-invalid="true"] { border-color: var(--bz-error-accent); }
.bz-waitlist__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 22px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--bz-signal-bright); color: #062B14; font: 600 14.5px/1 var(--font-ui);
  transition: background var(--dur-fast) var(--ease-out);
}
.bz-waitlist__btn:hover { background: var(--bz-signal); }
.bz-waitlist__btn[disabled] { opacity: .55; cursor: default; }
.bz-waitlist__status { margin: 0; font: 500 13px/1.5 var(--font-ui); color: var(--bz-signal-bright); }
.bz-waitlist__status[data-tone="error"] { color: var(--bz-error-accent); }
.bz-waitlist__status:empty { display: none; }
.bz-waitlist__note { margin: 0; max-width: 52ch; font: 400 12px/1.55 var(--font-ui);
  color: rgba(250, 250, 248, .52); }

/* ---------- Kein Unterstrich beim Überfahren ----------
   Das Design-System unterstreicht Links im Hover (tokens/base.css). Auf dieser
   Seite sind praktisch alle Links Schaltflächen oder Navigationspunkte und
   setzen selbst text-decoration:none — die Pseudoklasse ist aber spezifischer
   und gewinnt. Deshalb hier abgeschaltet; die Rechtstexte nutzen diese Datei
   nicht und behalten ihre unterstrichenen Fließtext-Links. */
a:hover, a:focus-visible { text-decoration: none; }

/* ---------- Sticky-Leiste ----------
   Die eigene Kopfleiste des Hero bleibt erhalten. Diese hier taucht erst auf,
   wenn der Hero verlassen wird: ab 100 px Scrollweg fährt sie von oben herein
   und blendet dabei ein. Geht es zurück nach oben, verschwindet sie wieder und
   überlässt dem Hero seinen eigenen Kopf.

   Der Federeffekt kommt aus --ease-snap: die Kurve überschwingt leicht, die
   Leiste rutscht also einen Hauch zu weit und schwingt zurück.

   Links Wortmarke, mittig die Sprungnavigation, rechts Sprache und CTA. */
.bz-topbar {
  position: fixed; top: 14px; left: 50%; z-index: 60;
  width: 90%; box-sizing: border-box;
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px);
  height: 60px; padding: 0 clamp(16px, 2.2vw, 26px);
  background: rgba(15, 15, 15, .94);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid rgba(250, 250, 248, .14);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .34);
  transform: translateX(-50%) translateY(-150%);
  opacity: 0;
  pointer-events: none;
  transition: transform .52s var(--ease-snap), opacity .26s var(--ease-out);
  will-change: transform, opacity;
}
.bz-topbar[data-shown="1"], .bz-topbar:focus-within {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.bz-topbar__brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.bz-topbar__brand img { height: 18px; width: auto; display: block; }

.bz-topbar__nav { display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1.9vw, 28px); flex: 1 1 auto; min-width: 0; }
.bz-topbar__nav a { font: 500 15px/1 var(--font-ui); color: rgba(250, 250, 248, .82);
  text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); }
.bz-topbar__nav a:hover, .bz-topbar__nav a:focus-visible { color: var(--bz-signal-bright); }

.bz-topbar__right { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; margin-left: auto; }
.bz-topbar__lang {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .32); background: transparent;
  color: #fff; font: 600 14.5px var(--font-ui);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.bz-topbar__lang:hover { border-color: rgba(255, 255, 255, .6); }
.bz-topbar__flag { border-radius: 2px; flex: 0 0 auto; }
.bz-topbar__chev { color: rgba(255, 255, 255, .65); flex: 0 0 auto; }
.bz-topbar__cta {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: 38px; padding: 0 18px; border-radius: 4px;
  background: var(--bz-signal-bright); color: #062B14;
  font: 600 14.5px/1 var(--font-ui); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.bz-topbar__cta:hover { background: var(--bz-signal); color: #062B14; }

@media (max-width: 1040px) { .bz-topbar__nav { display: none; } }
@media (max-width: 620px) { .bz-topbar__lang span { display: none; } .bz-topbar__lang { padding: 0 11px; } }
@media (max-width: 760px) { .bz-topbar { width: 94%; top: 10px; height: 54px; } }
@media (prefers-reduced-motion: reduce) { .bz-topbar { transition-duration: .01ms; } }

/* Sprungziele nicht unter die Leiste rutschen lassen */
:where([id="erkennen"],[id="entscheiden"],[id="umsetzen"],[id="reporting"],
       [id="fuer-wen"],[id="faq"],[id="warteliste"],[id="main"]) { scroll-margin-top: 84px; }