/**
 * Noble Frontend Display - CSS
 * 
 * Dark Mode Design mit Noble Atlas Corporate Identity
 * Farben: Gold #dbc16d, Emerald #01221c
 * Typography: Inter (Body), Playfair Display (Headlines)
 * 
 * @package Noble_Frontend_Display
 * @since 1.0.0
 */

/* 🔥 CRITICAL: Design Tokens werden über WordPress wp_enqueue_style geladen, nicht über @import!
 * @import blockiert CSS-Laden und hat falsche Pfade.
 * Design Tokens werden als Dependency in noble-frontend-display.php geladen.
 * @import url('../../noble-admin-framework/assets/css/noble-design-tokens.css'); // ENTFERNT
 */

/* Fallback: Wenn Design Tokens nicht verfügbar sind, verwende lokale Variablen */
@supports not (--css: variables) {
    /* Fallback für sehr alte Browser */
}

/* ========================================
   GLOBAL STYLES
   ======================================== */
   
/* Force Dark Mode on body - Elegant Gradient */
body.noble-frontend-page,
body.noble-dark-mode,
.noble-frontend-page,
.noble-dark-mode {
    background: linear-gradient(135deg, 
        #0d0d0d 0%,
        #0f1612 25%,
        #0a2820 50%,
        #073a2f 75%,
        #01221c 100%) !important;
    background-attachment: fixed !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    font-weight: 400;
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ========================================
   FIX: DOUBLE SCROLLBAR (Front Page)
   ----------------------------------------
   In einigen Divi-Konstellationen (Theme Builder / Smooth Scroll / Custom CSS)
   wird aus Versehen ein zweiter Scroll-Container erzeugt (z.B. #page-container
   oder #main-content mit height: 100vh + overflow-y: auto/scroll).
   Ergebnis: zweite vertikale Scrollbar neben der Browser-Scrollbar.
   
   Diese Regel stellt sicher, dass auf der Startseite nur der Browser scrollt.
   ======================================== */
body.home.noble-frontend-page #page-container,
body.home.noble-frontend-page #main-content,
body.home.noble-frontend-page #et-main-area,
body.home.noble-frontend-page #et-boc {
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* Extra-hardening for Divi Theme Builder wrappers (can become scroll containers) */
body.home.noble-frontend-page .et-l,
body.home.noble-frontend-page .et-l--body,
body.home.noble-frontend-page .et_builder_inner_content,
body.home.noble-frontend-page .et_pb_section,
body.home.noble-frontend-page .et_pb_row,
body.home.noble-frontend-page .et_pb_column {
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* Noble Atlas Headlines */
h1, h2, h3, h4, h5, h6,
.sedcard-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.sedcard-title {
    font-weight: 700;
}

/* Override Divi/Theme backgrounds - Transparent für Gradient */
body.noble-frontend-page #page-container,
body.noble-frontend-page #main-content,
body.noble-frontend-page .et_pb_section {
    background: transparent !important;
}

.noble-frontend-archive,
.noble-frontend-single {
    min-height: 100vh;
    padding: var(--spacing-lg) var(--spacing-md);
    padding-top: calc(var(--spacing-lg) + 100px); /* Platz für Theme Header */
    background: transparent !important;
}

/* Noble Header: avoid extra viewport overflow on archive/single */
body.noble-custom-header-active .noble-frontend-archive,
body.noble-custom-header-active .noble-frontend-single {
    min-height: 0;
    padding-top: 88px;
}

@media (max-width: 1023px) {
    body.noble-custom-header-active .noble-frontend-archive,
    body.noble-custom-header-active .noble-frontend-single {
        min-height: 0;
        padding-top: 64px;
    }
}

.archive-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1; /* Über Theme Header */
}

/* ========================================
   ARCHIVE HEADER
   ======================================== */
.archive-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-xl) 0;
}

.archive-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--noble-gold);
    margin: 0 0 var(--spacing-sm) 0;
    text-shadow: 0 2px 8px rgba(219, 193, 109, 0.3);
}

.archive-description {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ========================================
   FILTER BAR
   ======================================== */
.noble-filter-bar {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-md);
}

.filter-bar-inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Quick Filters */
.quick-filters {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.filter-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 2px solid transparent;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-btn:hover {
    background: var(--bg-hover);
    border-color: var(--noble-gold);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--noble-emerald), var(--noble-emerald-light));
    border-color: var(--noble-gold);
    color: var(--noble-gold);
}

.filter-btn .status-dot {
    width: 10px;
    height: 10px;
    background: var(--status-online);
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Filter Controls */
.filter-controls {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.filter-control {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 200px;
}

/* Filter Control with Icon (PLZ Search) */
.filter-control-with-icon {
    position: relative;
}

.search-icon-suffix {
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--noble-gold);
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
    transition: all 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.filter-input-with-icon {
    padding-right: 80px !important; /* Space for icon + locate button */
}

.filter-input,
.filter-select {
    flex: 1;
    background: var(--bg-card);
    border: 2px solid var(--bg-tertiary);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    transition: all var(--transition-normal);
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--noble-gold);
    box-shadow: 0 0 0 3px rgba(219, 193, 109, 0.1);
}

.filter-input:focus ~ .search-icon-suffix {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* Icon buttons removed - cleaner interface */

/* Detail Search Toggle Button (Burger Menu) */
.btn-detail-search {
    background: linear-gradient(135deg, var(--noble-emerald), var(--noble-emerald-light));
    border: 2px solid var(--noble-gold);
    color: var(--noble-gold);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.btn-detail-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(219, 193, 109, 0.3);
    border-color: var(--noble-white-gold);
}

.btn-detail-search.active {
    background: linear-gradient(135deg, var(--noble-gold), var(--noble-white-gold));
    color: var(--noble-emerald);
    border-color: var(--noble-white-gold);
}

.btn-detail-search .btn-icon {
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.btn-detail-search.active .btn-icon {
    transform: rotate(90deg);
}

.btn-detail-search .btn-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}

/* Detail Search Expandable Panel */
.detail-search-panel {
    background: linear-gradient(135deg, rgba(1, 34, 28, 0.05) 0%, rgba(1, 34, 28, 0.02) 100%);
    border: 2px solid rgba(219, 193, 109, 0.3);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-md);
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
    box-shadow: 0 4px 20px rgba(219, 193, 109, 0.15);
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 2000px;
        transform: translateY(0);
    }
}

.detail-search-inner {
    padding: var(--spacing-lg);
    border: none !important;
    border-color: transparent !important;
}

.detail-search-inner h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    color: var(--noble-gold);
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid rgba(219, 193, 109, 0.3);
    font-weight: 600;
}

/* Filter Tabs - KEIN WEIß */
.filter-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    border: none !important;
    border-bottom: 2px solid rgba(219, 193, 109, 0.2) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    overflow-x: auto;
}

.filter-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.filter-tab:hover {
    color: var(--noble-gold);
    background: rgba(219, 193, 109, 0.05);
}

.filter-tab.active {
    color: var(--noble-gold);
    border-bottom-color: var(--noble-gold);
    background: rgba(219, 193, 109, 0.1);
}

/* Filter Tab Content - KEIN WEIß */
.filter-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-out;
    border: none !important;
    border-color: transparent !important;
}

.filter-tab-content.active {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    border: none !important;
    border-color: transparent !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Detail Search Form - Grid removed, now handled by tab-content */
#noble-detail-search-form {
    border: none !important;
    border-color: transparent !important;
}

.detail-search-panel .filter-group {
    margin-bottom: 0;
    border: none !important;
    border-color: transparent !important;
}

.detail-search-panel .filter-group label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border: none !important;
    border-color: transparent !important;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-size: 0.95rem;
}

.detail-search-panel .filter-select,
.detail-search-panel select,
.filter-tab-content select,
#noble-detail-search-form select {
    width: 100%;
    background: var(--bg-card) !important;
    border: 2px solid rgba(26, 26, 26, 0.8) !important;
    color: var(--text-primary) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.95rem !important;
    transition: all var(--transition-normal) !important;
}

.detail-search-panel .filter-select:focus,
.detail-search-panel select:focus,
.filter-tab-content select:focus,
#noble-detail-search-form select:focus {
    outline: none !important;
    border-color: var(--noble-gold) !important;
    box-shadow: 0 0 0 3px rgba(219, 193, 109, 0.1) !important;
}

/* Select Options - KEIN WEIß */
.detail-search-panel select option,
.filter-tab-content select option,
#noble-detail-search-form select option {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: none !important;
    border-color: transparent !important;
}

.detail-search-panel .range-inputs,
.filter-tab-content .range-inputs,
.range-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border: none !important;
    border-color: transparent !important;
}

.detail-search-panel .range-inputs input,
.filter-tab-content .range-inputs input,
#noble-detail-search-form input[type="number"] {
    flex: 1;
    background: var(--bg-card) !important;
    border: 2px solid rgba(26, 26, 26, 0.8) !important;
    color: var(--text-primary) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.95rem !important;
    transition: all var(--transition-normal) !important;
}

.detail-search-panel .range-inputs input:focus,
.filter-tab-content .range-inputs input:focus,
#noble-detail-search-form input[type="number"]:focus {
    outline: none !important;
    border-color: var(--noble-gold) !important;
    box-shadow: 0 0 0 3px rgba(219, 193, 109, 0.1) !important;
}

.detail-search-panel .range-inputs span {
    color: var(--text-secondary);
    font-weight: 500;
}

.detail-search-panel .checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-sm);
    background: transparent !important;
}

/* ALLE TAB CHECKBOXEN - Noble CI (SEHR DUNKEL, HOHER KONTRAST) */
#noble-detail-search-form .checkbox-label,
.detail-search-panel .checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: #000000 !important;
    border: 2px solid rgba(219, 193, 109, 0.6) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    position: relative !important;
}

#noble-detail-search-form .checkbox-label:hover,
.detail-search-panel .checkbox-label:hover {
    background: #01221c !important;
    border-color: #dbc16d !important;
    transform: translateX(4px) !important;
    box-shadow: 0 0 12px rgba(219, 193, 109, 0.25) !important;
}

#noble-detail-search-form .checkbox-label input[type="checkbox"],
.detail-search-panel .checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 2px solid rgba(219, 193, 109, 0.5) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

#noble-detail-search-form .checkbox-label input[type="checkbox"]:hover,
.detail-search-panel .checkbox-label input[type="checkbox"]:hover {
    border-color: rgba(219, 193, 109, 0.7) !important;
}

#noble-detail-search-form .checkbox-label input[type="checkbox"]:checked,
.detail-search-panel .checkbox-label input[type="checkbox"]:checked {
    background: #dbc16d !important;
    border-color: #dbc16d !important;
    box-shadow: 0 0 8px rgba(219, 193, 109, 0.6) !important;
}

#noble-detail-search-form .checkbox-label input[type="checkbox"]:checked:after,
.detail-search-panel .checkbox-label input[type="checkbox"]:checked:after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #000000 !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

#noble-detail-search-form .checkbox-label:has(input[type="checkbox"]:checked),
.detail-search-panel .checkbox-label:has(input[type="checkbox"]:checked) {
    background: rgba(219, 193, 109, 0.15) !important;
    border-color: #dbc16d !important;
    box-shadow: 0 0 0 2px rgba(219, 193, 109, 0.6), inset 0 0 15px rgba(219, 193, 109, 0.1) !important;
}

#noble-detail-search-form .checkbox-label span,
.detail-search-panel .checkbox-label span {
    font-size: 0.9rem !important;
    color: #e8e8e8 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    font-family: 'Inter', sans-serif !important;
    background: none !important;
}

#noble-detail-search-form .checkbox-label:hover span,
.detail-search-panel .checkbox-label:hover span {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

#noble-detail-search-form .checkbox-label:has(input[type="checkbox"]:checked) span,
.detail-search-panel .checkbox-label:has(input[type="checkbox"]:checked) span {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 0 10px rgba(219, 193, 109, 0.4) !important;
}

/* ============================================================================
   MEGA GLOBAL OVERRIDE - ENTFERNT ALLE WEIßEN BORDERS VON ALLEN ELEMENTEN
   ============================================================================ */

/* ULTIMATIVER OVERRIDE - ALLE BORDERS AUF KRÄFTIGES GOLD */
.detail-search-panel *,
.detail-search-inner *,
.filter-tabs *,
.filter-tab *,
.filter-tab-content *,
#noble-detail-search-form *,
.filter-group *,
.checkbox-group *,
.checkbox-group,
label.checkbox-label,
label.checkbox-label * {
    border-color: rgba(219, 193, 109, 0.6) !important;
}

/* Container ohne Borders - TRANSPARENT BACKGROUNDS */
.detail-search-panel,
.detail-search-inner,
.filter-tabs,
#noble-detail-search-form,
.filter-tab-content,
.filter-group,
.checkbox-group,
.range-inputs,
.detail-search-actions {
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: transparent !important;
}

/* SPEZIFISCH: Arbeitsort Checkboxen - KRÄFTIGES GOLD */
label.checkbox-label {
    border: 2px solid rgba(219, 193, 109, 0.6) !important;
    border-top-color: rgba(219, 193, 109, 0.6) !important;
    border-left-color: rgba(219, 193, 109, 0.6) !important;
    border-right-color: rgba(219, 193, 109, 0.6) !important;
    border-bottom-color: rgba(219, 193, 109, 0.6) !important;
}

label.checkbox-label input[type="checkbox"] {
    border: 2px solid rgba(219, 193, 109, 0.5) !important;
    border-top-color: rgba(219, 193, 109, 0.5) !important;
    border-left-color: rgba(219, 193, 109, 0.5) !important;
    border-right-color: rgba(219, 193, 109, 0.5) !important;
    border-bottom-color: rgba(219, 193, 109, 0.5) !important;
}

/* ============================================================================
   ULTRA-SPEZIFISCHER GLOBAL OVERRIDE - ENTFERNT ALLE WEIßEN BORDERS
   ============================================================================ */

/* Überschreibt ALLE Checkbox-Styles im gesamten Filter-System */
.detail-search-panel input[type="checkbox"],
.filter-tab-content input[type="checkbox"],
#noble-detail-search-form input[type="checkbox"],
.checkbox-group input[type="checkbox"],
input[type="checkbox"].filter-checkbox,
.noble-filter input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 2px solid rgba(219, 193, 109, 0.5) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    width: 18px !important;
    height: 18px !important;
    position: relative !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.detail-search-panel input[type="checkbox"]:checked,
.filter-tab-content input[type="checkbox"]:checked,
#noble-detail-search-form input[type="checkbox"]:checked,
.checkbox-group input[type="checkbox"]:checked,
input[type="checkbox"].filter-checkbox:checked,
.noble-filter input[type="checkbox"]:checked {
    background: #dbc16d !important;
    border-color: #dbc16d !important;
    box-shadow: 0 0 8px rgba(219, 193, 109, 0.6) !important;
}

.detail-search-panel input[type="checkbox"]:checked:after,
.filter-tab-content input[type="checkbox"]:checked:after,
#noble-detail-search-form input[type="checkbox"]:checked:after,
.checkbox-group input[type="checkbox"]:checked:after,
input[type="checkbox"].filter-checkbox:checked:after,
.noble-filter input[type="checkbox"]:checked:after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #000000 !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* ============================================================================
   SERVICES TAB - Noble Atlas CI (2 Spalten, DUNKEL, HOHER KONTRAST)
   ============================================================================ */

/* Services Filter Group Container - VOLLE BREITE, 2 SPALTEN */
#noble-detail-search-form .filter-tab-content[data-content="services"] .services-filter-group {
    background: transparent !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    column-gap: 20px !important;
    width: 100% !important;
}

#noble-detail-search-form .services-filter-group > label {
    display: none !important;
}

/* Service Category Container - DUNKEL mit Gold-Akzent */
#noble-detail-search-form .service-category {
    margin: 0 !important;
    padding: 12px 14px !important;
    background: #0d0d0d !important;
    border: 1px solid rgba(219, 193, 109, 0.4) !important;
    border-left: 3px solid #dbc16d !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Service Category Title - GOLD, HOHER KONTRAST */
#noble-detail-search-form .service-category-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #dbc16d !important;
    margin: 0 0 10px 0 !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 2px solid rgba(219, 193, 109, 0.4) !important;
    background: none !important;
    text-shadow: 0 0 10px rgba(219, 193, 109, 0.3) !important;
}

/* Checkbox Group - Flexbox Column */
#noble-detail-search-form .service-category .checkbox-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: none !important;
}

/* Checkbox Label - SEHR DUNKEL, KEIN WEISS */
#noble-detail-search-form .service-category .checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    background: #000000 !important;
    border: 1px solid rgba(219, 193, 109, 0.3) !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    position: relative !important;
}

#noble-detail-search-form .service-category .checkbox-label:hover {
    background: #01221c !important;
    border-color: #dbc16d !important;
    transform: translateX(4px) !important;
    box-shadow: 0 0 12px rgba(219, 193, 109, 0.25) !important;
}

/* Checked State - Gold-Glow */
#noble-detail-search-form .service-category .checkbox-label:has(input[type="checkbox"]:checked) {
    background: rgba(219, 193, 109, 0.15) !important;
    border-color: #dbc16d !important;
    box-shadow: 0 0 0 2px rgba(219, 193, 109, 0.6), inset 0 0 15px rgba(219, 193, 109, 0.1) !important;
}

/* Checkbox Input - KEIN WEIß, VEREINFACHTES CUSTOM STYLING */
#noble-detail-search-form .service-category .checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 2px solid rgba(219, 193, 109, 0.5) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

#noble-detail-search-form .service-category .checkbox-label input[type="checkbox"]:hover {
    border-color: rgba(219, 193, 109, 0.7) !important;
}

#noble-detail-search-form .service-category .checkbox-label input[type="checkbox"]:checked {
    background: #dbc16d !important;
    border-color: #dbc16d !important;
    box-shadow: 0 0 8px rgba(219, 193, 109, 0.6) !important;
}

