.banner .uk-position-center-left,.banner .uk-position-center-right{padding-left:7rem;padding-right:7rem;width:65%}.banner .uk-position-center{width:70%}.hero-60vh{min-height:60vh}.hero-full-height{min-height:100vh}@media screen and (max-width:960px){.banner .uk-position-center-left,.banner .uk-position-center-right{padding-left:42px;padding-right:42px;width:100%}}@media screen and (max-width:667px){.banner .uk-position-center-left,.banner .uk-position-center-right{margin-top:6rem;padding-left:12px;padding-right:12px}.banner .uk-position-center{margin-top:5rem;width:90%}}.banner .banner-text{color:#fff;font-size:6rem;font-style:normal;font-weight:700;letter-spacing:1.5px;line-height:6rem;text-decoration:none}@media screen and (max-width:525px){.banner .banner-text{font-size:5rem!important;letter-spacing:1px;line-height:5rem!important}}.banner .banner-small-headline{border-bottom-style:solid;border-bottom-width:3px}.banner a{color:#fff}.banner a:hover{color:#006ec7;text-decoration:none}
/* ---------- theme 2026: hero (shared layout) ---------- */

.ri-hero {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 680px;
  color: #fff;
}

.ri-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.ri-hero .ri-eyebrow { color: var(--ri-accent); }

.ri-hero__title {
  max-width: 1120px;
  color: #fff;
}

.ri-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #fff;
  font-family: var(--ri-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
  text-decoration: none;
}

.ri-hero__link:hover,
.ri-hero__link:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ri-hero__link:hover .ri-icon { transform: translateX(3px); }
.ri-hero__link .ri-icon { transition: transform var(--ri-mo-base) var(--ri-ease); }

/* ---------- Gradient variant: homepage (pen.dev F3AiV › Hero Shell) ---------- */

.ri-hero--gradient {
  padding: 169px 0 0;
  background: radial-gradient(75% 80% at 78% 18%, rgba(0, 110, 199, 0.667), rgba(6, 31, 58, 0)), var(--ri-blue-deep);
}

/* The hero shares its dnd section with the product finder; the gradient spans both. */
@supports selector(:has(a)) {
  .dnd-section:has(.ri-hero--gradient) {
    background: radial-gradient(75% 80% at 78% 18%, rgba(0, 110, 199, 0.667), rgba(6, 31, 58, 0)), var(--ri-blue-deep);
  }
  .dnd-section:has(.ri-hero--gradient) .ri-hero--gradient { background: none; }
}

/* ---------- Animated background (homepage, js/hero-bg.js) ---------- */

/* Canvas, scrim and pause button are positioned against the hero shell (the dnd section with the product finder),
   so the animation spans the same area as the gradient; without :has they fall back to the hero itself. */
.ri-hero--animated { position: relative; isolation: isolate; }

@supports selector(:has(a)) {
  .dnd-section:has(.ri-hero--animated) { position: relative; isolation: isolate; overflow: hidden; }
  .dnd-section:has(.ri-hero--animated) .ri-hero--animated { position: static; isolation: auto; }
}

.ri-hero__canvas,
.ri-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The gradient stays underneath; the canvas fades in after its first frame (hero-bg.js adds .is-ready). */
.ri-hero__canvas { display: block; opacity: 0; transition: opacity 1.4s var(--ri-ease); }
.ri-hero__canvas.is-ready { opacity: 1; }

/* Calm zone behind the text, so the copy keeps its contrast over the motion (measured over the loop: eyebrow and
   button ≥ 4.5:1, headline ≥ 3:1). Desktop: left column. Phones: the text sits at the top, the finder below. */
.ri-hero__scrim {
  background:
    linear-gradient(90deg, rgba(6, 31, 58, 0.78) 0%, rgba(6, 31, 58, 0.55) 30%, rgba(6, 31, 58, 0.15) 62%, rgba(6, 31, 58, 0) 80%),
    linear-gradient(180deg, rgba(6, 31, 58, 0.55) 0%, rgba(6, 31, 58, 0) 20%, rgba(6, 31, 58, 0) 78%, rgba(6, 31, 58, 0.7) 100%);
}

@media (max-width: 767px) {
  .ri-hero__scrim {
    background: linear-gradient(180deg, rgba(6, 31, 58, 0.45) 0%, rgba(6, 31, 58, 0.7) 12%, rgba(6, 31, 58, 0.6) 40%, rgba(6, 31, 58, 0.3) 52%, rgba(6, 31, 58, 0.72) 70%, rgba(6, 31, 58, 0.92) 100%);
  }
}

/* Pause button (WCAG 2.2.2): small round outline button on dark, bottom right of the hero shell. */
.ri-hero__pause {
  position: absolute;
  right: var(--ri-gutter);
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ri-rule-dark-strong);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--ri-mo-base) var(--ri-ease), color var(--ri-mo-base) var(--ri-ease);
}

