/* ============================================================ LUMIÈRE — Automatisches Hell-/Dunkel-Theme Bella Élite · Zeitzone Europe/Berlin ============================================================ Klassen-Logik: → Dunkel-Modus (Standard, 19:30–07:00) → Hell-Modus (07:00–19:30) lbe-ready wird nach dem ersten Paint gesetzt und aktiviert sanfte CSS-Übergänge für Live-Wechsel während einer Session. ============================================================ */ /* ── Transitions gesperrt bis nach erstem Paint ── */ html:not(.lbe-ready) *, html:not(.lbe-ready) *::before, html:not(.lbe-ready) *::after { transition: none !important; animation-duration: 0.001ms !important; } /* ── Sanfte Übergänge — nur relevante Properties, kein img/video ── */ html.lbe-ready body, html.lbe-ready .lmp-archive-page, html.lbe-ready .lmp-archive-hero, html.lbe-ready .lmp-archive-filter-bar, html.lbe-ready .lmp-filter-input, html.lbe-ready .lmp-filter-select, html.lbe-ready .lmp-model-card, html.lbe-ready .lmp-model-card__name a, html.lbe-ready .lmp-model-card__meta, html.lbe-ready .lmp-model-card__footer, html.lbe-ready .lmp-model-card__photo, html.lbe-ready .lmp-card-service-tag, html.lbe-ready .lmp-form-wrap, html.lbe-ready .lmp-dashboard, html.lbe-ready .lmp-input, html.lbe-ready .lmp-textarea, html.lbe-ready .lumiere-calendar-wrap, html.lbe-ready .lc-input, html.lbe-ready .lc-textarea, html.lbe-ready .lc-booking-panel, html.lbe-ready .lc-modal, html.lbe-ready .lmp-profile-sticky-nav, html.lbe-ready .lm-brand, html.lbe-ready .lm-brand__gold, html.lbe-ready .lm-nav, html.lbe-ready .lm-nav__logo, html.lbe-ready .lm-nav__links a, html.lbe-ready .site-header, html.lbe-ready .site-footer, html.lbe-ready .site-navigation ul.menu li a, html.lbe-ready .lma-page, html.lbe-ready .lma-hero__title, html.lbe-ready .lma-hero__sub, html.lbe-ready .lma-filter__toggle, html.lbe-ready .lma-filter__input, html.lbe-ready .lma-pill, html.lbe-ready .lmr-nav, html.lbe-ready .lmr-nav__back, html.lbe-ready .lmr-heading, html.lbe-ready .lmr-footer, html.lbe-ready .lm-footer, html.lbe-ready .lm-footer__copy, html.lbe-ready .lm-footer__links a, html.lbe-ready .lmc-page, html.lbe-ready .lmc-hero__title, html.lbe-ready .lmc-hero__sub, html.lbe-ready .lmc-stats, html.lbe-ready .lmc-stat__number, html.lbe-ready .lmc-stat__label, html.lbe-ready .lmc-card, html.lbe-ready .lmc-card__city, html.lbe-ready .lmc-card__count, html.lbe-ready .lmc-anfrage, html.lbe-ready .lmc-anfrage__title, html.lbe-ready .lmc-anfrage__sub, html.lbe-ready .lmc-footer, html.lbe-ready .lmc-footer__copy, html.lbe-ready .lmc-footer__links a { transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1), color 700ms cubic-bezier(0.4, 0, 0.2, 1), border-color 700ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 700ms cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ============================================================ DUNKEL-MODUS — Standard (native Site-Farben) Keine eigenen Regeln nötig — alles schon in den Komponent-CSS ============================================================ */ :root { /* Globale Referenzwerte (für neue Komponents nutzbar) */ --lbe-bg: #0A0A0C; --lbe-surface: #111114; --lbe-surface-2: #1A1A1F; --lbe-text: #F0EDE8; --lbe-text-muted: #8A8580; --lbe-gold: #C9956A; --lbe-gold-light: #E8C4A0; --lbe-gold-glow: rgba(201, 149, 106, 0.12); --lbe-gold-dim: rgba(201, 149, 106, 0.06); --lbe-border: rgba(201, 149, 106, 0.15); --lbe-border-s: rgba(201, 149, 106, 0.30); } /* ============================================================ HELL-MODUS — html.lbe-light Elegantes Tagesdesign: warmes Elfenbein · gedämpftes Gold ============================================================ */ html.lbe-light { /* ── Globale Referenzwerte ── */ --lbe-bg: #E8E1D6; /* wärmer, dunkler → Surfaces heben sich ab */ --lbe-surface: #F5F1EA; /* Karten / Panels: sichtbar heller als Seite */ --lbe-surface-2: #DDD6CC; /* Inputs, sekundäre Flächen: deutlich dunkler */ --lbe-text: #18120C; --lbe-text-muted: #4A3E36; /* war #665A52 — min. 5.5:1 auf surface */ --lbe-gold: #9A6B3A; --lbe-gold-light: #C9956A; --lbe-gold-glow: rgba(154, 107, 58, 0.12); --lbe-gold-dim: rgba(154, 107, 58, 0.07); --lbe-border: rgba(154, 107, 58, 0.24); /* war .18 */ --lbe-border-s: rgba(154, 107, 58, 0.48); /* war .38 */ /* ── lmp-* Variablen (model-profile.css — :root) ── */ --lmp-bg: #E8E1D6; --lmp-surface: #F5F1EA; --lmp-surface-2: #DDD6CC; --lmp-gold: #9A6B3A; --lmp-gold-light: #C9956A; --lmp-gold-glow: rgba(154, 107, 58, 0.12); --lmp-text: #18120C; --lmp-text-muted: #4A3E36; --lmp-border: rgba(154, 107, 58, 0.24); --lmp-border-s: rgba(154, 107, 58, 0.48); --lmp-error: rgba(180, 80, 80, 0.12); --lmp-success: rgba(90, 175, 90, 0.12); } /* ── Body & Seite ── */ html.lbe-light body { background-color: #E8E1D6; background-image: radial-gradient(ellipse 110% 60% at 50% 0%, #F2EDE4 0%, transparent 68%); color: #18120C; } /* ── Brand Navigation ── */ html.lbe-light .lm-brand { color: #18120C; } html.lbe-light .lm-brand__gold { color: #9A6B3A; } html.lbe-light .lm-brand__suffix, html.lbe-light .lm-nav__logo-suffix { color: rgba(154,107,58,.55); } html.lbe-light .lm-brand:hover .lm-brand__suffix, html.lbe-light .lm-nav__logo:hover .lm-nav__logo-suffix { color: rgba(154,107,58,.80); } html.lbe-light .lm-brand:hover { color: #000000; text-shadow: 0 0 20px rgba(0,0,0,.12); } html.lbe-light .lm-brand:hover .lm-brand__gold { color: #7A5028; text-shadow: 0 0 18px rgba(154,107,58,.5); } /* ── Archive-Seite ── */ html.lbe-light .lmp-archive-page { background: #E8E1D6; color: #18120C; } html.lbe-light .lmp-archive-hero { background: #F5F1EA; border-color: rgba(154, 107, 58, 0.22); box-shadow: 0 4px 24px rgba(0,0,0,.07), inset 0 -1px 0 rgba(154,107,58,.14); } html.lbe-light .lmp-archive-hero__title { color: #18120C; text-shadow: 0 1px 4px rgba(0,0,0,.07); } html.lbe-light .lmp-archive-hero__sub { color: #4A3E36; } /* ── Filter-Bar ── */ html.lbe-light .lmp-archive-filter-bar { background: rgba(245, 241, 234, 0.97); border-color: rgba(154, 107, 58, 0.22); box-shadow: 0 2px 12px rgba(0,0,0,.06); } html.lbe-light .lmp-filter-input { background: #DDD6CC; color: #18120C; border-color: rgba(154, 107, 58, 0.24); } html.lbe-light .lmp-filter-input::placeholder { color: #8A7B6E; } html.lbe-light .lmp-filter-input:focus { border-color: rgba(154, 107, 58, 0.55); } html.lbe-light .lmp-filter-select { background-color: #DDD6CC; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A6E65' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); color: #18120C; border-color: rgba(154, 107, 58, 0.24); } html.lbe-light .lmp-filter-select:focus { border-color: rgba(154, 107, 58, 0.55); } html.lbe-light .lmp-filter-count { color: #4A3E36; } html.lbe-light .lmp-filter-search svg { color: #4A3E36; } /* ── Model-Karten ── */ html.lbe-light .lmp-model-card { background: #F5F1EA; border-color: rgba(154, 107, 58, 0.20); box-shadow: 0 2px 4px rgba(0,0,0,.07), 0 6px 24px rgba(0,0,0,.09), 0 0 0 1px rgba(154,107,58,.06); } html.lbe-light .lmp-model-card:hover { border-color: rgba(154, 107, 58, 0.48); box-shadow: 0 8px 32px rgba(0,0,0,.16), 0 20px 56px rgba(0,0,0,.12), 0 0 32px rgba(154,107,58,.12), 0 0 0 1px rgba(154,107,58,.24); } html.lbe-light .lmp-model-card__photo { background: #DDD6CC; } html.lbe-light .lmp-model-card__name a { color: #18120C; } html.lbe-light .lmp-model-card__name a:hover { color: #9A6B3A; } html.lbe-light .lmp-model-card__meta { color: #4A3E36; } html.lbe-light .lmp-card-service-tag { background: rgba(154, 107, 58, 0.09); border-color: rgba(154, 107, 58, 0.22); color: #4A3E36; } html.lbe-light .lmp-model-card__footer { border-color: rgba(154, 107, 58, 0.18); } html.lbe-light .lmp-card-price { color: #9A6B3A; } html.lbe-light .lmp-card-link { color: #9A6B3A; } html.lbe-light .lmp-card-link:hover { color: #7A5028; } /* ── Formular-Wraps ── */ html.lbe-light .lmp-form-wrap, html.lbe-light .lmp-dashboard { background: #F5F1EA; border-color: rgba(154, 107, 58, 0.24); box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 12px 48px rgba(0,0,0,.10); } html.lbe-light .lmp-input, html.lbe-light .lmp-textarea { background: #DDD6CC; color: #18120C; border-color: rgba(154, 107, 58, 0.26); } html.lbe-light .lmp-input::placeholder, html.lbe-light .lmp-textarea::placeholder { color: #8A7B6E; } html.lbe-light .lmp-input:focus, html.lbe-light .lmp-textarea:focus { border-color: rgba(154, 107, 58, 0.60); box-shadow: 0 0 0 3px rgba(154, 107, 58, 0.10); } /* ── Kalender ── */ html.lbe-light .lumiere-calendar-wrap { /* Komponent-eigene Variablen überschreiben */ --lc-bg: #E8E1D6; --lc-surface: #F5F1EA; --lc-surface-2: #DDD6CC; --lc-gold: #9A6B3A; --lc-gold-light: #C9956A; --lc-gold-glow: rgba(154, 107, 58, 0.12); --lc-gold-dim: rgba(154, 107, 58, 0.07); --lc-text: #18120C; --lc-text-muted: #4A3E36; --lc-border: rgba(154, 107, 58, 0.24); --lc-border-s: rgba(154, 107, 58, 0.48); --lc-avail: rgba(90, 160, 90, 0.14); --lc-booked: rgba(180, 80, 80, 0.12); background: #F5F1EA; border-color: rgba(154, 107, 58, 0.24); box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 16px 56px rgba(0,0,0,.11), 0 0 40px rgba(154,107,58,.05); color: #18120C; } html.lbe-light .lc-input, html.lbe-light .lc-textarea { background: #DDD6CC; color: #18120C; border-color: rgba(154, 107, 58, 0.26); } html.lbe-light .lc-input::placeholder, html.lbe-light .lc-textarea::placeholder { color: #8A7B6E; } html.lbe-light .lc-modal { background: #F5F1EA; border-color: rgba(154, 107, 58, 0.26); box-shadow: 0 8px 40px rgba(0,0,0,.14), 0 0 60px rgba(154,107,58,.06); } /* ── Booking Panel ── */ html.lbe-light .lc-booking-panel { border-color: rgba(154, 107, 58, 0.24); } /* ── Kalender: Pill-Buttons im Lichtmodus (Kontrast-Fix) ── */ html.lbe-light .lc-pill { color: #665A52; border-color: rgba(154, 107, 58, 0.25); background: transparent; } html.lbe-light .lc-pill:hover { border-color: rgba(154, 107, 58, 0.55); color: #18120C; background: rgba(154, 107, 58, 0.06); } html.lbe-light .lc-pill.is-active { border-color: #9A6B3A; color: #5A3A18; /* dunkelbraun statt gold-auf-gold */ background: rgba(154, 107, 58, 0.14); } /* ── Submit-Button im Lichtmodus ── */ html.lbe-light .lc-submit { background: #9A6B3A; color: #FAF8F4; } html.lbe-light .lc-submit:hover { background: #7A5028; } /* ── Profil-Sticky-Nav ── */ html.lbe-light .lmp-profile-sticky-nav { background: rgba(245, 241, 235, 0.96); border-color: rgba(154, 107, 58, 0.15); } html.lbe-light .lmp-profile-sticky-nav__name { color: #18120C; } html.lbe-light .lmp-sticky-link { color: #665A52; } html.lbe-light .lmp-sticky-link:hover { color: #9A6B3A; } /* ── Archive Grid-Sektion ── */ html.lbe-light .lmp-archive-grid-section { background: #F5F1EB; } /* ── Leere-State / No-Results ── */ html.lbe-light .lmp-archive-empty__text { color: #665A52; } html.lbe-light .lmp-archive-empty__icon { color: rgba(154, 107, 58, 0.30); } /* ── Gallery-Zellen ── */ html.lbe-light .lmp-gallery-cell { background: #EDE7DF; } /* ── Admin Overlay Bar ── */ html.lbe-light .lmp-admin-overlay-bar { background: rgba(245, 241, 235, 0.97); border-color: rgba(154, 107, 58, 0.25); } /* ============================================================ HELL-MODUS — Fades & Gradients in Weiß/Elfenbein ============================================================ */ /* ── Seiten-Übergangs-Overlay ── */ html.lbe-light #lm-transition { background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(154,107,58,.05) 0%, transparent 62%), #F5F1EB; } /* ── Archive-Karten: Foto-Gradient ── */ html.lbe-light .lma-card__gradient { background: linear-gradient( to bottom, transparent 22%, rgba(28,16,6,.22) 50%, rgba(18,10,2,.78) 100% ); } html.lbe-light .lma-card__placeholder { background: linear-gradient(135deg, #EDE7DF, #E4DDD5); } /* ── Model-Card (model-archive.css): Foto-Vignette ── */ html.lbe-light .lmp-model-card__photo::after { background: linear-gradient( to top, rgba(245,241,235,.60) 0%, rgba(245,241,235,.15) 35%, transparent 58% ); } html.lbe-light .lmp-model-card__photo-overlay { background: linear-gradient(to top, rgba(245,241,235,.55) 0%, transparent 45%); } html.lbe-light .lmp-model-card__view-btn { color: #7A5028; } /* ── Profil-Hero: Gradient über das Hero-Foto ── */ html.lbe-light .lmp-profile-hero__gradient { background: linear-gradient( to bottom, rgba(245,241,235,1) 0%, rgba(245,241,235,0.55) 8%, rgba(245,241,235,0) 24% ), linear-gradient( to top, rgba(245,241,235,1) 0%, rgba(245,241,235,0.70) 14%, rgba(245,241,235,0.25) 32%, rgba(245,241,235,0) 52% ); } html.lbe-light .lmp-profile-hero__name { color: #18120C; } html.lbe-light .lmp-profile-hero__bg--placeholder { background: linear-gradient(135deg, #EDE7DF 0%, #E0D8CE 100%); } /* ── Lightbox bleibt dunkel (foto-viewer) ── */ /* ============================================================ THEME-TOGGLE BUTTON Pill mit Sonne (links/Tag) und Mond (rechts/Nacht) Gold-Thumb gleitet zwischen beiden Seiten. Fixed unten rechts — auf jeder Seite sichtbar. ============================================================ */ .lbe-toggle { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 9950; /* Pill-Form */ display: flex; align-items: center; justify-content: space-between; width: 68px; height: 34px; padding: 3px 4px; /* Dunkel-Modus Basis */ background: #16161A; border: 1px solid rgba(201, 149, 106, .22); border-radius: 999px; cursor: pointer; appearance: none; -webkit-appearance: none; box-shadow: 0 4px 28px rgba(0, 0, 0, .6), 0 0 0 1px rgba(201, 149, 106, .06), inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color 300ms ease, box-shadow 300ms ease, background 700ms cubic-bezier(.4, 0, .2, 1); } .lbe-toggle:hover { border-color: rgba(201, 149, 106, .60); box-shadow: 0 4px 28px rgba(0, 0, 0, .6), 0 0 24px rgba(201, 149, 106, .20), 0 0 0 1px rgba(201, 149, 106, .14); } .lbe-toggle:focus-visible { outline: 2px solid rgba(201, 149, 106, .55); outline-offset: 3px; } /* ── Gold-Thumb (gleitet zwischen Sonne und Mond) ── */ .lbe-toggle__thumb { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(145deg, #D4A574 0%, #C9956A 55%, #B8845A 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, .40), 0 0 14px rgba(201, 149, 106, .30); pointer-events: none; /* Dunkel-Modus: Thumb rechts (Nacht aktiv) */ left: calc(100% - 32px); transition: left 440ms cubic-bezier(.34, 1.56, .64, 1); } /* Hell-Modus: Thumb links (Tag aktiv) */ html.lbe-light .lbe-toggle__thumb { left: 4px; } /* ── Icons ── */ .lbe-toggle__icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; pointer-events: none; transition: color 300ms ease, opacity 300ms ease; } /* Dunkel-Modus: Sonne (links) gedimmt, Mond (rechts) dunkel auf Gold-Thumb */ .lbe-toggle__icon--sun { color: #4A4540; } .lbe-toggle__icon--moon { color: #18120A; } /* Hell-Modus: Sonne (links) dunkel auf Gold-Thumb, Mond (rechts) gedimmt */ html.lbe-light .lbe-toggle__icon--sun { color: #18120A; } html.lbe-light .lbe-toggle__icon--moon { color: #C0AFA4; } /* ── Hell-Modus: Button-Hintergrund ── */ html.lbe-light .lbe-toggle { background: #EAE3DA; border-color: rgba(154, 107, 58, .28); box-shadow: 0 4px 20px rgba(0, 0, 0, .12), 0 0 0 1px rgba(154, 107, 58, .06); } html.lbe-light .lbe-toggle:hover { border-color: rgba(154, 107, 58, .60); box-shadow: 0 4px 20px rgba(0, 0, 0, .14), 0 0 22px rgba(154, 107, 58, .20); } /* ── Mobile: etwas kleiner ── */ @media (max-width: 480px) { .lbe-toggle { bottom: 1.25rem; right: 1.25rem; width: 60px; height: 30px; } .lbe-toggle__thumb { width: 24px; height: 24px; left: calc(100% - 28px); } html.lbe-light .lbe-toggle__thumb { left: 4px; } .lbe-toggle__icon { width: 24px; height: 24px; } } /* ============================================================ HELL-MODUS — Header / Footer / Navigation ============================================================ */ /* ── lm-nav (models-archive, profil, und andere Lumière-Seiten) ── */ html.lbe-light .lm-nav { background: rgba(245, 241, 234, 0.97) !important; border-bottom-color: transparent !important; box-shadow: 0 2px 18px rgba(0,0,0,.10) !important; } /* Login/CTA-Button: im Licht dezente Fläche statt Box-Rand */ html.lbe-light .lm-nav__cta { border-color: rgba(154,107,58,.14) !important; background: rgba(154,107,58,.07) !important; color: #7A5028 !important; } html.lbe-light .lm-nav__cta:hover { border-color: rgba(154,107,58,.32) !important; background: rgba(154,107,58,.14) !important; color: #5A3A18 !important; } html.lbe-light .lm-nav__logo { color: #18120C !important; /* "bella" → dunkel */ } /* .lm-nav__logo span = "élite" behält Gold — kein Override nötig, da span eigene color hat */ html.lbe-light .lm-nav__logo span { color: #9A6B3A !important; } html.lbe-light .lm-nav__links a { color: rgba(24, 18, 12, 0.60) !important; } html.lbe-light .lm-nav__links a:hover, html.lbe-light .lm-nav__links a.is-active { color: #18120C !important; } /* ── site-header (WordPress Standard-Template) ── */ html.lbe-light .site-header { background-color: rgba(245, 241, 235, 0.97); border-bottom-color: transparent; box-shadow: 0 2px 18px rgba(0,0,0,.10); } /* ── site-footer ── */ html.lbe-light .site-footer { background-color: #DDD6CC; border-top-color: rgba(154, 107, 58, 0.26); box-shadow: inset 0 1px 0 rgba(0,0,0,.05); color: #18120C; } html.lbe-light .site-navigation ul.menu li a { color: rgba(24, 18, 12, 0.65); } html.lbe-light .site-navigation ul.menu li a:hover { color: #18120C; } /* ── Mobile Nav Dropdown im Lichtmodus ── */ html.lbe-light .lm-nav__links { background: rgba(245, 241, 235, 0.97) !important; border-color: rgba(154, 107, 58, 0.20) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(154, 107, 58, 0.08) !important; } html.lbe-light .lm-nav__toggle span { background: #18120C; } html.lbe-light .lm-nav__toggle { border-color: rgba(154, 107, 58, 0.30) !important; background: rgba(154, 107, 58, 0.06); } /* ── Filter Toggle Text (Archive-Seite) ── */ html.lbe-light .lma-filter__toggle { color: #18120C; border-color: rgba(154, 107, 58, 0.25); background: transparent; } html.lbe-light .lma-filter__toggle:hover { background: rgba(154, 107, 58, 0.06); border-color: rgba(154, 107, 58, 0.45); } /* ── lm-brand (globaler Helfer aus lumiere-ui.css) ── */ /* bereits in "Brand Navigation" Sektion oben — kein Duplikat */ /* ============================================================ HELL-MODUS — Models-Archive-Seite (.lma-*) ============================================================ */ html.lbe-light .lma-page { background-color: #E8E1D6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 4 L76 40 L40 76 L4 40 Z' fill='none' stroke='rgba(154%2C107%2C58%2C.09)' stroke-width='.7'/%3E%3Cpath d='M40 18 L62 40 L40 62 L18 40 Z' fill='none' stroke='rgba(154%2C107%2C58%2C.05)' stroke-width='.4'/%3E%3C/svg%3E"); } /* Hero */ html.lbe-light .lma-hero::before { background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(154,107,58,.14) 0%, transparent 70%); } html.lbe-light .lma-hero__title { color: #18120C; text-shadow: 0 1px 6px rgba(0,0,0,.08); } html.lbe-light .lma-hero__sub { color: #4A3E36; } html.lbe-light .lma-hero__eyebrow { color: #9A6B3A; text-shadow: none; } html.lbe-light .lma-hero__tagline { color: rgba(24,18,12,.50); } /* Filter toggle button */ html.lbe-light .lma-filter__toggle { color: #665A52; background: rgba(154,107,58,.06); border-color: rgba(154,107,58,.25); } html.lbe-light .lma-filter__toggle:hover, html.lbe-light .lma-filter.is-open .lma-filter__toggle { background: rgba(154,107,58,.12); border-color: rgba(154,107,58,.50); color: #18120C; } html.lbe-light .lma-filter__count { color: rgba(154,107,58,.60); } /* Filter inputs & labels */ html.lbe-light .lma-filter__input { color: #18120C; background: #EDE7DF; border-color: rgba(154,107,58,.22); } html.lbe-light .lma-filter__input::placeholder { color: rgba(24,18,12,.30); } html.lbe-light .lma-filter__input:focus { border-color: rgba(154,107,58,.55); } html.lbe-light .lma-filter__label { color: rgba(154,107,58,.85); } html.lbe-light .lma-filter__divider { background: rgba(154,107,58,.28); } /* Filter pills */ html.lbe-light .lma-pill { color: #665A52; background: rgba(154,107,58,.05); border-color: rgba(154,107,58,.20); } html.lbe-light .lma-pill:hover { background: rgba(154,107,58,.10); border-color: rgba(154,107,58,.40); color: #18120C; } html.lbe-light .lma-pill.is-active { background: rgba(154,107,58,.16); border-color: rgba(154,107,58,.60); color: #5A3A18; } /* Cards — Foto-Cards: Gradient am unteren Rand wird elfenbein → Text muss dunkel sein */ html.lbe-light .lma-card__placeholder { background: linear-gradient(135deg, #DDD6CC, #D4CCBF); color: rgba(154,107,58,.25); } /* With dark overlay gradient, card text switches to light (same as dark theme) */ html.lbe-light .lma-card__name { color: #F0EDE8; text-shadow: 0 1px 8px rgba(0,0,0,.55), 0 2px 20px rgba(0,0,0,.35); } html.lbe-light .lma-card__bio { color: rgba(240,237,232,.80); text-shadow: 0 1px 4px rgba(0,0,0,.40); } html.lbe-light .lma-card__city { color: #C9956A; text-shadow: 0 1px 6px rgba(0,0,0,.45); } html.lbe-light .lma-card__cta { color: rgba(240,237,232,.85); border-bottom-color: rgba(240,237,232,.30); } html.lbe-light .lma-card__cta:hover { color: #fff; border-bottom-color: rgba(255,255,255,.60); } /* Empty state */ html.lbe-light .lma-empty, html.lbe-light .lma-no-results { color: #4A3E36; } /* Section header */ html.lbe-light .lma-section-header__label { color: rgba(154,107,58,.80); } html.lbe-light .lma-section-header__line { background: rgba(154,107,58,.22); } /* Footer */ html.lbe-light .lma-footer { background: #DDD6CC; border-top-color: rgba(154,107,58,.25); box-shadow: inset 0 1px 0 rgba(0,0,0,.05); } html.lbe-light .lma-footer__copy { color: rgba(24,18,12,.50); } html.lbe-light .lma-footer__links a { color: rgba(24,18,12,.58); } html.lbe-light .lma-footer__links a:hover { color: #9A6B3A; } /* ============================================================ HELL-MODUS — Model-Registrierung (.lmr-*) ============================================================ */ html.lbe-light .lmr-nav { background: rgba(245,241,235,.97); border-bottom-color: transparent; box-shadow: 0 2px 18px rgba(0,0,0,.10); } html.lbe-light .lmr-nav__back { color: rgba(24,18,12,.50); } html.lbe-light .lmr-nav__back:hover { color: #18120C; } html.lbe-light .lmr-eyebrow { color: #9A6B3A; text-shadow: none; } html.lbe-light .lmr-heading { color: #18120C; } html.lbe-light .lmr-line { background: #9A6B3A; } /* .lmr-footer — Registrierung + Login */ html.lbe-light .lmr-footer { background: rgba(237,231,223,.90); border-top-color: rgba(154,107,58,.15); backdrop-filter: blur(8px); } html.lbe-light .lmr-footer__copy { color: rgba(24,18,12,.40); } /* ============================================================ HELL-MODUS — Startseiten-Footer (.lm-footer) ============================================================ */ html.lbe-light .lm-footer { background: #DDD6CC; border-top-color: rgba(154,107,58,.26); box-shadow: inset 0 1px 0 rgba(0,0,0,.05); } html.lbe-light .lm-footer__copy { color: rgba(24,18,12,.52); } html.lbe-light .lm-footer__links a { color: rgba(24,18,12,.60); } html.lbe-light .lm-footer__links a:hover { color: #9A6B3A; } /* ============================================================ HELL-MODUS — Städte-Seite (.lmc-*) ============================================================ */ html.lbe-light .lmc-page { background: #E8E1D6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 4 L76 40 L40 76 L4 40 Z' fill='none' stroke='rgba(154%2C107%2C58%2C.10)' stroke-width='.7'/%3E%3Cpath d='M40 18 L62 40 L40 62 L18 40 Z' fill='none' stroke='rgba(154%2C107%2C58%2C.05)' stroke-width='.4'/%3E%3C/svg%3E"); } html.lbe-light .lmc-hero__title { color: #18120C; text-shadow: 0 1px 6px rgba(0,0,0,.08); } html.lbe-light .lmc-hero__sub { color: #4A3E36; } html.lbe-light .lmc-stats { border-top-color: rgba(154,107,58,.26); border-bottom-color: rgba(154,107,58,.26); background: rgba(245,241,234,.55); } html.lbe-light .lmc-stat__label { color: rgba(24,18,12,.55); } html.lbe-light .lmc-card--no-photo .lmc-card__photo { background: linear-gradient(145deg, #EDE7DF 0%, #FAF8F4 50%, #E8E2DA 100%); } html.lbe-light .lmc-card--no-photo .lmc-card__overlay { background: linear-gradient( to top, rgba(245,241,235,.92) 0%, rgba(245,241,235,.55) 40%, rgba(245,241,235,.15) 70%, transparent 100% ); } html.lbe-light .lmc-card--no-photo .lmc-card__city { color: #18120C; } html.lbe-light .lmc-card--no-photo .lmc-card__count { color: rgba(24,18,12,.5); } html.lbe-light .lmc-anfrage__title { color: #18120C; text-shadow: 0 1px 4px rgba(0,0,0,.07); } html.lbe-light .lmc-anfrage__sub { color: #4A3E36; } html.lbe-light .lmc-anfrage__ornament { color: rgba(154,107,58,.55); } html.lbe-light .lmc-footer { background: #DDD6CC; border-top-color: rgba(154,107,58,.25); box-shadow: inset 0 1px 0 rgba(0,0,0,.05); } html.lbe-light .lmc-footer__copy { color: rgba(24,18,12,.50); } html.lbe-light .lmc-footer__links a { color: rgba(24,18,12,.58); } html.lbe-light .lmc-footer__links a:hover { color: #9A6B3A; } html.lbe-light .lmc-grid-section__label { color: rgba(24,18,12,.48); } /* ============================================================ HELL-MODUS — Nav Dropdown ============================================================ */ html.lbe-light .lm-nav__dropdown { background: rgba(245,241,234,.98); border-color: rgba(154,107,58,.28); box-shadow: 0 4px 6px rgba(0,0,0,.08), 0 20px 60px rgba(0,0,0,.14); } html.lbe-light .lm-nav__dropdown::before { background: rgba(245,241,234,.98); border-color: rgba(154,107,58,.28); } html.lbe-light .lm-nav__dd-sidebar { background: rgba(154,107,58,.05); border-right-color: rgba(154,107,58,.18); } html.lbe-light .lm-nav__dd-tab:hover, html.lbe-light .lm-nav__dd-tab.is-active { background: rgba(154,107,58,.1); } html.lbe-light .lm-nav__dd-tab__name { color: rgba(24,18,12,.45); } html.lbe-light .lm-nav__dd-tab:hover .lm-nav__dd-tab__name, html.lbe-light .lm-nav__dd-tab.is-active .lm-nav__dd-tab__name { color: #9A6B3A; } html.lbe-light .lm-nav__dd-tab__count { color: rgba(154,107,58,.5); background: rgba(154,107,58,.1); } html.lbe-light .lm-nav__dd-tab--all { border-top-color: rgba(154,107,58,.15); } html.lbe-light .lm-nav__dd-tab--all a { color: rgba(154,107,58,.6) !important; } html.lbe-light .lm-nav__dd-tab--all a:hover { color: #9A6B3A !important; } html.lbe-light .lm-nav__dd-panel li a { color: rgba(24,18,12,.5) !important; } html.lbe-light .lm-nav__dd-panel li a:hover { color: #18120c !important; }