#noble-detail-search-form .service-category .checkbox-label input[type="checkbox"]:checked:after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #000000 !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* Label Text - HOHER KONTRAST */
#noble-detail-search-form .service-category .checkbox-label span {
    font-size: 0.9rem !important;
    color: #e8e8e8 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    font-family: 'Inter', sans-serif !important;
    background: none !important;
}

#noble-detail-search-form .service-category .checkbox-label:hover span {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

#noble-detail-search-form .service-category .checkbox-label:has(input[type="checkbox"]:checked) span {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 0 10px rgba(219, 193, 109, 0.4) !important;
}

/* Scrollbares Services-Tab */
#noble-detail-search-form .filter-tab-content[data-content="services"] {
    max-height: 550px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 10px !important;
    background: none !important;
}

/* Gold Scrollbar */
#noble-detail-search-form .filter-tab-content[data-content="services"]::-webkit-scrollbar {
    width: 8px !important;
}

#noble-detail-search-form .filter-tab-content[data-content="services"]::-webkit-scrollbar-track {
    background: #0d0d0d !important;
    border-radius: 4px !important;
}

#noble-detail-search-form .filter-tab-content[data-content="services"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #dbc16d 0%, #c9ad5c 100%) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(1, 34, 28, 0.3) !important;
}

#noble-detail-search-form .filter-tab-content[data-content="services"]::-webkit-scrollbar-thumb:hover {
    background: #dbc16d !important;
    box-shadow: 0 0 8px rgba(219, 193, 109, 0.5) !important;
}

.detail-search-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    border-top: 2px solid rgba(219, 193, 109, 0.2) !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
}

/* Active Filters */
.active-filters {
    border-top: 1px solid var(--bg-tertiary);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.active-filters-inner {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
}

.btn-clear-filters {
    background: transparent;
    border: 1px solid var(--noble-gold);
    color: var(--noble-gold);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all var(--transition-normal);
}

.btn-clear-filters:hover {
    background: var(--noble-gold);
    color: var(--noble-emerald);
}

/* ========================================
   SEDCARD GRID
   ======================================== */
.noble-sedcard-grid-wrapper {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md) 0; /* Mehr Padding für moderneres Look */
}

/* 🔥 ULTRA-SPEZIFISCHE SELEKTOREN FÜR DIVI-OVERRIDE */
.noble-sedcard-grid,
body .noble-sedcard-grid,
body.noble-frontend-page .noble-sedcard-grid,
.noble-sedcard-grid-wrapper .noble-sedcard-grid,
body .noble-sedcard-grid-wrapper .noble-sedcard-grid,
body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid,
div.noble-sedcard-grid,
div[class*="noble-sedcard-grid"],
#main-content .noble-sedcard-grid,
#main-content .noble-sedcard-grid-wrapper .noble-sedcard-grid,
.et_pb_section .noble-sedcard-grid,
.et_pb_row .noble-sedcard-grid,
.et_pb_column .noble-sedcard-grid,
.et_pb_column .noble-sedcard-grid-wrapper .noble-sedcard-grid,
.et_pb_row .noble-sedcard-grid-wrapper .noble-sedcard-grid,
.et_pb_section .noble-sedcard-grid-wrapper .noble-sedcard-grid,
body #main-content .noble-sedcard-grid,
body #main-content .noble-sedcard-grid-wrapper .noble-sedcard-grid,
body .et_pb_column .noble-sedcard-grid,
body .et_pb_row .noble-sedcard-grid,
body .et_pb_section .noble-sedcard-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important; /* 🔥 CRITICAL: Cards oben ausrichten, nicht dehnen */
    gap: 32px !important; /* Größerer Abstand für moderneres Look */
    row-gap: 32px !important; /* Explizit row-gap setzen */
    column-gap: 32px !important; /* Explizit column-gap setzen */
    margin: 0 0 var(--spacing-xl) 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important; /* Linksbündig für bessere Kontrolle */
    /* FORCE override Divi CSS Grid - Disable ALL grid properties */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    grid-auto-flow: unset !important;
    grid-auto-columns: unset !important;
    grid-auto-rows: unset !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 0 !important;
}

/* Sedcard Card Styling - Direct Children */
/* 🔥 ULTRA-SPEZIFISCHE SELEKTOREN FÜR CARDS - DIVI-OVERRIDE */
.noble-sedcard-grid > .sedcard-card,
body .noble-sedcard-grid > .sedcard-card,
body.noble-frontend-page .noble-sedcard-grid > .sedcard-card,
.noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
div.noble-sedcard-grid > .sedcard-card,
div.noble-sedcard-grid > div.sedcard-card,
#main-content .noble-sedcard-grid > .sedcard-card,
#main-content .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
.et_pb_section .noble-sedcard-grid > .sedcard-card,
.et_pb_row .noble-sedcard-grid > .sedcard-card,
.et_pb_column .noble-sedcard-grid > .sedcard-card,
.et_pb_column .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
.et_pb_row .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
.et_pb_section .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
body #main-content .noble-sedcard-grid > .sedcard-card,
body #main-content .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
body .et_pb_column .noble-sedcard-grid > .sedcard-card,
body .et_pb_row .noble-sedcard-grid > .sedcard-card,
body .et_pb_section .noble-sedcard-grid > .sedcard-card {
    flex: 0 0 calc(25% - 24px) !important; /* 4 columns: 25% minus gap-compensation (32px gap / 4 = 8px per side) */
    width: calc(25% - 24px) !important; /* EXPLICIT width for proper sizing */
    min-width: calc(25% - 24px) !important; /* Ensure minimum width */
    max-width: calc(25% - 24px) !important;
    box-sizing: border-box !important;
    /* 🔥 CRITICAL: Margins als Fallback, da Gap von Divi überschrieben wird */
    margin-right: 32px !important;
    margin-bottom: 32px !important;
    /* Disable grid properties on cards */
    grid-column: unset !important;
    grid-row: unset !important;
    grid-area: unset !important;
    grid-column-start: unset !important;
    grid-column-end: unset !important;
    grid-row-start: unset !important;
    grid-row-end: unset !important;
}

/* Remove margin-right from every 4th card (last in row) */
.noble-sedcard-grid > .sedcard-card:nth-child(4n),
body .noble-sedcard-grid > .sedcard-card:nth-child(4n),
body.noble-frontend-page .noble-sedcard-grid > .sedcard-card:nth-child(4n),
.noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(4n),
body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(4n),
body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(4n),
div.noble-sedcard-grid > .sedcard-card:nth-child(4n),
div.noble-sedcard-grid > div.sedcard-card:nth-child(4n),
#main-content .noble-sedcard-grid > .sedcard-card:nth-child(4n),
#main-content .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(4n),
.et_pb_section .noble-sedcard-grid > .sedcard-card:nth-child(4n),
.et_pb_row .noble-sedcard-grid > .sedcard-card:nth-child(4n),
.et_pb_column .noble-sedcard-grid > .sedcard-card:nth-child(4n),
.et_pb_column .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(4n),
.et_pb_row .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(4n),
.et_pb_section .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(4n),
body #main-content .noble-sedcard-grid > .sedcard-card:nth-child(4n),
body #main-content .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(4n),
body .et_pb_column .noble-sedcard-grid > .sedcard-card:nth-child(4n),
body .et_pb_row .noble-sedcard-grid > .sedcard-card:nth-child(4n),
body .et_pb_section .noble-sedcard-grid > .sedcard-card:nth-child(4n) {
    margin-right: 0 !important;
}

.noble-sedcard-grid[data-columns="3"] .sedcard-card {
    flex: 0 0 33.333% !important; /* 3 columns */
    max-width: 33.333% !important;
}

.noble-sedcard-grid[data-columns="5"] .sedcard-card {
    flex: 0 0 20% !important; /* 5 columns */
    max-width: 20% !important;
}

/* Responsive */
@media (max-width: 1400px) {
    .noble-sedcard-grid {
        gap: 28px !important;
    }
    .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid > .sedcard-card,
    .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > div.sedcard-card {
        flex: 0 0 calc(33.333% - 19px) !important; /* 3 columns: 33.333% minus gap-compensation */
        width: calc(33.333% - 19px) !important;
        min-width: calc(33.333% - 19px) !important;
        max-width: calc(33.333% - 19px) !important;
        margin-right: 28px !important;
        margin-bottom: 28px !important;
    }
    
    /* Remove margin-right from every 3rd card (last in row) */
    .noble-sedcard-grid > .sedcard-card:nth-child(3n),
    body .noble-sedcard-grid > .sedcard-card:nth-child(3n),
    body.noble-frontend-page .noble-sedcard-grid > .sedcard-card:nth-child(3n),
    .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(3n),
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(3n),
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(3n),
    div.noble-sedcard-grid > .sedcard-card:nth-child(3n),
    div.noble-sedcard-grid > div.sedcard-card:nth-child(3n) {
        margin-right: 0 !important;
    }
}

@media (max-width: 1024px) {
    .noble-sedcard-grid {
        gap: 24px !important;
    }
    .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid > .sedcard-card,
    .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > div.sedcard-card {
        flex: 0 0 calc(50% - 12px) !important; /* 2 columns */
        width: calc(50% - 12px) !important;
        min-width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        margin-right: 24px !important;
        margin-bottom: 24px !important;
    }
    
    /* Remove margin-right from every 2nd card (last in row) */
    .noble-sedcard-grid > .sedcard-card:nth-child(2n),
    body .noble-sedcard-grid > .sedcard-card:nth-child(2n),
    body.noble-frontend-page .noble-sedcard-grid > .sedcard-card:nth-child(2n),
    .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(2n),
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(2n),
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card:nth-child(2n),
    div.noble-sedcard-grid > .sedcard-card:nth-child(2n),
    div.noble-sedcard-grid > div.sedcard-card:nth-child(2n) {
        margin-right: 0 !important;
    }
}

@media (max-width: 768px) {
    .noble-sedcard-grid,
    body .noble-sedcard-grid,
    body.noble-frontend-page .noble-sedcard-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        grid-template-columns: none !important; /* Wichtig: Override Divi */
    }
    
    .noble-sedcard-grid .sedcard-wrapper,
    .noble-sedcard-grid .sedcard-card,
    body .noble-sedcard-grid .sedcard-wrapper,
    body .noble-sedcard-grid .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid .sedcard-wrapper,
    body.noble-frontend-page .noble-sedcard-grid .sedcard-card {
        /* t5: Mobile Suche bleibt 2-spaltig */
        flex: 0 0 calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
        min-width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}

/* ========================================
   SEDCARD CARD - MODERN REDESIGN
   ======================================== */
.sedcard-card {
    background: linear-gradient(135deg, 
        rgba(30, 30, 30, 0.95) 0%,
        rgba(26, 26, 26, 0.98) 100%);
    border-radius: 20px !important; /* Modernere, größere Border-Radius */
    overflow: hidden !important; /* Cleaner Look */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth, modern transition */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.05) inset !important; /* Subtile, moderne Schatten */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    min-height: 520px; /* Etwas höher für bessere Proportionen */
    height: auto !important; /* 🔥 CRITICAL: Auto height, nicht unendlich */
    max-height: none !important; /* Keine max-height Begrenzung */
    display: flex !important;
    flex-direction: column;
    align-self: flex-start !important; /* 🔥 CRITICAL: Cards oben ausrichten, nicht dehnen */
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sedcard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(219, 193, 109, 0.03) 0%,
        rgba(1, 34, 28, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
    border-radius: 20px;
}

.sedcard-card:hover {
    transform: translateY(-12px) scale(1.02) !important; /* Moderner Lift-Effekt */
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(219, 193, 109, 0.4),
        0 0 40px rgba(219, 193, 109, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.3) !important; /* Mehrschichtige, dramatischere Schatten */
    border-color: rgba(219, 193, 109, 0.5);
}

.sedcard-card:hover::before {
    opacity: 1;
}

.sedcard-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Card Image - Modern Redesign */
.sedcard-card-image {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-top: 140% !important; /* Etwas weniger hoch für moderneres Look */
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, 
        rgba(13, 13, 13, 0.9) 0%,
        rgba(1, 34, 28, 0.9) 100%) !important; /* Subtiler Gradient als Fallback */
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important; /* Match card border-radius */
    z-index: 0;
}

.sedcard-card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    opacity: 0.6;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.sedcard-card:hover .sedcard-card-image::after {
    opacity: 0.4; /* Heller beim Hover */
}

.sedcard-card-image img,
.sedcard-card-image img.sedcard-grid-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 🔥 CRITICAL: Crop to fill container, maintain aspect ratio */
    object-position: center !important; /* Center the image */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth, modern transition */
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 3 / 4 !important;
    filter: brightness(0.95) contrast(1.05); /* Subtile Verbesserung */
    /* 🔒 Image Protection: Verhindert Drag-and-Drop und Textauswahl */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    pointer-events: auto !important; /* Erlaubt Klicks, verhindert nur Drag */
    /* 🔒 iOS-spezifischer Schutz: Verhindert Long-Press-Menü */
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important; /* Verhindert Zoom-Gesten, erlaubt Pan */
}

.sedcard-card:hover .sedcard-card-image img {
    transform: scale(1.08) !important; /* Stärkerer Zoom für mehr Impact */
    filter: brightness(1) contrast(1.1); /* Heller und kontrastreicher beim Hover */
}

/* Card Badges */
/* ALTE Badge-Container (Legacy Support) */
.sedcard-badges {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
}

/* NEUE Badge-Positionierung */
.sedcard-badges-top {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2; /* ✅ Niedriger als top-left, damit Travel/PLZ nicht überlagert werden */
    max-width: 45%; /* ✅ FIX: Verhindert, dass Badges zu weit nach links gehen */
}

.sedcard-badges-top-left {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 3; /* ✅ FIX: Höher als top-right Badges, damit sie nicht überlagert werden */
    max-width: 45%; /* ✅ FIX: Verhindert, dass Badges zu weit nach rechts gehen */
}

.sedcard-badges-bottom {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 2;
}

/* Distance Badge (Oben Links im Bild - UNTER Travel/Vacation) */
.sedcard-distance-badge {
    position: absolute !important;
    top: 60px !important; /* Unter Travel-Badges */
    left: 8px !important;
    z-index: 4 !important; /* ✅ FIX: Höchster z-index, damit PLZ immer sichtbar ist */
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    color: #fff !important;
    padding: 4px 10px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
    min-width: 60px !important; /* ✅ FIX: Mindestbreite für vollständige Anzeige */
    white-space: nowrap !important; /* ✅ FIX: Verhindert Zeilenumbruch */
    overflow: visible !important; /* ✅ FIX: Text nicht abschneiden */
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    /* FIX: Verhindere Flex-Stretch */
    height: auto !important;
    max-height: 24px !important;
    min-height: auto !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    width: auto !important;
}

