@charset "utf-8";

/* ====== HP4U Dynamic Hero ====== */
:root{
  --hp4u-dh-surface-dark: #0b1117;
  --hp4u-dh-surface-light: #e5e3e1;

  --hp4u-dh-ink-light: #e5e3e1;
  --hp4u-dh-ink-dark: #2f373f;
  --hp4u-dh-ink-secondary: #465059;

  --hp4u-dh-accent: #0057de;
  --hp4u-dh-cta-text: #ffffff;

  --hp4u-dh-surface-panel: var(--hp4u-dh-surface-dark);
  --hp4u-dh-scrim-rgb: 0,0,0;

  --hp4u-dh-obj: 50% 50%;
  --hp4u-dh-pad: clamp(1rem, 4vw, 3rem);

  --hp4u-dh-gut-top: 2rem;
  --hp4u-dh-gut-right: 2rem;
  --hp4u-dh-gut-bottom: 2rem;

  --hp4u-dh-radius-0: 0;
  --hp4u-dh-radius-s: .5rem;
  --hp4u-dh-radius-m: .75rem;
  --hp4u-dh-radius-l: 1rem;

  --hp4u-dh-maxw: 62ch;

  --hp4u-dh-fs-kicker: clamp(.9rem, 1.4vw, 1.05rem);
--hp4u-dh-fs-title: clamp(1.6rem, 5vw, 3.176rem);
  --hp4u-dh-fs-subtitle: clamp(1.6rem, 5vw, 3.176rem);
  --hp4u-dh-fs-meta:clamp(.9rem, 1.4vw, 1.05rem);
  --hp4u-dh-fs-cta: 1rem;

  --hp4u-dh-lh-title: 1.06;
  --hp4u-dh-lh-subtitle: 1.06;

  --hp4u-dh-fw-kicker: 400;
  --hp4u-dh-fw-title: 700;
  --hp4u-dh-fw-subtitle: 400;
  --hp4u-dh-fw-meta: 400;
  --hp4u-dh-fw-cta: 400;

  --hp4u-dh-minh-panorama: clamp(24rem, 55vh, 42rem);
  --hp4u-dh-minh-komfort: clamp(28rem, 72vh, 52rem);
	--hp4u-dh-minh-komfort: clamp(24rem, 55vh, 42rem);
  --hp4u-dh-offset-top: 100px;

  --hp4u-dh-lane-max: 1100px;
  --hp4u-dh-lane-pad: 50px;

  /* NEW: logo tokens (desktop defaults; mobile overrides via classes) */
  --hp4u-dh-logo-h: 36px;
  --hp4u-dh-logo-gap: .5rem;
	--hp4u-dh-kicker-extra-bg:#e81d47;
}

/* ====== Base component ====== */
.hp4u_dyn_hero{
  position: relative;
  display: grid;
  grid-template-areas: "media";
  isolation: isolate;
  overflow: clip;
  min-height: var(--hp4u-dh-minh-panorama);
  --hp4u-dh-ink-current: var(--hp4u-dh-ink-light);
  color: var(--hp4u-dh-ink-current);
}

.hp4u_dyn_hero--theme-dark{
  --hp4u-dh-ink-current: var(--hp4u-dh-ink-light);
  --hp4u-dh-surface-panel: var(--hp4u-dh-surface-dark);
  --hp4u-dh-scrim-rgb: 0,0,0;
}
.hp4u_dyn_hero--theme-light{
  --hp4u-dh-ink-current: var(--hp4u-dh-ink-dark);
  --hp4u-dh-surface-panel: var(--hp4u-dh-surface-light);
  --hp4u-dh-scrim-rgb: 255,255,255;
}

.hp4u_dyn_hero__media{ grid-area: media; z-index: 1; }
.hp4u_dyn_hero__img{
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--hp4u-dh-obj);
  display: block; background: #ddd;
}

.hp4u_dyn_hero .hp4u_dyn_hero__media > .hp4u_dyn_hero__img{
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--hp4u-dh-obj);
}

.hp4u_dyn_hero--bgmode .hp4u_dyn_hero__media{
  background-size: cover; background-position: var(--hp4u-dh-obj);
  background-repeat: no-repeat;
}

