/*!
 * UP-Labels Kontakt-Header – Parallax-Rollen vor dunklem Hintergrund
 * Alle Klassen mit Präfix .upl-hero, damit nichts mit dem Theme kollidiert.
 * Anpassbar über die CSS-Variablen im ersten Block.
 */
.upl-hero{
  /* ---- Stellschrauben ---- */
  --upl-height: clamp(300px, 25vw, 400px);   /* Höhe des Headers */
  --upl-content-max: 1170px;                 /* Breite des Theme-Containers, an dem der Text ausgerichtet wird */
  --upl-bg: #343434;                         /* Seitenhintergrund von up-labels.com */
  --upl-text: #fafafa;                       /* Headline */
  --upl-subtext: #c7c7c7;                    /* Subline und Markenzeile */
  --upl-accent: #ffdc00;                     /* CI-Gelb UP-Labels */
  --upl-accent-hover: #ffe019;
  --upl-accent-text: #0a0a0a;                /* Schrift auf dem Button */
  --upl-scrim: 52, 52, 52;                   /* RGB hinter dem Text, = Seitenhintergrund */
  --upl-font-display: "Rajdhani", "Arial Narrow", sans-serif;  /* Überschriften wie auf der Website */
  --upl-font-body: "Rubik", Arial, sans-serif;                 /* Fließtext wie auf der Website */

  position: relative;
  height: var(--upl-height);
  overflow: hidden;
  isolation: isolate;
  background: var(--upl-bg);
  color: var(--upl-text);
}
/* Rollen an den Rändern weich ausblenden, damit sie nahtlos in die Seite übergehen */
.upl-hero::after{
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent 88%, var(--upl-bg) 100%);
}
/* Ohne Text: an beiden Rändern weich ausblenden */
.upl-hero--notext::after{
  background: linear-gradient(90deg, var(--upl-bg) 0%, transparent 10%, transparent 90%, var(--upl-bg) 100%);
}

/* Abstände des Page Builders rund um den Header entfernen (nur dort, wo der Header steckt),
   damit er bündig unter der Navigation und über die volle Breite sitzt */
:where(.section-item, .content, .row, .hc_column_cnt, .hc_text_block_cnt, [class*="col-"]):has(.upl-hero){
  padding-top: 0 !important; padding-bottom: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
  max-width: none !important; width: 100% !important;
}
.hc_text_block_cnt > :has(> .upl-hero), .hc_text_block_cnt p:has(> .upl-hero){ margin: 0 !important; padding: 0 !important; }
.upl-hero *,
.upl-hero *::before,
.upl-hero *::after{ box-sizing: border-box; }

/* Rollen-Ebenen */
.upl-hero__track{
  position: absolute; left: 0; z-index: 1;
  display: flex; align-items: flex-end; flex-wrap: nowrap;
  will-change: transform; pointer-events: none;
}
.upl-hero__set{ display: flex; align-items: flex-end; height: 100%; gap: inherit; flex: none; }
.upl-hero__track img{
  display: block; height: 100%; width: auto; max-width: none; flex: none;
  margin: 0; border: 0; box-shadow: none; user-select: none; -webkit-user-drag: none;
}
.upl-hero__track--back { bottom: 52%; height: 40%; gap: 30px; opacity: .3; filter: blur(2.5px) saturate(.8); }
.upl-hero__track--mid  { bottom: 20%; height: 52%; gap: 38px; opacity: .6; filter: blur(1px); }
.upl-hero__track--front{ bottom: 3%;  height: 68%; gap: 60px; }
.upl-hero__track--front img{ filter: drop-shadow(0 14px 16px rgba(0,0,0,.6)); }