.sedcard-distance-badge .sedcard-distance {
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Wenn KEINE Travel-Badges, dann höher positionieren */
.sedcard-card:not(:has(.sedcard-badges-top-left)) .sedcard-distance-badge {
    top: 8px !important;
}

/* ========================================
   LUXURIÖSE BADGES (Modern & Premium)
   ======================================== */

.badge {
    background: rgba(26, 58, 46, 0.95);
    backdrop-filter: blur(15px);
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Vorgestellt Badge (Hero Slider) */
.badge-featured {
    background: linear-gradient(135deg, #dbc16d 0%, #ecd292 50%, #dbc16d 100%) !important;
    background-size: 200% 200% !important;
    color: #01221c !important;
    font-weight: 700 !important;
    border: 1px solid rgba(219, 193, 109, 0.5) !important;
    box-shadow: 0 3px 12px rgba(219, 193, 109, 0.4), 0 0 20px rgba(219, 193, 109, 0.2) !important;
    animation: premium-shimmer 3s ease-in-out infinite;
}

@keyframes premium-shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Online Badge - Modern Green */
.badge-online {
    background: linear-gradient(135deg, 
        rgba(0, 255, 136, 0.9) 0%,
        rgba(0, 255, 136, 0.7) 50%,
        rgba(0, 204, 109, 0.9) 100%);
    color: #000;
    border: 1px solid rgba(0, 255, 136, 0.8);
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4),
                0 0 20px rgba(0, 255, 136, 0.2);
    font-weight: 700;
}

.badge-online::before {
    content: '●';
    color: #000;
    font-size: 8px;
    animation: pulse-dot 2s infinite;
}

/* Distance Badge - Subtle Gold/Emerald Style */
.sedcard-distance-badge {
    position: absolute;
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 2;
    animation: fadeInScale 0.4s ease-out;
}

.sedcard-distance-badge .distance-value {
    display: inline-block;
    background: linear-gradient(135deg, 
        rgba(219, 193, 109, 0.95) 0%,
        rgba(219, 193, 109, 0.85) 100%);
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3),
                0 0 15px rgba(219, 193, 109, 0.2);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

/* Featured Badge - GOLD mit Stern (Push to top) */
.badge-featured {
    background: linear-gradient(135deg, 
        #ffd700 0%,
        #ffed4e 30%,
        #f4d03f 60%,
        #f39c12 100%);
    color: #1c1c1c;
    border: 2px solid rgba(255, 215, 0, 1);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6),
                0 0 30px rgba(255, 215, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.badge-featured::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 70%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Premium Badge - Diamant (weniger auffällig als Featured) */
.badge-premium {
    background: linear-gradient(135deg, 
        rgba(219, 193, 109, 0.9) 0%,
        rgba(236, 210, 146, 0.8) 50%,
        rgba(219, 193, 109, 0.9) 100%);
    color: #1c1c1c;
    border: 1px solid rgba(219, 193, 109, 0.8);
    box-shadow: 0 3px 12px rgba(219, 193, 109, 0.4);
    font-weight: 600;
}

.badge-premium::before {
    content: '';
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* New Badge - Elegant Emerald */
.badge-new {
    background: linear-gradient(135deg, 
        rgba(1, 34, 28, 0.95) 0%,
        rgba(10, 58, 48, 0.9) 50%,
        rgba(20, 77, 63, 0.95) 100%);
    color: var(--noble-gold);
    border: 1px solid var(--noble-gold);
    box-shadow: 0 4px 15px rgba(219, 193, 109, 0.4),
                0 0 20px rgba(219, 193, 109, 0.2);
    font-weight: 700;
}

.badge-new::before {
    content: '◆';
    font-size: 10px;
    color: var(--noble-gold);
    text-shadow: 0 0 8px rgba(219, 193, 109, 0.6);
}

/* Travel Badge - Blue Gradient with Airplane */
.badge-travel {
    background: linear-gradient(135deg, 
        rgba(33, 150, 243, 0.95) 0%,
        rgba(66, 165, 245, 0.9) 50%,
        rgba(100, 181, 246, 0.95) 100%);
    color: #ffffff;
    border: 2px solid rgba(33, 150, 243, 1);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.5),
                0 0 20px rgba(33, 150, 243, 0.3);
    font-weight: 700;
    animation: travelPulse 3s ease-in-out infinite;
}

@keyframes travelPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(33, 150, 243, 0.5), 0 0 20px rgba(33, 150, 243, 0.3); }
    50% { box-shadow: 0 6px 25px rgba(33, 150, 243, 0.7), 0 0 30px rgba(33, 150, 243, 0.5); }
}

/* Vacation Badge - Orange Gradient with Beach */
.badge-vacation {
    background: linear-gradient(135deg, 
        rgba(255, 152, 0, 0.95) 0%,
        rgba(255, 167, 38, 0.9) 50%,
        rgba(251, 192, 45, 0.95) 100%);
    color: #1c1c1c;
    border: 2px solid rgba(255, 152, 0, 1);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.5),
                0 0 20px rgba(255, 152, 0, 0.3);
    font-weight: 700;
}

/* Mobile: Smaller badges to prevent overlap and image coverage */
@media (max-width: 768px) {
    /* ✅ FIX: Badge Container - Größerer Gap und bessere Positionierung um Überlappung zu verhindern */
    .sedcard-badges-top {
        gap: 0.5rem !important;
        top: 6px !important;
        right: 6px !important;
        left: auto !important; /* ✅ Nur rechts positionieren */
        /* ✅ Sicherstellen, dass Badges vertikal gestapelt werden */
        flex-direction: column !important;
        align-items: flex-end !important; /* ✅ Rechts ausrichten */
        flex-wrap: nowrap !important;
        max-width: 40% !important; /* ✅ FIX: Max-Breite verhindert Überlappung mit links */
        z-index: 2 !important; /* ✅ Niedriger als top-left */
    }
    
    .sedcard-badges-top-left {
        gap: 0.5rem !important;
        top: 6px !important;
        left: 6px !important;
        right: auto !important; /* ✅ Nur links positionieren */
        /* ✅ Sicherstellen, dass Badges vertikal gestapelt werden */
        flex-direction: column !important;
        align-items: flex-start !important; /* ✅ Links ausrichten */
        flex-wrap: nowrap !important;
        max-width: 40% !important; /* ✅ FIX: Max-Breite verhindert Überlappung mit rechts */
        z-index: 3 !important; /* ✅ Höher als top-right Badges */
    }
    
    /* ✅ FIX: Alle Badges - Kleinere Größe und bessere Abstände */
    .badge {
        padding: 4px 8px !important; /* ✅ Reduziert für Mobile */
        font-size: 8px !important; /* ✅ Reduziert für Mobile */
        letter-spacing: 0.3px !important;
        border-radius: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        /* ✅ Sicherstellen, dass Badges nicht überlappen */
        margin-bottom: 0 !important;
        margin-right: 0 !important;
        display: inline-flex !important;
        flex-shrink: 0 !important;
        min-width: auto !important;
        width: auto !important;
        max-width: 75px !important; /* ✅ FIX: Reduziert von 100px - verhindert Überlappung */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* ✅ FIX: Spezifische Badge-Typen - Verhindere Überlappung */
    .badge-premium,
    .badge-new,
    .badge-special {
        max-width: 70px !important; /* ✅ FIX: Reduziert für Mobile - verhindert Überlappung */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        position: relative !important;
        z-index: 2 !important; /* ✅ Niedriger als Travel/PLZ */
    }
    
    .badge-travel,
    .badge-vacation {
        max-width: 70px !important; /* ✅ FIX: Reduziert für Mobile */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        position: relative !important;
        z-index: 3 !important; /* ✅ Höher als Premium/Neu */
    }
    
    /* ✅ FIX: Distance Badge - Positionierung anpassen wenn Travel-Badges vorhanden */
    .sedcard-distance-badge {
        /* ✅ Wenn Travel-Badges vorhanden, dann unter ihnen positionieren */
        top: auto !important;
        bottom: 6px !important;
        left: 6px !important;
        padding: 3px 8px !important;
        font-size: 9px !important; /* ✅ Leicht erhöht für bessere Lesbarkeit */
        max-height: 22px !important;
        border-radius: 12px !important;
        max-width: 100px !important; /* ✅ FIX: Erhöht für "📍 X km" Anzeige (auch 3-stellige km) */
        min-width: 60px !important; /* ✅ FIX: Mindestbreite für vollständige Anzeige */
        white-space: nowrap !important; /* ✅ FIX: Verhindert Zeilenumbruch */
        overflow: visible !important; /* ✅ FIX: Text nicht abschneiden */
        text-overflow: clip !important; /* ✅ FIX: Keine Ellipsis */
        z-index: 4 !important; /* ✅ Höchster z-index - PLZ immer sichtbar */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* ✅ FIX: Wenn Travel-Badges vorhanden, PLZ unter ihnen positionieren */
    .sedcard-card:has(.sedcard-badges-top-left) .sedcard-distance-badge {
        /* Berechne Position basierend auf Anzahl der Travel-Badges */
        top: calc(6px + (var(--badge-height, 28px) + 0.5rem) * var(--travel-badge-count, 1)) !important;
        bottom: auto !important;
    }
    
    /* ✅ FIX: Wenn KEINE Travel-Badges, dann Distance Badge oben positionieren */
    .sedcard-card:not(:has(.sedcard-badges-top-left)) .sedcard-distance-badge {
        top: 6px !important;
        bottom: auto !important;
    }
    
    /* ✅ FIX: Zusätzliche Sicherheit - Verhindere Überlappung zwischen Badges */
    .sedcard-badges-top-left .badge + .badge,
    .sedcard-badges-top .badge + .badge {
        margin-top: 0 !important; /* Gap wird über Container-Gap gesteuert */
    }
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--status-online);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Card Name - Modern Redesign */
.sedcard-card-name {
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xs) var(--spacing-md) !important; /* Mehr Padding oben */
    position: relative;
    z-index: 2;
}

.sedcard-card-name h3 {
    font-size: 1.35rem !important; /* Etwas größer für bessere Lesbarkeit */
    font-weight: 700;
    margin: 0;
    color: var(--text-primary) !important; /* Standard-Farbe */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Playfair Display', serif;
    letter-spacing: -0.01em; /* Modernere Typografie */
    transition: color 0.3s ease;
}

.sedcard-card:hover .sedcard-card-name h3 {
    color: var(--noble-gold) !important; /* Gold beim Hover für Eleganz */
}

/* Card Meta (optimiert) */
.sedcard-card-meta {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.meta-age {
    color: var(--noble-gold);
    font-weight: 600;
}

.meta-location {
    color: var(--text-primary);
}

.meta-figure {
    color: var(--text-secondary);
    font-style: italic;
}

/* Card Price (neu) */
.sedcard-card-price {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    border-top: 1px solid var(--bg-tertiary);
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.05), rgba(219, 193, 109, 0.02));
}

.price-main {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--noble-gold);
    font-family: 'Playfair Display', serif;
    line-height: 1;
}

.price-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
    display: inline;
}

/* NEUE KOMPAKTE META + PREIS (Redesign) */
.sedcard-card-meta-compact {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.meta-tag {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(219, 193, 109, 0.1);
    border: 1px solid rgba(219, 193, 109, 0.3);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.meta-tag.meta-online {
    background: rgba(0, 255, 157, 0.15);
    color: #00ff9d;
    border-color: #00ff9d;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-tag.meta-online .online-dot {
    width: 6px;
    height: 6px;
    background: #00ff9d;
    border-radius: 50%;
    animation: pulse-online 2s infinite;
}

@keyframes pulse-online {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.meta-tag.meta-age {
    background: rgba(219, 193, 109, 0.15);
    color: var(--noble-gold);
    border-color: var(--noble-gold);
    font-weight: 600;
}

.meta-tag.meta-figure,
.meta-tag.meta-hair {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

/* Zuletzt gesehen (wenn offline) */
.last-seen {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.7;
    margin-top: 4px;
}

/* Kompakter Preis direkt unter Meta-Tags */
.price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-top: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.price-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--noble-gold);
    font-family: 'Playfair Display', serif;
    line-height: 1;
}

.price-unit {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.8;
}

/* Last Active Display (wie BerlinIntim) */
.last-active {
    padding: 6px 12px;
    margin: var(--spacing-sm) var(--spacing-md);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
}

.last-active.online {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.15);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

.last-active.recent {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
}

.last-active.today {
    color: #ffa500;
    background: rgba(255, 165, 0, 0.1);
}

.last-active.offline {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
}

/* CTA Buttons im Grid - siehe favorites.css für Layout */
/* Padding ist jetzt in favorites.css definiert (kompakter) */

.btn-contact-grid {
    flex: 1;
    background: linear-gradient(135deg, var(--noble-emerald), var(--noble-emerald-light));
    color: var(--noble-gold);
    border: 1px solid var(--noble-gold);
    padding: 10px 14px; /* Kompakter */
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.85rem; /* Kleinere Schrift */
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-contact-grid:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(219, 193, 109, 0.3);
    background: linear-gradient(135deg, var(--noble-gold), var(--noble-gold-hover));
    color: var(--noble-emerald);
}

/* Card Icons */
.sedcard-card-icons {
    padding: 0 var(--spacing-md) var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    font-size: 1.2rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* Round bottom corners */
    overflow: hidden;
}

.icon-item {
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.sedcard-card:hover .icon-item {
    opacity: 1;
}

/* Empty State */
.no-sedcards-found {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.empty-state {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.empty-state p {
    color: var(--text-secondary);
    margin: 0;
}

/* Smaller empty state for tabs */
.empty-state-small {
    text-align: center;
    padding: var(--spacing-lg);
}

.empty-state-small .empty-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

.empty-state-small p {
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.empty-state-small .empty-hint {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    font-style: italic;
}

/* ========================================
   PAGINATION
   ======================================== */
.noble-pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
}

.noble-pagination a,
.noble-pagination span {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-normal);
    border: 2px solid transparent;
}

.noble-pagination a:hover {
    background: var(--noble-emerald-light);
    border-color: var(--noble-gold);
    color: var(--noble-gold);
}

.noble-pagination .current {
    background: var(--noble-gold);
    color: var(--noble-emerald);
    font-weight: 700;
}

/* ========================================
   SINGLE SEDCARD
   ======================================== */
.noble-sedcard-single {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    background: transparent;
    overflow: visible; /* WICHTIG: Sticky Position darf nicht blockiert werden */
}

.noble-sedcard-content-notice {
    margin: var(--spacing-lg) 0 var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: rgba(219, 193, 109, 0.08);
    border: 1px solid rgba(219, 193, 109, 0.35);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
}

.noble-sedcard-content-notice h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--noble-gold);
}

.noble-sedcard-content-notice p {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-secondary);
}

.noble-sedcard-content-notice p:last-child {
    margin-bottom: 0;
}

.noble-sedcard-content-notice .notice-restriction {
    color: var(--text-primary);
    font-weight: 600;
}

/* Hintergrund entfernt - Transparenter Hintergrund */
.noble-sedcard-single::before,
.noble-sedcard-single::after {
    display: none !important;
}

/* Body Background für Single Sedcards - Hell und sauber */
/* FIX: Parallax-BG wird über body.single-sedcard::before gerendert, daher transparent lassen */
body.single-sedcard {
    background: transparent !important;
    position: relative;
}

.single-sedcard #page-container,
.single-sedcard #main-content {
    background: transparent !important;
}

/* Mobile: Prevent horizontal scroll + Full Width */
@media (max-width: 1023px) {
    /* Body & HTML: Full Width, No Overflow */
    html, body, body.single-sedcard {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* DIVI Container: Full Width */
    #page-container,
    #main-content,
    .et_pb_section,
    .et_pb_row,
    .et_pb_column {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* KRITISCH: Frontend Single Container: Kein Padding! */
    .noble-frontend-single {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Noble Sedcard Container: Full Width + Bottom Padding für Sticky Bar */
    .noble-sedcard-single {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        padding-bottom: 120px !important; /* Platz für Sticky CTA Bar */
        margin: 0 !important;
    }
    
    body.single-sedcard {
        overflow-x: hidden !important;
    }
    
    .noble-sedcard-single > * {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* 🔥 FIX: Weißer Bereich über Bottom Bar */
    .sedcard-main-column {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Tabs: Kein extra Spacing unten */
    .sedcard-info-tabs {
        margin-bottom: 0 !important;
        padding-bottom: 16px !important;
    }
}
    
    /* Mobile: Weniger intensiver Parallax */
    .noble-sedcard-single::before {
        opacity: 0.8;
        background-attachment: scroll; /* Bessere Performance auf Mobile */
    }
    
    .noble-sedcard-single::after {
        background: linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.85) 50%,
            rgba(0, 0, 0, 0.9) 100%
        );
    }
}

/* Modern Single Header - Glassmorphism */
/* ========================================
   MODERN HEADER (2025 Design)
   ======================================== */

.sedcard-header-modern {
    text-align: center !important;
    padding: var(--spacing-xl) 0 !important;
    margin-bottom: var(--spacing-lg) !important;
    position: relative !important;
    display: block !important;
}

/* Zurück-Button entfernt */

.header-content {
    max-width: 100% !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.header-badges {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: var(--spacing-md) !important;
    gap: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-md) !important;
    flex-wrap: wrap !important;
}

.header-badges .badge {
    font-size: 11px;
    padding: 6px 14px;
}

.pulse-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-dot 2s infinite;
    margin-right: 4px;
}

.badge-verified {
    background: linear-gradient(135deg, 
        rgba(0, 170, 255, 0.9) 0%,
        rgba(0, 136, 204, 0.9) 100%);
    color: #fff;
    border: 1px solid rgba(0, 170, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0, 170, 255, 0.3);
}

.sedcard-title-modern {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--noble-gold) 0%, #f0d878 50%, var(--noble-gold) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    background-clip: text !important;
    margin: 0 0 var(--spacing-md) 0 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    display: block !important;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    filter: drop-shadow(0 2px 4px rgba(219, 193, 109, 0.5));
}

.sedcard-meta-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 1rem;
}

.meta-tag {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 0.9rem;
}

.meta-tag.meta-location {
    color: var(--noble-gold);
    background: rgba(219, 193, 109, 0.1);
    border: 1px solid rgba(219, 193, 109, 0.2);
}

.meta-separator {
    opacity: 0.3;
}

/* Mobile: Compact header */
@media (max-width: 768px) {
    .sedcard-header-modern {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .sedcard-title-modern {
        font-size: 2.5rem;
    }
    
    .header-badges {
        gap: var(--spacing-xs);
    }
    
    .sedcard-meta-modern {
        font-size: 0.85rem;
    }
    
    /* Thumbnails auf Mobile kleiner */
    .gallery-thumb {
        flex: 0 0 80px;
        width: 80px;
        height: 107px;  /* 3:4 Ratio */
    }
    
    /* Sidebar Content Layout auf Mobile */
    .sedcard-content-layout {
        gap: var(--spacing-md);
    }
}

.sedcard-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--noble-gold);
    margin: 0 0 var(--spacing-sm) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Mobile: Smaller title to prevent overflow */
@media (max-width: 768px) {
    .sedcard-title {
        font-size: 2rem;
    }
}

.verified-badge {
    font-size: 1.5rem;
}

.sedcard-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    font-size: 1.05rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
}

.meta-location::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--noble-gold);
    border-radius: 50%;
    margin-right: 0.5rem;
}

.meta-service-area {
    opacity: 0.8;
}

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

.online-status {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 255, 136, 0.15));
    border: 2px solid var(--status-online);
    color: var(--status-online);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: pulse-border 2s infinite;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

@keyframes pulse-border {
    0%, 100% { 
        border-color: var(--status-online);
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
    }
    50% { 
        border-color: rgba(0, 255, 136, 0.5);
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.4);
    }
}

