/* ========================================================= CONE THEME SYSTEM R4 3 Themes: dark / middle-dark / light + category color direction ========================================================= */ :root, :root:not([data-theme]), :root[data-theme="dark"] { color-scheme: dark; --cone-radius-sm: 12px; --cone-radius-md: 18px; --cone-radius-lg: 28px; --cone-shadow-soft: 0 18px 50px rgba(0,0,0,.30); --cone-shadow-glow: 0 0 30px rgba(84, 146, 204, .24); --cone-font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bg: #080f18; --bg-soft: #0b1420; --surface: rgba(15, 27, 43, .93); --surface-2: rgba(22, 38, 59, .90); --surface-3: rgba(32, 53, 78, .86); --border: rgba(141, 170, 198, .18); --border-strong: rgba(156, 188, 219, .34); --text: #edf6ff; --text-soft: #b8c7d8; --text-muted: #8394a8; --accent: #d9c295; --accent-2: #6fa8d8; --accent-text: #07111d; --danger: #ff6b77; --success: #42d48b; --warning: #f2c46d; --input-bg: rgba(7, 14, 25, .72); --input-border: rgba(157, 186, 215, .24); --header-bg: rgb(8, 15, 26); --header-border: rgba(148, 177, 206, .22); --hero-overlay: linear-gradient(90deg, rgba(6,12,21,.88), rgba(6,12,21,.58), rgba(6,12,21,.20)), radial-gradient(circle at 70% 10%, rgba(81,137,184,.26), transparent 44%); } /* ========================================================= 2. MIDDLE DARK R4 Deutlich heller als Dark: Premium-Nebelblau / Slate, aber noch nicht Hell. ========================================================= */ /* ========================================================= 2. MIDDLE DARK R5 - echte optische Mitte zwischen Dark und Hell Ziel: mindestens ca. 30% heller als Dark, aber klar dunkler als Hell. ========================================================= */ :root[data-theme="middle-dark"] { color-scheme: dark; --cone-radius-sm: 12px; --cone-radius-md: 18px; --cone-radius-lg: 28px; --cone-shadow-soft: 0 14px 36px rgba(21, 35, 49, .20); --cone-shadow-glow: 0 0 34px rgba(172, 204, 232, .22); --cone-font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* R5: sichtbare Mitte zwischen #080f18 und Light-Offwhite. */ --bg: #33465a; --bg-soft: #40566b; --surface: rgba(73, 91, 110, .96); --surface-2: rgba(88, 108, 128, .95); --surface-3: rgba(106, 127, 148, .94); --border: rgba(222, 236, 248, .30); --border-strong: rgba(238, 247, 255, .48); --text: #f7fbff; --text-soft: #dbe8f3; --text-muted: #b8c9d9; --accent: #e6d0a1; --accent-2: #b8d4ec; --accent-text: #111c28; --danger: #ff8d98; --success: #80e1b1; --warning: #efd18b; --input-bg: rgba(55, 72, 90, .96); --input-border: rgba(230, 242, 252, .34); --header-bg: rgb(45, 60, 76); --header-border: rgba(225, 240, 252, .28); --hero-overlay: linear-gradient(90deg, rgba(43,58,75,.52), rgba(43,58,75,.34), rgba(43,58,75,.10)), radial-gradient(circle at 68% 6%, rgba(194,218,238,.34), transparent 46%); } :root[data-theme="light"] { color-scheme: light; --cone-radius-sm: 12px; --cone-radius-md: 18px; --cone-radius-lg: 28px; --cone-shadow-soft: 0 18px 42px rgba(30, 50, 72, .14); --cone-shadow-glow: 0 0 22px rgba(96, 145, 190, .14); --cone-font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* R4: Hell ist augenschonend etwas dunkler, kein grelles Weiss. */ --bg: #e4ebf3; --bg-soft: #d7e1eb; --surface: rgba(244, 248, 252, .94); --surface-2: rgba(234, 241, 248, .94); --surface-3: rgba(222, 232, 242, .92); --border: rgba(75, 96, 120, .20); --border-strong: rgba(75, 96, 120, .34); --text: #101b2b; --text-soft: #40546b; --text-muted: #65788f; --accent: #c6b184; --accent-2: #5f92bd; --accent-text: #0c1724; --danger: #bd4250; --success: #157d54; --warning: #a8781d; --input-bg: rgba(239, 245, 250, .92); --input-border: rgba(77, 98, 122, .26); --header-bg: rgb(232, 239, 247); --header-border: rgba(75, 96, 120, .22); --hero-overlay: linear-gradient(90deg, rgba(228,235,243,.80), rgba(228,235,243,.58), rgba(228,235,243,.18)), radial-gradient(circle at 70% 10%, rgba(107,153,195,.22), transparent 42%); } :root { --category-accent: var(--accent); --category-accent-2: var(--accent-2); --category-glow: rgba(111, 168, 216, .24); } :root[data-category="vehicles"] { --category-accent:#6fa8ff; --category-accent-2:#f0c26b; --category-glow:rgba(111,168,255,.26); } :root[data-category="motorcycles"] { --category-accent:#7aa7ff; --category-accent-2:#d7b16c; --category-glow:rgba(122,167,255,.28); } :root[data-category="boats"] { --category-accent:#56d6e8; --category-accent-2:#b9f3ff; --category-glow:rgba(86,214,232,.28); } :root[data-category="realestate"], :root[data-category="real-estate"] { --category-accent:#74d6b0; --category-accent-2:#d5c08f; --category-glow:rgba(116,214,176,.24); } :root[data-category="vacation"] { --category-accent:#69d8c8; --category-accent-2:#f0c178; --category-glow:rgba(105,216,200,.24); } :root[data-category="machines-tools"], :root[data-category="machines"] { --category-accent:#d6aa68; --category-accent-2:#86a7bd; --category-glow:rgba(214,170,104,.22); } :root[data-category="electronics"] { --category-accent:#8f7cff; --category-accent-2:#56c5ff; --category-glow:rgba(143,124,255,.26); } :root[data-category="services"] { --category-accent:#69cfff; --category-accent-2:#9ce6c9; --category-glow:rgba(105,207,255,.24); } :root[data-category="jobs"] { --category-accent:#7db7ff; --category-accent-2:#f0c26b; --category-glow:rgba(125,183,255,.24); } :root[data-category="fashion"] { --category-accent:#f28bb8; --category-accent-2:#c69cff; --category-glow:rgba(242,139,184,.23); } :root[data-category="food"], :root[data-category="food-drinks"] { --category-accent:#80d978; --category-accent-2:#f0b96e; --category-glow:rgba(128,217,120,.24); } :root[data-category="animals"], :root[data-category="pets"], :root[data-category="livestock"] { --category-accent:#caa06a; --category-accent-2:#7ed0a7; --category-glow:rgba(202,160,106,.22); } :root[data-category="crowdfunding"] { --category-accent:#ff8fb2; --category-accent-2:#80b7ff; --category-glow:rgba(255,143,178,.24); } :root[data-category="humanitarian"], :root[data-category="humanitarian-aid"] { --category-accent:#ff7f8f; --category-accent-2:#ffd27a; --category-glow:rgba(255,127,143,.22); } html, body { background: radial-gradient(circle at 72% -10%, var(--category-glow), transparent 36%), linear-gradient(180deg, var(--bg), var(--bg-soft)) !important; color: var(--text) !important; font-family: var(--cone-font-main); } .site-header,.header,.cone-header,.globalHeader,.topbar,.categoryHeader,.realestateChrome { background: var(--header-bg) !important; border-bottom-color: var(--header-border) !important; color: var(--text) !important; /* Avoid a compositor blur band painting beyond the sticky header. */ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .card,.panel,.section,.dashboard-card,.market-card,.category-card,.listing-card,.account-card,.form-card,.live-card, .accountPanelCard,.categoryShell,.categoryHero,.realestatePanel,.realestateCard,.vacationPanel,.boatsCard,.boatPanel, .friendsCard,.networkCard,.electronicsCard,.machinesCard { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .card:hover,.market-card:hover,.category-card:hover,.listing-card:hover,.account-card:hover,.realestateCard:hover,.boatsCard:hover { border-color: color-mix(in srgb, var(--category-accent) 42%, var(--border)) !important; box-shadow: 0 18px 58px var(--category-glow); } .hero,.categoryHero,.marketHero,.coneHero,.realestateHero,.vacationHero,.boatsHero { position: relative; } .hero::before,.categoryHero::before,.marketHero::before,.coneHero::before,.realestateHero::before,.vacationHero::before,.boatsHero::before { content:""; position:absolute; inset:0; pointer-events:none; background: var(--hero-overlay); border-radius: inherit; z-index:0; } .hero > *,.categoryHero > *,.marketHero > *,.coneHero > *,.realestateHero > *,.vacationHero > *,.boatsHero > * { position:relative; z-index:1; } h1,h2,h3,h4,.title,.heading { color: var(--text) !important; } p,small,.meta,.muted,.subtitle,.helpText,.sectionText { color: var(--text-soft) !important; } input,select,textarea,.input,.form-control,.headerSearch__input,.categoryHeader__searchInput { background-color: var(--input-bg) !important; color: var(--text) !important; border-color: var(--input-border) !important; } input::placeholder,textarea::placeholder { color: var(--text-muted) !important; } select option { background: var(--surface-2); color: var(--text); } .btn--primary,.button-primary,.primary,button[type="submit"],.headerSearch__submit,.categoryHeader__searchSubmit { background: linear-gradient(135deg, var(--category-accent), var(--accent)) !important; color: var(--accent-text) !important; border-color: transparent !important; box-shadow: 0 12px 30px var(--category-glow); } .btn--secondary,.button-secondary,.btn--shortsCta { background: color-mix(in srgb, var(--category-accent) 20%, var(--surface-2)) !important; color: var(--text) !important; border-color: color-mix(in srgb, var(--category-accent) 35%, var(--border)) !important; } .btn--ghost,.button-ghost,.btn-outline,.iconCircle,.themeToggle,.langBtn { background: rgba(255,255,255,.04) !important; color: var(--text) !important; border-color: var(--border) !important; } .badge,.chip,.pill,.tag,.categoryPill,.accountStatusBadge { background: color-mix(in srgb, var(--category-accent) 18%, var(--surface-2)) !important; color: var(--text) !important; border-color: color-mix(in srgb, var(--category-accent) 38%, var(--border)) !important; } .sidebar,.account-sidebar,.left-nav,.accountSidebar { background: var(--surface) !important; border-color: var(--border) !important; } .sidebar a.active,.account-sidebar a.active,.left-nav a.active,.accountSidebar a.active { background: color-mix(in srgb, var(--category-accent) 24%, var(--surface-2)) !important; border-color: color-mix(in srgb, var(--category-accent) 44%, var(--border)) !important; } .themeToggle,[data-theme-toggle],#themeToggle { display:inline-flex !important; align-items:center; gap:8px; white-space:nowrap; } [data-theme-icon],.themeToggle__icon,.theme-icon { font-size:15px; } [data-theme-label],.themeToggle__text,.theme-label { font-weight:900; } :root[data-theme="light"] .btn--ghost, :root[data-theme="light"] .button-ghost, :root[data-theme="light"] .btn-outline, :root[data-theme="light"] .iconCircle, :root[data-theme="light"] .themeToggle, :root[data-theme="light"] .langBtn { background: rgba(255,255,255,.74) !important; border-color: rgba(91,111,132,.18) !important; } /* ========================================================= MIDDLE DARK R4 HARD-SEPARATION OVERRIDES Diese Regeln sorgen dafür, dass Middle wirklich heller wirkt, auch wenn einzelne alte Kategorie-CSS-Dateien noch dunkle Flächen setzen. ========================================================= */ :root[data-theme="middle-dark"] body { background-color: #586879 !important; } :root[data-theme="middle-dark"] .site-header, :root[data-theme="middle-dark"] .header, :root[data-theme="middle-dark"] .cone-header, :root[data-theme="middle-dark"] .globalHeader, :root[data-theme="middle-dark"] .topbar, :root[data-theme="middle-dark"] .categoryHeader, :root[data-theme="middle-dark"] .realestateChrome { background-color: rgba(82, 98, 116, .95) !important; border-color: rgba(255, 255, 255, .34) !important; } :root[data-theme="middle-dark"] .card, :root[data-theme="middle-dark"] .panel, :root[data-theme="middle-dark"] .section, :root[data-theme="middle-dark"] .dashboard-card, :root[data-theme="middle-dark"] .market-card, :root[data-theme="middle-dark"] .category-card, :root[data-theme="middle-dark"] .listing-card, :root[data-theme="middle-dark"] .account-card, :root[data-theme="middle-dark"] .form-card, :root[data-theme="middle-dark"] .live-card, :root[data-theme="middle-dark"] .accountPanelCard, :root[data-theme="middle-dark"] .categoryShell, :root[data-theme="middle-dark"] .realestatePanel, :root[data-theme="middle-dark"] .realestateCard, :root[data-theme="middle-dark"] .vacationPanel, :root[data-theme="middle-dark"] .boatsCard, :root[data-theme="middle-dark"] .boatPanel, :root[data-theme="middle-dark"] .friendsCard, :root[data-theme="middle-dark"] .networkCard, :root[data-theme="middle-dark"] .electronicsCard, :root[data-theme="middle-dark"] .machinesCard { background-color: rgba(115, 132, 150, .95) !important; border-color: rgba(240, 247, 253, .34) !important; } :root[data-theme="middle-dark"] input, :root[data-theme="middle-dark"] select, :root[data-theme="middle-dark"] textarea, :root[data-theme="middle-dark"] .input, :root[data-theme="middle-dark"] .form-control, :root[data-theme="middle-dark"] .headerSearch__input, :root[data-theme="middle-dark"] .categoryHeader__searchInput { background-color: rgba(94, 111, 130, .94) !important; border-color: rgba(255, 255, 255, .38) !important; color: #fbfdff !important; } :root[data-theme="middle-dark"] .btn--ghost, :root[data-theme="middle-dark"] .button-ghost, :root[data-theme="middle-dark"] .btn-outline, :root[data-theme="middle-dark"] .iconCircle, :root[data-theme="middle-dark"] .themeToggle, :root[data-theme="middle-dark"] .langBtn { background: rgba(128, 145, 163, .78) !important; border-color: rgba(255, 255, 255, .36) !important; } /* R4 Light: Popovers und Account-Menüs nicht mehr grell weiss. */ :root[data-theme="light"] .dropdown, :root[data-theme="light"] .dropdown-menu, :root[data-theme="light"] .userMenu, :root[data-theme="light"] .accountMenu, :root[data-theme="light"] .profileMenu, :root[data-theme="light"] .headerUserMenu, :root[data-theme="light"] .headerDropdown { background: rgba(244, 248, 252, .96) !important; color: var(--text) !important; border-color: rgba(75, 96, 120, .20) !important; box-shadow: 0 24px 60px rgba(30, 50, 72, .16) !important; } :root[data-theme="light"] .dropdown a, :root[data-theme="light"] .dropdown-menu a, :root[data-theme="light"] .userMenu a, :root[data-theme="light"] .accountMenu a, :root[data-theme="light"] .profileMenu a, :root[data-theme="light"] .headerUserMenu a, :root[data-theme="light"] .headerDropdown a { color: var(--text) !important; } :root[data-theme="light"] .dropdown a:hover, :root[data-theme="light"] .dropdown-menu a:hover, :root[data-theme="light"] .userMenu a:hover, :root[data-theme="light"] .accountMenu a:hover, :root[data-theme="light"] .profileMenu a:hover, :root[data-theme="light"] .headerUserMenu a:hover, :root[data-theme="light"] .headerDropdown a:hover { background: rgba(222, 232, 242, .95) !important; } /* ========================================================= MIDDLE DARK R5 VISUAL SEPARATION Das hebt auch ältere hart codierte Kategorieflächen sichtbar an. ========================================================= */ :root[data-theme="middle-dark"] body { background: radial-gradient(circle at 72% -10%, color-mix(in srgb, var(--category-accent) 20%, #b7d4ec), transparent 38%), linear-gradient(180deg, #33465a 0%, #2b3d50 46%, #243548 100%) !important; } :root[data-theme="middle-dark"] main, :root[data-theme="middle-dark"] .page, :root[data-theme="middle-dark"] .pageShell, :root[data-theme="middle-dark"] .appShell, :root[data-theme="middle-dark"] .content, :root[data-theme="middle-dark"] .mainContent, :root[data-theme="middle-dark"] .marketplace, :root[data-theme="middle-dark"] .home, :root[data-theme="middle-dark"] .dashboard { background-color: transparent !important; } :root[data-theme="middle-dark"] .site-header, :root[data-theme="middle-dark"] .header, :root[data-theme="middle-dark"] .cone-header, :root[data-theme="middle-dark"] .globalHeader, :root[data-theme="middle-dark"] .topbar, :root[data-theme="middle-dark"] .categoryHeader, :root[data-theme="middle-dark"] .realestateChrome { background: rgb(45, 60, 76) !important; border-color: rgba(225, 240, 252, .28) !important; box-shadow: 0 10px 34px rgba(18, 30, 44, .20) !important; } :root[data-theme="middle-dark"] .card, :root[data-theme="middle-dark"] .panel, :root[data-theme="middle-dark"] .section, :root[data-theme="middle-dark"] .dashboard-card, :root[data-theme="middle-dark"] .market-card, :root[data-theme="middle-dark"] .category-card, :root[data-theme="middle-dark"] .listing-card, :root[data-theme="middle-dark"] .account-card, :root[data-theme="middle-dark"] .form-card, :root[data-theme="middle-dark"] .live-card, :root[data-theme="middle-dark"] .accountPanelCard, :root[data-theme="middle-dark"] .categoryShell, :root[data-theme="middle-dark"] .realestatePanel, :root[data-theme="middle-dark"] .realestateCard, :root[data-theme="middle-dark"] .vacationPanel, :root[data-theme="middle-dark"] .boatsCard, :root[data-theme="middle-dark"] .boatPanel, :root[data-theme="middle-dark"] .friendsCard, :root[data-theme="middle-dark"] .networkCard, :root[data-theme="middle-dark"] .electronicsCard, :root[data-theme="middle-dark"] .machinesCard, :root[data-theme="middle-dark"] body:not([data-category="home"]) :is( .accountCommerceCard, .accountListCard, .accountListingCard, .accountMessageCard, .accountNotificationCard, .accountPanelCard, .accountReadinessCard, .accountSavedCard, .accountSettingsSection, .accountShell, .accountStoreCard, .accountSubCard, .adminAssetCard, .adminAssetSection, .adminBusinessSection, .adminCard, .adminCategorySection, .adminCrowdCompletedCard, .adminCrowdDecisionPanel, .adminCrowdDossierSection, .adminCrowdFinanceCard, .adminCrowdFinanceStageCard, .adminCrowdQueueCard, .adminDashboardSection, .adminFieldCard, .adminInsetCard, .adminMetricCard, .adminPanel, .adminSection, .adminUsersCard, .agriCard, .agriPanel, .aircraftActionCard, .aircraftCard, .aircraftDetailCard, .aircraftFormSection, .aircraftModeCard, .aircraftPreviewCard, .aircraftSearchMapPanel, .aircraftSearchProShell, .aircraftSection, .aircraftSellerPanel, .aircraftSplitSection, .aircraftSpotlightTile, .aircraftUploadCard, .animalCard, .animalCommerceCard, .animalDetailSection, .animalMiniCard, .animalSellerCard, .animalTrustCard, .animalsDynamicSection, .animalsFilterCard, .animalsMapPanel, .apBuyCard, .apCreateSection, .apPowerShellCard, .apSupplierCard, .artCard, .artDealPanel, .artDetailCard, .artMapSection, .artSection, .artSellerCard, .artUploadCard, .artWizardPanel, .authAccess__emailCard, .authCard, .autoPartsMapCard, .autoPartsSearchCard, .barterCard, .barterCategoryCard, .barterCopyCard, .barterManageCard, .barterOfferCard, .barterPreviewCard, .barterSellerCard, .barterShortCard, .barterShortsSection, .barterSubcategoryPanel, .barterSwapCard, .biCreateCard, .biListingCard, .biMapPanel, .biSellerCard, .biShortCard, .buyer-preview-cardShell, .catalogImportPanel, .categoryHeader__categoryMegaPanel, .categoryHeader__langPanel, .categoryLiveCard, .categoryMegaPanel, .categoryPageShell, .categoryTile, .communityCadCard, .communityCard, .communityProfileSection, .communityTile, .companyFaq__costCard, .coneBoostPanel, .coneBoostPanel__statsCard, .coneBoostPanel__walletCard, .createDetailedUploadCard, .createModeCard, .createShortSourcePanel, .crowdCard, .crowdChannelSection, .crowdCreatorMetricCard, .crowdCreatorPanel, .crowdCreatorProjectCard, .crowdCreatorSummaryCard, .crowdDetailCard, .crowdFilterCard, .crowdFounderCard, .crowdMediaPanel, .crowdPublishedCard, .crowdRewardCard, .crowdSection, .crowdSupporterMetricCard, .crowdSupporterPanel, .crowdSupporterProjectCard, .crowdSupporterSummaryCard, .crowdUpdateCard, .crowdUpdatesSection, .crowdWizardCard, .cxLaneCard, .cxNarrativeCard, .cxSection, .cxSignalCard, .cxSignatureCard, .cxWhyCard, .discoverCategoryTile, .discoverPortal__mapCard, .discoverRouteCard, .dmCompletionCard, .dmFormSection, .dmIssueCard, .dmIssueLibrarySection, .dmIssueSection, .dmLearningCard, .dmLibraryCard, .dmOverviewCard, .dmPaymentTrustPanel, .dmPlanCard, .dmPlanSection, .dmProductCard, .dmPublicationCard, .dmPublishHubCard, .dmPublisherCard, .dmPurchasePanel, .dmSubscriptionCard, .dmSubscriptionSection, .dmTypeCard, .dnCard, .dnIdentityCard, .dnMissionCard, .dnPanel, .dnPoolCard, .dnReviewCard, .dropdownPanel, .dsAccessCard, .dsCard, .dsFormSection, .dsLicenseCard, .dsModalityCard, .dsPanel, .dsRequestCard, .dsRequestFormSection, .elecAdminCard, .elecCard, .elecCommercePanel, .elecGalleryPanel, .elecLiveCard, .elecPanel, .elecPassportPanel, .elecRelatedPanel, .elecSafetyPanel, .elecSellerPanel, .elecSummaryPanel, .fashionAsideCard, .fashionCard, .fashionCreateSection, .fashionDeliveryCard, .fashionImportCard, .fashionLiveCard, .fashionMetricCard, .fashionModeCard, .fashionPayoutCard, .fashionProductCard, .fashionPromoCard, .fashionSection, .fashionSellerCard, .fashionShortCard, .fashionStoreTile, .fashionVisualTile, .followActivityCard, .followCard, .followPanel, .foodCategoryPanel, .foodDetailSection, .foodMapPanel, .foodResultCard, .foodSupplierCard, .foodTradeCard, .friendsShell, .gameCard, .gamePanel, .glassPanel, .gratisActionCard, .gratisClaimCard, .gratisDetailCard, .gratisPickupCard, .gratisRequestsCard, .gratisSection, .gratisSellerCard, .hgAdminCard, .hgCard, .hgHeroCard, .hgPanel, .hgShell, .hobbyArchiveCard, .hobbyDealPanel, .hobbyDetailCard, .hobbyDisciplineCard, .hobbyFilterPanel, .hobbyGearCard, .hobbyLiveCard, .hobbyMapMiniCard, .hobbyModeCard, .hobbySection, .hobbySellerCard, .hobbyShortCard, .hobbyUploadCard, .hobbyWizardPanel, .hobbyWorldMapSection, .homeV2CategoryRailShell, .homeV2HappeningCard, .homeV2HappeningSection, .homeV2JobCard, .homeV2JobsSection, .homeV2ListingCard, .homeV2LiveCard, .homeV2LiveHubCard, .homeV2Panel, .homeV2Section, .homeV2ShortCard, .human-campaign-mediaPanel, .insightsCard, .insightsSection, .kidsBuyPanel, .kidsCheckoutCard, .kidsDetailCard, .kidsGroupCard, .kidsLiveCard, .kidsModeCard, .kidsOrderCard, .kidsPassportCard, .kidsProductCard, .kidsSection, .kidsSellerCard, .kidsShortCard, .kidsUploadCard, .kidsWizardPanel, .langPanel, .legalGateShell, .liveCameraPanel, .liveCard, .liveInfoCard, .livePanel, .liveSection, .liveSellerToolsShell, .liveShortRoomCard, .machineAdminCard, .machineCard, .machineMapPanel, .mapSearchPanel, .megaCard, .motoBoostCard, .motoCard, .motoCommercePanel, .motoCreateSection, .motoMapPanel, .motoPanel, .motoShell, .networkMapShell, .networkSection, .networkShell, .organizationActorCard, .organizationCard, .organizationClaimCard, .organizationInvitationCard, .organizationSection, .organizationShell, .rawCard, .rawMapShell, .rawSection, .realestateCard, .realestateDetailSection, .realestateDocPanel, .realestateInfoPanel, .realestateListingCard, .realestateRangePanel, .realestateSearchPanel, .realestateSectionBlock, .realestateShell, .realestateSlotPanel, .restBidHistoryPanel, .restBoostPanel, .restCard, .restDashboardSection, .restFamilyCard, .restFlowActionCard, .restListingCard, .restMapCard, .restMediaTile, .restSearchPanel, .restSection, .restShortCoreCard, .rwBoostPanel, .rwCard, .rwMediaCard, .rwOptionTile, .rwPreviewCard, .sellerListingCardPro, .sellerLiveCard, .sellerOrgCard, .sellerPanelPro, .sellerProjectCard, .sellerShortCardPro, .shortsGridSection, .sportDealPanel, .sportDetailCard, .sportDisciplineCard, .sportFilterPanel, .sportGearCard, .sportLiveCard, .sportModeCard, .sportPassportCard, .sportSection, .sportSellerCard, .sportShortCard, .sportUploadCard, .sportWizardPanel, .ticketCard, .ticketFilterPanel, .ticketSection, .trustShell, .trustStatusCard, .trustVerificationCard, .userPanel, .vacationBundleCard, .vacationCompareCard, .vacationDifferentiatorCard, .vacationEnvironmentPanel, .vacationEvidenceSection, .vacationInsightCard, .vacationJourneyCard, .vacationKindCard, .vacationPanel, .vacationPassportCard, .vacationReportPanel, .vacationResultCard, .vacationStudioSection, .vacationV2MapPanel, .vacationV2Panel, .vacationV2ShortCard, .vacationV2StayCard, .vacationV2TypeCard, .vehicleDealActionCard, .vehicleDealCard, .vehicleDealModalPanel, .vehicleDealReviewCard, .vwCard, .waAuctionResultCard, .waCommerceCard, .waJobApplicationCard, .waLocationCard, .waPanel, .waServiceCard, .waShareCard, .waVacationBookingCard, .walletAccountsPanel, .walletActivityPanel, .walletAddressCard, .walletAssetCard, .walletBalanceCard, .walletCheckoutCard, .walletHoldCard, .walletInfoCard, .walletPanel, .walletShell, .walletStatCard ) { background-color: rgba(73, 91, 110, .94) !important; border-color: rgba(222, 236, 248, .30) !important; color: #f7fbff !important; box-shadow: 0 14px 34px rgba(18, 30, 44, .18) !important; } :root[data-theme="middle-dark"] .hero, :root[data-theme="middle-dark"] .categoryHero, :root[data-theme="middle-dark"] .marketHero, :root[data-theme="middle-dark"] .coneHero, :root[data-theme="middle-dark"] .realestateHero, :root[data-theme="middle-dark"] .vacationHero, :root[data-theme="middle-dark"] .boatsHero, :root[data-theme="middle-dark"] body:not([data-category="home"]) [class$="Hero"] { background-color: #40566b !important; border-color: rgba(222, 236, 248, .30) !important; } :root[data-theme="middle-dark"] .hero::before, :root[data-theme="middle-dark"] .categoryHero::before, :root[data-theme="middle-dark"] .marketHero::before, :root[data-theme="middle-dark"] .coneHero::before, :root[data-theme="middle-dark"] .realestateHero::before, :root[data-theme="middle-dark"] .vacationHero::before, :root[data-theme="middle-dark"] .boatsHero::before, :root[data-theme="middle-dark"] body:not([data-category="home"]) [class$="Hero"]::before { background: linear-gradient(90deg, rgba(43,58,75,.50), rgba(43,58,75,.30), rgba(43,58,75,.08)), radial-gradient(circle at 70% 8%, rgba(194,218,238,.32), transparent 45%) !important; } :root[data-theme="middle-dark"] input, :root[data-theme="middle-dark"] select, :root[data-theme="middle-dark"] textarea, :root[data-theme="middle-dark"] .input, :root[data-theme="middle-dark"] .form-control, :root[data-theme="middle-dark"] .headerSearch__input, :root[data-theme="middle-dark"] .categoryHeader__searchInput, :root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Input"], :root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Search"] input { background-color: rgba(55, 72, 90, .96) !important; border-color: rgba(230, 242, 252, .34) !important; color: #f7fbff !important; } :root[data-theme="middle-dark"] .btn--ghost, :root[data-theme="middle-dark"] .button-ghost, :root[data-theme="middle-dark"] .btn-outline, :root[data-theme="middle-dark"] .iconCircle, :root[data-theme="middle-dark"] .themeToggle, :root[data-theme="middle-dark"] .langBtn, :root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Ghost"], :root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Chip"], :root[data-theme="middle-dark"] body:not([data-category="home"]) [class*="Pill"] { background: rgba(88, 108, 128, .84) !important; border-color: rgba(235, 246, 255, .32) !important; color: #f7fbff !important; } :root[data-theme="middle-dark"] .dropdown, :root[data-theme="middle-dark"] .dropdown-menu, :root[data-theme="middle-dark"] .userMenu, :root[data-theme="middle-dark"] .accountMenu, :root[data-theme="middle-dark"] .profileMenu, :root[data-theme="middle-dark"] .headerUserMenu, :root[data-theme="middle-dark"] .headerDropdown { background: rgba(67, 84, 104, .98) !important; color: #f7fbff !important; border-color: rgba(222, 236, 248, .30) !important; box-shadow: 0 24px 60px rgba(18, 30, 44, .26) !important; } /* Fallback, falls einzelne alte Startseiten dunkle Vollflächen als Pseudo/Overlay setzen. */ :root[data-theme="middle-dark"] body::after { content: ""; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; background: rgba(98, 125, 150, .10); mix-blend-mode: screen; } /* ========================================================= CONE THEME R6 - TRUE MIDDLE DARK SAFETY OVERRIDES Grund: Einige bestehende Seiten/Kategorien verwenden hart codierte Dunkelfarben oder später geladene CSS-Dateien. Diese Regeln sind bewusst stärker und wirken auch auf body[data-theme]. ========================================================= */ :root[data-theme="middle-dark"], html[data-theme="middle-dark"], body[data-theme="middle-dark"] { --bg: #516579; --bg-soft: #617589; --surface: rgba(97, 115, 133, .94); --surface-2: rgba(111, 130, 148, .93); --surface-3: rgba(126, 145, 162, .91); --border: rgba(238, 246, 255, .34); --border-strong: rgba(255, 255, 255, .54); --text: #f9fcff; --text-soft: #e4edf6; --text-muted: #c5d2df; --input-bg: rgba(83, 101, 119, .93); --input-border: rgba(255, 255, 255, .38); --header-bg: rgb(54, 69, 84); --header-border: rgba(255, 255, 255, .30); --hero-overlay: linear-gradient(90deg, rgba(66,82,99,.38), rgba(66,82,99,.22), rgba(66,82,99,.06)), radial-gradient(circle at 70% 8%, rgba(214,230,244,.36), transparent 46%); } html[data-theme="middle-dark"] body, body[data-theme="middle-dark"] { background: radial-gradient(circle at 72% -10%, color-mix(in srgb, var(--category-accent) 18%, #d8e8f6), transparent 38%), linear-gradient(180deg, #516579 0%, #465b70 45%, #3f5368 100%) !important; } html[data-theme="middle-dark"] :is(main, .page, .pageShell, .appShell, .content, .mainContent, .marketplace, .home, .dashboard, .marketplace-shell, .homeShell, .homeV2, .marketHome), body[data-theme="middle-dark"] :is(main, .page, .pageShell, .appShell, .content, .mainContent, .marketplace, .home, .dashboard, .marketplace-shell, .homeShell, .homeV2, .marketHome) { background: transparent !important; } html[data-theme="middle-dark"] :is(.site-header,.header,.cone-header,.globalHeader,.topbar,.categoryHeader,.realestateChrome), body[data-theme="middle-dark"] :is(.site-header,.header,.cone-header,.globalHeader,.topbar,.categoryHeader,.realestateChrome) { background: rgb(54, 69, 84) !important; border-color: rgba(255, 255, 255, .30) !important; box-shadow: 0 10px 34px rgba(22, 34, 48, .18) !important; } html[data-theme="middle-dark"] body:not([data-category="home"]) :is(.card,.panel,.section,.dashboard-card,.market-card,.category-card,.listing-card,.account-card,.form-card,.live-card,.accountPanelCard,.categoryShell,.realestatePanel,.realestateCard,.vacationPanel,.boatsCard,.boatPanel,.friendsCard,.networkCard,.electronicsCard,.machinesCard,.accountCommerceCard,.accountListCard,.accountListingCard,.accountMessageCard,.accountNotificationCard,.accountPanelCard,.accountReadinessCard,.accountSavedCard,.accountSettingsSection,.accountShell,.accountStoreCard,.accountSubCard,.adminAssetCard,.adminAssetSection,.adminBusinessSection,.adminCard,.adminCategorySection,.adminCrowdCompletedCard,.adminCrowdDecisionPanel,.adminCrowdDossierSection,.adminCrowdFinanceCard,.adminCrowdFinanceStageCard,.adminCrowdQueueCard,.adminDashboardSection,.adminFieldCard,.adminInsetCard,.adminMetricCard,.adminPanel,.adminSection,.adminUsersCard,.agriCard,.agriPanel,.aircraftActionCard,.aircraftCard,.aircraftDetailCard,.aircraftFormSection,.aircraftModeCard,.aircraftPreviewCard,.aircraftSearchMapPanel,.aircraftSearchProShell,.aircraftSection,.aircraftSellerPanel,.aircraftSplitSection,.aircraftSpotlightTile,.aircraftUploadCard,.animalCard,.animalCommerceCard,.animalDetailSection,.animalMiniCard,.animalSellerCard,.animalTrustCard,.animalsDynamicSection,.animalsFilterCard,.animalsMapPanel,.apBuyCard,.apCreateSection,.apPowerShellCard,.apSupplierCard,.artCard,.artDealPanel,.artDetailCard,.artMapSection,.artSection,.artSellerCard,.artUploadCard,.artWizardPanel,.authAccess__emailCard,.authCard,.autoPartsMapCard,.autoPartsSearchCard,.barterCard,.barterCategoryCard,.barterCopyCard,.barterManageCard,.barterOfferCard,.barterPreviewCard,.barterSellerCard,.barterShortCard,.barterShortsSection,.barterSubcategoryPanel,.barterSwapCard,.biCreateCard,.biListingCard,.biMapPanel,.biSellerCard,.biShortCard,.buyer-preview-cardShell,.catalogImportPanel,.categoryHeader__categoryMegaPanel,.categoryHeader__langPanel,.categoryLiveCard,.categoryMegaPanel,.categoryPageShell,.categoryTile,.communityCadCard,.communityCard,.communityProfileSection,.communityTile,.companyFaq__costCard,.coneBoostPanel,.coneBoostPanel__statsCard,.coneBoostPanel__walletCard,.createDetailedUploadCard,.createModeCard,.createShortSourcePanel,.crowdCard,.crowdChannelSection,.crowdCreatorMetricCard,.crowdCreatorPanel,.crowdCreatorProjectCard,.crowdCreatorSummaryCard,.crowdDetailCard,.crowdFilterCard,.crowdFounderCard,.crowdMediaPanel,.crowdPublishedCard,.crowdRewardCard,.crowdSection,.crowdSupporterMetricCard,.crowdSupporterPanel,.crowdSupporterProjectCard,.crowdSupporterSummaryCard,.crowdUpdateCard,.crowdUpdatesSection,.crowdWizardCard,.cxLaneCard,.cxNarrativeCard,.cxSection,.cxSignalCard,.cxSignatureCard,.cxWhyCard,.discoverCategoryTile,.discoverPortal__mapCard,.discoverRouteCard,.dmCompletionCard,.dmFormSection,.dmIssueCard,.dmIssueLibrarySection,.dmIssueSection,.dmLearningCard,.dmLibraryCard,.dmOverviewCard,.dmPaymentTrustPanel,.dmPlanCard,.dmPlanSection,.dmProductCard,.dmPublicationCard,.dmPublishHubCard,.dmPublisherCard,.dmPurchasePanel,.dmSubscriptionCard,.dmSubscriptionSection,.dmTypeCard,.dnCard,.dnIdentityCard,.dnMissionCard,.dnPanel,.dnPoolCard,.dnReviewCard,.dropdownPanel,.dsAccessCard,.dsCard,.dsFormSection,.dsLicenseCard,.dsModalityCard,.dsPanel,.dsRequestCard,.dsRequestFormSection,.elecAdminCard,.elecCard,.elecCommercePanel,.elecGalleryPanel,.elecLiveCard,.elecPanel,.elecPassportPanel,.elecRelatedPanel,.elecSafetyPanel,.elecSellerPanel,.elecSummaryPanel,.fashionAsideCard,.fashionCard,.fashionCreateSection,.fashionDeliveryCard,.fashionImportCard,.fashionLiveCard,.fashionMetricCard,.fashionModeCard,.fashionPayoutCard,.fashionProductCard,.fashionPromoCard,.fashionSection,.fashionSellerCard,.fashionShortCard,.fashionStoreTile,.fashionVisualTile,.followActivityCard,.followCard,.followPanel,.foodCategoryPanel,.foodDetailSection,.foodMapPanel,.foodResultCard,.foodSupplierCard,.foodTradeCard,.friendsShell,.gameCard,.gamePanel,.glassPanel,.gratisActionCard,.gratisClaimCard,.gratisDetailCard,.gratisPickupCard,.gratisRequestsCard,.gratisSection,.gratisSellerCard,.hgAdminCard,.hgCard,.hgHeroCard,.hgPanel,.hgShell,.hobbyArchiveCard,.hobbyDealPanel,.hobbyDetailCard,.hobbyDisciplineCard,.hobbyFilterPanel,.hobbyGearCard,.hobbyLiveCard,.hobbyMapMiniCard,.hobbyModeCard,.hobbySection,.hobbySellerCard,.hobbyShortCard,.hobbyUploadCard,.hobbyWizardPanel,.hobbyWorldMapSection,.homeV2CategoryRailShell,.homeV2HappeningCard,.homeV2HappeningSection,.homeV2JobCard,.homeV2JobsSection,.homeV2ListingCard,.homeV2LiveCard,.homeV2LiveHubCard,.homeV2Panel,.homeV2Section,.homeV2ShortCard,.human-campaign-mediaPanel,.insightsCard,.insightsSection,.kidsBuyPanel,.kidsCheckoutCard,.kidsDetailCard,.kidsGroupCard,.kidsLiveCard,.kidsModeCard,.kidsOrderCard,.kidsPassportCard,.kidsProductCard,.kidsSection,.kidsSellerCard,.kidsShortCard,.kidsUploadCard,.kidsWizardPanel,.langPanel,.legalGateShell,.liveCameraPanel,.liveCard,.liveInfoCard,.livePanel,.liveSection,.liveSellerToolsShell,.liveShortRoomCard,.machineAdminCard,.machineCard,.machineMapPanel,.mapSearchPanel,.megaCard,.motoBoostCard,.motoCard,.motoCommercePanel,.motoCreateSection,.motoMapPanel,.motoPanel,.motoShell,.networkMapShell,.networkSection,.networkShell,.organizationActorCard,.organizationCard,.organizationClaimCard,.organizationInvitationCard,.organizationSection,.organizationShell,.rawCard,.rawMapShell,.rawSection,.realestateCard,.realestateDetailSection,.realestateDocPanel,.realestateInfoPanel,.realestateListingCard,.realestateRangePanel,.realestateSearchPanel,.realestateSectionBlock,.realestateShell,.realestateSlotPanel,.restBidHistoryPanel,.restBoostPanel,.restCard,.restDashboardSection,.restFamilyCard,.restFlowActionCard,.restListingCard,.restMapCard,.restMediaTile,.restSearchPanel,.restSection,.restShortCoreCard,.rwBoostPanel,.rwCard,.rwMediaCard,.rwOptionTile,.rwPreviewCard,.sellerListingCardPro,.sellerLiveCard,.sellerOrgCard,.sellerPanelPro,.sellerProjectCard,.sellerShortCardPro,.shortsGridSection,.sportDealPanel,.sportDetailCard,.sportDisciplineCard,.sportFilterPanel,.sportGearCard,.sportLiveCard,.sportModeCard,.sportPassportCard,.sportSection,.sportSellerCard,.sportShortCard,.sportUploadCard,.sportWizardPanel,.ticketCard,.ticketFilterPanel,.ticketSection,.trustShell,.trustStatusCard,.trustVerificationCard,.userPanel,.vacationBundleCard,.vacationCompareCard,.vacationDifferentiatorCard,.vacationEnvironmentPanel,.vacationEvidenceSection,.vacationInsightCard,.vacationJourneyCard,.vacationKindCard,.vacationPanel,.vacationPassportCard,.vacationReportPanel,.vacationResultCard,.vacationStudioSection,.vacationV2MapPanel,.vacationV2Panel,.vacationV2ShortCard,.vacationV2StayCard,.vacationV2TypeCard,.vehicleDealActionCard,.vehicleDealCard,.vehicleDealModalPanel,.vehicleDealReviewCard,.vwCard,.waAuctionResultCard,.waCommerceCard,.waJobApplicationCard,.waLocationCard,.waPanel,.waServiceCard,.waShareCard,.waVacationBookingCard,.walletAccountsPanel,.walletActivityPanel,.walletAddressCard,.walletAssetCard,.walletBalanceCard,.walletCheckoutCard,.walletHoldCard,.walletInfoCard,.walletPanel,.walletShell,.walletStatCard), body[data-theme="middle-dark"]:not([data-category="home"]) :is(.card,.panel,.section,.dashboard-card,.market-card,.category-card,.listing-card,.account-card,.form-card,.live-card,.accountPanelCard,.categoryShell,.realestatePanel,.realestateCard,.vacationPanel,.boatsCard,.boatPanel,.friendsCard,.networkCard,.electronicsCard,.machinesCard,.accountCommerceCard,.accountListCard,.accountListingCard,.accountMessageCard,.accountNotificationCard,.accountPanelCard,.accountReadinessCard,.accountSavedCard,.accountSettingsSection,.accountShell,.accountStoreCard,.accountSubCard,.adminAssetCard,.adminAssetSection,.adminBusinessSection,.adminCard,.adminCategorySection,.adminCrowdCompletedCard,.adminCrowdDecisionPanel,.adminCrowdDossierSection,.adminCrowdFinanceCard,.adminCrowdFinanceStageCard,.adminCrowdQueueCard,.adminDashboardSection,.adminFieldCard,.adminInsetCard,.adminMetricCard,.adminPanel,.adminSection,.adminUsersCard,.agriCard,.agriPanel,.aircraftActionCard,.aircraftCard,.aircraftDetailCard,.aircraftFormSection,.aircraftModeCard,.aircraftPreviewCard,.aircraftSearchMapPanel,.aircraftSearchProShell,.aircraftSection,.aircraftSellerPanel,.aircraftSplitSection,.aircraftSpotlightTile,.aircraftUploadCard,.animalCard,.animalCommerceCard,.animalDetailSection,.animalMiniCard,.animalSellerCard,.animalTrustCard,.animalsDynamicSection,.animalsFilterCard,.animalsMapPanel,.apBuyCard,.apCreateSection,.apPowerShellCard,.apSupplierCard,.artCard,.artDealPanel,.artDetailCard,.artMapSection,.artSection,.artSellerCard,.artUploadCard,.artWizardPanel,.authAccess__emailCard,.authCard,.autoPartsMapCard,.autoPartsSearchCard,.barterCard,.barterCategoryCard,.barterCopyCard,.barterManageCard,.barterOfferCard,.barterPreviewCard,.barterSellerCard,.barterShortCard,.barterShortsSection,.barterSubcategoryPanel,.barterSwapCard,.biCreateCard,.biListingCard,.biMapPanel,.biSellerCard,.biShortCard,.buyer-preview-cardShell,.catalogImportPanel,.categoryHeader__categoryMegaPanel,.categoryHeader__langPanel,.categoryLiveCard,.categoryMegaPanel,.categoryPageShell,.categoryTile,.communityCadCard,.communityCard,.communityProfileSection,.communityTile,.companyFaq__costCard,.coneBoostPanel,.coneBoostPanel__statsCard,.coneBoostPanel__walletCard,.createDetailedUploadCard,.createModeCard,.createShortSourcePanel,.crowdCard,.crowdChannelSection,.crowdCreatorMetricCard,.crowdCreatorPanel,.crowdCreatorProjectCard,.crowdCreatorSummaryCard,.crowdDetailCard,.crowdFilterCard,.crowdFounderCard,.crowdMediaPanel,.crowdPublishedCard,.crowdRewardCard,.crowdSection,.crowdSupporterMetricCard,.crowdSupporterPanel,.crowdSupporterProjectCard,.crowdSupporterSummaryCard,.crowdUpdateCard,.crowdUpdatesSection,.crowdWizardCard,.cxLaneCard,.cxNarrativeCard,.cxSection,.cxSignalCard,.cxSignatureCard,.cxWhyCard,.discoverCategoryTile,.discoverPortal__mapCard,.discoverRouteCard,.dmCompletionCard,.dmFormSection,.dmIssueCard,.dmIssueLibrarySection,.dmIssueSection,.dmLearningCard,.dmLibraryCard,.dmOverviewCard,.dmPaymentTrustPanel,.dmPlanCard,.dmPlanSection,.dmProductCard,.dmPublicationCard,.dmPublishHubCard,.dmPublisherCard,.dmPurchasePanel,.dmSubscriptionCard,.dmSubscriptionSection,.dmTypeCard,.dnCard,.dnIdentityCard,.dnMissionCard,.dnPanel,.dnPoolCard,.dnReviewCard,.dropdownPanel,.dsAccessCard,.dsCard,.dsFormSection,.dsLicenseCard,.dsModalityCard,.dsPanel,.dsRequestCard,.dsRequestFormSection,.elecAdminCard,.elecCard,.elecCommercePanel,.elecGalleryPanel,.elecLiveCard,.elecPanel,.elecPassportPanel,.elecRelatedPanel,.elecSafetyPanel,.elecSellerPanel,.elecSummaryPanel,.fashionAsideCard,.fashionCard,.fashionCreateSection,.fashionDeliveryCard,.fashionImportCard,.fashionLiveCard,.fashionMetricCard,.fashionModeCard,.fashionPayoutCard,.fashionProductCard,.fashionPromoCard,.fashionSection,.fashionSellerCard,.fashionShortCard,.fashionStoreTile,.fashionVisualTile,.followActivityCard,.followCard,.followPanel,.foodCategoryPanel,.foodDetailSection,.foodMapPanel,.foodResultCard,.foodSupplierCard,.foodTradeCard,.friendsShell,.gameCard,.gamePanel,.glassPanel,.gratisActionCard,.gratisClaimCard,.gratisDetailCard,.gratisPickupCard,.gratisRequestsCard,.gratisSection,.gratisSellerCard,.hgAdminCard,.hgCard,.hgHeroCard,.hgPanel,.hgShell,.hobbyArchiveCard,.hobbyDealPanel,.hobbyDetailCard,.hobbyDisciplineCard,.hobbyFilterPanel,.hobbyGearCard,.hobbyLiveCard,.hobbyMapMiniCard,.hobbyModeCard,.hobbySection,.hobbySellerCard,.hobbyShortCard,.hobbyUploadCard,.hobbyWizardPanel,.hobbyWorldMapSection,.homeV2CategoryRailShell,.homeV2HappeningCard,.homeV2HappeningSection,.homeV2JobCard,.homeV2JobsSection,.homeV2ListingCard,.homeV2LiveCard,.homeV2LiveHubCard,.homeV2Panel,.homeV2Section,.homeV2ShortCard,.human-campaign-mediaPanel,.insightsCard,.insightsSection,.kidsBuyPanel,.kidsCheckoutCard,.kidsDetailCard,.kidsGroupCard,.kidsLiveCard,.kidsModeCard,.kidsOrderCard,.kidsPassportCard,.kidsProductCard,.kidsSection,.kidsSellerCard,.kidsShortCard,.kidsUploadCard,.kidsWizardPanel,.langPanel,.legalGateShell,.liveCameraPanel,.liveCard,.liveInfoCard,.livePanel,.liveSection,.liveSellerToolsShell,.liveShortRoomCard,.machineAdminCard,.machineCard,.machineMapPanel,.mapSearchPanel,.megaCard,.motoBoostCard,.motoCard,.motoCommercePanel,.motoCreateSection,.motoMapPanel,.motoPanel,.motoShell,.networkMapShell,.networkSection,.networkShell,.organizationActorCard,.organizationCard,.organizationClaimCard,.organizationInvitationCard,.organizationSection,.organizationShell,.rawCard,.rawMapShell,.rawSection,.realestateCard,.realestateDetailSection,.realestateDocPanel,.realestateInfoPanel,.realestateListingCard,.realestateRangePanel,.realestateSearchPanel,.realestateSectionBlock,.realestateShell,.realestateSlotPanel,.restBidHistoryPanel,.restBoostPanel,.restCard,.restDashboardSection,.restFamilyCard,.restFlowActionCard,.restListingCard,.restMapCard,.restMediaTile,.restSearchPanel,.restSection,.restShortCoreCard,.rwBoostPanel,.rwCard,.rwMediaCard,.rwOptionTile,.rwPreviewCard,.sellerListingCardPro,.sellerLiveCard,.sellerOrgCard,.sellerPanelPro,.sellerProjectCard,.sellerShortCardPro,.shortsGridSection,.sportDealPanel,.sportDetailCard,.sportDisciplineCard,.sportFilterPanel,.sportGearCard,.sportLiveCard,.sportModeCard,.sportPassportCard,.sportSection,.sportSellerCard,.sportShortCard,.sportUploadCard,.sportWizardPanel,.ticketCard,.ticketFilterPanel,.ticketSection,.trustShell,.trustStatusCard,.trustVerificationCard,.userPanel,.vacationBundleCard,.vacationCompareCard,.vacationDifferentiatorCard,.vacationEnvironmentPanel,.vacationEvidenceSection,.vacationInsightCard,.vacationJourneyCard,.vacationKindCard,.vacationPanel,.vacationPassportCard,.vacationReportPanel,.vacationResultCard,.vacationStudioSection,.vacationV2MapPanel,.vacationV2Panel,.vacationV2ShortCard,.vacationV2StayCard,.vacationV2TypeCard,.vehicleDealActionCard,.vehicleDealCard,.vehicleDealModalPanel,.vehicleDealReviewCard,.vwCard,.waAuctionResultCard,.waCommerceCard,.waJobApplicationCard,.waLocationCard,.waPanel,.waServiceCard,.waShareCard,.waVacationBookingCard,.walletAccountsPanel,.walletActivityPanel,.walletAddressCard,.walletAssetCard,.walletBalanceCard,.walletCheckoutCard,.walletHoldCard,.walletInfoCard,.walletPanel,.walletShell,.walletStatCard) { background-color: rgba(49, 65, 82, .94) !important; border-color: rgba(238, 246, 255, .30) !important; color: #f9fcff !important; box-shadow: 0 12px 30px rgba(20, 34, 49, .16) !important; } html[data-theme="middle-dark"] body:not([data-category="home"]) :is(.hero,.categoryHero,.marketHero,.coneHero,.realestateHero,.vacationHero,.boatsHero,[class$="Hero"]), body[data-theme="middle-dark"]:not([data-category="home"]) :is(.hero,.categoryHero,.marketHero,.coneHero,.realestateHero,.vacationHero,.boatsHero,[class$="Hero"]) { background-color: #42576b !important; border-color: rgba(238, 246, 255, .32) !important; filter: none; } html[data-theme="middle-dark"] body:not([data-category="home"]) :is(.hero,.categoryHero,.marketHero,.coneHero,.realestateHero,.vacationHero,.boatsHero,[class$="Hero"])::before, body[data-theme="middle-dark"]:not([data-category="home"]) :is(.hero,.categoryHero,.marketHero,.coneHero,.realestateHero,.vacationHero,.boatsHero,[class$="Hero"])::before { background: var(--hero-overlay) !important; } html[data-theme="middle-dark"] body:not([data-category="home"]) :is(input,select,textarea,.input,.form-control,.headerSearch__input,.categoryHeader__searchInput,[class*="Input"],[class*="Search"] input), body[data-theme="middle-dark"]:not([data-category="home"]) :is(input,select,textarea,.input,.form-control,.headerSearch__input,.categoryHeader__searchInput,[class*="Input"],[class*="Search"] input) { background-color: rgba(83, 101, 119, .94) !important; border-color: rgba(255, 255, 255, .38) !important; color: #f9fcff !important; } html[data-theme="middle-dark"] body:not([data-category="home"]) :is(.btn--ghost,.button-ghost,.btn-outline,.iconCircle,.themeToggle,.langBtn,[class*="ghost"],[class*="Ghost"]), body[data-theme="middle-dark"]:not([data-category="home"]) :is(.btn--ghost,.button-ghost,.btn-outline,.iconCircle,.themeToggle,.langBtn,[class*="ghost"],[class*="Ghost"]) { background: rgba(111, 130, 148, .70) !important; border-color: rgba(255, 255, 255, .34) !important; color: #f9fcff !important; } /* Homepage owns its compact app-shell palette; avoid stacking legacy lift layers on it. */ :root[data-theme="middle-dark"] body[data-category="home"]::after, html[data-theme="middle-dark"] body[data-category="home"] #coneThemeMiddleLift { display: none !important; }