/**
 * ============================================================
 * DG Search Features - Frontend CSS (Premium Design)
 * Version: 1.2.0 – High Specificity für UIkit/JReviews
 * ============================================================
 *
 * HINWEIS: Alle Selektoren verwenden .dk-search-wrapper als
 * Prefix um UIkit, JReviews und WordPress CSS zu überschreiben.
 * flatpickr-Styles sind davon ausgenommen (rendern im body).
 *
 * INHALTSVERZEICHNIS:
 * -----------------------------------------------------------
 * Zeile   18 - CSS Custom Properties
 * Zeile   38 - Feiertage im flatpickr-Kalender
 * Zeile   88 - Schulferien im flatpickr-Kalender
 * Zeile  110 - Schulferien-Selector (Bundesland Dropdown)
 * Zeile  165 - Reise-Typ Grid (Premium Cards)
 * Zeile  310 - Budget-Kategorien (Farbcodierte Chips)
 * Zeile  520 - Brückentage (Horizontal Scroll Cards)
 * Zeile  660 - Dynamische Hausanzahl
 * Zeile  670 - Responsive Anpassungen
 * ============================================================
 */

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
    --dk-red: #dc2626;
    --dk-red-dark: #b91c1c;
    --dk-red-glow: rgba(220,38,38,0.15);
    --dk-gold: #f59e0b;
    --dk-green: #059669;
    --dk-slate: #1e293b;
    --dk-muted: #64748b;
    --dk-radius-md: 14px;
    --dk-shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(226,232,240,0.6);
    --dk-shadow-hover: 0 12px 32px rgba(220,38,38,0.12), 0 0 0 2px rgba(220,38,38,0.18);
    --dk-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   FEIERTAGE IM FLATPICKR-KALENDER
   (kein Wrapper – flatpickr rendert im body)
   ======================================== */
.flatpickr-day.dg-feiertag {
    position: relative !important;
    border-bottom: 2px solid rgba(220,38,38,0.35) !important;
}

.flatpickr-day.dg-feiertag::after {
    position: absolute !important;
    top: -1px !important;
    right: 0px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.flatpickr-day.dg-ft-ostern::after      { content: '🥚' !important; }
.flatpickr-day.dg-ft-xmas::after        { content: '🎅' !important; }
.flatpickr-day.dg-ft-silvester::after    { content: '🎆' !important; }
.flatpickr-day.dg-ft-neujahr::after      { content: '🎆' !important; }
.flatpickr-day.dg-ft-arbeit::after       { content: '✊' !important; font-size: 7px !important; }
.flatpickr-day.dg-ft-einheit::after      { content: '🇩🇪' !important; font-size: 7px !important; }
.flatpickr-day.dg-ft-himmelfahrt::after  { content: '✝️' !important; font-size: 7px !important; }
.flatpickr-day.dg-ft-pfingsten::after    { content: '🕊️' !important; font-size: 7px !important; }

.flatpickr-day.dg-feiertag.selected::after,
.flatpickr-day.dg-feiertag.startRange::after,
.flatpickr-day.dg-feiertag.endRange::after {
    filter: brightness(1.5) !important;
}

/* ========================================
   SCHULFERIEN IM FLATPICKR-KALENDER
   ======================================== */
.flatpickr-day.dg-schulferien {
    position: relative !important;
}

.flatpickr-day.dg-schulferien::before {
    content: '' !important;
    position: absolute !important;
    bottom: 1px !important;
    left: 1px !important;
    width: 5px !important;
    height: 5px !important;
    background: var(--dk-gold) !important;
    border-radius: 50% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* ========================================
   REISEZEITRAUM – 3-Zeilen Layout
   (mit Wrapper-Spezifität)
   ======================================== */
.dk-search-wrapper .dk-date-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    gap: 16px !important;
    align-items: end !important;
}

.dk-search-wrapper .dk-options-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-top: 16px !important;
    flex-wrap: wrap !important;
}

.dk-search-wrapper .dk-options-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.dk-search-wrapper .dk-date-hint {
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
}