.ri-hero__pause[hidden] { display: none; }
.ri-hero__pause:hover { background: #fff; color: var(--ri-blue-deep); }
.ri-hero__pause:focus-visible { outline: 2px solid var(--ri-focus); outline-offset: 2px; }
.ri-hero__pause .ri-icon { width: 16px; height: 16px; }
.ri-hero__play-icon { fill: currentColor; }
/* The label names the next action ("Animation anhalten" / "abspielen"); the icon follows it. */
.ri-hero__pause[data-paused] .ri-hero__pause-icon,
.ri-hero__pause:not([data-paused]) .ri-hero__play-icon { display: none; }

/* ---------- Photo variant: subpages (pen.dev Produkt 1 › Hero) ---------- */

.ri-hero--photo {
  padding: 161px 0 72px; /* header 88 + rule 1 + 72 */
  background:
    linear-gradient(180deg, rgba(4, 22, 43, 0.9) 0%, rgba(4, 22, 43, 0.6) 50%, rgba(4, 22, 43, 0.95) 100%),
    var(--ri-hero-image, none) center / cover no-repeat,
    var(--ri-blue-deep);
}

.ri-hero--photo .ri-hero__inner { gap: 24px; }

.ri-hero__lead {
  max-width: 980px;
  margin: 0;
  color: var(--ri-ondark-1);
  font-family: var(--ri-font);
  font-size: 19px;
  line-height: 1.6;
}

.ri-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
}

/* ---------- Title variant: text pages (pen.dev Impressum › Kopfleiste, Seitentitel) ---------- */

.ri-hero--title { border-bottom: 1px solid var(--ri-line); }

.ri-hero__band {
  height: 89px; /* header 88 + rule 1 */
  background: var(--ri-blue-deep);
}

.ri-hero__head { padding-top: 96px; padding-bottom: 64px; }

.ri-hero__heading {
  width: auto;
  margin: 0;
  color: var(--ri-ink);
  font-family: var(--ri-font);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  text-transform: none;
  overflow-wrap: break-word;
}

@media (max-width: 1023px) {
  .ri-hero { min-height: 0; }
  .ri-hero--gradient { padding-top: 128px; }
  .ri-hero--photo { padding: 129px 0 56px; } /* header 72 + rule 1 + 56 */
  .ri-hero__inner { gap: 24px; }
  .ri-hero__band { height: 73px; } /* header 72 + rule 1 */
  .ri-hero__head { padding-bottom: 96px; }
  .ri-hero__heading { font-size: 56px; }
}

@media (max-width: 767px) {
  .ri-hero--photo { padding: 105px 0 40px; } /* header 64 + rule 1 + 40 */
  .ri-hero__actions { width: 100%; }
  .ri-hero__band { height: 65px; } /* header 64 + rule 1 */
  .ri-hero__head { padding-top: 64px; padding-bottom: 64px; }
  .ri-hero__heading { font-size: 40px; }
}