@charset "utf-8";

/*
 * HP4U DG PARO Hero frontend styles.
 * Dynamic editor choices are mapped to CSS classes. No inline CSS is required.
 */
:root {
  /* HERO tokens */
  /* Base layout tokens */
  --hp4u-dgparo-hero-outer-bg: transparent;
  --hp4u-dgparo-hero-stage-bg: var(--hp4u-surface-1, #ffffff);
  --hp4u-dgparo-hero-content-width: var(--hp4u-layout-stage-width, var(--hp4u-content-width, 1300px));
  --hp4u-dgparo-hero-panel-lane-width: var(--hp4u-layout-content-width, var(--hp4u-content-inner-width, 1004px));
  --hp4u-dgparo-hero-embedded-width: var(--hp4u-layout-content-width, 1100px);
  --hp4u-dgparo-hero-content-pad-x: var(--hp4u-layout-gutter, clamp(20px, 5vw, 56px));
  --hp4u-dgparo-hero-content-pad-y: clamp(28px, 5vw, 64px);
	 --hp4u-dgparo-hero-content-pad-y: clamp(28px, 5vw, 94px);

  /* Bleed tokens for "Volle Inhaltsbreite".
     Match these values to the left/right padding of the surrounding The7 content wrapper. */
  --hp4u-dgparo-hero-content-bleed-x: var(--hp4u-layout-gutter, 32px);
  --hp4u-dgparo-hero-content-bleed-x-tablet: var(--hp4u-layout-gutter-tablet, 24px);
  --hp4u-dgparo-hero-content-bleed-x-mobile: var(--hp4u-layout-gutter-mobile, 18px);
  --hp4u-dgparo-hero-embedded-margin-y: clamp(32px, 5vw, 72px);
  --hp4u-dgparo-hero-embedded-pad-x: var(--hp4u-layout-gutter, clamp(20px, 4vw, 48px));
  --hp4u-dgparo-hero-radius: 18px;
  --hp4u-dgparo-hero-radius-content: 0;
  --hp4u-dgparo-hero-radius-full: 0;
  --hp4u-dgparo-hero-radius-embedded: var(--hp4u-dgparo-hero-radius);

  /* Height tokens */
  --hp4u-dgparo-hero-height-compact: clamp(320px, 38vw, 470px);
  --hp4u-dgparo-hero-height-standard: clamp(440px, 54vw, 680px);
  --hp4u-dgparo-hero-height-large: min(920px, calc(100vh - 120px));
  --hp4u-dgparo-hero-current-height: var(--hp4u-dgparo-hero-height-standard);
  --hp4u-dgparo-hero-normal-image-ratio: 16 / 9;

  /* Overlay and image tokens */
	--hp4u-overlay-light-rgb: 255, 255, 255;
  --hp4u-dgparo-hero-image-bg: var(--hp4u-color-border, #d9dde0);
  --hp4u-dgparo-hero-overlay-left: linear-gradient(90deg, rgba(var(--hp4u-overlay-dark-rgb, 0, 0, 0), .20), rgba(var(--hp4u-overlay-dark-rgb, 0, 0, 0), .05));
  --hp4u-dgparo-hero-overlay-center: rgba(var(--hp4u-overlay-dark-rgb, 0, 0, 0), .14);
  --hp4u-dgparo-hero-overlay-right: linear-gradient(270deg, rgba(var(--hp4u-overlay-dark-rgb, 0, 0, 0), .20), rgba(var(--hp4u-overlay-dark-rgb, 0, 0, 0), .05));
		--hp4u-dgparo-hero-overlay-left:
  linear-gradient(
    90deg,
    rgba(var(--hp4u-overlay-light-rgb, 255, 255, 255), .20),
    rgba(var(--hp4u-overlay-light-rgb, 255, 255, 255), .05)
  );

--hp4u-dgparo-hero-overlay-center:
  rgba(var(--hp4u-overlay-light-rgb, 255, 255, 255), .14);

--hp4u-dgparo-hero-overlay-right:
  linear-gradient(
    270deg,
    rgba(var(--hp4u-overlay-light-rgb, 255, 255, 255), .20),
    rgba(var(--hp4u-overlay-light-rgb, 255, 255, 255), .05)
  );
	  --hp4u-dgparo-hero-overlay-left:transparent;
  --hp4u-dgparo-hero-overlay-center: transparent;
  --hp4u-dgparo-hero-overlay-right: transparent;
	


  /* Panel tokens */
  --hp4u-dgparo-hero-panel-width: 640px;
  --hp4u-dgparo-hero-full-panel-lane-width: var(--hp4u-layout-content-width, var(--hp4u-dgparo-hero-panel-lane-width));
  --hp4u-dgparo-hero-full-panel-pad-x: var(--hp4u-layout-gutter, var(--hp4u-dgparo-hero-content-pad-x));
  --hp4u-dgparo-hero-full-panel-shift-x: 0px;
  --hp4u-dgparo-hero-panel-pad: clamp(24px, 4vw, 48px);
  --hp4u-dgparo-hero-panel-radius: var(--hp4u-dgparo-hero-radius);
  --hp4u-dgparo-hero-panel-shadow: 0 20px 55px rgba(var(--hp4u-shadow-rgb, 0, 0, 0), .18);

  --hp4u-dgparo-hero-panel-dark-bg: rgba(var(--hp4u-dark-bg-rgb, 82, 110, 136), .74);
  --hp4u-dgparo-hero-panel-dark-bg-fallback: rgba(var(--hp4u-dark-bg-rgb, 82, 110, 136), .90);
  --hp4u-dgparo-hero-panel-dark-text: var(--hp4u-ink-inverse, #ffffff);
  --hp4u-dgparo-hero-panel-dark-title: var(--hp4u-ink-inverse, #ffffff);
  --hp4u-dgparo-hero-panel-dark-link: var(--hp4u-ink-inverse, #ffffff);

  --hp4u-dgparo-hero-panel-light-bg: rgba(var(--hp4u-surface-1-rgb, 255, 255, 255), .88);
  --hp4u-dgparo-hero-panel-light-bg-fallback: rgba(var(--hp4u-surface-1-rgb, 255, 255, 255), .94);
  --hp4u-dgparo-hero-panel-light-text: var(--hp4u-color-text, #183f59);
  --hp4u-dgparo-hero-panel-light-title: var(--hp4u-color-text, #183f59);
  --hp4u-dgparo-hero-panel-light-link: var(--hp4u-link-accent, #f05a2a);

  --hp4u-dgparo-hero-panel-none-text-on-image: var(--hp4u-ink-inverse, #ffffff);
  --hp4u-dgparo-hero-panel-none-text-on-light: var(--hp4u-color-text, #183f59);

  /* Tagungen-inspired glass effect tokens */
  --hp4u-dgparo-hero-panel-blur: 5px;
  --hp4u-dgparo-hero-panel-contrast: 105%;
  --hp4u-dgparo-hero-panel-saturate: 120%;

  /* Typography tokens */
  --hp4u-dgparo-hero-kicker-size: clamp(.78rem, .9vw, .95rem);
  --hp4u-dgparo-hero-kicker-weight: 700;
  --hp4u-dgparo-hero-kicker-tracking: .13em;
  --hp4u-dgparo-hero-title-size: clamp(2rem, 4.2vw, 4.1rem);
  --hp4u-dgparo-hero-title-weight: 700;
  --hp4u-dgparo-hero-title-line-height: 1.08;
  --hp4u-dgparo-hero-intro-size: clamp(1.05rem, 1.75vw, 1.42rem);
  --hp4u-dgparo-hero-intro-line-height: 1.42;
  --hp4u-dgparo-hero-note-size: clamp(.94rem, 1.2vw, 1.05rem);
  --hp4u-dgparo-hero-note-line-height: 1.45;

  /* Button tokens */
  --hp4u-dgparo-hero-button-radius: var(--hp4u-radius-sm, 0);
  --hp4u-dgparo-hero-button-pad-y: 11px;
  --hp4u-dgparo-hero-button-pad-x: 23px;
  --hp4u-dgparo-hero-button-min-height: 42px;
  --hp4u-dgparo-hero-button-font-size: var(--hp4u-font-size-cta, .98rem);
  --hp4u-dgparo-hero-button-font-weight: var(--hp4u-font-weight-hp4u-button, 700);
  --hp4u-dgparo-hero-button-primary-bg: var(--hp4u-btn-bg, #45c400);
  --hp4u-dgparo-hero-button-primary-text: var(--hp4u-btn-text, #ffffff);
  --hp4u-dgparo-hero-button-primary-border: var(--hp4u-btn-border-color, #45c400);
  --hp4u-dgparo-hero-button-primary-bg-hover: var(--hp4u-btn-hover-bg, #3bae00);
  --hp4u-dgparo-hero-button-primary-text-hover: var(--hp4u-btn-hover-text, #ffffff);
  --hp4u-dgparo-hero-button-secondary-bg: transparent;
  --hp4u-dgparo-hero-button-secondary-text: currentColor;
  --hp4u-dgparo-hero-button-secondary-border: currentColor;
  --hp4u-dgparo-hero-button-secondary-bg-hover: rgba(var(--hp4u-white-rgb, 255, 255, 255), .14);

  /* Logo and credit tokens */
  --hp4u-dgparo-hero-logo-gap: clamp(14px, 2vw, 28px);
  --hp4u-dgparo-hero-logo-height: clamp(34px, 5vw, 66px);
  --hp4u-dgparo-hero-logo-strip-bg: var(--hp4u-surface-1, #ffffff);
  --hp4u-dgparo-hero-logo-strip-pad-y: clamp(24px, 4vw, 42px);
  --hp4u-dgparo-hero-credit-color: var(--hp4u-ink-inverse, #ffffff);
  --hp4u-dgparo-hero-credit-size: 12px;
  --hp4u-dgparo-hero-credit-shadow: 0 1px 4px rgba(var(--hp4u-shadow-rgb, 0, 0, 0), .45);
  --hp4u-dgparo-hero-credit-bg: rgba(var(--hp4u-overlay-dark-rgb, 0, 0, 0), .26);
  --hp4u-dgparo-hero-credit-pad-y: 3px;
  --hp4u-dgparo-hero-credit-pad-x: 7px;
  --hp4u-dgparo-hero-credit-radius: 0;

  /* Mobile text-below tokens */
  --hp4u-dgparo-hero-mobile-image-height: clamp(260px, 70vw, 460px);
  --hp4u-dgparo-hero-mobile-image-height-compact: clamp(230px, 58vw, 340px);
  --hp4u-dgparo-hero-mobile-image-height-standard: var(--hp4u-dgparo-hero-mobile-image-height);
  --hp4u-dgparo-hero-mobile-image-height-large: clamp(340px, 82vw, 560px);
  --hp4u-dgparo-hero-current-mobile-image-height: var(--hp4u-dgparo-hero-mobile-image-height-standard);
  --hp4u-dgparo-hero-mobile-text-below-bg: var(--hp4u-dgparo-hero-stage-bg);
  --hp4u-dgparo-hero-mobile-text-below-panel-pad: var(--hp4u-dgparo-hero-panel-pad);
  --hp4u-dgparo-hero-mobile-text-below-panel-radius: 0;
  --hp4u-dgparo-hero-mobile-text-below-panel-shadow: none;
  --hp4u-dgparo-hero-mobile-panel-dark-bg: var(--hp4u-dgparo-hero-panel-dark-bg-fallback);
  --hp4u-dgparo-hero-mobile-panel-light-bg: var(--hp4u-dgparo-hero-panel-light-bg-fallback);
  --hp4u-dgparo-hero-mobile-panel-none-text: var(--hp4u-dgparo-hero-panel-none-text-on-light);
}

.hp4u-dgparo-hero,
.hp4u-dgparo-hero * {
  box-sizing: border-box;
}

.hp4u-dgparo-hero {
  position: relative;
  width: 100%;
  margin: 0 auto;
  color: var(--hp4u-dgparo-hero-panel-none-text-on-light);
  font-family: inherit;
  isolation: isolate;
  background: var(--hp4u-dgparo-hero-outer-bg);
}

.hp4u-dgparo-hero .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hp4u-dgparo-hero__stage {
  position: relative;
  overflow: clip;
  min-height: var(--hp4u-dgparo-hero-current-height);
  background: var(--hp4u-dgparo-hero-stage-bg);
}

/* Height choice classes set the active height tokens for all visual modes. */
.hp4u-dgparo-hero--height-compact {
  --hp4u-dgparo-hero-current-height: var(--hp4u-dgparo-hero-height-compact);
  --hp4u-dgparo-hero-current-mobile-image-height: var(--hp4u-dgparo-hero-mobile-image-height-compact);
}

.hp4u-dgparo-hero--height-standard {
  --hp4u-dgparo-hero-current-height: var(--hp4u-dgparo-hero-height-standard);
  --hp4u-dgparo-hero-current-mobile-image-height: var(--hp4u-dgparo-hero-mobile-image-height-standard);
}

.hp4u-dgparo-hero--height-large {
  --hp4u-dgparo-hero-current-height: var(--hp4u-dgparo-hero-height-large);
  --hp4u-dgparo-hero-current-mobile-image-height: var(--hp4u-dgparo-hero-mobile-image-height-large);
}

/* Layout: full browser width. */
.hp4u-dgparo-hero--layout-full {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.hp4u-dgparo-hero--layout-full .hp4u-dgparo-hero__stage {
  border-radius: var(--hp4u-dgparo-hero-radius-full);
}

.hp4u-dgparo-hero--layout-full .hp4u-dgparo-hero__content-wrap {
  max-width: var(--hp4u-dgparo-hero-full-panel-lane-width);
  padding-left: var(--hp4u-dgparo-hero-full-panel-pad-x);
  padding-right: var(--hp4u-dgparo-hero-full-panel-pad-x);
  transform: translateX(var(--hp4u-dgparo-hero-full-panel-shift-x));
}

/* Layout: full width of the surrounding boxed content area.
   The hero bleeds through the normal page padding, so editors can keep safe text padding on all other rows. */
.hp4u-dgparo-hero--layout-content {
  width: calc(100% + (var(--hp4u-dgparo-hero-content-bleed-x) * 2));
  max-width: none;
  margin-left: calc(var(--hp4u-dgparo-hero-content-bleed-x) * -1);
  margin-right: calc(var(--hp4u-dgparo-hero-content-bleed-x) * -1);
}

.hp4u-dgparo-hero--layout-content .hp4u-dgparo-hero__stage {
  border-radius: var(--hp4u-dgparo-hero-radius-content);
}

/* Layout: centered card/embedded hero inside normal page content. */
.hp4u-dgparo-hero--layout-embedded {
  width: min(100%, var(--hp4u-dgparo-hero-embedded-width));
  max-width: var(--hp4u-dgparo-hero-embedded-width);
  margin-top: var(--hp4u-dgparo-hero-embedded-margin-y);
  margin-bottom: var(--hp4u-dgparo-hero-embedded-margin-y);
}

.hp4u-dgparo-hero--layout-embedded .hp4u-dgparo-hero__stage {
  border-radius: var(--hp4u-dgparo-hero-radius-embedded);
}

.hp4u-dgparo-hero__media,
.hp4u-dgparo-hero__picture,
.hp4u-dgparo-hero__image {
  display: block;
  width: 100%;
  height: 100%;
}

.hp4u-dgparo-hero__media {
  overflow: hidden;
  background: var(--hp4u-dgparo-hero-image-bg);
}

.hp4u-dgparo-hero__image {
  object-fit: cover;
  object-position: center center;
}

.hp4u-dgparo-hero--focus-center .hp4u-dgparo-hero__image { object-position: center center; }
.hp4u-dgparo-hero--focus-top .hp4u-dgparo-hero__image { object-position: center top; }
.hp4u-dgparo-hero--focus-right .hp4u-dgparo-hero__image { object-position: right center; }
.hp4u-dgparo-hero--focus-bottom .hp4u-dgparo-hero__image { object-position: center bottom; }
.hp4u-dgparo-hero--focus-left .hp4u-dgparo-hero__image { object-position: left center; }
.hp4u-dgparo-hero--focus-top-left .hp4u-dgparo-hero__image { object-position: left top; }
.hp4u-dgparo-hero--focus-top-right .hp4u-dgparo-hero__image { object-position: right top; }
.hp4u-dgparo-hero--focus-bottom-right .hp4u-dgparo-hero__image { object-position: right bottom; }
.hp4u-dgparo-hero--focus-bottom-left .hp4u-dgparo-hero__image { object-position: left bottom; }

/* Background-like image mode. */
.hp4u-dgparo-hero--image-background .hp4u-dgparo-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hp4u-dgparo-hero--image-background .hp4u-dgparo-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--hp4u-dgparo-hero-overlay-left);
}

.hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--text-center .hp4u-dgparo-hero__media::after {
  background: var(--hp4u-dgparo-hero-overlay-center);
}

.hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--text-right .hp4u-dgparo-hero__media::after {
  background: var(--hp4u-dgparo-hero-overlay-right);
}

/* Normal image mode. */
.hp4u-dgparo-hero--image-normal .hp4u-dgparo-hero__stage {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hp4u-dgparo-hero--image-normal .hp4u-dgparo-hero__media {
  position: relative;
  z-index: 1;
  height: var(--hp4u-dgparo-hero-current-height);
  min-height: 0;
  aspect-ratio: auto;
}

/* Ratio fallback for browsers that do not support CSS custom properties in height.
   Kept after the height declaration so existing ratio-based layouts still have a safe fallback path. */
@supports not (height: var(--hp4u-dgparo-hero-current-height)) {
  .hp4u-dgparo-hero--image-normal .hp4u-dgparo-hero__media {
    height: auto;
    aspect-ratio: var(--hp4u-dgparo-hero-normal-image-ratio);
  }
}

.hp4u-dgparo-hero--image-normal .hp4u-dgparo-hero__content-wrap {
  min-height: 0;
}

.hp4u-dgparo-hero__credit {
  position: absolute;
  z-index: 5;
  left: 14px;
  right: auto;
  bottom: 14px;
  max-width: min(70ch, calc(100% - 28px));
  margin: 0;
  padding: var(--hp4u-dgparo-hero-credit-pad-y) var(--hp4u-dgparo-hero-credit-pad-x);
  border-radius: var(--hp4u-dgparo-hero-credit-radius);
  color: var(--hp4u-dgparo-hero-credit-color);
  background: var(--hp4u-dgparo-hero-credit-bg);
  font-size: var(--hp4u-dgparo-hero-credit-size);
  line-height: 1.25;
  text-shadow: var(--hp4u-dgparo-hero-credit-shadow);
}

.hp4u-dgparo-hero--image-normal .hp4u-dgparo-hero__credit {
  left: 14px;
  right: 14px;
  bottom: 12px;
}

.hp4u-dgparo-hero__content-wrap {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: inherit;
  max-width: var(--hp4u-dgparo-hero-panel-lane-width);
  margin: 0 auto;
  padding: var(--hp4u-dgparo-hero-content-pad-y) var(--hp4u-dgparo-hero-content-pad-x);
  display: flex;
  align-items: center;
}

.hp4u-dgparo-hero--layout-content .hp4u-dgparo-hero__content-wrap,
.hp4u-dgparo-hero--layout-embedded .hp4u-dgparo-hero__content-wrap {
  max-width: none;
}

.hp4u-dgparo-hero--layout-embedded .hp4u-dgparo-hero__content-wrap {
  padding-left: var(--hp4u-dgparo-hero-embedded-pad-x);
  padding-right: var(--hp4u-dgparo-hero-embedded-pad-x);
}

.hp4u-dgparo-hero--text-left .hp4u-dgparo-hero__content-wrap {
  justify-content: flex-start;
  text-align: left;
}

.hp4u-dgparo-hero--text-center .hp4u-dgparo-hero__content-wrap {
  justify-content: center;
  text-align: center;
}

.hp4u-dgparo-hero--text-right .hp4u-dgparo-hero__content-wrap {
  justify-content: flex-end;
  text-align: left;
}

.hp4u-dgparo-hero__panel {
  width: min(100%, var(--hp4u-dgparo-hero-panel-width));
  padding: var(--hp4u-dgparo-hero-panel-pad);
  border-radius: var(--hp4u-dgparo-hero-panel-radius);
  box-shadow: var(--hp4u-dgparo-hero-panel-shadow);
}

.hp4u-dgparo-hero--text-center .hp4u-dgparo-hero__panel {
  text-align: center;
}

.hp4u-dgparo-hero--panel-dark .hp4u-dgparo-hero__panel,
.hp4u-dgparo-hero--panel-light .hp4u-dgparo-hero__panel {
  -webkit-backdrop-filter: blur(var(--hp4u-dgparo-hero-panel-blur)) contrast(var(--hp4u-dgparo-hero-panel-contrast)) saturate(var(--hp4u-dgparo-hero-panel-saturate));
  backdrop-filter: blur(var(--hp4u-dgparo-hero-panel-blur)) contrast(var(--hp4u-dgparo-hero-panel-contrast)) saturate(var(--hp4u-dgparo-hero-panel-saturate));
}

.hp4u-dgparo-hero--panel-dark .hp4u-dgparo-hero__panel {
  color: var(--hp4u-dgparo-hero-panel-dark-text);
  background: var(--hp4u-dgparo-hero-panel-dark-bg);
}

.hp4u-dgparo-hero--panel-light .hp4u-dgparo-hero__panel {
  color: var(--hp4u-dgparo-hero-panel-light-text);
  background: var(--hp4u-dgparo-hero-panel-light-bg);
}

.hp4u-dgparo-hero--panel-none .hp4u-dgparo-hero__panel {
  color: var(--hp4u-dgparo-hero-panel-none-text-on-image);
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.hp4u-dgparo-hero--panel-none.hp4u-dgparo-hero--no-image .hp4u-dgparo-hero__panel,
.hp4u-dgparo-hero--panel-none.hp4u-dgparo-hero--image-normal .hp4u-dgparo-hero__panel {
  color: var(--hp4u-dgparo-hero-panel-none-text-on-light);
}

.hp4u-dgparo-hero__panel > * {
  margin-top: 0;
  margin-bottom: 0;
}

.hp4u-dgparo-hero__panel > * + * {
  margin-top: 18px;
}

.hp4u-dgparo-hero__kicker {
  color: inherit;
  font-size: var(--hp4u-dgparo-hero-kicker-size);
  font-weight: var(--hp4u-dgparo-hero-kicker-weight);
  line-height: 1.2;
  letter-spacing: var(--hp4u-dgparo-hero-kicker-tracking);
  text-transform: uppercase;
  opacity: .94;
}

.hp4u-dgparo-hero__title {
  color: inherit;
  font-size: var(--hp4u-dgparo-hero-title-size);
  font-weight: var(--hp4u-dgparo-hero-title-weight);
  line-height: var(--hp4u-dgparo-hero-title-line-height);
  letter-spacing: -.015em;
}

.hp4u-dgparo-hero--panel-dark .hp4u-dgparo-hero__title {
  color: var(--hp4u-dgparo-hero-panel-dark-title);
}

.hp4u-dgparo-hero--panel-light .hp4u-dgparo-hero__title {
  color: var(--hp4u-dgparo-hero-panel-light-title);
}

.hp4u-dgparo-hero__intro {
  color: inherit;
  font-size: var(--hp4u-dgparo-hero-intro-size);
  line-height: var(--hp4u-dgparo-hero-intro-line-height);
  font-weight: 400;
}

.hp4u-dgparo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hp4u-dgparo-hero--text-center .hp4u-dgparo-hero__actions {
  justify-content: center;
}

.hp4u-dgparo-hero__button {
  min-height: var(--hp4u-dgparo-hero-button-min-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--hp4u-dgparo-hero-button-pad-y) var(--hp4u-dgparo-hero-button-pad-x);
  border: 2px solid transparent;
  border-radius: var(--hp4u-dgparo-hero-button-radius);
  font-size: var(--hp4u-dgparo-hero-button-font-size);
  font-weight: var(--hp4u-dgparo-hero-button-font-weight);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.hp4u-dgparo-hero__button:hover,
.hp4u-dgparo-hero__button:focus {
  text-decoration: none;
}

.hp4u-dgparo-hero__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.hp4u-dgparo-hero__button--primary,
.hp4u-dgparo-hero__button--primary:visited {
  color: var(--hp4u-dgparo-hero-button-primary-text);
  border-color: var(--hp4u-dgparo-hero-button-primary-border);
  background: var(--hp4u-dgparo-hero-button-primary-bg);
}

.hp4u-dgparo-hero__button--primary:hover,
.hp4u-dgparo-hero__button--primary:focus {
  color: var(--hp4u-dgparo-hero-button-primary-text-hover);
  border-color: var(--hp4u-dgparo-hero-button-primary-bg-hover);
  background: var(--hp4u-dgparo-hero-button-primary-bg-hover);
}

.hp4u-dgparo-hero__button--secondary,
.hp4u-dgparo-hero__button--secondary:visited {
  color: var(--hp4u-dgparo-hero-button-secondary-text);
  border-color: var(--hp4u-dgparo-hero-button-secondary-border);
  background: var(--hp4u-dgparo-hero-button-secondary-bg);
}

.hp4u-dgparo-hero__button--secondary:hover,
.hp4u-dgparo-hero__button--secondary:focus {
  background: var(--hp4u-dgparo-hero-button-secondary-bg-hover);
}

.hp4u-dgparo-hero__note {
  color: inherit;
  font-size: var(--hp4u-dgparo-hero-note-size);
  line-height: var(--hp4u-dgparo-hero-note-line-height);
}

.hp4u-dgparo-hero__note > *:first-child {
  margin-top: 0;
}

.hp4u-dgparo-hero__note > *:last-child {
  margin-bottom: 0;
}

.hp4u-dgparo-hero--panel-dark .hp4u-dgparo-hero__note a {
  color: var(--hp4u-dgparo-hero-panel-dark-link);
}

.hp4u-dgparo-hero--panel-light .hp4u-dgparo-hero__note a {
  color: var(--hp4u-dgparo-hero-panel-light-link);
}

.hp4u-dgparo-hero__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hp4u-dgparo-hero-logo-gap);
}

.hp4u-dgparo-hero__logos--align-left { justify-content: flex-start; }
.hp4u-dgparo-hero__logos--align-center { justify-content: center; }
.hp4u-dgparo-hero__logos--align-right { justify-content: flex-end; }

.hp4u-dgparo-hero--text-center .hp4u-dgparo-hero__logos {
  justify-content: center;
}

.hp4u-dgparo-hero__logo-item,
.hp4u-dgparo-hero__logo-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.hp4u-dgparo-hero__logo-link {
  text-decoration: none;
}

.hp4u-dgparo-hero__logo-img {
  width: auto;
  height: var(--hp4u-dgparo-hero-logo-height);
  max-width: min(220px, 42vw);
  object-fit: contain;
}

.hp4u-dgparo-hero__logos-strip {
  max-width: var(--hp4u-dgparo-hero-panel-lane-width);
  margin: 0 auto;
  padding: var(--hp4u-dgparo-hero-logo-strip-pad-y) var(--hp4u-dgparo-hero-content-pad-x);
  background: var(--hp4u-dgparo-hero-logo-strip-bg);
}

.hp4u-dgparo-hero--layout-content .hp4u-dgparo-hero__logos-strip {
  max-width: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hp4u-dgparo-hero--panel-dark .hp4u-dgparo-hero__panel {
    background: var(--hp4u-dgparo-hero-panel-dark-bg-fallback);
  }

  .hp4u-dgparo-hero--panel-light .hp4u-dgparo-hero__panel {
    background: var(--hp4u-dgparo-hero-panel-light-bg-fallback);
  }
}

@media (max-width: 900px) {
  :root {
    --hp4u-dgparo-hero-content-bleed-x: var(--hp4u-dgparo-hero-content-bleed-x-tablet);
    --hp4u-dgparo-hero-panel-width: 600px;
    --hp4u-dgparo-hero-title-size: clamp(2rem, 7vw, 3.2rem);
    --hp4u-dgparo-hero-intro-size: clamp(1rem, 4vw, 1.22rem);
  }

  .hp4u-dgparo-hero__content-wrap {
    align-items: flex-end;
  }
}

@media (max-width: 760px) {
  :root {
    --hp4u-dgparo-hero-content-bleed-x: var(--hp4u-dgparo-hero-content-bleed-x-mobile);
    --hp4u-dgparo-hero-content-pad-x: var(--hp4u-layout-gutter-mobile, 18px);
    --hp4u-dgparo-hero-content-pad-y: 28px;
    --hp4u-dgparo-hero-panel-pad: 24px;
    --hp4u-dgparo-hero-height-compact: 360px;
    --hp4u-dgparo-hero-height-standard: 520px;
    --hp4u-dgparo-hero-height-large: 620px;
    --hp4u-dgparo-hero-logo-height: 42px;
  }

/* Full browser width must remain full viewport width on mobile. */
  .hp4u-dgparo-hero--layout-full {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    --hp4u-dgparo-hero-full-panel-shift-x: 0px;
  }

  .hp4u-dgparo-hero--layout-embedded {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .hp4u-dgparo-hero--image-normal .hp4u-dgparo-hero__media {
    height: var(--hp4u-dgparo-hero-current-mobile-image-height);
  }

  .hp4u-dgparo-hero__panel {

    width: 100%;
  }

  .hp4u-dgparo-hero__actions {
    align-items: stretch;
  }

  .hp4u-dgparo-hero__button {
    width: 100%;
  }

  .hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--mobile-text-below .hp4u-dgparo-hero__stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--hp4u-dgparo-hero-mobile-text-below-bg);
  }

  .hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--mobile-text-below .hp4u-dgparo-hero__media {
    position: relative;
    inset: auto;
    z-index: 1;
    height: var(--hp4u-dgparo-hero-current-mobile-image-height);
    min-height: 0;
    flex: 0 0 auto;
  }

  .hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--mobile-text-below .hp4u-dgparo-hero__media::after {
    background: none;
  }

  .hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--mobile-text-below .hp4u-dgparo-hero__content-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    min-height: 0;
    display: block;
    padding-left: var(--hp4u-layout-gutter-mobile, 20px);
    padding-right: var(--hp4u-layout-gutter-mobile, 20px);
    background: var(--hp4u-dgparo-hero-mobile-text-below-bg);
  }

  .hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--mobile-text-below .hp4u-dgparo-hero__panel {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--hp4u-dgparo-hero-mobile-text-below-panel-pad);
    border-radius: var(--hp4u-dgparo-hero-mobile-text-below-panel-radius);
    box-shadow: var(--hp4u-dgparo-hero-mobile-text-below-panel-shadow);
	  	  padding-left:0;
	  padding-right:0;
  }

  .hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--mobile-text-below.hp4u-dgparo-hero--panel-dark .hp4u-dgparo-hero__panel,
  .hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--mobile-text-below.hp4u-dgparo-hero--panel-light .hp4u-dgparo-hero__panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--mobile-text-below.hp4u-dgparo-hero--panel-dark .hp4u-dgparo-hero__panel {
    background: var(--hp4u-dgparo-hero-mobile-panel-dark-bg);
  }

  .hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--mobile-text-below.hp4u-dgparo-hero--panel-light .hp4u-dgparo-hero__panel {
    background: var(--hp4u-dgparo-hero-mobile-panel-light-bg);
  }

  .hp4u-dgparo-hero--image-background.hp4u-dgparo-hero--mobile-text-below.hp4u-dgparo-hero--panel-none .hp4u-dgparo-hero__panel {
    color: var(--hp4u-dgparo-hero-mobile-panel-none-text);
  }

  .hp4u-dgparo-hero__credit {
    left: 12px;
    right: 12px;
    bottom: 10px;
  }
}

/* =========================================================
   Full-width hero: align panel to the main content lane
   ========================================================= */

:root {
  /* Controls the invisible alignment lane inside full-width heroes. */
  --hp4u-dgparo-hero-full-panel-lane-width: var(--hp4u-layout-stage-width, var(--hp4u-content-max-width, 1004px));

  /* Keeps the panel away from the viewport edge on smaller screens. */
  --hp4u-dgparo-hero-full-panel-lane-pad-x: var(--hp4u-layout-gutter, var(--hp4u-section-pad, 32px));

  /* Optional fine tuning. Use e.g. -24px or 24px if needed. */
  --hp4u-dgparo-hero-full-panel-shift-x: 0px;
}

/* In full-width mode, the text lane should follow the page/content rhythm,
   not the full image width. */
.hp4u-dgparo-hero--layout-full .hp4u-dgparo-hero__content-wrap {
  max-width: var(--hp4u-dgparo-hero-full-panel-lane-width);
  padding-left: var(--hp4u-dgparo-hero-full-panel-lane-pad-x);
  padding-right: var(--hp4u-dgparo-hero-full-panel-lane-pad-x);
}

/* For the Master-style full-width hero, centered backend setting should still
   visually align to the content lane instead of floating in the image center. */
.hp4u-dgparo-hero--layout-full.hp4u-dgparo-hero--text-center .hp4u-dgparo-hero__content-wrap {
  justify-content: flex-start;
  text-align: left;
}

.hp4u-dgparo-hero--layout-full.hp4u-dgparo-hero--text-center .hp4u-dgparo-hero__panel {
  text-align: left;
  transform: translateX(var(--hp4u-dgparo-hero-full-panel-shift-x));
}

/* Keep button alignment left in this full-width/content-lane variant. */
.hp4u-dgparo-hero--layout-full.hp4u-dgparo-hero--text-center .hp4u-dgparo-hero__actions {
  justify-content: flex-start;
}

@media screen and (min-width: 1921px) {
.hp4u-dgparo-hero__stage {
max-width: var(--hp4u-interface-max-width);
    margin: auto;
}
}