.dk-search-wrapper .dk-date-hint.dk-date-hint-error {
    color: #b45309 !important;
    font-weight: 600 !important;
}

/* ========================================
   SCHULFERIEN-SELECTOR – Kompakt in Options-Row
   (mit Wrapper-Spezifität)
   ======================================== */
.dk-search-wrapper .dk-ferien-selector {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 6px 12px !important;
    background: #fffbeb !important;
    border: 1px solid rgba(245,158,11,0.2) !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    color: #92400e !important;
    box-shadow: none !important;
}

.dk-search-wrapper .dk-ferien-selector label {
    font-weight: 500 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #92400e !important;
    font-size: 0.78rem !important;
    text-transform: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.dk-search-wrapper .dk-ferien-selector select {
    font-size: 0.78rem !important;
    padding: 3px 6px !important;
    border: 1px solid rgba(245,158,11,0.3) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #78350f !important;
    cursor: pointer !important;
    max-width: 180px !important;
    font-family: inherit !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
}

.dk-search-wrapper .dk-ferien-dot-legend {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
    color: #b45309 !important;
    white-space: nowrap !important;
}

.dk-search-wrapper .dk-ferien-dot-legend::before {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--dk-gold) !important;
}

/* ========================================
   TRENDING-CHIPS – Beliebt gerade
   (mit Wrapper-Spezifität)
   ======================================== */
.dk-search-wrapper .dk-trending-bar {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
    padding: 16px 20px !important;
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 50%, #fef2f2 100%) !important;
    border: 1px solid rgba(220,38,38,0.12) !important;
    border-radius: 16px !important;
    flex-wrap: wrap !important;
}

.dk-search-wrapper .dk-trending-label {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.dk-search-wrapper .dk-trending-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    flex: 1 !important;
}

.dk-search-wrapper .dk-trending-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 8px 16px 8px 12px !important;
    background: white !important;
    border: 2px solid rgba(220,38,38,0.15) !important;
    border-radius: 24px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(220,38,38,0.06) !important;
    flex: 1 1 0% !important;
}

.dk-search-wrapper .dk-trending-chip:hover {
    background: white !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
    box-shadow: 0 4px 14px rgba(220,38,38,0.15) !important;
    transform: translateY(-2px) !important;
}

.dk-search-wrapper .dk-trending-chip.dk-trending-applied {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    border-color: #b91c1c !important;
    color: white !important;
    box-shadow: 0 2px 12px rgba(220,38,38,0.2) !important;
}

.dk-search-wrapper .dk-trending-icon {
    font-size: 0.85rem !important;
    line-height: 1 !important;
}

.dk-search-wrapper .dk-trending-text {
    font-size: 0.8rem !important;
}

/* ========================================
   REISE-TYP GRID – Premium Cards
   ======================================== */
.dk-search-wrapper .dk-reisetyp-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dk-search-wrapper .dk-reisetyp-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 20px 10px 16px !important;
    background: white !important;
    border: 2px solid transparent !important;
    border-radius: var(--dk-radius-md) !important;
    cursor: pointer !important;
    transition: all 0.35s var(--dk-ease) !important;
    text-align: center !important;
    font-family: inherit !important;
    overflow: hidden !important;
    box-shadow: var(--dk-shadow-card) !important;
    /* UIkit-Resets */
    margin: 0 !important;
    line-height: normal !important;
    min-height: 0 !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Roter Akzent-Balken oben */
.dk-search-wrapper .dk-reisetyp-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, rgba(220,38,38,0.08), transparent) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    width: auto !important;
}

.dk-search-wrapper .dk-reisetyp-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--dk-shadow-hover) !important;
    border-color: rgba(220,38,38,0.2) !important;
    background: white !important;
}

.dk-search-wrapper .dk-reisetyp-card:hover::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, var(--dk-red), var(--dk-gold), var(--dk-red)) !important;
}

.dk-search-wrapper .dk-reisetyp-card:focus {
    outline: none !important;
    box-shadow: var(--dk-shadow-hover) !important;
}