.premium-badge {
    background: linear-gradient(135deg, var(--noble-gold), #c5a84e);
    border: 2px solid var(--noble-gold);
    color: var(--noble-emerald);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    box-shadow: 0 0 20px rgba(219, 193, 109, 0.3);
}

/* Header actions removed for cleaner design */

/* ========================================
   SIDEBAR (DESKTOP)
   ======================================== */
.sedcard-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.sidebar-sticky {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Modern Sidebar Box - Glassmorphism */
.sidebar-box {
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    padding: var(--spacing-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(219, 193, 109, 0.15);
    position: relative;
    overflow: hidden;
}

.status-box {
    background: linear-gradient(135deg, 
        rgba(26, 58, 46, 0.95) 0%, 
        rgba(34, 72, 56, 0.9) 100%);
    border: 1px solid var(--noble-gold);
    text-align: center;
}

.quick-price-info {
    margin-bottom: var(--spacing-sm);
}

.quick-price {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--noble-emerald);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.quick-price-label {
    display: block;
    font-size: 0.8rem;
    color: var(--noble-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(219, 193, 109, 0.3), 
        transparent
    );
}

.sidebar-title {
    color: var(--noble-gold);
    font-size: 1.25rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid rgba(219, 193, 109, 0.2);
}

/* ========================================
   Travel & Vacation Info Boxes
   ======================================== */

/* Travel Info Box - Blue Theme */
.travel-info-box {
    background: linear-gradient(135deg, 
        rgba(33, 150, 243, 0.1) 0%,
        rgba(66, 165, 245, 0.05) 100%);
    border: 2px solid rgba(33, 150, 243, 0.4);
    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.2);
}

.travel-info-box .sidebar-title {
    color: #2196F3;
    border-bottom-color: rgba(33, 150, 243, 0.3);
}

.travel-info-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.travel-location,
.travel-dates {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.travel-location:hover,
.travel-dates:hover {
    background: rgba(33, 150, 243, 0.1);
    transform: translateX(5px);
}

.travel-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.travel-text {
    font-size: 14px;
    color: rgba(248, 245, 240, 0.95);
    font-family: 'Lato', sans-serif;
}

.travel-text strong {
    color: #2196F3;
    font-weight: 700;
}

/* Vacation Info Box - Orange Theme */
.vacation-info-box {
    background: linear-gradient(135deg, 
        rgba(255, 152, 0, 0.1) 0%,
        rgba(255, 167, 38, 0.05) 100%);
    border: 2px solid rgba(255, 152, 0, 0.4);
    box-shadow: 0 4px 20px rgba(255, 152, 0, 0.2);
}

.vacation-info-box .sidebar-title {
    color: #ff9800;
    border-bottom-color: rgba(255, 152, 0, 0.3);
}

.vacation-info-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vacation-dates,
.vacation-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.vacation-dates:hover,
.vacation-note:hover {
    background: rgba(255, 152, 0, 0.1);
}

.vacation-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.vacation-text {
    font-size: 14px;
    color: rgba(248, 245, 240, 0.95);
    font-family: 'Lato', sans-serif;
    line-height: 1.5;
}

.vacation-text strong {
    color: #ff9800;
    font-weight: 700;
}

.vacation-note {
    font-style: italic;
    background: rgba(255, 152, 0, 0.08);
    border-left: 3px solid #ff9800;
}

/* Price Box */
.price-box {
    background: var(--bg-secondary);
    border: 2px solid var(--noble-gold);
    box-shadow: 0 0 20px rgba(219, 193, 109, 0.15);
}

.price-main {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.price-amount {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--noble-gold);
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.2;
}

.price-label {
    display: block;
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.status-badge.online {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.1));
    border: 2px solid var(--status-online);
    color: var(--status-online);
}

.status-badge.offline {
    background: var(--bg-tertiary);
    border: 2px solid var(--text-muted);
    color: var(--text-secondary);
}

.status-dot {
    width: 10px;
    height: 10px;
    background: var(--status-online);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(0, 255, 136, 0);
    }
}

.btn-primary,
.btn-secondary {
    width: 100%;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    border: 2px solid;
    margin-bottom: var(--spacing-sm);
}

.btn-primary {
    background: linear-gradient(135deg, var(--noble-gold), #c5a84e);
    border-color: var(--noble-gold);
    color: var(--noble-emerald);
    box-shadow: 0 4px 12px rgba(219, 193, 109, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(219, 193, 109, 0.4);
}

.btn-secondary {
    background: transparent;
    border-color: var(--noble-gold);
    color: var(--noble-gold);
}

.btn-secondary:hover {
    background: rgba(219, 193, 109, 0.1);
}

.btn-icon {
    font-size: 1.2rem;
}

/* Quick-Info List */
.quick-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.quick-info-item {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

.info-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.8;
}

.info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.quick-info-item .info-label {
    font-size: 0.85rem;
    color: var(--noble-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.quick-info-item .info-value {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.premium-text {
    color: var(--noble-gold);
    font-weight: 600;
}

/* Quick-Contact Buttons */
.quick-contact-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.quick-contact-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid rgba(219, 193, 109, 0.2);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.quick-contact-btn:hover {
    background: var(--bg-hover);
    border-color: var(--noble-gold);
    transform: translateX(4px);
}

.contact-icon {
    font-size: 1.2rem;
    opacity: 0.9;
}

.contact-label {
    font-weight: 500;
    font-size: 0.95rem;
}

/* Modern Gallery - Glassmorphism */
.sedcard-gallery {
    background: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border: 1px solid rgba(219, 193, 109, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 100%;
}

/* 1:1 Aspect Ratio for main gallery image */
.sedcard-gallery .gallery-main-image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
}

.sedcard-gallery .gallery-main-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 1:1 Aspect Ratio for thumbnails */
.sedcard-gallery .gallery-thumb-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    pointer-events: none; /* Klicks gehen durch zum Container */
}

.sedcard-gallery .gallery-thumb-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 2-Spalten Layout für Desktop: Main + Sidebar */
.sedcard-content-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    padding: 0 !important; /* Kein Padding für fullwidth Bilder */
}

.sedcard-main-column {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .sedcard-content-layout {
        grid-template-columns: 1fr 380px;  /* Main + Sidebar */
    }
    
    .sedcard-gallery {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .sedcard-info-tabs {
        width: 100%;       /* Gleiche Breite wie Gallery */
    }
    
    /* Mobile Contact Section nur auf Mobile */
    .contact-section-mobile {
        display: none;
    }
}

/* Auf Mobile: Layout anpassen (1-Spalte, VOLLE BREITE) */
@media (max-width: 1023px) {
    /* Noble Sedcard Single: Block Layout */
    .noble-sedcard-single {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
    
    /* Sedcard Wrapper/Container */
    .sedcard-wrapper,
    .sedcard-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Sidebar: Full Width mit Spacing */
    .sedcard-sidebar {
        display: flex !important;
        flex-direction: column;
        gap: 16px;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
        position: relative !important;
        margin: 0 !important;
    }
    
    /* Sidebar Boxes: Inneres Padding für Abstand */
    .sedcard-sidebar > .sidebar-box,
    .sedcard-sidebar > div {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .sidebar-mobile-content {
        display: block !important;
        margin: 0 !important;
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Content-Wrapper: Full Width mit Spacing */
    .sedcard-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    
    /* Content innere Bereiche: Padding für Lesbarkeit */
    .sedcard-content > *,
    .sedcard-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Tab System: Spezielle Behandlung */
    .sedcard-info-tabs {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Tab Navigation: Volle Breite ohne Padding */
    .tab-nav,
    .nav-tabs,
    .sedcard-info-tabs > .nav-tabs {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Tab Buttons: Padding für Touch-Targets */
    .tab-nav button,
    .nav-tabs button {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Tab Content: Schönes Padding für Lesbarkeit */
    .tab-content,
    .tab-pane {
        padding: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Tab Content Inner: Volle Breite */
    .tab-content-inner,
    .tab-pane > *,
    .content-section,
    .location-details,
    .info-grid,
    .service-grid,
    .price-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Content Sections: 98% Width für schönes Spacing */
    .content-section,
    .about-me-section {
        padding: 0 !important;
        width: 98% !important;
        max-width: 98% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* About Me Text: 96% Width mit Margin-Bottom für Spacing */
    .about-me-text,
    .about-me-text p {
        width: 96% !important;
        max-width: 96% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .about-me-text {
        margin-bottom: 24px !important;
    }
    
    /* Gallery: Volle Breite ohne Padding */
    .sedcard-gallery,
    .sedcard-gallery-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Sidebar Boxes: Full Width */
    .sidebar-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .contact-section-mobile {
        display: block !important;
        margin-top: 20px !important;
        margin-bottom: 24px !important;
        padding: 0 16px !important;
    }
    
    /* Contact Section: Prominent auf Mobile */
    .contact-section-mobile .cta-buttons-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .contact-section-mobile .btn-cta-primary,
    .contact-section-mobile .btn-cta-secondary {
        min-height: 50px;
        font-size: 1rem;
        font-weight: 600;
    }
    
    /* MOBILE: Verstecke doppelte Arbeitszeiten im Content */
    .sedcard-content .sidebar-mobile-content,
    .sedcard-content .working-hours-mobile {
        display: none !important;
    }
}

/* ========================================
   LOCATION MAP STYLES - Noble Atlas CI
   ======================================== */
.sedcard-location-map-container {
    margin-top: 24px;
    position: relative;
    background: linear-gradient(135deg, rgba(1, 34, 28, 0.3), rgba(10, 58, 48, 0.3));
    border: 1px solid rgba(219, 193, 109, 0.2);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sedcard-location-map {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid rgba(219, 193, 109, 0.3);
    box-shadow: 
        0 0 20px rgba(219, 193, 109, 0.15),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Dark filter for map */
.sedcard-location-map::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(1, 34, 28, 0.4) 0%, 
        rgba(10, 58, 48, 0.3) 50%, 
        rgba(1, 34, 28, 0.4) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

.map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--noble-gold);
    font-size: 14px;
    z-index: 1000;
    background: rgba(1, 34, 28, 0.95);
    padding: 24px 32px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(219, 193, 109, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.map-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(219, 193, 109, 0.2);
    border-top-color: var(--noble-gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    box-shadow: 0 0 10px rgba(219, 193, 109, 0.3);
}

.map-disclaimer {
    margin-top: 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.map-disclaimer small {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.1), rgba(219, 193, 109, 0.05));
    border: 1px solid rgba(219, 193, 109, 0.2);
    border-radius: 20px;
    color: var(--noble-gold);
    font-weight: 500;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Route Button */
.map-route-button-container {
    margin-top: 12px;
    text-align: center;
}

.btn-route {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #dbc16d 0%, #e5cb7f 100%);
    color: #01221c;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 3px 12px rgba(219, 193, 109, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
}

.btn-route:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(219, 193, 109, 0.4);
    color: #01221c;
    text-decoration: none;
}

.btn-route:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(219, 193, 109, 0.3);
}

/* Custom Marker with Profile Image - Noble Atlas CI */
.noble-custom-marker {
    background: transparent;
    border: none;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

.custom-marker {
    position: relative;
    width: 60px;
    height: 80px;
    animation: markerBounce 2s ease-in-out infinite;
}

.marker-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--noble-gold);
    background: linear-gradient(135deg, rgba(1, 34, 28, 0.9), rgba(10, 58, 48, 0.9));
    box-shadow: 
        0 0 20px rgba(219, 193, 109, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    position: relative;
}

.marker-image::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--noble-gold), rgba(219, 193, 109, 0.6));
    z-index: -1;
    animation: pulseGlow 2s ease-in-out infinite;
}

.marker-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.marker-pin {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid var(--noble-gold);
    filter: 
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 10px rgba(219, 193, 109, 0.4));
    z-index: 1;
}

@keyframes markerBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Leaflet Popup Customization - Noble Atlas CI */
.leaflet-popup-content-wrapper {
    background: linear-gradient(135deg, rgba(1, 34, 28, 0.98), rgba(10, 58, 48, 0.98)) !important;
    color: var(--text-primary) !important;
    border: 2px solid rgba(219, 193, 109, 0.4) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(219, 193, 109, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

.leaflet-popup-content {
    margin: 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

.leaflet-popup-content strong {
    color: var(--noble-gold) !important;
    display: block;
    margin-bottom: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-popup-tip {
    background: linear-gradient(135deg, rgba(1, 34, 28, 0.98), rgba(10, 58, 48, 0.98)) !important;
    border: 2px solid rgba(219, 193, 109, 0.4) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.leaflet-popup-close-button {
    color: var(--noble-gold) !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    padding: 8px 12px !important;
    opacity: 0.7 !important;
    transition: all 0.3s ease !important;
}

.leaflet-popup-close-button:hover {
    opacity: 1 !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(219, 193, 109, 0.6) !important;
}

/* Leaflet Controls - Noble Atlas CI */
.leaflet-control-zoom a,
.leaflet-control-attribution {
    background: linear-gradient(135deg, rgba(1, 34, 28, 0.95), rgba(10, 58, 48, 0.95)) !important;
    color: var(--noble-gold) !important;
    border: 1px solid rgba(219, 193, 109, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}

.leaflet-control-zoom a:hover {
    background: linear-gradient(135deg, rgba(10, 58, 48, 0.95), rgba(1, 34, 28, 0.95)) !important;
    color: #fff !important;
    border-color: rgba(219, 193, 109, 0.6) !important;
    box-shadow: 0 0 15px rgba(219, 193, 109, 0.4) !important;
}

.leaflet-control-attribution {
    background: rgba(1, 34, 28, 0.85) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
}

.leaflet-control-attribution a {
    color: var(--noble-gold) !important;
    text-decoration: none !important;
}

.leaflet-control-attribution a:hover {
    color: #fff !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .sedcard-location-map-container {
        padding: 12px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .sedcard-location-map {
        height: 300px;
        border-radius: 0;
    }
    
    .map-route-button-container {
        margin-top: 10px;
    }
    
    .btn-route {
        padding: 12px 24px;
        font-size: 15px;
        width: 100%;
        justify-content: center;
    }
    
    .marker-image {
        width: 40px;
        height: 40px;
        border-width: 2px;
    }
    
    .marker-pin {
        border-left-width: 12px;
        border-right-width: 12px;
        border-top-width: 25px;
    }
    
    .custom-marker {
        width: 50px;
        height: 70px;
    }
    
    .map-loading {
        padding: 16px 24px;
    }
    
    .map-loading .spinner {
        width: 24px;
        height: 24px;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   MOBILE SIDEBAR CONTENT STYLES
   ======================================== */
.sidebar-mobile-content {
    display: none; /* Versteckt auf Desktop */
}

/* Ensure mobile sidebar shows on tablets and phones */
@media (max-width: 1023px) {
    .sidebar-mobile-content {
        display: block !important;
        padding: 0 16px; /* Seitliches Padding für abgerundete Ecken */
    }
}

.sidebar-mobile-boxes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0; /* Container hat kein padding */
}

.sidebar-box-mobile {
    background: var(--bg-card);
    border: 1px solid rgba(219, 193, 109, 0.2);
    border-radius: var(--radius-md);
    padding: 16px;
}

.sidebar-box-mobile h3,
.sidebar-box-mobile .sidebar-title {
    color: var(--noble-gold);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* Mobile Working Hours - 1:1 Kopie der Desktop-Styles */
@media (max-width: 1023px) {
    .working-hours-mobile {
        /* Gleiche Border-Radius wie Tabs/Sedcard-Elemente */
        border-radius: var(--radius-md) !important;
    }
}

.working-hours-mobile .working-hours-content {
    margin-top: 8px;
}

.working-hours-mobile .available-today-badge {
    background: var(--success-color);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 8px;
    display: inline-block;
}

.working-hours-mobile .hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
}

.working-hours-mobile .hours-item:last-child {
    border-bottom: none;
}

.working-hours-mobile .hours-item.today {
    background: var(--bg-tertiary);
    padding: 8px 12px;
    border-radius: 8px;
    margin: 0 -12px;
}

.working-hours-mobile .hours-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.working-hours-mobile .hours-value {
    color: var(--text-primary);
    font-weight: 600;
}

.working-hours-mobile .hours-day-name {
    font-weight: 500;
    color: var(--text-primary);
}

.working-hours-mobile .hours-time {
    color: var(--text-secondary);
}

.working-hours-mobile .individual-hours-notice {
    text-align: center;
    padding: 16px 0;
}

/* Quick Summary Mobile */
.quick-summary-mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}

.price-display-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-display-mobile .price-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--noble-gold);
    line-height: 1;
}

.price-display-mobile .price-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.status-badge-mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.status-badge-mobile.online {
    background: rgba(0, 255, 136, 0.15);
    color: var(--status-online);
}

.status-badge-mobile .pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--status-online);
    border-radius: 50%;
    animation: pulse-animation 2s infinite;
}

/* Bordell Info Mobile */
.bordell-info-mobile {
    background: linear-gradient(135deg, rgba(1, 34, 28, 0.3), rgba(10, 58, 48, 0.3));
}

.bordell-link-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--text-secondary);
}

.bordell-name-link {
    color: var(--noble-gold);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
}

.bordell-name-link:hover {
    color: var(--noble-gold-hover);
    text-decoration: underline;
}

/* Info Compact Mobile */
.info-list-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-item-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.info-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.info-text {
    color: var(--text-primary);
}

/* Working Hours Mobile */
.working-hours-mobile h3 {
    color: var(--noble-gold);
}

.available-badge-mobile {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 255, 136, 0.15);
    color: var(--status-online);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.schedule-list-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.schedule-item-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.schedule-item-mobile.today {
    background: linear-gradient(135deg, rgba(1, 34, 28, 0.4), rgba(10, 58, 48, 0.4));
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.day-mobile {
    color: var(--text-secondary);
    font-weight: 500;
}

.schedule-item-mobile.today .day-mobile {
    color: var(--status-online);
    font-weight: 700;
}

.time-mobile {
    color: var(--text-primary);
    font-weight: 600;
}

.flexible-schedule-mobile {
    margin: 0;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    text-align: center;
}

.gallery-main {
    position: relative;
    width: 100%;
    max-width: 100%; /* Verhindert Overflow */
    padding-top: 133%; /* 3:4 aspect ratio for portrait images */
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.gallery-main img,
.gallery-main video,
.gallery-main .gallery-main-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt Container aus, Crop wenn nötig */
    object-position: center;
}

/* Desktop: Begrenzte Höhe für bessere Proportion */
@media (min-width: 1024px) {
    .gallery-main {
        max-height: 500px;
        padding-top: 0;
        height: 500px;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .gallery-main img,
    .gallery-main video {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 500px;
        object-fit: cover;
        border-radius: 12px;
    }
}

/* Mobile: Gallery fullwidth, kompakte Höhe */
@media (max-width: 768px) {
    /* Gesamtes Layout auf Mobile begrenzen */
    .sedcard-content-layout,
    .sedcard-main-column,
    .sedcard-info-tabs,
    .tabs-nav {
        max-width: 100vw !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .sedcard-gallery {
        background: transparent;
        border-radius: 0;
        padding: 0;
        margin-bottom: var(--spacing-md);
        box-shadow: none;
        overflow: hidden; /* Verhindert horizontales Überlaufen */
        max-width: 100vw !important;
        width: 100% !important;
    }

    .gallery-main {
        border-radius: 0;
        padding-top: 0 !important; /* Kein padding-top auf Mobile */
        height: 450px !important;  /* Optimale Höhe: 450px */
        max-height: 55vh; /* Max 55% Viewport-Höhe */
        max-width: 100vw !important; /* Niemals breiter als Viewport */
        width: 100% !important;
        margin-bottom: 0;
        position: relative;
    }

    .gallery-main img,
    .gallery-main video,
    .gallery-main .gallery-main-video-container {
        object-fit: cover; /* Bild füllt Container aus, Crop wenn nötig */
        object-position: center;
    }
    
    /* Navigation-Buttons: höherer z-index als Badges */
    .gallery-nav {
        z-index: 20 !important; /* Über Badges (z-index: 10) */
        pointer-events: none; /* Damit Background nicht klickbar ist */
    }
    
    .gallery-nav-btn {
        pointer-events: auto; /* Aber Buttons sind klickbar */
        z-index: 20 !important;
    }
    
    /* Badges: niedriger z-index */
    .sedcard-badges-overlay {
        z-index: 10 !important;
    }
}

/* Badges overlay on gallery */
.sedcard-badges-overlay {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: 10;
}

/* Pending gallery state */
.gallery-pending {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    overflow: hidden;
}

.gallery-pending .placeholder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.15;
    filter: blur(2px);
}

.pending-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
}

.pending-content {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
    max-width: 400px;
}

.pending-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.7;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.pending-overlay h3 {
    color: var(--noble-gold);
    margin-bottom: var(--spacing-sm);
    font-size: 1.5rem;
}

.pending-overlay p {
    color: var(--text-tertiary);
    font-size: 1rem;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 var(--spacing-md);
    transform: translateY(-50%);
    box-sizing: border-box;
}

.gallery-nav-btn {
    background: rgba(26, 58, 46, 0.95); /* Noble Emerald */
    backdrop-filter: blur(10px);
    border: 2px solid var(--noble-gold);
    color: var(--noble-gold);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.gallery-nav-btn:hover {
    background: linear-gradient(135deg, var(--noble-gold), #c5a84e);
    color: var(--noble-emerald);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(219, 193, 109, 0.4);
}

/* Mobile: Kompaktere Nav-Buttons */
@media (max-width: 768px) {
    .gallery-nav-btn {
        width: 45px !important;   /* Kleiner: 60px → 45px */
        height: 45px !important;
        font-size: 1.4rem !important; /* Kleiner: 1.8rem → 1.4rem */
    }
    
    .gallery-nav {
        padding: 0 8px !important; /* Weniger Padding */
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Make sure buttons are easily tappable */
    .gallery-nav-btn {
        -webkit-tap-highlight-color: rgba(219, 193, 109, 0.3);
        touch-action: manipulation;
    }
    
    /* Thumbnails: Kleiner auf Mobile */
    .gallery-thumbnails {
        max-width: 100vw !important;
        padding: 0 16px;
        margin-left: 0;
        margin-right: 0;
    }
    
    .gallery-thumb {
        flex: 0 0 80px !important; /* Kleiner: 100px → 80px */
        width: 80px !important;
        height: 107px !important;  /* 3:4 Ratio */
    }
}

.gallery-counter {
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    background: rgba(26, 58, 46, 0.95); /* Noble Emerald */
    backdrop-filter: blur(10px);
    color: var(--noble-gold);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    border: 2px solid var(--noble-gold);
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Thumbnails horizontal (wie Kaufmich.com) */
.gallery-thumbnails {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--spacing-xs);
    margin-top: var(--spacing-md);
    
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--noble-gold) var(--bg-tertiary);
    
    /* Sicherstellen, dass Klicks durchgehen */
    pointer-events: auto !important;
}

.gallery-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.gallery-thumbnails::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
    background: var(--noble-gold);
    border-radius: 3px;
}

.gallery-thumb {
    position: relative;
    flex: 0 0 100px;  /* Feste Breite */
    width: 100px;
    height: 133px;    /* 3:4 Ratio */
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-normal);
    pointer-events: auto !important; /* Sicherstellen, dass Klicks funktionieren */
    user-select: none; /* Verhindert Textauswahl beim Klicken */
}

.gallery-thumb.active {
    border-color: var(--noble-gold);
}

.gallery-thumb:hover {
    border-color: var(--noble-gold);
    opacity: 0.8;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none; /* Klicks gehen durch zum Container */
    user-select: none;
}

/* Force pointer-events for sedcard gallery thumbnails + main media */
.sedcard-gallery .gallery-thumbnails,
.sedcard-gallery .gallery-thumb,
.sedcard-gallery .gallery-thumb-frame,
.sedcard-gallery .gallery-thumb-frame img,
.sedcard-gallery .gallery-main-image-clickable,
.sedcard-gallery .gallery-main-video-clickable,
.sedcard-gallery .video-play-overlay {
    pointer-events: auto !important;
}

/* Mobile privacy: disable long-press actions on images */
.sedcard-gallery img,
#noble-lightbox img,
#noble-lightbox video {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    touch-action: manipulation;
}

/* Privacy overlay (best-effort screenshot deterrent) */
.noble-privacy-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(1, 34, 28, 0.96);
    z-index: 999999;
    text-align: center;
}

.noble-privacy-overlay.active {
    display: flex;
}

.noble-privacy-overlay .privacy-modal {
    background: rgba(26, 58, 46, 0.95);
    border: 2px solid var(--noble-gold);
    border-radius: 16px;
    padding: 24px 32px;
    max-width: 420px;
    color: var(--noble-gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-family: 'Lato', sans-serif;
}

.noble-privacy-overlay .privacy-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.noble-privacy-overlay .privacy-message {
    font-size: 0.95rem;
    color: #f8f5f0;
}

.noble-privacy-overlay.fade-out {
    animation: noblePrivacyFade 0.9s ease-out forwards;
}

@keyframes noblePrivacyFade {
    from { opacity: 1; }
    to { opacity: 0; }
}

.gallery-thumb:hover {
    border-color: var(--noble-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(219, 193, 109, 0.3);
}

/* Modern Info Tabs - Glassmorphism */
.sedcard-info-tabs {
    background: rgba(26, 26, 26, 0.65);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    border: 1px solid rgba(219, 193, 109, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.03);
    width: 100%;
    max-width: 100%;
}

/* Modern Tabs Navigation */
.tabs-nav {
    display: flex;
    background: rgba(42, 42, 42, 0.8);
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid rgba(219, 193, 109, 0.2);
    position: relative;
}

.tabs-nav::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(219, 193, 109, 0.3), 
        transparent
    );
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: var(--spacing-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    border-bottom: 3px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Modern Tab Hover Effect */
.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--noble-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-normal);
}

.tab-btn:hover {
    color: var(--noble-gold);
    background: var(--bg-hover);
}

.tab-btn:hover::after {
    transform: scaleX(1);
}

.tab-btn.active {
    color: var(--noble-gold);
    border-bottom-color: var(--noble-gold);
    background: var(--bg-secondary);
}

.tab-btn.active::after {
    transform: scaleX(1);
}

.tabs-content {
    padding: var(--spacing-lg);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Divi/Theme Hard-Override: ensure tab switching is visible */
.sedcard-info-tabs .tab-pane {
    display: none !important;
}

.sedcard-info-tabs .tab-pane.active {
    display: block !important;
}

.tab-content-inner {
    color: var(--text-primary);
}

.content-section {
    margin-bottom: var(--spacing-lg);
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section h3 {
    color: var(--noble-gold);
    font-size: 1.75rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid rgba(219, 193, 109, 0.2);
}

.description-text {
    line-height: 1.8;
    color: var(--text-secondary);
}

/* No-Gos Section (Warning Style) */
.no-gos-section {
    background: linear-gradient(135deg, #fff5f5 0%, #fff8f8 100%);
    border-left: 5px solid #dc3545;
    padding: 24px;
    border-radius: 12px;
    margin-top: 24px;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
}

.no-gos-title {
    color: #dc3545 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: none !important;
}

.no-gos-icon {
    font-size: 1.8rem;
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.no-gos-text {
    color: #721c24;
    line-height: 1.8;
    font-size: 1.05rem;
    font-weight: 500;
}

.no-gos-text ul {
    margin: 0;
    padding-left: 24px;
    list-style: none;
}

.no-gos-text ul li {
    position: relative;
    padding-left: 8px;
    margin-bottom: 8px;
}

.no-gos-text ul li:before {
    content: "❌";
    position: absolute;
    left: -20px;
    font-size: 0.9rem;
}

/* ========================================
   Über mich Section (Bio Templates)
   ======================================== */
.about-me-section {
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.05) 0%, rgba(1, 34, 28, 0.1) 100%);
    border: 2px solid rgba(219, 193, 109, 0.2);
    border-radius: 12px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.about-me-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--noble-gold) 0%, var(--noble-emerald) 100%);
}

.about-me-section h3 {
    color: var(--noble-gold);
    border-bottom: none;
    margin-bottom: var(--spacing-md);
}

.about-me-section .section-icon {
    color: var(--noble-gold);
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.about-me-text {
    line-height: 1.9;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-family: 'Inter', sans-serif;
}

.about-me-text p {
    margin-bottom: var(--spacing-md);
}

.about-me-text p:last-child {
    margin-bottom: 0;
}

/* Zitatzeichen-Design (optional) */
.about-me-text::before {
    content: '"';
    font-size: 4rem;
    font-family: 'Playfair Display', Georgia, serif;
    color: rgba(219, 193, 109, 0.15);
    position: absolute;
    top: 20px;
    left: 20px;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .about-me-section {
        padding: var(--spacing-md);
    }
    
    .about-me-text {
        font-size: 1rem;
    }
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.info-item {
    display: flex;
    gap: var(--spacing-sm);
}

.info-label {
    color: var(--noble-gold);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* Services List */
.services-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
}

.service-item {
    background: var(--bg-tertiary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-normal);
}

.service-item:hover {
    background: var(--noble-emerald-lighter);
    border-left: 3px solid var(--noble-gold);
}

.service-icon {
    color: var(--noble-gold);
    font-weight: 700;
}

/* Prices Table */
.prices-table {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--bg-primary);
}

.price-row:last-child {
    border-bottom: none;
}

.price-duration {
    color: var(--text-secondary);
    font-weight: 600;
}

.price-amount {
    color: var(--noble-gold);
    font-weight: 700;
    font-size: 1.2rem;
}

.price-note {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--noble-gold);
}

/* Bordell-Preishinweis (klein, dezent) */
.price-bordell-notice {
    margin-top: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: center;
}

.price-bordell-notice p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.4;
    opacity: 0.6;
    font-style: italic;
}

/* Contact Section */
.sedcard-contact {
    background: linear-gradient(135deg, var(--noble-emerald), var(--noble-emerald-light));
    border: 2px solid var(--noble-gold);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-lg);
}

.sedcard-contact h2 {
    color: var(--noble-gold);
    font-size: 2rem;
    margin: 0 0 var(--spacing-lg) 0;
}

.contact-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.btn-contact {
    background: var(--noble-gold);
    color: var(--noble-emerald);
    text-decoration: none;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1.1rem;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-md);
}

.btn-contact:hover {
    background: var(--noble-gold-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.contact-disclaimer {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* Similar Sedcards */
/* Legacy: Alte ähnliche Sedcards (Backward Compatibility) */
.sedcard-similar {
    margin-top: var(--spacing-xl);
}

.sedcard-similar h2 {
    color: var(--noble-gold);
    font-size: 2rem;
    margin: 0 0 var(--spacing-lg) 0;
    text-align: center;
}

.similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

/* NEU: Related Sedcards mit Ranking-System */
.related-sedcards-section {
    margin-top: 60px;
    padding: 40px 0;
    border-top: 1px solid rgba(219, 193, 109, 0.2);
}

.related-sedcards-section .section-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: var(--noble-gold);
    margin-bottom: 30px;
    text-align: center;
    font-weight: 600;
}

.related-sedcards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .related-sedcards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .related-sedcards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .related-sedcards-section {
        margin-top: 40px;
        padding: 30px 0;
    }
    
    .related-sedcards-section .section-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .related-sedcards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ========================================
   MODALS
   ======================================== */
.noble-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    /* IMPORTANT: keep modals out of layout/paint when closed
       to prevent "ghost" scrollbars on some browsers (esp. Windows). */
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.noble-modal.show {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    border: 2px solid var(--noble-gold);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: var(--shadow-lg);
    z-index: 2;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 2px solid var(--bg-tertiary);
}

.modal-header h2 {
    color: var(--noble-gold);
    margin: 0;
    font-size: 1.5rem;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-normal);
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--noble-gold);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    padding: var(--spacing-lg);
    border-top: 2px solid var(--bg-tertiary);
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

/* ========================================
   PREIS-BANNER (wie noble-sedcard-system)
   ======================================== */

/* Price Grid */
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

/* Price Cards */
.price-card {
    background: linear-gradient(135deg, 
        rgba(219, 193, 109, 0.25) 0%, 
        rgba(219, 193, 109, 0.15) 100%);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid rgba(219, 193, 109, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(219, 193, 109, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.price-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--noble-gold), 
        transparent);
    opacity: 0.5;
}

.price-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(219, 193, 109, 0.4),
                0 0 0 2px rgba(219, 193, 109, 0.5);
    border-color: var(--noble-gold);
    background: linear-gradient(135deg, 
        rgba(219, 193, 109, 0.3) 0%, 
        rgba(219, 193, 109, 0.2) 100%);
}

.price-card .price-duration {
    font-size: 12px;
    color: var(--noble-gold);
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    opacity: 1;
}

.price-card .price-amount {
    font-size: 32px;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Mobile Price Cards */
@media (max-width: 768px) {
    .price-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }
    
    .price-card {
        padding: 15px;
    }
    
    .price-card .price-duration {
        font-size: 12px;
    }
    
    .price-card .price-amount {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .price-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .price-card {
        padding: 15px;
    }
    
    .price-card .price-duration {
        font-size: 11px;
    }
    
    .price-card .price-amount {
        font-size: 20px;
    }
}

/* Preis-Fallback Styling */
.quick-price-fallback {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--noble-gold) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* WhatsApp Icon */
.whatsapp-icon {
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 1.2rem !important;
}

/* ========================================
   NOBLE LIGHTBOX - PREMIUM GALLERY VIEWER
   ======================================== */

/* 🔥 CRITICAL: Hide lightbox by default - only show when active */
.lightbox-modal,
#noble-lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    display: none !important; /* 🔥 Hidden by default */
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.97), rgba(20, 30, 20, 0.95)) !important;
    backdrop-filter: blur(20px) !important;
    padding: 20px !important;
}

.lightbox-modal.active,
#noble-lightbox.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Lightbox header offset to avoid overlap with noble-site-header */
#noble-lightbox {
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
}

@media (min-width: 1024px) {
    #noble-lightbox {
        padding-top: calc(env(safe-area-inset-top, 0px) + 96px) !important;
    }
}

/* Lightbox Container - Zentrale Box */
.lightbox-container {
    position: relative !important;
    width: calc(100vw - 100px) !important;
    height: calc(100vh - 100px) !important;
    max-width: 1400px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
}

/* Hauptbild/Video Container */
.lightbox-image-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

/* Bild Styles */
.lightbox-image {
    max-width: 100% !important;
    max-height: calc(100vh - 200px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 
                0 0 0 1px rgba(219, 193, 109, 0.2) !important;
}

/* Video Styles */
.lightbox-video {
    max-width: 100% !important;
    max-height: calc(100vh - 200px) !important;
    width: auto !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 
                0 0 0 1px rgba(219, 193, 109, 0.3) !important;
    background: #000 !important;
}

.lightbox-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    cursor: pointer !important;
}

.lightbox-container {
    position: relative !important;
    width: 90vw !important;
    max-width: 1200px !important;
    height: 90vh !important;
    max-height: 800px !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-card) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
    border: 2px solid rgba(219, 193, 109, 0.3) !important;
}

/* Close Button - Elegant X */
.lightbox-close {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 72px - 12px) !important;
    right: 30px !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(219, 193, 109, 0.1) !important;
    border: 2px solid rgba(219, 193, 109, 0.4) !important;
    border-radius: 50% !important;
    color: #DBB96D !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
}

