/*
  FRAME SPACING - TYPO3 Appearance System
  Definiert Abstände für "Space Before" und "Space After"
*/

/* ========================================
   SPACE BEFORE
   ======================================== */
.frame-space-before-none {
  margin-top: 0 !important;
}

.frame-space-before-extra-small {
  margin-top: var(--spacing-xs) !important;  /* 10px */
}

.frame-space-before-small {
  margin-top: var(--spacing-sm) !important;  /* 20px */
}

.frame-space-before-medium {
  margin-top: var(--spacing-md) !important;  /* 30px */
}

.frame-space-before-large {
  margin-top: var(--spacing-lg) !important;  /* 40px */
}

.frame-space-before-extra-large {
  margin-top: var(--spacing-xl) !important;  /* 60px */
}

.frame-space-before-huge {
  margin-top: var(--spacing-xxl) !important;  /* 100px */
}

/* Lichtweisheit-spezifisch: 6rem */
.frame-space-before-lichtweisheit {
  margin-top: 6rem !important;  /* 96px */
}

/* ========================================
   SPACE AFTER
   ======================================== */
.frame-space-after-none {
  margin-bottom: 0 !important;
}

.frame-space-after-extra-small {
  margin-bottom: var(--spacing-xs) !important;  /* 10px */
}

.frame-space-after-small {
  margin-bottom: var(--spacing-sm) !important;  /* 20px */
}

.frame-space-after-medium {
  margin-bottom: var(--spacing-md) !important;  /* 30px */
}

.frame-space-after-large {
  margin-bottom: var(--spacing-lg) !important;  /* 40px */
}

.frame-space-after-extra-large {
  margin-bottom: var(--spacing-xl) !important;  /* 60px */
}

.frame-space-after-huge {
  margin-bottom: var(--spacing-xxl) !important;  /* 100px */
}

/* Lichtweisheit-spezifisch: 6rem */
.frame-space-after-lichtweisheit {
  margin-bottom: 6rem !important;  /* 96px */
}

/* ========================================
   RESPONSIVE SPACING
   ======================================== */
@media (max-width: 900px) {
  /* Auf Mobile: Große Abstände reduzieren */
  .frame-space-before-extra-large,
  .frame-space-before-lichtweisheit {
    margin-top: var(--spacing-lg) !important;  /* 40px statt 60-96px */
  }

  .frame-space-after-extra-large,
  .frame-space-after-lichtweisheit {
    margin-bottom: var(--spacing-lg) !important;  /* 40px statt 60-96px */
  }

  .frame-space-before-huge {
    margin-top: var(--spacing-xl) !important;  /* 60px statt 100px */
  }

  .frame-space-after-huge {
    margin-bottom: var(--spacing-xl) !important;  /* 60px statt 100px */
  }
}

@media (max-width: 560px) {
  /* Auf sehr kleinen Screens: Noch kompakter */
  .frame-space-before-large,
  .frame-space-before-extra-large,
  .frame-space-before-lichtweisheit {
    margin-top: var(--spacing-md) !important;  /* 30px */
  }

  .frame-space-after-large,
  .frame-space-after-extra-large,
  .frame-space-after-lichtweisheit {
    margin-bottom: var(--spacing-md) !important;  /* 30px */
  }

  .frame-space-before-huge {
    margin-top: var(--spacing-lg) !important;  /* 40px */
  }

  .frame-space-after-huge {
    margin-bottom: var(--spacing-lg) !important;  /* 40px */
  }
}