.dk-search-wrapper .dk-reisetyp-card.active {
    border-color: var(--dk-red) !important;
    background: linear-gradient(135deg, #fff5f5, #fef2f2) !important;
    box-shadow: 0 0 0 3px var(--dk-red-glow), 0 8px 24px rgba(220,38,38,0.12) !important;
}

.dk-search-wrapper .dk-reisetyp-card.active::before {
    opacity: 1 !important;
    background: var(--dk-red) !important;
}

.dk-search-wrapper .dk-reisetyp-icon {
    font-size: 2rem !important;
    line-height: 1 !important;
    transition: transform 0.3s ease !important;
    display: block !important;
}

.dk-search-wrapper .dk-reisetyp-card:hover .dk-reisetyp-icon {
    transform: scale(1.15) !important;
}

.dk-search-wrapper .dk-reisetyp-name {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--dk-slate) !important;
    line-height: 1.2 !important;
    transition: color 0.3s ease !important;
    display: block !important;
}

.dk-search-wrapper .dk-reisetyp-card.active .dk-reisetyp-name {
    color: var(--dk-red) !important;
}

.dk-search-wrapper .dk-reisetyp-desc {
    font-size: 0.65rem !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* ========================================
   BUDGET – Farbcodierte Pill Chips
   ======================================== */
.dk-search-wrapper .dk-budget-section {
    position: relative !important;
    background: linear-gradient(135deg, rgba(248,250,252,0.8), rgba(241,245,249,0.6)) !important;
    border: 1px solid rgba(226,232,240,0.5) !important;
    border-radius: var(--dk-radius-md) !important;
    padding: 18px 22px !important;
    margin-top: 16px !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.dk-search-wrapper .dk-budget-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
}

.dk-search-wrapper .dk-budget-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    border: none !important;
    box-shadow: none !important;
}

.dk-search-wrapper .dk-budget-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--dk-slate) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dk-search-wrapper .dk-budget-subtitle {
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    line-height: 1.3 !important;
    display: block !important;
    margin: 0 !important;
}

