.wp-block-ust-hero-slider{
  position:relative;
  width:100%;
  min-height:var(--ust-min-h,100vh);
  overflow:hidden;
  --header-offset:var(--header-offset,0px);
}

/*
  Top-Hero: Hero soll bis zum Viewport-Top reichen, Header liegt als Layer darüber.
  Aktiviert durch body_class 'ust-has-tophero' (gesetzt in functions.php, sobald der Block extrahiert wurde).
*/
/*
  Der Theme-Header trägt die Klassen .site-header und .ust-header.
  Bei Top-Hero muss der Header aus dem Flow heraus (sonst entsteht "Weißraum")
  und sein Hintergrund darf den Hero nicht überdecken.
*/
/*
  Header als Layer über dem Hero, ohne Customizer-Optionen zu überstimmen.

  Problemursache "Weißraum": position: sticky bleibt im Flow und reserviert Platz.
  Lösung: Bei vorhandenem Top-Hero wird der Sticky-Header zu fixed (aus dem Flow),
  damit der Hero wirklich bei y=0 beginnt. Farben/Background kommen weiterhin
  aus den bestehenden Theme-Regeln (Customizer: initial transparent, on-scroll bg etc.).
*/

/* Sticky aktiviert -> fixed (entspricht dem gewünschten Layer-Verhalten) */
body.ust-has-tophero.ust-hsticky-sticky .site-header,
body.ust-has-tophero.ust-hsticky-sticky .ust-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Sticky deaktiviert -> absolute, damit der Header ebenfalls nicht "drückt" */
body.ust-has-tophero.ust-hsticky-static .site-header,
body.ust-has-tophero.ust-hsticky-static .ust-header{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Eventuelle Header-Margins neutralisieren (sonst entsteht wieder Abstand) */
body.ust-has-tophero .site-header{ margin-bottom: 0; }

/*
  Da fixed/absolute den Header aus dem Flow nimmt, würde normaler Content beim Scroll
  unter den Header rutschen. Wir kompensieren das ausschließlich für den Content-Bereich,
  nicht für den Hero.
*/
body.ust-has-tophero .site-content{
  padding-top: calc(var(--ust-space-3) + var(--header-offset, 0px));
}

/*
  Fullscreen/Fullwidth: Theme-Container sicher "sprengen".
  WordPress setzt bei Align Full i.d.R. die Klasse .alignfull.
*/
.wp-block-ust-hero-slider.alignfull{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Falls Theme pauschale Block-Abstände setzt: erster Hero soll bündig starten. */
.entry-content > .wp-block-ust-hero-slider:first-child{
  margin-top:0;
}

.wp-block-ust-hero-slider .ust-hero-slider__media{
  position:absolute;
  inset:0;
  z-index:0;
}

.wp-block-ust-hero-slider .ust-hero-slider__overlay{
  position:absolute;
  inset:0;
  background:var(--ust-overlay-color,#000);
  opacity:var(--ust-overlay-opacity,0.35);
  pointer-events:none;
  z-index:2;
}

.wp-block-ust-hero-slider .ust-hero-slider__slides{
  position:absolute;
  inset:0;
  z-index:1;
}

.wp-block-ust-hero-slider .ust-hero-slider__slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity var(--ust-transition-ms,600ms) ease;
  will-change:opacity;
}

.wp-block-ust-hero-slider .ust-hero-slider__slide.is-active{
  opacity:1;
}

.wp-block-ust-hero-slider .ust-hero-slider__content{
  position:absolute;
  inset:0;
  z-index:3;

  /* Flex-Overlay: echte vertikale Ausrichtung wie beim Cover-Block */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;

  /* oberer Abstand unter dem Menü */
  padding-top:calc(var(--header-offset) + 2rem);
  padding-right:1.5rem;
  padding-left:1.5rem;
  padding-bottom:2rem;
}

/* Vertikale Ausrichtung (Block-Einstellung) */
.wp-block-ust-hero-slider.is-valign-top .ust-hero-slider__content{ justify-content:flex-start; }
.wp-block-ust-hero-slider.is-valign-center .ust-hero-slider__content{ justify-content:center; }
.wp-block-ust-hero-slider.is-valign-bottom .ust-hero-slider__content{ justify-content:flex-end; }

/* Inhalt auf eine lesbare Max-Breite begrenzen, ohne zusätzliches Markup zu erzwingen */
.wp-block-ust-hero-slider .ust-hero-slider__content-inner{
  display:inline-block;
  width:fit-content;
  max-width:72rem;
  margin-left:auto;
  margin-right:auto;
}

/* Lesbarkeit: Theme kann Textfarbe erben, daher bewusst neutral halten (ohne harte Farben). */
.wp-block-ust-hero-slider .ust-hero-slider__content-inner > *{ position:relative; }

.wp-block-ust-hero-slider .ust-hero-slider__ui{
  position:absolute;
  left:0;
  right:0;
  bottom:1.5rem;
  z-index:4;

  display:flex;
  justify-content:center;
  align-items:center;

  pointer-events:none;
  color:var(--ust-header-text, currentColor);
}

.wp-block-ust-hero-slider .ust-hero-slider__dots{
  display:flex;
  gap:0.6rem;
  pointer-events:auto;
}

.wp-block-ust-hero-slider .ust-hero-slider__dots button{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1.5px solid currentColor;
  background:transparent;
  opacity:0.9;
  padding:0;
  position:relative;
}

.wp-block-ust-hero-slider .ust-hero-slider__dots button.is-active::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%,-50%);
}