.hp4u_dyn_hero__grid{
  grid-area: media; z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(18rem, 48rem);
  align-items: stretch;
}
.hp4u_dyn_hero__col{ position: relative; }
.hp4u_dyn_hero__col--right{ display:flex; }

@media (min-width: 1025px){
  .hp4u_dyn_hero--ctx-full.hp4u_dyn_hero--preset-transparent .hp4u_dyn_hero__grid{
    box-sizing: border-box;
    padding-right: max(var(--hp4u-dh-lane-pad), calc((100vw - var(--hp4u-dh-lane-max))/2));
  }
}

.hp4u_dyn_hero__box{
  display: flex; flex-direction:column; gap:.5rem;
  max-width: var(--hp4u-dh-maxw);
  margin-left: auto;
  padding: var(--hp4u-dh-pad);
  border-radius: var(--hp4u-dh-radius-m);
  color: inherit; background: transparent;
}

.hp4u_dyn_hero__box > *{ margin: 0; }

.hp4u_dyn_hero--radius-0 .hp4u_dyn_hero__box{ border-radius: var(--hp4u-dh-radius-0); }
.hp4u_dyn_hero--radius-s .hp4u_dyn_hero__box{ border-radius: var(--hp4u-dh-radius-s); }
.hp4u_dyn_hero--radius-m .hp4u_dyn_hero__box{ border-radius: var(--hp4u-dh-radius-m); }
.hp4u_dyn_hero--radius-l .hp4u_dyn_hero__box{ border-radius: var(--hp4u-dh-radius-l); }

.hp4u_dyn_hero--boxw-narrow .hp4u_dyn_hero__box{ max-width: clamp(34ch, 28vw, 40ch); }
.hp4u_dyn_hero--boxw-normal .hp4u_dyn_hero__box{ max-width: clamp(38ch, 34vw, 48ch); }
.hp4u_dyn_hero--boxw-wide .hp4u_dyn_hero__box{ max-width: clamp(62ch, 70vw, 80ch); }

/* ====== Preset: Split ====== */
.hp4u_dyn_hero--preset-split .hp4u_dyn_hero__grid{
  grid-template-columns: 1fr minmax(22rem, 46rem);
}
.hp4u_dyn_hero--preset-split .hp4u_dyn_hero__box{
  align-self: stretch;
  margin-top: 0; margin-right: 0; margin-bottom: 0;
  background: var(--hp4u-dh-surface-panel);
}

