/* 
   Standard Utilities System
   Version: 1.0
   =========================================== */

/* 
   1. Abstände
   ---------- */
/* Margin */
.std-m-0 { margin: 0 !important; }
.std-m-1 { margin: 0.25rem !important; }
.std-m-2 { margin: 0.5rem !important; }
.std-m-3 { margin: 1rem !important; }
.std-m-4 { margin: 1.5rem !important; }
.std-m-5 { margin: 3rem !important; }

/* Margin Top */
.std-mt-0 { margin-top: 0 !important; }
.std-mt-1 { margin-top: 0.25rem !important; }
.std-mt-2 { margin-top: 0.5rem !important; }
.std-mt-3 { margin-top: 1rem !important; }
.std-mt-4 { margin-top: 1.5rem !important; }
.std-mt-5 { margin-top: 3rem !important; }

/* Margin Bottom */
.std-mb-0 { margin-bottom: 0 !important; }
.std-mb-1 { margin-bottom: 0.25rem !important; }
.std-mb-2 { margin-bottom: 0.5rem !important; }
.std-mb-3 { margin-bottom: 1rem !important; }
.std-mb-4 { margin-bottom: 1.5rem !important; }
.std-mb-5 { margin-bottom: 3rem !important; }

/* Padding */
.std-p-0 { padding: 0 !important; }
.std-p-1 { padding: 0.25rem !important; }
.std-p-2 { padding: 0.5rem !important; }
.std-p-3 { padding: 1rem !important; }
.std-p-4 { padding: 1.5rem !important; }
.std-p-5 { padding: 3rem !important; }

/* 
   2. Text-Ausrichtung
   ------------------ */
.text-left, .std-text-left { text-align: left !important; }
.text-center, .std-text-center { text-align: center !important; }
.text-right, .std-text-right { text-align: right !important; }

/* 
   3. Text-Farben
   ------------- */
.text-primary, .std-text-primary { color: #077386 !important; }
.text-secondary, .std-text-secondary { color: var(--color-secondary) !important; }
.text-white, .std-text-white { color: white !important; }

/* 
   4. Hintergründe
   -------------- */
.bg-primary, .std-bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary, .std-bg-secondary { background-color: var(--color-secondary) !important; }
.bg-light, .std-bg-light { background-color: var(--color-accent) !important; }
.bg-white, .std-bg-white { background-color: white !important; }

/* 
   5. Display & Position
   ------------------- */
.d-none, .std-d-none { display: none !important; }
.d-block, .std-d-block { display: block !important; }
.d-flex, .std-d-flex { display: flex !important; }
.d-inline, .std-d-inline { display: inline !important; }
.d-inline-block, .std-d-inline-block { display: inline-block !important; }

.position-relative, .std-position-relative { position: relative !important; }
.position-absolute, .std-position-absolute { position: absolute !important; }
.position-fixed, .std-position-fixed { position: fixed !important; }

/* 
   6. Flex Utilities
   --------------- */
.flex-row, .std-flex-row { flex-direction: row !important; }
.flex-column, .std-flex-column { flex-direction: column !important; }
.justify-content-start, .std-justify-content-start { justify-content: flex-start !important; }
.justify-content-center, .std-justify-content-center { justify-content: center !important; }
.justify-content-end, .std-justify-content-end { justify-content: flex-end !important; }
.justify-content-between, .std-justify-content-between { justify-content: space-between !important; }
.align-items-start, .std-align-items-start { align-items: flex-start !important; }
.align-items-center, .std-align-items-center { align-items: center !important; }
.align-items-end, .std-align-items-end { align-items: flex-end !important; }

/* 
   7. Sichtbarkeit
   -------------- */
.visible, .std-visible { visibility: visible !important; }
.invisible, .std-invisible { visibility: hidden !important; }

/* 
   8. Overflow
   ---------- */
.overflow-auto, .std-overflow-auto { overflow: auto !important; }
.overflow-hidden, .std-overflow-hidden { overflow: hidden !important; }
.overflow-visible, .std-overflow-visible { overflow: visible !important; }

/* 
   9. Schatten
   ---------- */
.shadow-sm, .std-shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
.shadow, .std-shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; }
.shadow-lg, .std-shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important; }
.shadow-none, .std-shadow-none { box-shadow: none !important; }

/* 
   10. Responsive Utilities
   ---------------------- */
@media (max-width: 576px) {
    .d-sm-none, .std-d-sm-none { display: none !important; }
    .d-sm-block, .std-d-sm-block { display: block !important; }
    .d-sm-flex, .std-d-sm-flex { display: flex !important; }
}

@media (max-width: 768px) {
    .d-md-none, .std-d-md-none { display: none !important; }
    .d-md-block, .std-d-md-block { display: block !important; }
    .d-md-flex, .std-d-md-flex { display: flex !important; }
}

@media (max-width: 992px) {
    .d-lg-none, .std-d-lg-none { display: none !important; }
    .d-lg-block, .std-d-lg-block { display: block !important; }
    .d-lg-flex, .std-d-lg-flex { display: flex !important; }
}

@media (max-width: 1200px) {
    .d-xl-none, .std-d-xl-none { display: none !important; }
    .d-xl-block, .std-d-xl-block { display: block !important; }
    .d-xl-flex, .std-d-xl-flex { display: flex !important; }
}