@media (min-width: 1024px) {
    .lightbox-close {
        top: calc(env(safe-area-inset-top, 0px) + 96px - 12px) !important;
    }
}

.lightbox-close:hover {
    background: rgba(219, 193, 109, 0.2) !important;
    border-color: #DBB96D !important;
    transform: rotate(90deg) scale(1.1) !important;
    box-shadow: 0 0 20px rgba(219, 193, 109, 0.4) !important;
}

/* Navigation Arrows - Seitliche Pfeile */
.lightbox-nav,
.lightbox-prev,
.lightbox-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 60px !important;
    height: 60px !important;
    background: rgba(219, 193, 109, 0.1) !important;
    border: 2px solid rgba(219, 193, 109, 0.3) !important;
    border-radius: 50% !important;
    color: #DBB96D !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
}

.lightbox-nav:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(219, 193, 109, 0.2) !important;
    border-color: #DBB96D !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 0 20px rgba(219, 193, 109, 0.3) !important;
}

.lightbox-prev {
    left: 30px !important;
}

.lightbox-next {
    right: 30px !important;
}

/* Image Counter - Elegant Badge */
.lightbox-counter,
.image-counter {
    position: absolute !important;
    top: 30px !important;
    left: 30px !important;
    background: rgba(219, 193, 109, 0.15) !important;
    border: 1px solid rgba(219, 193, 109, 0.3) !important;
    color: #DBB96D !important;
    padding: 10px 20px !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px) !important;
    z-index: 100 !important;
    letter-spacing: 1px !important;
}

/* Image Container */
.lightbox-image-container {
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    overflow: hidden !important;
}

.lightbox-image {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* Loading Spinner */
.lightbox-loading {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
}

.loading-spinner {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid rgba(219, 193, 109, 0.3) !important;
    border-top: 3px solid var(--noble-gold) !important;
    border-radius: 50% !important;
    animation: lightbox-spin 1s linear infinite !important;
}

@keyframes lightbox-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Image Info */
.lightbox-info {
    padding: 20px !important;
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.1) 0%, rgba(219, 193, 109, 0.05) 100%) !important;
    border-top: 1px solid rgba(219, 193, 109, 0.2) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.lightbox-counter {
    font-size: 14px !important;
    color: var(--noble-gold) !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
}

.lightbox-caption {
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    max-width: 70% !important;
}

/* Thumbnail Navigation - Premium Style */
.lightbox-thumbnails {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 90% !important;
    padding: 15px 20px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(219, 193, 109, 0.3) !important;
    border-radius: 50px !important;
    backdrop-filter: blur(20px) !important;
    z-index: 100 !important;
}

