.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; }
}

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