/*
 * static-fixes.css — Korrekturen für Zustände, die die Plattform (React) zur
 * Laufzeit gesetzt hat und die beim statischen Export als Inline-Style
 * "eingefroren" wurden bzw. an eine JS-gesetzte Klasse gebunden waren.
 * Ohne Plattform-Hydration passen diese Werte nicht mehr zum Viewport.
 *
 *   1) Hero-Parallax-Video  — Container trug Pixelmaße des Render-Viewports
 *                             (2819×1784px) -> Video deckte die Section nicht
 *                             mehr; Parallax-Transform war eingefroren.
 *   2) Checkbox (Datenschutz) — Häkchen hängt an .con-kit-component-checkbox--active,
 *                             die React setzte. CSS-Fallback über :checked, damit
 *                             das Häkchen auch ohne JS sichtbar wird.
 *
 * Die eingefrorenen Inline-Styles selbst sind im HTML entfernt; der Parallax-
 * Effekt wird in assets/js/interactions.js (initParallax) nachgebildet.
 */

/* ===== 1. Hero-Parallax-Video: deckt die Hero-Section vollflächig =====
   Die Plattform zentriert .test per top/left:50% + translate3d(-50%,-50%,0) und
   setzte die Maße per JS in Pixeln (Cover-Rechnung für das YouTube-<iframe>).
   Beim Export waren diese Pixel eingefroren (2819x1784px des Render-Viewports).
   Zentrierung bleibt, die Maße kommen wieder vom Container — Cover übernimmt
   object-fit des nativen <video>. */
.con-kit-organism-parallax--video {
  overflow: hidden;
}

.con-kit-organism-parallax--video > .test {
  width: 100% !important;
  height: 100% !important;
}

.con-kit-organism-parallax--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* ===== 2. Datenschutz-Checkbox: Häkchen ohne Plattform-JS ===== */
.con-kit-component-checkbox__container {
  position: relative;
}

/* Angehakt = oranges Kästchen mit dunklem Häkchen — so rendert es die Plattform
   live (background rgb(249,178,49) = --color-border, fill = --color-text). Die
   exportierte Regel hätte hier --color-bg (hellgrau) genommen, das Kästchen wäre
   auf dem hellgrauen Zeilenhintergrund unsichtbar. */
.con-kit-component-checkbox--active .con-kit-component-checkbox__styled-checkbox,
.con-kit-component-checkbox__hidden-checkbox:checked + .con-kit-component-checkbox__styled-checkbox {
  background: rgba(var(--color-border), var(--alpha-border, 1));
  border-color: transparent;
}

.con-kit-component-checkbox__hidden-checkbox:checked + .con-kit-component-checkbox__styled-checkbox svg {
  visibility: visible;
  width: 80%;
  height: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  max-width: 12px;
  max-height: 12px;
}

.con-kit-component-checkbox__hidden-checkbox:checked + .con-kit-component-checkbox__styled-checkbox svg path {
  fill: rgba(var(--color-text), 1);
}

/* Tastaturfokus sichtbar machen (hidden-checkbox ist optisch entfernt) */
.con-kit-component-checkbox__hidden-checkbox:focus-visible + .con-kit-component-checkbox__styled-checkbox {
  outline: 2px solid rgba(var(--color-border), 1);
  outline-offset: 2px;
}

/* Fehlerzustand aus der Formular-Validierung */
.con-kit-component-checkbox--invalid .con-kit-component-checkbox__styled-checkbox {
  box-shadow: 0 0 0 2px #e04141;
}