.thumbnails-container {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding-bottom: 5px !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--noble-gold) transparent !important;
}

.thumbnails-container::-webkit-scrollbar {
    height: 6px !important;
}

.thumbnails-container::-webkit-scrollbar-track {
    background: transparent !important;
}

.thumbnails-container::-webkit-scrollbar-thumb {
    background: var(--noble-gold) !important;
    border-radius: 3px !important;
}

.lightbox-thumbnail {
    width: 70px !important;
    height: 70px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    cursor: pointer !important;
    border: 2px solid rgba(219, 193, 109, 0.2) !important;
    transition: all 0.3s ease !important;
    opacity: 0.5 !important;
    margin: 0 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.lightbox-thumbnail:hover {
    border-color: rgba(219, 193, 109, 0.6) !important;
    opacity: 0.8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(219, 193, 109, 0.3) !important;
}

.lightbox-thumbnail.active {
    border-color: #DBB96D !important;
    opacity: 1 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(219, 193, 109, 0.5) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .lightbox-container {
        width: 95vw !important;
        height: 95vh !important;
        border-radius: 15px !important;
    }
    
    .lightbox-close {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
        top: 15px !important;
        right: 15px !important;
    }
    
    .lightbox-nav {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
    }
    
    .lightbox-prev {
        left: 15px !important;
    }
    
    .lightbox-next {
        right: 15px !important;
    }
    
    .lightbox-image-container {
        padding: 15px !important;
    }
    
    .lightbox-info {
        padding: 15px !important;
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }
    
    .lightbox-caption {
        max-width: 100% !important;
    }
    
    .lightbox-thumbnails {
        padding: 10px 15px !important;
    }
    
    .lightbox-thumbnail {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ========================================
   DETAILSUCHE MODAL
   ======================================== */

.filter-group {
    margin-bottom: var(--spacing-lg);
}

/* Live Filter Counts */
.filter-count {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-left: 5px;
    font-weight: 500;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-label .filter-count {
    margin-left: auto;
    color: var(--noble-gold);
}

.filter-group label {
    display: block;
    color: var(--noble-gold);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    font-family: 'Inter', sans-serif;
}

.range-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.range-inputs input {
    flex: 1;
}

/* GLOBALER CHECKBOX OVERRIDE - ALLE FILTER PANELS */
.detail-search-panel .checkbox-group,
.filter-tab-content .checkbox-group,
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    background: transparent !important;
}

/* WICHTIG: Diese Styles werden durch spezifischere Filter-Styles überschrieben */
.checkbox-label {
    background: var(--bg-tertiary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.checkbox-label:hover {
    background: var(--bg-hover);
    border-left: 3px solid var(--noble-gold);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--noble-gold);
}

/* ========================================
   AGE GATE MODAL - NOBLE ATLAS CI
   Redesigned: Breiter, kompakter, kein Scrollen
   ======================================== */

/* Modal Container - Breiter und zentriert */
.age-gate-modal .modal-content {
    max-width: 800px;
    width: 90%;
    text-align: center;
    background: linear-gradient(135deg, 
        rgba(1, 34, 28, 0.98) 0%, 
        rgba(10, 58, 48, 0.98) 50%,
        rgba(1, 34, 28, 0.98) 100%);
    border: 2px solid var(--noble-gold);
    border-radius: var(--radius-lg);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(219, 193, 109, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* Hintergrund-Gradient Overlay */
.age-gate-modal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(219, 193, 109, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Logo Section - Kompakter */
.age-gate-logo {
    padding: 24px 32px 20px;
    border-bottom: 1px solid rgba(219, 193, 109, 0.3);
    position: relative;
    z-index: 1;
}

.logo-icon {
    font-size: 3rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 10px rgba(219, 193, 109, 0.5));
}

.age-gate-logo h1 {
    background: linear-gradient(135deg, var(--noble-gold) 0%, #f0d878 50%, var(--noble-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: 0.5px;
    filter: drop-shadow(0 2px 4px rgba(219, 193, 109, 0.3));
}

/* Body Section - Kompakter */
.age-gate-body {
    padding: 24px 32px 28px;
    position: relative;
    z-index: 1;
}

.age-gate-body h2 {
    color: var(--noble-gold);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    font-family: 'Inter', sans-serif;
    text-shadow: 0 2px 8px rgba(219, 193, 109, 0.3);
}

/* Warning & Question - Kompakter */
.age-gate-warning {
    margin-bottom: 20px;
    background: rgba(219, 193, 109, 0.05);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(219, 193, 109, 0.2);
}

.age-gate-warning p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0 0 8px 0;
    font-size: 0.95rem;
}

.age-gate-warning p:last-child {
    margin-bottom: 0;
}

.age-gate-question {
    margin-bottom: 24px;
}

.age-gate-question p {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

/* Action Buttons - Nebeneinander auf Desktop */
.age-gate-actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 20px;
}

/* YES Button - Gold Gradient */
.age-gate-actions .btn-age-yes {
    flex: 1;
    min-height: 56px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--noble-gold) 0%, #c9a952 100%) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 
        0 4px 15px rgba(219, 193, 109, 0.4),
        0 0 20px rgba(219, 193, 109, 0.2) !important;
    text-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
}

.age-gate-actions .btn-age-yes:hover {
    background: linear-gradient(135deg, #f0d878 0%, var(--noble-gold) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0 6px 25px rgba(219, 193, 109, 0.6),
        0 0 30px rgba(219, 193, 109, 0.3) !important;
}

.age-gate-actions .btn-age-yes:active {
    transform: translateY(0) scale(0.98) !important;
}

/* NO Button - Dunkel mit roter Akzent */
.age-gate-actions .btn-age-no {
    flex: 1;
    min-height: 56px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid rgba(255, 80, 80, 0.4) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.age-gate-actions .btn-age-no:hover {
    background: linear-gradient(135deg, rgba(255, 80, 80, 0.2) 0%, rgba(200, 50, 50, 0.2) 100%) !important;
    border-color: rgba(255, 80, 80, 0.6) !important;
    color: rgba(255, 100, 100, 0.9) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(255, 80, 80, 0.3) !important;
}

.age-gate-actions .btn-age-no:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Disclaimer - Kompakter */
.age-gate-disclaimer {
    padding-top: 16px;
    border-top: 1px solid rgba(219, 193, 109, 0.2);
}

.age-gate-disclaimer p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* Mobile - Buttons untereinander */
@media (max-width: 768px) {
    .age-gate-modal .modal-content {
        max-width: 95%;
        width: 95%;
    }
    
    .age-gate-logo {
        padding: 20px 20px 16px;
    }
    
    .logo-icon {
        font-size: 2.5rem;
    }
    
    .age-gate-logo h1 {
        font-size: 1.5rem;
    }
    
    .age-gate-body {
        padding: 20px 20px 24px;
    }
    
    .age-gate-body h2 {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }
    
    .age-gate-warning {
        padding: 12px;
        margin-bottom: 16px;
    }
    
    .age-gate-warning p {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .age-gate-question {
        margin-bottom: 20px;
    }
    
    .age-gate-question p {
        font-size: 1.05rem;
    }
    
    /* Buttons untereinander auf Mobile */
    .age-gate-actions {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .age-gate-actions button {
        width: 100% !important;
        min-height: 60px !important;
        font-size: 1rem !important;
    }
    
    .age-gate-disclaimer {
        padding-top: 12px;
    }
    
    .age-gate-disclaimer p {
        font-size: 0.75rem;
        line-height: 1.4;
    }
}

/* Sehr kleine Screens */
@media (max-width: 480px) {
    .age-gate-modal .modal-content {
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .age-gate-logo h1 {
        font-size: 1.35rem;
    }
    
    .age-gate-body h2 {
        font-size: 1.15rem;
    }
}

.age-gate-disclaimer {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Buttons */
.btn-primary {
    background: var(--noble-gold);
    color: var(--noble-emerald);
    border: none;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: var(--noble-gold-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 2px solid var(--bg-tertiary);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-secondary:hover {
    border-color: var(--noble-gold);
    color: var(--noble-gold);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
    /* Grid bleibt flex-basiert - keine grid-template-columns */
    .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid > .sedcard-card,
    .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > div.sedcard-card {
        flex: 0 0 calc(50% - 12px) !important; /* 2 columns: 50% minus half-gap */
        width: calc(50% - 12px) !important;
        min-width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
    
    .header-inner {
        flex-direction: column;
    }
    
    .header-right {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .archive-title {
        font-size: 2rem;
    }
    
    /* t5: Kein Block-Layout auf Mobile (verursacht 1-col + Layout-Sprung) */
    .noble-sedcard-grid,
    body .noble-sedcard-grid,
    body.noble-frontend-page .noble-sedcard-grid,
    .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    div.noble-sedcard-grid,
    div[class*="noble-sedcard-grid"] {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 12px !important;
        row-gap: 12px !important;
        column-gap: 12px !important;
        /* Disable ALL grid properties */
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        grid-auto-columns: auto !important;
        grid-auto-rows: auto !important;
        grid-auto-flow: row !important;
        grid-column-gap: 0 !important;
        grid-row-gap: 0 !important;
    }
    
    .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid > .sedcard-card,
    .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > div.sedcard-card {
        display: block !important;
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        min-width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        margin: 0 0 12px 0 !important;
        float: none !important;
    }
    
    .filter-controls {
        flex-direction: column;
    }
    
    .filter-control {
        min-width: 100%;
    }
    
    .contact-buttons {
        flex-direction: column;
    }
    
    .btn-contact {
        width: 100%;
        justify-content: center;
    }
    
    /* Tabs auf Mobile: Wrap statt horizontal scroll */
    .tabs-nav {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    
    .tab-btn {
        flex: 1 1 auto;
        min-width: 120px;
        font-size: 0.9rem;
        padding: var(--spacing-sm) var(--spacing-md);
        white-space: nowrap;
    }
    
    .similar-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 480px) {
    /* t5: Auch auf sehr kleinen Screens 2-spaltig (kein Block-Layout) */
    .noble-sedcard-grid,
    body .noble-sedcard-grid,
    body.noble-frontend-page .noble-sedcard-grid,
    .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    div.noble-sedcard-grid,
    div[class*="noble-sedcard-grid"] {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        gap: 12px !important;
        row-gap: 12px !important;
        column-gap: 12px !important;
    }
    
    .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid > .sedcard-card,
    .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > div.sedcard-card {
        display: block !important;
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        min-width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        margin: 0 0 12px 0 !important;
        float: none !important;
    }
    
    .sedcard-title {
        font-size: 1.8rem;
    }
    
    .quick-filters {
        justify-content: stretch;
    }
    
    .filter-btn {
        flex: 1;
        justify-content: center;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    /* Tabs noch kleiner auf sehr kleinen Screens */
    .tab-btn {
        font-size: 0.85rem;
        padding: var(--spacing-sm);
        min-width: 100px;
    }
}

/* ========================================
   LOADING & ANIMATIONS
   ======================================== */
.noble-loading {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 4px solid var(--bg-tertiary);
    border-top-color: var(--noble-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Fade In Animation */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   PHASE 2 IMPROVEMENTS
   ======================================== */

/* Icon-Liste (Kaufmich-Style) */
.icon-list-compact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.icon-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.icon-item:last-child {
    border-bottom: none;
}

.icon-item .icon {
    font-size: 1.25rem;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.icon-item .icon-text {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
}

/* Zeitplan Box (aus Tab raus) - Emerald CI */
.working-hours-box {
    background: linear-gradient(135deg, rgba(15, 68, 56, 0.7), rgba(7, 58, 47, 0.7)) !important;
    border: 1px solid rgba(219, 193, 109, 0.3) !important;
    box-shadow: 0 4px 15px rgba(7, 58, 47, 0.2) !important;
}

.available-today-badge {
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.95), rgba(184, 144, 45, 0.95));
    color: #000;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: var(--spacing-md);
    box-shadow: 0 4px 15px rgba(219, 193, 109, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.95; }
}

.working-hours-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

.hours-label {
    color: var(--noble-gold);
    font-weight: 600;
    font-size: 0.85rem;
}

.hours-value {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

.hours-item.hours-type {
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(219, 193, 109, 0.2);
}

.hours-item.hours-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
}

.hours-item.hours-day.today {
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.2), rgba(184, 144, 45, 0.15));
    border: 1px solid rgba(219, 193, 109, 0.4);
    box-shadow: 0 2px 8px rgba(219, 193, 109, 0.15);
}

.hours-day-name {
    color: var(--noble-gold);
    font-weight: 600;
    font-size: 0.9rem;
}

.hours-time {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Individuelle Zeitplanung Notice */
.individual-hours-notice {
    padding: var(--spacing-md);
    background: rgba(219, 193, 109, 0.1);
    border-left: 3px solid var(--noble-gold);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-sm);
}

.individual-hours-notice p {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.individual-hours-notice p:last-child {
    margin-bottom: 0;
}

.individual-hours-notice .notice-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

/* Enhanced CTA Buttons (Kaufmich-Style) */
.cta-buttons-enhanced {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.btn-cta-primary {
    background: linear-gradient(135deg, var(--noble-gold), #b8902d);
    color: #000;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(219, 193, 109, 0.4);
}

.btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(219, 193, 109, 0.6);
    background: linear-gradient(135deg, #f0d878, var(--noble-gold));
}

.cta-secondary-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.btn-cta-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid rgba(219, 193, 109, 0.3);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-cta-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--noble-gold);
    transform: translateY(-1px);
}

.btn-cta-secondary.btn-whatsapp:hover {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.2), rgba(37, 211, 102, 0.1));
    border-color: #25D366;
}

.btn-cta-tertiary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cta-tertiary:hover {
    background: var(--bg-tertiary);
    border-color: var(--noble-gold);
    color: var(--text-primary);
}

.cta-icon {
    font-size: 1.2rem;
}

.cta-text {
    font-family: 'Inter', sans-serif;
}

/* HEUTE VERFÜGBAR Badge (Header) - Emerald/Gold CI */
.badge-today-available {
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.95), rgba(184, 144, 45, 0.95)) !important;
    color: #000 !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    box-shadow: 0 4px 15px rgba(219, 193, 109, 0.5) !important;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Preis-Disclaimer (klein, unauffällig) */
.price-disclaimer {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.price-disclaimer p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    font-style: italic;
    opacity: 0.7;
}

/* Sticky CTA Bar (Bottom, Mobile + Desktop) */
/* ==================== STICKY CTA BAR (Kompakt wie Endverbraucher Dashboard) ==================== */

.sticky-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px; /* EXTRA KOMPAKT - noch kleiner als Dashboard */
    background: linear-gradient(180deg, #01221c 0%, #1c3c2c 100%); /* Emerald/Moss Gradient */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 4px 0;
    /* PWA Safe Area Support */
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    justify-content: space-around; /* Wie Dashboard - Buttons nebeneinander */
    align-items: center;
    gap: 16px;
}

.sticky-cta-bar .sticky-cta-btn {
    flex: 1;
    min-width: 0;
    max-width: 140px;
}

@media (max-width: 1024px) {
    .sticky-cta-bar {
        display: flex;
    }
}

/* PWA Mode: Always visible */
body.is-pwa .sticky-cta-bar {
    display: flex !important;
}

.sticky-cta-bar.visible {
    display: flex;
}

.sticky-cta-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px; /* Noch kleinerer Gap */
    padding: 4px 8px; /* EXTRA KOMPAKT */
    color: rgba(248, 245, 240, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 9px; /* NOCH KLEINER */
    font-weight: 600;
    min-width: 50px; /* Kleiner */
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1.1; /* Kompakter Zeilenabstand */
}

.sticky-cta-btn svg {
    stroke: currentColor;
    width: 20px; /* Kleineres Icon */
    height: 20px;
}

.sticky-cta-btn:hover,
.sticky-cta-btn.active {
    color: #dbc16d; /* Noble Gold */
}

.sticky-cta-btn.btn-call {
    color: #dbc16d; /* Gold für Call Button */
}

.sticky-cta-btn.btn-call:hover {
    color: #ecd292; /* Lighter Gold */
}

/* Alte CSS-Regeln entfernt - jetzt kompakt wie Dashboard */

/* ==================== JUMP NAVIGATION (Mobile/Tablet ONLY) ==================== */

.sedcard-jump-nav {
    display: none;
    position: relative; /* Anfangs relativ */
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(180deg, rgba(1, 34, 28, 0.98), rgba(1, 34, 28, 0.95));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border-bottom: 1px solid rgba(219, 193, 109, 0.3);
    padding: 8px 0;
    margin: 0;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    width: 100%;
    transition: all 0.3s ease;
}

/* Sticky nach erstem Scrollen – unter noble-site-header (88px) positionieren, damit Quick Nav nicht überlagert wird */
.sedcard-jump-nav.sticky-active {
    position: fixed;
    top: 88px;
    z-index: 9999;
    margin-bottom: 0;
    animation: slideDown 0.3s ease;
}

@media (max-width: 1024px) {
    .sedcard-jump-nav {
        display: block;
    }
}

.jump-nav-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px; /* Erhöht von 4px für besseren Abstand */
    padding: 0 16px; /* Erhöht von 12px für mehr Platz */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.jump-nav-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.jump-nav-item {
    display: flex;
    align-items: center;
    gap: 8px; /* Erhöht von 6px */
    padding: 10px 16px; /* Erhöht von 8px 12px für mehr Platz */
    background: rgba(219, 193, 109, 0.1);
    border: 1px solid rgba(219, 193, 109, 0.2);
    border-radius: 20px;
    color: rgba(248, 245, 240, 0.8);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.jump-nav-item:hover,
.jump-nav-item.active {
    background: rgba(219, 193, 109, 0.2);
    border-color: #dbc16d;
    color: #dbc16d;
    transform: translateY(-2px);
}

.jump-nav-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Smooth Scroll für Anchor Links - Performance optimiert */
html {
    scroll-behavior: smooth;
}

/* Performance Optimierungen für Scrolling - DEEP FIX */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    overflow-x: hidden; /* Verhindere horizontal scroll */
}

html {
    overflow-x: hidden;
}

/* GPU Acceleration für animierte Elemente */
.sticky-cta-bar,
.sedcard-jump-nav,
.pwa-install-banner,
.mobile-user-menu,
.mobile-contact-menu {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Entferne smooth scroll - Kann Performance Probleme verursachen */
html {
    scroll-behavior: auto !important; /* Deaktiviere smooth scroll global */
}

/* Nur für Anchor Links smooth scroll aktivieren */
.jump-nav-item[href^="#"] {
    scroll-behavior: smooth;
}

/* Verhindere Layout Thrashing */
img, video, iframe {
    content-visibility: auto;
    contain: layout style paint;
}

/* Optimiere große Listen */
.sedcard-grid,
.noble-mobile-bottom-nav,
.thread-list {
    contain: layout style;
}

/* Scroll Padding für Sticky Header */
#gallery,
#arbeitszeiten,
#about-services,
#standort,
#bewertungen {
    scroll-margin-top: 80px; /* Jump Nav (60px) + Safety (20px) */
}

/* ==================== CONTACT MENU (Slide-up) ==================== */

.mobile-contact-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-contact-menu.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.contact-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.contact-menu-content {
    position: relative;
    background: linear-gradient(135deg, #01221c, #1c3c2c);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    border-top: 2px solid #dbc16d;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-contact-menu.active .contact-menu-content {
    transform: translateY(0);
}

.contact-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(219, 193, 109, 0.2);
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #01221c, #1c3c2c);
    z-index: 1;
}

.contact-menu-header h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    color: #dbc16d;
}

.contact-menu-close {
    background: transparent;
    border: none;
    color: #dbc16d;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.contact-menu-close:hover {
    transform: rotate(90deg);
}

.contact-menu-items {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(219, 193, 109, 0.1);
    border: 1px solid rgba(219, 193, 109, 0.2);
    border-radius: 12px;
    text-decoration: none;
    color: #f8f5f0;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.contact-menu-item:hover {
    background: rgba(219, 193, 109, 0.2);
    border-color: #dbc16d;
    transform: translateX(4px);
}

.contact-menu-item .menu-item-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.contact-menu-item .menu-item-text {
    flex: 1;
    font-weight: 600;
    font-size: 15px;
}

.contact-menu-item .menu-item-value {
    display: none; /* Versteckt - keine Nummern/E-Mails anzeigen */
}

/* Services als Badges (Noble Atlas CI) */
.services-modern .content-section {
    margin-bottom: var(--spacing-xl);
    background: transparent !important;
    padding: var(--spacing-md) 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.services-modern .content-section.service-category {
    background: transparent !important;
}

.services-modern .category-title {
    color: var(--noble-gold);
    font-size: 1.3rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid rgba(219, 193, 109, 0.3);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.services-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.service-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, 
        rgba(15, 68, 56, 0.6), 
        rgba(7, 58, 47, 0.5)
    );
    border: 1px solid rgba(219, 193, 109, 0.4);
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: default;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.service-badge:hover {
    background: linear-gradient(135deg, 
        rgba(219, 193, 109, 0.3), 
        rgba(184, 144, 45, 0.25)
    );
    border-color: var(--noble-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(219, 193, 109, 0.3);
    color: #fff;
}

.service-badge[data-tooltip] {
    cursor: help;
    position: relative;
}

.service-badge[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #000, rgba(0, 0, 0, 0.95));
    color: var(--noble-gold);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(219, 193, 109, 0.5);
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease;
}

.service-badge[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #000;
    z-index: 999;
    pointer-events: none;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translate(-50%, 4px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.service-badge .tooltip-icon {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-left: 6px;
    color: var(--noble-gold);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(219, 193, 109, 0.6);
    filter: brightness(1.3);
}

.service-badge:hover .tooltip-icon {
    opacity: 1;
    animation: iconPulse 0.5s ease;
    text-shadow: 0 0 15px rgba(219, 193, 109, 0.9);
    filter: brightness(1.5);
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.service-for-badge {
    background: linear-gradient(135deg, 
        rgba(219, 193, 109, 0.3), 
        rgba(184, 144, 45, 0.2)
    );
    border: 2px solid var(--noble-gold);
    font-weight: 600;
    color: var(--noble-gold);
}

.service-for-badge:hover {
    background: linear-gradient(135deg, 
        rgba(219, 193, 109, 0.4), 
        rgba(184, 144, 45, 0.3)
    );
    box-shadow: 0 4px 15px rgba(219, 193, 109, 0.4);
}

/* Kompakte Summary-Box (Redesign der ersten Card) */
.quick-summary-box {
    background: linear-gradient(135deg, 
        rgba(15, 68, 56, 0.8), 
        rgba(7, 58, 47, 0.7)
    ) !important;
    border: 1px solid rgba(219, 193, 109, 0.4) !important;
}

.summary-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(219, 193, 109, 0.2);
}

.summary-price {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.summary-price .price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--noble-gold);
    font-family: 'Playfair Display', Georgia, serif;
}

.summary-price .price-duration {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.summary-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    width: fit-content;
}

.summary-status.online {
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.summary-status.recent {
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.3);
}

.summary-status .status-dot {
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.summary-status .status-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #00ff88;
}

.summary-status.recent .status-text {
    color: #ffa500;
}

/* Bordell-Verlinkung */
.bordell-info {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(219, 193, 109, 0.1);
    border-left: 3px solid var(--noble-gold);
    border-radius: var(--radius-sm);
}

.bordell-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.bordell-link:hover {
    transform: translateX(4px);
}

.bordell-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.bordell-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bordell-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bordell-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--noble-gold);
}

/* Boost Button Styles */
/* Boost Icon (replaces Boost Button) - Modern SVG Design */
.btn-boost-icon {
    position: relative;
    background: linear-gradient(135deg, #dbc16d 0%, #ecd292 100%);
    border: 2px solid #dbc16d;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(219, 193, 109, 0.4), 
                0 0 0 0 rgba(219, 193, 109, 0.1);
    padding: 0;
    margin: 0;
    overflow: visible;
}

.btn-boost-icon:hover:not(.disabled):not(.loading) {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 25px rgba(219, 193, 109, 0.5),
                0 0 20px rgba(219, 193, 109, 0.2);
    background: linear-gradient(135deg, #ecd292 0%, #dbc16d 100%);
    border-color: #dbc16d;
}

.btn-boost-icon:active:not(.disabled):not(.loading) {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 15px rgba(219, 193, 109, 0.4);
}

.btn-boost-icon .boost-icon-svg {
    width: 24px;
    height: 24px;
    color: #01221c;
    stroke: #01221c;
    stroke-width: 2;
    transition: all 0.3s ease;
    flex-shrink: 0;
    pointer-events: none; /* Allow clicks to pass through to button */
}

.btn-boost-icon:hover:not(.disabled):not(.loading) .boost-icon-svg {
    transform: translateY(-2px);
    color: #01221c;
    stroke: #01221c;
}

.btn-boost-icon .boost-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #01221c 0%, #1c3c2c 100%);
    color: #dbc16d;
    border-radius: 14px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    border: 2px solid #dbc16d;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(1, 34, 28, 0.4);
    font-family: 'Lato', sans-serif;
    line-height: 1.2;
}

.btn-boost-icon.loading {
    opacity: 0.7;
    cursor: not-allowed;
    animation: boost-pulse 1.5s ease-in-out infinite;
}

.btn-boost-icon.loading .boost-icon-svg {
    animation: boost-rotate 1s linear infinite;
}

.btn-boost-icon.boosted {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4),
                0 0 20px rgba(16, 185, 129, 0.2) !important;
}

.btn-boost-icon.boosted .boost-icon-svg {
    color: #ffffff;
    stroke: #ffffff;
}

.btn-boost-icon.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    border-color: #6c757d !important;
    box-shadow: none !important;
}

.btn-boost-icon.disabled .boost-icon-svg {
    color: #ffffff;
    stroke: #ffffff;
    opacity: 0.6;
}

@keyframes boost-pulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(219, 193, 109, 0.4), 
                    0 0 0 0 rgba(219, 193, 109, 0.1);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(219, 193, 109, 0.5), 
                    0 0 0 4px rgba(219, 193, 109, 0.1);
    }
}

@keyframes boost-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-boost-sedcard.boosted .btn-badge {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Kompakter Primary Button */
.btn-primary-compact {
    background: linear-gradient(135deg, var(--noble-gold), rgba(184, 144, 45, 0.9));
    color: #000;
    border: none;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(219, 193, 109, 0.4);
    width: 100%;
    white-space: nowrap; /* Verhindert Umbruch */
    min-height: 56px;
}

.btn-primary-compact:hover {
    background: linear-gradient(135deg, #f0d878, var(--noble-gold));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(219, 193, 109, 0.6);
}

.btn-primary-compact .btn-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.btn-primary-compact .btn-text {
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1200px) {
    .btn-primary-compact {
        font-size: 0.9rem;
        padding: 12px 16px;
    }
    
    .btn-primary-compact .btn-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .btn-primary-compact {
        font-size: 0.85rem;
        padding: 12px 14px;
        min-height: 50px;
    }
    
    .btn-primary-compact .btn-icon {
        font-size: 1rem;
    }
    
    .btn-primary-compact .btn-text {
        font-size: 0.85rem;
    }
}

/* ========================================
   WEITERE KONTAKTMÖGLICHKEITEN - Modern Styled
   ======================================== */

.additional-contact-methods-box {
    margin-top: 20px;
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(219, 193, 109, 0.15);
    position: relative;
    overflow: hidden;
}

.additional-contact-methods-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(219, 193, 109, 0.3), 
        transparent
    );
}

.additional-contact-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(219, 193, 109, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.additional-contact-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-contact-method {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
    border: 1px solid rgba(219, 193, 109, 0.3);
    border-radius: 12px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-contact-method:hover {
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.15) 0%, rgba(219, 193, 109, 0.08) 100%);
    border-color: rgba(219, 193, 109, 0.5);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(219, 193, 109, 0.15);
}

.btn-contact-method .method-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-contact-method .method-icon svg {
    width: 100%;
    height: 100%;
    color: rgba(219, 193, 109, 0.9);
}

.btn-contact-method .method-text {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}

/* WhatsApp spezifisches Styling */
.btn-contact-method.btn-whatsapp {
    border-color: rgba(37, 211, 102, 0.3);
}

.btn-contact-method.btn-whatsapp:hover {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.15) 0%, rgba(37, 211, 102, 0.08) 100%);
    border-color: rgba(37, 211, 102, 0.5);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}

.btn-contact-method.btn-whatsapp .method-icon svg {
    color: rgba(37, 211, 102, 0.9);
}

/* Telefon spezifisches Styling */
.btn-contact-method.btn-phone .method-icon svg {
    color: rgba(52, 152, 219, 0.9);
}

.btn-contact-method.btn-phone:hover {
    border-color: rgba(52, 152, 219, 0.5);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}

/* Threema spezifisches Styling (Grün) */
.btn-contact-method.btn-threema {
    border-color: rgba(62, 178, 73, 0.3);
}

.btn-contact-method.btn-threema:hover {
    background: linear-gradient(135deg, rgba(62, 178, 73, 0.15) 0%, rgba(62, 178, 73, 0.08) 100%);
    border-color: rgba(62, 178, 73, 0.5);
    box-shadow: 0 4px 12px rgba(62, 178, 73, 0.2);
}

.btn-contact-method.btn-threema .method-icon svg {
    color: rgba(62, 178, 73, 0.9);
}

/* Signal spezifisches Styling (Blau) */
.btn-contact-method.btn-signal {
    border-color: rgba(58, 134, 255, 0.3);
}

.btn-contact-method.btn-signal:hover {
    background: linear-gradient(135deg, rgba(58, 134, 255, 0.15) 0%, rgba(58, 134, 255, 0.08) 100%);
    border-color: rgba(58, 134, 255, 0.5);
    box-shadow: 0 4px 12px rgba(58, 134, 255, 0.2);
}

.btn-contact-method.btn-signal .method-icon svg {
    color: rgba(58, 134, 255, 0.9);
}

/* Telegram spezifisches Styling (Hell-Blau) */
.btn-contact-method.btn-telegram {
    border-color: rgba(42, 171, 238, 0.3);
}

.btn-contact-method.btn-telegram:hover {
    background: linear-gradient(135deg, rgba(42, 171, 238, 0.15) 0%, rgba(42, 171, 238, 0.08) 100%);
    border-color: rgba(42, 171, 238, 0.5);
    box-shadow: 0 4px 12px rgba(42, 171, 238, 0.2);
}

.btn-contact-method.btn-telegram .method-icon svg {
    color: rgba(42, 171, 238, 0.9);
}

/* E-Mail spezifisches Styling (Grau) */
.btn-contact-method.btn-email .method-icon svg {
    color: rgba(169, 169, 169, 0.9);
}

/* ========================================
   BORDELL PROFILE PAGE
   ======================================== */

.noble-bordell-profile {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 !important;
    background: transparent !important;
}

/* Header (wie Sedcard-Header) */
.bordell-header-modern {
    background: linear-gradient(135deg, rgba(10, 75, 60, 0.95) 0%, rgba(15, 95, 75, 0.95) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--noble-gold);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.bordell-header-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(219, 193, 109, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.bordell-header-modern .header-content {
    position: relative;
    z-index: 1;
}

.bordell-header-modern .header-badges {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.badge-bordell {
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.2) 0%, rgba(219, 193, 109, 0.1) 100%);
    border: 1px solid var(--noble-gold);
    color: var(--noble-gold);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(5px);
}

.bordell-title-modern {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--noble-gold) 0%, #f0d878 50%, var(--noble-gold) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin: 0 0 var(--spacing-md) 0 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(219, 193, 109, 0.5));
}

.bordell-meta-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 1rem;
}

.bordell-meta-modern .meta-tag {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.bordell-meta-modern .meta-location {
    color: var(--noble-gold);
    font-weight: 600;
}

.bordell-meta-modern .meta-separator {
    color: rgba(255, 255, 255, 0.4);
}

/* Content Layout */
.bordell-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--spacing-xl);
    padding: 0 var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

@media (max-width: 968px) {
    .bordell-header-modern {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .bordell-title-modern {
        font-size: 2.5rem !important;
    }
    
    .bordell-content-wrapper {
        grid-template-columns: 1fr;
        padding: 0 var(--spacing-sm);
    }
    
    .bordell-sidebar {
        order: -1;
    }
}

/* Main Content Sections */
.bordell-description-section,
.bordell-sedcards-section {
    margin-bottom: var(--spacing-xl);
}

.bordell-description-section .section-header,
.bordell-sedcards-section .section-header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid rgba(219, 193, 109, 0.3);
}

.bordell-description-section .section-title,
.bordell-sedcards-section .section-title {
    color: var(--noble-gold);
    font-size: 2rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    margin: 0;
}

.bordell-description-section .description-content {
    background: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(219, 193, 109, 0.2);
    line-height: 1.8;
    color: var(--text-primary);
}

.bordell-description-section .description-content p {
    margin-bottom: var(--spacing-md);
}

.bordell-description-section .description-content p:last-child {
    margin-bottom: 0;
}

/* DEAKTIVIERT: Wird jetzt von bordell-sedcards-grid.css gehandhabt (4-Spalten-Grid)
.bordell-sedcards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}
*/

/* Bordell Sidebar (re-use Sedcard Sidebar Styles) */
.bordell-sidebar {
    position: sticky;
    top: 100px;
}

.bordell-info-box .icon-list-compact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.bordell-info-box .icon-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(219, 193, 109, 0.05);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.bordell-info-box .icon-item:hover {
    background: rgba(219, 193, 109, 0.1);
    transform: translateX(4px);
}

.bordell-info-box .icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    filter: grayscale(0.3);
}

.bordell-info-box .icon-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.bordell-info-box .icon-link {
    color: var(--noble-gold);
    text-decoration: none;
    transition: all 0.3s ease;
}

.bordell-info-box .icon-link:hover {
    color: #f0d878;
    text-decoration: underline;
}

/* Empty State */
.empty-state-elegant {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--bg-card);
    border: 2px dashed rgba(219, 193, 109, 0.3);
    border-radius: var(--radius-lg);
    margin: var(--spacing-lg) 0;
}

.empty-state-elegant .empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state-elegant .empty-text {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.empty-state-elegant .empty-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ========================================
   BORDELL CONTENT SECTIONS
   ======================================== */

/* General Section Styling */
.bordell-section {
    margin-bottom: var(--spacing-xl);
}

.bordell-section .section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid rgba(219, 193, 109, 0.3);
}

.bordell-section .section-icon {
    font-size: 1.5rem;
    filter: grayscale(0.2);
}

.bordell-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--noble-gold);
    font-size: 2rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    margin: 0;
}

.bordell-section .section-content {
    background: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(219, 193, 109, 0.2);
    line-height: 1.8;
}

/* Description Section */
.bordell-description-section .section-content p {
    margin-bottom: var(--spacing-md);
}

.bordell-description-section .section-content p:last-child {
    margin-bottom: 0;
}

/* Gallery Section */
.bordell-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.bordell-gallery-grid .gallery-item {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.bordell-gallery-grid .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.bordell-gallery-grid .gallery-item:hover img {
    transform: scale(1.05);
}

/* Ausstattung Section */
.ausstattung-category {
    margin-bottom: var(--spacing-lg);
}

.ausstattung-category:last-child {
    margin-bottom: 0;
}

.ausstattung-category .category-title {
    color: var(--noble-gold);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.ausstattung-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.ausstattung-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.15) 0%, rgba(219, 193, 109, 0.05) 100%);
    border: 1px solid rgba(219, 193, 109, 0.3);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ausstattung-badge:hover {
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.25) 0%, rgba(219, 193, 109, 0.15) 100%);
    border-color: var(--noble-gold);
    transform: translateY(-2px);
}

.besonderheiten-text {
    background: rgba(219, 193, 109, 0.05);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--noble-gold);
    margin-top: var(--spacing-sm);
}

/* Anfahrt Section */
.anfahrt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    padding: 0 !important;
    background: transparent !important;
}

