:root{
  --fl-gap-default: 24px;
}

/* Basis */
.fl-frontend .fl-row{
  position: relative;
  margin: 0 0 var(--fl-row-gap, 0px) 0;
}

/* Fullwidth – unabhängig vom Parent-Padding */
.fl-frontend .fl-row-full{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* Wenn der Browser dvw kann: besser (ohne Scrollbar-Versatz) */
@supports (width: 100dvw){
  .fl-frontend .fl-row-full{
    left: 50%;
    right: 50%;
    margin-left: -50dvw;
    margin-right: -50dvw;
    width: 100dvw;
  }
}

/* Background Layers */
.fl-frontend .fl-row-bg,
.fl-frontend .fl-row-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.fl-frontend .fl-row-bg{
  background-color: var(--fl-bg-color, transparent);
  background-image: var(--fl-bg-image, none);
  background-size: var(--fl-bg-size, cover);
  background-position: var(--fl-bg-pos, center);
  background-repeat: var(--fl-bg-repeat, no-repeat);
}

.fl-frontend .fl-row-overlay{
  background-color: var(--fl-bg-overlay-color, transparent);
  opacity: var(--fl-bg-overlay-opacity, 0);
}

/* Layout Container */
.fl-frontend .fl-row-inner{
  position:relative;
  z-index: 1;

  display:flex;
  flex-wrap:wrap;

  /* active vars (Desktop default) */
  --fl-gap-active: var(--fl-gap, var(--fl-gap-default));
  --fl-side-l-active: var(--fl-side-l, 0px);
  --fl-side-r-active: var(--fl-side-r, 0px);

  gap: var(--fl-gap-active);

  padding-top: var(--fl-pad-top, 0px);
  padding-bottom: var(--fl-pad-bottom, 0px);

  width: calc(100% - (var(--fl-side-l-active) + var(--fl-side-r-active)));
  margin-left: var(--fl-side-l-active);
  margin-right: var(--fl-side-r-active);
}

/* Column */
.fl-frontend .fl-col{
  box-sizing:border-box;
  min-width:0;

  order: var(--fl-order, 0);

  flex: 0 0 var(--fl-col-w, 100%);
  max-width: var(--fl-col-w, 100%);
}

/* Anchor helper */
.fl-frontend .fl-anchor{
  display:block;
}

/*
  Responsive Media Queries werden dynamisch von ajax_render.php / SSR ausgegeben:
  <style id="fl-breakpoints"> ... </style>
*/
