/* Flexbox Layout Skeleton (Global) */

*, *::before, *::after {
    box-sizing: border-box;
}

[x-cloak] { display: none !important; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    color: var(--color-text);
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: 400
}

p {
    margin: 0;
    padding: 5px 0;
    font-weight: 300;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100%;
    margin: 0 auto;
}

.site-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.site-header {
    display: flex;
    flex-direction: column;
}

.site-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.site-main > .site-container {
    flex-grow: 1;
}

.site-footer {
    display: flex;
    flex-direction: column;
}

/* Default Padding for Containers within Slots */
.site-header .site-container,
.site-main .site-container,
.site-footer .site-container,
.site-main:not(:has(.site-container)) {
    padding: 0;
}

/* Layout Variations */
.layout-full-width .site-wrapper {
    max-width: 100% !important;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.site-sidebar {
    padding: var(--spacing-m);
}


/* Utilities */
.u-display-flex { display: flex; }
.u-display-block { display: block; }
.u-display-none { display: none; }

.u-flex-column { flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-1 { flex: 1; }
.u-flex-2 { flex: 2; }
.u-flex-3 { flex: 3; }

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

.u-align-items-center { align-items: center; }

.u-width-100, .u-w-full { width: 100%; }

.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-text-bold { font-weight: bold; }
.u-text-small { font-size: 0.875rem; }
.u-text-xs { font-size: 0.75rem; }
.u-text-light { color: oklch(0.95 0 0) !important; }
.u-text-muted { opacity: 0.6; }

.u-margin-bottom-xs { margin-bottom: var(--spacing-xs); }
.u-margin-bottom-s { margin-bottom: var(--spacing-s); }
.u-margin-bottom-m { margin-bottom: var(--spacing-m); }
.u-margin-bottom-l { margin-bottom: var(--spacing-l); }
.u-margin-top-xs { margin-top: var(--spacing-xs); }
.u-margin-top-s { margin-top: var(--spacing-s); }
.u-margin-top-m { margin-top: var(--spacing-m); }
.u-margin-top-l { margin-top: var(--spacing-l); }
.u-margin-top-xl { margin-top: var(--spacing-xl); }

.u-rotate-90 { transform: rotate(90deg); }
.u-transition-all { transition: all 0.2s ease-in-out; }
.u-cursor-pointer { cursor: pointer; }

.u-gap-xs { gap: var(--spacing-xs); }
.u-gap-s { gap: var(--spacing-s); }
.u-gap-m { gap: var(--spacing-m); }
.u-gap-l { gap: var(--spacing-l); }
.u-gap-10 { gap: 10px; }
.u-gap-20 { gap: 20px; }

.u-padding-m { padding: var(--spacing-xl); } /* Angepasst an das Warenkorb-Verständnis von padding-m */

.u-max-width-xs {
    max-width: 400px !important;
}

.u-padding-v-xl {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
}

.u-margin-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.sticky-sidebar {
    position: sticky;
    top: var(--spacing-xl);
}