.anfahrt-card {
    background: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid rgba(219, 193, 109, 0.2);
    transition: all 0.3s ease;
}

.anfahrt-card:hover {
    border-color: var(--noble-gold);
    box-shadow: 0 4px 12px rgba(219, 193, 109, 0.2);
}

.anfahrt-card .card-title {
    color: var(--noble-gold);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.anfahrt-card .card-content {
    color: var(--text-primary);
    line-height: 1.7;
}

.anfahrt-card .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.anfahrt-card .feature-list li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(219, 193, 109, 0.1);
}

.anfahrt-card .feature-list li:last-child {
    border-bottom: none;
}

.anfahrt-card .feature-list li::before {
    content: '✓';
    color: var(--noble-gold);
    font-weight: bold;
    margin-right: var(--spacing-sm);
}

/* Sidebar Boxes */
.sidebar-box .sidebar-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.sidebar-box .title-icon {
    font-size: 1.125rem;
    filter: grayscale(0.3);
}

/* Payment Box */
.payment-box .payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.payment-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.15) 0%, rgba(219, 193, 109, 0.05) 100%);
    border: 1px solid rgba(219, 193, 109, 0.3);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Languages Box */
.languages-box .languages-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.languages-box .language-group {
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(219, 193, 109, 0.15);
}

