/**
 * ============================================================================
 * KuLaDu Design System - Utility Classes
 * ============================================================================
 *
 * Praktische CSS-Utility-Classes basierend auf dem KuLaDu Design System
 *
 * Ähnlich zu Tailwind CSS, aber vollständig auf den KuLaDu-Variablen basierend.
 *
 * Import in WordPress Theme (functions.php):
 * wp_enqueue_style('kuladu-utilities', get_stylesheet_directory_uri() . '/assets/css/design-system/kuladu-utilities.css', array('kuladu-design-system'), '1.0.0');
 *
 * Version: 1.0.0
 * Erstellt: 2025-11-04
 * ============================================================================
 */

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

/* Primary Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-disabled { color: var(--text-disabled); }

/* Text on Colored Backgrounds */
.text-on-primary { color: var(--text-on-primary); }
.text-on-secondary { color: var(--text-on-secondary); }
.text-on-tertiary { color: var(--text-on-tertiary); }
.text-on-dark { color: var(--text-on-dark); }
.text-on-light { color: var(--text-on-light); }

/* Brand Colors as Text */
.text-brand-primary { color: var(--color-primary-600); }
.text-brand-secondary { color: var(--color-secondary-600); }
.text-brand-tertiary { color: var(--color-tertiary-600); }

/* Semantic Text Colors */
.text-success { color: var(--text-success); }
.text-warning { color: var(--text-warning); }
.text-error { color: var(--text-error); }
.text-info { color: var(--text-info); }

/* Neutral Colors */
.text-black { color: var(--color-black); }
.text-white { color: var(--color-white); }

/* ==============================================================================
   BACKGROUND COLORS
   ============================================================================== */

/* Base Backgrounds */
.bg-body { background-color: var(--bg-body); }
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

/* Accent Backgrounds */
.bg-accent-cream { background-color: var(--bg-accent-cream); }
.bg-accent-beige { background-color: var(--bg-accent-beige); }
.bg-accent-light-beige { background-color: var(--bg-accent-light-beige); }
.bg-accent-pink { background-color: var(--bg-accent-pink); }

/* Brand Backgrounds */
.bg-brand-primary { background-color: var(--color-primary-600); }
.bg-brand-primary-light { background-color: var(--bg-primary-light); }
.bg-brand-primary-dark { background-color: var(--bg-primary-dark); }
.bg-brand-secondary { background-color: var(--color-secondary-600); }
.bg-brand-secondary-light { background-color: var(--bg-secondary-light); }

/* Functional Backgrounds */
.bg-elevated { background-color: var(--bg-elevated); }
.bg-sunken { background-color: var(--bg-sunken); }
.bg-hover { background-color: var(--bg-hover); }
.bg-active { background-color: var(--bg-active); }
.bg-disabled { background-color: var(--bg-disabled); }

/* Semantic Backgrounds */
.bg-success { background-color: var(--color-success-bg); }
.bg-warning { background-color: var(--color-warning-bg); }
.bg-error { background-color: var(--color-error-bg); }
.bg-info { background-color: var(--color-info-bg); }

/* Neutral Backgrounds */
.bg-black { background-color: var(--color-black); }
.bg-white { background-color: var(--color-white); }
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }

/* Transparent */
.bg-transparent { background-color: transparent; }

/* ==============================================================================
   SPACING - MARGIN
   ============================================================================== */

/* Margin All Sides */
.m-0 { margin: var(--space-0) !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-10 { margin: var(--space-10) !important; }
.m-12 { margin: var(--space-12) !important; }
.m-16 { margin: var(--space-16) !important; }
.m-20 { margin: var(--space-20) !important; }
.m-24 { margin: var(--space-24) !important; }

/* Margin Auto */
.m-auto { margin: auto !important; }
.mx-auto { margin-left: auto; margin-right: auto !important; }
.my-auto { margin-top: auto; margin-bottom: auto !important; }

/* Margin X-Axis */
.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0) !important; }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4) !important; }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6) !important; }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8) !important; }
.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12) !important; }

/* Margin Y-Axis */
.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0) !important; }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4) !important; }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6) !important; }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8) !important; }
.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12) !important; }