.wp-block-ust-hero-slider.is-hero .ust-hero-slider__ui{
  display:none;
}


/*
  Vertikale Ausrichtung der beiden Text-Elemente
  ------------------------------------------------
  Wichtig: "auto"-Margins innerhalb eines flex Containers reißen Überschrift und Text auseinander
  (genau der Effekt aus deinem Screenshot: H1 in der Mitte, <p> unten).

  Daher:
  - Wenn "Text folgt Überschrift" aktiv ist -> ein gemeinsamer Stack (Cover-ähnlich) via flex/justify-content.
  - Wenn deaktiviert -> beide Elemente werden unabhängig positioniert (absolute), ohne auto-margins.
*/

/* Mode: Text folgt Überschrift (Default) */
.wp-block-ust-hero-slider.is-text-follows-title .ust-hero-slider__content{ display:flex; }
.wp-block-ust-hero-slider.is-text-follows-title.is-title-valign-top .ust-hero-slider__content{ justify-content:flex-start; }
.wp-block-ust-hero-slider.is-text-follows-title.is-title-valign-center .ust-hero-slider__content{ justify-content:center; }
.wp-block-ust-hero-slider.is-text-follows-title.is-title-valign-bottom .ust-hero-slider__content{ justify-content:flex-end; }

/* Mode: getrennte Ausrichtung (Advanced) */
.wp-block-ust-hero-slider:not(.is-text-follows-title) .ust-hero-slider__content{ display:block; }
.wp-block-ust-hero-slider:not(.is-text-follows-title) .ust-hero-slider__content > *{
  position:absolute;
  left:0;
  right:0;
  width:100%;
}

/* Überschrift */
.wp-block-ust-hero-slider:not(.is-text-follows-title).is-title-valign-top .ust-hero-slider__content > *:first-child{ top: calc(var(--header-offset,0px) + 2rem); }
.wp-block-ust-hero-slider:not(.is-text-follows-title).is-title-valign-center .ust-hero-slider__content > *:first-child{ top: 50%; transform: translateY(-50%); }
.wp-block-ust-hero-slider:not(.is-text-follows-title).is-title-valign-bottom .ust-hero-slider__content > *:first-child{ bottom: 2rem; }

/* Text */
.wp-block-ust-hero-slider:not(.is-text-follows-title).is-text-valign-top .ust-hero-slider__content > *:nth-child(2){ top: calc(var(--header-offset,0px) + 2rem); }
.wp-block-ust-hero-slider:not(.is-text-follows-title).is-text-valign-center .ust-hero-slider__content > *:nth-child(2){ top: 50%; transform: translateY(-50%); }
.wp-block-ust-hero-slider:not(.is-text-follows-title).is-text-valign-bottom .ust-hero-slider__content > *:nth-child(2){ bottom: 2rem; }


@media (max-width: 768px){


@media (max-width: 768px){

  /* 1) Hero-Höhe auf Mobile: nicht 90vh, aber auch nicht 0 */
  section.wp-block-ust-hero-slider.ust-hero-slider.is-hero{
    /* eine mobile “Hero-Bühne”, etwa 4:3-ish aus der Breite abgeleitet */
    --ust-min-h: min(75vw, 520px);

    /* falls euer CSS min-height aus der Variable zieht: ok.
       falls es irgendwo später nochmal min-height setzt: damit gewinnen wir sicher */
    min-height: min(75vw, 520px) !important;
  }

  /* 2) Sicherstellen, dass die Slide dieselbe Mindesthöhe bekommt */
  section.wp-block-ust-hero-slider.ust-hero-slider.is-hero .ust-hero-slider__slide{
    min-height: inherit;
  }

  /* 3) Content (Logo/Titel) nicht in den “Bogenbereich” fallen lassen */
  section.wp-block-ust-hero-slider.ust-hero-slider.is-hero .ust-hero-slider__content{
    padding-bottom: clamp(56px, 12vw, 120px);
  }

  /* 4) Falls der Bogen ein eigenes Element ist: Höhe skalieren und unten verankern
        (du musst ggf. den Selector anpassen – siehe Hinweis unten) */
  section.wp-block-ust-hero-slider.ust-hero-slider.is-hero
  :is(.ust-hero-slider__arc, .ust-hero-slider__curve, .ust-hero-slider__bow){
    height: clamp(56px, 12vw, 120px);
    bottom: 0;
  }
}	

  /* Slide wird der Bezugspunkt */
  .ust-hero-slider__slide{
    position: relative;
  }

  /* Media definiert die Fläche */
  .ust-hero-slider__media{
    aspect-ratio: 4 / 3;
    height: auto;          /* wichtig */
    position: relative;    /* falls bisher anders */
    overflow: hidden;      /* optional */
  }

  /* Content overlayt genau diese Fläche */
  .ust-hero-slider__content{
    position: absolute;
    inset: 0;              /* füllt die 4:3 Fläche */
    display: flex;
    align-items: flex-end; /* oder center */
    padding: clamp(16px, 4vw, 28px);
    pointer-events: none;  /* falls du Klicks nur auf Buttons willst: dann Buttons wieder aktivieren */
  }

  .ust-hero-slider__content a,
  .ust-hero-slider__content button{
    pointer-events: auto;
  }

  /* Bild komplett zeigen */
  .ust-hero-slider__media img,
  .ust-hero-slider__media video{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  :root{
    --ust-logo-shift-mobile-offset: 48px;
  }
}