/* ====== Preset: Transparent ====== */
.hp4u_dyn_hero--preset-transparent .hp4u_dyn_hero__box{
  margin-top: var(--hp4u-dh-gut-top);
  margin-right: var(--hp4u-dh-gut-right);
  margin-bottom: var(--hp4u-dh-gut-bottom)!important;
  background: rgba(var(--hp4u-dh-scrim-rgb), .44);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hp4u_dyn_hero.hp4u_dyn_hero--preset-transparent .hp4u_dyn_hero__box{
  margin-top: var(--hp4u-dh-gut-top);
  margin-right: var(--hp4u-dh-gut-right);
  margin-bottom: var(--hp4u-dh-gut-bottom)!important;
}
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--opd-low  .hp4u_dyn_hero__box{ background: rgba(var(--hp4u-dh-scrim-rgb), .20); }
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--opd-med  .hp4u_dyn_hero__box{ background: rgba(var(--hp4u-dh-scrim-rgb), .44); }
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--opd-high .hp4u_dyn_hero__box{ background: rgba(var(--hp4u-dh-scrim-rgb), .62); }

/* ====== Preset: Zeile ====== */
.hp4u_dyn_hero--preset-zeile{
  grid-template-areas: "media" "lane";
  grid-auto-rows: auto auto;
}
.hp4u_dyn_hero--preset-zeile .hp4u_dyn_hero__grid{
  grid-area: lane;
  grid-template-columns: minmax(0,1fr);
}
.hp4u_dyn_hero--preset-zeile .hp4u_dyn_hero__col--left{ display:none; }
.hp4u_dyn_hero--preset-zeile .hp4u_dyn_hero__box{
  margin: 0; max-width: none; border-radius: 0;
  background: var(--hp4u-dh-surface-panel);
}
.hp4u_dyn_hero__kicker .extra {
	padding-left:.5rem;
	padding-right:.5rem;
 background-color: var(--hp4u-dh-kicker-extra-bg, rgba(255,255,255,0.15));	
font-weight:700;	
}
/* ====== Typography ====== */
.hp4u_dyn_hero__kicker{
  font-weight: var(--hp4u-dh-fw-kicker);
  font-size: var(--hp4u-dh-fs-kicker);
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--hp4u-dh-ink-kicker, currentColor);
}
.hp4u_dyn_hero__title{
  font-weight: var(--hp4u-dh-fw-title);
  font-size: var(--hp4u-dh-fs-title);
  line-height: var(--hp4u-dh-lh-title);
}
.hp4u_dyn_hero .hp4u_dyn_hero__title{ color: var(--hp4u-dh-ink-current); }
.hp4u_dyn_hero__subtitle{
  font-weight: var(--hp4u-dh-fw-subtitle);
  font-size: var(--hp4u-dh-fs-subtitle);
  line-height: var(--hp4u-dh-lh-subtitle);
  color: var(--hp4u-dh-ink-current); opacity: .92;
}
.hp4u_dyn_hero__title,
.hp4u_dyn_hero__kicker,
.hp4u_dyn_hero__meta,
.hp4u_dyn_hero__subtitle{
    hyphens: auto;
    -webkit-hyphens: auto; /* Safari/iOS */
    -ms-hyphens: auto;      /* very old Edge/IE, harmless elsewhere */
}
.hp4u_dyn_hero__meta{
  font-weight: var(--hp4u-dh-fw-meta);
  font-size: var(--hp4u-dh-fs-meta);
  line-height: 1.25;
  opacity: .92;
  color: var(--hp4u-dh-ink-meta, currentColor);
}

.hp4u_dyn_hero__btn{
    box-sizing: border-box;
    min-height: 40px;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    border: var(--hp4u-border-w) solid var(--hp4u-btn-border-color);
    border-radius: var(--hp4u-radius-sm);
    background: var(--hp4u-btn-bg);
    color: var(--hp4u-btn-text);
    text-decoration: none;
    font-weight: var(--hp4u-font-weight-hp4u-button);
    font-size: var(--hp4u-font-size-cta);
    line-height: var(--hp4u-lh-tight);
    text-align: center;
	margin-top:var( --hp4u-dh-gut-right);
}
.hp4u_dyn_hero__btn:visited{ color: var(--hp4u-dh-cta-text); }
.hp4u_dyn_hero__btn:hover{ text-decoration: none; }
.hp4u_dyn_hero__btn:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; }
.hp4u_dyn_hero__ctawrap{ margin-top:.25rem; }

/* Legacy single-logo (kept) */
.hp4u_dyn_hero__logo{ max-height: 40px; width:auto; }
.hp4u_dyn_hero__logo_wrap{ margin-bottom:.5rem; }

/* ====== NEW: Multi-logo rows ====== */
.hp4u_dyn_hero__logos{
  display:flex; flex-wrap:wrap; align-items:center;
  gap: var(--hp4u-dh-logo-gap, .5rem);
}
.hp4u_dyn_hero__logos--top{ margin-bottom:.5rem; }
.hp4u_dyn_hero__logos--bottom{ margin-top:.75rem; }

.hp4u_dyn_hero__logos--align-left{ justify-content:flex-start; }
.hp4u_dyn_hero__logos--align-center{ justify-content:center; }
.hp4u_dyn_hero__logos--align-right{ justify-content:flex-end; }

.hp4u_dyn_hero__logo_item{ display:inline-flex; align-items:center; }
.hp4u_dyn_hero__logo_link{ display:inline-flex; align-items:center; text-decoration:none; }
.hp4u_dyn_hero__logos img.hp4u_dyn_hero__logo{
  height: var(--hp4u-dh-logo-h);
  width:auto; max-width:100%;
}

/* gap variants */
.hp4u_dyn_hero--logogap-tight  { --hp4u-dh-logo-gap: .25rem; }
.hp4u_dyn_hero--logogap-normal { --hp4u-dh-logo-gap: .5rem; }
.hp4u_dyn_hero--logogap-loose  { --hp4u-dh-logo-gap: 1rem; }

