.elementor-1772 .elementor-element.elementor-element-dbb03e8{--display:flex;--justify-content:flex-start;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1772 .elementor-element.elementor-element-cdea5bd{--display:flex;}/* Start custom CSS for container, class: .elementor-element-dbb03e8 *//* 1. Globale Variablen (am besten im Customizer > Zusätzliches CSS) */
:root {
  --hdr-height: 0px; /* Wird durch JS dynamisch gesetzt */
  --cookie-offset: 0px; /* Wird durch JS dynamisch gesetzt */
}

/* 2. Hauptcontainer (.wpvr-below-header) */
.wpvr-below-header {
  display: flex;
  flex-direction: column;
  padding: 0!important;
  margin: 0!important;
  /* Fallback für ältere Browser, die dvh nicht kennen */
  min-height: calc(100vh - var(--hdr-height) - var(--cookie-offset));
  overflow: hidden;
}

/* 3. DIE LÖSUNG FÜR MOBILE GERÄTE: dvh (Dynamic Viewport Height) */
/* Dies wird von modernen Browsern verwendet und passt sich an die UI-Leisten an */
@supports (min-height: 100dvh) {
.wpvr-below-header {
    min-height: calc(100dvh - var(--hdr-height) - var(--cookie-offset));
  }
}

/* 4. KRITISCH: Erzwingen der 100% Höhe und Breite für ALLE Kind-Elemente */
.wpvr-below-header >.elementor-widget-wrap,
.wpvr-below-header.elementor-widget-container,
.wpvr-below-header.wpvr-main-wrapper,
.wpvr-below-header.wpvr-embed-responsive,
.wpvr-below-header.wpvr-viewer,
.wpvr-below-header iframe {
  width: 100%!important;
  height: 100%!important;
  flex-grow: 1; /* Füllt den verfügbaren Platz im Flex-Container */
  margin: 0!important;
  padding: 0!important;
  border: none;
  display: flex;
  flex-direction: column;
}/* End custom CSS */