.dk-search-wrapper .dk-budget-chips {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dk-search-wrapper .dk-budget-chip {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 18px 10px 16px !important;
    background: white !important;
    border: 2px solid transparent !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s var(--dk-ease) !important;
    font-family: inherit !important;
    box-shadow: var(--dk-shadow-card) !important;
    overflow: hidden !important;
    /* UIkit-Resets */
    margin: 0 !important;
    line-height: normal !important;
    min-height: 0 !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Farbiger Akzent-Strich links */
.dk-search-wrapper .dk-budget-chip::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 60% !important;
    border-radius: 0 4px 4px 0 !important;
    transition: all 0.3s ease !important;
}

.dk-search-wrapper .dk-budget-chip[data-tier="sparfuchs"]::before  { background: #22c55e !important; }
.dk-search-wrapper .dk-budget-chip[data-tier="mittel"]::before      { background: #3b82f6 !important; }
.dk-search-wrapper .dk-budget-chip[data-tier="gehoben"]::before     { background: #f59e0b !important; }
.dk-search-wrapper .dk-budget-chip[data-tier="luxus"]::before        { background: #8b5cf6 !important; }

.dk-search-wrapper .dk-budget-chip:hover {
    transform: translateY(-2px) !important;
}

.dk-search-wrapper .dk-budget-chip[data-tier="sparfuchs"]:hover  { border-color: #22c55e !important; box-shadow: 0 6px 20px rgba(34,197,94,0.15) !important; }
.dk-search-wrapper .dk-budget-chip[data-tier="mittel"]:hover      { border-color: #3b82f6 !important; box-shadow: 0 6px 20px rgba(59,130,246,0.15) !important; }
.dk-search-wrapper .dk-budget-chip[data-tier="gehoben"]:hover     { border-color: #f59e0b !important; box-shadow: 0 6px 20px rgba(245,158,11,0.15) !important; }
.dk-search-wrapper .dk-budget-chip[data-tier="luxus"]:hover        { border-color: #8b5cf6 !important; box-shadow: 0 6px 20px rgba(139,92,246,0.15) !important; }

.dk-search-wrapper .dk-budget-chip[data-tier="sparfuchs"].active  { background: linear-gradient(135deg, #22c55e, #16a34a) !important; border-color: #16a34a !important; box-shadow: 0 6px 20px rgba(34,197,94,0.25) !important; }
.dk-search-wrapper .dk-budget-chip[data-tier="mittel"].active      { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; border-color: #2563eb !important; box-shadow: 0 6px 20px rgba(59,130,246,0.25) !important; }
.dk-search-wrapper .dk-budget-chip[data-tier="gehoben"].active     { background: linear-gradient(135deg, #f59e0b, #d97706) !important; border-color: #d97706 !important; box-shadow: 0 6px 20px rgba(245,158,11,0.25) !important; }
.dk-search-wrapper .dk-budget-chip[data-tier="luxus"].active        { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border-color: #7c3aed !important; box-shadow: 0 6px 20px rgba(139,92,246,0.25) !important; }

.dk-search-wrapper .dk-budget-chip.active::before { opacity: 0 !important; }

.dk-search-wrapper .dk-budget-chip.active .dk-budget-chip-name,
.dk-search-wrapper .dk-budget-chip.active .dk-budget-chip-range {
    color: white !important;
}

.dk-search-wrapper .dk-budget-chip-icon {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    transition: transform 0.3s ease !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.dk-search-wrapper .dk-budget-chip:hover .dk-budget-chip-icon {
    transform: scale(1.15) !important;
}

.dk-search-wrapper .dk-budget-chip-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.dk-search-wrapper .dk-budget-chip-name {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--dk-slate) !important;
    white-space: nowrap !important;
    transition: color 0.3s !important;
    line-height: 1.3 !important;
    display: block !important;
}

.dk-search-wrapper .dk-budget-chip-range {
    font-size: 0.65rem !important;
    font-weight: 400 !important;
    color: var(--dk-muted) !important;
    white-space: nowrap !important;
    transition: color 0.3s !important;
    line-height: 1.3 !important;
    display: block !important;
}

.dk-search-wrapper .dk-budget-disclaimer {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(226,232,240,0.4) !important;
    line-height: 1.4 !important;
}

.dk-search-wrapper .dk-budget-disclaimer-dot {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    background: #94a3b8 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* ========================================
   BRÜCKENTAGE – Horizontal Scroll Cards
   ======================================== */
.dk-search-wrapper .dk-brueckentage-section {
    margin-top: 16px !important;
}

.dk-search-wrapper .dk-brueckentage-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
}

.dk-search-wrapper .dk-brueckentage-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--dk-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.dk-search-wrapper .dk-brueckentage-hint {
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    font-style: italic !important;
}

.dk-search-wrapper .dk-brueckentage-scroll {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 8px !important;
    padding-top: 4px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(220,38,38,0.15) transparent !important;
    margin: 0 -4px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.dk-search-wrapper .dk-brueckentage-scroll::-webkit-scrollbar { height: 3px !important; }
.dk-search-wrapper .dk-brueckentage-scroll::-webkit-scrollbar-track { background: transparent !important; }
.dk-search-wrapper .dk-brueckentage-scroll::-webkit-scrollbar-thumb { background: rgba(220,38,38,0.15) !important; border-radius: 3px !important; }

.dk-search-wrapper .dk-bruecke-chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 130px !important;
    flex: 1 1 0% !important;
    padding: 14px 18px !important;
    background: white !important;
    border: 2px solid transparent !important;
    border-radius: var(--dk-radius-md) !important;
    cursor: pointer !important;
    transition: all 0.3s var(--dk-ease) !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    font-family: inherit !important;
    box-shadow: var(--dk-shadow-card) !important;
    /* UIkit-Resets */
    margin: 0 !important;
    line-height: normal !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.dk-search-wrapper .dk-bruecke-chip:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(220,38,38,0.2) !important;
    box-shadow: 0 8px 24px rgba(220,38,38,0.1), 0 0 0 2px rgba(220,38,38,0.12) !important;
    background: white !important;
}

.dk-search-wrapper .dk-bruecke-chip:focus {
    outline: none !important;
}

/* Echte Brückentage – Gold */
.dk-search-wrapper .dk-bruecke-chip.dk-bruecke-highlight {
    background: linear-gradient(135deg, #fffbeb, #fef9c3) !important;
    border: 2px solid var(--dk-gold) !important;
    box-shadow: 0 2px 12px rgba(245,158,11,0.15) !important;
}

.dk-search-wrapper .dk-bruecke-chip.dk-bruecke-highlight:hover {
    box-shadow: 0 8px 24px rgba(245,158,11,0.2) !important;
    transform: translateY(-3px) !important;
    background: linear-gradient(135deg, #fffbeb, #fef9c3) !important;
}

/* Aktiver Zustand – Rot */
.dk-search-wrapper .dk-bruecke-chip.active {
    background: linear-gradient(135deg, var(--dk-red), var(--dk-red-dark)) !important;
    border-color: var(--dk-red-dark) !important;
    box-shadow: 0 6px 20px rgba(220,38,38,0.3) !important;
}

.dk-search-wrapper .dk-bruecke-chip.active .dk-bruecke-name,
.dk-search-wrapper .dk-bruecke-chip.active .dk-bruecke-datum,
.dk-search-wrapper .dk-bruecke-chip.active .dk-bruecke-deal {
    color: white !important;
}

.dk-search-wrapper .dk-bruecke-name {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--dk-slate) !important;
    white-space: nowrap !important;
    display: block !important;
    line-height: 1.3 !important;
}

.dk-search-wrapper .dk-bruecke-datum {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--dk-red) !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
    display: block !important;
    line-height: 1.3 !important;
}

.dk-search-wrapper .dk-bruecke-deal {
    font-size: 0.65rem !important;
    font-weight: 400 !important;
    color: var(--dk-muted) !important;
    white-space: nowrap !important;
    display: block !important;
    line-height: 1.3 !important;
}

.dk-search-wrapper .dk-bruecke-chip.dk-bruecke-highlight .dk-bruecke-deal {
    color: var(--dk-red) !important;
    font-weight: 600 !important;
}

/* ========================================
   DYNAMISCHE HAUSANZAHL
   ======================================== */
.dg-house-count[data-animate="true"] {
    display: inline-block !important;
    transition: opacity 0.3s ease !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .dk-search-wrapper .dk-reisetyp-grid {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
        gap: 8px !important;
    }
    .dk-search-wrapper .dk-reisetyp-card { padding: 14px 8px 12px !important; }
    .dk-search-wrapper .dk-reisetyp-icon { font-size: 1.6rem !important; }
    .dk-search-wrapper .dk-reisetyp-name { font-size: 0.72rem !important; }
    
    .dk-search-wrapper .dk-budget-section { padding: 14px 16px !important; }
    .dk-search-wrapper .dk-budget-chips { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .dk-search-wrapper .dk-budget-chip { padding: 8px 14px 8px 12px !important; }
    .dk-search-wrapper .dk-budget-chip-range { display: none !important; }
    
    .dk-search-wrapper .dk-brueckentage-scroll { gap: 8px !important; }
    .dk-search-wrapper .dk-bruecke-chip { min-width: 120px !important; padding: 12px 14px !important; }
    
    .dk-search-wrapper .dk-date-row { grid-template-columns: 1fr 1fr !important; }
    .dk-search-wrapper .dk-options-row { flex-direction: column !important; align-items: flex-start !important; }
    .dk-search-wrapper .dk-ferien-selector { flex-wrap: wrap !important; }
    .dk-search-wrapper .dk-ferien-selector select { max-width: 150px !important; }
    .flatpickr-day.dg-feiertag::after { font-size: 6px !important; }
}

@media (max-width: 480px) {
    .dk-search-wrapper .dk-reisetyp-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .dk-search-wrapper .dk-budget-chips { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
    .dk-search-wrapper .dk-bruecke-deal { display: none !important; }
    .dk-search-wrapper .dk-bruecke-chip { min-width: 100px !important; }
    .dk-search-wrapper .dk-date-row { grid-template-columns: 1fr !important; }
}