/* desktop logo height variants */
.hp4u_dyn_hero--logoh-d-s { --hp4u-dh-logo-h: 24px; }
.hp4u_dyn_hero--logoh-d-m { --hp4u-dh-logo-h: 36px; }
.hp4u_dyn_hero--logoh-d-l { --hp4u-dh-logo-h: 48px; }

/* mobile overrides */
@media (max-width: 660px){
  .hp4u_dyn_hero--logoh-m-s { --hp4u-dh-logo-h: 18px; }
  .hp4u_dyn_hero--logoh-m-m { --hp4u-dh-logo-h: 28px; }
  .hp4u_dyn_hero--logoh-m-l { --hp4u-dh-logo-h: 36px; }
}

/* ====== Height stages ====== */
@media (max-width: 1024px){
  .hp4u_dyn_hero{ min-height: var(--hp4u-dh-minh-komfort); }
}

@media (max-width: 660px){
  .hp4u_dyn_hero--mheight-full{
    min-height: calc(100dvh - var(--hp4u-dh-offset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .hp4u_dyn_hero--mheight-komfort{
    min-height: var(--hp4u-dh-minh-komfort);
    padding-bottom: 0;
  }

  .hp4u_dyn_hero--preset-split,
  .hp4u_dyn_hero--preset-zeile,
  .hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--mobpos-above,
  .hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--mobpos-below{
    display: flex; flex-direction: column;
  }

  .hp4u_dyn_hero--moborder-above .hp4u_dyn_hero__grid{ order: 0; }
  .hp4u_dyn_hero--moborder-above .hp4u_dyn_hero__media{ order: 1; }
  .hp4u_dyn_hero--moborder-below .hp4u_dyn_hero__grid{ order: 1; }
  .hp4u_dyn_hero--moborder-below .hp4u_dyn_hero__media{ order: 0; }

  .hp4u_dyn_hero--mobpos-above .hp4u_dyn_hero__grid{ order: 0; }
  .hp4u_dyn_hero--mobpos-above .hp4u_dyn_hero__media{ order: 1; }
  .hp4u_dyn_hero--mobpos-below .hp4u_dyn_hero__grid{ order: 1; }
  .hp4u_dyn_hero--mobpos-below .hp4u_dyn_hero__media{ order: 0; }

  .hp4u_dyn_hero--preset-split .hp4u_dyn_hero__box{
    border-radius: 0; margin:0; max-width:none;
    background: var(--hp4u-dh-surface-panel);
  }

  .hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--opm-low  .hp4u_dyn_hero__box{ background: rgba(var(--hp4u-dh-scrim-rgb), .22); }
  .hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--opm-med  .hp4u_dyn_hero__box{ background: rgba(var(--hp4u-dh-scrim-rgb), .36); }
  .hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--opm-high .hp4u_dyn_hero__box{ background: rgba(var(--hp4u-dh-scrim-rgb), .52); }

  .hp4u_dyn_hero--title-compact .hp4u_dyn_hero__title{
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }
}

/* ====== Debug visuals ====== */
.hp4u_dyn_hero--debug .hp4u_dyn_hero__grid{ outline:1px dashed magenta; }
.hp4u_dyn_hero--debug .hp4u_dyn_hero__box{ outline:1px dashed cyan; }

/* ====== Full-width "edge" look (desktop) ====== */
@media (min-width: 1025px){
  .hp4u_dyn_hero--ctx-full.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--boxw-wide .hp4u_dyn_hero__grid{
    padding-right: 0;
  }
  .hp4u_dyn_hero--ctx-full.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--boxw-wide .hp4u_dyn_hero__box{
    margin-right: var(--hp4u-dh-gut-right);
    max-width: clamp(56ch, 60vw, 110ch);
  }
  .hp4u_dyn_hero--ctx-full.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--boxw-wide .hp4u_dyn_hero__grid{
    grid-template-columns: minmax(0, clamp(8rem, 18vw, 34rem)) minmax(22rem, 1fr);
    padding-right: 0;
  }
}

/* mobile tweak for transparent */
@media (max-width: 660px){
  .hp4u_dyn_hero.hp4u_dyn_hero--preset-transparent .hp4u_dyn_hero__box {
    margin-top: var(--hp4u-dh-gut-top);
    margin-right: var(--hp4u-dh-gut-right);
    margin-bottom: var(--hp4u-dh-gut-bottom) !important;
    margin-left: var(--hp4u-dh-gut-bottom) !important;
    max-width: 100%;
  }
  .hp4u_dyn_hero--preset-transparent .hp4u_dyn_hero__box{ align-self: flex-start; }
}

@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .hp4u_dyn_hero--preset-transparent .hp4u_dyn_hero__box{
    background: rgba(var(--hp4u-dh-scrim-rgb), .62);
  }
}

/* glass variants (kept) */
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--glass-frost .hp4u_dyn_hero__box{
  -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
}
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--glass-heavy .hp4u_dyn_hero__box{
  -webkit-backdrop-filter: blur(12px) brightness(.85) contrast(110%);
  backdrop-filter: blur(12px) brightness(.85) contrast(110%);
}
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--glass-vibrant .hp4u_dyn_hero__box{
  -webkit-backdrop-filter: blur(6px) saturate(160%) contrast(108%);
  backdrop-filter: blur(6px) saturate(160%) contrast(108%);
}
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--glass-soft .hp4u_dyn_hero__box{
  -webkit-backdrop-filter: blur(10px) brightness(1.12) saturate(105%);
  backdrop-filter: blur(10px) brightness(1.12) saturate(105%);
}
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--glass-darken .hp4u_dyn_hero__box{
  -webkit-backdrop-filter: blur(6px) brightness(.75);
  backdrop-filter: blur(6px) brightness(.75);
}
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--glass-muted .hp4u_dyn_hero__box{
  -webkit-backdrop-filter: blur(8px) grayscale(60%) contrast(105%);
  backdrop-filter: blur(8px) grayscale(60%) contrast(105%);
}
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--glass-cyan .hp4u_dyn_hero__box{
  -webkit-backdrop-filter: blur(10px) hue-rotate(190deg) saturate(140%);
  backdrop-filter: blur(10px) hue-rotate(190deg) saturate(140%);
}
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--glass-mono .hp4u_dyn_hero__box{
  -webkit-backdrop-filter: blur(8px) grayscale(100%) contrast(110%);
  backdrop-filter: blur(8px) grayscale(100%) contrast(110%);
}
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--glass-micro .hp4u_dyn_hero__box{
  -webkit-backdrop-filter: blur(5px) contrast(105%) saturate(120%);
  backdrop-filter: blur(5px) contrast(105%) saturate(120%);
}
.hp4u_dyn_hero--preset-transparent.hp4u_dyn_hero--glass-invert .hp4u_dyn_hero__box{
  -webkit-backdrop-filter: invert(100%) hue-rotate(180deg) contrast(90%) saturate(80%) blur(4px);
  backdrop-filter: invert(100%) hue-rotate(180deg) contrast(90%) saturate(80%) blur(4px);
}

.hp4u_dyn_hero--preset-transparent {
  /* wider line length just for the transparent hero */
  --hp4u-dh-maxw: clamp(44ch, 60vw, 70ch);
}
.hp4u_dyn_hero__grid {
  grid-template-columns: 1fr minmax(10rem, 50rem);
}
@media (min-width: 661px) and (max-width: 1024px) {
  .hp4u_dyn_hero--preset-transparent .hp4u_dyn_hero__grid {
    /* left ~35%, right ~65% – tune to taste */
    grid-template-columns: minmax(0, 20%) minmax(0, 80%);
  }
}

@media (max-width: 660px){
  .hp4u_dyn_hero.hp4u_dyn_hero--preset-transparent .hp4u_dyn_hero__box {
    margin-top: var(--hp4u-dh-gut-top)!important;
    margin-right: 1rem!important;
    margin-bottom: var(--hp4u-dh-gut-bottom) !important;
    margin-left: 1rem !important;
    max-width: 100%;
  }

  .hp4u_dyn_hero--preset-transparent .hp4u_dyn_hero__box {
    align-self: flex-start;
  }
}