.languages-box .language-group:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.languages-box .language-subtitle {
    color: var(--noble-gold);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
}

.languages-box .language-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.language-tag {
    display: inline-block;
    padding: 4px var(--spacing-sm);
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.2) 0%, rgba(219, 193, 109, 0.1) 100%);
    border: 1px solid rgba(219, 193, 109, 0.3);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 500;
}

.language-tag-secondary {
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.1) 0%, rgba(219, 193, 109, 0.05) 100%);
    border-color: rgba(219, 193, 109, 0.2);
}

/* Bordell CTA Button */
.btn-bordell-cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--noble-gold) 0%, #c9a952 100%);
    color: #000;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(219, 193, 109, 0.4);
}

.btn-bordell-cta:hover {
    background: linear-gradient(135deg, #f0d878 0%, var(--noble-gold) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(219, 193, 109, 0.6);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .bordell-section .section-title {
        font-size: 1.5rem;
    }
    
    .bordell-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--spacing-sm);
    }
    
    .anfahrt-grid {
        grid-template-columns: 1fr;
    }
    
    .ausstattung-badges {
        gap: var(--spacing-xs);
    }
    
    .ausstattung-badge {
        font-size: 0.8125rem;
        padding: 6px var(--spacing-sm);
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

/* ========================================
   MOBILE OPTIMIZATIONS - FILTER
   ======================================== */
@media (max-width: 768px) {
    /* Detail Search Panel - kompakter */
    .detail-search-panel {
        margin-top: 12px;
    }
    
    .detail-search-inner {
        padding: 12px !important;
    }
    
    .detail-search-inner h3 {
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
    }
    
    /* Filter Tabs - kompakter */
    .filter-tabs {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }
    
    .filter-tab {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
    
    /* Filter Groups - kompakter */
    .filter-tab-content {
        padding: 12px !important;
    }
    
    .detail-search-panel .filter-group,
    .filter-tab-content .filter-group {
        margin-bottom: 16px !important;
    }
    
    .detail-search-panel .filter-group label,
    .filter-tab-content .filter-group label {
        font-size: 0.875rem !important;
        margin-bottom: 8px !important;
    }
    
    /* Checkbox Group - EINE Spalte auf Mobile */
    .detail-search-panel .checkbox-group,
    .filter-tab-content .checkbox-group,
    #noble-detail-search-form .checkbox-group {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    /* Checkbox Labels - kompakter */
    #noble-detail-search-form .checkbox-label,
    .detail-search-panel .checkbox-label {
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    
    #noble-detail-search-form .checkbox-label span,
    .detail-search-panel .checkbox-label span {
        font-size: 0.85rem !important;
    }
    
    #noble-detail-search-form .checkbox-label input[type="checkbox"],
    .detail-search-panel .checkbox-label input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Selects - kompakter */
    .detail-search-panel .filter-select,
    .detail-search-panel select,
    .filter-tab-content select,
    #noble-detail-search-form select {
        padding: 10px 12px !important;
        font-size: 0.875rem !important;
    }
    
    /* Range Inputs - kompakter */
    .detail-search-panel .range-inputs input,
    .filter-tab-content .range-inputs input,
    #noble-detail-search-form input[type="number"] {
        padding: 8px 10px !important;
        font-size: 0.875rem !important;
    }
    
    .detail-search-panel .range-inputs span {
        font-size: 0.875rem !important;
    }
    
    /* Action Buttons - kompakter */
    .detail-search-actions {
        padding: 12px !important;
        gap: 8px !important;
    }
    
    .detail-search-actions button {
        padding: 10px 16px !important;
        font-size: 0.875rem !important;
    }
}

/* Sehr kleine Screens (< 480px) */
@media (max-width: 480px) {
    .detail-search-inner h3 {
        font-size: 1.1rem !important;
    }
    
    .filter-tab {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }
    
    #noble-detail-search-form .checkbox-label,
    .detail-search-panel .checkbox-label {
        padding: 6px 10px !important;
    }
    
    #noble-detail-search-form .checkbox-label span,
    .detail-search-panel .checkbox-label span {
        font-size: 0.8rem !important;
    }
}

/* ========================================
   ANALYTICS BOX (Sidebar Single Page)
   @since 2.23.0
   ======================================== */
.analytics-box {
    background: linear-gradient(135deg, rgba(219, 193, 109, 0.1), rgba(219, 193, 109, 0.05));
    border: 1px solid rgba(219, 193, 109, 0.3);
}

.analytics-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.stat-item.stat-trending {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 107, 107, 0.1));
    border: 1px solid rgba(255, 107, 107, 0.3);
    animation: trending-glow 2s ease-in-out infinite;
}

@keyframes trending-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 107, 107, 0); }
    50% { box-shadow: 0 0 20px rgba(255, 107, 107, 0.3); }
}

.stat-icon {
    font-size: 24px;
    line-height: 1;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-value {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 700;
}

.stat-item.stat-trending .stat-value {
    color: #ff6b6b;
}

/* ========================================
   ANALYTICS BADGES (View Counter, Trending)
   @since 2.23.0
   ======================================== */
/* ALTE Analytics Badges (Legacy - nicht mehr verwendet) */
.analytics-badges {
    display: none; /* Jetzt als Overlay im Bild */
}

/* NEUE Analytics Badges - Im Bild-Overlay (Unten Links) */
.analytics-badges-overlay {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    display: flex;
    gap: 6px;
}

.trending-badge-small {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: #fff;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.5);
    backdrop-filter: blur(8px);
    animation: trending-pulse 2s ease-in-out infinite;
}

@keyframes trending-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.view-count-badge-small {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Mobile */
@media (max-width: 768px) {
    .analytics-badges-overlay {
        bottom: 6px;
        left: 6px;
    }
    
    .trending-badge-small,
    .view-count-badge-small {
        font-size: 10px;
        padding: 3px 8px;
    }
}

/* ========================================
   SPECIALS BOX & BADGES
   @since 2.41.0 (Redesign)
   ======================================== */

/* Specials Badge auf Cards (im Bild, oben links) */
.special-badge-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
}

.special-badge-small {
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    animation: special-pulse 2s infinite;
}

@keyframes special-pulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.5);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(255, 107, 107, 0.7);
    }
}

/* Specials Box auf Single-Page (Sidebar) */
.special-box {
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: #fff;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(255, 107, 107, 0.4);
    position: relative;
    overflow: hidden;
}

.special-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: special-glow 8s ease-in-out infinite;
}

@keyframes special-glow {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-20px, 20px); }
}

.special-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
}

.special-icon {
    font-size: 28px;
    line-height: 1;
}

.special-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    font-family: 'Playfair Display', serif;
}

.special-offer-simple {
    margin: 20px 0;
}

.special-price-display {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.special-price {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    font-family: 'Playfair Display', serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.special-duration {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
}

.special-description {
    margin: 12px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
}

.special-countdown {
    margin-top: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-weight: 700;
    text-align: center;
    font-size: 15px;
    animation: countdown-blink 1.5s infinite;
}

@keyframes countdown-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Mobile */
@media (max-width: 768px) {
    .special-box {
        padding: 16px;
    }
    
    .special-title {
        font-size: 18px;
    }
    
    .special-price {
        font-size: 26px;
    }
    
    .original-price {
        font-size: 16px;
    }
    
    .special-discount {
        font-size: 16px;
        padding: 6px 12px;
    }
    
    .special-badge-small {
        font-size: 11px;
        padding: 5px 10px;
    }
}

.specials-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.special-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 107, 107, 0.2);
    transition: all 0.2s ease;
}

.special-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 107, 107, 0.4);
}

.special-title {
    color: var(--noble-gold);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.special-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.5;
}

.special-description p {
    margin: 0 0 8px 0;
}

.special-description p:last-child {
    margin-bottom: 0;
}

.special-price {
    font-size: 20px;
    color: #ff6b6b;
    font-weight: 700;
    margin-bottom: 8px;
}

.special-expires {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.special-expires strong {
    color: #ff6b6b;
}

/* Special Badge on Cards */
.badge-special {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f) !important;
    color: #fff !important;
    border: none !important;
    animation: special-glow 2s ease-in-out infinite;
}

@keyframes special-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 107, 107, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 107, 107, 0.6); }
}

/* ========================================
   AVAILABILITY BADGE ON CARDS
   @since 2.22.0
   UPDATED v2.23.3: Jetzt als Overlay im Bild!
   ======================================== */
/* ALTE Badge (Legacy - nicht mehr verwendet) */
.availability-badge-card {
    display: none; /* Jetzt als Overlay im Bild */
}

/* NEUE Availability Badge - Im Bild-Overlay (Unten Rechts) */
.availability-badge-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 3;
    background: linear-gradient(135deg, #00ff88, #00cc6a);
    color: #000;
    padding: 5px 12px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 255, 136, 0.5);
    backdrop-filter: blur(8px);
    line-height: 1;
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px) {
    .availability-badge-overlay {
        bottom: 6px;
        right: 6px;
        font-size: 10px;
        padding: 4px 10px;
    }
}

/* ========================================
   t5 MOBILE SEARCH GRID (2 COLUMNS)
   Reason: Ultra-specific desktop flex rules override mobile.
   Goal: Always 2 cards per row on mobile (including AJAX results).
   ======================================== */
@media (max-width: 980px) {
    /* Keep the grid flex-based and controllable */
    .noble-sedcard-grid,
    body .noble-sedcard-grid,
    body.noble-frontend-page .noble-sedcard-grid,
    .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    div.noble-sedcard-grid,
    div[class*="noble-sedcard-grid"],
    #main-content .noble-sedcard-grid,
    #main-content .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    .et_pb_section .noble-sedcard-grid,
    .et_pb_row .noble-sedcard-grid,
    .et_pb_column .noble-sedcard-grid,
    .et_pb_column .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    .et_pb_row .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    .et_pb_section .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    body #main-content .noble-sedcard-grid,
    body #main-content .noble-sedcard-grid-wrapper .noble-sedcard-grid,
    body .et_pb_column .noble-sedcard-grid,
    body .et_pb_row .noble-sedcard-grid,
    body .et_pb_section .noble-sedcard-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        row-gap: 12px !important;
        column-gap: 12px !important;
        justify-content: flex-start !important;
    }

    /* Force 2 columns */
    .noble-sedcard-grid > .sedcard-card,
    .noble-sedcard-grid > .sedcard-wrapper,
    body .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid > .sedcard-wrapper,
    body.noble-frontend-page .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid > .sedcard-wrapper,
    .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-wrapper,
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-wrapper,
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    body.noble-frontend-page .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-wrapper,
    div.noble-sedcard-grid > .sedcard-card,
    div.noble-sedcard-grid > .sedcard-wrapper,
    div.noble-sedcard-grid > div.sedcard-card,
    #main-content .noble-sedcard-grid > .sedcard-card,
    #main-content .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card,
    .et_pb_section .noble-sedcard-grid > .sedcard-card,
    .et_pb_row .noble-sedcard-grid > .sedcard-card,
    .et_pb_column .noble-sedcard-grid > .sedcard-card,
    body #main-content .noble-sedcard-grid > .sedcard-card,
    body #main-content .noble-sedcard-grid-wrapper .noble-sedcard-grid > .sedcard-card {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        min-width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
        float: none !important;
    }
}

/* ========================================
   BREADCRUMBS NAVIGATION
   @since 2.22.0
   ======================================== */
.noble-breadcrumbs {
    margin-bottom: 24px;
    padding: 16px 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--noble-gold);
}

.breadcrumb-item:not(:last-child)::after {
    content: '›';
    margin-left: 8px;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 300;
}

.breadcrumb-item:last-child {
    color: var(--noble-gold);
    font-weight: 600;
}

/* Mobile Breadcrumbs */
@media (max-width: 768px) {
    .noble-breadcrumbs {
        margin-bottom: 16px;
        padding: 8px 0;
    }
    
    .breadcrumb-list {
        font-size: 13px;
        gap: 6px;
    }
}



/* ========================================
   MOBILE USER MENU OVERLAY
   ======================================== */
.mobile-user-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    /* IMPORTANT: keep overlay fully disabled when not active
       to avoid an extra "inner" scrollbar at the browser edge. */
    display: none;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-user-menu.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.user-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.user-menu-content {
    position: relative;
    background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    border-top: 2px solid var(--noble-gold);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-user-menu.active .user-menu-content {
    transform: translateY(0);
}

.user-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(219, 193, 109, 0.2);
}

.user-menu-header h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--noble-gold);
}

.user-menu-close {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.user-menu-close:hover {
    color: var(--noble-gold);
    transform: rotate(90deg);
}

.user-menu-items {
    padding: 16px;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(219, 193, 109, 0.2);
    border-radius: 12px;
    margin-bottom: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
}

.user-menu-item:hover {
    background: rgba(219, 193, 109, 0.1);
    border-color: var(--noble-gold);
    transform: translateX(4px);
}

.menu-item-icon {
    font-size: 1.5rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item-text {
    flex: 1;
    font-family: 'Inter', sans-serif;
}

.user-menu-divider {
    border: none;
    border-top: 1px solid rgba(219, 193, 109, 0.2);
    margin: 16px 0;
}

.user-menu-logout {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    color: #fca5a5 !important;
}

.user-menu-logout:hover {
    background: rgba(220, 38, 38, 0.2) !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
    transform: translateX(4px);
}


/* Tab Content Width Fix - Breiter */
.tab-pane,
.tab-content-inner,
.tabs-content {
    max-width: 100% !important;
}

/* Padding nur einmal am Wrapper (sonst wird es "container in container" und zu schmal) */
.tabs-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.tab-pane,
.tab-content-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 768px) {
    .tabs-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

.content-section {
    max-width: 100% !important;
}


/* Review Stars Size - Größer */
.nm-chat-rating,
.review-stars,
.rating-display,
.sedcard-rating {
    font-size: 18px !important;
}

.review-star,
.star-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
}

/* Help Mobile Scroll Fix */
@media (max-width: 1024px) {
    .help-topnav,
    .noble-help-nav,
    .help-section-nav {
        position: relative !important;
        top: auto !important;
    }
    
    .noble-help-center-container,
    .help-content-wrapper {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
    }
}

/* Bottom Bar Grid View PWA */
@media (max-width: 1024px) {
    body.pwa-mode .sticky-cta-bar,
    body.standalone .sticky-cta-bar,
    body[data-pwa="true"] .sticky-cta-bar {
        display: flex !important;
    }
}

/* ========================================
   INFINITE SCROLL & LAZY LOADING
   @since 2.66.0
   ======================================== */

/* Infinite Scroll Loader */
.infinite-scroll-loader {
    text-align: center;
    padding: 30px 20px;
    color: var(--noble-gold, #dbc16d);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.infinite-scroll-loader .spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(219, 193, 109, 0.3);
    border-top-color: var(--noble-gold, #dbc16d);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 12px;
    vertical-align: middle;
}

/* Infinite Scroll End Message */
.infinite-scroll-end-message {
    text-align: center;
    padding: 30px 20px;
    color: var(--noble-gold, #dbc16d);
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.7;
    letter-spacing: 0.5px;
}

.infinite-scroll-end {
    text-align: center;
    padding: 30px 20px;
    color: var(--noble-gold, #dbc16d);
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.7;
    letter-spacing: 0.5px;
}

/* Infinite Scroll Sentinel (hidden trigger element) */
.infinite-scroll-sentinel {
    height: 1px;
    visibility: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Lazy Loading Image Styles */
/* Lazy Loading: Bilder sind standardmäßig sichtbar, auch mit loading="lazy" */
.sedcard-grid-image {
    opacity: 1 !important; /* 🔥 CRITICAL: Bilder immer sichtbar */
    transition: opacity 0.3s ease-in-out;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important; /* 🔥 CRITICAL: Consistent aspect ratio */
    aspect-ratio: 2 / 3 !important; /* 🔥 CRITICAL: Force consistent aspect ratio (portrait) */
    /* 🔒 Image Protection: Verhindert Drag-and-Drop und Textauswahl */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    pointer-events: auto !important; /* Erlaubt Klicks, verhindert nur Drag */
    /* 🔒 iOS-spezifischer Schutz: Verhindert Long-Press-Menü */
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important; /* Verhindert Zoom-Gesten, erlaubt Pan */
}

/* Nur wenn Bild wirklich noch nicht geladen ist (data-src vorhanden) */
.sedcard-grid-image[data-src] {
    opacity: 0;
}

.sedcard-grid-image[data-src].loaded {
    opacity: 1;
}

/* Smooth fade-in for lazy loaded images */
@keyframes imageFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.sedcard-grid-image.loaded {
    animation: imageFadeIn 0.3s ease-in-out;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .infinite-scroll-loader,
    .infinite-scroll-end {
        padding: 20px 15px;
        font-size: 0.9rem;
    }
    
    .infinite-scroll-loader .spinner {
        width: 20px;
        height: 20px;
        border-width: 2px;
        margin-right: 10px;
    }
}