/**
 * ContentBlocks Debug Global CSS
 * Globale CSS-Klassen für das modulare Debug-System
 * Diese Klassen werden von allen Debug-Modulen verwendet
 */

/* 📏 Erweiterte Margin/Padding-Klassen */
.m-35 { margin: 2.1875rem !important; }
.m-40 { margin: 2.5rem !important; }
.m-45 { margin: 2.8125rem !important; }
.m-50 { margin: 3.125rem !important; }
.m-60 { margin: 3.75rem !important; }
.m-70 { margin: 4.375rem !important; }
.m-80 { margin: 5rem !important; }

.p-35 { padding: 2.1875rem !important; }
.p-40 { padding: 2.5rem !important; }
.p-45 { padding: 2.8125rem !important; }
.p-50 { padding: 3.125rem !important; }
.p-60 { padding: 3.75rem !important; }
.p-70 { padding: 4.375rem !important; }
.p-80 { padding: 5rem !important; }

/* 🔲 Erweiterte Border-Stärke-Klassen */
.border-thin { border-width: 1px !important; }
.border-medium { border-width: 2px !important; }
.border-thick { border-width: 3px !important; }
.border-1 { border-width: 1px !important; border-style: solid !important; }
.border-2 { border-width: 2px !important; border-style: solid !important; }
.border-3 { border-width: 3px !important; border-style: solid !important; }
.border-4 { border-width: 4px !important; border-style: solid !important; }
.border-5 { border-width: 5px !important; border-style: solid !important; }

/* 🔲 Erweiterte Border-Klassen (aus Carousel CSS hierher verschoben) */
.border-none { border: none !important; }

/* ⭕ Erweiterte Rounded-Klassen */
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: 0.25rem !important; }
.rounded {/* border-radius: 0.375rem !important; */}
.rounded-md { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-3xl { border-radius: 1.5rem !important; }
.rounded-circle { border-radius: 50% !important; }

/* 🌟 Erweiterte Shadow-Klassen */
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.shadow {/* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; */}
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
.shadow-xl { box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.15) !important; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }

/* 🎨 Erweiterte Background-Klassen */
.bg-transparent { background-color: transparent !important; }
.bg-white { background-color: #ffffff !important; }
.bg-light {/* background-color: #f8f9fa !important; */}
.bg-dark { background-color: #212529 !important; }
.bg-primary { background-color: #0d6efd !important; }
.bg-secondary { background-color: #6c757d !important; }
.bg-success { background-color: #198754 !important; }
.bg-danger { background-color: #dc3545 !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-info { background-color: #0dcaf0 !important; }

/* 🔲 Erweiterte Border-Color-Klassen */
.border-primary { border-color: #0d6efd !important; }
.border-secondary { border-color: #6c757d !important; }
.border-success { border-color: #198754 !important; }
.border-danger { border-color: #dc3545 !important; }
.border-warning { border-color: #ffc107 !important; }
.border-info { border-color: #0dcaf0 !important; }
.border-light { border-color: #f8f9fa !important; }
.border-dark { border-color: #212529 !important; }

/* 🏠 Cherito Hausfarben Border */
.border-cherito-base { border-color: var(--cherito-base) !important; }
.border-cherito-primary { border-color: var(--cherito-primary) !important; }
.border-cherito-orange { border-color: var(--cherito-orange) !important; }
.border-cherito-accent { border-color: var(--cherito-accent) !important; }
.border-cherito-secondary { border-color: var(--cherito-secondary) !important; }
.border-cherito-white2 { border-color: var(--cherito-white2) !important; }
.border-cherito-white4 { border-color: var(--cherito-white4) !important; }

/* 📏 Erweiterte Height-Klassen */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.vh-25 { height: 25vh !important; }
.vh-50 { height: 50vh !important; }
.vh-75 { height: 75vh !important; }
.vh-100 { height: 100vh !important; }
.min-vh-25 { min-height: 25vh !important; }
.min-vh-50 { min-height: 50vh !important; }
.min-vh-75 { min-height: 75vh !important; }
.min-vh-100 { min-height: 100vh !important; }

/* 🎭 WOW Animation Klassen */
.wow { visibility: hidden; }
.wow.animated { visibility: visible; }

/* 📱 Responsive Utilities */
@media (max-width: 575.98px) {
    .m-sm-35 { margin: 2.1875rem !important; }
    .m-sm-40 { margin: 2.5rem !important; }
    .m-sm-45 { margin: 2.8125rem !important; }
    .m-sm-50 { margin: 3.125rem !important; }
    .m-sm-60 { margin: 3.75rem !important; }
    .m-sm-70 { margin: 4.375rem !important; }
    .m-sm-80 { margin: 5rem !important; }
    
    .p-sm-35 { padding: 2.1875rem !important; }
    .p-sm-40 { padding: 2.5rem !important; }
    .p-sm-45 { padding: 2.8125rem !important; }
    .p-sm-50 { padding: 3.125rem !important; }
    .p-sm-60 { padding: 3.75rem !important; }
    .p-sm-70 { padding: 4.375rem !important; }
    .p-sm-80 { padding: 5rem !important; }
}

/* ✅ Globale Debug-Field Ultra-Kompaktes Layout */
.cb-debug-field {
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cb-debug-field label {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    color: #333 !important;
    flex: 1 !important;
    font-size: 12px !important;
}

.cb-debug-field input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.cb-debug-field input[type="text"],
.cb-debug-field select {
    width: 63% !important;
    padding: 4px 6px !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    transition: border-color 0.3s ease !important;
}

/* ✅ Globale Reset-Button Styling - Erzwungen */
.cb-debug-field button {
    width: 100% !important;
    padding: 6px 12px !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
}

.cb-debug-field button:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* ✅ Spezielle Checkbox-Felder ohne Label - Ultra-Kompakt */
.cb-debug-field.checkbox-field {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
}

.cb-debug-field.checkbox-field label {
    margin-bottom: 0 !important;
    flex: 1 !important;
    font-size: 12px !important;
}

.cb-debug-field.checkbox-field input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* ✅ Globale Debug-Sektionen Ultra-Kompakt */
.cb-debug-section {
    margin-bottom: 6px !important;
    padding: 6px !important;
    background: #f8f9fa !important;
    border-radius: 3px !important;
    border-left: 3px solid #007bff !important;
}

.cb-debug-section h5 {
    margin: 0 0 4px 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.cb-debug-section h6 {
    margin: 0 0 3px 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #555 !important;
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .m-md-35 { margin: 2.1875rem !important; }
    .m-md-40 { margin: 2.5rem !important; }
    .m-md-45 { margin: 2.8125rem !important; }
    .m-md-50 { margin: 3.125rem !important; }
    .m-md-60 { margin: 3.75rem !important; }
    .m-md-70 { margin: 4.375rem !important; }
    .m-md-80 { margin: 5rem !important; }
    
    .p-md-35 { padding: 2.1875rem !important; }
    .p-md-40 { padding: 2.5rem !important; }
    .p-md-45 { padding: 2.8125rem !important; }
    .p-md-50 { padding: 3.125rem !important; }
    .p-md-60 { padding: 3.75rem !important; }
    .p-md-70 { padding: 4.375rem !important; }
    .p-md-80 { padding: 5rem !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .m-lg-35 { margin: 2.1875rem !important; }
    .m-lg-40 { margin: 2.5rem !important; }
    .m-lg-45 { margin: 2.8125rem !important; }
    .m-lg-50 { margin: 3.125rem !important; }
    .m-lg-60 { margin: 3.75rem !important; }
    .m-lg-70 { margin: 4.375rem !important; }
    .m-lg-80 { margin: 5rem !important; }
    
    .p-lg-35 { padding: 2.1875rem !important; }
    .p-lg-40 { padding: 2.5rem !important; }
    .p-lg-45 { padding: 2.8125rem !important; }
    .p-lg-50 { padding: 3.125rem !important; }
    .p-lg-60 { padding: 3.75rem !important; }
    .p-lg-70 { padding: 4.375rem !important; }
    .p-lg-80 { padding: 5rem !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .m-xl-35 { margin: 2.1875rem !important; }
    .m-xl-40 { margin: 2.5rem !important; }
    .m-xl-45 { margin: 2.8125rem !important; }
    .m-xl-50 { margin: 3.125rem !important; }
    .m-xl-60 { margin: 3.75rem !important; }
    .m-xl-70 { margin: 4.375rem !important; }
    .m-xl-80 { margin: 5rem !important; }
    
    .p-xl-35 { padding: 2.1875rem !important; }
    .p-xl-40 { padding: 2.5rem !important; }
    .p-xl-45 { padding: 2.8125rem !important; }
    .p-xl-50 { padding: 3.125rem !important; }
    .p-xl-60 { padding: 3.75rem !important; }
    .p-xl-70 { padding: 4.375rem !important; }
    .p-xl-80 { padding: 5rem !important; }
}

@media (min-width: 1200px) {
    .m-xxl-35 { margin: 2.1875rem !important; }
    .m-xxl-40 { margin: 2.5rem !important; }
    .m-xxl-45 { margin: 2.8125rem !important; }
    .m-xxl-50 { margin: 3.125rem !important; }
    .m-xxl-60 { margin: 3.75rem !important; }
    .m-xxl-70 { margin: 4.375rem !important; }
    .m-xxl-80 { margin: 5rem !important; }
    
    .p-xxl-35 { padding: 2.1875rem !important; }
    .p-xxl-40 { padding: 2.5rem !important; }
    .p-xxl-45 { padding: 2.8125rem !important; }
    .p-xxl-50 { padding: 3.125rem !important; }
    .p-xxl-60 { padding: 3.75rem !important; }
    .p-xxl-70 { padding: 4.375rem !important; }
    .p-xxl-80 { padding: 5rem !important; }
}