/* Margin Top */
.mt-0 { margin-top: var(--space-0) !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mt-16 { margin-top: var(--space-16) !important; }
.mt-24 { margin-top: var(--space-24) !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: var(--space-0) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }
.mb-16 { margin-bottom: var(--space-16) !important; }
.mb-24 { margin-bottom: var(--space-24) !important; }

/* Margin Left */
.ml-0 { margin-left: var(--space-0) !important; }
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-6 { margin-left: var(--space-6) !important; }
.ml-8 { margin-left: var(--space-8) !important; }
.ml-auto { margin-left: auto !important; }

/* Margin Right */
.mr-0 { margin-right: var(--space-0) !important; }
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-6 { margin-right: var(--space-6) !important; }
.mr-8 { margin-right: var(--space-8) !important; }
.mr-auto { margin-right: auto !important; }

/* ==============================================================================
   SPACING - PADDING
   ============================================================================== */

/* Padding All Sides */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }

/* Padding X-Axis */
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }

/* Padding Y-Axis */
.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }

/* Padding Individual */
.pt-0 { padding-top: var(--space-0); }
.pt-2 { padding-top: var(--space-2); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-24 { padding-top: var(--space-24); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-24 { padding-bottom: var(--space-24); }

.pl-0 { padding-left: var(--space-0); }
.pl-2 { padding-left: var(--space-2); }
.pl-4 { padding-left: var(--space-4); }
.pl-6 { padding-left: var(--space-6); }
.pl-8 { padding-left: var(--space-8); }

.pr-0 { padding-right: var(--space-0); }
.pr-2 { padding-right: var(--space-2); }
.pr-4 { padding-right: var(--space-4); }
.pr-6 { padding-right: var(--space-6); }
.pr-8 { padding-right: var(--space-8); }

/* ==============================================================================
   TYPOGRAPHY
   ============================================================================== */

/**
 * IMPORTANT: ALL Typography utilities have been moved to kuladu-typography.css
 *
 * This includes:
 * - Font families (.font-serif, .font-sans, .font-mono)
 * - Font sizes (.text-xs, .text-sm, .text-base, etc.)
 * - Font weights (.font-normal, .font-bold, .font-black, etc.)
 * - Line heights (.leading-tight, .leading-normal, etc.)
 * - Letter spacing (.tracking-tight, .tracking-wide, etc.)
 * - Text transform (.uppercase, .lowercase, .capitalize)
 * - Specialized styles (.lead, .kicker, .details)
 *
 * Single Source of Truth: web/app/themes/bricks-child/assets/css/design-system/kuladu-typography.css
 */

/* ==============================================================================
   TYPOGRAPHY - TEXT ALIGN
   ============================================================================== */

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

/* ==============================================================================
   TYPOGRAPHY - TEXT DECORATION
   ============================================================================== */

.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* ==============================================================================
   BORDERS
   ============================================================================== */

/* Border Widths */
.border-0 { border-width: var(--border-width-0); }
.border { border-width: var(--border-width-1); }
.border-2 { border-width: var(--border-width-2); }
.border-4 { border-width: var(--border-width-4); }
.border-8 { border-width: var(--border-width-8); }

/* Border Styles */
.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-double { border-style: double; }
.border-none { border-style: none; }

/* Border Colors */
.border-default { border-color: var(--border-color); }
.border-light { border-color: var(--border-color-light); }
.border-medium { border-color: var(--border-color-medium); }
.border-dark { border-color: var(--border-color-dark); }
.border-primary { border-color: var(--border-color-primary); }
.border-secondary { border-color: var(--border-color-secondary); }
.border-error { border-color: var(--border-color-error); }
.border-success { border-color: var(--border-color-success); }

/* Composite Borders (with style and color) */
.border-thin-default { border: var(--border-thin); }
.border-medium-default { border: var(--border-medium); }
.border-thick-default { border: var(--border-thick); }
.border-primary-line { border: var(--border-primary); }
.border-secondary-line { border: var(--border-secondary); }
.border-error-line { border: var(--border-error); }

/* Individual Sides */
.border-t { border-top-width: var(--border-width-1); }
.border-r { border-right-width: var(--border-width-1); }
.border-b { border-bottom-width: var(--border-width-1); }
.border-l { border-left-width: var(--border-width-1); }

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

.rounded-none { border-radius: var(--radius-none); }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded { border-radius: var(--radius-DEFAULT); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-4xl { border-radius: var(--radius-4xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Sprechblasen-Radien */
.rounded-bubble { border-radius: var(--radius-bubble-default); }
.rounded-bubble-reverse { border-radius: var(--radius-bubble-reverse); }
.rounded-bubble-top { border-radius: var(--radius-bubble-top); }
.rounded-bubble-bottom { border-radius: var(--radius-bubble-bottom); }

/* ==============================================================================
   SHADOWS
   ============================================================================== */

/* Harte Schatten */
.shadow-hard-xs { box-shadow: var(--shadow-hard-xs); }
.shadow-hard-sm { box-shadow: var(--shadow-hard-sm); }
.shadow-hard-md { box-shadow: var(--shadow-hard-md); }
.shadow-hard-lg { box-shadow: var(--shadow-hard-lg); }
.shadow-hard-xl { box-shadow: var(--shadow-hard-xl); }
.shadow-hard-2xl { box-shadow: var(--shadow-hard-2xl); }

/* Harte Schatten - Farbig */
.shadow-hard-primary { box-shadow: var(--shadow-hard-primary); }
.shadow-hard-secondary { box-shadow: var(--shadow-hard-secondary); }
.shadow-hard-tertiary { box-shadow: var(--shadow-hard-tertiary); }

/* Weiche Schatten */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-DEFAULT); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-3xl { box-shadow: var(--shadow-3xl); }

/* Inset Shadows */
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-inner-md { box-shadow: var(--shadow-inner-md); }
.shadow-inner-lg { box-shadow: var(--shadow-inner-lg); }

/* Focus Shadows */
.shadow-focus { box-shadow: var(--shadow-focus); }
.shadow-focus-error { box-shadow: var(--shadow-focus-error); }
.shadow-focus-visible { box-shadow: var(--shadow-focus-visible); }

/* No Shadow */
.shadow-none { box-shadow: none; }

/* ==============================================================================
   OPACITY
   ============================================================================== */

.opacity-0 { opacity: var(--opacity-0); }
.opacity-5 { opacity: var(--opacity-5); }
.opacity-10 { opacity: var(--opacity-10); }
.opacity-20 { opacity: var(--opacity-20); }
.opacity-25 { opacity: var(--opacity-25); }
.opacity-30 { opacity: var(--opacity-30); }
.opacity-40 { opacity: var(--opacity-40); }
.opacity-50 { opacity: var(--opacity-50); }
.opacity-60 { opacity: var(--opacity-60); }
.opacity-70 { opacity: var(--opacity-70); }
.opacity-75 { opacity: var(--opacity-75); }
.opacity-80 { opacity: var(--opacity-80); }
.opacity-90 { opacity: var(--opacity-90); }
.opacity-95 { opacity: var(--opacity-95); }
.opacity-100 { opacity: var(--opacity-100); }

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

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.hidden { display: none; }

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

/* Flex Direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Flex Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align Content */
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }

/* Align Self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

/* Flex */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Gap */
.gap-0 { gap: var(--gap-0); }
.gap-1 { gap: var(--gap-1); }
.gap-2 { gap: var(--gap-2); }
.gap-3 { gap: var(--gap-3); }
.gap-4 { gap: var(--gap-4); }
.gap-6 { gap: var(--gap-6); }
.gap-8 { gap: var(--gap-8); }
.gap-10 { gap: var(--gap-10); }
.gap-12 { gap: var(--gap-12); }
.gap-16 { gap: var(--gap-16); }

/* Gap X */
.gap-x-2 { column-gap: var(--gap-2); }
.gap-x-4 { column-gap: var(--gap-4); }
.gap-x-6 { column-gap: var(--gap-6); }
.gap-x-8 { column-gap: var(--gap-8); }

/* Gap Y */
.gap-y-2 { row-gap: var(--gap-2); }
.gap-y-4 { row-gap: var(--gap-4); }
.gap-y-6 { row-gap: var(--gap-6); }
.gap-y-8 { row-gap: var(--gap-8); }

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

/* Grid Template Columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: var(--grid-columns-2); }
.grid-cols-3 { grid-template-columns: var(--grid-columns-3); }
.grid-cols-4 { grid-template-columns: var(--grid-columns-4); }
.grid-cols-6 { grid-template-columns: var(--grid-columns-6); }
.grid-cols-12 { grid-template-columns: var(--grid-columns-12); }

/* Auto-fit Grid */
.grid-auto-fit-xs { grid-template-columns: var(--grid-auto-fit-xs); }
.grid-auto-fit-sm { grid-template-columns: var(--grid-auto-fit-sm); }
.grid-auto-fit-md { grid-template-columns: var(--grid-auto-fit-md); }
.grid-auto-fit-lg { grid-template-columns: var(--grid-auto-fit-lg); }

/* Grid Auto Flow */
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-dense { grid-auto-flow: dense; }

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

/* Width */
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }

/* Max Width */
.max-w-xs { max-width: var(--container-xs); }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-xl { max-width: var(--container-xl); }
.max-w-2xl { max-width: var(--container-2xl); }
.max-w-3xl { max-width: var(--container-3xl); }
.max-w-4xl { max-width: var(--container-4xl); }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }

/* Content Max Width */
.max-w-content-narrow { max-width: var(--content-width-narrow); }
.max-w-content { max-width: var(--content-width-DEFAULT); }
.max-w-content-wide { max-width: var(--content-width-wide); }

/* Height */
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }

/* Min Height */
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

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

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

/* ==============================================================================
   Z-INDEX
   ============================================================================== */

.z-base { z-index: var(--z-base); }
.z-docked { z-index: var(--z-docked); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-banner { z-index: var(--z-banner); }
.z-overlay { z-index: var(--z-overlay); }
.z-modal { z-index: var(--z-modal); }
.z-popover { z-index: var(--z-popover); }
.z-skiplink { z-index: var(--z-skiplink); }
.z-toast { z-index: var(--z-toast); }
.z-tooltip { z-index: var(--z-tooltip); }
.z-notification { z-index: var(--z-notification); }

/* ==============================================================================
   TRANSITIONS
   ============================================================================== */

.transition { transition: var(--transition-all); }
.transition-colors { transition: var(--transition-colors); }
.transition-opacity { transition: var(--transition-opacity); }
.transition-shadow { transition: var(--transition-shadow); }
.transition-transform { transition: var(--transition-transform); }
.transition-none { transition: none; }

/* Component Transitions */
.transition-button { transition: var(--transition-button); }
.transition-card { transition: var(--transition-card); }
.transition-modal { transition: var(--transition-modal); }

/* ==============================================================================
   CURSOR
   ============================================================================== */

.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

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

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* ==============================================================================
   ASPECT RATIO
   ============================================================================== */

.aspect-square { aspect-ratio: var(--aspect-square); }
.aspect-video { aspect-ratio: var(--aspect-video); }
.aspect-cinema { aspect-ratio: var(--aspect-cinema); }
.aspect-portrait { aspect-ratio: var(--aspect-portrait); }
.aspect-landscape { aspect-ratio: var(--aspect-landscape); }
.aspect-ultrawide { aspect-ratio: var(--aspect-ultrawide); }

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

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/* ==============================================================================
   POINTER EVENTS
   ============================================================================== */

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ==============================================================================
   USER SELECT
   ============================================================================== */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ==============================================================================
   RESPONSIVE UTILITIES
   ============================================================================== */

/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==============================================================================
   BACKDROP BLUR
   ============================================================================== */

.backdrop-blur-sm { backdrop-filter: var(--backdrop-blur-sm); }
.backdrop-blur { backdrop-filter: var(--backdrop-blur-DEFAULT); }
.backdrop-blur-md { backdrop-filter: var(--backdrop-blur-md); }
.backdrop-blur-lg { backdrop-filter: var(--backdrop-blur-lg); }
.backdrop-blur-xl { backdrop-filter: var(--backdrop-blur-xl); }
.backdrop-blur-none { backdrop-filter: none; }

/* ==============================================================================
   KULADU CONTENT & CONTAINER UTILITIES
   ============================================================================== */

/* ==========================================================================
   Content Width Utilities (Optimale Lesbarkeit mit ch-Units)
   ========================================================================== */

/* Schmale Textspalten (z.B. Zitate, Sidebar) */
.content-narrow {
	max-width: var(--content-width-narrow); /* 45ch */
	margin-left: auto;
	margin-right: auto;
}

/* Standard Textbreite (OPTIMAL für Fließtext - 65 Zeichen pro Zeile) */
.content-default {
	max-width: var(--content-width-DEFAULT); /* 65ch */
	margin-left: auto;
	margin-right: auto;
}

/* Breitere Texte (für kurze Texte, Headlines) */
.content-wide {
	max-width: var(--content-width-wide); /* 80ch */
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   BRICKS SECTIONS & CONTENT WIDTH (Best Practice UX/UI)
   ========================================================================== */

/**
 * Bricks Sections: KEIN automatisches horizontal Padding
 * Horizontal Padding ist jetzt im Container (.brxe-container)
 * Vertical Padding bleibt in der Section (siehe .padding-top-*, .padding-bottom-*)
 * AUSNAHME: Header und Footer Templates haben KEIN automatisches Padding
 */
.brxe-section {
	padding-left: 0;
	padding-right: 0;
}

/* Alle Media Queries entfernt - Padding ist jetzt im Container */

/* Header/Footer Exceptions nicht mehr nötig - Section hat kein Padding */

/* Hero Sections haben auch kein Padding (wird auf .kuladu-hero__inner übertragen) */
.brxe-section:has(.kuladu-hero) {
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
   CONTAINER PADDING (Horizontal - responsiv)
   Neues System: Padding im Container statt Section
   ========================================================================== */

/**
 * Bricks Container: Responsives horizontal Padding
 * Mobile: 12px → Tablet: 24px → Desktop: 32px → Large: 40px
 */
.brxe-container {
	padding-left: var(--space-3);  /* 12px Mobile */
	padding-right: var(--space-3);
}

@media (min-width: 768px) {
	.brxe-container {
		padding-left: var(--space-6);  /* 24px Tablet */
		padding-right: var(--space-6);
	}
}

@media (min-width: 1024px) {
	.brxe-container {
		padding-left: var(--space-8);  /* 32px Desktop */
		padding-right: var(--space-8);
	}
}

@media (min-width: 1440px) {
	.brxe-container {
		padding-left: var(--space-10); /* 40px Large Desktop */
		padding-right: var(--space-10);
	}
}

/* Exception: Container mit Hero-Element hat KEIN Padding (Hero hat eigenes Padding-System) */
.brxe-container:has(.kuladu-hero) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ==========================================================================
   HEADER - Verhält sich wie normale Sections
   ========================================================================== */

/**
 * WICHTIG: Header nutzt das Standard Section/Container-System
 * - Padding kommt von .brxe-container (Zeilen 779-803)
 * - Max-width kommt von content-width Klassen (z.B. .content-wide)
 * - KEINE Sonderbehandlung mehr nötig!
 */

/* Fallback: Sections OHNE Container bekommen auch Padding */
/* DEAKTIVIERT - Bei Bedarf wieder aktivieren */
/*
.brxe-section > *:not(.brxe-container):not(.kuladu-hero) {
	padding-left: var(--space-3);  /* 12px Mobile */
	padding-right: var(--space-3);
}

@media (min-width: 768px) {
	.brxe-section > *:not(.brxe-container):not(.kuladu-hero) {
		padding-left: var(--space-6);  /* 24px Tablet */
		padding-right: var(--space-6);
	}
}

@media (min-width: 1024px) {
	.brxe-section > *:not(.brxe-container):not(.kuladu-hero) {
		padding-left: var(--space-8);  /* 32px Desktop */
		padding-right: var(--space-8);
	}
}

@media (min-width: 1440px) {
	.brxe-section > *:not(.brxe-container):not(.kuladu-hero) {
		padding-left: var(--space-10); /* 40px Large Desktop */
		padding-right: var(--space-10);
	}
}
*/

/**
 * HERO PADDING: Moved to hero.css (Priority 30)
 * Hero-Content horizontal padding now defined directly in components/hero.css
 * to avoid CSS load-order conflicts
 */

/* Hero Inner übernimmt Content-Width der Section (genau wie normale Section-Children) */
.brxe-section.content-narrow .kuladu-hero__inner > * {
	max-width: 640px !important;  /* reduziert von 768px */
	margin-left: auto;
	margin-right: auto;
}

.brxe-section.content-default .kuladu-hero__inner > * {
	max-width: 1024px !important; /* reduziert von 1280px */
	margin-left: auto;
	margin-right: auto;
}

.brxe-section.content-extended .kuladu-hero__inner > * {
	max-width: 1280px !important; /* reduziert von 1600px */
	margin-left: auto;
	margin-right: auto;
}

.brxe-section.content-wide .kuladu-hero__inner > * {
	max-width: 1440px !important; /* reduziert von 1920px */
	margin-left: auto;
	margin-right: auto;
}

.brxe-section.content-full .kuladu-hero__inner > * {
	max-width: none !important;
}

/**
 * Content Width Presets (nur max-width auf Children, zentriert)
 * Die Klasse wird auf die Section angewendet, aber die Breite nur auf Children
 * So bleibt die Section-Hintergrundfarbe full-width, aber der Inhalt ist begrenzt
 */

/* WICHTIG: Section selbst muss IMMER 100% breit sein */
.brxe-section.content-narrow,
.brxe-section.content-default,
.brxe-section.content-extended,
.brxe-section.content-wide,
.brxe-section.content-full {
	max-width: none !important;
	width: 100% !important;
}

/* Narrow (640px) - optimal für Text-Inhalte (max. 75 Zeichen/Zeile) */
.brxe-section.content-narrow > * {
	width: 100%;
	max-width: 640px !important;  /* reduziert von 768px */
	margin-left: auto;
	margin-right: auto;
}

/* Default (1024px) - Standard für gemischte Inhalte */
.brxe-section.content-default > * {
	width: 100%;
	max-width: 1024px !important; /* reduziert von 1280px */
	margin-left: auto;
	margin-right: auto;
}

/* Extended (1280px) - Zwischen Default und Wide */
.brxe-section.content-extended > * {
	width: 100%;
	max-width: 1280px !important; /* reduziert von 1600px */
	margin-left: auto;
	margin-right: auto;
}

/* Wide (1440px) - für Galerien/breite Layouts */
.brxe-section.content-wide > * {
	width: 100%;
	max-width: 1440px !important; /* reduziert von 1920px */
	margin-left: auto;
	margin-right: auto;
}

/* Full Width (100%) - keine Beschränkung */
.brxe-section.content-full > * {
	width: 100%;
	max-width: none !important;
}

/* WICHTIG: Elemente die ein Hero enthalten müssen NACH den Content-Width-Regeln kommen um sie zu überschreiben */
.brxe-section > *:has(.kuladu-hero) {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ==========================================================================
   SECTION PADDING (Top/Bottom) - Responsive & Getrennt konfigurierbar
   WICHTIG: Header/Footer Sections sind ausgenommen (kein automatisches Padding)
   WICHTIG: Hero Sections → Padding auf .kuladu-hero__inner (nicht auf Section)
   ========================================================================== */

/* === PADDING TOP === */

/* None */
.brxe-section.padding-top-none:not(header .brxe-section) {
	padding-top: 0 !important;
}

/* Small - 40px mobile → 64px desktop */
.brxe-section.padding-top-small:not(header .brxe-section) {
	padding-top: var(--space-10); /* 40px */
}

@media (min-width: 1024px) {
	.brxe-section.padding-top-small:not(header .brxe-section) {
		padding-top: var(--space-16); /* 64px */
	}
}

/* Medium - 64px mobile → 96px desktop (DEFAULT) */
.brxe-section.padding-top-medium:not(header .brxe-section) {
	padding-top: var(--space-16); /* 64px */
}

@media (min-width: 1024px) {
	.brxe-section.padding-top-medium:not(header .brxe-section) {
		padding-top: var(--space-24); /* 96px */
	}
}

/* Large - 96px mobile → 128px desktop */
.brxe-section.padding-top-large:not(header .brxe-section) {
	padding-top: var(--space-24); /* 96px */
}

@media (min-width: 1024px) {
	.brxe-section.padding-top-large:not(header .brxe-section) {
		padding-top: var(--space-32); /* 128px */
	}
}

/* Extra Large - 128px mobile → 160px desktop */
.brxe-section.padding-top-xl:not(header .brxe-section) {
	padding-top: var(--space-32); /* 128px */
}

@media (min-width: 1024px) {
	.brxe-section.padding-top-xl:not(header .brxe-section) {
		padding-top: var(--space-40); /* 160px */
	}
}

/* === PADDING BOTTOM === */

/* None */
.brxe-section.padding-bottom-none:not(header .brxe-section) {
	padding-bottom: 0 !important;
}

/* Small - 40px mobile → 64px desktop */
.brxe-section.padding-bottom-small:not(header .brxe-section) {
	padding-bottom: var(--space-10); /* 40px */
}

@media (min-width: 1024px) {
	.brxe-section.padding-bottom-small:not(header .brxe-section) {
		padding-bottom: var(--space-16); /* 64px */
	}
}

/* Medium - 64px mobile → 96px desktop (DEFAULT) */
.brxe-section.padding-bottom-medium:not(header .brxe-section) {
	padding-bottom: var(--space-16); /* 64px */
}

@media (min-width: 1024px) {
	.brxe-section.padding-bottom-medium:not(header .brxe-section) {
		padding-bottom: var(--space-24); /* 96px */
	}
}

/* Large - 96px mobile → 128px desktop */
.brxe-section.padding-bottom-large:not(header .brxe-section) {
	padding-bottom: var(--space-24); /* 96px */
}

@media (min-width: 1024px) {
	.brxe-section.padding-bottom-large:not(header .brxe-section) {
		padding-bottom: var(--space-32); /* 128px */
	}
}

/* Extra Large - 128px mobile → 160px desktop */
.brxe-section.padding-bottom-xl:not(header .brxe-section) {
	padding-bottom: var(--space-32); /* 128px */
}

@media (min-width: 1024px) {
	.brxe-section.padding-bottom-xl:not(header .brxe-section) {
		padding-bottom: var(--space-40); /* 160px */
	}
}

/* === HERO SPECIAL CASE: Padding auf .kuladu-hero__inner statt Section === */

/* Hero Sections haben kein Padding (wird auf inner übertragen) */
.brxe-section:has(.kuladu-hero) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Hero Inner: Padding Top */
.brxe-section.padding-top-none .kuladu-hero__inner { padding-top: 0 !important; }

.brxe-section.padding-top-small .kuladu-hero__inner { padding-top: var(--space-10); }
@media (min-width: 1024px) {
	.brxe-section.padding-top-small .kuladu-hero__inner { padding-top: var(--space-16); }
}

.brxe-section.padding-top-medium .kuladu-hero__inner { padding-top: var(--space-16); }
@media (min-width: 1024px) {
	.brxe-section.padding-top-medium .kuladu-hero__inner { padding-top: var(--space-24); }
}

.brxe-section.padding-top-large .kuladu-hero__inner { padding-top: var(--space-24); }
@media (min-width: 1024px) {
	.brxe-section.padding-top-large .kuladu-hero__inner { padding-top: var(--space-32); }
}

.brxe-section.padding-top-xl .kuladu-hero__inner { padding-top: var(--space-32); }
@media (min-width: 1024px) {
	.brxe-section.padding-top-xl .kuladu-hero__inner { padding-top: var(--space-40); }
}

/* Hero Inner: Padding Bottom */
.brxe-section.padding-bottom-none .kuladu-hero__inner { padding-bottom: 0 !important; }

.brxe-section.padding-bottom-small .kuladu-hero__inner { padding-bottom: var(--space-10); }
@media (min-width: 1024px) {
	.brxe-section.padding-bottom-small .kuladu-hero__inner { padding-bottom: var(--space-16); }
}

.brxe-section.padding-bottom-medium .kuladu-hero__inner { padding-bottom: var(--space-16); }
@media (min-width: 1024px) {
	.brxe-section.padding-bottom-medium .kuladu-hero__inner { padding-bottom: var(--space-24); }
}

.brxe-section.padding-bottom-large .kuladu-hero__inner { padding-bottom: var(--space-24); }
@media (min-width: 1024px) {
	.brxe-section.padding-bottom-large .kuladu-hero__inner { padding-bottom: var(--space-32); }
}

.brxe-section.padding-bottom-xl .kuladu-hero__inner { padding-bottom: var(--space-32); }
@media (min-width: 1024px) {
	.brxe-section.padding-bottom-xl .kuladu-hero__inner { padding-bottom: var(--space-40); }
}

/* ==========================================================================
   DEPRECATED: Alte Container-Klassen (auskommentiert, können gelöscht werden)
   ========================================================================== */

/*
.container-narrow {
	max-width: var(--container-narrow);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}

.container-content {
	width: 100%;
	max-width: var(--container-content);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}

.container-wide {
	max-width: var(--container-wide);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}

@media (min-width: 768px) {
	.container-narrow,
	.container-content,
	.container-wide {
		padding-left: var(--space-8);
		padding-right: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.container-narrow,
	.container-content,
	.container-wide {
		padding-left: var(--space-10);
		padding-right: var(--space-10);
	}
}
*/

/* ==============================================================================
   END OF UTILITY CLASSES
   ============================================================================== */