/* =========================================
   Helpers / Utility Classes – MM Stimme Modern
   ========================================= */

/* =========================================
   Spacing Utilities
   ========================================= */

/* Margin */
.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-60 { margin-top: 60px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-60 { margin-bottom: 60px !important; }

/* Padding */
.pt-0 { padding-top: 0 !important; }
.pt-20 { padding-top: 20px !important; }
.pt-40 { padding-top: 40px !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-40 { padding-bottom: 40px !important; }

/* =========================================
   Flex Utilities
   ========================================= */

.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }

.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-around { display: flex; justify-content: space-around; align-items: center; }

.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }

.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-end { justify-content: flex-end !important; }

.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }

/* Gap */
.gap-10 { gap: 10px !important; }
.gap-20 { gap: 20px !important; }
.gap-30 { gap: 30px !important; }

/* =========================================
   Grid Utilities
   ========================================= */

.grid { display: grid !important; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* =========================================
   Text Utilities
   ========================================= */

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.text-primary { color: var(--ci-primary) !important; }
.text-accent { color: var(--ci-accent) !important; }
.text-gray { color: var(--ci-gray) !important; }

/* =========================================
   Visibility Utilities
   ========================================= */

.hidden { display: none !important; }
.visible { display: block !important; }

@media (max-width: 768px) {
    .hidden-md { display: none !important; }
    .visible-md { display: block !important; }
}

@media (max-width: 480px) {
    .hidden-sm { display: none !important; }
    .visible-sm { display: block !important; }
}

/* =========================================
   Width Utilities
   ========================================= */

.w-100 { width: 100% !important; }
.w-50 { width: 50% !important; }
.w-auto { width: auto !important; }

/* =========================================
   Background Utilities
   ========================================= */

.bg-primary { background: var(--ci-primary) !important; color: #fff !important; }
.bg-accent { background: var(--ci-accent) !important; color: #fff !important; }
.bg-light { background: #f8f8f8 !important; }

/* =========================================
   Border Utilities
   ========================================= */

.rounded { border-radius: var(--radius) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: 999px !important; }

.border { border: 1px solid rgba(0,0,0,0.1) !important; }
.border-accent { border: 2px solid var(--ci-accent) !important; }

/* =========================================
   Shadow Utilities
   ========================================= */

.shadow { box-shadow: var(--shadow) !important; }
.shadow-none { box-shadow: none !important; }

/* =========================================
   Cursor Utilities
   ========================================= */

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }