/* =====================================================
   HELPER / UTILITY CLASSES
   Atomic, wiederverwendbare Klassen für Elementor
   und custom HTML-Elemente.

   WICHTIG: CSS Custom Properties funktionieren NICHT
   in @media-Queries. Breakpoints immer als px angeben.
   sm=576px | md=768px | lg=1024px | xl=1280px
===================================================== */


/* =====================================================
   DISPLAY
===================================================== */

.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-grid         { display: grid !important; }


/* =====================================================
   FLEXBOX
===================================================== */

.flex-row    { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1      { flex: 1; }
.flex-auto   { flex: auto; }
.flex-shrink-0 { flex-shrink: 0; }

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

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }


/* =====================================================
   GRID
===================================================== */

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }


/* =====================================================
   GAP
===================================================== */

.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs); }
.gap-s   { gap: var(--space-s); }
.gap-m   { gap: var(--space-m); }
.gap-l   { gap: var(--space-l); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }


/* =====================================================
   SPACING – MARGIN
===================================================== */

.m-0  { margin: 0 !important; }
.mx-auto { margin-inline: auto; }

.mt-xs  { margin-top: var(--space-xs); }
.mt-s   { margin-top: var(--space-s); }
.mt-m   { margin-top: var(--space-m); }
.mt-l   { margin-top: var(--space-l); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-xs  { margin-bottom: var(--space-xs); }
.mb-s   { margin-bottom: var(--space-s); }
.mb-m   { margin-bottom: var(--space-m); }
.mb-l   { margin-bottom: var(--space-l); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }


/* =====================================================
   SPACING – PADDING
===================================================== */

.p-0  { padding: 0 !important; }
.p-s  { padding: var(--space-s); }
.p-m  { padding: var(--space-m); }
.p-l  { padding: var(--space-l); }
.p-xl { padding: var(--space-xl); }

.py-s  { padding-block: var(--space-s); }
.py-m  { padding-block: var(--space-m); }
.py-l  { padding-block: var(--space-l); }
.py-xl { padding-block: var(--space-xl); }

.px-s  { padding-inline: var(--space-s); }
.px-m  { padding-inline: var(--space-m); }
.px-l  { padding-inline: var(--space-l); }
.px-xl { padding-inline: var(--space-xl); }


/* =====================================================
   TEXT
===================================================== */

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

.text-primary   { color: var(--color-primary) !important; }
.text-muted     { color: var(--text-muted); }
.text-dark      { color: var(--text-dark) !important; }
.text-light     { color: var(--text-light) !important; }

.text-uppercase { text-transform: uppercase; }
.text-bold      { font-weight: var(--fw-bold); }
.text-black     { font-weight: var(--fw-black); }
.text-small     { font-size: var(--fs-small); }


/* =====================================================
   BACKGROUNDS
===================================================== */

.bg-dark    { background-color: var(--bg-dark); }
.bg-darker  { background-color: var(--color-black); }
.bg-card    { background-color: var(--bg-card); }
.bg-primary { background-color: var(--bg-primary); }
.bg-light   { background-color: var(--bg-light); }

/* Texte in dunklen Sections automatisch hell */
.bg-dark *,
.bg-darker * {
    color: var(--text-light);
}

/* Ausnahmen aus Elementor heraus überschreiben */
body .bg-dark .elementor-widget-heading .elementor-heading-title,
body .bg-darker .elementor-widget-heading .elementor-heading-title {
    color: var(--text-light);
}


/* =====================================================
   WIDTH / HEIGHT
===================================================== */

.w-100  { width: 100%; }
.w-auto { width: auto; }
.h-100  { height: 100%; }
.h-auto { height: auto; }

.max-w-container {
    max-width: var(--container);
    margin-inline: auto;
}


/* =====================================================
   POSITION
===================================================== */

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed    { position: fixed; }
.position-sticky   { position: sticky; }

.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.inset-0  { inset: 0; }


/* =====================================================
   OVERFLOW
===================================================== */

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-hidden { overflow-x: hidden; }


/* =====================================================
   BORDER & RADIUS
===================================================== */

.rounded-s { border-radius: var(--radius-s); }
.rounded   { border-radius: var(--radius); }
.rounded-l { border-radius: var(--radius-l); }
.rounded-full { border-radius: 9999px; }


/* =====================================================
   OBJECT FIT
===================================================== */

.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }


/* =====================================================
   ACCESSIBILITY
===================================================== */

.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* =====================================================
   RESPONSIVE – sm (>= 576px)
===================================================== */

@media (min-width: 576px) {
    .d-sm-none  { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex  { display: flex !important; }

    .flex-sm-row    { flex-direction: row; }
    .flex-sm-column { flex-direction: column; }

    .text-sm-left   { text-align: left; }
    .text-sm-center { text-align: center; }

    .grid-sm-2 { grid-template-columns: repeat(2, 1fr); }
}


/* =====================================================
   RESPONSIVE – md (>= 768px)
===================================================== */

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

    .flex-md-row    { flex-direction: row; }
    .flex-md-column { flex-direction: column; }

    .text-md-left   { text-align: left; }
    .text-md-center { text-align: center; }

    .grid-md-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-md-3 { grid-template-columns: repeat(3, 1fr); }
}


/* =====================================================
   RESPONSIVE – lg (>= 1024px)
===================================================== */

@media (min-width: 1024px) {
    .d-lg-none  { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex  { display: flex !important; }

    .flex-lg-row    { flex-direction: row; }
    .flex-lg-column { flex-direction: column; }

    .grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
}


/* =====================================================
   RESPONSIVE – xl (>= 1280px)
===================================================== */

@media (min-width: 1280px) {
    .d-xl-none { display: none !important; }
    .d-xl-flex { display: flex !important; }

    .grid-xl-4 { grid-template-columns: repeat(4, 1fr); }
}