.nvm-ouk-split-hero {
  --ouk-split-word: 0;
  --ouk-split-reveal: 0;
  --ouk-split-glass: 0;
  --ouk-split-complete: 0;
  --ouk-split-image-opacity: 0.05;
  --ouk-split-header-offset: var(--header-sticky-height, 72px);
  --ouk-split-header-flow-height: 0px;
  --ouk-split-aperture: 0px;
  --ouk-split-image-hint-opacity: 0.05;
  --ouk-split-right-word-extra: clamp(0.75rem, 2vw, 1.75rem);
  --ouk-split-o-stroke: var(--ouk-blue, #042B5F);
  --ouk-split-o-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NjIgNDYwIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLC04NTEuNTEsLTkyOC4zMzMpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCg0LjI5NjUxLDAsMCw0LjI5NjUxLDYxMy44NjIsLTMxMzEuMjQpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxMzYuNTE3LDAsMCwxMzYuNTE3LDQ2LjU3NDksMTA0OS41NikiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMC4wNjQsLTAuMzc2QzAuMDY0LC0wLjE5NiAwLjE3OCwwLjAxNyAwLjQ1MiwwLjAxN0MwLjY5MywwLjAxNyAwLjg1MSwtMC4xNjggMC44NTEsLTAuMzkyQzAuODUxLC0wLjYyNSAwLjY4MywtMC43NjcgMC40NTgsLTAuNzY3QzAuMTgyLC0wLjc2NyAwLjA2NCwtMC41MzggMC4wNjQsLTAuMzc2WiIvPjwvZz48L2c+PC9nPjwvc3ZnPg==");
  position: relative;
  display: block;
  width: 100%;
  height: 235svh;
  margin-inline: 0;
  margin-block-start: calc(-1 * var(--ouk-split-header-flow-height, 0px));
  overflow: clip;
  background: var(--warm-paper, #F5F2EC);
  color: var(--ouk-blue, #042B5F);
}

.nvm-ouk-split-hero .ouk-split-hero__sticky {
  position: sticky;
  inset-block-start: 0;
  width: 100%;
  height: 100svh;
  overflow: clip;
  background: var(--warm-paper, #F5F2EC);
  isolation: isolate;
}

.nvm-ouk-split-hero .ouk-split-hero__media {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100vw;
  height: 100%;
  transform: translate3d(-50%, -50%, 0);
  overflow: hidden;
  background: var(--warm-paper, #F5F2EC);
  z-index: 1;
}

.nvm-ouk-split-hero .ouk-split-hero__media > .ouk-split-hero__picture {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}

.nvm-ouk-split-hero .ouk-split-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ouk-split-image);
  background-size: cover;
  background-position: center;
  opacity: var(--ouk-split-image-opacity, var(--ouk-split-image-hint-opacity, 0.05));
  pointer-events: none;
}

.nvm-ouk-split-hero .ouk-split-hero__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  clip-path: none;
  -webkit-mask-image: var(--ouk-split-o-mask);
  mask-image: var(--ouk-split-o-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: calc(var(--ouk-split-media-seam-x, 50%) - var(--ouk-split-aperture, 0px)) 50%;
  mask-position: calc(var(--ouk-split-media-seam-x, 50%) - var(--ouk-split-aperture, 0px)) 50%;
  -webkit-mask-size: calc(var(--ouk-split-aperture, 0px) + var(--ouk-split-aperture, 0px)) calc(var(--ouk-split-aperture, 0px) + var(--ouk-split-aperture, 0px));
  mask-size: calc(var(--ouk-split-aperture, 0px) + var(--ouk-split-aperture, 0px)) calc(var(--ouk-split-aperture, 0px) + var(--ouk-split-aperture, 0px));
  opacity: calc(1 - var(--ouk-split-complete, 0));
  will-change: mask-size, -webkit-mask-size, opacity;
}

.nvm-ouk-split-hero .ouk-split-hero__shutter {
  position: absolute;
  inset-block: 0;
  background: var(--warm-paper, #F5F2EC);
  z-index: 2;
  will-change: transform;
}

/* The filled image aperture and SVG O-frame are the reusable O-variant.
   The former split shutters would flatten its right edge into a D. */
.nvm-ouk-split-hero.ouk-split-hero--o-mask .ouk-split-hero__shutter {
  display: none;
}

.nvm-ouk-split-hero .ouk-split-hero__o-frame {
  position: absolute;
  inset: 50% auto auto var(--ouk-split-media-seam-x, 50%);
  width: calc(var(--ouk-split-aperture, 0px) + var(--ouk-split-aperture, 0px));
  height: calc(var(--ouk-split-aperture, 0px) + var(--ouk-split-aperture, 0px));
  transform: translate3d(-50%, -50%, 0);
  overflow: visible;
  color: var(--ouk-split-o-stroke, var(--ouk-blue, #042B5F));
  z-index: 2;
  pointer-events: none;
  opacity: calc(1 - var(--ouk-split-complete, 0));
  will-change: opacity;
}

.nvm-ouk-split-hero .ouk-split-hero__o-frame path {
  fill: currentColor;
  fill-rule: nonzero;
}

.nvm-ouk-split-hero .ouk-split-hero__shutter--left {
  inset-inline-start: 0;
  width: var(--ouk-split-media-seam-x, 50%);
}

.nvm-ouk-split-hero .ouk-split-hero__shutter--right {
  inset-inline-start: var(--ouk-split-media-seam-x, 50%);
  inset-inline-end: 0;
}

.nvm-ouk-split-hero.ouk-split-hero--ready .ouk-split-hero__shutter--left {
  transform: translate3d(calc(var(--ouk-split-reveal) * -100%), 0, 0);
}

.nvm-ouk-split-hero.ouk-split-hero--ready .ouk-split-hero__shutter--right {
  transform: translate3d(calc(var(--ouk-split-reveal) * 100%), 0, 0);
}

.nvm-ouk-split-hero .ouk-split-hero__word {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-family: Archivo, sans-serif;
  font-size: clamp(5.25rem, 11.5vw, 13.5rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
}

.nvm-ouk-split-hero .ouk-split-hero__word-left,
.nvm-ouk-split-hero .ouk-split-hero__word-right {
  display: inline-block;
  background-image: var(--ouk-split-image);
  background-size: var(--ouk-split-letter-background-size, cover);
  background-position: var(--ouk-split-letter-background-position, center);
  background-attachment: scroll;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  will-change: transform, opacity;
  opacity: clamp(0, calc(1.18 - var(--ouk-split-reveal) * 1.35), 1);
}

.nvm-ouk-split-hero .ouk-split-hero__word-left {
  transform: translate3d(calc((var(--ouk-split-word) * -2.5rem) + (var(--ouk-split-reveal) * -36vw)), 0, 0);
}

.nvm-ouk-split-hero .ouk-split-hero__word-right {
  transform: translate3d(calc((var(--ouk-split-word) * 2.5rem) + (var(--ouk-split-reveal) * 36vw) + calc(var(--ouk-split-right-word-extra) * var(--ouk-split-word))), 0, 0);
}

.nvm-ouk-split-hero .ouk-split-hero__glass-frame {
  position: absolute;
  inset-inline-start: clamp(1.5rem, 5vw, 5.5rem);
  inset-inline-end: auto;
  inset-block-end: clamp(3rem, 9vh, 6rem);
  width: min(34rem, calc(100vw - 3rem));
  box-sizing: border-box;
  z-index: 4;
  opacity: var(--ouk-split-glass);
  transform: none;
  pointer-events: none;
  will-change: opacity;
}

@media (max-width: 1024px) {
  .nvm-ouk-split-hero {
    --ouk-split-header-offset: var(--header-sticky-height-mobile, 64px);
    height: 210svh;
  }

  .nvm-ouk-split-hero .ouk-split-hero__word {
    font-size: clamp(4.25rem, 14vw, 8.5rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
  }

  .nvm-ouk-split-hero .ouk-split-hero__word-left,
  .nvm-ouk-split-hero .ouk-split-hero__word-right {
    background-position: 58% center;
  }

  .nvm-ouk-split-hero .ouk-split-hero__word-left {
    transform: translate3d(calc((var(--ouk-split-word) * -2rem) + (var(--ouk-split-reveal) * -42vw)), 0, 0);
  }

  .nvm-ouk-split-hero .ouk-split-hero__word-right {
    transform: translate3d(calc((var(--ouk-split-word) * 2rem) + (var(--ouk-split-reveal) * 42vw) + calc(var(--ouk-split-right-word-extra) * var(--ouk-split-word))), 0, 0);
  }

  .nvm-ouk-split-hero .ouk-split-hero__media::before {
    background-position: 58% center;
  }

  .nvm-ouk-split-hero .ouk-split-hero__image {
    object-position: 58% center;
  }

  .nvm-ouk-split-hero .ouk-split-hero__glass-frame {
    inset-inline-start: 1.5rem;
    inset-inline-end: auto;
    inset-block-end: max(2.5rem, env(safe-area-inset-bottom));
    width: min(31rem, calc(100vw - 3rem));
  }
}

@media (max-width: 767px) {
  .nvm-ouk-split-hero {
    height: 195svh;
  }

  .nvm-ouk-split-hero .ouk-split-hero__word {
    font-size: clamp(2.75rem, 14vw, 4.25rem);
    line-height: 0.92;
    letter-spacing: -0.055em;
  }

  .nvm-ouk-split-hero .ouk-split-hero__word-left,
  .nvm-ouk-split-hero .ouk-split-hero__word-right {
    background-position: var(--ouk-split-mobile-image-position, 64%) center;
  }

  .nvm-ouk-split-hero .ouk-split-hero__word-left {
    transform: translate3d(calc((var(--ouk-split-word) * -1.25rem) + (var(--ouk-split-reveal) * -48vw)), 0, 0);
  }

  .nvm-ouk-split-hero .ouk-split-hero__word-right {
    transform: translate3d(calc((var(--ouk-split-word) * 1.25rem) + (var(--ouk-split-reveal) * 48vw) + calc(var(--ouk-split-right-word-extra) * var(--ouk-split-word))), 0, 0);
  }

  .nvm-ouk-split-hero .ouk-split-hero__media::before {
    background-position: var(--ouk-split-mobile-image-position, 64%) center;
  }

  .nvm-ouk-split-hero .ouk-split-hero__image {
    object-position: var(--ouk-split-mobile-image-position, 64%) center;
  }

  .nvm-ouk-split-hero .ouk-split-hero__glass-frame {
    inset-inline: 1rem;
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100svh - 2rem);
    overflow: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 360px) {
  .nvm-ouk-split-hero .ouk-split-hero__word {
    font-size: clamp(2.5rem, 13.5vw, 3.25rem);
  }

  .nvm-ouk-split-hero .ouk-split-hero__glass-frame {
    inset-inline: 0.75rem;
    inset-block-end: max(0.75rem, env(safe-area-inset-bottom));
    max-height: calc(100svh - 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nvm-ouk-split-hero {
    height: 100svh;
  }

  .nvm-ouk-split-hero .ouk-split-hero__word,
  .nvm-ouk-split-hero .ouk-split-hero__shutter {
    display: none;
  }

  .nvm-ouk-split-hero .ouk-split-hero__glass-frame {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}@media (max-width: 767px) {
  .nvm-ouk-split-hero .ouk-split-hero__media::before,
  .nvm-ouk-split-hero .ouk-split-hero__word-left,
  .nvm-ouk-split-hero .ouk-split-hero__word-right {
    background-image: var(--ouk-split-image-mobile, var(--ouk-split-image));
  }

  /* Buchstaben am Handy (13.10.2026): Ist ein schmaler Handy-Ausschnitt gesetzt, zeigen die Buchstaben weiter das ganze Bild, aus einer eigenen kleinen Datei. */
  .nvm-ouk-split-hero .ouk-split-hero__word-left,
  .nvm-ouk-split-hero .ouk-split-hero__word-right {
    background-image: var(--ouk-split-image-mobile-word, var(--ouk-split-image-mobile, var(--ouk-split-image)));
  }
}

/* 6.10.2026: Solange das Skript den Bildausschnitt der Buchstaben noch nicht gesetzt hat (Fenster noch nicht gesetzt), zeigen die
   Worthaelften kein Bild. Vorher blitzte fuer 0,1 bis 0,2 s in jeder Haelfte das ganze Foto auf. Ohne Skript bleibt das Bild sichtbar. */
@media (scripting: enabled) and (min-width: 768px) {
  .nvm-ouk-split-hero .ouk-split-hero__word-left:not([style*="--ouk-split-letter-background-size"]),
  .nvm-ouk-split-hero .ouk-split-hero__word-right:not([style*="--ouk-split-letter-background-size"]) {
    background-image: none;
  }
}

/* 6.10.2026 (Andrej, iPhone): Am Handy zeigt jede Worthaelfte das Foto als Ganzes. Der durchgehende Bildausschnitt des Desktops
   faellt im Hochformat genau auf dunkle Kleidung und liess das Wort schwarz wirken. Ab 768 px bleibt der durchgehende Ausschnitt. */
@media (max-width: 767px) {
  .nvm-ouk-split-hero .ouk-split-hero__word-left,
  .nvm-ouk-split-hero .ouk-split-hero__word-right {
    background-size: cover;
    background-position: var(--ouk-split-mobile-image-position, 64%) center;
  }
}


/* 22.10.2026 (Andrej: Punkte über dem Ä in AUFKLÄREN angeschnitten): Die Worthälften sind nur 0,88 bis 0,92 em hoch (Zeilenhöhe oben).
   background-clip: text malt das Bild nur innerhalb der Box; Umlautpunkte und Akzente über den Versalien ragten bis 0,11 em darüber hinaus
   und blieben leer. 0,2 em Innenabstand oben und unten nehmen sie auf; der gleich große negative Außenabstand hebt ihn für das Layout auf,
   Lage und Größe des Worts bleiben gleich. Ab 768 px rechnet das Skript den Bildausschnitt aus der Box samt Innenabstand (stimmt weiter).
   Bis 767 px bezieht sich cover/center wie bisher auf die Inhaltsbox, damit sich das Bild in den Buchstaben nicht verändert. */
.nvm-ouk-split-hero .ouk-split-hero__word-left,
.nvm-ouk-split-hero .ouk-split-hero__word-right {
  padding-block: 0.2em;
  margin-block: -0.2em;
}

@media (max-width: 767px) {
  .nvm-ouk-split-hero .ouk-split-hero__word-left,
  .nvm-ouk-split-hero .ouk-split-hero__word-right {
    background-origin: content-box;
  }
}