/* Text */
.upl-hero__copy{
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding-left: max(24px, calc((100% - var(--upl-content-max)) / 2));
  padding-right: 24px;
  width: min(100%, calc(max(24px, (100% - var(--upl-content-max)) / 2) + 620px));
  background: linear-gradient(90deg,
    rgba(var(--upl-scrim), .95) 0%,
    rgba(var(--upl-scrim), .85) 65%,
    rgba(var(--upl-scrim), 0) 100%);
}
.upl-hero__brand{
  margin: 0; font-family: var(--upl-font-display); font-weight: 700;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--upl-subtext);
}
.upl-hero__brand span{ color: var(--upl-accent); }
.upl-hero__title{
  margin: 0; font-family: var(--upl-font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 52px); line-height: 1.02; letter-spacing: .01em;
  text-transform: uppercase; color: var(--upl-text); text-wrap: balance;
}
.upl-hero__sub{
  margin: 0; font-family: var(--upl-font-body);
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.45; color: var(--upl-subtext); max-width: 34em;
}
.upl-hero__btn{
  align-self: flex-start; margin-top: 6px;
  font-family: var(--upl-font-display); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--upl-accent-text) !important; background: var(--upl-accent);
  padding: 11px 24px 10px; border-radius: 4px; text-decoration: none !important; line-height: 1.2;
  transition: background-color .2s;
}
.upl-hero__btn:hover{ background: var(--upl-accent-hover); }
.upl-hero__btn:focus-visible{ outline: 2px solid var(--upl-accent); outline-offset: 3px; }

/* Kontaktdaten */
.upl-hero__facts{
  margin: 4px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 10px 32px; justify-content: start;
  font-family: var(--upl-font-body);
}
.upl-hero__facts > div{ margin: 0; min-width: 0; }
.upl-hero__facts dt{
  margin: 0 0 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--upl-subtext); opacity: .8;
}
.upl-hero__facts dd{ margin: 0; font-size: 15px; line-height: 1.35; color: var(--upl-text); overflow-wrap: anywhere; }
.upl-hero__facts a{ color: var(--upl-text) !important; text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,.3); }
.upl-hero__facts a:hover{ border-bottom-color: var(--upl-accent); }
.upl-hero__facts a:focus-visible{ outline: 2px solid var(--upl-accent); outline-offset: 2px; }

/* Pause-Schalter (Barrierefreiheit, WCAG 2.2.2) */
.upl-hero__toggle{
  position: absolute; z-index: 4; right: 16px; bottom: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(var(--upl-scrim), .6); color: #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0; opacity: .7; transition: opacity .2s;
}
.upl-hero__toggle:hover, .upl-hero__toggle:focus-visible{ opacity: 1; }
.upl-hero__toggle:focus-visible{ outline: 2px solid var(--upl-accent); outline-offset: 2px; }
.upl-hero__toggle svg{ width: 14px; height: 14px; display: block; }
.upl-hero__toggle .upl-i-play{ display: none; }
.upl-hero.is-paused .upl-hero__toggle .upl-i-play{ display: block; }
.upl-hero.is-paused .upl-hero__toggle .upl-i-pause{ display: none; }
.upl-sr{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tablet */
@media (max-width: 900px){
  .upl-hero__copy{ width: min(100%, 520px); }
}
/* Handy: nur vordere Ebene, Text oben */
@media (max-width: 640px){
  .upl-hero{ --upl-height: 520px; }
  .upl-hero__track--back, .upl-hero__track--mid{ display: none; }
  .upl-hero__track--front{ height: 40%; gap: 28px; }
  .upl-hero__copy{
    width: 100%; justify-content: flex-start; padding-top: 32px; padding-right: 24px;
    background: linear-gradient(180deg,
      rgba(var(--upl-scrim), .96) 0%, rgba(var(--upl-scrim), .85) 58%, rgba(var(--upl-scrim), 0) 80%);
  }
  .upl-hero__sub{ display: none; }
  .upl-hero__facts{ grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .upl-hero__fact--addr, .upl-hero__fact--hours{ display: none; }
  .upl-hero--notext{ --upl-height: 240px; }
  .upl-hero--notext .upl-hero__track--front{ height: 70%; bottom: 6%; }
}